# hec-ovi/music architecture

> Architecture diagram of the GitHub repository hec-ovi/music, 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/hec-ovi/music
- Repository: https://github.com/hec-ovi/music

## Overview

This is a static, browser-only YouTube playlist player. Users import or create playlists, add and organize tracks, then play a selected list or the combined library; playlist data and settings stay in localStorage, with export and share options. The graph separates the UI/controller, playlist data handling, and playback integration. README documents several capabilities whose detailed handlers were not sampled, so those links are shown only where the available evidence supports them.

Main entry points: [`app.js`](https://github.com/hec-ovi/music/blob/main/app.js) (App controller), [`main.js`](https://github.com/hec-ovi/music/blob/main/main.js) (Player adapter), [`store.js`](https://github.com/hec-ovi/music/blob/main/store.js) (Playlist state), [`index.html`](https://github.com/hec-ovi/music/blob/main/index.html) (Static page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Playlist experience"]
  node_ui["Playlist UI<br/>[app.js]"]
  node_controller["App controller<br/>[app.js]"]
  node_build["Playlist builder<br/>[app.js]"]
  node_track_edit["Track editing<br/>[app.js]"]
  node_queue["Queue and modes<br/>[app.js]"]
  node_sharing["Share and export<br/>[app.js]"]
end

subgraph group_data["Playlist data"]
  node_parser["Import and parsing<br/>[store.js]"]
  node_playlist_state["Playlist state<br/>[store.js]"]
  node_persistence["Persistence<br/>[store.js]"]
end

subgraph group_playback["Playback"]
  node_player_adapter["Player adapter<br/>[main.js]"]
end

node_listener(("Listener"))
node_page["Static page<br/>[index.html]"]
node_browser_storage[("localStorage")]
node_youtube_player["YouTube player"]
node_youtube["YouTube"]
node_share_target(("Share recipient"))

node_listener -->|"uses"| node_ui
node_page -->|"loads"| node_controller
node_controller -->|"renders"| node_ui
node_controller -->|"handles input"| node_build
node_controller -->|"handles edits"| node_track_edit
node_controller -->|"controls playback"| node_queue
node_controller -->|"handles export"| node_sharing
node_build -->|"parses input"| node_parser
node_track_edit -->|"updates tracks"| node_playlist_state
node_controller -->|"reads playlists"| node_playlist_state
node_controller -->|"loads and saves"| node_persistence
node_persistence -->|"reads and writes"| node_browser_storage
node_sharing -->|"formats playlists"| node_playlist_state
node_sharing -.->|"shares URL or file"| node_share_target
node_controller -->|"creates player"| node_player_adapter
node_player_adapter -->|"calls API"| node_youtube_player
node_youtube_player -->|"streams video"| node_youtube
node_youtube -->|"sends events"| node_player_adapter

click node_page "https://github.com/hec-ovi/music/blob/main/index.html"
click node_ui "https://github.com/hec-ovi/music/blob/main/app.js"
click node_controller "https://github.com/hec-ovi/music/blob/main/app.js"
click node_build "https://github.com/hec-ovi/music/blob/main/app.js"
click node_track_edit "https://github.com/hec-ovi/music/blob/main/app.js"
click node_queue "https://github.com/hec-ovi/music/blob/main/app.js"
click node_sharing "https://github.com/hec-ovi/music/blob/main/app.js"
click node_parser "https://github.com/hec-ovi/music/blob/main/store.js"
click node_playlist_state "https://github.com/hec-ovi/music/blob/main/store.js"
click node_persistence "https://github.com/hec-ovi/music/blob/main/store.js"
click node_player_adapter "https://github.com/hec-ovi/music/blob/main/main.js"

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_ui,node_controller,node_build,node_track_edit,node_queue,node_sharing toneBlue
class node_parser,node_playlist_state,node_persistence,node_browser_storage toneAmber
class node_player_adapter toneMint
class node_listener,node_youtube_player,node_youtube,node_share_target toneIndigo
class node_page toneTeal
```

## Components

### Playlist experience

- [Playlist UI](https://github.com/hec-ovi/music/blob/main/app.js): `app.js`
- [App controller](https://github.com/hec-ovi/music/blob/main/app.js): `app.js`
- [Playlist builder](https://github.com/hec-ovi/music/blob/main/app.js): `app.js`
- [Track editing](https://github.com/hec-ovi/music/blob/main/app.js): `app.js`
- [Queue and modes](https://github.com/hec-ovi/music/blob/main/app.js): `app.js`
- [Share and export](https://github.com/hec-ovi/music/blob/main/app.js): `app.js`

### Playlist data

- [Import and parsing](https://github.com/hec-ovi/music/blob/main/store.js): `store.js`
- [Playlist state](https://github.com/hec-ovi/music/blob/main/store.js): `store.js`
- [Persistence](https://github.com/hec-ovi/music/blob/main/store.js): `store.js`

### Playback

- [Player adapter](https://github.com/hec-ovi/music/blob/main/main.js): `main.js`

### Other components

- **Listener**
- [Static page](https://github.com/hec-ovi/music/blob/main/index.html): `index.html`
- **localStorage**
- **YouTube player**
- **YouTube**
- **Share recipient**

## Connections

- Listener → Playlist UI: uses
- Static page → App controller: loads
- App controller → Playlist UI: renders
- App controller → Playlist builder: handles input
- App controller → Track editing: handles edits
- App controller → Queue and modes: controls playback
- App controller → Share and export: handles export
- Playlist builder → Import and parsing: parses input
- Track editing → Playlist state: updates tracks
- App controller → Playlist state: reads playlists
- App controller → Persistence: loads and saves
- Persistence → localStorage: reads and writes
- Share and export → Playlist state: formats playlists
- Share and export → Share recipient: shares URL or file
- App controller → Player adapter: creates player
- Player adapter → YouTube player: calls API
- YouTube player → YouTube: streams video
- YouTube → Player adapter: sends events