Skip to content

Shell: Fix binge watching flow #914

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: development
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 19 additions & 3 deletions src/routes/Player/Player.js
Original file line number Diff line number Diff line change
Expand Up @@ -114,17 +114,22 @@ const Player = ({ urlParams, queryParams }) => {
}, []);

const onEnded = React.useCallback(() => {
// here we need to explicitly check for isNavigating.current
// the ended event can be called multiple times by MPV inside Shell
if (isNavigating.current) {
return;
}

ended();
if (player.nextVideo !== null) {
onNextVideoRequested();
if (window.playerNextVideo !== null) {
nextVideo();

const deepLinks = window.playerNextVideo.deepLinks;
handleNextVideoNavigation(deepLinks);
} else {
window.history.back();
}
}, [player.nextVideo, onNextVideoRequested]);
}, []);

const onError = React.useCallback((error) => {
console.error('Player', error);
Expand Down Expand Up @@ -394,6 +399,14 @@ const Player = ({ urlParams, queryParams }) => {
closeNextVideoPopup();
}
}
if (player.nextVideo) {
// This is a workaround for the fact that when we call onEnded nextVideo from the player is already set to null since core unloads the stream
// we explicitly set it to a global variable so we can access it in the onEnded function
// this is not a good solution but it works for now
window.playerNextVideo = player.nextVideo;
} else {
window.playerNextVideo = null;
}
}, [player.nextVideo, video.state.time, video.state.duration]);

React.useEffect(() => {
Expand Down Expand Up @@ -429,6 +442,9 @@ const Player = ({ urlParams, queryParams }) => {
defaultSubtitlesSelected.current = false;
defaultAudioTrackSelected.current = false;
nextVideoPopupDismissed.current = false;
// we need a timeout here to make sure that previous page unloads and the new one loads
// avoiding race conditions and flickering
setTimeout(() => isNavigating.current = false, 1000);
}, [video.state.stream]);

React.useEffect(() => {
Expand Down