movie-web/src/views/Movie.js

import React from 'react'
import { useRouteMatch, useHistory } from 'react-router-dom'
import { Helmet } from 'react-helmet';
import { Title } from '../components/Title'
import { Card } from '../components/Card'
import { useMovie } from '../hooks/useMovie'
import { VideoElement } from '../components/VideoElement'
import { EpisodeSelector } from '../components/EpisodeSelector'
import { getStreamUrl } from '../lib/index'

import './Movie.css'

export function MovieView(props) {
    const baseRouteMatch = useRouteMatch('/:type/:source/:title/:slug');
    const showRouteMatch = useRouteMatch('/:type/:source/:title/:slug/season/:season/episode/:episode');
    const history = useHistory();

    const { streamUrl, streamData, setStreamUrl } = useMovie();
    const [ seasonList, setSeasonList ] = React.useState([]);
    const [ episodeLists, setEpisodeList ] = React.useState([]);
    const [ loading, setLoading ] = React.useState(false);
    const [ selectedSeason, setSelectedSeason ] = React.useState("1");
    const [ startTime, setStartTime ] = React.useState(0);
    const videoRef = React.useRef(null);
    let isVideoTimeSet = React.useRef(false);

    const season = showRouteMatch?.params.season || "1";
    const episode = showRouteMatch?.params.episode || "1";

    // eslint-disable-next-line react-hooks/exhaustive-deps
    function setEpisode({ season, episode }) {
        history.push(`${baseRouteMatch.url}/season/${season}/episode/${episode}`);
        isVideoTimeSet.current = false;
    }

    React.useEffect(() => {
        if (streamData.type === "show" && !showRouteMatch) history.replace(`${baseRouteMatch.url}/season/1/episode/1`);
    }, [streamData.type, showRouteMatch, history, baseRouteMatch.url]);

    React.useEffect(() => {
        if (streamData.type === "show" && showRouteMatch) setSelectedSeason(showRouteMatch.params.season.toString());
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    React.useEffect(() => {
        let cancel = false;

        if (streamData.type !== "show") return () => {
            cancel = true;
        };

        if (!episode) {
            setLoading(false);
            setStreamUrl('');
            return;
        }

        setLoading(true);
        getStreamUrl(streamData.slug, streamData.type, streamData.source, season, episode)
        .then(({ url }) => {
                if (cancel) return;
                streamData.subtitles = [];
                setStreamUrl(url)
                setLoading(false);
            })
            .catch((e) => {
                if (cancel) return;
                console.error(e)
            })

        return () => {
            cancel = true;
        } 
    }, [episode, streamData, setStreamUrl, season]);

    React.useEffect(() => {
        if (streamData.type === "show") {
            setSeasonList(streamData.seasons);
            setEpisodeList(streamData.episodes[selectedSeason]);
        }
    }, [streamData.seasons, streamData.episodes, streamData.type, selectedSeason])

    React.useEffect(() => {
        let ls = JSON.parse(localStorage.getItem("video-progress") || "{}")
        let key = streamData.type === "show" ? `${season}-${episode}` : "full"
        let time = ls?.[streamData.source]?.[streamData.type]?.[streamData.slug]?.[key]?.currentlyAt;
        setStartTime(time);
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [baseRouteMatch, showRouteMatch]);

    const setProgress = (evt) => {
        let ls = JSON.parse(localStorage.getItem("video-progress") || "{}")

        if (!ls[streamData.source])
            ls[streamData.source] = {}
        if (!ls[streamData.source][streamData.type])
            ls[streamData.source][streamData.type] = {}
        if (!ls[streamData.source][streamData.type][streamData.slug])
            ls[streamData.source][streamData.type][streamData.slug] = {}
        
        // Store real data
        let key = streamData.type === "show" ? `${season}-${episode}` : "full"
        ls[streamData.source][streamData.type][streamData.slug][key] = {
            currentlyAt: Math.floor(evt.currentTarget.currentTime),
            totalDuration: Math.floor(evt.currentTarget.duration),
            updatedAt: Date.now(),
            meta: streamData
        }

        if(streamData.type === "show") {
            ls[streamData.source][streamData.type][streamData.slug][key].show = {
                season,
                episode
            }
        }

        localStorage.setItem("video-progress", JSON.stringify(ls))
    }

    return (
        <div className={`cardView showType-${streamData.type}`}>
            <Helmet>
                <title>{streamData.title}{streamData.type === 'show' ? ` | S${season}E${episode}` : ''} | movie-web</title>
            </Helmet>

            <Card fullWidth>
                <Title accent="Return to home" accentLink="search">
                    {streamData.title}
                </Title>
                {streamData.type === "show" ? <Title size="small">
                    Season {season}: Episode {episode}
                </Title> : undefined}

                <VideoElement streamUrl={streamUrl} loading={loading} setProgress={setProgress} videoRef={videoRef} startTime={startTime} streamData={streamData} />

                {streamData.type === "show" ? 
                    <EpisodeSelector
                        setSelectedSeason={setSelectedSeason}
                        selectedSeason={selectedSeason}

                        setEpisode={setEpisode}

                        seasons={seasonList}
                        episodes={episodeLists}

                        currentSeason={season}
                        currentEpisode={episode}

                        streamData={streamData}
                    />
                : ''}
            </Card>
        </div>
    )
}