Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-14 09:00:30 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor(Player): improve history for next video

Browse source
This commit is contained in:
Tim 2023-10-31 11:27:26 +01:00
parent bcd175ce66
commit 1b0ac128d1
3 changed files with 22 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/routes/Player/ControlBar/ControlBar.js
View file

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

10
src/routes/Player/NextVideoPopup/NextVideoPopup.js
View file

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

22
src/routes/Player/Player.js
View file

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