mirror of
https://github.com/movie-web/movie-web.git
synced 2024-12-25 06:11:51 +01:00
feat(progress): episode selector progress indicator
This commit is contained in:
parent
cb29acb38c
commit
2b8878ed9a
@ -3,11 +3,36 @@ import { TypeSelector } from './TypeSelector';
|
|||||||
import { NumberSelector } from './NumberSelector';
|
import { NumberSelector } from './NumberSelector';
|
||||||
import './EpisodeSelector.css'
|
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 (
|
return (
|
||||||
<div className="episodeSelector">
|
<div className="episodeSelector">
|
||||||
<TypeSelector setType={setSeason} choices={seasons.map(v=>({ value: v.toString(), label: `Season ${v}`}))} selected={currentSeason}/><br></br>
|
<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>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -8,6 +8,8 @@
|
|||||||
|
|
||||||
.numberSelector .choiceWrapper {
|
.numberSelector .choiceWrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
border-radius: 10%;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.numberSelector .choiceWrapper::before {
|
.numberSelector .choiceWrapper::before {
|
||||||
@ -34,7 +36,6 @@
|
|||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
border-radius: 10%;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -46,3 +47,16 @@
|
|||||||
color: var(--choice-active-text, var(--text));
|
color: var(--choice-active-text, var(--text));
|
||||||
background-color: var(--choice-active);
|
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%;
|
||||||
|
}
|
@ -6,12 +6,22 @@ import './NumberSelector.css'
|
|||||||
// choices: { label: string, value: string }[]
|
// choices: { label: string, value: string }[]
|
||||||
// selected: string
|
// selected: string
|
||||||
export function NumberSelector({ setType, choices, selected }) {
|
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 (
|
return (
|
||||||
<div className="numberSelector">
|
<div className="numberSelector">
|
||||||
{choices.map(v=>(
|
{choices.map(v=>(
|
||||||
<div key={v.value} className="choiceWrapper">
|
<div key={v.value} className="choiceWrapper">
|
||||||
<div className={`choice ${selected&&selected===v.value?'selected':''}`} onClick={() => setType(v.value)}>
|
<div className={`choice ${selected&&selected===v.value?'selected':''}`} onClick={() => setType(v.value)}>
|
||||||
{v.label}
|
{v.label}
|
||||||
|
{v.percentage > 0 ? (
|
||||||
|
<div class="progressBar">
|
||||||
|
<div class="progressBarInner" style={{width: `${v.percentage}%`}}></div>
|
||||||
|
</div>
|
||||||
|
) : ''}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
|
@ -58,8 +58,6 @@ export function MovieView(props) {
|
|||||||
}, [episode, streamData, setStreamUrl])
|
}, [episode, streamData, setStreamUrl])
|
||||||
|
|
||||||
const setProgress = (evt) => {
|
const setProgress = (evt) => {
|
||||||
console.log(streamData.slug, evt)
|
|
||||||
console.log(streamData)
|
|
||||||
let ls = JSON.parse(localStorage.getItem("video-progress") || "{}")
|
let ls = JSON.parse(localStorage.getItem("video-progress") || "{}")
|
||||||
|
|
||||||
// We're just checking lookmovie for now since there is only one scraper
|
// 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"
|
let key = streamData.type === "show" ? `${season}-${episode.episode}` : "full"
|
||||||
ls.lookmovie[streamData.type][streamData.slug][key] = {
|
ls.lookmovie[streamData.type][streamData.slug][key] = {
|
||||||
currentlyAt: Math.floor(evt.currentTarget.currentTime),
|
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") {
|
if(streamData.type === "show") {
|
||||||
@ -100,8 +99,10 @@ export function MovieView(props) {
|
|||||||
<EpisodeSelector
|
<EpisodeSelector
|
||||||
setSeason={setSeason}
|
setSeason={setSeason}
|
||||||
setEpisode={setEpisode}
|
setEpisode={setEpisode}
|
||||||
|
season={season}
|
||||||
seasons={seasonList}
|
seasons={seasonList}
|
||||||
episodes={episodeLists}
|
episodes={episodeLists}
|
||||||
|
slug={streamData.slug}
|
||||||
currentSeason={season}
|
currentSeason={season}
|
||||||
currentEpisode={episode}
|
currentEpisode={episode}
|
||||||
/>
|
/>
|
||||||
|
Loading…
Reference in New Issue
Block a user