- {
+ console.log("loaded")
+ setTimeout(() => {
setLoading(false)
+ }, 500)
+
}}
/>
diff --git a/components/streetView.js b/components/streetview/streetView.js
similarity index 77%
rename from components/streetView.js
rename to components/streetview/streetView.js
index 04d3aed..02b8374 100644
--- a/components/streetView.js
+++ b/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",
diff --git a/components/streetview/svHandler.js b/components/streetview/svHandler.js
new file mode 100644
index 0000000..02685a0
--- /dev/null
+++ b/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 (
+
+
+
+ );
+};
+
+export default SvEmbedIframe;
diff --git a/pages/svEmbed.js b/pages/svEmbed.js
new file mode 100644
index 0000000..c7dac66
--- /dev/null
+++ b/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 (
+ <>
+
+
+
+ {
+ 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;
diff --git a/styles/globals.scss b/styles/globals.scss
index 1a66c6a..d08d285 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -2546,4 +2546,15 @@ div[dir="ltr"] {
.player-info {
font-size: 14px; /* Smaller font size */
}
-}
\ No newline at end of file
+}
+
+
+.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;
+}