mirrors/smov
mirrors/smov
1
0
Fork 0
mirror of https://github.com/sussy-code/smov.git synced 2024-12-29 16:07:40 +01:00
Code Issues Wiki Activity

feat(progress): episode selector progress indicator

Browse source
This commit is contained in:
Jip Fr 2021-07-15 21:04:47 +02:00
parent cb29acb38c
commit 2b8878ed9a
4 changed files with 58 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
src/components/EpisodeSelector.js
View file

@ -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>
)
}

16
src/components/NumberSelector.css
View file

@ -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%;
}

12
src/components/NumberSelector.js
View file

@ -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)}>
<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>
))}

9
src/views/Movie.js
View file

@ -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) {
<EpisodeSelector
setSeason={setSeason}
setEpisode={setEpisode}
season={season}
seasons={seasonList}
episodes={episodeLists}
slug={streamData.slug}
currentSeason={season}
currentEpisode={episode}
/>