From 8225d77a997efe58ad89287a1e810d77ca1808e2 Mon Sep 17 00:00:00 2001 From: andrzej Date: Sat, 18 May 2024 13:59:35 +0200 Subject: [PATCH] add watch providers --- src/App.css | 29 ++++++++++-- src/App.tsx | 16 ++++--- src/objects/sidebar.tsx | 5 ++- src/objects/tmdb.tsx | 31 +++++-------- src/objects/whereToWatch.tsx | 86 ++++++++++++++++++++++++++++++++++++ 5 files changed, 139 insertions(+), 28 deletions(-) create mode 100644 src/objects/whereToWatch.tsx diff --git a/src/App.css b/src/App.css index 5bca138..8224a67 100644 --- a/src/App.css +++ b/src/App.css @@ -52,6 +52,11 @@ main { font-size: 1.6rem; background-color: rgba(0, 0, 0, 0.5); + min-height: 100%; + display: flex; + flex-direction: column; + justify-content: flex-end; + h1 { font-size: 2em; margin: 0; @@ -134,7 +139,7 @@ main { #background { - /* background-color: black; */ + background-color: black; position: absolute; width: 100%; height: 100%; @@ -145,6 +150,24 @@ main { .CrossfadeImage { width: 100%; height: 100%; - - + filter: blur(1rem) brightness(0.4); +} + +#watch-providers { + display: flex; + + h1 { + font-size: 1.6rem; + } + + .watch-logos-container { + display: flex; + gap: 0.4rem; + + .watch-logo { + width: 30px; + aspect-ratio: 1/1; + } + + } } diff --git a/src/App.tsx b/src/App.tsx index 6c1e55d..153d8c7 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -7,11 +7,13 @@ import tmdb from './objects/tmdb' import { Sidebar } from './objects/sidebar' import { Movie } from './objects/movie-wall' import CrossfadeImage from 'react-crossfade-image' +import { WhereToWatch } from './objects/whereToWatch' export type Config = { language: string, region: string, page: number, + locale: string } class MovieClass implements Movie { id = null @@ -26,13 +28,14 @@ function App() { const [config, setConfig] = useState({ language: "es", region: "spain", - page: 1 + page: 1, + locale: "ES" }) const [movies, setMovies] = useState([new MovieClass()]) const [backdrop, setBackdrop] = useState("") const [chosenMovie, setChosenMovie] = useState(new MovieClass()) const [similarMoviesAvailable, setSimilarMoviesAvailable] = useState(true) - + const [watchProviders, setWatchProviders] = useState({}) useEffect(() => { tmdb.getPopular(config, setMovies) }, []) useEffect(() => { const bgString = chosenMovie.backdrop_path ? @@ -40,9 +43,12 @@ function App() { : tmdb.makeBgImgUrl(movies[0]?.backdrop_path ?? "") setBackdrop(bgString) }, [movies]) - + useEffect(() => { + tmdb.getWhereToWatch(chosenMovie, setWatchProviders, config) + }, [chosenMovie]) const crossfadeImageStyles = { - width: "100%", + width: "2560px", + minHeight: "100%", aspectRatio: "16/9" } return ( @@ -51,7 +57,7 @@ function App() {
- +
{ movie: Movie; similarMoviesAvailable: boolean; + watchProviders: {}; } -export function Sidebar({ movie, similarMoviesAvailable }: SidebarProps) { +export function Sidebar({ movie, similarMoviesAvailable, watchProviders }: SidebarProps) { return diff --git a/src/objects/tmdb.tsx b/src/objects/tmdb.tsx index 241d724..9085f7b 100644 --- a/src/objects/tmdb.tsx +++ b/src/objects/tmdb.tsx @@ -56,7 +56,6 @@ export default { setSimilarMoviesAvailable(true) } else { setSimilarMoviesAvailable(false) - console.log("SIMILAR NOT AVAILABLE") } return true } else { @@ -64,24 +63,15 @@ export default { } }, - /** - *Calls TMDB/images, and sets the backdrop state accordingly - * - */ - getBackdrop: async function(movie: Movie, setBackdrop: Function) { - let res = await tmdb.get(movie.id + '/images') - console.log(res) - if (res.status === 200) { - const file_path = res.data.backdrops[0].file_path - console.log("file_path:" + file_path) - const imgUrl = this.makeBgImgUrl(file_path) - console.log("imgUrl: " + imgUrl) - setBackdrop(imgUrl) - } else { - throw Error("API call failed! Response: " + JSON.stringify(res)) + getWhereToWatch: async function(movie: Movie, setWatchProviders: Function, config: Config) { + if (movie?.id) { + let res = await tmdb.get(movie.id + "/watch/providers") + if (res.status == 200) { + setWatchProviders(res.data.results[config.locale]) + } else { + throw Error("API call failed! Response: " + JSON.stringify(res)) + } } - - }, makeBgImgUrl: /** @@ -103,5 +93,8 @@ export default { */ function(movie: Movie) { return "https://www.themoviedb.org/movie/" + movie.id - } + }, + makeLogoPath: function(str: string) { + return "https://image.tmdb.org/t/p/original/" + str + } } diff --git a/src/objects/whereToWatch.tsx b/src/objects/whereToWatch.tsx new file mode 100644 index 0000000..61eae19 --- /dev/null +++ b/src/objects/whereToWatch.tsx @@ -0,0 +1,86 @@ +import React from "react" +import tmdb from "./tmdb" + +interface WhereToWatchProps extends React.ComponentPropsWithRef<"div"> { + watchProviders: { + flatrate: Array<{}>; + rent: Array<{}>; + buy: Array<{}>; + link: string; + + }; +} +const sampleData = { + link: "https://www.themoviedb.org/movie/872585-oppenheimer/watch?locale=ES", + rent: [{ + logo_path: "/7K6rVbpWXB6ByDI0PRzGGRXRBSY.jpg", + provider_id: 149, + provider_name: "Movistar Plus", + display_priority: 12 + }], + buy: [{ + logo_path: "/9ghgSC0MA082EL6HLCW3GalykFD.jpg", + provider_id: 2, + provider_name: "Apple TV", + display_priority: 4 + }, + { + logo_path: "/bZvc9dXrXNly7cA0V4D9pR8yJwm.jpg", + provider_id: 35, + provider_name: "Rakuten TV", + display_priority: 13 + }, + { + logo_path: "/8z7rC8uIDaTM91X0ZfkRf04ydj2.jpg", + provider_id: 3, + provider_name: "Google Play Movies", + display_priority: 15 + }, + { + logo_path: "/5vfrJQgNe9UnHVgVNAwZTy0Jo9o.jpg", + provider_id: 68, + provider_name: "Microsoft Store", + display_priority: 16 + }, + { + logo_path: "/seGSXajazLMCKGB5hnRCidtjay1.jpg", + provider_id: 10, + provider_name: "Amazon Video", + display_priority: 36 + }], + flatrate: [{ + logo_path: "/gQbqEYd0C9uprYxEUqTM589qn8g.jpg", + provider_id: 1773, + provider_name: "SkyShowtime", + display_priority: 9 + }] +} +interface ProviderIconsProps extends React.ComponentPropsWithRef<"div"> { + providerList: Array<{}>; + link: string; +} +function ProviderIcons({ providerList, link }: ProviderIconsProps) { + const list = providerList.map((e: any, i: number) => { + return + }) + return
+ {list} +
+} + +export function WhereToWatch({ watchProviders }: WhereToWatchProps) { + if (!watchProviders?.link) { + console.group() + console.log("Watch providers (WhereToWatch)") + console.log(watchProviders) + console.groupEnd() + return
+ } + return <>
+ {watchProviders?.flatrate?.length > 0 ?

Streaming:

: ""} + {watchProviders?.rent?.length > 0 ?

Alquiler:

: ""} + {watchProviders?.buy?.length > 0 ?

Comprar:

: ""} +
+

Powered by Just Watch.

+ +}