formatters, device profile, media matching, subtitle utils, syncplay, trakt

2026-03-24 10:48:59 +02:00
parent 292b3f42cf
commit 996a85de76
41 changed files with 4306 additions and 0 deletions
@@ -0,0 +1,95 @@
+import type { ComponentType } from 'react'
+import {
+  Sword,
+  MasksTheater,
+  MoodHappy,
+  Rocket,
+  Spy,
+  Ghost,
+  Palette,
+  HomeHeart,
+  Wand,
+  Binoculars,
+  Backpack,
+  Leaf,
+  News,
+  Trophy,
+  Microphone,
+  Gavel,
+  Globe,
+  Tv,
+  Film as FilmIcon,
+} from './icons'
+
+type IconCmp = ComponentType<{ size?: number; stroke?: number; className?: string }>
+
+/**
+ * Visual mapping for the Browse-by tiles. Each label gets a glyph + a
+ * solid tonal hue so the grid reads as a mosaic of distinct sections
+ * instead of a uniform wall of cards.
+ *
+ * Hue values are HSL tuples we feed to the tile background; the same
+ * hue at higher saturation drives the icon tint. Keeping everything on
+ * a single chromatic axis (warm-to-cool sweep) preserves the app's
+ * tonal-dark palette - no random rainbow.
+ */
+
+export interface TileVisual {
+  icon: IconCmp
+  /** HSL hue value 0-360. Tile uses this at low saturation + high luminance. */
+  hue: number
+}
+
+export const GENRE_VISUALS: Record<string, TileVisual> = {
+  Action: { icon: Sword, hue: 14 },
+  Drama: { icon: MasksTheater, hue: 280 },
+  Comedy: { icon: MoodHappy, hue: 48 },
+  'Science Fiction': { icon: Rocket, hue: 200 },
+  Thriller: { icon: Spy, hue: 0 },
+  Horror: { icon: Ghost, hue: 320 },
+  Animation: { icon: Palette, hue: 170 },
+  Romance: { icon: HomeHeart, hue: 340 },
+  Fantasy: { icon: Wand, hue: 260 },
+  Mystery: { icon: Binoculars, hue: 220 },
+  Adventure: { icon: Backpack, hue: 35 },
+  Documentary: { icon: Leaf, hue: 130 },
+  Crime: { icon: Gavel, hue: 10 },
+  Family: { icon: HomeHeart, hue: 40 },
+  News: { icon: News, hue: 210 },
+  Music: { icon: Microphone, hue: 290 },
+  History: { icon: Trophy, hue: 30 },
+}
+
+const GENRE_FALLBACK: TileVisual = { icon: FilmIcon, hue: 200 }
+
+export function genreVisual(label: string): TileVisual {
+  return GENRE_VISUALS[label] || GENRE_FALLBACK
+}
+
+const LANG_HUE: Record<string, number> = {
+  ja: 0,
+  ko: 220,
+  fr: 245,
+  es: 25,
+  de: 50,
+  it: 130,
+  zh: 12,
+  hi: 30,
+}
+
+export function languageVisual(code: string): TileVisual {
+  return { icon: Globe, hue: LANG_HUE[code] ?? 200 }
+}
+
+export function studioVisual(): TileVisual {
+  return { icon: FilmIcon, hue: 40 }
+}
+
+export function networkVisual(): TileVisual {
+  return { icon: Tv, hue: 220 }
+}
+
+/** Build the gradient background CSS for a tile from a hue value. */
+export function tileBackground(hue: number): string {
+  return `linear-gradient(135deg, hsla(${hue}, 50%, 38%, 0.32) 0%, hsla(${hue}, 30%, 18%, 0.55) 100%)`
+}