# maxty40/dasar_git architecture

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

- Interactive diagram: https://gitdiagram.com/maxty40/dasar_git
- Repository: https://github.com/maxty40/dasar_git

## Overview

Nexus Video Player is a browser-based player organized around a user-driven playlist and FIFO up-next queue. Users add or reorder playlist videos, navigate between tracks, and enqueue videos to play next; the app updates the player UI and persists playlist and queue state in localStorage. The graph separates UI orchestration, playback/list management, queue management, and persistence. README documents these capabilities; edges are limited to relationships shown in excerpts or stated there, since parts of app.js were not sampled.

Main entry points: [`js/app.js`](https://github.com/maxty40/dasar_git/blob/main/js/app.js) (UI event orchestration), [`js/modules/storage.js`](https://github.com/maxty40/dasar_git/blob/main/js/modules/storage.js) (State hydration and serialization), [`js/modules/structures.js`](https://github.com/maxty40/dasar_git/blob/main/js/modules/structures.js) (Playlist navigation)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["Player interface"]
  node_app["UI event orchestration<br/>[app.js]"]
  node_playerui["Player and playlist UI<br/>[app.js]"]
  node_queueui["Queue display<br/>[app.js]"]
  node_video["Video embed"]
end

subgraph group_playback["Playlist playback"]
  node_playlist["Playlist navigation<br/>[structures.js]"]
  node_videonode["Playlist nodes<br/>[structures.js]"]
end

subgraph group_queue["Up-next queue"]
  node_fifo["FIFO queue<br/>[structures.js]"]
  node_queuenode["Queue nodes<br/>[structures.js]"]
end

subgraph group_persistence["Local persistence"]
  node_storage["State hydration and serialization<br/>[storage.js]"]
end

node_user(("User"))
node_localstorage[("Browser localStorage")]

node_user -->|"triggers controls"| node_app
node_app -->|"manages playback"| node_playlist
node_app -->|"manages queue"| node_fifo
node_app -->|"loads and saves"| node_storage
node_app -->|"renders playback"| node_playerui
node_app -->|"renders queue"| node_queueui
node_playerui -->|"reads current track"| node_playlist
node_playerui -->|"sets embed source"| node_video
node_queueui -->|"renders queue items"| node_fifo
node_playlist -->|"creates nodes"| node_videonode
node_fifo -->|"creates nodes"| node_queuenode
node_storage -->|"hydrates and serializes"| node_playlist
node_storage -->|"hydrates and serializes"| node_fifo
node_storage -->|"reads and writes"| node_localstorage

click node_app "https://github.com/maxty40/dasar_git/blob/main/js/app.js"
click node_playerui "https://github.com/maxty40/dasar_git/blob/main/js/app.js"
click node_queueui "https://github.com/maxty40/dasar_git/blob/main/js/app.js"
click node_playlist "https://github.com/maxty40/dasar_git/blob/main/js/modules/structures.js"
click node_videonode "https://github.com/maxty40/dasar_git/blob/main/js/modules/structures.js"
click node_fifo "https://github.com/maxty40/dasar_git/blob/main/js/modules/structures.js"
click node_queuenode "https://github.com/maxty40/dasar_git/blob/main/js/modules/structures.js"
click node_storage "https://github.com/maxty40/dasar_git/blob/main/js/modules/storage.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_app,node_playerui,node_queueui,node_video,node_user toneBlue
class node_playlist,node_videonode,node_localstorage toneAmber
class node_fifo,node_queuenode toneMint
class node_storage toneRose
```

## Components

### Player interface

- [UI event orchestration](https://github.com/maxty40/dasar_git/blob/main/js/app.js): `js/app.js`
- [Player and playlist UI](https://github.com/maxty40/dasar_git/blob/main/js/app.js): `js/app.js`
- [Queue display](https://github.com/maxty40/dasar_git/blob/main/js/app.js): `js/app.js`
- **Video embed**

### Playlist playback

- [Playlist navigation](https://github.com/maxty40/dasar_git/blob/main/js/modules/structures.js): `js/modules/structures.js`
- [Playlist nodes](https://github.com/maxty40/dasar_git/blob/main/js/modules/structures.js): `js/modules/structures.js`

### Up-next queue

- [FIFO queue](https://github.com/maxty40/dasar_git/blob/main/js/modules/structures.js): `js/modules/structures.js`
- [Queue nodes](https://github.com/maxty40/dasar_git/blob/main/js/modules/structures.js): `js/modules/structures.js`

### Local persistence

- [State hydration and serialization](https://github.com/maxty40/dasar_git/blob/main/js/modules/storage.js): `js/modules/storage.js`

### Other components

- **User**
- **Browser localStorage**

## Connections

- User → UI event orchestration: triggers controls (evidence: `js/app.js`)
- UI event orchestration → Playlist navigation: manages playback (evidence: `js/app.js`)
- UI event orchestration → FIFO queue: manages queue (evidence: `js/app.js`)
- UI event orchestration → State hydration and serialization: loads and saves (evidence: `js/app.js`)
- UI event orchestration → Player and playlist UI: renders playback (evidence: `js/app.js`)
- UI event orchestration → Queue display: renders queue (evidence: `js/app.js`)
- Player and playlist UI → Playlist navigation: reads current track (evidence: `js/app.js`)
- Player and playlist UI → Video embed: sets embed source (evidence: `js/app.js`)
- Queue display → FIFO queue: renders queue items (evidence: `js/app.js`)
- Playlist navigation → Playlist nodes: creates nodes (evidence: `js/modules/structures.js`)
- FIFO queue → Queue nodes: creates nodes (evidence: `js/modules/structures.js`)
- State hydration and serialization → Playlist navigation: hydrates and serializes (evidence: `js/modules/storage.js`)
- State hydration and serialization → FIFO queue: hydrates and serializes (evidence: `js/modules/storage.js`)
- State hydration and serialization → Browser localStorage: reads and writes (evidence: `js/modules/storage.js`)