diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js index 107689ccf..90f6d25de 100644 --- a/src/routes/Player/Player.js +++ b/src/routes/Player/Player.js @@ -16,7 +16,7 @@ const styles = require('./styles'); const Player = ({ urlParams }) => { const { core } = useServices(); - const player = usePlayer(urlParams); + const [player, updateLibraryItemState, pushToLibrary] = usePlayer(urlParams); const [settings, updateSettings] = useSettings(); const routeFocused = useRouteFocused(); const toast = useToast(); @@ -219,29 +219,13 @@ const Player = ({ urlParams }) => { }, [settings.subtitles_offset]); React.useEffect(() => { if (videoState.time !== null && !isNaN(videoState.time) && videoState.duration !== null && !isNaN(videoState.duration)) { - core.dispatch({ - action: 'Player', - args: { - action: 'UpdateLibraryItemState', - args: { - time: videoState.time, - duration: videoState.duration - } - } - }, 'player'); + updateLibraryItemState(videoState.time, videoState.duration); } }, [videoState.time, videoState.duration]); React.useEffect(() => { - const interval = setInterval(() => { - core.dispatch({ - action: 'Player', - args: { - action: 'PushToLibrary' - } - }, 'player'); - }, 30000); + const intervalId = setInterval(pushToLibrary, 30000); return () => { - clearInterval(interval); + clearInterval(intervalId); }; }, []); React.useLayoutEffect(() => { diff --git a/src/routes/Player/usePlayer.js b/src/routes/Player/usePlayer.js index 526d95278..808f86f5f 100644 --- a/src/routes/Player/usePlayer.js +++ b/src/routes/Player/usePlayer.js @@ -1,5 +1,6 @@ const React = require('react'); const pako = require('pako'); +const { useServices } = require('stremio/services'); const { useModelState } = require('stremio/common'); const initPlayerState = () => ({ @@ -82,6 +83,7 @@ const mapPlayerStateWithCtx = (player, ctx) => { }; const usePlayer = (urlParams) => { + const { core } = useServices(); const loadPlayerAction = React.useMemo(() => { try { return { @@ -133,12 +135,30 @@ const usePlayer = (urlParams) => { }; } }, [urlParams]); - return useModelState({ + const updateLibraryItemState = React.useCallback((time, duration) => { + core.dispatch({ + action: 'Player', + args: { + action: 'UpdateLibraryItemState', + args: { time, duration } + } + }, 'player'); + }, []); + const pushToLibrary = React.useCallback(() => { + core.dispatch({ + action: 'Player', + args: { + action: 'PushToLibrary' + } + }, 'player'); + }, []); + const player = useModelState({ model: 'player', action: loadPlayerAction, init: initPlayerState, mapWithCtx: mapPlayerStateWithCtx }); + return [player, updateLibraryItemState, pushToLibrary]; }; module.exports = usePlayer;