From 7e635a1c4c8885d6d41330ed93eb134f33c4b196 Mon Sep 17 00:00:00 2001 From: Zarg <62082797+Zaarrg@users.noreply.github.com> Date: Tue, 17 Dec 2024 06:18:20 +0100 Subject: [PATCH 1/6] Fix Background still transparent after back - Fixed background of body and app still being transparent after stopping shell video watch --- .gitignore | 3 ++- src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js | 2 ++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index 71947782e..a26e747c3 100755 --- a/.gitignore +++ b/.gitignore @@ -3,4 +3,5 @@ /yarn.lock /npm-debug.log .DS_Store -.prettierignore \ No newline at end of file +.prettierignore +/.idea/ diff --git a/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js b/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js index 0df4e833f..75175e69a 100644 --- a/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js +++ b/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js @@ -15,6 +15,8 @@ const { t } = require('i18next'); const HorizontalNavBar = React.memo(({ className, route, query, title, backButton, searchBar, fullscreenButton, navMenu, ...props }) => { const backButtonOnClick = React.useCallback(() => { + document.querySelector('body').style.background = ''; + document.getElementById('app').style.background = ''; window.history.back(); }, []); const [fullscreen, requestFullscreen, exitFullscreen] = useFullscreen(); From 8d0e52c3edf972c302809c0f237b368364237e97 Mon Sep 17 00:00:00 2001 From: Zarg <62082797+Zaarrg@users.noreply.github.com> Date: Tue, 17 Dec 2024 10:42:42 +0100 Subject: [PATCH 2/6] Bingewatch fix stremio-shell v5 - Fixed bingewatch not working on stremio-shell v5 qt5 - ffmpeg errors for some reason with [ffmpeg] tls: Unknown error if the window change is to fast. - For now fixed with >600ms timeout. (In qt6 this does not happen) --- src/routes/Player/Player.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js index cdde60474..44dbc3107 100644 --- a/src/routes/Player/Player.js +++ b/src/routes/Player/Player.js @@ -207,7 +207,10 @@ const Player = ({ urlParams, queryParams }) => { const deepLinks = player.nextVideo.deepLinks; if (deepLinks.metaDetailsStreams && deepLinks.player) { window.location.replace(deepLinks.metaDetailsStreams); - window.location.href = deepLinks.player; + setTimeout(function() { + //Qt5 fix. Has to be >600 otherwise qt: [ffmpeg] tls: Unknown error + window.location.href = deepLinks.player; + }, 600); } else { window.location.replace(deepLinks.player ?? deepLinks.metaDetailsStreams); } From 0f6220b659feed8f93f5cdc982302943ed65bf27 Mon Sep 17 00:00:00 2001 From: Zarg <62082797+Zaarrg@users.noreply.github.com> Date: Wed, 18 Dec 2024 16:14:22 +0100 Subject: [PATCH 3/6] Numpad Arrows Shortcut + Better transparent background handling - Added numpad arrows as additional option for player usage. Needed because on some keyboard qt6 just shows the arrow keys as numpad arrows for some reason. - Better background transparent check on back nav. To prevent it always removing from undefined properties when not coming from the player --- src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js | 4 ++-- src/routes/Player/Player.js | 6 +++++- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js b/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js index 75175e69a..8ee8716b6 100644 --- a/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js +++ b/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js @@ -15,8 +15,8 @@ const { t } = require('i18next'); const HorizontalNavBar = React.memo(({ className, route, query, title, backButton, searchBar, fullscreenButton, navMenu, ...props }) => { const backButtonOnClick = React.useCallback(() => { - document.querySelector('body').style.background = ''; - document.getElementById('app').style.background = ''; + if (document.querySelector('body').style.background) document.querySelector('body').style.background = ''; + if (document.getElementById('app').style.background) document.getElementById('app').style.background = ''; window.history.back(); }, []); const [fullscreen, requestFullscreen, exitFullscreen] = useFullscreen(); diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js index 44dbc3107..0f8e35cda 100644 --- a/src/routes/Player/Player.js +++ b/src/routes/Player/Player.js @@ -478,6 +478,7 @@ const Player = ({ urlParams, queryParams }) => { break; } + case 'Numpad6': case 'ArrowRight': { if (!menusOpen && !nextVideoPopupOpen && video.state.time !== null) { const seekDuration = event.shiftKey ? settings.seekShortTimeDuration : settings.seekTimeDuration; @@ -487,6 +488,7 @@ const Player = ({ urlParams, queryParams }) => { break; } + case 'Numpad4': case 'ArrowLeft': { if (!menusOpen && !nextVideoPopupOpen && video.state.time !== null) { const seekDuration = event.shiftKey ? settings.seekShortTimeDuration : settings.seekTimeDuration; @@ -496,6 +498,7 @@ const Player = ({ urlParams, queryParams }) => { break; } + case 'Numpad8': case 'ArrowUp': { if (!menusOpen && !nextVideoPopupOpen && video.state.volume !== null) { onVolumeChangeRequested(video.state.volume + 5); @@ -503,6 +506,7 @@ const Player = ({ urlParams, queryParams }) => { break; } + case 'Numpad2': case 'ArrowDown': { if (!menusOpen && !nextVideoPopupOpen && video.state.volume !== null) { onVolumeChangeRequested(video.state.volume - 5); @@ -559,7 +563,7 @@ const Player = ({ urlParams, queryParams }) => { } }; const onKeyUp = (event) => { - if (event.code === 'ArrowRight' || event.code === 'ArrowLeft') { + if (event.code === 'ArrowRight' || event.code === 'ArrowLeft' || event.code === 'Numpad6' || event.code === 'Numpad4') { setSeeking(false); } }; From f56f84facfaa00787588b0b678187df08ef51909 Mon Sep 17 00:00:00 2001 From: Zarg <62082797+Zaarrg@users.noreply.github.com> Date: Thu, 19 Dec 2024 05:16:17 +0100 Subject: [PATCH 4/6] Auto Play fix and Proper Transparent Reset - Fixed on tv shows next video not autoplaying - Move transparency reset to unmount. Not sure why i didnt in the first place... --- src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js | 2 -- src/routes/Player/Player.js | 6 ++++++ 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js b/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js index 8ee8716b6..0df4e833f 100644 --- a/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js +++ b/src/common/NavBar/HorizontalNavBar/HorizontalNavBar.js @@ -15,8 +15,6 @@ const { t } = require('i18next'); const HorizontalNavBar = React.memo(({ className, route, query, title, backButton, searchBar, fullscreenButton, navMenu, ...props }) => { const backButtonOnClick = React.useCallback(() => { - if (document.querySelector('body').style.background) document.querySelector('body').style.background = ''; - if (document.getElementById('app').style.background) document.getElementById('app').style.background = ''; window.history.back(); }, []); const [fullscreen, requestFullscreen, exitFullscreen] = useFullscreen(); diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js index 0f8e35cda..b3e88144a 100644 --- a/src/routes/Player/Player.js +++ b/src/routes/Player/Player.js @@ -95,7 +95,11 @@ const Player = ({ urlParams, queryParams }) => { video.setProp('extraSubtitlesOutlineColor', settings.subtitlesOutlineColor); }, [settings.subtitlesSize, settings.subtitlesOffset, settings.subtitlesTextColor, settings.subtitlesBackgroundColor, settings.subtitlesOutlineColor]); + const stableNextVideoRef = React.useRef(player.nextVideo); + stableNextVideoRef.current = player.nextVideo; + const onEnded = React.useCallback(() => { + player.nextVideo = stableNextVideoRef.current; ended(); if (player.nextVideo !== null) { onNextVideoRequested(); @@ -603,6 +607,8 @@ const Player = ({ urlParams, queryParams }) => { video.events.off('subtitlesTrackLoaded', onSubtitlesTrackLoaded); video.events.off('extraSubtitlesTrackLoaded', onExtraSubtitlesTrackLoaded); video.events.off('implementationChanged', onImplementationChanged); + if (document.querySelector('body').style.background) document.querySelector('body').style.background = ''; + if (document.getElementById('app').style.background) document.getElementById('app').style.background = ''; }; }, []); From 038e198b745f8cae5a4ae24e0b3d82abb7f3d76a Mon Sep 17 00:00:00 2001 From: Zarg <62082797+Zaarrg@users.noreply.github.com> Date: Sun, 22 Dec 2024 11:30:50 +0100 Subject: [PATCH 5/6] Fixed Next Video playback properly - Next Video playback fixed, removed weird timer - Issue caused by loadfile being called twice and the onEnded function player.NextVideo always being null 1. When NextVideoPopUp called onNextVideoRequested() this called nextVideo() on the player. The player then sends the stop command to mpv. 1.1 The stop command triggers the event onEnded and as well sets the player.NextVideo to null because the video was stopped and because player.NextVideo was always null in that onEnded useCallback it always called window.history.back() even if onNextVideoRequested() was previously called by the next video pop up meaning player.nextVideo was not null - Fixed that the onEnded function always had player.NextVideo as null by using a nextVideoInitialData ref. This fixed the onEnded playback making it possible when the video ends the next video plays automatically. 2. Now when the user clicks on Watch Now on the NextVideoPopUp it would again like in 1. triggered onEnded and then triggering the onNextVideoRequested() inside onEnded. 2.2 This causes mpv to receive two playback commands causing as well a tls error. - Fixed that in qt as mpv returned every MPV_EVENT_END_FILE back to the web ui not matter if needed or not causing onEnded to trigger always and causing nextVideo(); to also trigger onEnded in the webui triggering again onNextVideoRequested and this causing a tls error because of two playback commands in quick succession. - Those two fixes fixed the nextVideo playback. --- src/routes/Player/Player.js | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js index b3e88144a..88a913fbf 100644 --- a/src/routes/Player/Player.js +++ b/src/routes/Player/Player.js @@ -78,6 +78,8 @@ const Player = ({ urlParams, queryParams }) => { }, [immersed, casting, video.state.paused, menusOpen, nextVideoPopupOpen]); const nextVideoPopupDismissed = React.useRef(false); + const nextVideoInitialData = React.useRef(player.nextVideo); + nextVideoInitialData.current = player.nextVideo; const defaultSubtitlesSelected = React.useRef(false); const defaultAudioTrackSelected = React.useRef(false); const [error, setError] = React.useState(null); @@ -95,11 +97,8 @@ const Player = ({ urlParams, queryParams }) => { video.setProp('extraSubtitlesOutlineColor', settings.subtitlesOutlineColor); }, [settings.subtitlesSize, settings.subtitlesOffset, settings.subtitlesTextColor, settings.subtitlesBackgroundColor, settings.subtitlesOutlineColor]); - const stableNextVideoRef = React.useRef(player.nextVideo); - stableNextVideoRef.current = player.nextVideo; - const onEnded = React.useCallback(() => { - player.nextVideo = stableNextVideoRef.current; + player.nextVideo = nextVideoInitialData.current; ended(); if (player.nextVideo !== null) { onNextVideoRequested(); @@ -211,10 +210,7 @@ const Player = ({ urlParams, queryParams }) => { const deepLinks = player.nextVideo.deepLinks; if (deepLinks.metaDetailsStreams && deepLinks.player) { window.location.replace(deepLinks.metaDetailsStreams); - setTimeout(function() { - //Qt5 fix. Has to be >600 otherwise qt: [ffmpeg] tls: Unknown error - window.location.href = deepLinks.player; - }, 600); + window.location.href = deepLinks.player; } else { window.location.replace(deepLinks.player ?? deepLinks.metaDetailsStreams); } From cbda6320bf85c85e4e2b2214507365f8f2752f52 Mon Sep 17 00:00:00 2001 From: Zarg <62082797+Zaarrg@users.noreply.github.com> Date: Mon, 23 Dec 2024 18:26:45 +0100 Subject: [PATCH 6/6] Added missing keybinds - Added skip, pause, previous media keybinds --- src/routes/Player/Player.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js index 88a913fbf..76aeaf2f4 100644 --- a/src/routes/Player/Player.js +++ b/src/routes/Player/Player.js @@ -466,6 +466,7 @@ const Player = ({ urlParams, queryParams }) => { React.useLayoutEffect(() => { const onKeyDown = (event) => { switch (event.code) { + case 'MediaPlayPause': case 'Space': { if (!menusOpen && !nextVideoPopupOpen && video.state.paused !== null) { if (video.state.paused) { @@ -479,6 +480,7 @@ const Player = ({ urlParams, queryParams }) => { break; } case 'Numpad6': + case 'MediaTrackNext': case 'ArrowRight': { if (!menusOpen && !nextVideoPopupOpen && video.state.time !== null) { const seekDuration = event.shiftKey ? settings.seekShortTimeDuration : settings.seekTimeDuration; @@ -489,6 +491,7 @@ const Player = ({ urlParams, queryParams }) => { break; } case 'Numpad4': + case 'MediaTrackPrevious': case 'ArrowLeft': { if (!menusOpen && !nextVideoPopupOpen && video.state.time !== null) { const seekDuration = event.shiftKey ? settings.seekShortTimeDuration : settings.seekTimeDuration;