Add select box to episode selector

src/components/EpisodeSelector.js

@@ -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>
     )

src/hooks/useWindowSize.js

@@ -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;
+  }