detail page components

2026-03-27 23:06:44 +02:00
parent 02f0f58ec9
commit a039249ede
41 changed files with 6470 additions and 0 deletions
@@ -0,0 +1,142 @@
+import { useState } from 'react'
+import { ExternalLink, Globe } from '../../lib/icons'
+import Select, { type SelectOption } from '../ui/Select'
+import { motion } from 'framer-motion'
+import type { TmdbWatchProviders } from '../../api/tmdb'
+import { getTmdbImageUrl } from '../../api/tmdb'
+import { countryLabel } from '../../lib/format'
+import { SectionLabel } from '../ui/SectionLabel'
+
+interface Props {
+  providers?: TmdbWatchProviders | null
+  defaultRegion: string
+  onRegionChange?: (region: string) => void
+}
+
+const COMMON_REGIONS = ['US', 'GB', 'CA', 'AU', 'DE', 'FR', 'ES', 'IT', 'NL', 'JP', 'BR', 'IN', 'MX']
+
+export default function WhereToWatch({ providers, defaultRegion, onRegionChange }: Props) {
+  const [region, setRegion] = useState(defaultRegion)
+
+  const all = providers?.results || {}
+  const regionData = all[region]
+
+  const availableRegions = Object.keys(all).sort()
+
+  if (!regionData && !availableRegions.length) return null
+
+  function changeRegion(next: string) {
+    setRegion(next)
+    onRegionChange?.(next)
+  }
+
+  return (
+    <Section>
+      <div className="flex items-center justify-between mb-3 gap-3 flex-wrap">
+        <SectionLabel>Where to watch</SectionLabel>
+        <Select
+          size="sm"
+          ariaLabel="Region"
+          triggerIcon={<Globe size={11} stroke={2} />}
+          value={region}
+          onChange={changeRegion}
+          width="min-w-[160px]"
+          options={
+            [...new Set([region, ...COMMON_REGIONS, ...availableRegions])].map<SelectOption<string>>(r => ({
+              value: r,
+              label: countryLabel(r) || r,
+            }))
+          }
+        />
+      </div>
+
+      {!regionData ? (
+        <p className="text-[12px] text-text-4">
+          Not available for streaming in {countryLabel(region) || region}.
+        </p>
+      ) : (
+        <div className="space-y-3">
+          {regionData.flatrate && (
+            <ProviderRow label="Stream" link={regionData.link} providers={regionData.flatrate} />
+          )}
+          {regionData.free && (
+            <ProviderRow label="Free" link={regionData.link} providers={regionData.free} />
+          )}
+          {regionData.ads && (
+            <ProviderRow label="With ads" link={regionData.link} providers={regionData.ads} />
+          )}
+          {regionData.rent && (
+            <ProviderRow label="Rent" link={regionData.link} providers={regionData.rent} />
+          )}
+          {regionData.buy && (
+            <ProviderRow label="Buy" link={regionData.link} providers={regionData.buy} />
+          )}
+          {regionData.link && (
+            <a
+              href={regionData.link}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-1 text-[11px] text-text-4 hover:text-accent transition-colors"
+            >
+              View all options on TMDB <ExternalLink size={10} />
+            </a>
+          )}
+        </div>
+      )}
+    </Section>
+  )
+}
+
+function ProviderRow({
+  label,
+  link,
+  providers,
+}: {
+  label: string
+  link: string
+  providers: { provider_id: number; provider_name: string; logo_path: string | null }[]
+}) {
+  return (
+    <div className="flex items-center gap-3 flex-wrap">
+      <span className="text-[10px] font-semibold uppercase tracking-[0.12em] text-text-3 w-16 shrink-0">
+        {label}
+      </span>
+      <div className="flex items-center gap-2 flex-wrap">
+        {providers.map((p, i) => (
+          <motion.a
+            key={p.provider_id}
+            href={link}
+            target="_blank"
+            rel="noopener noreferrer"
+            initial={{ opacity: 0, y: 4 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.3, delay: i * 0.04 }}
+            whileHover={{ y: -2 }}
+            className="group relative shrink-0"
+            title={p.provider_name}
+          >
+            <div className="absolute inset-0 rounded-lg bg-accent/0 group-hover:bg-accent/15 blur-md transition-all duration-200" />
+            <div className="relative w-10 h-10 rounded-lg overflow-hidden ring-1 ring-border group-hover:ring-accent/40 transition-all duration-150">
+              {p.logo_path ? (
+                <img
+                  src={getTmdbImageUrl(p.logo_path, 'w92')}
+                  alt={p.provider_name}
+                  className="w-full h-full object-cover"
+                  loading="lazy"
+                />
+              ) : (
+                <div className="w-full h-full grid place-items-center bg-elevated text-text-3 text-[10px]">
+                  {p.provider_name[0]}
+                </div>
+              )}
+            </div>
+          </motion.a>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function Section({ children }: { children: React.ReactNode }) {
+  return <section className="mb-9">{children}</section>
+}