Merge pull request #253 from samvera-labs/no-auto-advance

Set no-auto-advance as default behavior in the player

src/components/MediaPlayer/VideoJS/VideoJSPlayer.js

@@ -67,7 +67,6 @@ function VideoJSPlayer({
 
   const [cIndex, setCIndex] = React.useState(canvasIndex);
   const [isReady, setIsReady] = React.useState(false);
-  const [currentPlayer, setCurrentPlayer] = React.useState(null);
   const [mounted, setMounted] = React.useState(false);
   const [isContained, setIsContained] = React.useState(false);
   const [canvasSegments, setCanvasSegments] = React.useState([]);
@@ -93,6 +92,8 @@ function VideoJSPlayer({
   let currentNavItemRef = React.useRef();
   currentNavItemRef.current = currentNavItem;
 
+  let currentPlayerRef = React.useRef(null);
+
   // Using dynamic imports to enforce code-splitting in webpack
   // https://webpack.js.org/api/module-methods/#dynamic-expressions-in-import
   const loadResources = async (langKey) => {
@@ -107,8 +108,7 @@ function VideoJSPlayer({
   };
 
   /**
-   * Initialize player when creating for the first time and cleanup
-   * when unmounting after the player is being used
+   * Initialize player when creating for the first time
    */
   React.useEffect(async () => {
     const options = {
@@ -128,26 +128,25 @@ function VideoJSPlayer({
     let newPlayer;
     if (playerRef.current != null) {
       videojs.addLanguage(options.language, languageJSON);
-      newPlayer = videojs(playerRef.current, options);
+      newPlayer = currentPlayerRef.current = videojs(playerRef.current, options);
     }
 
-
     /* Another way to add a component to the controlBar */
     // newPlayer.getChild('controlBar').addChild('vjsYo', {});
 
-    setCurrentPlayer(newPlayer);
-
     setMounted(true);
 
     playerDispatch({
       player: newPlayer,
       type: 'updatePlayer',
     });
+  }, []);
 
-    // Clean up player instance on component unmount
+  // Clean up player instance on component unmount
+  React.useEffect(() => {
     return () => {
-      if (newPlayer != null) {
-        newPlayer.dispose();
+      if (currentPlayerRef.current != null) {
+        currentPlayerRef.current.dispose();
         setMounted(false);
         setIsReady(false);
       }
@@ -266,7 +265,7 @@ function VideoJSPlayer({
       fragment's start time. Without this the 'timeupdate' event tries
       to read currentTime before the player is ready, and triggers an error.
       */
-        if (isClicked || isEnded) {
+        if (isClicked && isEnded) {
           player.currentTime(currentTimeRef.current);
         }
       });
@@ -319,7 +318,7 @@ function VideoJSPlayer({
    * 3. timeupdate event fired when playing the media file
    */
   React.useEffect(() => {
-    if (!player || !currentPlayer) {
+    if (!player || !currentPlayerRef.current) {
       return;
     }
     if (currentNavItem !== null && isReady && !isPlaylist) {
@@ -371,7 +370,7 @@ function VideoJSPlayer({
    * doesn't fall within a defined structure item
    */
   React.useEffect(() => {
-    if (!player || !currentPlayer) {
+    if (!player || !currentPlayerRef.current) {
       return;
     } else if (isContained == false && player.markers && !isPlaylist) {
       player.markers.removeAll();
@@ -397,9 +396,7 @@ function VideoJSPlayer({
   const handleEnded = () => {
     if (!autoAdvanceRef.current) {
       return;
-    }
-
-    if (hasNextSection({ canvasIndex, manifest })) {
+    } else if (hasNextSection({ canvasIndex, manifest })) {
       manifestDispatch({
         canvasIndex: canvasIndex + 1,
         type: 'switchCanvas',

src/components/MediaPlayer/VideoJS/components/js/VideoJSProgress.js

@@ -114,6 +114,18 @@ class VideoJSProgress extends vjsComponent {
       if (nextItems.length == 0) options.nextItemClicked(0, targets[0].start);
       player.trigger('ended');
       player.pause();
+
+      // On the next play event set the time to start or a seeked time
+      // in between the 'ended' event and 'play' event
+      // Reference: https://github.com/videojs/video.js/blob/main/src/js/control-bar/play-toggle.js#L128
+      player.one('play', () => {
+        let time = player.currentTime();
+        if (time < end) {
+          player.currentTime(time);
+        } else {
+          player.currentTime(start);
+        }
+      });
     }
 
     // Mark the preceding dummy slider ranges as 'played'

src/components/Transcript/Transcript.js

@@ -108,10 +108,6 @@ const Transcript = ({ playerID, manifestUrl, transcripts = [] }) => {
             }
           });
         });
-        player.addEventListener('ended', function (e) {
-          // render next canvas related transcripts
-          setCanvasIndex(canvasIndex + 1);
-        });
       }
     });
   });

src/components/Transcript/TranscriptMenu/TranscriptDownloader.js

@@ -22,9 +22,10 @@ const TranscriptDownloader = ({ fileUrl, fileName, machineGenerated, fileExt })
 };
 
 TranscriptDownloader.propTypes = {
-  fileUrl: PropTypes.string.isRequired,
-  fileName: PropTypes.string.isRequired,
-  machineGenerated: PropTypes.bool.isRequired
+  fileUrl: PropTypes.string,
+  fileName: PropTypes.string,
+  machineGenerated: PropTypes.bool,
+  fileExt: PropTypes.string,
 };
 
 export default TranscriptDownloader;