Frontend

Overview

The frontend is a vanilla JavaScript single-page-style app served by Flask from templates/index.html. It uses no frontend framework. The UI has a dark theme with Spotify green (#1db954) accents and is fully responsive.

Pages / Tabs

Unified Download (default)

Textarea for one or more Spotify URLs.
Single submit button that calls POST /api/unified/download.
Buttons to switch to the Votify or Monochrome-specific tabs.

Votify Download

Multi-URL textarea.
Audio quality selector (AAC / Vorbis options).
Collapsible "Advanced" section with format, cover size, video, and other toggles.
Calls POST /api/download.

Monochrome Download

Single URL input (track, album, or playlist).
Quality selector (Tidal quality levels).
Calls POST /api/monochrome/download.

Jobs

Lists all jobs for the current user (live + historical).
Status badges: queued, running, completed, failed, cancelled.
Collapsible output log per job.
Cancel button (running jobs), delete button (terminal jobs).
Auto-refreshes every 3 seconds while any job is running.

Files

Browser-style file tree rooted at the user's download directory.
Breadcrumb navigation.
Download individual files or entire folders (as ZIP).
Delete files or folders with confirmation.

Settings

All users: Change own account password.
Admins only:
- Upload cookies.txt (Spotify authentication).
- Upload device.wvd (Widevine certificate).
- Set fallback quality (used by Unified system).
- Set job expiry (days before old jobs are auto-deleted).

Admin: Users (admin only)

List all users with creation date and last login.
Create new users (username, password, role).
View any user's jobs or files.
Delete users (with confirmation prompt).
Reset any user's password.

Responsive Design

Desktop: Horizontal tab bar at the top.
Mobile: Bottom navigation bar.
Minimum tap target size: 36×36px.
Font sizes scale down on smaller screens.

Progressive Web App (PWA)

The app can be installed as a standalone PWA.

Manifest

/static/manifest.json defines the app name, theme color, icons (192×192 and 512×512), and standalone display mode.

Service Worker

/static/sw.js provides:

Resource type	Strategy
API calls (`/api/*`)	Network only (no caching)
Page navigation	Network first, fallback to offline page
Static assets	Cache first, network fallback

The service worker caches the app shell (HTML, CSS, JS, icons) on install and clears old caches on activation. If the network is unavailable during navigation, /static/offline.html is served.

Templates

File	Purpose
templates/index.html	Main app (all tabs, JS logic, CSS)
templates/login.html	Login form

Key Files

File	Relevance
templates/index.html	Entire UI: HTML, CSS, JavaScript
templates/login.html	Login page
static/manifest.json	PWA manifest
static/sw.js	Service worker
static/icons/	App icons for PWA

3.3 KiB Raw Blame History Unescape Escape