Develop

src/components/containers/MediaListContainer.tsx

@@ -3,9 +3,10 @@ import { useInfiniteDiscoverQuery } from '../../hooks/useSearchAndDiscover';
 import GenreSelector from '../selectors/GenreSelector';
 import Explore from './ExploreDisplay';
 import { IGenre } from '../../interfaces/IGenre';
-import SortByListbox from '../selectors/ListBox';
+import Listbox from '../selectors/ListBox';
 import { useLocation } from 'react-router-dom';
 import BackButton from '../buttons/BackBtn';
+import providers from '../../utils/data/providers.json';
 
 interface MediaListContainerProps {
   mediaType: 'movie' | 'tv';
@@ -22,7 +23,6 @@ interface MediaListContainerProps {
   first_air_date_lte?: string;
   with_companies?: string;
   with_networks?: string;
-  watch_providers?: string;
   showRating?: boolean;
 }
 
@@ -41,7 +41,6 @@ const MediaListContainer = ({
   first_air_date_lte,
   with_companies,
   with_networks,
-  watch_providers,
   showRating = true,
 }: MediaListContainerProps) => {
   const isInitialMount = useRef(true);
@@ -69,6 +68,13 @@ const MediaListContainer = ({
     return stored || sortBy || '';
   });
 
+  const [watchProviderOption, setWatchProviderOption] = useState<string>(() => {
+    const stored = sessionStorage.getItem(`watchProvider`);
+    return stored || '';
+  });
+
+  console.log(watchProviderOption, 'watchProviderOption');
+
   useEffect(() => {
     if (isInitialMount.current) {
       sessionStorage.setItem('lastPath', location.pathname);
@@ -78,7 +84,7 @@ const MediaListContainer = ({
       }
       return;
     }
-
+    sessionStorage.setItem('watchProvider', watchProviderOption);
     sessionStorage.setItem(
       `${mediaType}-selectedGenres`,
       JSON.stringify(selectedGenres),
@@ -94,6 +100,7 @@ const MediaListContainer = ({
     deSelectedGenres,
     sortByOption,
     mediaType,
+    watchProviderOption,
     location.pathname,
   ]);
 
@@ -135,7 +142,7 @@ const MediaListContainer = ({
       deSelectedGenres.join(','),
       with_companies,
       with_networks,
-      watch_providers,
+      watchProviderOption,
       primary_release_date_gte,
       primary_release_date_lte,
       first_air_date_gte,
@@ -151,22 +158,32 @@ const MediaListContainer = ({
         <h2 className='chrome text-[1.5rem] sm:text-[2rem] font-bold bg-gradient-to-r from-white to-white/70 text-transparent bg-clip-text mb-2 mt-4 lg:mb-6 mr-4'>
           {heading}
         </h2>
-        <div className={`mr-[50px] h-[50px] w-[300px] mt-4 mb-6 lg:mb-0 pt-2 `}>
-          <SortByListbox
+        <div
+          className={`mr-[50px] h-[50px] w-[300px] mt-0 mb-14 lg:mb-0 pt-2 `}
+        >
+          <Listbox
             selectedOption={sortByOption}
             setSelectedOption={setSortByOption}
             availableOptions={sortOptions}
           />
+          <div className='mt-3'>
+            <Listbox
+              selectedOption={watchProviderOption}
+              setSelectedOption={setWatchProviderOption}
+              availableOptions={providers}
+            />
+          </div>
         </div>
       </div>
-      <GenreSelector
-        genres={genres}
-        onGenreToggle={toggleGenre}
-        selectedGenres={selectedGenres}
-        deselectedGenres={deSelectedGenres}
-        onUnwantedGenreToggle={toggleUnwantedGenre}
-      />
-
+      <div>
+        <GenreSelector
+          genres={genres}
+          onGenreToggle={toggleGenre}
+          selectedGenres={selectedGenres}
+          deselectedGenres={deSelectedGenres}
+          onUnwantedGenreToggle={toggleUnwantedGenre}
+        />
+      </div>
       {data && (
         <Explore
           data={data}

src/components/selectors/ListBox.tsx

@@ -18,13 +18,13 @@ import clsx from 'clsx';
 
 export default function ListBoxComp({
   title,
-  selectedOption: sortByOption,
-  setSelectedOption: setSortByOption,
-  availableOptions: sortOptions,
+  selectedOption,
+  setSelectedOption,
+  availableOptions,
 }: IListBox) {
   return (
     <div className='w-full  mr-4 hover:translate-[1px] rounded-md  z-50 '>
-      <Listbox value={sortByOption} onChange={setSortByOption}>
+      <Listbox value={selectedOption} onChange={setSelectedOption}>
         <ListboxButton
           tabIndex={0}
           className={clsx(
@@ -33,8 +33,9 @@ export default function ListBoxComp({
           )}
         >
           {title ??
-            sortOptions.find((opt) => opt.value === sortByOption)?.name ??
-            'Sort By'}
+            availableOptions.find((opt) => opt.value === selectedOption)
+              ?.name ??
+            'Select...'}
           <ChevronDownIcon
             className='group pointer-events-none absolute top-2.5 right-2.5 size-4 fill-white/60'
             aria-hidden='true'
@@ -48,7 +49,7 @@ export default function ListBoxComp({
             'transition duration-100 ease-in data-[leave]:data-[closed]:opacity-0',
           )}
         >
-          {sortOptions.map((opt) => (
+          {availableOptions.map((opt) => (
             <ListboxOption
               key={opt.name}
               value={opt.value}

src/pages/watchPages/WatchTV.tsx

@@ -28,6 +28,7 @@ const WatchTV = () => {
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
   const iframeLoadRef = useRef<NodeJS.Timeout | null>(null);
+  const interactionTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const prevSeasonLengthRef = useRef<number>(0);
 
   const { series_id } = useParams<{ series_id: string }>();
@@ -80,9 +81,7 @@ const WatchTV = () => {
   });
 
   const [currentSeasonLength, setCurrentSeasonLength] = useState(0);
-  // const [previousSeasonLength, setPreviousSeasonLength] = useState(0);
   const [unlocked, setUnlocked] = useState(false);
-  const interactionTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   const handleMouseMove = (e: MouseEvent) => {
     const el = document.elementFromPoint(e.clientX, e.clientY);

src/utils/data/providers.json

@@ -0,0 +1,139 @@
+[
+  {
+    "id": 0,
+    "name": "All Providers",
+    "value": ""
+  },
+  {
+    "id": 1,
+    "name": "Netflix",
+    "value": "8"
+  },
+  {
+    "id": 2,
+    "name": "Disney+",
+    "value": "337"
+  },
+  {
+    "id": 3,
+    "name": "Amazon Prime Video",
+    "value": "9"
+  },
+  {
+    "id": 4,
+    "name": "Apple TV+",
+    "value": "350"
+  },
+  {
+    "id": 5,
+    "name": "Amazon Video",
+    "value": "10"
+  },
+  {
+    "id": 6,
+    "name": "Hulu",
+    "value": "15"
+  },
+  {
+    "id": 7,
+    "name": "Max",
+    "value": "1899"
+  },
+  {
+    "id": 8,
+    "name": "Peacock Premium",
+    "value": "386"
+  },
+  {
+    "id": 9,
+    "name": "Paramount+",
+    "value": "531"
+  },
+  {
+    "id": 10,
+    "name": "Paramount+ with Showtime",
+    "value": "1770"
+  },
+  {
+    "id": 11,
+    "name": "AMC+",
+    "value": "526"
+  },
+  {
+    "id": 12,
+    "name": "Starz",
+    "value": "43"
+  },
+  {
+    "id": 13,
+    "name": "FXNow",
+    "value": "123"
+  },
+  {
+    "id": 14,
+    "name": "MGM+",
+    "value": "34"
+  },
+  {
+    "id": 15,
+    "name": "Shudder",
+    "value": "99"
+  },
+  {
+    "id": 16,
+    "name": "Screambox",
+    "value": "185"
+  },
+  {
+    "id": 17,
+    "name": "Sundance Now",
+    "value": "143"
+  },
+  {
+    "id": 18,
+    "name": "BritBox",
+    "value": "151"
+  },
+  {
+    "id": 19,
+    "name": "MUBI",
+    "value": "11"
+  },
+  {
+    "id": 20,
+    "name": "Lifetime Movie Club",
+    "value": "284"
+  },
+  {
+    "id": 21,
+    "name": "USA Network",
+    "value": "322"
+  },
+  {
+    "id": 22,
+    "name": "TCM",
+    "value": "361"
+  },
+  {
+    "id": 23,
+    "name": "TNT",
+    "value": "363"
+  },
+
+  {
+    "id": 24,
+    "name": "BBC America",
+    "value": "397"
+  },
+
+  {
+    "id": 25,
+    "name": "ESPN",
+    "value": "1718"
+  },
+  {
+    "id": 26,
+    "name": "BET+",
+    "value": "1759"
+  }
+]