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:
commit
3f44b80603
3 changed files with 38 additions and 22 deletions
|
@ -184,6 +184,8 @@ export function parseAndLoad(player: any, claim: StreamClaim) {
|
|||
overrideHoverTooltip(player, tsData, duration);
|
||||
} else {
|
||||
deleteHoverInformation(player);
|
||||
// $FlowIssue
|
||||
player?.controlBar?.getChild('ChaptersButton')?.hide();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
};
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue