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