# nadunsnt/sinage_poc architecture

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

- Interactive diagram: https://gitdiagram.com/nadunsnt/sinage_poc
- Repository: https://github.com/nadunsnt/sinage_poc

## Overview

This is a static digital-signage browser player. A viewer starts or resumes playback, and the player advances through an editable ordered list of local video clips, looping at the end; failures trigger bounded recovery and retry controls. The app also supports remote/keyboard navigation, fullscreen, configurable overlays, and playback diagnostics. The map separates configuration, presentation, playback behavior, and media. The excerpts show the app’s event handling and UI updates; connections to playlist and settings configuration are documented in the README, while unsampled implementation details are not inferred.

Main entry points: [`app.js`](https://github.com/nadunsnt/sinage_poc/blob/main/app.js) (Playback controller), [`index.html`](https://github.com/nadunsnt/sinage_poc/blob/main/index.html) (Player interface), [`styles.css`](https://github.com/nadunsnt/sinage_poc/blob/main/styles.css) (Responsive layout), [`playlist.js`](https://github.com/nadunsnt/sinage_poc/blob/main/playlist.js) (Ordered playlist)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_presentation["Player presentation"]
  node_player_markup["Player interface<br/>[index.html]"]
  node_player_styles["Responsive layout<br/>[styles.css]"]
end

subgraph group_playback["Playback runtime"]
  node_playback_controller["Playback controller<br/>[app.js]"]
  node_playlist_advancement["Playlist advancement<br/>[app.js]"]
  node_failure_recovery["Failure recovery<br/>[app.js]"]
  node_remote_navigation["Remote navigation<br/>[app.js]"]
  node_playback_diagnostics["Playback diagnostics<br/>[app.js]"]
  node_presentation_controls["Overlay controls<br/>[app.js]"]
  node_fullscreen_control["Fullscreen control<br/>[app.js]"]
end

subgraph group_configuration["Player configuration"]
  node_playlist_config["Ordered playlist<br/>[playlist.js]"]
  node_startup_settings["Startup preferences<br/>[settings.js]"]
end

subgraph group_media["Local media"]
  node_video_clips["Video clips"]
  node_browser_video["Browser video element"]
end

node_viewer(("Viewer / remote"))

node_viewer -->|"uses controls"| node_player_markup
node_player_markup -->|"sends actions"| node_playback_controller
node_playback_controller -->|"updates interface"| node_player_markup
node_player_styles -->|"styles"| node_player_markup
node_playlist_config -->|"configures order"| node_playback_controller
node_startup_settings -->|"configures startup"| node_playback_controller
node_playback_controller -->|"controls playback"| node_browser_video
node_playlist_advancement -->|"selects clips"| node_video_clips
node_browser_video -->|"signals ended"| node_playlist_advancement
node_browser_video -->|"reports errors"| node_failure_recovery
node_failure_recovery -->|"retries playback"| node_playback_controller
node_remote_navigation -->|"focuses controls"| node_player_markup
node_playback_controller -->|"updates status"| node_playback_diagnostics
node_playback_controller -->|"updates overlays"| node_presentation_controls
node_viewer -->|"requests fullscreen"| node_fullscreen_control
node_fullscreen_control -->|"toggles display"| node_player_markup

click node_player_markup "https://github.com/nadunsnt/sinage_poc/blob/main/index.html"
click node_player_styles "https://github.com/nadunsnt/sinage_poc/blob/main/styles.css"
click node_playback_controller "https://github.com/nadunsnt/sinage_poc/blob/main/app.js"
click node_playlist_advancement "https://github.com/nadunsnt/sinage_poc/blob/main/app.js"
click node_failure_recovery "https://github.com/nadunsnt/sinage_poc/blob/main/app.js"
click node_remote_navigation "https://github.com/nadunsnt/sinage_poc/blob/main/app.js"
click node_playback_diagnostics "https://github.com/nadunsnt/sinage_poc/blob/main/app.js"
click node_presentation_controls "https://github.com/nadunsnt/sinage_poc/blob/main/app.js"
click node_fullscreen_control "https://github.com/nadunsnt/sinage_poc/blob/main/app.js"
click node_playlist_config "https://github.com/nadunsnt/sinage_poc/blob/main/playlist.js"
click node_startup_settings "https://github.com/nadunsnt/sinage_poc/blob/main/settings.js"
click node_video_clips "https://github.com/nadunsnt/sinage_poc/tree/main/assets/videos"

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_player_markup,node_player_styles,node_viewer toneBlue
class node_playback_controller,node_playlist_advancement,node_failure_recovery,node_remote_navigation,node_playback_diagnostics,node_presentation_controls,node_fullscreen_control toneAmber
class node_playlist_config,node_startup_settings toneMint
class node_video_clips,node_browser_video toneRose
```

## Components

### Player presentation

- [Player interface](https://github.com/nadunsnt/sinage_poc/blob/main/index.html): `index.html`
- [Responsive layout](https://github.com/nadunsnt/sinage_poc/blob/main/styles.css): `styles.css`

### Playback runtime

- [Playback controller](https://github.com/nadunsnt/sinage_poc/blob/main/app.js): `app.js`
- [Playlist advancement](https://github.com/nadunsnt/sinage_poc/blob/main/app.js): `app.js`
- [Failure recovery](https://github.com/nadunsnt/sinage_poc/blob/main/app.js): `app.js`
- [Remote navigation](https://github.com/nadunsnt/sinage_poc/blob/main/app.js): `app.js`
- [Playback diagnostics](https://github.com/nadunsnt/sinage_poc/blob/main/app.js): `app.js`
- [Overlay controls](https://github.com/nadunsnt/sinage_poc/blob/main/app.js): `app.js`
- [Fullscreen control](https://github.com/nadunsnt/sinage_poc/blob/main/app.js): `app.js`

### Player configuration

- [Ordered playlist](https://github.com/nadunsnt/sinage_poc/blob/main/playlist.js): `playlist.js`
- [Startup preferences](https://github.com/nadunsnt/sinage_poc/blob/main/settings.js): `settings.js`

### Local media

- [Video clips](https://github.com/nadunsnt/sinage_poc/tree/main/assets/videos): `assets/videos`
- **Browser video element**

### Other components

- **Viewer / remote**

## Connections

- Viewer / remote → Player interface: uses controls (evidence: `README.md`)
- Player interface → Playback controller: sends actions (evidence: `app.js`)
- Playback controller → Player interface: updates interface (evidence: `app.js`)
- Responsive layout → Player interface: styles (evidence: `README.md`)
- Ordered playlist → Playback controller: configures order (evidence: `README.md`)
- Startup preferences → Playback controller: configures startup (evidence: `README.md`)
- Playback controller → Browser video element: controls playback (evidence: `app.js`)
- Playlist advancement → Video clips: selects clips (evidence: `README.md`)
- Browser video element → Playlist advancement: signals ended (evidence: `app.js`)
- Browser video element → Failure recovery: reports errors (evidence: `app.js`)
- Failure recovery → Playback controller: retries playback (evidence: `app.js`)
- Remote navigation → Player interface: focuses controls (evidence: `app.js`)
- Playback controller → Playback diagnostics: updates status (evidence: `app.js`)
- Playback controller → Overlay controls: updates overlays (evidence: `app.js`)
- Viewer / remote → Fullscreen control: requests fullscreen (evidence: `README.md`)
- Fullscreen control → Player interface: toggles display (evidence: `app.js`)