# farrasai/signage architecture

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

- Interactive diagram: https://gitdiagram.com/farrasai/signage
- Repository: https://github.com/farrasai/signage

## Overview

Siaran is a digital-signage CMS: an administrator signs in, manages screens and media, arranges playlists and schedules, then assigns playback to TV browsers. The display player resolves scheduled or default playlists, renders media, and receives remote and emergency updates. Supabase provides persistence, authentication, storage, and realtime messaging. The README documents capabilities such as YouTube, agenda tables, pairing, and kiosk playback; some related page implementations were not sampled, so their detailed wiring is not inferred.

Main entry points: [`lib/supabase/client.ts`](https://github.com/farrasai/signage/blob/main/lib/supabase/client.ts) (Browser client), [`app/display/[slug]/page.tsx`](https://github.com/farrasai/signage/blob/main/app/display/%5Bslug%5D/page.tsx) (Display player), [`supabase/schema.sql`](https://github.com/farrasai/signage/blob/main/supabase/schema.sql) (Supabase database), [`app/dashboard/media/page.tsx`](https://github.com/farrasai/signage/blob/main/app/dashboard/media/page.tsx) (Media library)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_admin["Admin console"]
  node_login["Admin sign-in<br/>[page.tsx]"]
  node_overview["Screen overview<br/>[page.tsx]"]
  node_screen_admin["Screen management<br/>[page.tsx]"]
  node_emergency_admin["Emergency notices<br/>[page.tsx]"]
  node_remote_controls["Remote controls<br/>[RemoteControls.tsx]"]
end

subgraph group_content["Content planning"]
  node_media_admin["Media library<br/>[page.tsx]"]
  node_media_editor["Media editor<br/>[EditMediaModal.tsx]"]
  node_playlist_admin["Playlist management<br/>[page.tsx]"]
  node_playlist_editor["Playlist editor<br/>[page.tsx]"]
  node_schedule_admin["Schedule management<br/>[page.tsx]"]
end

subgraph group_playback["Screen playback"]
  node_pairing["Screen pairing<br/>[page.tsx]"]
  node_player["Display player<br/>[page.tsx]"]
  node_slide_stage["Media renderer<br/>[SlideStage.tsx]"]
  node_emergency_overlay["Emergency overlay"]
end

subgraph group_platform["Supabase platform"]
  node_browser_client["Browser client<br/>[client.ts]"]
  node_shared_utils["Playback utilities<br/>[utils.ts]"]
  node_database[("Supabase database<br/>[schema.sql]")]
  node_auth["Supabase Auth"]
  node_storage[("Supabase Storage")]
  node_realtime["Supabase Realtime"]
end

node_admin_actor(("Administrator"))
node_tv_actor(("TV browser"))

node_admin_actor -->|"signs in"| node_login
node_login -->|"creates client"| node_browser_client
node_login -->|"authenticates"| node_auth
node_admin_actor -->|"monitors screens"| node_overview
node_overview -->|"loads status"| node_browser_client
node_overview -->|"subscribes to changes"| node_realtime
node_admin_actor -->|"manages screens"| node_screen_admin
node_screen_admin -->|"reads and writes"| node_browser_client
node_screen_admin -->|"manages screens and pairing codes"| node_database
node_admin_actor -->|"publishes notices"| node_emergency_admin
node_emergency_admin -->|"updates notice"| node_browser_client
node_emergency_admin -->|"writes notice"| node_database
node_admin_actor -->|"manages media"| node_media_admin
node_media_admin -->|"reads and writes"| node_browser_client
node_media_admin -->|"stores media records"| node_database
node_media_admin -->|"uploads and removes files"| node_storage
node_media_admin -->|"opens editor"| node_media_editor
node_media_editor -->|"updates media"| node_browser_client
node_media_editor -->|"saves media details"| node_database
node_media_editor -->|"replaces files"| node_storage
node_admin_actor -->|"organizes playlists"| node_playlist_admin
node_playlist_admin -->|"loads playlists"| node_browser_client
node_playlist_admin -->|"opens playlist"| node_playlist_editor
node_playlist_editor -->|"manages playlist items"| node_browser_client
node_admin_actor -->|"sets schedules"| node_schedule_admin
node_schedule_admin -->|"reads and writes schedules"| node_browser_client
node_schedule_admin -->|"stores schedules"| node_database
node_tv_actor -->|"enters pairing code"| node_pairing
node_pairing -->|"redeems code"| node_browser_client
node_pairing -->|"redeems pairing"| node_database
node_tv_actor -->|"opens screen URL"| node_player
node_player -->|"loads screen data"| node_browser_client
node_player -->|"reads schedule and playlist"| node_database
node_player -->|"subscribes to updates"| node_realtime
node_player -->|"resolves active schedule"| node_shared_utils
node_player -->|"renders current media"| node_slide_stage
node_player -->|"shows active notice"| node_emergency_overlay
node_player -->|"updates screen heartbeat"| node_database
node_admin_actor -->|"issues playback command"| node_remote_controls
node_remote_controls -->|"sends command"| node_browser_client
node_remote_controls -->|"dispatches command"| node_realtime
node_database -.->|"publishes changes"| node_realtime

click node_login "https://github.com/farrasai/signage/blob/main/app/login/page.tsx"
click node_overview "https://github.com/farrasai/signage/blob/main/app/dashboard/page.tsx"
click node_screen_admin "https://github.com/farrasai/signage/blob/main/app/dashboard/displays/page.tsx"
click node_emergency_admin "https://github.com/farrasai/signage/blob/main/app/dashboard/emergency/page.tsx"
click node_media_admin "https://github.com/farrasai/signage/blob/main/app/dashboard/media/page.tsx"
click node_media_editor "https://github.com/farrasai/signage/blob/main/components/EditMediaModal.tsx"
click node_playlist_admin "https://github.com/farrasai/signage/blob/main/app/dashboard/playlists/page.tsx"
click node_playlist_editor "https://github.com/farrasai/signage/blob/main/app/dashboard/playlists/%5Bid%5D/page.tsx"
click node_schedule_admin "https://github.com/farrasai/signage/blob/main/app/dashboard/schedules/page.tsx"
click node_pairing "https://github.com/farrasai/signage/blob/main/app/display/page.tsx"
click node_player "https://github.com/farrasai/signage/blob/main/app/display/%5Bslug%5D/page.tsx"
click node_slide_stage "https://github.com/farrasai/signage/blob/main/components/SlideStage.tsx"
click node_remote_controls "https://github.com/farrasai/signage/blob/main/components/RemoteControls.tsx"
click node_emergency_overlay "https://github.com/farrasai/signage/blob/main/components/EmergencyOverlay.tsx"
click node_browser_client "https://github.com/farrasai/signage/blob/main/lib/supabase/client.ts"
click node_shared_utils "https://github.com/farrasai/signage/blob/main/lib/utils.ts"
click node_database "https://github.com/farrasai/signage/blob/main/supabase/schema.sql"

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_login,node_overview,node_screen_admin,node_emergency_admin,node_remote_controls,node_tv_actor toneBlue
class node_media_admin,node_media_editor,node_playlist_admin,node_playlist_editor,node_schedule_admin toneAmber
class node_pairing,node_player,node_slide_stage,node_emergency_overlay toneMint
class node_browser_client,node_shared_utils,node_database,node_auth,node_storage,node_realtime toneRose
class node_admin_actor toneIndigo
```

## Components

### Admin console

- [Admin sign-in](https://github.com/farrasai/signage/blob/main/app/login/page.tsx): `app/login/page.tsx`
- [Screen overview](https://github.com/farrasai/signage/blob/main/app/dashboard/page.tsx): `app/dashboard/page.tsx`
- [Screen management](https://github.com/farrasai/signage/blob/main/app/dashboard/displays/page.tsx): `app/dashboard/displays/page.tsx`
- [Emergency notices](https://github.com/farrasai/signage/blob/main/app/dashboard/emergency/page.tsx): `app/dashboard/emergency/page.tsx`
- [Remote controls](https://github.com/farrasai/signage/blob/main/components/RemoteControls.tsx): `components/RemoteControls.tsx`

### Content planning

- [Media library](https://github.com/farrasai/signage/blob/main/app/dashboard/media/page.tsx): `app/dashboard/media/page.tsx`
- [Media editor](https://github.com/farrasai/signage/blob/main/components/EditMediaModal.tsx): `components/EditMediaModal.tsx`
- [Playlist management](https://github.com/farrasai/signage/blob/main/app/dashboard/playlists/page.tsx): `app/dashboard/playlists/page.tsx`
- [Playlist editor](https://github.com/farrasai/signage/blob/main/app/dashboard/playlists/%5Bid%5D/page.tsx): `app/dashboard/playlists/[id]/page.tsx`
- [Schedule management](https://github.com/farrasai/signage/blob/main/app/dashboard/schedules/page.tsx): `app/dashboard/schedules/page.tsx`

### Screen playback

- [Screen pairing](https://github.com/farrasai/signage/blob/main/app/display/page.tsx): `app/display/page.tsx`
- [Display player](https://github.com/farrasai/signage/blob/main/app/display/%5Bslug%5D/page.tsx): `app/display/[slug]/page.tsx`
- [Media renderer](https://github.com/farrasai/signage/blob/main/components/SlideStage.tsx): `components/SlideStage.tsx`
- [Emergency overlay](https://github.com/farrasai/signage/blob/main/components/EmergencyOverlay.tsx): `components/EmergencyOverlay.tsx`

### Supabase platform

- [Browser client](https://github.com/farrasai/signage/blob/main/lib/supabase/client.ts): `lib/supabase/client.ts`
- [Playback utilities](https://github.com/farrasai/signage/blob/main/lib/utils.ts): `lib/utils.ts`
- [Supabase database](https://github.com/farrasai/signage/blob/main/supabase/schema.sql): `supabase/schema.sql`
- **Supabase Auth**
- **Supabase Storage**
- **Supabase Realtime**

### Other components

- **Administrator**
- **TV browser**

## Connections

- Administrator → Admin sign-in: signs in
- Admin sign-in → Browser client: creates client
- Admin sign-in → Supabase Auth: authenticates
- Administrator → Screen overview: monitors screens
- Screen overview → Browser client: loads status
- Screen overview → Supabase Realtime: subscribes to changes
- Administrator → Screen management: manages screens
- Screen management → Browser client: reads and writes
- Screen management → Supabase database: manages screens and pairing codes
- Administrator → Emergency notices: publishes notices
- Emergency notices → Browser client: updates notice
- Emergency notices → Supabase database: writes notice
- Administrator → Media library: manages media
- Media library → Browser client: reads and writes
- Media library → Supabase database: stores media records
- Media library → Supabase Storage: uploads and removes files
- Media library → Media editor: opens editor
- Media editor → Browser client: updates media
- Media editor → Supabase database: saves media details
- Media editor → Supabase Storage: replaces files
- Administrator → Playlist management: organizes playlists
- Playlist management → Browser client: loads playlists
- Playlist management → Playlist editor: opens playlist
- Playlist editor → Browser client: manages playlist items
- Administrator → Schedule management: sets schedules
- Schedule management → Browser client: reads and writes schedules
- Schedule management → Supabase database: stores schedules
- TV browser → Screen pairing: enters pairing code
- Screen pairing → Browser client: redeems code
- Screen pairing → Supabase database: redeems pairing
- TV browser → Display player: opens screen URL
- Display player → Browser client: loads screen data
- Display player → Supabase database: reads schedule and playlist
- Display player → Supabase Realtime: subscribes to updates
- Display player → Playback utilities: resolves active schedule
- Display player → Media renderer: renders current media
- Display player → Emergency overlay: shows active notice
- Display player → Supabase database: updates screen heartbeat
- Administrator → Remote controls: issues playback command
- Remote controls → Browser client: sends command
- Remote controls → Supabase Realtime: dispatches command
- Supabase database → Supabase Realtime: publishes changes