Add select box to episode selector

This commit is contained in:
William Oldham 2021-10-26 13:16:35 +01:00
parent 7d506c2010
commit 17ab39c7d1
2 changed files with 43 additions and 1 deletions

View File

@ -2,7 +2,9 @@ import React from 'react';
import { TypeSelector } from './TypeSelector';
import { NumberSelector } from './NumberSelector';
import { VideoProgressStore } from '../lib/storage/VideoProgress'
import { SelectBox } from '../components/SelectBox';
import './EpisodeSelector.css'
import { useWindowSize } from '../hooks/useWindowSize';
export function EpisodeSelector({ setSelectedSeason, selectedSeason, setEpisode, seasons, episodes, currentSeason, currentEpisode, streamData }) {
const choices = episodes ? episodes.map(v => {
@ -27,9 +29,21 @@ export function EpisodeSelector({ setSelectedSeason, selectedSeason, setEpisode,
}
}) : [];
const windowSize = useWindowSize()
return (
<div className="episodeSelector">
<TypeSelector setType={setSelectedSeason} selected={selectedSeason} choices={seasons.map(v=>({ value: v.toString(), label: `Season ${v}`}))} /><br></br>
{
(seasons.length > 0 && (windowSize.width <= 768 || seasons.length > 4)) ?
(
<SelectBox setSelectedItem={(index) => setSelectedSeason(seasons[index])} selectedItem={seasons.findIndex(s => s === selectedSeason)} options={seasons.map(season => { return {id: season, name: `Season ${season}` }})}/>
)
:
(
<TypeSelector setType={setSelectedSeason} selected={selectedSeason} choices={seasons.map(v=>({ value: v.toString(), label: `Season ${v}`}))} />
)
}
<br></br>
<NumberSelector setType={(e) => setEpisode({episode: e, season: selectedSeason})} choices={choices} selected={(selectedSeason.toString() === currentSeason) ? currentEpisode : null} />
</div>
)

View File

@ -0,0 +1,28 @@
import { useEffect, useState } from "react";
// https://usehooks.com/useWindowSize/
export function useWindowSize() {
// Initialize state with undefined width/height so server and client renders match
// Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
const [windowSize, setWindowSize] = useState({
width: undefined,
height: undefined,
});
useEffect(() => {
// Handler to call on window resize
function handleResize() {
// Set window width/height to state
setWindowSize({
width: window.innerWidth,
height: window.innerHeight,
});
}
// Add event listener
window.addEventListener("resize", handleResize);
// Call handler right away so state gets updated with initial window size
handleResize();
// Remove event listener on cleanup
return () => window.removeEventListener("resize", handleResize);
}, []); // Empty array ensures that effect is only run on mount
return windowSize;
}