dont dispose between videos and update current time immediately

fix chapters button not being hidden

add back live ui

fix chapters button showing up when using miniplayer

bugfix race condition for removing chapters button

move chapter loading to videoviewer component

remove unnecessary claim being passed

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,
-      timeDivider: !isLivestreamClaim,
-      durationDisplay: !isLivestreamClaim,
-      remainingTimeDisplay: !isLivestreamClaim,
+      currentTimeDisplay: true,
+      timeDivider: true,
+      durationDisplay: true,
+      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