feat(progress): add progress in search on MovieRow

This commit is contained in:
Jip Fr 2021-07-15 21:24:11 +02:00
parent 2b8878ed9a
commit 95cb59fcf6
7 changed files with 46 additions and 23 deletions

View File

@ -1,4 +1,5 @@
.movieRow { .movieRow {
position: relative;
display: flex; display: flex;
border-radius: 5px; border-radius: 5px;
background-color: var(--content); background-color: var(--content);
@ -8,6 +9,7 @@
cursor: pointer; cursor: pointer;
transition: transform 50ms ease-in-out; transition: transform 50ms ease-in-out;
user-select: none; user-select: none;
overflow: hidden;
} }
.movieRow p { .movieRow p {

View File

@ -1,10 +1,25 @@
import React from 'react' import React from 'react'
import { Arrow } from './Arrow' import { Arrow } from './Arrow'
import './MovieRow.css' import './MovieRow.css'
import { PercentageOverlay } from './PercentageOverlay'
// title: string // title: string
// onClick: () => void // onClick: () => void
export function MovieRow(props) { export function MovieRow(props) {
console.log(props)
const progressData = JSON.parse(localStorage.getItem("video-progress") || "{}")
let progress;
let percentage = null;
if(props.type === "movie") {
progress = progressData?.lookmovie?.movie?.[props.slug]?.full
if(progress) {
console.log(progress)
percentage = Math.floor((progress.currentlyAt / progress.totalDuration) * 100)
}
}
console.log(percentage)
return ( return (
<div className="movieRow" onClick={() => props.onClick && props.onClick()}> <div className="movieRow" onClick={() => props.onClick && props.onClick()}>
<div className="left"> <div className="left">
@ -15,6 +30,7 @@ export function MovieRow(props) {
<p>Watch {props.type}</p> <p>Watch {props.type}</p>
<Arrow/> <Arrow/>
</div> </div>
<PercentageOverlay percentage={percentage} />
</div> </div>
) )
} }

View File

@ -48,15 +48,3 @@
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%;
}

View File

@ -1,27 +1,19 @@
import React from 'react'; import React from 'react';
// import { Arrow } from './Arrow'; // import { Arrow } from './Arrow';
import './NumberSelector.css' import './NumberSelector.css'
import { PercentageOverlay } from './PercentageOverlay';
// setType: (txt: string) => void // setType: (txt: string) => void
// 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 ? ( <PercentageOverlay percentage={v.percentage} />
<div class="progressBar">
<div class="progressBarInner" style={{width: `${v.percentage}%`}}></div>
</div>
) : ''}
</div> </div>
</div> </div>
))} ))}

View File

@ -0,0 +1,12 @@
.progressBar {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.2;
}
.progressBarInner {
background: var(--theme-color);
height: 100%;
}

View File

@ -0,0 +1,13 @@
import React from 'react'
import './PercentageOverlay.css'
export function PercentageOverlay({ percentage }) {
if(percentage && percentage > 3) percentage = Math.max(20, percentage < 90 ? percentage : 100)
return percentage > 0 ? (
<div class="progressBar">
<div class="progressBarInner" style={{width: `${percentage}%`}}></div>
</div>
) : <React.Fragment></React.Fragment>
}

View File

@ -127,7 +127,7 @@ export function SearchView() {
Whoops, there are a few {type}s like that Whoops, there are a few {type}s like that
</Title> </Title>
{options?.map((v, i) => ( {options?.map((v, i) => (
<MovieRow key={i} title={v.title} type={v.type} year={v.year} season={v.season} episode={v.episode} onClick={() => { <MovieRow key={i} title={v.title} slug={v.slug} type={v.type} year={v.year} season={v.season} episode={v.episode} onClick={() => {
setShowingOptions(false) setShowingOptions(false)
getStream(v.title, v.slug, v.type, v.season, v.episode) getStream(v.title, v.slug, v.type, v.season, v.episode)
}}/> }}/>