# rapabru/cinemaroulette24hs architecture

> Architecture diagram of the GitHub repository rapabru/cinemaroulette24hs, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/rapabru/cinemaroulette24hs
- Repository: https://github.com/rapabru/cinemaroulette24hs
- Video tour (about a minute): https://gitdiagram.com/rapabru/cinemaroulette24hs/video

## Overview

CYBERCAFÉ 24HS is a browser-based movie discovery and roulette terminal. Users compose catalog filters or search titles, browse TMDB results, draw a random eligible movie, then inspect details or choose a streaming option. The app also supports watched tracking, draw history, saved filter presets, Google sign-in, subtitles, and multilingual UI. The sampled App and component excerpts establish the main orchestration; some player and API wiring is based on README capabilities, so uncertain internal links are omitted.

Main entry points: [`src/App.tsx`](https://github.com/rapabru/cinemaroulette24hs/blob/main/src/App.tsx) (App orchestrator), [`src/lib/tmdb.ts`](https://github.com/rapabru/cinemaroulette24hs/blob/main/src/lib/tmdb.ts) (TMDB client), [`src/components/RouletteModal.tsx`](https://github.com/rapabru/cinemaroulette24hs/blob/main/src/components/RouletteModal.tsx) (Roulette details), [`src/components/FilterPanel.tsx`](https://github.com/rapabru/cinemaroulette24hs/blob/main/src/components/FilterPanel.tsx) (Filter panel)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_discovery["Discovery & Draw"]
  node_filters["Filter panel<br/>[FilterPanel.tsx]"]
  node_catalog["Catalog grid<br/>[CatalogGrid.tsx]"]
  node_moviecard["Movie card<br/>[MovieCard.tsx]"]
  node_tmdb["TMDB client<br/>[tmdb.ts]"]
  node_mockcatalog["Fallback catalog<br/>[mockMovies.ts]"]
end

subgraph group_playback["Movie Playback"]
  node_roulette["Roulette details<br/>[RouletteModal.tsx]"]
  node_torrentio["Torrentio player"]
  node_torrentlib["Torrentio client<br/>[torrentio.ts]"]
  node_omdb["OMDb ratings<br/>[omdb.ts]"]
end

subgraph group_personal["Personal Features"]
  node_historyview["Draw history view"]
  node_history[("Draw history store<br/>[history.ts]")]
  node_watchedview["Watched view<br/>[WatchedView.tsx]"]
  node_watched[("Watched store<br/>[watched.ts]")]
  node_presets[("Filter presets<br/>[presets.ts]")]
  node_googlemodal["Google login modal"]
  node_auth[("Local auth state<br/>[auth.ts]")]
end

subgraph group_platform["App Platform"]
  node_app["App orchestrator<br/>[App.tsx]"]
  node_apikeymodal["API key settings<br/>[ApiKeyModal.tsx]"]
  node_i18n["Translations<br/>[index.ts]"]
  node_audio["Background audio"]
end

node_viewer(("Movie viewer"))
node_tmdbservice["TMDB API"]
node_torrentservice["Torrentio addon"]
node_webtor["Webtor player"]
node_vidking["VidKing player"]
node_playimdb["PlayIMDB server"]
node_subdivx["SubDivX subtitles"]
node_google["Google Identity"]
node_omdbservice["OMDb API"]

node_viewer -->|"uses"| node_app
node_app -->|"renders"| node_filters
node_app -->|"renders"| node_catalog
node_catalog -->|"renders"| node_moviecard
node_filters -->|"searches people"| node_tmdb
node_filters -->|"saves presets"| node_presets
node_app -->|"loads catalog"| node_tmdb
node_app -->|"draws movie"| node_tmdb
node_app -->|"loads details"| node_tmdb
node_tmdb -->|"requests data"| node_tmdbservice
node_tmdb -.->|"falls back"| node_mockcatalog
node_app -->|"shows result"| node_roulette
node_roulette -->|"loads ratings"| node_omdb
node_omdb -->|"requests ratings"| node_omdbservice
node_roulette -->|"selects provider"| node_torrentio
node_torrentio -->|"requests sources"| node_torrentlib
node_torrentlib -->|"queries sources"| node_torrentservice
node_torrentio -->|"plays magnet"| node_webtor
node_roulette -.->|"embeds stream"| node_vidking
node_roulette -.->|"opens stream"| node_playimdb
node_viewer -.->|"searches subtitles"| node_subdivx
node_app -->|"shows history"| node_historyview
node_app -->|"reads and records"| node_history
node_app -->|"shows watched"| node_watchedview
node_app -->|"tracks watched"| node_watched
node_app -->|"opens sign-in"| node_googlemodal
node_app -->|"loads and saves user"| node_auth
node_googlemodal -.->|"authenticates"| node_google
node_googlemodal -->|"creates session"| node_auth
node_app -->|"configures keys"| node_apikeymodal
node_app -->|"uses translations"| node_i18n
node_app -->|"renders audio"| node_audio

click node_app "https://github.com/rapabru/cinemaroulette24hs/blob/main/src/App.tsx"
click node_filters "https://github.com/rapabru/cinemaroulette24hs/blob/main/src/components/FilterPanel.tsx"
click node_catalog "https://github.com/rapabru/cinemaroulette24hs/blob/main/src/components/CatalogGrid.tsx"
click node_moviecard "https://github.com/rapabru/cinemaroulette24hs/blob/main/src/components/MovieCard.tsx"
click node_tmdb "https://github.com/rapabru/cinemaroulette24hs/blob/main/src/lib/tmdb.ts"
click node_mockcatalog "https://github.com/rapabru/cinemaroulette24hs/blob/main/src/lib/mockMovies.ts"
click node_roulette "https://github.com/rapabru/cinemaroulette24hs/blob/main/src/components/RouletteModal.tsx"
click node_torrentio "https://github.com/rapabru/cinemaroulette24hs/blob/main/src/components/TorrentioPlayer.tsx"
click node_torrentlib "https://github.com/rapabru/cinemaroulette24hs/blob/main/src/lib/torrentio.ts"
click node_historyview "https://github.com/rapabru/cinemaroulette24hs/blob/main/src/components/DrawHistoryView.tsx"
click node_history "https://github.com/rapabru/cinemaroulette24hs/blob/main/src/lib/history.ts"
click node_watchedview "https://github.com/rapabru/cinemaroulette24hs/blob/main/src/components/WatchedView.tsx"
click node_watched "https://github.com/rapabru/cinemaroulette24hs/blob/main/src/lib/watched.ts"
click node_presets "https://github.com/rapabru/cinemaroulette24hs/blob/main/src/lib/presets.ts"
click node_googlemodal "https://github.com/rapabru/cinemaroulette24hs/blob/main/src/components/GoogleLoginModal.tsx"
click node_auth "https://github.com/rapabru/cinemaroulette24hs/blob/main/src/lib/auth.ts"
click node_apikeymodal "https://github.com/rapabru/cinemaroulette24hs/blob/main/src/components/ApiKeyModal.tsx"
click node_omdb "https://github.com/rapabru/cinemaroulette24hs/blob/main/src/lib/omdb.ts"
click node_i18n "https://github.com/rapabru/cinemaroulette24hs/blob/main/src/i18n/index.ts"
click node_audio "https://github.com/rapabru/cinemaroulette24hs/blob/main/src/components/BackgroundAudioPlayer.tsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_filters,node_catalog,node_moviecard,node_tmdb,node_mockcatalog,node_viewer toneBlue
class node_roulette,node_torrentio,node_torrentlib,node_omdb toneAmber
class node_historyview,node_history,node_watchedview,node_watched,node_presets,node_googlemodal,node_auth,node_tmdbservice,node_playimdb,node_omdbservice toneMint
class node_app,node_apikeymodal,node_i18n,node_audio toneRose
class node_torrentservice,node_webtor,node_vidking,node_subdivx,node_google toneIndigo
```

## Components

### Discovery & Draw

- [Filter panel](https://github.com/rapabru/cinemaroulette24hs/blob/main/src/components/FilterPanel.tsx): `src/components/FilterPanel.tsx`
- [Catalog grid](https://github.com/rapabru/cinemaroulette24hs/blob/main/src/components/CatalogGrid.tsx): `src/components/CatalogGrid.tsx`
- [Movie card](https://github.com/rapabru/cinemaroulette24hs/blob/main/src/components/MovieCard.tsx): `src/components/MovieCard.tsx`
- [TMDB client](https://github.com/rapabru/cinemaroulette24hs/blob/main/src/lib/tmdb.ts): `src/lib/tmdb.ts`
- [Fallback catalog](https://github.com/rapabru/cinemaroulette24hs/blob/main/src/lib/mockMovies.ts): `src/lib/mockMovies.ts`

### Movie Playback

- [Roulette details](https://github.com/rapabru/cinemaroulette24hs/blob/main/src/components/RouletteModal.tsx): `src/components/RouletteModal.tsx`
- [Torrentio player](https://github.com/rapabru/cinemaroulette24hs/blob/main/src/components/TorrentioPlayer.tsx): `src/components/TorrentioPlayer.tsx`
- [Torrentio client](https://github.com/rapabru/cinemaroulette24hs/blob/main/src/lib/torrentio.ts): `src/lib/torrentio.ts`
- [OMDb ratings](https://github.com/rapabru/cinemaroulette24hs/blob/main/src/lib/omdb.ts): `src/lib/omdb.ts`

### Personal Features

- [Draw history view](https://github.com/rapabru/cinemaroulette24hs/blob/main/src/components/DrawHistoryView.tsx): `src/components/DrawHistoryView.tsx`
- [Draw history store](https://github.com/rapabru/cinemaroulette24hs/blob/main/src/lib/history.ts): `src/lib/history.ts`
- [Watched view](https://github.com/rapabru/cinemaroulette24hs/blob/main/src/components/WatchedView.tsx): `src/components/WatchedView.tsx`
- [Watched store](https://github.com/rapabru/cinemaroulette24hs/blob/main/src/lib/watched.ts): `src/lib/watched.ts`
- [Filter presets](https://github.com/rapabru/cinemaroulette24hs/blob/main/src/lib/presets.ts): `src/lib/presets.ts`
- [Google login modal](https://github.com/rapabru/cinemaroulette24hs/blob/main/src/components/GoogleLoginModal.tsx): `src/components/GoogleLoginModal.tsx`
- [Local auth state](https://github.com/rapabru/cinemaroulette24hs/blob/main/src/lib/auth.ts): `src/lib/auth.ts`

### App Platform

- [App orchestrator](https://github.com/rapabru/cinemaroulette24hs/blob/main/src/App.tsx): `src/App.tsx`
- [API key settings](https://github.com/rapabru/cinemaroulette24hs/blob/main/src/components/ApiKeyModal.tsx): `src/components/ApiKeyModal.tsx`
- [Translations](https://github.com/rapabru/cinemaroulette24hs/blob/main/src/i18n/index.ts): `src/i18n/index.ts`
- [Background audio](https://github.com/rapabru/cinemaroulette24hs/blob/main/src/components/BackgroundAudioPlayer.tsx): `src/components/BackgroundAudioPlayer.tsx`

### Other components

- **Movie viewer**
- **TMDB API**
- **Torrentio addon**
- **Webtor player**
- **VidKing player**
- **PlayIMDB server**
- **SubDivX subtitles**
- **Google Identity**
- **OMDb API**

## Connections

- Movie viewer → App orchestrator: uses
- App orchestrator → Filter panel: renders
- App orchestrator → Catalog grid: renders
- Catalog grid → Movie card: renders
- Filter panel → TMDB client: searches people
- Filter panel → Filter presets: saves presets
- App orchestrator → TMDB client: loads catalog
- App orchestrator → TMDB client: draws movie
- App orchestrator → TMDB client: loads details
- TMDB client → TMDB API: requests data
- TMDB client → Fallback catalog: falls back
- App orchestrator → Roulette details: shows result
- Roulette details → OMDb ratings: loads ratings
- OMDb ratings → OMDb API: requests ratings
- Roulette details → Torrentio player: selects provider
- Torrentio player → Torrentio client: requests sources
- Torrentio client → Torrentio addon: queries sources
- Torrentio player → Webtor player: plays magnet
- Roulette details → VidKing player: embeds stream
- Roulette details → PlayIMDB server: opens stream
- Movie viewer → SubDivX subtitles: searches subtitles
- App orchestrator → Draw history view: shows history
- App orchestrator → Draw history store: reads and records
- App orchestrator → Watched view: shows watched
- App orchestrator → Watched store: tracks watched
- App orchestrator → Google login modal: opens sign-in
- App orchestrator → Local auth state: loads and saves user
- Google login modal → Google Identity: authenticates
- Google login modal → Local auth state: creates session
- App orchestrator → API key settings: configures keys
- App orchestrator → Translations: uses translations
- App orchestrator → Background audio: renders audio