93 lines
3.2 KiB
TypeScript
93 lines
3.2 KiB
TypeScript
import React from "react"
|
|
import tmdb from "./tmdb"
|
|
import { Config } from "../App"
|
|
|
|
export interface WatchProviders {
|
|
flatrate: Array<{}>;
|
|
rent: Array<{}>;
|
|
buy: Array<{}>;
|
|
link: string;
|
|
}
|
|
interface WhereToWatchProps extends React.ComponentPropsWithRef<"div"> {
|
|
watchProviders: WatchProviders;
|
|
config: Config;
|
|
}
|
|
// 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 <div className="watch-logo">
|
|
<a href={link}>
|
|
<img src={tmdb.makeLogoPath(e.logo_path)} key={e.provider_id + "_" + i} /></a>
|
|
</div>
|
|
})
|
|
return <div className="watch-logos-container">
|
|
{list}
|
|
</div>
|
|
}
|
|
function watchProvidersExist(watchProviders: any) {
|
|
return watchProviders?.link
|
|
|
|
}
|
|
export function WhereToWatch({ watchProviders, config }: WhereToWatchProps) {
|
|
if (!watchProvidersExist(watchProviders)) {
|
|
return <p>{config.language == "es" ? "Por el momento no hay opciónes streaming." : config.language == "en" ? "There are no online viewing options right now." : ""}</p>
|
|
}
|
|
return <><footer id="sidebar-footer">
|
|
<div id="watch-providers-container">
|
|
{watchProviders?.flatrate?.length > 0 ? <div className="watch-providers"><h1>Streaming:</h1><ProviderIcons providerList={watchProviders.flatrate} link={watchProviders.link} /></div> : ""}
|
|
{watchProviders?.rent?.length > 0 ? <div className="watch-providers"><h1>{config.language == "es" ? "Alquiler:" : config.language == "en" ? "To Rent:" : ""}</h1><ProviderIcons providerList={watchProviders.rent} link={watchProviders.link} /></div> : ""}
|
|
{watchProviders?.buy?.length > 0 ? <div className="watch-providers"><h1>{config.language == "es" ? "Comprar:" : config.language == "en" ? "To Buy:" : ""}</h1><ProviderIcons providerList={watchProviders.buy} link={watchProviders.link} /></div> : ""}
|
|
</div>
|
|
<p>Powered by Just Watch.</p>
|
|
</footer>
|
|
</>
|
|
}
|