Merge pull request #304 from samvera-labs/restricted-item-autoplay

Initialize display timer always when autoplay is ON
samvera-labs · Dec 4, 2023 · 61614b2 · 61614b2
2 parents 3f4b4cd + f968259
commit 61614b2
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 17 deletions.
diff --git a/src/components/MediaPlayer/MediaPlayer.js b/src/components/MediaPlayer/MediaPlayer.js
@@ -46,7 +46,7 @@ const MediaPlayer = ({ enableFileDownload = false, enablePIP = false }) => {
     autoAdvance,
   } =
     manifestState;
-  const { playerFocusElement, currentTime, isEnded } = playerState;
+  const { playerFocusElement, currentTime } = playerState;
 
   const canvasIndexRef = React.useRef();
   canvasIndexRef.current = canvasIndex;
@@ -81,12 +81,31 @@ const MediaPlayer = ({ enableFileDownload = false, enablePIP = false }) => {
     };
   }, [manifest, canvasIndex, srcIndex]); // Re-run the effect when manifest changes
 
-  const initCanvas = (canvasId, fromStart) => {
-    // Clear existing timeout for the display of inaccessible message
-    if (canvasMessageTimerRef.current) {
-      clearTimeout(canvasMessageTimerRef.current);
-      canvasMessageTimerRef.current = null;
+  /**
+   * Handle the display timer for the inaccessbile message when autoplay is turned
+   * on/off while the current item is a restricted item
+   */
+  React.useEffect(() => {
+    if (canvasIsEmpty) {
+      // Clear the existing timer when the autoplay is turned off when displaying
+      // inaccessible message
+      if (!autoAdvance && canvasMessageTimerRef.current) {
+        clearCanvasMessageTimer();
+      } else {
+        // Create a timer to advance to the next Canvas when autoplay is turned
+        // on when inaccessible message is been displayed 
+        createCanvasMessageTimer();
+      }
     }
+  }, [autoAdvance]);
+
+  /**
+   * Initialize the next Canvas to be viewed in the player instance
+   * @param {Number} canvasId index of the Canvas to be loaded into the player
+   * @param {Boolean} fromStart flag to indicate how to start new player instance 
+   */
+  const initCanvas = (canvasId, fromStart) => {
+    clearCanvasMessageTimer();
     try {
       const {
         isMultiSource,
@@ -178,18 +197,10 @@ const MediaPlayer = ({ enableFileDownload = false, enablePIP = false }) => {
       });
       /*
         Create a timer to display the placeholderCanvas message when,
-        autoplay is turned on and the player reaches an inaccesible item
-        while playing through canvases
+        autoplay is turned on
       */
-      if (autoAdvanceRef.current && isEnded) {
-        // Reset the isEnded flag when the Canvas is empty
-        playerDispatch({ isEnded: false, type: 'setIsEnded' });
-        canvasMessageTimerRef.current = setTimeout(() => {
-          manifestDispatch({
-            canvasIndex: canvasIndexRef.current + 1,
-            type: 'switchCanvas',
-          });
-        }, CANVAS_MESSAGE_TIMEOUT);
+      if (autoAdvanceRef.current) {
+        createCanvasMessageTimer();
       }
       manifestDispatch({ type: 'setCanvasIsEmpty', isEmpty: true });
     } else {
@@ -219,6 +230,28 @@ const MediaPlayer = ({ enableFileDownload = false, enablePIP = false }) => {
     }
   };
 
+  /**
+   * Create timer to display the inaccessible Canvas message
+   */
+  const createCanvasMessageTimer = () => {
+    canvasMessageTimerRef.current = setTimeout(() => {
+      manifestDispatch({
+        canvasIndex: canvasIndexRef.current + 1,
+        type: 'switchCanvas',
+      });
+    }, CANVAS_MESSAGE_TIMEOUT);
+  };
+
+  /**
+   * Clear existing timer to display the inaccessible Canvas message
+   */
+  const clearCanvasMessageTimer = () => {
+    if (canvasMessageTimerRef.current) {
+      clearTimeout(canvasMessageTimerRef.current);
+      canvasMessageTimerRef.current = null;
+    }
+  };
+
   /**
    * Switch player when navigating across canvases
    * @param {Number} index canvas index to be loaded into the player

diff --git a/src/components/MediaPlayer/VideoJS/VideoJSPlayer.js b/src/components/MediaPlayer/VideoJS/VideoJSPlayer.js
@@ -415,6 +415,13 @@ function VideoJSPlayer({
             item: nextFirstItem,
             type: 'switchItem',
           });
+        } else if (nextFirstItem.isEmpty) {
+          // Switch the currentNavItem and clear isEnded flag
+          manifestDispatch({
+            item: nextFirstItem,
+            type: 'switchItem',
+          });
+          playerDispatch({ isEnded: false, type: 'setIsEnded' });
         } else {
           manifestDispatch({ item: null, type: 'switchItem' });
         }