Fix scene player event handler initialisation (#2656)

ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx

@@ -417,16 +417,79 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = ({
       }
     }
 
-    // always stop the interactive client on initialisation
+    function loadstart(this: VideoJsPlayer) {
-    interactiveClient.pause();
+      // handle offset after loading so that we get the correct current source
-    interactiveReady.current = false;
+      handleOffset(this);
+    }
 
-    if (!scene || scene.id === sceneId.current) return;
+    function onPlay(this: VideoJsPlayer) {
-    sceneId.current = scene.id;
+      this.poster("");
+      if (scene?.interactive && interactiveReady.current) {
+        interactiveClient.play(this.currentTime());
+      }
+    }
+
+    function pause() {
+      interactiveClient.pause();
+    }
+
+    function timeupdate(this: VideoJsPlayer) {
+      if (scene?.interactive && interactiveReady.current) {
+        interactiveClient.ensurePlaying(this.currentTime());
+      }
+      setTime(this.currentTime());
+    }
+
+    function seeking(this: VideoJsPlayer) {
+      this.play();
+    }
+
+    function error() {
+      handleError(true);
+    }
+
+    // changing source (eg when seeking) resets the playback rate
+    // so set the default in addition to the current rate
+    function ratechange(this: VideoJsPlayer) {
+      this.defaultPlaybackRate(this.playbackRate());
+    }
+
+    function loadedmetadata(this: VideoJsPlayer) {
+      if (!this.videoWidth() && !this.videoHeight()) {
+        // Occurs during preload when videos with supported audio/unsupported video are preloaded.
+        // Treat this as a decoding error and try the next source without playing.
+        // However on Safari we get an media event when m3u8 is loaded which needs to be ignored.
+        const currentFile = this.currentSrc();
+        if (currentFile != null && !currentFile.includes("m3u8")) {
+          // const play = !player.paused();
+          // handleError(play);
+          this.error(MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED);
+        }
+      }
+    }
 
     const player = playerRef.current;
     if (!player) return;
 
+    // always initialise event handlers since these are destroyed when the
+    // component is destroyed
+    player.on("loadstart", loadstart);
+    player.on("play", onPlay);
+    player.on("pause", pause);
+    player.on("timeupdate", timeupdate);
+    player.on("seeking", seeking);
+    player.on("error", error);
+    player.on("ratechange", ratechange);
+    player.on("loadedmetadata", loadedmetadata);
+
+    // don't re-initialise the player unless the scene has changed
+    if (!scene || scene.id === sceneId.current) return;
+    sceneId.current = scene.id;
+
+    // always stop the interactive client on initialisation
+    interactiveClient.pause();
+    interactiveReady.current = false;
+
     const auto =
       autoplay || (config?.autostartVideo ?? false) || initialTimestamp > 0;
     if (!auto && scene.paths?.screenshot) player.poster(scene.paths.screenshot);
@@ -474,66 +537,6 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = ({
     player.loop(looping);
     interactiveClient.setLooping(looping);
 
-    function loadstart(this: VideoJsPlayer) {
-      // handle offset after loading so that we get the correct current source
-      handleOffset(this);
-    }
-
-    player.on("loadstart", loadstart);
-
-    function onPlay(this: VideoJsPlayer) {
-      this.poster("");
-      if (scene?.interactive && interactiveReady.current) {
-        interactiveClient.play(this.currentTime());
-      }
-    }
-    player.on("play", onPlay);
-
-    function pause() {
-      interactiveClient.pause();
-    }
-    player.on("pause", pause);
-
-    function timeupdate(this: VideoJsPlayer) {
-      if (scene?.interactive && interactiveReady.current) {
-        interactiveClient.ensurePlaying(this.currentTime());
-      }
-      setTime(this.currentTime());
-    }
-    player.on("timeupdate", timeupdate);
-
-    function seeking(this: VideoJsPlayer) {
-      this.play();
-    }
-    player.on("seeking", seeking);
-
-    function error() {
-      handleError(true);
-    }
-    player.on("error", error);
-
-    // changing source (eg when seeking) resets the playback rate
-    // so set the default in addition to the current rate
-    function ratechange(this: VideoJsPlayer) {
-      this.defaultPlaybackRate(this.playbackRate());
-    }
-    player.on("ratechange", ratechange);
-
-    function loadedmetadata(this: VideoJsPlayer) {
-      if (!this.videoWidth() && !this.videoHeight()) {
-        // Occurs during preload when videos with supported audio/unsupported video are preloaded.
-        // Treat this as a decoding error and try the next source without playing.
-        // However on Safari we get an media event when m3u8 is loaded which needs to be ignored.
-        const currentFile = this.currentSrc();
-        if (currentFile != null && !currentFile.includes("m3u8")) {
-          // const play = !player.paused();
-          // handleError(play);
-          this.error(MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED);
-        }
-      }
-    }
-    player.on("loadedmetadata", loadedmetadata);
-
     player.load();
 
     if ((player as any).vttThumbnails?.src)