From 40ee5bb012869172a1365ddf62f9e46cfda324cf Mon Sep 17 00:00:00 2001 From: James Hawkins <jhawki2005@gmail.com> Date: Sat, 7 Aug 2021 21:19:01 +0100 Subject: [PATCH] new code --- src/components/VideoElement.js | 14 +++++++++++--- src/views/Movie.js | 30 ++++++++++-------------------- 2 files changed, 21 insertions(+), 23 deletions(-) diff --git a/src/components/VideoElement.js b/src/components/VideoElement.js index f5b380a4..13426eb0 100644 --- a/src/components/VideoElement.js +++ b/src/components/VideoElement.js @@ -6,9 +6,17 @@ import './VideoElement.css' // streamUrl: string // loading: boolean -export function VideoElement({ streamUrl, loading, setProgress, videoRef }) { +// setProgress: (event: NativeEvent) => void +// videoRef: useRef +// startTime: number +export function VideoElement({ streamUrl, loading, setProgress, videoRef, startTime }) { const [error, setError] = React.useState(false); + function onLoad() { + if (startTime) + videoRef.current.currentTime = startTime; + } + React.useEffect(() => { if (!streamUrl.endsWith('.mp4')) { setError(false) @@ -40,11 +48,11 @@ export function VideoElement({ streamUrl, loading, setProgress, videoRef }) { if (!streamUrl.endsWith('.mp4')) { return ( - <video className="videoElement" ref={videoRef} controls autoPlay onProgress={setProgress} /> + <video className="videoElement" ref={videoRef} controls autoPlay onProgress={setProgress} onLoadedData={onLoad} /> ) } else { return ( - <video className="videoElement" ref={videoRef} controls autoPlay onProgress={setProgress}> + <video className="videoElement" ref={videoRef} controls autoPlay onProgress={setProgress} onLoadedData={onLoad}> <source src={streamUrl} type="video/mp4" /> </video> ) diff --git a/src/views/Movie.js b/src/views/Movie.js index 43a5a282..2db26b73 100644 --- a/src/views/Movie.js +++ b/src/views/Movie.js @@ -20,15 +20,17 @@ export function MovieView(props) { const [ episodeLists, setEpisodeList ] = React.useState([]); const [ loading, setLoading ] = React.useState(false); const [ selectedSeason, setSelectedSeason ] = React.useState("1"); + const [ startTime, setStartTime ] = React.useState(0); const videoRef = React.useRef(null); - let isVideoTimeSet = React.useRef(false) + let isVideoTimeSet = React.useRef(false); const season = showRouteMatch?.params.season || "1"; const episode = showRouteMatch?.params.episode || "1"; // eslint-disable-next-line react-hooks/exhaustive-deps function setEpisode({ season, episode }) { - history.replace(`${baseRouteMatch.url}/season/${season}/episode/${episode}`); + history.push(`${baseRouteMatch.url}/season/${season}/episode/${episode}`); + isVideoTimeSet.current = false; } React.useEffect(() => { @@ -79,24 +81,12 @@ export function MovieView(props) { }, [streamData.seasons, streamData.episodes, streamData.type, selectedSeason]) React.useEffect(() => { - if (!isVideoTimeSet.current) { - let ls = JSON.parse(localStorage.getItem("video-progress") || "{}") - let key = streamData.type === "show" ? `${season}-${episode}` : "full" - let time = ls?.[streamData.source]?.[streamData.type]?.[streamData.slug]?.[key]?.currentlyAt; - - if (time) { - if (!videoRef.current) { - isVideoTimeSet.current = false; - return; - } - - videoRef.current.currentTime = time; - } - } - - isVideoTimeSet.current = true; + let ls = JSON.parse(localStorage.getItem("video-progress") || "{}") + let key = streamData.type === "show" ? `${season}-${episode}` : "full" + let time = ls?.[streamData.source]?.[streamData.type]?.[streamData.slug]?.[key]?.currentlyAt; + setStartTime(time); // eslint-disable-next-line react-hooks/exhaustive-deps - }) + }, [baseRouteMatch, showRouteMatch]); const setProgress = (evt) => { let ls = JSON.parse(localStorage.getItem("video-progress") || "{}") @@ -141,7 +131,7 @@ export function MovieView(props) { Season {season}: Episode {episode} </Title> : undefined} - <VideoElement streamUrl={streamUrl} loading={loading} setProgress={setProgress} videoRef={videoRef} /> + <VideoElement streamUrl={streamUrl} loading={loading} setProgress={setProgress} videoRef={videoRef} startTime={startTime} /> {streamData.type === "show" ? <EpisodeSelector