Archived Web development reference. This page describes the Vue web player, not the native WinUI interface. For Windows internals, see Native architecture. Check the current source before relying on an older example.
Layers
| Layer | Main location | Responsibility |
|---|---|---|
| View | src/components/, src/pages/, src/router/ |
Render pages, collect interaction, and present state |
| App orchestration | src/app/ofplayerApp.js |
Connect stores and services, expose application actions, coordinate hydration |
| State | src/stores/ |
Hold reactive library, playback, session, preference, entitlement, and UI state |
| Services | src/services/ |
Implement domain behavior and persistence operations |
| Models | src/models/ |
Define library, playlist, track, and collection shapes |
| Data | IndexedDB and local storage | Persist browser-local data and preferences |
The view should call application actions rather than writing persistence directly. useOFPlayerApp() gives components the shared app instance. The app is created before mount and hydrated afterward, so views must handle the initial loading state.
Typical playback flow
- A view asks the app to select or play a track.
- The app coordinates the library and player stores with the relevant service.
- The player store updates reactive playback state and the underlying media element.
- Components rerender from that state. History or preferences are persisted as needed.
Keep the queue’s source and track IDs stable across view changes. Browsing a playlist is not itself a request to replace the current queue.
Dependencies and extension points
Views depend on app-facing actions and reactive state. Stores use services; services use models and data access. Avoid importing a page into a service or duplicating state across components. Service factories and app composition make behavior testable without mounting the full UI.
For large libraries, the web player uses lookup maps and virtualized lists where appropriate. Route components load lazily. Storage schemas are versioned because browser databases may survive multiple releases; migrations must preserve existing collections. For specific component responsibilities, see Web components.