From 47e268280183ce4dd375e45070acc8dfee074094 Mon Sep 17 00:00:00 2001 From: femke77 Date: Mon, 12 May 2025 18:22:51 -0700 Subject: [PATCH 1/4] watch tv code cleanup --- src/pages/watchPages/WatchTV.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/pages/watchPages/WatchTV.tsx b/src/pages/watchPages/WatchTV.tsx index f173a07..ca7a72a 100644 --- a/src/pages/watchPages/WatchTV.tsx +++ b/src/pages/watchPages/WatchTV.tsx @@ -28,6 +28,7 @@ const WatchTV = () => { const iframeRef = useRef(null); const timeoutRef = useRef(null); const iframeLoadRef = useRef(null); + const interactionTimeoutRef = useRef(null); const prevSeasonLengthRef = useRef(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(null); + const [unlocked, setUnlocked] = useState(false); const handleMouseMove = (e: MouseEvent) => { const el = document.elementFromPoint(e.clientX, e.clientY); From c602316acce0c7dbd375db1390df3eca926cc6d5 Mon Sep 17 00:00:00 2001 From: femke77 Date: Mon, 12 May 2025 23:49:13 -0700 Subject: [PATCH 2/4] watch provider data --- src/utils/data/providers.json | 108 ++++++++++++++++++++++++++++++++++ 1 file changed, 108 insertions(+) create mode 100644 src/utils/data/providers.json diff --git a/src/utils/data/providers.json b/src/utils/data/providers.json new file mode 100644 index 0000000..4c205af --- /dev/null +++ b/src/utils/data/providers.json @@ -0,0 +1,108 @@ +[ + { + "name": "Netflix", + "provider_id": 8 + }, + { + "name": "Disney+", + "provider_id": 337 + }, + { + "name": "Amazon Prime Video", + "provider_id": 9 + }, + { + "name": "Apple TV+", + "provider_id": 350 + }, + { + "name": "Amazon Video", + "provider_id": 10 + }, + { + "name": "Hulu", + "provider_id": 15 + }, + { + "name": "Max", + "provider_id": 1899 + }, + { + "name": "Peacock Premium", + "provider_id": 386 + }, + { + "name": "Paramount+", + "provider_id": 531 + }, + { + "name": "Paramount+ with Showtime", + "provider_id": 1770 + }, + { + "name": "AMC+", + "provider_id": 526 + }, + { + "name": "Starz", + "provider_id": 43 + }, + { + "name": "FXNow", + "provider_id": 123 + }, + { + "name": "MGM+", + "provider_id": 34 + }, + { + "name": "Shudder", + "provider_id": 99 + }, + { + "name": "Screambox", + "provider_id": 185 + }, + { + "name": "Sundance Now", + "provider_id": 143 + }, + { + "name": "BritBox", + "provider_id": 151 + }, + { + "name": "MUBI", + "provider_id": 11 + }, + { + "name": "Lifetime Movie Club", + "provider_id": 284 + }, + { + "name": "USA Network", + "provider_id": 322 + }, + { + "name": "TCM", + "provider_id": 361 + }, + { + "name": "TNT", + "provider_id": 363 + }, + + { + "name": "BBC America", + "provider_id": 397 + }, + + { + "name": "ESPN", + "provider_id": 1718 + }, + { + "name": "BET+", + "provider_id": 1759 + } +] From ffc8571a891598996a9f3add260721a491973c7c Mon Sep 17 00:00:00 2001 From: femke77 Date: Tue, 13 May 2025 00:31:37 -0700 Subject: [PATCH 3/4] added additional sort by watch provider feature --- .../containers/MediaListContainer.tsx | 90 +++++++++++-------- src/components/selectors/ListBox.tsx | 14 +-- src/utils/data/providers.json | 83 +++++++++++------ 3 files changed, 119 insertions(+), 68 deletions(-) diff --git a/src/components/containers/MediaListContainer.tsx b/src/components/containers/MediaListContainer.tsx index b3515c3..ff9681d 100644 --- a/src/components/containers/MediaListContainer.tsx +++ b/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(() => { + const stored = sessionStorage.getItem(`watchProvider`); + return stored || ''; + }); + + console.log(watchProviderOption, 'watchProviderOption'); + useEffect(() => { if (isInitialMount.current) { sessionStorage.setItem('lastPath', location.pathname); @@ -78,14 +84,14 @@ const MediaListContainer = ({ } return; } - + sessionStorage.setItem('watchProvider', watchProviderOption); sessionStorage.setItem( `${mediaType}-selectedGenres`, - JSON.stringify(selectedGenres), + JSON.stringify(selectedGenres) ); sessionStorage.setItem( `${mediaType}-deSelectedGenres`, - JSON.stringify(deSelectedGenres), + JSON.stringify(deSelectedGenres) ); sessionStorage.setItem(`${mediaType}-sortBy`, sortByOption); }, [ @@ -94,6 +100,7 @@ const MediaListContainer = ({ deSelectedGenres, sortByOption, mediaType, + watchProviderOption, location.pathname, ]); @@ -103,7 +110,7 @@ const MediaListContainer = ({ return prev.filter((genre) => genre !== genreId); } else { setDeSelectedGenres((deselected) => - deselected.filter((genre) => genre !== genreId), + deselected.filter((genre) => genre !== genreId) ); return [...prev, genreId]; @@ -117,30 +124,35 @@ const MediaListContainer = ({ return prev.filter((genre) => genre !== genreId); } else { setSelectedGenres((selected) => - selected.filter((genre) => genre !== genreId), + selected.filter((genre) => genre !== genreId) ); return [...prev, genreId]; } }); }; - const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } = - useInfiniteDiscoverQuery( - mediaType, - selectedGenres?.join(','), - sortByOption, - '', //lang is english only - voteAverage, - voteCount, - deSelectedGenres.join(','), - with_companies, - with_networks, - watch_providers, - primary_release_date_gte, - primary_release_date_lte, - first_air_date_gte, - first_air_date_lte, - ); + const { + data, + fetchNextPage, + hasNextPage, + isFetchingNextPage, + isLoading, + } = useInfiniteDiscoverQuery( + mediaType, + selectedGenres?.join(','), + sortByOption, + '', //lang is english only + voteAverage, + voteCount, + deSelectedGenres.join(','), + with_companies, + with_networks, + watchProviderOption, + primary_release_date_gte, + primary_release_date_lte, + first_air_date_gte, + first_air_date_lte + ); return (
@@ -151,22 +163,30 @@ const MediaListContainer = ({

{heading}

-
- + +
+ +
- - +
+ +
{data && ( - + {title ?? - sortOptions.find((opt) => opt.value === sortByOption)?.name ?? - 'Sort By'} + availableOptions.find((opt) => opt.value === selectedOption)?.name ?? + 'Select...'}