diff --git a/src/components/EpisodeSelector.js b/src/components/EpisodeSelector.js index e2281106..447a83cd 100644 --- a/src/components/EpisodeSelector.js +++ b/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 (
({ value: v.toString(), label: `Season ${v}`}))} selected={currentSeason}/>

- setEpisode({episode: e, season: currentSeason})} choices={episodes.map(v=>({ value: v.toString(), label: v}))} selected={currentEpisode.season === currentSeason?currentEpisode.episode:null}/> + setEpisode({episode: e, season: currentSeason})} choices={choices} selected={currentEpisode.season === currentSeason?currentEpisode.episode:null}/>
) } diff --git a/src/components/NumberSelector.css b/src/components/NumberSelector.css index 21de53d1..87faf308 100644 --- a/src/components/NumberSelector.css +++ b/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%; +} \ No newline at end of file diff --git a/src/components/NumberSelector.js b/src/components/NumberSelector.js index ecbf9658..99742c9f 100644 --- a/src/components/NumberSelector.js +++ b/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 (
{choices.map(v=>(
-
setType(v.value)}> +
setType(v.value)}> {v.label} + {v.percentage > 0 ? ( +
+
+
+ ) : ''}
))} diff --git a/src/views/Movie.js b/src/views/Movie.js index 2b576b4b..ac8db275 100644 --- a/src/views/Movie.js +++ b/src/views/Movie.js @@ -54,12 +54,10 @@ export function MovieView(props) { }) return () => { cancel = true; - } + } }, [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) {