fix for the update of the spherical renderer

src/app/layout.tsx

@@ -5,8 +5,8 @@ import { Inter } from 'next/font/google'
 const inter = Inter({ subsets: ['latin'] })
 
 export const metadata: Metadata = {
-  title: 'Generative AI Adventure',
-  description: 'Generative AI Adventure',
+  title: 'VideoQuest: A generative AI adventure!',
+  description: 'VideoQuest: A generative AI adventure!',
 }
 
 export default function RootLayout({

src/components/business/spherical-image.tsx

@@ -2,6 +2,7 @@ import { ReactPhotoSphereViewer } from "react-photo-sphere-viewer"
 
 import { SceneEventHandler } from "./types"
 import { RenderedScene } from "@/app/types"
+import { useEffect, useRef, useState } from "react"
 
 export function SphericalImage({
   rendered,
@@ -14,6 +15,61 @@ export function SphericalImage({
   className?: string
   debug?: boolean
 }) {
+  const sceneConfig = JSON.stringify({ rendered, debug })
+  const [lastSceneConfig, setLastSceneConfig] = useState<string>(sceneConfig)
+  const ref = useRef<{
+    needsUpdate: () => void
+    setPanorama: (src: string, options: Record<string, any>) => Promise<void>
+    setOptions: (options: Record<string, any>) => void
+  }>(null)
+
+  const options = {
+    defaultZoomLvl: 1,
+    overlay: rendered.maskUrl || undefined,
+    overlayOpacity: debug ? 0.5 : 0,
+    /*
+    panoData: {
+      fullWidth: 2000,
+      fullHeight: 1200,
+      croppedWidth: 1024,
+      croppedHeight: 512,
+      croppedX: 0,
+      croppedY: 200,
+      // poseHeading: 0, // 0 to 360
+      posePitch: 0, // -90 to 90
+      // poseRoll: 0, // -180 to 180
+    }
+    */
+  }
+
+  useEffect(() => {
+    const task = async () => {
+      // console.log("SphericalImage: useEffect")
+      if (sceneConfig !== lastSceneConfig) {
+        // console.log("SphericalImage: scene config changed!")
+    
+        if (!ref.current) {
+          // console.log("SphericalImage: no ref!")
+          setLastSceneConfig(sceneConfig)
+          return
+        }
+
+        // console.log("SphericalImage: calling setOptions")
+        // console.log("SphericalImage: changing the panorama to: " + rendered.assetUrl.slice(0, 120))
+      
+        await ref.current.setPanorama(rendered.assetUrl, {
+          ...options,
+          showLoader: false,
+        })
+        ref.current.setOptions(options)
+        // console.log("SphericalImage: asking to re-render")
+        ref.current.needsUpdate()
+
+        setLastSceneConfig(sceneConfig)
+      }
+    }
+    task()
+  }, [sceneConfig, rendered.assetUrl, ref.current])
 
   if (!rendered.assetUrl) {
     return null
@@ -22,30 +78,15 @@ export function SphericalImage({
   return (
     <ReactPhotoSphereViewer
       src={rendered.assetUrl}
-      // ref={ref}
+      ref={ref}
       container=""
       containerClass={className}
       // 
       height="100vh"
       width="100%"
 
-      defaultZoomLvl={1}
-
-      overlay={rendered.maskUrl || undefined}
-      overlayOpacity={debug ? 0.5 : 0}
-
-      panoData={{
-        fullWidth: 1300,
-        fullHeight: 700,
-        croppedWidth: 1024,
-        croppedHeight: 512,
-        croppedX: 0,
-        croppedY: 120,
-        // poseHeading: 0, // 0 to 360
-         posePitch: 0, // -90 to 90
-        // poseRoll: 0, // -180 to 180
-      }}
-
+      {...options}
+   
       onClick={(data, instance) => {
         console.log("on click:")
         const position = data.target.getPosition()