diff --git a/src/components/EpisodeSelector.js b/src/components/EpisodeSelector.js
index e1f98117..1b65cc4e 100644
--- a/src/components/EpisodeSelector.js
+++ b/src/components/EpisodeSelector.js
@@ -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 (
- ({ value: v.toString(), label: `Season ${v}`}))} selected={currentSeason}/>
- setEpisode({episode: e, season: currentSeason})} choices={choices} selected={currentEpisode.season === currentSeason?currentEpisode.episode:null}/>
+ ({ value: v.toString(), label: `Season ${v}`}))} selected={selectedSeason}/>
+ setEpisode({episode: e, season: selectedSeason})} choices={choices} selected={(selectedSeason.toString() === currentSeason) ? currentEpisode : null} />
)
}
diff --git a/src/views/Movie.js b/src/views/Movie.js
index 795bec25..860634f7 100644
--- a/src/views/Movie.js
+++ b/src/views/Movie.js
@@ -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}
{streamData.type === "show" ?
- Season {episode.season}: Episode {episode.episode}
+ Season {season}: Episode {episode}
: undefined}
{streamData.type === "show" ?
: ''}