Merge pull request #1756 from OdyseeTeam/dont-dispose-when-switching

Don't dispose switching between video/livestream, chapter button fix, current time not updating quickly fix

ui/component/viewers/videoViewer/internal/chapters.jsx

@@ -184,6 +184,8 @@ export function parseAndLoad(player: any, claim: StreamClaim) {
     overrideHoverTooltip(player, tsData, duration);
   } else {
     deleteHoverInformation(player);
+    // $FlowIssue
+    player?.controlBar?.getChild('ChaptersButton')?.hide();
   }
 }
 

ui/component/viewers/videoViewer/internal/videojs.jsx

@@ -108,6 +108,7 @@ type Props = {
   activeLivestreamForChannel: any,
   doToast: ({ message: string, linkText: string, linkTarget: string }) => void,
 };
+
 const VIDEOJS_VOLUME_PANEL_CLASS = 'VolumePanel';
 
 const IS_IOS = platform.isIOS();
@@ -250,17 +251,17 @@ export default React.memo<Props>(function VideoJs(props: Props) {
     muted: startMuted,
     plugins: { eventTracking: true, overlay: OVERLAY.OVERLAY_DATA },
     controlBar: {
-      currentTimeDisplay: !isLivestreamClaim,
+      currentTimeDisplay: true,
-      timeDivider: !isLivestreamClaim,
+      timeDivider: true,
-      durationDisplay: !isLivestreamClaim,
+      durationDisplay: true,
-      remainingTimeDisplay: !isLivestreamClaim,
+      remainingTimeDisplay: true,
       subsCapsButton: !IS_IOS,
     },
     techOrder: ['chromecast', 'html5'],
     ...Chromecast.getOptions(),
     bigPlayButton: embedded, // only show big play button if embedded
-    liveui: isLivestreamClaim,
     suppressNotSupportedError: true,
+    liveui: true,
   };
 
   // TODO: would be nice to pull this out into functions file
@@ -352,17 +353,6 @@ export default React.memo<Props>(function VideoJs(props: Props) {
 
       let canUseOldPlayer = window.oldSavedDiv && vjsParent;
       const isLivestream = isLivestreamClaim && userClaimId;
-      // make an additional check and reinstantiate if switching between player types
-      // switching between types on iOS causes issues and this is a faster solution
-      if (vjsParent && window.player) {
-        const oldVideoType = window.player.isLivestream ? 'livestream' : 'video';
-        const switchFromLivestreamToVideo = oldVideoType === 'livestream' && !isLivestream;
-        const switchFromVideoToLivestream = oldVideoType === 'video' && isLivestream;
-        if (switchFromLivestreamToVideo || switchFromVideoToLivestream) {
-          canUseOldPlayer = false;
-          window.player.dispose();
-        }
-      }
 
       // initialize videojs if it hasn't been done yet
       if (!canUseOldPlayer) {
@@ -378,6 +368,27 @@ export default React.memo<Props>(function VideoJs(props: Props) {
         vjsPlayer = window.player;
       }
 
+      // hide unused elements on livestream
+      if (isLivestream) {
+        vjsPlayer.addClass('vjs-live');
+        vjsPlayer.addClass('vjs-liveui');
+        // $FlowIssue
+        vjsPlayer.controlBar.currentTimeDisplay?.el().style.setProperty('display', 'none', 'important');
+        // $FlowIssue
+        vjsPlayer.controlBar.timeDivider?.el().style.setProperty('display', 'none', 'important');
+        // $FlowIssue
+        vjsPlayer.controlBar.durationDisplay?.el().style.setProperty('display', 'none', 'important');
+      } else {
+        vjsPlayer.removeClass('vjs-live');
+        vjsPlayer.removeClass('vjs-liveui');
+        // $FlowIssue
+        vjsPlayer.controlBar.currentTimeDisplay?.el().style.setProperty('display', 'block', 'important');
+        // $FlowIssue
+        vjsPlayer.controlBar.timeDivider?.el().style.setProperty('display', 'block', 'important');
+        // $FlowIssue
+        vjsPlayer.controlBar.durationDisplay?.el().style.setProperty('display', 'block', 'important');
+      }
+
       // Add recsys plugin
       if (shareTelemetry) {
         vjsPlayer.recsys.options_ = {
@@ -548,6 +559,7 @@ export default React.memo<Props>(function VideoJs(props: Props) {
     // Cleanup
     return () => {
       window.removeEventListener('keydown', keyDownHandlerRef.current);
+
       const containerDiv = containerRef.current;
       // $FlowFixMe
       containerDiv && containerDiv.removeEventListener('wheel', videoScrollHandlerRef.current);
@@ -563,6 +575,7 @@ export default React.memo<Props>(function VideoJs(props: Props) {
       }
 
       const player = playerRef.current;
+
       if (player) {
         try {
           window.cast.framework.CastContext.getInstance().getCurrentSession().endSession(false);
@@ -578,9 +591,6 @@ export default React.memo<Props>(function VideoJs(props: Props) {
           window.player.controlBar?.playToggle?.hide();
         }
 
-        // $FlowIssue
-        window.player?.controlBar?.getChild('ChaptersButton')?.hide();
-
         // this solves an issue with portrait videos
         // $FlowIssue
         const videoDiv = window.player?.tech_?.el(); // video element
@@ -592,11 +602,14 @@ export default React.memo<Props>(function VideoJs(props: Props) {
 
         window.player.trigger('playerClosed');
 
-        window.player.currentTime(0);
-
         // stop streams running in background
         window.player.loadTech_('html5', null);
 
+        window.player.currentTime(0);
+
+        // makes the current time update immediately
+        window.player.trigger('timeupdate');
+
         window.player.claimSrcVhs = null;
       }
     };

ui/component/viewers/videoViewer/view.jsx

@@ -451,7 +451,8 @@ function VideoViewer(props: Props) {
     // turn off old events to prevent duplicate runs
     player.on('playerClosed', cancelOldEvents);
 
-    Chapters.parseAndLoad(player, claim);
+    // add (or remove) chapters button and time tooltips when video is ready
+    player.one('loadstart', () => Chapters.parseAndLoad(player, claim));
 
     playerRef.current = player;
   }, playerReadyDependencyList); // eslint-disable-line