From 41905f420e0bb6c0305b2c72d150e5b7253bd6a9 Mon Sep 17 00:00:00 2001 From: Anthony Date: Fri, 24 Jun 2022 18:40:22 +0200 Subject: [PATCH] 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 --- .../viewers/videoViewer/internal/chapters.jsx | 2 + .../viewers/videoViewer/internal/videojs.jsx | 55 ++++++++++++------- ui/component/viewers/videoViewer/view.jsx | 3 +- 3 files changed, 38 insertions(+), 22 deletions(-) diff --git a/ui/component/viewers/videoViewer/internal/chapters.jsx b/ui/component/viewers/videoViewer/internal/chapters.jsx index 5975c6368..e5b69bda9 100644 --- a/ui/component/viewers/videoViewer/internal/chapters.jsx +++ b/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(); } } diff --git a/ui/component/viewers/videoViewer/internal/videojs.jsx b/ui/component/viewers/videoViewer/internal/videojs.jsx index 6cb7464f2..47cae4367 100644 --- a/ui/component/viewers/videoViewer/internal/videojs.jsx +++ b/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(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(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(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(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(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(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(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; } }; diff --git a/ui/component/viewers/videoViewer/view.jsx b/ui/component/viewers/videoViewer/view.jsx index e8d2f7417..565b9bde1 100644 --- a/ui/component/viewers/videoViewer/view.jsx +++ b/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