test

components/headContent.js

@@ -76,10 +76,7 @@ export default function HeadContent({text}) {
 {/* <link rel="preconnect" href="https://fonts.googleapis.com"/>
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/> */}
 <link href="https://fonts.googleapis.com/css2?family=Jockey+One&display=swap" rel="stylesheet"/>
-<script
-      src="https://maps.googleapis.com/maps/api/js?v=weekly"
-      defer
-    ></script>
+
 
 
 {/* <script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool'></script> */}

components/home.js

@@ -50,8 +50,9 @@ import clientConfig from "@/clientConfig";
 import { useGoogleLogin } from "@react-oauth/google";
 import LeagueModal from "./leagueModal";
 import haversineDistance from "./utils/haversineDistance";
-import StreetView from "./streetView";
+import StreetView from "./streetview/streetView";
 import Stats from "stats.js";
+import SvEmbedIframe from "./streetview/svHandler";
 
 const initialMultiplayerState = {
   connected: false,
@@ -1859,7 +1860,7 @@ setShowCountryButtons(false)
 
       <main className={`home`} id="main">
 
-        <StreetView
+        <SvEmbedIframe
           nm={gameOptions?.nm}
           npz={gameOptions?.npz}
           showAnswer={showAnswer}
@@ -1870,7 +1871,11 @@ setShowCountryButtons(false)
           setLoading={setLoading}
           hidden={(!latLong || !latLong.lat || !latLong.long)|| loading}
           onLoad={() => {
+            console.log("loaded")
+            setTimeout(() => {
             setLoading(false)
+            }, 500)
+
           }}
           />
 

components/streetView.js → components/streetview/streetView.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from "react";
-import fixBranding from "./utils/fixBranding";
+import fixBranding from "../utils/fixBranding";
 
 const StreetView = ({
   nm = false,
@@ -12,6 +12,41 @@ const StreetView = ({
   onLoad
 }) => {
 
+
+  useEffect(()=>{
+
+    const originalAppendChild = Element.prototype.appendChild;
+
+    // Override appendChild
+    Element.prototype.appendChild = function (element) {
+        if (element.tagName === 'SCRIPT' && element.src.includes('QuotaService.RecordEvent')) {
+            return element; // Do not append the script
+        }
+
+        return originalAppendChild.call(this, element);
+    };
+
+    const observer = new MutationObserver((mutationsList) => {
+      for (const mutation of mutationsList) {
+          for (const node of mutation.addedNodes) {
+              if (
+                  node.tagName === 'STYLE' &&
+                  (node.getAttribute('nonce') === 'undefined') || (node.innerText.includes('.mapsConsumerUiSceneCoreScene__root') || (node.innerText.includes('.dismissButton')))
+              ) {
+                  node.parentNode.removeChild(node);
+              }
+          }
+      }
+    });
+    // head
+    observer.observe(document.head, { childList: true });
+      return () => {
+        Element.prototype.appendChild = originalAppendChild;
+        observer.disconnect();
+      }
+
+      },[])
+
   const panoramaRef = useRef(null);
   const [loading, setLoading] = useState(true);
   const googleMapsDivId = "googlemaps";
@@ -70,10 +105,7 @@ const StreetView = ({
       panoramaRef.current.setPov(panoramaRef.current.getPhotographerPov());
       panoramaRef.current.setZoom(0);
     }, 100);
-    setTimeout(() => {
-      if(lat && long && onLoad)
       onLoad();
-    }, 500);
 
     panoramaRef.current.addListener("pano_changed", () => {
       setLoading(false);
@@ -128,11 +160,9 @@ const StreetView = ({
   allow="accelerometer; autoplay; clipboard-write; encrypted-media; picture-in-picture"
   onLoad={() => {
     setLoading(false);
-    setTimeout(() => {
       if (onLoad && lat && long) {
         onLoad(); // Ensure onLoad is called after 500ms delay
       }
-    }, 500); // 500ms delay
   }}
   style={{
     width: "100vw",

components/streetview/svHandler.js

@@ -0,0 +1,88 @@
+import React, { useState, useEffect, useRef } from "react";
+
+const SvEmbedIframe = (params) => {
+  const iframeRef = useRef(null);
+  const [iframeSrc, setIframeSrc] = useState(`/svEmbed`);
+
+
+  // Function to send updated params via postMessage to the iframe
+  const sendMessageToIframe = () => {
+    let passableParams = {
+      nm: params.nm,
+      npz: params.npz,
+      showRoadLabels: params.showRoadLabels ,
+      lat: params.lat || null,
+      long: params.long || null,
+      showAnswer: params.showAnswer || false,
+      hidden: false, onLoad: undefined };
+    if (iframeRef.current) {
+      iframeRef.current.contentWindow.postMessage({ type: "updateProps", props: passableParams }, "*");
+    }
+  };
+
+  useEffect(() => {
+    // reload iframe when lat or long changes
+    console.log("lat or long changed", params.lat, params.long);
+    setIframeSrc(`/svEmbed?nm=${params.nm}&npz=${params.npz}&showRoadLabels=${params.showRoadLabels}&lat=${params.lat}&long=${params.long}&showAnswer=${params.showAnswer}&hidden=false`);
+  }, [params?.lat, params?.long]);
+
+  useEffect(() => {
+    sendMessageToIframe();
+
+  }, [JSON.stringify(params)]);
+
+  useEffect(() => {
+    // listen to events from iframe (onLoad) call params.onLoad
+    const handleMessage = (event) => {
+      console.log("Received message from iframe", event.data);
+      if (event.data && typeof event.data === "object" && event.data.type === "onLoad") {
+        params.onLoad();
+      }
+    };
+
+    if (typeof window !== "undefined") {
+      window.onmessage = handleMessage;
+    }
+    return () => {
+      window.onmessage = null;
+    }
+  }, []);
+
+    // Watch for window.reloadLoc to reload the iframe
+    useEffect(() => {
+      window.reloadLoc = () => {
+        if (iframeRef.current) {
+          // Force reload by changing iframe src
+          iframeRef.current.src = iframeRef.current.src;
+        }
+      }
+      return () => {
+        window.reloadLoc = null;
+      }
+
+    }, [JSON.stringify(params)]);
+
+
+
+  if(!params.lat && !params.long) {
+    return null;
+  }
+
+  return (
+    <div>
+      <iframe
+        ref={iframeRef}
+        src={iframeSrc} // Dynamically update the iframe src
+        width="100%"
+        height="100%"
+        className={`svframe ${params?.hidden ? "svhidden" : ""}`}
+        style={{ border: "none", position: "fixed", top: 0, left: 0}}
+        title="Street View Embed"
+        frameBorder="0"
+        onLoad={() => sendMessageToIframe()}
+      ></iframe>
+    </div>
+  );
+};
+
+export default SvEmbedIframe;

pages/svEmbed.js

@@ -0,0 +1,80 @@
+import React, { useState, useEffect } from "react";
+import StreetView from "../components/streetview/streetView";
+import Head from "next/head";
+
+const SvEmbed = () => {
+  const [props, setProps] = useState({
+    nm: false,
+    npz: false,
+    showRoadLabels: true,
+    lat: null,
+    long: null,
+    showAnswer: false,
+    hidden: false,
+  });
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const searchParams = new URLSearchParams(window.location.search);
+      setProps({
+        nm: searchParams.get("nm") === "true",
+        npz: searchParams.get("npz") === "true",
+        showRoadLabels: searchParams.get("showRoadLabels") !== "false",
+        lat: parseFloat(searchParams.get("lat")),
+        long: parseFloat(searchParams.get("long")),
+        showAnswer: searchParams.get("showAnswer") === "true",
+        hidden: searchParams.get("hidden") === "true",
+      });
+    }
+  }, []);
+
+  // PostMessage listener to update props dynamically
+  useEffect(() => {
+    const handleMessage = (event) => {
+      if (event.data && typeof event.data === "object" && event.data.type === "updateProps") {
+        console.log("Received message from parent", event.data);
+        const newProps = { ...props, ...event.data.props };
+        setProps(newProps);
+      }
+    };
+
+    if (typeof window !== "undefined") {
+      window.addEventListener("message", handleMessage);
+    }
+
+    return () => {
+      if (typeof window !== "undefined") {
+        window.removeEventListener("message", handleMessage);
+      }
+    };
+  }, [props]);
+
+  return (
+    <>
+    <Head>
+    <script
+      src="https://maps.googleapis.com/maps/api/js?v=weekly"
+      defer
+    ></script>
+    </Head>
+    <StreetView
+      nm={props.nm}
+      npz={props.npz}
+      showRoadLabels={props.showRoadLabels}
+      lat={props.lat}
+      long={props.long}
+      showAnswer={props.showAnswer}
+      hidden={props.hidden}
+      onLoad={() => {
+        console.log("StreetView Loaded");
+        // send to parent window that the iframe has loaded
+        if (typeof window !== "undefined") {
+          window.parent.postMessage({ type: "onLoad" }, "*");
+        }
+      }}
+    />
+    </>
+  );
+};
+
+export default SvEmbed;

styles/globals.scss

@@ -2546,4 +2546,15 @@ div[dir="ltr"] {
   .player-info {
     font-size: 14px; /* Smaller font size */
   }
-}
+}
+
+
+.svframe {
+  opacity: 1;
+  transition: opacity 0.5s ease-in-out; /* This will ensure smooth transition for non-hidden state */
+}
+.svhidden {
+  opacity: 0;
+  pointer-events: none;
+  transition: none;
+}