feat(progress): episode selector progress indicator

src/components/EpisodeSelector.js

@@ -3,11 +3,36 @@ import { TypeSelector } from './TypeSelector';
 import { NumberSelector } from './NumberSelector';
 import './EpisodeSelector.css'
 
-export function EpisodeSelector({ setSeason, setEpisode, seasons, episodes, currentSeason, currentEpisode }) {
+export function EpisodeSelector({ setSeason, setEpisode, seasons, season, episodes, currentSeason, currentEpisode, slug }) {
+
+    const choices = episodes.map(v => {
+        console.log(slug, season, v)
+
+        let progressData = JSON.parse(localStorage.getItem('video-progress') || "{}")
+        
+        let currentlyAt = 0;
+        let totalDuration = 0;
+
+        const progress = progressData?.lookmovie?.show?.[slug][`${season}-${v}`]
+        if(progress) {
+            console.log(progress)
+            currentlyAt = progress.currentlyAt
+            totalDuration = progress.totalDuration
+        }
+
+        const percentage = Math.round((currentlyAt / totalDuration) * 100)
+
+        return { 
+            value: v.toString(), 
+            label: v,
+            percentage
+        }
+    })
+
     return (
         <div className="episodeSelector">
             <TypeSelector setType={setSeason} choices={seasons.map(v=>({ value: v.toString(), label: `Season ${v}`}))} selected={currentSeason}/><br></br>
-            <NumberSelector setType={(e) => setEpisode({episode: e, season: currentSeason})} choices={episodes.map(v=>({ value: v.toString(), label: v}))} selected={currentEpisode.season === currentSeason?currentEpisode.episode:null}/>
+            <NumberSelector setType={(e) => setEpisode({episode: e, season: currentSeason})} choices={choices} selected={currentEpisode.season === currentSeason?currentEpisode.episode:null}/>
         </div>
     )
 }

src/components/NumberSelector.css

@@ -8,6 +8,8 @@
 
 .numberSelector .choiceWrapper {
     position: relative;
+    border-radius: 10%;
+    overflow: hidden;
 }
 
 .numberSelector .choiceWrapper::before {
@@ -34,7 +36,6 @@
     font-weight: bold;
     cursor: pointer;
     user-select: none;
-    border-radius: 10%;
     box-sizing: border-box;
 }
 
@@ -46,3 +47,16 @@
     color: var(--choice-active-text, var(--text));
     background-color: var(--choice-active);
 }
+
+.numberSelector .progressBar {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0.2;
+}
+.numberSelector .progressBarInner {
+    background: var(--theme-color);
+    height: 100%;
+}

src/components/NumberSelector.js

@@ -6,12 +6,22 @@ import './NumberSelector.css'
 // choices: { label: string, value: string }[]
 // selected: string
 export function NumberSelector({ setType, choices, selected }) {
+
+    choices.forEach(choice => {
+        if(choice.percentage > 3) choice.percentage = Math.max(20, choice.percentage < 90 ? choice.percentage : 100)
+    })
+
     return (
         <div className="numberSelector">
             {choices.map(v=>(
                 <div key={v.value} className="choiceWrapper">
                     <div className={`choice ${selected&&selected===v.value?'selected':''}`} onClick={() => setType(v.value)}>
                         {v.label}
+                        {v.percentage > 0 ? (
+                            <div class="progressBar">
+                                <div class="progressBarInner" style={{width: `${v.percentage}%`}}></div>
+                            </div>
+                        ) : ''}
                     </div>
                 </div>
             ))}

src/views/Movie.js

@@ -58,8 +58,6 @@ export function MovieView(props) {
     }, [episode, streamData, setStreamUrl])
 
     const setProgress = (evt) => {
-        console.log(streamData.slug, evt)
-        console.log(streamData)
         let ls = JSON.parse(localStorage.getItem("video-progress") || "{}")
 
         // We're just checking lookmovie for now since there is only one scraper
@@ -73,7 +71,8 @@ export function MovieView(props) {
         let key = streamData.type === "show" ? `${season}-${episode.episode}` : "full"
         ls.lookmovie[streamData.type][streamData.slug][key] = {
             currentlyAt: Math.floor(evt.currentTarget.currentTime),
-            totalDuration: Math.floor(evt.currentTarget.duration)
+            totalDuration: Math.floor(evt.currentTarget.duration),
+            updatedAt: Date.now()
         }
 
         if(streamData.type === "show") {
@@ -100,8 +99,10 @@ export function MovieView(props) {
                     <EpisodeSelector
                         setSeason={setSeason}
                         setEpisode={setEpisode}
+                        season={season}
                         seasons={seasonList}
                         episodes={episodeLists}
+                        slug={streamData.slug}
                         currentSeason={season}
                         currentEpisode={episode}
                     />