diff --git a/src/routes/Player/ControlBar/ControlBar.js b/src/routes/Player/ControlBar/ControlBar.js index 01e97f982..f97a19cea 100644 --- a/src/routes/Player/ControlBar/ControlBar.js +++ b/src/routes/Player/ControlBar/ControlBar.js @@ -29,6 +29,7 @@ const ControlBar = ({ statistics, onPlayRequested, onPauseRequested, + onNextVideoRequested, onMuteRequested, onUnmuteRequested, onVolumeChangeRequested, @@ -74,14 +75,10 @@ const ControlBar = ({ } }, [paused, onPlayRequested, onPauseRequested]); const onNextVideoButtonClick = React.useCallback(() => { - if (nextVideo !== null && typeof nextVideo.deepLinks === 'object') { - if (nextVideo.deepLinks.player !== null) { - window.location.replace(nextVideo.deepLinks.player); - } else if (nextVideo.deepLinks.metaDetailsStreams !== null) { - window.location.replace(nextVideo.deepLinks.metaDetailsStreams); - } + if (nextVideo !== null && typeof onNextVideoRequested === 'function') { + onNextVideoRequested(); } - }, [nextVideo]); + }, [nextVideo, onNextVideoRequested]); const onMuteButtonClick = React.useCallback(() => { if (muted) { if (typeof onUnmuteRequested === 'function') { @@ -227,6 +224,7 @@ ControlBar.propTypes = { statistics: PropTypes.object, onPlayRequested: PropTypes.func, onPauseRequested: PropTypes.func, + onNextVideoRequested: PropTypes.func, onMuteRequested: PropTypes.func, onUnmuteRequested: PropTypes.func, onVolumeChangeRequested: PropTypes.func, diff --git a/src/routes/Player/NextVideoPopup/NextVideoPopup.js b/src/routes/Player/NextVideoPopup/NextVideoPopup.js index 2b38d5a67..bf4c7abda 100644 --- a/src/routes/Player/NextVideoPopup/NextVideoPopup.js +++ b/src/routes/Player/NextVideoPopup/NextVideoPopup.js @@ -7,7 +7,7 @@ const { default: Icon } = require('@stremio/stremio-icons/react'); const { Image, Button, CONSTANTS } = require('stremio/common'); const styles = require('./styles'); -const NextVideoPopup = ({ className, metaItem, nextVideo, onDismiss, onPlayNextVideoRequested }) => { +const NextVideoPopup = ({ className, metaItem, nextVideo, onDismiss, onNextVideoRequested }) => { const watchNowButtonRef = React.useRef(null); const [animationEnded, setAnimationEnded] = React.useState(false); const videoName = React.useMemo(() => { @@ -37,10 +37,10 @@ const NextVideoPopup = ({ className, metaItem, nextVideo, onDismiss, onPlayNextV } }, [onDismiss]); const onWatchNowButtonClick = React.useCallback(() => { - if (typeof onPlayNextVideoRequested === 'function') { - onPlayNextVideoRequested(); + if (typeof onNextVideoRequested === 'function') { + onNextVideoRequested(); } - }, [onPlayNextVideoRequested]); + }, [onNextVideoRequested]); React.useLayoutEffect(() => { if (animationEnded === true && watchNowButtonRef.current !== null) { watchNowButtonRef.current.focus(); @@ -96,7 +96,7 @@ NextVideoPopup.propTypes = { metaItem: PropTypes.object, nextVideo: PropTypes.object, onDismiss: PropTypes.func, - onPlayNextVideoRequested: PropTypes.func + onNextVideoRequested: PropTypes.func }; module.exports = NextVideoPopup; diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js index 602ae1516..fe574970a 100644 --- a/src/routes/Player/Player.js +++ b/src/routes/Player/Player.js @@ -116,11 +116,11 @@ const Player = ({ urlParams, queryParams }) => { const onEnded = React.useCallback(() => { ended(); if (player.nextVideo !== null) { - onPlayNextVideoRequested(); + onNextVideoRequested(); } else { window.history.back(); } - }, [player.nextVideo, onPlayNextVideoRequested]); + }, [player.nextVideo, onNextVideoRequested]); const onError = React.useCallback((error) => { console.error('Player', error); if (error.critical) { @@ -197,14 +197,15 @@ const Player = ({ urlParams, queryParams }) => { closeNextVideoPopup(); nextVideoPopupDismissed.current = true; }, []); - const onPlayNextVideoRequested = React.useCallback(() => { + const onNextVideoRequested = React.useCallback(() => { if (player.nextVideo !== null) { - window.location.replace( - typeof player.nextVideo.deepLinks.player === 'string' ? - player.nextVideo.deepLinks.player - : - player.nextVideo.deepLinks.metaDetailsStreams - ); + const deepLinks = player.nextVideo.deepLinks; + if (deepLinks.metaDetailsStreams && deepLinks.player) { + window.location.replace(deepLinks.metaDetailsStreams); + window.location.href = deepLinks.player; + } else { + window.location.replace(deepLinks.player ?? deepLinks.metaDetailsStreams); + } } }, [player.nextVideo]); const onVideoClick = React.useCallback(() => { @@ -697,6 +698,7 @@ const Player = ({ urlParams, queryParams }) => { statistics={streamingServer.statistics} onPlayRequested={onPlayRequested} onPauseRequested={onPauseRequested} + onNextVideoRequested={onNextVideoRequested} onMuteRequested={onMuteRequested} onUnmuteRequested={onUnmuteRequested} onVolumeChangeRequested={onVolumeChangeRequested} @@ -717,7 +719,7 @@ const Player = ({ urlParams, queryParams }) => { metaItem={player.metaItem !== null && player.metaItem.type === 'Ready' ? player.metaItem.content : null} nextVideo={player.nextVideo} onDismiss={onDismissNextVideoPopup} - onPlayNextVideoRequested={onPlayNextVideoRequested} + onNextVideoRequested={onNextVideoRequested} /> : null