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
This commit is contained in:
mayeaux 2022-06-29 12:47:18 +02:00 committed by GitHub
commit 3f44b80603
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 38 additions and 22 deletions

View file

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

View file

@ -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;
}
};

View file

@ -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