87 lines
2.6 KiB
TypeScript
87 lines
2.6 KiB
TypeScript
|
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 <a href={link}><img src={tmdb.makeLogoPath(e.logo_path)} className="watch-logo" key={e.provider_id + "_" + i} /></a>
|
||
|
|
})
|
||
|
|
return <div className="watch-logos-container">
|
||
|
|
{list}
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
|
||
|
|
export function WhereToWatch({ watchProviders }: WhereToWatchProps) {
|
||
|
|
if (!watchProviders?.link) {
|
||
|
|
console.group()
|
||
|
|
console.log("Watch providers (WhereToWatch)")
|
||
|
|
console.log(watchProviders)
|
||
|
|
console.groupEnd()
|
||
|
|
return <div id="no-watch"></div>
|
||
|
|
}
|
||
|
|
return <><div id="watch-providers">
|
||
|
|
{watchProviders?.flatrate?.length > 0 ? <div><h1>Streaming:</h1><ProviderIcons providerList={watchProviders.flatrate} link={watchProviders.link} /></div> : ""}
|
||
|
|
{watchProviders?.rent?.length > 0 ? <div><h1>Alquiler:</h1><ProviderIcons providerList={watchProviders.rent} link={watchProviders.link} /></div> : ""}
|
||
|
|
{watchProviders?.buy?.length > 0 ? <div><h1>Comprar:</h1><ProviderIcons providerList={watchProviders.buy} link={watchProviders.link} /></div> : ""}
|
||
|
|
</div>
|
||
|
|
<p>Powered by Just Watch.</p>
|
||
|
|
</>
|
||
|
|
}
|