feat(video): store progress

This commit is contained in:
Jip Fr 2021-07-15 20:34:25 +02:00
parent b8ab630f0a
commit cb29acb38c
3 changed files with 33 additions and 4 deletions

View File

@ -1,6 +1,6 @@
.videoElement { .videoElement {
width: 100%; width: 100%;
background-color: var(--content); background-color: black;
border-radius: 5px; border-radius: 5px;
} }

View File

@ -5,7 +5,7 @@ import { VideoPlaceholder } from './VideoPlaceholder'
// streamUrl: string // streamUrl: string
// loading: boolean // loading: boolean
export function VideoElement({ streamUrl, loading }) { export function VideoElement({ streamUrl, loading, setProgress }) {
const videoRef = React.useRef(null); const videoRef = React.useRef(null);
const [error, setError] = React.useState(false); const [error, setError] = React.useState(false);
@ -37,6 +37,6 @@ export function VideoElement({ streamUrl, loading }) {
return <VideoPlaceholder>No video selected</VideoPlaceholder> return <VideoPlaceholder>No video selected</VideoPlaceholder>
return ( return (
<video className="videoElement" ref={videoRef} controls autoPlay /> <video className="videoElement" ref={videoRef} controls autoPlay onProgress={setProgress} />
) )
} }

View File

@ -57,6 +57,35 @@ export function MovieView(props) {
} }
}, [episode, streamData, setStreamUrl]) }, [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
if(!ls.lookmovie) ls.lookmovie = {}
if(!ls.lookmovie[streamData.type]) ls.lookmovie[streamData.type] = {}
if(!ls.lookmovie[streamData.type][streamData.slug]) {
ls.lookmovie[streamData.type][streamData.slug] = {}
}
// Store real data
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)
}
if(streamData.type === "show") {
ls.lookmovie[streamData.type][streamData.slug][key].show = {
season,
episode: episode.episode
}
}
localStorage.setItem("video-progress", JSON.stringify(ls))
}
return ( return (
<div className={`cardView showType-${streamData.type}`}> <div className={`cardView showType-${streamData.type}`}>
<Card fullWidth> <Card fullWidth>
@ -66,7 +95,7 @@ export function MovieView(props) {
{streamData.type === "show" ? <Title size="small"> {streamData.type === "show" ? <Title size="small">
Season {episode.season}: Episode {episode.episode} Season {episode.season}: Episode {episode.episode}
</Title> : undefined} </Title> : undefined}
<VideoElement streamUrl={streamUrl} loading={loading}/> <VideoElement streamUrl={streamUrl} loading={loading} setProgress={setProgress} />
{streamData.type === "show" ? {streamData.type === "show" ?
<EpisodeSelector <EpisodeSelector
setSeason={setSeason} setSeason={setSeason}