mirror of
https://github.com/movie-web/movie-web.git
synced 2024-11-10 23:55:05 +01:00
Add select box to episode selector
This commit is contained in:
parent
7d506c2010
commit
17ab39c7d1
@ -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>
|
||||
)
|
||||
|
28
src/hooks/useWindowSize.js
Normal file
28
src/hooks/useWindowSize.js
Normal 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;
|
||||
}
|
Loading…
Reference in New Issue
Block a user