Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-11-11 02:45:09 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add URL routing to show episode selector

Browse Source
This commit is contained in:
Josh Heng 2021-08-02 14:08:55 +01:00
parent 6a8af72f81
commit a48c77a1cb
2 changed files with 44 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/EpisodeSelector.js
View File

@ -3,10 +3,8 @@ import { TypeSelector } from './TypeSelector';
import { NumberSelector } from './NumberSelector';
import './EpisodeSelector.css'
export function EpisodeSelector({ setSeason, setEpisode, seasons, season, episodes, currentSeason, currentEpisode, slug, source }) {
const choices = episodes.map(v => {
export function EpisodeSelector({ setSelectedSeason, setEpisode, seasons, selectedSeason, season, episodes, currentSeason, currentEpisode, source }) {
const choices = episodes ? episodes.map(v => {
let progressData = JSON.parse(localStorage.getItem('video-progress') || "{}")
let currentlyAt = 0;
@ -25,12 +23,12 @@ export function EpisodeSelector({ setSeason, setEpisode, seasons, season, episod
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={choices} selected={currentEpisode.season === currentSeason?currentEpisode.episode:null}/>
<TypeSelector setType={setSelectedSeason} choices={seasons.map(v=>({ value: v.toString(), label: `Season ${v}`}))} selected={selectedSeason}/><br></br>
<NumberSelector setType={(e) => setEpisode({episode: e, season: selectedSeason})} choices={choices} selected={(selectedSeason.toString() === currentSeason) ? currentEpisode : null} />
</div>
)
}

54
src/views/Movie.js
View File

@ -1,4 +1,5 @@
import React from 'react'
import { useRouteMatch, useHistory } from 'react-router-dom'
import { Title } from '../components/Title'
import { Card } from '../components/Card'
import { useMovie } from '../hooks/useMovie'
@ -9,41 +10,57 @@ 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 [season, setSeason] = React.useState("1");
const [seasonList, setSeasonList] = React.useState([]);
const [episodeLists, setEpisodeList] = React.useState([]);
const [episode, setEpisode] = React.useState({ episode: null, season: null });
const [loading, setLoading] = React.useState(false);
const [ selectedSeason, setSelectedSeason ] = React.useState("1");
const season = showRouteMatch?.params.season || "1";
const episode = showRouteMatch?.params.episode || "1";
React.useEffect(() => {
setEpisodeList(streamData.episodes[season]);
}, [season, streamData.episodes])
setEpisodeList(streamData.episodes[selectedSeason]);
}, [selectedSeason, streamData.episodes])
React.useEffect(() => {
if (streamData.type === "show") {
setSeasonList(streamData.seasons);
setSeason(streamData.seasons[0])
// TODO load from localstorage last watched
setEpisode({ episode: streamData.episodes[streamData.seasons[0]][0], season: streamData.seasons[0] })
setEpisodeList(streamData.episodes[streamData.seasons[0]]);
}
}, [streamData])
React.useEffect(() => {
if (streamData.type === "show" && !showRouteMatch) history.replace(`${baseRouteMatch.url}/season/1/episode/1`);
}, [streamData, showRouteMatch, history, baseRouteMatch.url]);
React.useEffect(() => {
if (streamData.type === "show" && !showRouteMatch) history.replace(`${baseRouteMatch.url}/season/1/episode/1`);
}, [streamData, 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;
// ignore if not a show
if (streamData.type !== "show") return () => {
cancel = true;
};
if (!episode.episode) {
if (!episode) {
setLoading(false);
setStreamUrl('');
return;
}
setLoading(true);
getStreamUrl(streamData.slug, streamData.type, streamData.source, episode.season, episode.episode)
getStreamUrl(streamData.slug, streamData.type, streamData.source, season, episode)
.then(({url}) => {
if (cancel) return;
setStreamUrl(url)
@ -56,7 +73,11 @@ export function MovieView(props) {
return () => {
cancel = true;
}
}, [episode, streamData, setStreamUrl])
}, [episode, streamData, setStreamUrl, season]);
function setEpisode({ season, episode }) {
history.push(`${baseRouteMatch.url}/season/${season}/episode/${episode}`);
}
const setProgress = (evt) => {
let ls = JSON.parse(localStorage.getItem("video-progress") || "{}")
@ -69,7 +90,7 @@ export function MovieView(props) {
}
// Store real data
let key = streamData.type === "show" ? `${season}-${episode.episode}` : "full"
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),
@ -79,7 +100,7 @@ export function MovieView(props) {
if(streamData.type === "show") {
ls[streamData.source][streamData.type][streamData.slug][key].show = {
season,
episode: episode.episode
episode: episode
}
}
@ -93,19 +114,22 @@ export function MovieView(props) {
{streamData.title}
</Title>
{streamData.type === "show" ? <Title size="small">
Season {episode.season}: Episode {episode.episode}
Season {season}: Episode {episode}
</Title> : undefined}
<VideoElement streamUrl={streamUrl} loading={loading} setProgress={setProgress} />
{streamData.type === "show" ?
<EpisodeSelector
setSeason={setSeason}
setSelectedSeason={setSelectedSeason}
selectedSeason={selectedSeason}
setEpisode={setEpisode}
season={season}
seasons={seasonList}
episodes={episodeLists}
slug={streamData.slug}
currentSeason={season}
currentEpisode={episode}
source={streamData.source}
/>
: ''}