How allu555/ytplayer works
YT Music Player is a browser-based music player with a FastAPI proxy for YouTube Music song search and an embedded YouTube playback experience. The principal workflow is: a user searches in the app, the app requests results through the API client and server, then selecting a result loads it into the player and updates the interface. Authentication, favorites, and recent tracks use browser-local storage. The tree also includes a Netlify search function, but the sampled API client targets the server; its frontend wiring is not established by the excerpts.
Main entry points: app.js App Orchestrator · api.js Search Client · server.py FastAPI Server · player.js YouTube Player Adapter
Components 13
Browser App
- App Orchestrator
public/js/app.js - Views and Controls
public/js/ui.js - Search Client
public/js/api.js
Search Backend
- FastAPI Server
server.py - YT Music Search
- Netlify Search Function
netlify/functions/search.js - YT Music API
Playback
- YouTube Player Adapter
public/js/player.js - YouTube IFrame API
Local Data
- Local Authentication
public/js/auth.js - Favorites and Recents
public/js/storage.js - Browser Local Storage
Other components
- Listener
Connections 19
- Listener → App Orchestrator: uses
- App Orchestrator → Views and Controls: updates
- App Orchestrator → Local Authentication: checks login
- Local Authentication → Browser Local Storage: reads/writes
- App Orchestrator → Search Client: requests search
- Search Client → FastAPI Server: HTTP search
- FastAPI Server → YT Music Search: searches songs
- YT Music Search → FastAPI Server: returns results
- FastAPI Server → Search Client: returns results
- Search Client → App Orchestrator: returns songs
- App Orchestrator → Favorites and Recents: reads/writes tracks
- Favorites and Recents → Browser Local Storage: reads/writes
- App Orchestrator → YouTube Player Adapter: loads and controls
- YouTube Player Adapter → YouTube IFrame API: controls playback
- YouTube IFrame API → YouTube Player Adapter: playback events
- YouTube Player Adapter → App Orchestrator: reports state
- App Orchestrator → Views and Controls: renders playback
- Listener → Netlify Search Function: optional search request
- Netlify Search Function → YT Music API: searches songs