vndangkhoa/kv-music
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'main' into main

Browse source
This commit is contained in:
raeji 2026-01-11 13:48:10 +09:00 committed by GitHub
commit d907178f7a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
43 changed files with 8245 additions and 4259 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
.github/workflows/lint.yml vendored Normal file
View file

@ -0,0 +1,53 @@
name: Lint Codebase
on:
push:
branches: [main]
pull_request:
branches: [main]
permissions:
contents: write
jobs:
lint:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
if: github.event_name == 'pull_request'
with:
ref: ${{ github.head_ref }}
repository: ${{ github.event.pull_request.head.repo.full_name }}
- uses: actions/checkout@v4
if: github.event_name != 'pull_request'
- name: Use Node.js
uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: Fix JS Lint
run: npm run lint:js -- --fix
continue-on-error: true
- name: Fix CSS Lint
run: npm run lint:css -- --fix
continue-on-error: true
- name: Format with Prettier
run: npm run format
continue-on-error: true
- name: Commit and Push changes
uses: stefanzweifel/git-auto-commit-action@v5
with:
commit_message: 'style: auto-fix linting issues'
- name: Run HTML Lint
run: npm run lint:html

3
.htmlhintignore Normal file
View file

@ -0,0 +1,3 @@
dist/
node_modules/
legacy/

12
.htmlhintrc Normal file
View file

@ -0,0 +1,12 @@
{
"tag-pair": true,
"tagname-lowercase": true,
"attr-lowercase": true,
"attr-value-double-quotes": true,
"doctype-first": true,
"id-unique": true,
"src-not-empty": true,
"alt-require": true,
"head-script-disabled": false,
"spec-char-escape": true
}

6
.prettierignore Normal file
View file

@ -0,0 +1,6 @@
dist/
node_modules/
legacy/
package-lock.json
*.min.js
.github/

8
.prettierrc Normal file
View file

@ -0,0 +1,8 @@
{
"semi": true,
"singleQuote": true,
"tabWidth": 4,
"trailingComma": "es5",
"printWidth": 120,
"endOfLine": "auto"
}

12
.stylelintrc.json Normal file
View file

@ -0,0 +1,12 @@
{
"extends": "stylelint-config-standard",
"rules": {
"no-empty-source": null,
"selector-class-pattern": null,
"media-feature-range-notation": null,
"declaration-block-no-redundant-longhand-properties": null,
"color-function-notation": null,
"alpha-value-notation": null
},
"ignoreFiles": ["dist/**/*.css", "node_modules/**/*.css", "legacy/**/*.css"]
}

26
CONTRIBUTE.md
View file

@ -1,11 +1,13 @@
# Development
This project uses [Vite](https://vitejs.dev/) for local development and optimized builds.
### Prerequisites
- [Node.js](https://nodejs.org/) (Version 20+ or 22+ recommended)
### Getting Started
1. Install dependencies:
```bash
npm install
@ -17,17 +19,39 @@ This project uses [Vite](https://vitejs.dev/) for local development and optimize
The app will be available at `http://localhost:5173/`.
### Why Vite?
- **Instant Updates**: Support for Hot Module Replacement (HMR) means changes to JS/CSS are reflected instantly in the browser.
- **Dependency Management**: No more manual path tracking or broken internal imports.
- **Automated PWA**: Service Worker generation and asset hashing are handled automatically.
## Code Quality & Linting
We use a standard stack to ensure code quality and consistency:
- **JS**: [ESLint](https://eslint.org/)
- **CSS**: [Stylelint](https://stylelint.io/)
- **HTML**: [HTMLHint](https://htmlhint.com/)
- **Formatting**: [Prettier](https://prettier.io/)
### Commands
- **Check everything:** `npm run lint`
- **Auto-format code:** `npm run format` (Runs Prettier)
- **Fix JS issues:** `npm run lint:js -- --fix`
- **Fix CSS issues:** `npm run lint:css -- --fix`
> [!IMPORTANT]
> A GitHub Action automatically runs these checks on every push and pull request. Please ensure `npm run lint` passes before committing.
## Project Structure
- `/js`: Application source code.
- `/public`: Static assets (images, manifest, instances.json) that are copied directly to the build folder.
- `index.html`: The entry point of the application.
- `vite.config.js`: Build and PWA configuration.
## Deployment
Deployment is automated via **GitHub Actions**.
> [!NOTE]

2
INSTANCES.md
View file

@ -20,5 +20,3 @@ UI:
| QQDL | https://tidal.qqdl.site/ |
| Arjix | https://music.arjix.dev/ |
| Spofree | https://spo.free.nf |

28
README.md
View file

@ -1,18 +1,38 @@
<p align="center">
<a href="https://monochrome.samidy.com">
<img src="https://github.com/SamidyFR/monochrome/blob/main/public/assets/512.png?raw=true" alt="Monochrome Logo">
<img src="https://github.com/SamidyFR/monochrome/blob/main/public/assets/512.png?raw=true" alt="Monochrome Logo" width="150px">
</a>
</p>
<h1 align="center">Monochrome</h1>
**Monochrome** is an open-source, privacy-respecting, ad-free [TIDAL](https://tidal.com) web UI, built on top of [Hi-Fi](https://github.com/sachinsenal0x64/hifi).
### **Monochrome** is an open-source, privacy-respecting, ad-free [TIDAL](https://tidal.com) web UI, built on top of [Hi-Fi](https://github.com/sachinsenal0x64/hifi).
<br>
[<img src="https://files.catbox.moe/94f3pq.png" alt="Monochrome UI" width="800">](https://monochrome.samidy.com/#album/378149557)
Check it out live at: [**monochrome.samidy.com**](https://monochrome.samidy.com)
### Features
<ul>
<li>High-quality lossless audio streaming</li>
<li>Lyrics support with karaoke mode</li>
<li>Recently Played tracking for easy history access</li>
<li>Comprehensive Personal Library for favorites</li>
<li>Intelligent API caching for improved performance</li>
<li>Offline-capable Progressive Web App (PWA)</li>
<li>Media Session API integration for system controls</li>
<li>Queue management with shuffle and repeat modes</li>
<li>Track downloads with automatic metadata embedding</li>
<li>Multiple API instance support with failover</li>
<li>Dark, minimalist interface optimized for focus</li>
<li>Customizable themes</li>
<li>Keyboard shortcuts for power users</li>
</ul>
### Check it out live at: [**monochrome.samidy.com**](https://monochrome.samidy.com)
<br>
[![GitHub stars](https://img.shields.io/github/stars/SamidyFR/monochrome?style=for-the-badge&color=ffffff&labelColor=000000)](https://github.com/SamidyFR/monochrome/stargazers)
[![GitHub forks](https://img.shields.io/github/forks/SamidyFR/monochrome?style=for-the-badge&color=ffffff&labelColor=000000)](https://github.com/SamidyFR/monochrome/forks)

25
eslint.config.js Normal file
View file

@ -0,0 +1,25 @@
import js from '@eslint/js';
import globals from 'globals';
import prettierConfig from 'eslint-config-prettier';
export default [
{
ignores: ['dist/', 'node_modules/', 'legacy/', 'sw.js'],
},
js.configs.recommended,
prettierConfig,
{
languageOptions: {
ecmaVersion: 2022,
sourceType: 'module',
globals: {
...globals.browser,
...globals.node,
},
},
rules: {
'no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
'no-console': ['warn', { allow: ['warn', 'error'] }],
},
},
];

28
firebase-setup.md
View file

@ -3,12 +3,14 @@
Follow these steps to enable cross-device synchronization for your library, history, and settings using your own Firebase project.
## 1. Create a Firebase Project
1. Go to the [Firebase Console](https://console.firebase.google.com/).
2. Click **Add project** and give it a name (e.g., "Monochrome Sync").
3. (Optional) Disable Gemini and Google Analytics if you want to keep it simple.
4. Click **Create project**.
## 2. Enable Authentication
1. In the left sidebar, click **Build** > **Authentication**.
2. Click **Get Started**.
3. Go to the **Sign-in method** tab.
@ -16,22 +18,27 @@ Follow these steps to enable cross-device synchronization for your library, hist
5. Set your project support email and click **Save**.
### 2.1 Authorized Domains (CRITICAL)
Firebase will block login attempts from unknown domains.
1. In the **Authentication** section, go to the **Settings** tab.
2. Click **Authorized domains** in the left sub-menu.
3. Click **Add domain**.
4. Add your hosting domain (e.g., `julienmaille.github.io`).
* *Note: `localhost` and `127.0.0.1` are usually added by default for local testing.*
- _Note: `localhost` and `127.0.0.1` are usually added by default for local testing._
## 3. Enable Realtime Database
1. In the left sidebar, click **Build** > **Realtime Database**.
2. Click **Create Database**.
3. Choose a location near you and click **Next**.
4. Select **Start in test mode** (we will change the rules in the next step) and click **Enable**.
## 4. Set Security Rules
1. In the Realtime Database section, go to the **Rules** tab.
2. Replace the existing rules with the following to ensure users can only see their own data:
```json
{
"rules": {
@ -50,29 +57,32 @@ Firebase will block login attempts from unknown domains.
}
}
```
* **Note:** The `public_playlists` rule allows anyone to read the playlists. The write rule ensures that only authenticated users can publish, and only the owner (creator) of a playlist can modify or delete it.
- **Note:** The `public_playlists` rule allows anyone to read the playlists. The write rule ensures that only authenticated users can publish, and only the owner (creator) of a playlist can modify or delete it.
3. Click **Publish**.
## 5. Get Your Configuration
1. Click the gear icon (⚙️) next to "Project Overview" and select **Project settings**.
2. In the **General** tab, scroll down to "Your apps" and click the **Web icon (`</>`)**.
3. Register the app (e.g., "Monochrome App").
4. You will see a `firebaseConfig` object. It looks like this:
```javascript
const firebaseConfig = {
apiKey: "AIzaSy...",
authDomain: "your-project.firebaseapp.com",
databaseURL: "https://your-project.firebaseio.com",
projectId: "your-project",
storageBucket: "your-project.appspot.com",
messagingSenderId: "...",
appId: "..."
apiKey: 'AIzaSy...',
authDomain: 'your-project.firebaseapp.com',
databaseURL: 'https://your-project.firebaseio.com',
projectId: 'your-project',
storageBucket: 'your-project.appspot.com',
messagingSenderId: '...',
appId: '...',
};
```
5. **Copy only the part with the curly braces `{ ... }`**.
## 6. Configure Monochrome
1. Open the Monochrome app and go to **Settings**.
2. Find the **Firebase Configuration** section.
3. Paste the JSON object you copied into the textarea.

1183
index.html
View file

File diff suppressed because it is too large Load diff

97
js/api.js
View file

@ -10,14 +10,17 @@ export class LosslessAPI {
this.settings = settings;
this.cache = new APICache({
maxSize: 200,
ttl: 1000 * 60 * 30
ttl: 1000 * 60 * 30,
});
this.streamCache = new Map();
setInterval(() => {
setInterval(
() => {
this.cache.clearExpired();
this.pruneStreamCache();
}, 1000 * 60 * 5);
},
1000 * 60 * 5
);
}
pruneStreamCache() {
@ -39,9 +42,7 @@ export class LosslessAPI {
let lastError = null;
for (const baseUrl of instances) {
const url = baseUrl.endsWith('/')
? `${baseUrl}${relativePath.substring(1)}`
: `${baseUrl}${relativePath}`;
const url = baseUrl.endsWith('/') ? `${baseUrl}${relativePath.substring(1)}` : `${baseUrl}${relativePath}`;
for (let attempt = 1; attempt <= maxRetries; attempt++) {
try {
@ -68,10 +69,7 @@ export class LosslessAPI {
}
if (response.status === 401) {
let errorData;
try {
errorData = await response.clone().json();
} catch {}
let errorData = await response.clone().json();
if (errorData?.subStatus === 11002) {
lastError = new Error(errorData?.userMessage || 'Authentication failed');
@ -89,7 +87,6 @@ export class LosslessAPI {
lastError = new Error(`Request failed with status ${response.status}`);
break;
} catch (error) {
if (error.name === 'AbortError') {
throw error;
@ -140,7 +137,7 @@ export class LosslessAPI {
items,
limit: section?.limit ?? items.length,
offset: section?.offset ?? 0,
totalNumberOfItems: section?.totalNumberOfItems ?? items.length
totalNumberOfItems: section?.totalNumberOfItems ?? items.length,
};
}
@ -277,7 +274,7 @@ export class LosslessAPI {
const normalized = this.normalizeSearchResponse(data, 'tracks');
const result = {
...normalized,
items: normalized.items.map(t => this.prepareTrack(t))
items: normalized.items.map((t) => this.prepareTrack(t)),
};
await this.cache.set('search_tracks', query, result);
@ -299,7 +296,7 @@ export class LosslessAPI {
const normalized = this.normalizeSearchResponse(data, 'artists');
const result = {
...normalized,
items: normalized.items.map(a => this.prepareArtist(a))
items: normalized.items.map((a) => this.prepareArtist(a)),
};
await this.cache.set('search_artists', query, result);
@ -319,10 +316,10 @@ export class LosslessAPI {
const response = await this.fetchWithRetry(`/search/?al=${encodeURIComponent(query)}`, options);
const data = await response.json();
const normalized = this.normalizeSearchResponse(data, 'albums');
const preparedItems = normalized.items.map(a => this.prepareAlbum(a));
const preparedItems = normalized.items.map((a) => this.prepareAlbum(a));
const result = {
...normalized,
items: this.deduplicateAlbums(preparedItems)
items: this.deduplicateAlbums(preparedItems),
};
await this.cache.set('search_albums', query, result);
@ -344,7 +341,7 @@ export class LosslessAPI {
const normalized = this.normalizeSearchResponse(data, 'playlists');
const result = {
...normalized,
items: normalized.items.map(p => this.preparePlaylist(p))
items: normalized.items.map((p) => this.preparePlaylist(p)),
};
await this.cache.set('search_playlists', query, result);
@ -416,7 +413,7 @@ export class LosslessAPI {
}
}
const tracks = (tracksSection?.items || []).map(i => this.prepareTrack(i.item || i));
const tracks = (tracksSection?.items || []).map((i) => this.prepareTrack(i.item || i));
const result = { album, tracks };
await this.cache.set('album', id, result);
@ -452,7 +449,10 @@ export class LosslessAPI {
for (const entry of entries) {
if (!entry || typeof entry !== 'object') continue;
if (!playlist && ('uuid' in entry || 'numberOfTracks' in entry || ('title' in entry && 'id' in entry))) {
if (
!playlist &&
('uuid' in entry || 'numberOfTracks' in entry || ('title' in entry && 'id' in entry))
) {
playlist = entry;
}
@ -474,7 +474,7 @@ export class LosslessAPI {
if (!playlist) throw new Error('Playlist not found');
let tracks = (tracksSection?.items || []).map(i => this.prepareTrack(i.item || i));
let tracks = (tracksSection?.items || []).map((i) => this.prepareTrack(i.item || i));
// Handle pagination if there are more tracks
if (playlist.numberOfTracks > tracks.length) {
@ -502,7 +502,7 @@ export class LosslessAPI {
if (!nextItems || nextItems.length === 0) break;
const preparedItems = nextItems.map(i => this.prepareTrack(i.item || i));
const preparedItems = nextItems.map((i) => this.prepareTrack(i.item || i));
if (preparedItems.length === 0) break;
// Safeguard: If API ignores offset, it returns the first page again.
@ -513,7 +513,6 @@ export class LosslessAPI {
tracks = tracks.concat(preparedItems);
offset += preparedItems.length;
} catch (error) {
console.error(`Error fetching playlist tracks at offset ${offset}:`, error);
break;
@ -541,7 +540,7 @@ export class LosslessAPI {
throw new Error('Mix metadata not found');
}
const tracks = items.map(i => this.prepareTrack(i.item || i));
const tracks = items.map((i) => this.prepareTrack(i.item || i));
const mix = {
id: mixData.id,
@ -549,7 +548,7 @@ export class LosslessAPI {
subTitle: mixData.subTitle,
description: mixData.description,
mixType: mixData.mixType,
cover: mixData.images?.LARGE?.url || mixData.images?.MEDIUM?.url || mixData.images?.SMALL?.url || null
cover: mixData.images?.LARGE?.url || mixData.images?.MEDIUM?.url || mixData.images?.SMALL?.url || null,
};
const result = { mix, tracks };
@ -563,7 +562,7 @@ export class LosslessAPI {
const [primaryResponse, contentResponse] = await Promise.all([
this.fetchWithRetry(`/artist/?id=${artistId}`),
this.fetchWithRetry(`/artist/?f=${artistId}&skip_tracks=true`)
this.fetchWithRetry(`/artist/?f=${artistId}&skip_tracks=true`),
]);
const primaryJsonData = await primaryResponse.json();
@ -577,7 +576,7 @@ export class LosslessAPI {
const artist = {
...this.prepareArtist(rawArtist),
picture: rawArtist.picture || primaryData.cover || null,
name: rawArtist.name || 'Unknown Artist'
name: rawArtist.name || 'Unknown Artist',
};
const contentJsonData = await contentResponse.json();
@ -588,15 +587,15 @@ export class LosslessAPI {
const albumMap = new Map();
const trackMap = new Map();
const isTrack = v => v?.id && v.duration && v.album;
const isAlbum = v => v?.id && 'numberOfTracks' in v;
const isTrack = (v) => v?.id && v.duration && v.album;
const isAlbum = (v) => v?.id && 'numberOfTracks' in v;
const scan = (value, visited = new Set()) => {
if (!value || typeof value !== 'object' || visited.has(value)) return;
visited.add(value);
if (Array.isArray(value)) {
value.forEach(item => scan(item, visited));
value.forEach((item) => scan(item, visited));
return;
}
@ -604,10 +603,10 @@ export class LosslessAPI {
if (isAlbum(item)) albumMap.set(item.id, this.prepareAlbum(item));
if (isTrack(item)) trackMap.set(item.id, this.prepareTrack(item));
Object.values(value).forEach(nested => scan(nested, visited));
Object.values(value).forEach((nested) => scan(nested, visited));
};
entries.forEach(entry => scan(entry));
entries.forEach((entry) => scan(entry));
// Attempt to find more albums/EPs via search since the direct feed might be limited
try {
@ -617,8 +616,9 @@ export class LosslessAPI {
for (const item of searchResults.items) {
const itemArtistId = item.artist?.id;
const matchesArtist = itemArtistId === numericArtistId ||
(Array.isArray(item.artists) && item.artists.some(a => a.id === numericArtistId));
const matchesArtist =
itemArtistId === numericArtistId ||
(Array.isArray(item.artists) && item.artists.some((a) => a.id === numericArtistId));
if (matchesArtist && !albumMap.has(item.id)) {
albumMap.set(item.id, item);
@ -630,15 +630,12 @@ export class LosslessAPI {
}
const rawReleases = Array.from(albumMap.values());
const allReleases = this.deduplicateAlbums(rawReleases).sort((a, b) =>
new Date(b.releaseDate || 0) - new Date(a.releaseDate || 0)
const allReleases = this.deduplicateAlbums(rawReleases).sort(
(a, b) => new Date(b.releaseDate || 0) - new Date(a.releaseDate || 0)
);
const eps = allReleases.filter(a =>
a.type === 'EP' ||
a.type === 'SINGLE'
);
const albums = allReleases.filter(a => !eps.includes(a));
const eps = allReleases.filter((a) => a.type === 'EP' || a.type === 'SINGLE');
const albums = allReleases.filter((a) => !eps.includes(a));
const tracks = Array.from(trackMap.values())
.sort((a, b) => (b.popularity || 0) - (a.popularity || 0))
@ -650,8 +647,6 @@ export class LosslessAPI {
return result;
}
async getSimilarArtists(artistId) {
const cached = await this.cache.get('similar_artists', artistId);
if (cached) return cached;
@ -663,7 +658,7 @@ export class LosslessAPI {
// Handle various response structures
const items = data.artists || data.items || data.data || (Array.isArray(data) ? data : []);
const result = items.map(artist => this.prepareArtist(artist));
const result = items.map((artist) => this.prepareArtist(artist));
await this.cache.set('similar_artists', artistId, result);
return result;
@ -683,7 +678,7 @@ export class LosslessAPI {
const items = data.items || data.albums || data.data || (Array.isArray(data) ? data : []);
const result = items.map(album => this.prepareAlbum(album));
const result = items.map((album) => this.prepareAlbum(album));
await this.cache.set('similar_albums', albumId, result);
return result;
@ -704,7 +699,7 @@ export class LosslessAPI {
// fabricate the track object expected by parseTrackLookup
const trackStub = {
duration: raw.duration ?? 0,
id: raw.trackId ?? null
id: raw.trackId ?? null,
};
// return exactly what parseTrackLookup expects
@ -765,7 +760,7 @@ export class LosslessAPI {
const response = await fetch(streamUrl, {
cache: 'no-store',
signal: options.signal
signal: options.signal,
});
if (!response.ok) {
@ -793,7 +788,7 @@ export class LosslessAPI {
onProgress({
stage: 'downloading',
receivedBytes,
totalBytes: totalBytes || undefined
totalBytes: totalBytes || undefined,
});
}
}
@ -805,7 +800,7 @@ export class LosslessAPI {
onProgress({
stage: 'downloading',
receivedBytes: blob.size,
totalBytes: blob.size
totalBytes: blob.size,
});
}
}
@ -815,7 +810,7 @@ export class LosslessAPI {
if (onProgress) {
onProgress({
stage: 'processing',
message: 'Adding metadata...'
message: 'Adding metadata...',
});
}
blob = await addMetadataToAudio(blob, track, this, quality);
@ -826,7 +821,7 @@ export class LosslessAPI {
if (error.name === 'AbortError') {
throw error;
}
console.error("Download failed:", error);
console.error('Download failed:', error);
if (error.message === RATE_LIMIT_ERROR_MESSAGE) {
throw error;
}
@ -871,7 +866,7 @@ export class LosslessAPI {
getCacheStats() {
return {
...this.cache.getCacheStats(),
streamUrls: this.streamCache.size
streamUrls: this.streamCache.size,
};
}
}

219
js/app.js
View file

@ -1,10 +1,22 @@
//js/app.js
import { LosslessAPI } from './api.js';
import { apiSettings, themeManager, nowPlayingSettings, trackListSettings } from './storage.js';
import {
apiSettings,
themeManager,
nowPlayingSettings,
trackListSettings,
downloadQualitySettings,
} from './storage.js';
import { UIRenderer } from './ui.js';
import { Player } from './player.js';
import { LastFMScrobbler } from './lastfm.js';
import { LyricsManager, openLyricsPanel, clearLyricsPanelSync, renderLyricsInFullscreen, clearFullscreenLyricsSync } from './lyrics.js';
import {
LyricsManager,
openLyricsPanel,
clearLyricsPanelSync,
renderLyricsInFullscreen,
clearFullscreenLyricsSync,
} from './lyrics.js';
import { createRouter, updateTabTitle } from './router.js';
import { initializeSettings } from './settings.js';
import { initializePlayerEvents, initializeTrackInteractions, handleTrackAction } from './events.js';
@ -17,17 +29,18 @@ import { syncManager } from './firebase/sync.js';
import { registerSW } from 'virtual:pwa-register';
import './smooth-scrolling.js';
function initializeCasting(audioPlayer, castBtn) {
if (!castBtn) return;
if ('remote' in audioPlayer) {
audioPlayer.remote.watchAvailability((available) => {
audioPlayer.remote
.watchAvailability((available) => {
if (available) {
castBtn.style.display = 'flex';
castBtn.classList.add('available');
}
}).catch(err => {
})
.catch((err) => {
console.log('Remote playback not available:', err);
if (window.innerWidth > 768) {
castBtn.style.display = 'flex';
@ -39,7 +52,7 @@ function initializeCasting(audioPlayer, castBtn) {
alert('Please play a track first to enable casting.');
return;
}
audioPlayer.remote.prompt().catch(err => {
audioPlayer.remote.prompt().catch((err) => {
if (err.name === 'NotAllowedError') return;
if (err.name === 'NotFoundError') {
alert('No remote playback devices (Chromecast/AirPlay) were found on your network.');
@ -60,8 +73,7 @@ function initializeCasting(audioPlayer, castBtn) {
castBtn.classList.remove('connected');
}
});
}
else if (audioPlayer.webkitShowPlaybackTargetPicker) {
} else if (audioPlayer.webkitShowPlaybackTargetPicker) {
castBtn.style.display = 'flex';
castBtn.classList.add('available');
@ -82,8 +94,7 @@ function initializeCasting(audioPlayer, castBtn) {
castBtn.classList.remove('connected');
}
});
}
else if (window.innerWidth > 768) {
} else if (window.innerWidth > 768) {
castBtn.style.display = 'flex';
castBtn.addEventListener('click', () => {
alert('Casting is not supported in this browser. Try Chrome for Chromecast or Safari for AirPlay.');
@ -91,7 +102,6 @@ function initializeCasting(audioPlayer, castBtn) {
}
}
function initializeKeyboardShortcuts(player, audioPlayer) {
document.addEventListener('keydown', (e) => {
if (e.target.matches('input, textarea')) return;
@ -105,10 +115,7 @@ function initializeKeyboardShortcuts(player, audioPlayer) {
if (e.shiftKey) {
player.playNext();
} else {
audioPlayer.currentTime = Math.min(
audioPlayer.duration,
audioPlayer.currentTime + 10
);
audioPlayer.currentTime = Math.min(audioPlayer.duration, audioPlayer.currentTime + 10);
}
break;
case 'arrowleft':
@ -193,7 +200,7 @@ document.addEventListener('DOMContentLoaded', async () => {
const lyricsManager = new LyricsManager(api);
// Pre-load Kuroshiro for romaji conversion in background (always load so it's ready instantly)
lyricsManager.loadKuroshiro().catch(err => {
lyricsManager.loadKuroshiro().catch((err) => {
console.warn('Failed to pre-load Kuroshiro:', err);
});
@ -203,15 +210,21 @@ document.addEventListener('DOMContentLoaded', async () => {
initializeSettings(scrobbler, player, api, ui);
initializePlayerEvents(player, audioPlayer, scrobbler, ui);
initializeTrackInteractions(player, api, document.querySelector('.main-content'), document.getElementById('context-menu'), lyricsManager, ui, scrobbler);
initializeTrackInteractions(
player,
api,
document.querySelector('.main-content'),
document.getElementById('context-menu'),
lyricsManager,
ui,
scrobbler
);
initializeUIInteractions(player, api);
initializeKeyboardShortcuts(player, audioPlayer);
const castBtn = document.getElementById('cast-btn');
initializeCasting(audioPlayer, castBtn);
// Restore UI state for the current track (like button, theme)
if (player.currentTrack) {
ui.setCurrentTrack(player.currentTrack);
@ -234,7 +247,6 @@ document.addEventListener('DOMContentLoaded', async () => {
} else {
openLyricsPanel(player.currentTrack, audioPlayer, lyricsManager);
}
} else if (mode === 'cover') {
const overlay = document.getElementById('fullscreen-cover-overlay');
if (overlay && overlay.style.display === 'flex') {
@ -351,11 +363,12 @@ document.addEventListener('DOMContentLoaded', async () => {
btn.disabled = true;
const originalHTML = btn.innerHTML;
btn.innerHTML = '<svg class="animate-spin" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle></svg><span>Downloading...</span>';
btn.innerHTML =
'<svg class="animate-spin" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle></svg><span>Downloading...</span>';
try {
const { mix, tracks } = await api.getMix(mixId);
await downloadPlaylistAsZip(mix, tracks, api, player.quality, lyricsManager);
await downloadPlaylistAsZip(mix, tracks, api, downloadQualitySettings.getQuality(), lyricsManager);
} catch (error) {
console.error('Mix download failed:', error);
alert('Failed to download mix: ' + error.message);
@ -374,7 +387,8 @@ document.addEventListener('DOMContentLoaded', async () => {
btn.disabled = true;
const originalHTML = btn.innerHTML;
btn.innerHTML = '<svg class="animate-spin" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle></svg><span>Downloading...</span>';
btn.innerHTML =
'<svg class="animate-spin" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle></svg><span>Downloading...</span>';
try {
let playlist, tracks;
@ -397,7 +411,7 @@ document.addEventListener('DOMContentLoaded', async () => {
tracks = data.tracks;
}
await downloadPlaylistAsZip(playlist, tracks, api, player.quality, lyricsManager);
await downloadPlaylistAsZip(playlist, tracks, api, downloadQualitySettings.getQuality(), lyricsManager);
} catch (error) {
console.error('Playlist download failed:', error);
alert('Failed to download playlist: ' + error.message);
@ -411,6 +425,7 @@ document.addEventListener('DOMContentLoaded', async () => {
const modal = document.getElementById('playlist-modal');
document.getElementById('playlist-modal-title').textContent = 'Create Playlist';
document.getElementById('playlist-name-input').value = '';
document.getElementById('playlist-cover-input').value = '';
modal.dataset.editingId = '';
document.getElementById('csv-import-section').style.display = 'block';
document.getElementById('csv-file-input').value = '';
@ -454,9 +469,11 @@ document.addEventListener('DOMContentLoaded', async () => {
if (editingId) {
// Edit
const cover = document.getElementById('playlist-cover-input').value.trim();
db.getPlaylist(editingId).then(async (playlist) => {
if (playlist) {
playlist.name = name;
playlist.cover = cover;
await handlePublicStatus(playlist);
await db.performTransaction('user_playlists', 'readwrite', (store) => store.put(playlist));
syncManager.syncUserPlaylist(playlist, 'update');
@ -502,7 +519,8 @@ document.addEventListener('DOMContentLoaded', async () => {
progressFill.style.width = `${Math.min(percentage, 100)}%`;
progressCurrent.textContent = progress.current.toString();
currentTrackElement.textContent = progress.currentTrack;
if (currentArtistElement) currentArtistElement.textContent = progress.currentArtist || '';
if (currentArtistElement)
currentArtistElement.textContent = progress.currentArtist || '';
});
tracks = result.tracks;
@ -534,7 +552,8 @@ document.addEventListener('DOMContentLoaded', async () => {
}
}
db.createPlaylist(name, tracks, '').then(async playlist => {
const cover = document.getElementById('playlist-cover-input').value.trim();
db.createPlaylist(name, tracks, cover).then(async (playlist) => {
await handlePublicStatus(playlist);
// Update DB again with isPublic flag
await db.performTransaction('user_playlists', 'readwrite', (store) => store.put(playlist));
@ -553,11 +572,12 @@ document.addEventListener('DOMContentLoaded', async () => {
if (e.target.closest('.edit-playlist-btn')) {
const card = e.target.closest('.user-playlist');
const playlistId = card.dataset.userPlaylistId;
db.getPlaylist(playlistId).then(async playlist => {
db.getPlaylist(playlistId).then(async (playlist) => {
if (playlist) {
const modal = document.getElementById('playlist-modal');
document.getElementById('playlist-modal-title').textContent = 'Edit Playlist';
document.getElementById('playlist-name-input').value = playlist.name;
document.getElementById('playlist-cover-input').value = playlist.cover || '';
// Set Public Toggle
const publicToggle = document.getElementById('playlist-public-toggle');
@ -596,11 +616,12 @@ document.addEventListener('DOMContentLoaded', async () => {
if (e.target.closest('#edit-playlist-btn')) {
const playlistId = window.location.hash.split('/')[1];
db.getPlaylist(playlistId).then(playlist => {
db.getPlaylist(playlistId).then((playlist) => {
if (playlist) {
const modal = document.getElementById('playlist-modal');
document.getElementById('playlist-modal-title').textContent = 'Edit Playlist';
document.getElementById('playlist-name-input').value = playlist.name;
document.getElementById('playlist-cover-input').value = playlist.cover || '';
const publicToggle = document.getElementById('playlist-public-toggle');
const shareBtn = document.getElementById('playlist-share-btn');
@ -693,11 +714,12 @@ document.addEventListener('DOMContentLoaded', async () => {
btn.disabled = true;
const originalHTML = btn.innerHTML;
btn.innerHTML = '<svg class="animate-spin" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle></svg><span>Downloading...</span>';
btn.innerHTML =
'<svg class="animate-spin" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle></svg><span>Downloading...</span>';
try {
const { album, tracks } = await api.getAlbum(albumId);
await downloadAlbumAsZip(album, tracks, api, player.quality, lyricsManager);
await downloadAlbumAsZip(album, tracks, api, downloadQualitySettings.getQuality(), lyricsManager);
} catch (error) {
console.error('Album download failed:', error);
alert('Failed to download album: ' + error.message);
@ -716,14 +738,15 @@ document.addEventListener('DOMContentLoaded', async () => {
btn.disabled = true;
const originalHTML = btn.innerHTML;
btn.innerHTML = '<svg class="animate-spin" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle></svg><span>Loading...</span>';
btn.innerHTML =
'<svg class="animate-spin" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle></svg><span>Loading...</span>';
try {
const artist = await api.getArtist(artistId);
const allReleases = [...(artist.albums || []), ...(artist.eps || [])];
if (allReleases.length === 0) {
throw new Error("No albums or EPs found for this artist");
throw new Error('No albums or EPs found for this artist');
}
const trackSet = new Set();
@ -738,10 +761,11 @@ document.addEventListener('DOMContentLoaded', async () => {
}
for (const chunk of chunks) {
await Promise.all(chunk.map(async (album) => {
await Promise.all(
chunk.map(async (album) => {
try {
const { tracks } = await api.getAlbum(album.id);
tracks.forEach(track => {
tracks.forEach((track) => {
if (!trackSet.has(track.id)) {
trackSet.add(track.id);
allTracks.push(track);
@ -750,7 +774,8 @@ document.addEventListener('DOMContentLoaded', async () => {
} catch (err) {
console.warn(`Failed to fetch tracks for album ${album.title}:`, err);
}
}));
})
);
}
if (allTracks.length > 0) {
@ -762,9 +787,8 @@ document.addEventListener('DOMContentLoaded', async () => {
player.setQueue(allTracks, 0);
player.playTrackFromQueue();
} else {
throw new Error("No tracks found across all albums");
throw new Error('No tracks found across all albums');
}
} catch (error) {
console.error('Artist radio failed:', error);
alert('Failed to start artist radio: ' + error.message);
@ -783,19 +807,12 @@ document.addEventListener('DOMContentLoaded', async () => {
const artistId = window.location.hash.split('/')[1];
if (!artistId) return;
btn.disabled = true;
const originalHTML = btn.innerHTML;
btn.innerHTML = '<svg class="animate-spin" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle></svg><span>Downloading...</span>';
try {
const artist = await api.getArtist(artistId);
await downloadDiscography(artist, api, player.quality, lyricsManager);
showDiscographyDownloadModal(artist, api, downloadQualitySettings.getQuality(), lyricsManager, btn);
} catch (error) {
console.error('Discography download failed:', error);
alert('Failed to download discography: ' + error.message);
} finally {
btn.disabled = false;
btn.innerHTML = originalHTML;
console.error('Failed to load artist for discography download:', error);
alert('Failed to load artist: ' + error.message);
}
}
});
@ -816,7 +833,7 @@ document.addEventListener('DOMContentLoaded', async () => {
}
});
searchForm.addEventListener('submit', e => {
searchForm.addEventListener('submit', (e) => {
e.preventDefault();
const query = searchInput.value.trim();
if (query) {
@ -977,14 +994,19 @@ function showMissingTracksNotification(missingTracks) {
const modal = document.getElementById('missing-tracks-modal');
const listUl = document.getElementById('missing-tracks-list-ul');
listUl.innerHTML = missingTracks.map(track => `<li>${track}</li>`).join('');
listUl.innerHTML = missingTracks.map((track) => `<li>${track}</li>`).join('');
const closeModal = () => modal.classList.remove('active');
// Remove old listeners if any (though usually these functions are called once per instance,
// but since we reuse the same modal element we should be careful or use a one-time listener)
const handleClose = (e) => {
if (e.target === modal || e.target.closest('.close-missing-tracks') || e.target.id === 'close-missing-tracks-btn' || e.target.classList.contains('modal-overlay')) {
if (
e.target === modal ||
e.target.closest('.close-missing-tracks') ||
e.target.id === 'close-missing-tracks-btn' ||
e.target.classList.contains('modal-overlay')
) {
closeModal();
modal.removeEventListener('click', handleClose);
}
@ -1019,7 +1041,7 @@ async function parseCSV(csvText, api, onProgress) {
values.push(current);
// Clean up quotes: remove surrounding quotes and unescape double quotes if any
return values.map(v => v.trim().replace(/^"|"$/g, '').replace(/""/g, '"').trim());
return values.map((v) => v.trim().replace(/^"|"$/g, '').replace(/""/g, '"').trim());
};
const headers = parseLine(lines[0]);
@ -1068,14 +1090,14 @@ async function parseCSV(csvText, api, onProgress) {
current: i,
total: totalTracks,
currentTrack: trackTitle || 'Unknown track',
currentArtist: artistNames || ''
currentArtist: artistNames || '',
});
}
// Search for the track in hifi tidal api's catalog
if (trackTitle && artistNames) {
// Add a small delay to prevent rate limiting
await new Promise(resolve => setTimeout(resolve, 300));
await new Promise((resolve) => setTimeout(resolve, 300));
try {
let foundTrack = null;
@ -1222,7 +1244,9 @@ async function parseCSV(csvText, api, onProgress) {
}
} catch (error) {
console.error(`Error searching for track "${trackTitle}":`, error);
missingTracks.push(`${trackTitle} - ${artistNames}${albumName ? ' (album: ' + albumName + ')' : ''}`);
missingTracks.push(
`${trackTitle} - ${artistNames}${albumName ? ' (album: ' + albumName + ')' : ''}`
);
}
}
}
@ -1233,43 +1257,106 @@ async function parseCSV(csvText, api, onProgress) {
onProgress({
current: totalTracks,
total: totalTracks,
currentTrack: 'Import complete'
currentTrack: 'Import complete',
});
}
return { tracks, missingTracks };
}
function showKeyboardShortcuts() {
const modal = document.getElementById('shortcuts-modal');
function showDiscographyDownloadModal(artist, api, quality, lyricsManager, triggerBtn) {
const modal = document.getElementById('discography-download-modal');
document.getElementById('discography-artist-name').textContent = artist.name;
document.getElementById('albums-count').textContent = artist.albums?.length || 0;
document.getElementById('eps-count').textContent = (artist.eps || []).filter((a) => a.type === 'EP').length;
document.getElementById('singles-count').textContent = (artist.eps || []).filter((a) => a.type === 'SINGLE').length;
// Reset checkboxes
document.getElementById('download-albums').checked = true;
document.getElementById('download-eps').checked = true;
document.getElementById('download-singles').checked = true;
const closeModal = () => {
modal.classList.remove('active');
modal.removeEventListener('click', handleClose);
};
const handleClose = (e) => {
if (
e.target === modal ||
e.target.classList.contains('modal-overlay') ||
e.target.closest('.close-modal-btn') ||
e.target.id === 'cancel-discography-download'
) {
closeModal();
}
};
if (e.target === modal || e.target.classList.contains('close-shortcuts') || e.target.classList.contains('modal-overlay')) {
modal.addEventListener('click', handleClose);
document.getElementById('start-discography-download').onclick = async () => {
const includeAlbums = document.getElementById('download-albums').checked;
const includeEPs = document.getElementById('download-eps').checked;
const includeSingles = document.getElementById('download-singles').checked;
if (!includeAlbums && !includeEPs && !includeSingles) {
alert('Please select at least one type of release to download.');
return;
}
closeModal();
// Filter releases based on selection
let selectedReleases = [];
if (includeAlbums) {
selectedReleases = selectedReleases.concat(artist.albums || []);
}
if (includeEPs) {
selectedReleases = selectedReleases.concat((artist.eps || []).filter((a) => a.type === 'EP'));
}
if (includeSingles) {
selectedReleases = selectedReleases.concat((artist.eps || []).filter((a) => a.type === 'SINGLE'));
}
triggerBtn.disabled = true;
const originalHTML = triggerBtn.innerHTML;
triggerBtn.innerHTML =
'<svg class="animate-spin" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle></svg><span>Downloading...</span>';
try {
await downloadDiscography(artist, selectedReleases, api, quality, lyricsManager);
} catch (error) {
console.error('Discography download failed:', error);
alert('Failed to download discography: ' + error.message);
} finally {
triggerBtn.disabled = false;
triggerBtn.innerHTML = originalHTML;
}
};
modal.classList.add('active');
}
function showKeyboardShortcuts() {
const modal = document.getElementById('shortcuts-modal');
const closeModal = () => {
modal.classList.remove('active');
modal.removeEventListener('click', handleClose);
};
const handleClose = (e) => {
if (
e.target === modal ||
e.target.classList.contains('close-shortcuts') ||
e.target.classList.contains('modal-overlay')
) {
closeModal();
}
};
modal.addEventListener('click', handleClose);
modal.classList.add('active');
}

10
js/cache.js
View file

@ -34,9 +34,7 @@ export class APICache {
}
generateKey(type, params) {
const paramString = typeof params === 'object'
? JSON.stringify(params)
: String(params);
const paramString = typeof params === 'object' ? JSON.stringify(params) : String(params);
return `${type}:${paramString}`;
}
@ -71,7 +69,7 @@ export class APICache {
const entry = {
key,
data,
timestamp: Date.now()
timestamp: Date.now(),
};
this.memoryCache.set(key, entry);
@ -147,7 +145,7 @@ export class APICache {
}
}
expired.forEach(key => this.memoryCache.delete(key));
expired.forEach((key) => this.memoryCache.delete(key));
if (this.db) {
try {
@ -174,7 +172,7 @@ export class APICache {
return {
memoryEntries: this.memoryCache.size,
maxSize: this.maxSize,
ttl: this.ttl
ttl: this.ttl,
};
}
}

60
js/db.js
View file

@ -12,7 +12,7 @@ export class MusicDatabase {
const request = indexedDB.open(this.dbName, this.version);
request.onerror = (event) => {
console.error("Database error:", event.target.error);
console.error('Database error:', event.target.error);
reject(event.target.error);
};
@ -162,7 +162,7 @@ export class MusicDatabase {
// Base properties to keep
const base = {
id: item.id,
addedAt: item.addedAt || null
addedAt: item.addedAt || null,
};
if (type === 'track') {
@ -172,18 +172,20 @@ export class MusicDatabase {
duration: item.duration,
explicit: item.explicit,
// Keep minimal artist info
artists: item.artists?.map(a => ({ id: a.id, name: a.name })) || [],
artists: item.artists?.map((a) => ({ id: a.id, name: a.name })) || [],
// Keep minimal album info
album: item.album ? {
album: item.album
? {
id: item.album.id,
cover: item.album.cover,
releaseDate: item.album.releaseDate || null,
vibrantColor: item.album.vibrantColor || null
} : null,
vibrantColor: item.album.vibrantColor || null,
}
: null,
// Fallback date
streamStartDate: item.streamStartDate || null,
// Keep version if exists
version: item.version || null
version: item.version || null,
};
}
@ -195,10 +197,14 @@ export class MusicDatabase {
releaseDate: item.releaseDate || null,
explicit: item.explicit,
// UI uses singular 'artist'
artist: item.artist ? { name: item.artist.name, id: item.artist.id } : (item.artists?.[0] ? { name: item.artists[0].name, id: item.artists[0].id } : null),
artist: item.artist
? { name: item.artist.name, id: item.artist.id }
: item.artists?.[0]
? { name: item.artists[0].name, id: item.artists[0].id }
: null,
// Keep type and track count for UI labels
type: item.type || null,
numberOfTracks: item.numberOfTracks
numberOfTracks: item.numberOfTracks,
};
}
@ -206,7 +212,7 @@ export class MusicDatabase {
return {
...base,
name: item.name,
picture: item.picture || item.image || null // Handle both just in case
picture: item.picture || item.image || null, // Handle both just in case
};
}
@ -218,7 +224,7 @@ export class MusicDatabase {
// UI checks squareImage || image || uuid
image: item.image || item.squareImage || item.cover || null,
numberOfTracks: item.numberOfTracks || (item.tracks ? item.tracks.length : 0),
user: item.user ? { name: item.user.name } : null
user: item.user ? { name: item.user.name } : null,
};
}
@ -230,7 +236,7 @@ export class MusicDatabase {
subTitle: item.subTitle,
description: item.description,
mixType: item.mixType,
cover: item.cover
cover: item.cover,
};
}
@ -247,13 +253,13 @@ export class MusicDatabase {
const userPlaylists = await this.getPlaylists();
const data = {
favorites_tracks: tracks.map(t => this._minifyItem('track', t)),
favorites_albums: albums.map(a => this._minifyItem('album', a)),
favorites_artists: artists.map(a => this._minifyItem('artist', a)),
favorites_playlists: playlists.map(p => this._minifyItem('playlist', p)),
favorites_mixes: mixes.map(m => this._minifyItem('mix', m)),
history_tracks: history.map(t => this._minifyItem('track', t)),
user_playlists: userPlaylists
favorites_tracks: tracks.map((t) => this._minifyItem('track', t)),
favorites_albums: albums.map((a) => this._minifyItem('album', a)),
favorites_artists: artists.map((a) => this._minifyItem('artist', a)),
favorites_playlists: playlists.map((p) => this._minifyItem('playlist', p)),
favorites_mixes: mixes.map((m) => this._minifyItem('mix', m)),
history_tracks: history.map((t) => this._minifyItem('track', t)),
user_playlists: userPlaylists,
};
return data;
}
@ -267,14 +273,20 @@ export class MusicDatabase {
// This allows partial updates (e.g. library only)
if (items === undefined) return;
let itemsArray = Array.isArray(items) ? items : Object.values(items || {});
const transaction = db.transaction(storeName, 'readwrite');
const store = transaction.objectStore(storeName);
if (clear) {
store.clear();
}
for (const item of items) {
for (const item of itemsArray) {
try {
store.put(item);
} catch (error) {
console.warn(`Failed to import item in ${storeName}:`, item, error);
}
}
};
@ -295,9 +307,9 @@ export class MusicDatabase {
const playlist = {
id: id,
name: name,
tracks: tracks.map(t => this._minifyItem('track', t)),
tracks: tracks.map((t) => this._minifyItem('track', t)),
cover: cover,
createdAt: Date.now()
createdAt: Date.now(),
};
await this.performTransaction('user_playlists', 'readwrite', (store) => store.put(playlist));
return playlist;
@ -308,7 +320,7 @@ export class MusicDatabase {
if (!playlist) throw new Error('Playlist not found');
playlist.tracks = playlist.tracks || [];
const minifiedTrack = this._minifyItem('track', track);
if (playlist.tracks.some(t => t.id === track.id)) return;
if (playlist.tracks.some((t) => t.id === track.id)) return;
playlist.tracks.push(minifiedTrack);
await this.performTransaction('user_playlists', 'readwrite', (store) => store.put(playlist));
return playlist;
@ -318,7 +330,7 @@ export class MusicDatabase {
const playlist = await this.performTransaction('user_playlists', 'readonly', (store) => store.get(playlistId));
if (!playlist) throw new Error('Playlist not found');
playlist.tracks = playlist.tracks || [];
playlist.tracks = playlist.tracks.filter(t => t.id !== trackId);
playlist.tracks = playlist.tracks.filter((t) => t.id !== trackId);
await this.performTransaction('user_playlists', 'readwrite', (store) => store.put(playlist));
return playlist;
}

167
js/downloads.js
View file

@ -1,9 +1,19 @@
//js/downloads.js
import { buildTrackFilename, sanitizeForFilename, RATE_LIMIT_ERROR_MESSAGE, getTrackArtists, getTrackTitle, formatTemplate, SVG_CLOSE, getCoverBlob } from './utils.js';
import {
buildTrackFilename,
sanitizeForFilename,
RATE_LIMIT_ERROR_MESSAGE,
getTrackArtists,
getTrackTitle,
formatTemplate,
SVG_CLOSE,
getCoverBlob,
} from './utils.js';
import { lyricsSettings } from './storage.js';
import { addMetadataToAudio } from './metadata.js';
const downloadTasks = new Map();
const bulkDownloadTasks = new Map();
let downloadNotificationContainer = null;
/**
@ -57,20 +67,21 @@ export function showNotification(message) {
}, 1500);
}
export function addDownloadTask(trackId, track, filename, api) {
export function addDownloadTask(trackId, track, filename, api, abortController) {
const container = createDownloadNotification();
const taskEl = document.createElement('div');
taskEl.className = 'download-task';
taskEl.dataset.trackId = trackId;
const trackTitle = getTrackTitle(track);
const trackArtists = getTrackArtists(track);
taskEl.innerHTML = `
<div style="display: flex; align-items: start; gap: 0.75rem;">
<img src="${api.getCoverUrl(track.album?.cover)}"
style="width: 40px; height: 40px; border-radius: 4px; flex-shrink: 0;">
<div style="flex: 1; min-width: 0;">
<div style="font-weight: 500; font-size: 0.9rem; margin-bottom: 0.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">${trackTitle}</div>
<div style="font-size: 0.8rem; color: var(--muted-foreground); margin-bottom: 0.5rem;">${track.artist?.name || 'Unknown'}</div>
<div style="font-size: 0.8rem; color: var(--muted-foreground); margin-bottom: 0.5rem;">${trackArtists}</div>
<div class="download-progress-bar" style="height: 4px; background: var(--secondary); border-radius: 2px; overflow: hidden;">
<div class="download-progress-fill" style="width: 0%; height: 100%; background: var(--highlight); transition: width 0.2s;"></div>
</div>
@ -84,7 +95,6 @@ export function addDownloadTask(trackId, track, filename, api) {
container.appendChild(taskEl);
const abortController = new AbortController();
downloadTasks.set(trackId, { taskEl, abortController });
taskEl.querySelector('.download-cancel').addEventListener('click', () => {
@ -104,16 +114,12 @@ export function updateDownloadProgress(trackId, progress) {
const statusEl = taskEl.querySelector('.download-status');
if (progress.stage === 'downloading') {
const percent = progress.totalBytes
? Math.round((progress.receivedBytes / progress.totalBytes) * 100)
: 0;
const percent = progress.totalBytes ? Math.round((progress.receivedBytes / progress.totalBytes) * 100) : 0;
progressFill.style.width = `${percent}%`;
const receivedMB = (progress.receivedBytes / (1024 * 1024)).toFixed(1);
const totalMB = progress.totalBytes
? (progress.totalBytes / (1024 * 1024)).toFixed(1)
: '?';
const totalMB = progress.totalBytes ? (progress.totalBytes / (1024 * 1024)).toFixed(1) : '?';
statusEl.textContent = `Downloading: ${receivedMB}MB / ${totalMB}MB (${percent}%)`;
}
@ -167,7 +173,24 @@ function removeDownloadTask(trackId) {
}, 300);
}
async function downloadTrackBlob(track, quality, api, lyricsManager = null) {
function removeBulkDownloadTask(notifEl) {
const task = bulkDownloadTasks.get(notifEl);
if (!task) return;
notifEl.style.animation = 'slideOut 0.3s ease';
setTimeout(() => {
notifEl.remove();
bulkDownloadTasks.delete(notifEl);
if (downloadNotificationContainer && downloadNotificationContainer.children.length === 0) {
downloadNotificationContainer.remove();
downloadNotificationContainer = null;
}
}, 300);
}
async function downloadTrackBlob(track, quality, api, lyricsManager = null, signal = null) {
const lookup = await api.getTrack(track.id, quality);
let streamUrl;
@ -180,7 +203,7 @@ async function downloadTrackBlob(track, quality, api, lyricsManager = null) {
}
}
const response = await fetch(streamUrl);
const response = await fetch(streamUrl, { signal });
if (!response.ok) {
throw new Error(`Failed to fetch track: ${response.status}`);
}
@ -205,7 +228,7 @@ async function generateAndDownloadZip(zip, filename, notification, progressTotal
zip.generateInternalStream({
type: 'uint8array',
compression: 'STORE',
streamFiles: true
streamFiles: true,
})
.on('data', (chunk, metadata) => {
writable.write(chunk);
@ -225,7 +248,7 @@ async function generateAndDownloadZip(zip, filename, notification, progressTotal
const zipBlob = await zip.generateAsync({
type: 'blob',
compression: 'STORE',
streamFiles: true
streamFiles: true,
});
const url = URL.createObjectURL(zipBlob);
@ -254,10 +277,12 @@ async function initializeZipDownload(defaultName, useFilePicker = false) {
try {
fileHandle = await window.showSaveFilePicker({
suggestedName: `${defaultName}.zip`,
types: [{
types: [
{
description: 'ZIP Archive',
accept: { 'application/zip': ['.zip'] }
}]
accept: { 'application/zip': ['.zip'] },
},
],
});
} catch (err) {
if (err.name === 'AbortError') return null; // User cancelled
@ -267,7 +292,20 @@ async function initializeZipDownload(defaultName, useFilePicker = false) {
return { zip, fileHandle };
}
async function downloadTracksToZip(zip, tracks, folderName, api, quality, lyricsManager, notification, startProgressIndex = 0, totalTracks = tracks.length) {
async function downloadTracksToZip(
zip,
tracks,
folderName,
api,
quality,
lyricsManager,
notification,
startProgressIndex = 0,
totalTracks = tracks.length
) {
const { abortController } = bulkDownloadTasks.get(notification);
const signal = abortController.signal;
for (let i = 0; i < tracks.length; i++) {
const track = tracks[i];
const currentGlobalIndex = startProgressIndex + i;
@ -277,7 +315,7 @@ async function downloadTracksToZip(zip, tracks, folderName, api, quality, lyrics
updateBulkDownloadProgress(notification, currentGlobalIndex, totalTracks, trackTitle);
try {
const blob = await downloadTrackBlob(track, quality, api);
const blob = await downloadTrackBlob(track, quality, api, null, signal);
zip.file(`${folderName}/${filename}`, blob);
if (lyricsManager && lyricsSettings.shouldDownloadLyrics()) {
@ -295,20 +333,24 @@ async function downloadTracksToZip(zip, tracks, folderName, api, quality, lyrics
}
}
} catch (err) {
if (err.name === 'AbortError') {
throw err;
}
console.error(`Failed to download track ${trackTitle}:`, err);
}
}
}
export async function downloadAlbumAsZip(album, tracks, api, quality, lyricsManager = null) {
const releaseDateStr = album.releaseDate || (tracks[0]?.streamStartDate ? tracks[0].streamStartDate.split('T')[0] : '');
const releaseDateStr =
album.releaseDate || (tracks[0]?.streamStartDate ? tracks[0].streamStartDate.split('T')[0] : '');
const releaseDate = releaseDateStr ? new Date(releaseDateStr) : null;
const year = (releaseDate && !isNaN(releaseDate.getTime())) ? releaseDate.getFullYear() : '';
const year = releaseDate && !isNaN(releaseDate.getTime()) ? releaseDate.getFullYear() : '';
const folderName = formatTemplate(localStorage.getItem('zip-folder-template') || '{albumTitle} - {albumArtist}', {
albumTitle: album.title,
albumArtist: album.artist?.name,
year: year
year: year,
});
// Only prompt for save location if we have >= 20 tracks (to capture user gesture early)
@ -325,6 +367,9 @@ export async function downloadAlbumAsZip(album, tracks, api, quality, lyricsMana
await downloadTracksToZip(zip, tracks, folderName, api, quality, lyricsManager, notification);
await generateAndDownloadZip(zip, folderName, notification, tracks.length, fileHandle);
} catch (error) {
if (error.name === 'AbortError') {
return;
}
completeBulkDownload(notification, false, error.message);
throw error;
}
@ -334,7 +379,7 @@ export async function downloadPlaylistAsZip(playlist, tracks, api, quality, lyri
const folderName = formatTemplate(localStorage.getItem('zip-folder-template') || '{albumTitle} - {albumArtist}', {
albumTitle: playlist.title,
albumArtist: 'Playlist',
year: new Date().getFullYear()
year: new Date().getFullYear(),
});
const initResult = await initializeZipDownload(folderName, tracks.length >= 20);
@ -345,19 +390,22 @@ export async function downloadPlaylistAsZip(playlist, tracks, api, quality, lyri
try {
// Find a representative cover for the playlist (first track with cover)
const representativeTrack = tracks.find(t => t.album?.cover);
const representativeTrack = tracks.find((t) => t.album?.cover);
const coverBlob = await getCoverBlob(api, representativeTrack?.album?.cover);
addCoverBlobToZip(zip, folderName, coverBlob);
await downloadTracksToZip(zip, tracks, folderName, api, quality, lyricsManager, notification);
await generateAndDownloadZip(zip, folderName, notification, tracks.length, fileHandle);
} catch (error) {
if (error.name === 'AbortError') {
return;
}
completeBulkDownload(notification, false, error.message);
throw error;
}
}
export async function downloadDiscography(artist, api, quality, lyricsManager = null) {
export async function downloadDiscography(artist, selectedReleases, api, quality, lyricsManager = null) {
const rootFolder = `${sanitizeForFilename(artist.name)} discography`;
// Always use file picker for discography as it's likely large
@ -365,28 +413,34 @@ export async function downloadDiscography(artist, api, quality, lyricsManager =
if (!initResult) return; // User cancelled
const { zip, fileHandle } = initResult;
const allReleases = [...(artist.albums || []), ...(artist.eps || [])];
const notification = createBulkDownloadNotification('discography', artist.name, allReleases.length);
const notification = createBulkDownloadNotification('discography', artist.name, selectedReleases.length);
const { abortController } = bulkDownloadTasks.get(notification);
const signal = abortController.signal;
try {
for (let albumIndex = 0; albumIndex < allReleases.length; albumIndex++) {
const album = allReleases[albumIndex];
for (let albumIndex = 0; albumIndex < selectedReleases.length; albumIndex++) {
const album = selectedReleases[albumIndex];
updateBulkDownloadProgress(notification, albumIndex, allReleases.length, album.title);
updateBulkDownloadProgress(notification, albumIndex, selectedReleases.length, album.title);
try {
const { album: fullAlbum, tracks } = await api.getAlbum(album.id);
const coverBlob = await getCoverBlob(api, fullAlbum.cover || album.cover);
const releaseDateStr = fullAlbum.releaseDate || (tracks[0]?.streamStartDate ? tracks[0].streamStartDate.split('T')[0] : '');
const releaseDateStr =
fullAlbum.releaseDate ||
(tracks[0]?.streamStartDate ? tracks[0].streamStartDate.split('T')[0] : '');
const releaseDate = releaseDateStr ? new Date(releaseDateStr) : null;
const year = (releaseDate && !isNaN(releaseDate.getTime())) ? releaseDate.getFullYear() : '';
const year = releaseDate && !isNaN(releaseDate.getTime()) ? releaseDate.getFullYear() : '';
const albumFolder = formatTemplate(localStorage.getItem('zip-folder-template') || '{albumTitle} - {albumArtist}', {
const albumFolder = formatTemplate(
localStorage.getItem('zip-folder-template') || '{albumTitle} - {albumArtist}',
{
albumTitle: fullAlbum.title,
albumArtist: fullAlbum.artist?.name,
year: year
});
year: year,
}
);
const fullFolderPath = `${rootFolder}/${albumFolder}`;
addCoverBlobToZip(zip, fullFolderPath, coverBlob);
@ -394,7 +448,7 @@ export async function downloadDiscography(artist, api, quality, lyricsManager =
for (const track of tracks) {
const filename = buildTrackFilename(track, quality);
try {
const blob = await downloadTrackBlob(track, quality, api);
const blob = await downloadTrackBlob(track, quality, api, null, signal);
zip.file(`${fullFolderPath}/${filename}`, blob);
if (lyricsManager && lyricsSettings.shouldDownloadLyrics()) {
@ -412,17 +466,25 @@ export async function downloadDiscography(artist, api, quality, lyricsManager =
}
}
} catch (err) {
if (err.name === 'AbortError') {
throw err;
}
console.error(`Failed to download track ${track.title}:`, err);
}
}
} catch (error) {
if (error.name === 'AbortError') {
throw error;
}
console.error(`Failed to download album ${album.title}:`, error);
}
}
await generateAndDownloadZip(zip, rootFolder, notification, allReleases.length, fileHandle);
await generateAndDownloadZip(zip, rootFolder, notification, selectedReleases.length, fileHandle);
} catch (error) {
if (error.name === 'AbortError') {
return;
}
completeBulkDownload(notification, false, error.message);
throw error;
}
@ -433,6 +495,8 @@ function createBulkDownloadNotification(type, name, totalItems) {
const notifEl = document.createElement('div');
notifEl.className = 'download-task bulk-download';
notifEl.dataset.bulkType = type;
notifEl.dataset.bulkName = name;
const typeLabel = type === 'album' ? 'Album' : type === 'playlist' ? 'Playlist' : 'Discography';
@ -448,10 +512,22 @@ function createBulkDownloadNotification(type, name, totalItems) {
</div>
<div class="download-status" style="font-size: 0.75rem; color: var(--muted-foreground); margin-top: 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">Starting...</div>
</div>
<button class="download-cancel" style="background: transparent; border: none; color: var(--muted-foreground); cursor: pointer; padding: 4px; border-radius: 4px; transition: all 0.2s;">
${SVG_CLOSE}
</button>
</div>
`;
container.appendChild(notifEl);
const abortController = new AbortController();
bulkDownloadTasks.set(notifEl, { abortController });
notifEl.querySelector('.download-cancel').addEventListener('click', () => {
abortController.abort();
removeBulkDownloadTask(notifEl);
});
return notifEl;
}
@ -491,7 +567,6 @@ function completeBulkDownload(notifEl, success = true, message = null) {
}
export async function downloadTrackWithMetadata(track, quality, api, lyricsManager = null, abortController = null) {
if (!track) {
alert('No track is currently playing');
return;
@ -502,19 +577,14 @@ export async function downloadTrackWithMetadata(track, quality, api, lyricsManag
const controller = abortController || new AbortController();
try {
const { taskEl, taskAbortController } = addDownloadTask(
track.id,
track,
filename,
api
);
const { taskEl } = addDownloadTask(track.id, track, filename, api, controller);
await api.downloadTrack(track.id, quality, filename, {
signal: controller.signal,
track: track,
onProgress: (progress) => {
updateDownloadProgress(track.id, progress);
}
},
});
completeDownloadTask(track.id, true);
@ -531,9 +601,8 @@ export async function downloadTrackWithMetadata(track, quality, api, lyricsManag
}
} catch (error) {
if (error.name !== 'AbortError') {
const errorMsg = error.message === RATE_LIMIT_ERROR_MESSAGE
? error.message
: 'Download failed. Please try again.';
const errorMsg =
error.message === RATE_LIMIT_ERROR_MESSAGE ? error.message : 'Download failed. Please try again.';
completeDownloadTask(track.id, false, errorMsg);
}
}

189
js/events.js
View file

@ -1,8 +1,19 @@
//js/events.js
import { SVG_PLAY, SVG_PAUSE, SVG_VOLUME, SVG_MUTE, REPEAT_MODE, trackDataStore, RATE_LIMIT_ERROR_MESSAGE, buildTrackFilename, getTrackTitle, formatTime } from './utils.js';
import {
SVG_PLAY,
SVG_PAUSE,
SVG_VOLUME,
SVG_MUTE,
REPEAT_MODE,
trackDataStore,
RATE_LIMIT_ERROR_MESSAGE,
buildTrackFilename,
getTrackTitle,
formatTime,
} from './utils.js';
import { lastFMStorage, waveformSettings } from './storage.js';
import { showNotification, downloadTrackWithMetadata } from './downloads.js';
import { lyricsSettings } from './storage.js';
import { lyricsSettings, downloadQualitySettings } from './storage.js';
import { updateTabTitle } from './router.js';
import { db } from './db.js';
import { syncManager } from './firebase/sync.js';
@ -121,9 +132,8 @@ export function initializePlayerEvents(player, audioPlayer, scrobbler, ui) {
const mode = player.toggleRepeat();
repeatBtn.classList.toggle('active', mode !== REPEAT_MODE.OFF);
repeatBtn.classList.toggle('repeat-one', mode === REPEAT_MODE.ONE);
repeatBtn.title = mode === REPEAT_MODE.OFF
? 'Repeat'
: (mode === REPEAT_MODE.ALL ? 'Repeat Queue' : 'Repeat One');
repeatBtn.title =
mode === REPEAT_MODE.OFF ? 'Repeat' : mode === REPEAT_MODE.ALL ? 'Repeat Queue' : 'Repeat One';
});
// Sleep Timer for desktop
@ -196,7 +206,8 @@ export function initializePlayerEvents(player, audioPlayer, scrobbler, ui) {
// Padding logic for sync
if (trackDuration && duration && duration < trackDuration) {
const diff = trackDuration - duration;
if (diff > 0.5) { // If difference is significant (> 500ms)
if (diff > 0.5) {
// If difference is significant (> 500ms)
// Calculate how many peaks represent the missing time
// peaks.length represents 'duration'
// X peaks represent 'diff'
@ -258,7 +269,7 @@ export function initializePlayerEvents(player, audioPlayer, scrobbler, ui) {
const updateVolumeUI = () => {
const { muted } = audioPlayer;
const volume = player.userVolume;
volumeBtn.innerHTML = (muted || volume === 0) ? SVG_MUTE : SVG_VOLUME;
volumeBtn.innerHTML = muted || volume === 0 ? SVG_MUTE : SVG_VOLUME;
const effectiveVolume = muted ? 0 : volume * 100;
volumeFill.style.setProperty('--volume-level', `${effectiveVolume}%`);
volumeFill.style.width = `${effectiveVolume}%`;
@ -308,7 +319,7 @@ function initializeSmoothSliders(audioPlayer, player) {
wasPlaying = !audioPlayer.paused;
if (wasPlaying) audioPlayer.pause();
seek(progressBar, e, position => {
seek(progressBar, e, (position) => {
if (!isNaN(audioPlayer.duration)) {
audioPlayer.currentTime = position * audioPlayer.duration;
progressFill.style.width = `${position * 100}%`;
@ -334,7 +345,7 @@ function initializeSmoothSliders(audioPlayer, player) {
document.addEventListener('mousemove', (e) => {
if (isSeeking) {
seek(progressBar, e, position => {
seek(progressBar, e, (position) => {
if (!isNaN(audioPlayer.duration)) {
audioPlayer.currentTime = position * audioPlayer.duration;
progressFill.style.width = `${position * 100}%`;
@ -343,7 +354,7 @@ function initializeSmoothSliders(audioPlayer, player) {
}
if (isAdjustingVolume) {
seek(volumeBar, e, position => {
seek(volumeBar, e, (position) => {
player.setVolume(position);
volumeFill.style.width = `${position * 100}%`;
volumeBar.style.setProperty('--volume-level', `${position * 100}%`);
@ -374,7 +385,7 @@ function initializeSmoothSliders(audioPlayer, player) {
document.addEventListener('mouseup', (e) => {
if (isSeeking) {
seek(progressBar, e, position => {
seek(progressBar, e, (position) => {
if (!isNaN(audioPlayer.duration)) {
audioPlayer.currentTime = position * audioPlayer.duration;
player.updateMediaSessionPositionState();
@ -403,9 +414,9 @@ function initializeSmoothSliders(audioPlayer, player) {
}
});
progressBar.addEventListener('click', e => {
progressBar.addEventListener('click', (e) => {
if (!isSeeking) {
seek(progressBar, e, position => {
seek(progressBar, e, (position) => {
if (!isNaN(audioPlayer.duration) && audioPlayer.duration > 0 && audioPlayer.duration !== Infinity) {
audioPlayer.currentTime = position * audioPlayer.duration;
player.updateMediaSessionPositionState();
@ -421,7 +432,7 @@ function initializeSmoothSliders(audioPlayer, player) {
volumeBar.addEventListener('mousedown', (e) => {
isAdjustingVolume = true;
seek(volumeBar, e, position => {
seek(volumeBar, e, (position) => {
player.setVolume(position);
volumeFill.style.width = `${position * 100}%`;
volumeBar.style.setProperty('--volume-level', `${position * 100}%`);
@ -439,16 +450,18 @@ function initializeSmoothSliders(audioPlayer, player) {
volumeBar.style.setProperty('--volume-level', `${position * 100}%`);
});
volumeBar.addEventListener('click', e => {
volumeBar.addEventListener('click', (e) => {
if (!isAdjustingVolume) {
seek(volumeBar, e, position => {
seek(volumeBar, e, (position) => {
player.setVolume(position);
volumeFill.style.width = `${position * 100}%`;
volumeBar.style.setProperty('--volume-level', `${position * 100}%`);
});
}
});
volumeBar.addEventListener('wheel', e => {
volumeBar.addEventListener(
'wheel',
(e) => {
e.preventDefault();
const delta = e.deltaY > 0 ? -0.05 : 0.05;
const newVolume = Math.max(0, Math.min(1, player.userVolume + delta));
@ -461,9 +474,13 @@ function initializeSmoothSliders(audioPlayer, player) {
player.setVolume(newVolume);
volumeFill.style.width = `${newVolume * 100}%`;
volumeBar.style.setProperty('--volume-level', `${newVolume * 100}%`);
}, { passive: false });
},
{ passive: false }
);
volumeBtn?.addEventListener('wheel', e => {
volumeBtn?.addEventListener(
'wheel',
(e) => {
e.preventDefault();
const delta = e.deltaY > 0 ? -0.05 : 0.05;
const newVolume = Math.max(0, Math.min(1, player.userVolume + delta));
@ -476,10 +493,21 @@ function initializeSmoothSliders(audioPlayer, player) {
player.setVolume(newVolume);
volumeFill.style.width = `${newVolume * 100}%`;
volumeBar.style.setProperty('--volume-level', `${newVolume * 100}%`);
}, { passive: false });
},
{ passive: false }
);
}
export async function handleTrackAction(action, item, player, api, lyricsManager, type = 'track', ui = null, scrobbler = null) {
export async function handleTrackAction(
action,
item,
player,
api,
lyricsManager,
type = 'track',
ui = null,
scrobbler = null
) {
if (!item) return;
if (action === 'add-to-queue') {
@ -512,7 +540,7 @@ export async function handleTrackAction(action, item, player, api, lyricsManager
// Ignore
}
}
tracks = playlist ? playlist.tracks : (item.tracks || []);
tracks = playlist ? playlist.tracks : item.tracks || [];
}
if (tracks.length > 0) {
@ -530,7 +558,7 @@ export async function handleTrackAction(action, item, player, api, lyricsManager
showNotification(`Failed to play ${type}`);
}
} else if (action === 'download') {
await downloadTrackWithMetadata(item, player.quality, api, lyricsManager);
await downloadTrackWithMetadata(item, downloadQualitySettings.getQuality(), api, lyricsManager);
} else if (action === 'toggle-like') {
const added = await db.toggleFavorite(type, item);
syncManager.syncLibraryItem(type, item, added);
@ -541,7 +569,8 @@ export async function handleTrackAction(action, item, player, api, lyricsManager
// Update all instances of this item's like button on the page
const id = type === 'playlist' ? item.uuid : item.id;
const selector = type === 'track'
const selector =
type === 'track'
? `[data-track-id="${id}"] .like-btn`
: `.card[data-${type}-id="${id}"] .like-btn, .card[data-playlist-id="${id}"] .like-btn`;
@ -556,7 +585,7 @@ export async function handleTrackAction(action, item, player, api, lyricsManager
elementsToUpdate.push(nowPlayingLikeBtn);
}
elementsToUpdate.forEach(btn => {
elementsToUpdate.forEach((btn) => {
const heartIcon = btn.querySelector('svg');
if (heartIcon) {
heartIcon.classList.toggle('filled', added);
@ -570,7 +599,8 @@ export async function handleTrackAction(action, item, player, api, lyricsManager
// Handle Library Page Update
if (window.location.hash === '#library') {
const itemSelector = type === 'track'
const itemSelector =
type === 'track'
? `.track-item[data-track-id="${id}"]`
: `.card[data-${type}-id="${id}"], .card[data-playlist-id="${id}"]`;
@ -620,9 +650,30 @@ export async function handleTrackAction(action, item, player, api, lyricsManager
const cancelBtn = document.getElementById('playlist-select-cancel');
const overlay = modal.querySelector('.modal-overlay');
list.innerHTML = playlists.map(p => `
<div class="modal-option" data-id="${p.id}">${p.name}</div>
`).join('');
// Check what playlists already have this
const trackId = item.id;
const playlistsWithTrack = new Set();
for (const playlist of playlists) {
if (playlist.tracks && playlist.tracks.some((track) => track.id === trackId)) {
playlistsWithTrack.add(playlist.id);
}
}
const checkmarkSvg =
'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>';
list.innerHTML = playlists
.map((p) => {
const alreadyContains = playlistsWithTrack.has(p.id);
return `
<div class="modal-option ${alreadyContains ? 'already-contains' : ''}" data-id="${p.id}">
<span>${p.name}</span>
${alreadyContains ? `<span class="checkmark">${checkmarkSvg}</span>` : ''}
</div>
`;
})
.join('');
const closeModal = () => {
modal.classList.remove('active');
@ -633,10 +684,16 @@ export async function handleTrackAction(action, item, player, api, lyricsManager
const option = e.target.closest('.modal-option');
if (option) {
const playlistId = option.dataset.id;
const alreadyContains = playlistsWithTrack.has(playlistId);
if (alreadyContains) {
return;
}
await db.addTrackToPlaylist(playlistId, item);
const updatedPlaylist = await db.getPlaylist(playlistId);
syncManager.syncUserPlaylist(updatedPlaylist, 'update');
showNotification(`Added to playlist: ${option.textContent}`);
showNotification(`Added to playlist: ${option.querySelector('span').textContent}`);
closeModal();
}
};
@ -675,7 +732,7 @@ async function updateContextMenuLikeState(contextMenu, contextTrack) {
export function initializeTrackInteractions(player, api, mainContent, contextMenu, lyricsManager, ui, scrobbler) {
let contextTrack = null;
mainContent.addEventListener('click', async e => {
mainContent.addEventListener('click', async (e) => {
const actionBtn = e.target.closest('.track-action-btn, .like-btn, .play-btn');
if (actionBtn && actionBtn.dataset.action) {
e.preventDefault(); // Prevent card navigation
@ -703,7 +760,9 @@ export function initializeTrackInteractions(player, api, mainContent, contextMen
const data = await api.getMix(id);
item = data.mix;
}
} catch (err) { console.error(err); }
} catch (err) {
console.error(err);
}
}
}
@ -720,7 +779,12 @@ export function initializeTrackInteractions(player, api, mainContent, contextMen
if (trackItem && !trackItem.dataset.queueIndex) {
const clickedTrack = trackDataStore.get(trackItem);
if (contextMenu.style.display === 'block' && contextTrack && clickedTrack && contextTrack.id === clickedTrack.id) {
if (
contextMenu.style.display === 'block' &&
contextTrack &&
clickedTrack &&
contextTrack.id === clickedTrack.id
) {
contextMenu.style.display = 'none';
return;
}
@ -739,11 +803,11 @@ export function initializeTrackInteractions(player, api, mainContent, contextMen
if (trackItem && !trackItem.dataset.queueIndex && !e.target.closest('.remove-from-playlist-btn')) {
const parentList = trackItem.closest('.track-list');
const allTrackElements = Array.from(parentList.querySelectorAll('.track-item'));
const trackList = allTrackElements.map(el => trackDataStore.get(el)).filter(Boolean);
const trackList = allTrackElements.map((el) => trackDataStore.get(el)).filter(Boolean);
if (trackList.length > 0) {
const clickedTrackId = trackItem.dataset.trackId;
const startIndex = trackList.findIndex(t => t.id == clickedTrackId);
const startIndex = trackList.findIndex((t) => t.id == clickedTrackId);
player.setQueue(trackList, startIndex);
document.getElementById('shuffle-btn').classList.remove('active');
@ -768,7 +832,7 @@ export function initializeTrackInteractions(player, api, mainContent, contextMen
}
});
mainContent.addEventListener('contextmenu', async e => {
mainContent.addEventListener('contextmenu', async (e) => {
const trackItem = e.target.closest('.track-item, .queue-track-item');
if (trackItem) {
e.preventDefault();
@ -792,7 +856,7 @@ export function initializeTrackInteractions(player, api, mainContent, contextMen
contextMenu.style.display = 'none';
});
contextMenu.addEventListener('click', async e => {
contextMenu.addEventListener('click', async (e) => {
e.stopPropagation();
const action = e.target.dataset.action;
const track = contextMenu._contextTrack || contextTrack;
@ -833,7 +897,16 @@ export function initializeTrackInteractions(player, api, mainContent, contextMen
nowPlayingLikeBtn.addEventListener('click', async (e) => {
e.stopPropagation();
if (player.currentTrack) {
await handleTrackAction('toggle-like', player.currentTrack, player, api, lyricsManager, 'track', ui, scrobbler);
await handleTrackAction(
'toggle-like',
player.currentTrack,
player,
api,
lyricsManager,
'track',
ui,
scrobbler
);
}
});
}
@ -843,7 +916,16 @@ export function initializeTrackInteractions(player, api, mainContent, contextMen
nowPlayingMixBtn.addEventListener('click', async (e) => {
e.stopPropagation();
if (player.currentTrack) {
await handleTrackAction('track-mix', player.currentTrack, player, api, lyricsManager, 'track', ui, scrobbler);
await handleTrackAction(
'track-mix',
player.currentTrack,
player,
api,
lyricsManager,
'track',
ui,
scrobbler
);
}
});
}
@ -853,13 +935,20 @@ export function initializeTrackInteractions(player, api, mainContent, contextMen
nowPlayingAddPlaylistBtn.addEventListener('click', async (e) => {
e.stopPropagation();
if (player.currentTrack) {
await handleTrackAction('add-to-playlist', player.currentTrack, player, api, lyricsManager, 'track', ui, scrobbler);
await handleTrackAction(
'add-to-playlist',
player.currentTrack,
player,
api,
lyricsManager,
'track',
ui,
scrobbler
);
}
});
}
// Mobile add playlist button functionality
const mobileAddPlaylistBtn = document.getElementById('mobile-add-playlist-btn');
@ -867,12 +956,19 @@ export function initializeTrackInteractions(player, api, mainContent, contextMen
mobileAddPlaylistBtn.addEventListener('click', async (e) => {
e.stopPropagation();
if (player.currentTrack) {
await handleTrackAction('add-to-playlist', player.currentTrack, player, api, lyricsManager, 'track', ui, scrobbler);
await handleTrackAction(
'add-to-playlist',
player.currentTrack,
player,
api,
lyricsManager,
'track',
ui,
scrobbler
);
}
});
}
}
function showSleepTimerModal(player) {
@ -939,7 +1035,8 @@ function positionMenu(menu, x, y, anchorRect = null) {
if (anchorRect) {
// Adjust horizontal position if it overflows right
if (left + menuWidth > windowWidth - 10) { // 10px buffer
if (left + menuWidth > windowWidth - 10) {
// 10px buffer
left = anchorRect.right - menuWidth;
if (left < 10) left = 10;
}

27
js/firebase/auth.js
View file

@ -1,6 +1,12 @@
// js/firebase/auth.js
import { auth, provider } from './config.js';
import { signInWithPopup, signOut as firebaseSignOut, onAuthStateChanged, signInWithEmailAndPassword, createUserWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-auth.js";
import {
signInWithPopup,
signOut as firebaseSignOut,
onAuthStateChanged,
signInWithEmailAndPassword,
createUserWithEmailAndPassword,
} from 'https://www.gstatic.com/firebasejs/10.7.1/firebase-auth.js';
import { syncManager } from './sync.js';
export class AuthManager {
@ -18,10 +24,10 @@ export class AuthManager {
this.updateUI(user);
if (user) {
console.log("User logged in:", user.uid);
console.log('User logged in:', user.uid);
syncManager.initialize(user);
} else {
console.log("User logged out");
console.log('User logged out');
syncManager.disconnect();
}
});
@ -29,7 +35,7 @@ export class AuthManager {
async signInWithGoogle() {
if (!auth) {
alert("Firebase is not configured. Please check console.");
alert('Firebase is not configured. Please check console.');
return;
}
@ -38,7 +44,7 @@ export class AuthManager {
// The onAuthStateChanged listener will handle the rest
return result.user;
} catch (error) {
console.error("Login failed:", error);
console.error('Login failed:', error);
alert(`Login failed: ${error.message}`);
throw error;
}
@ -46,14 +52,14 @@ export class AuthManager {
async signInWithEmail(email, password) {
if (!auth) {
alert("Firebase is not configured.");
alert('Firebase is not configured.');
return;
}
try {
const result = await signInWithEmailAndPassword(auth, email, password);
return result.user;
} catch (error) {
console.error("Email Login failed:", error);
console.error('Email Login failed:', error);
alert(`Login failed: ${error.message}`);
throw error;
}
@ -61,14 +67,14 @@ export class AuthManager {
async signUpWithEmail(email, password) {
if (!auth) {
alert("Firebase is not configured.");
alert('Firebase is not configured.');
return;
}
try {
const result = await createUserWithEmailAndPassword(auth, email, password);
return result.user;
} catch (error) {
console.error("Sign Up failed:", error);
console.error('Sign Up failed:', error);
alert(`Sign Up failed: ${error.message}`);
throw error;
}
@ -81,7 +87,7 @@ export class AuthManager {
await firebaseSignOut(auth);
// The onAuthStateChanged listener will handle the rest
} catch (error) {
console.error("Logout failed:", error);
console.error('Logout failed:', error);
throw error;
}
}
@ -105,7 +111,6 @@ export class AuthManager {
if (emailToggleBtn) emailToggleBtn.style.display = 'none';
if (statusText) statusText.textContent = `Signed in as ${user.email}`;
} else {
connectBtn.textContent = 'Connect with Google';
connectBtn.classList.remove('danger');

40
js/firebase/config.js
View file

@ -1,7 +1,7 @@
// js/firebase/config.js
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js";
import { getAuth, GoogleAuthProvider } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-auth.js";
import { getDatabase } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-database.js";
import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js';
import { getAuth, GoogleAuthProvider } from 'https://www.gstatic.com/firebasejs/10.7.1/firebase-auth.js';
import { getDatabase } from 'https://www.gstatic.com/firebasejs/10.7.1/firebase-database.js';
let app = null;
let auth = null;
@ -11,17 +11,14 @@ let provider = null;
const STORAGE_KEY = 'monochrome-firebase-config';
const DEFAULT_CONFIG = {
apiKey: "AIzaSyDPU-unAjuLtQJt4IkGS5faG50UCF7lYyA",
authDomain: "monochrome-database.firebaseapp.com",
projectId: "monochrome-database",
storageBucket: "monochrome-database.firebasestorage.app",
messagingSenderId: "895657412760",
appId: "1:895657412760:web:e81c5044c7f4e9b799e8ed"
apiKey: 'AIzaSyDPU-unAjuLtQJt4IkGS5faG50UCF7lYyA',
authDomain: 'monochrome-database.firebaseapp.com',
projectId: 'monochrome-database',
storageBucket: 'monochrome-database.firebasestorage.app',
messagingSenderId: '895657412760',
appId: '1:895657412760:web:e81c5044c7f4e9b799e8ed',
};
function getStoredConfig() {
try {
const stored = localStorage.getItem(STORAGE_KEY);
@ -42,12 +39,12 @@ if (config) {
auth = getAuth(app);
database = getDatabase(app);
provider = new GoogleAuthProvider();
console.log("Firebase initialized from " + (storedConfig ? "saved" : "default") + " config");
console.log('Firebase initialized from ' + (storedConfig ? 'saved' : 'default') + ' config');
} catch (error) {
console.error("Error initializing Firebase:", error);
console.error('Error initializing Firebase:', error);
}
} else {
console.log("No Firebase config found.");
console.log('No Firebase config found.');
}
export function saveFirebaseConfig(configObj) {
@ -173,9 +170,12 @@ export function initializeFirebaseSettingsUI() {
const config = JSON.parse(currentConfigStr);
const link = generateShareLink(config);
if (link) {
navigator.clipboard.writeText(link).then(() => {
navigator.clipboard
.writeText(link)
.then(() => {
alert('Magic Link copied to clipboard! Send it to your other device.');
}).catch(err => {
})
.catch((err) => {
console.error('Clipboard error:', err);
prompt('Copy this link:', link);
});
@ -227,7 +227,11 @@ export function initializeFirebaseSettingsUI() {
// Clear Button
if (clearFirebaseConfigBtn) {
clearFirebaseConfigBtn.addEventListener('click', () => {
if (confirm('Are you sure you want to remove the custom configuration? The app will revert to the shared default database.')) {
if (
confirm(
'Are you sure you want to remove the custom configuration? The app will revert to the shared default database.'
)
) {
clearFirebaseConfig();
window.location.reload();
}

81
js/firebase/sync.js
View file

@ -1,6 +1,16 @@
// js/firebase/sync.js
import { database } from './config.js';
import { ref, get, set, update, onValue, off, child, remove, runTransaction } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-database.js";
import {
ref,
get,
set,
update,
onValue,
off,
child,
remove,
runTransaction,
} from 'https://www.gstatic.com/firebasejs/10.7.1/firebase-database.js';
import { db } from '../db.js';
export class SyncManager {
@ -16,19 +26,19 @@ export class SyncManager {
this.user = user;
this.userRef = ref(database, `users/${user.uid}`);
console.log("Initializing SyncManager for user:", user.uid);
console.log('Initializing SyncManager for user:', user.uid);
this.performInitialSync();
}
disconnect() {
if (this.userRef) {
// Remove listeners
this.unsubscribeFunctions.forEach(unsub => unsub());
this.unsubscribeFunctions.forEach((unsub) => unsub());
this.unsubscribeFunctions = [];
}
this.user = null;
this.userRef = null;
console.log("SyncManager disconnected");
console.log('SyncManager disconnected');
}
async performInitialSync() {
@ -36,7 +46,7 @@ export class SyncManager {
this.isSyncing = true;
try {
console.log("Starting initial sync...");
console.log('Starting initial sync...');
// 1. Fetch Cloud Data
const snapshot = await get(this.userRef);
@ -61,18 +71,17 @@ export class SyncManager {
favorites_artists: mergedData.library?.artists ? Object.values(mergedData.library.artists) : [],
favorites_playlists: mergedData.library?.playlists ? Object.values(mergedData.library.playlists) : [],
history_tracks: mergedData.history?.recentTracks ? Object.values(mergedData.history.recentTracks) : [],
user_playlists: mergedData.user_playlists ? Object.values(mergedData.user_playlists) : []
user_playlists: mergedData.user_playlists ? Object.values(mergedData.user_playlists) : [],
};
await db.importData(importData, true);
console.log("Initial sync complete.");
console.log('Initial sync complete.');
// 6. Setup Listeners for future changes
this.setupListeners();
} catch (error) {
console.error("Initial sync failed:", error);
console.error('Initial sync failed:', error);
} finally {
this.isSyncing = false;
}
@ -87,18 +96,18 @@ export class SyncManager {
// Add all local items
if (Array.isArray(localItems)) {
localItems.forEach(item => map.set(item[idKey], item));
localItems.forEach((item) => map.set(item[idKey], item));
} else if (localItems && typeof localItems === 'object') {
// Handle case where cloud stores as object keys
Object.values(localItems).forEach(item => map.set(item[idKey], item));
Object.values(localItems).forEach((item) => map.set(item[idKey], item));
}
// Add/Overwrite with cloud items (Union Strategy)
if (cloudItems) {
if (Array.isArray(cloudItems)) {
cloudItems.forEach(item => map.set(item[idKey], item));
cloudItems.forEach((item) => map.set(item[idKey], item));
} else {
Object.keys(cloudItems).forEach(key => {
Object.keys(cloudItems).forEach((key) => {
const val = cloudItems[key];
if (typeof val === 'object') {
map.set(val[idKey] || key, val);
@ -115,14 +124,20 @@ export class SyncManager {
tracks: this.arrayToObject(mergeStores(local.favorites_tracks, cloud.library?.tracks), 'id'),
albums: this.arrayToObject(mergeStores(local.favorites_albums, cloud.library?.albums), 'id'),
artists: this.arrayToObject(mergeStores(local.favorites_artists, cloud.library?.artists), 'id'),
playlists: this.arrayToObject(mergeStores(local.favorites_playlists, cloud.library?.playlists, 'uuid'), 'uuid')
playlists: this.arrayToObject(
mergeStores(local.favorites_playlists, cloud.library?.playlists, 'uuid'),
'uuid'
),
},
history: {
recentTracks: this.arrayToObject(mergeStores(local.history_tracks, cloud.history?.recentTracks, 'timestamp'), 'timestamp')
recentTracks: this.arrayToObject(
mergeStores(local.history_tracks, cloud.history?.recentTracks, 'timestamp'),
'timestamp'
),
},
user_playlists: this.arrayToObject(mergeStores(local.user_playlists, cloud.user_playlists), 'id'),
// Settings are NOT synced (device specific)
lastUpdated: Date.now()
lastUpdated: Date.now(),
};
// Transform back to local structure for db.importData
@ -132,7 +147,7 @@ export class SyncManager {
// Helper to convert array to object with keys
arrayToObject(arr, keyField) {
const obj = {};
arr.forEach(item => {
arr.forEach((item) => {
if (item && item[keyField]) {
obj[item[keyField]] = item;
}
@ -153,7 +168,7 @@ export class SyncManager {
favorites_tracks: val.tracks ? Object.values(val.tracks) : [],
favorites_albums: val.albums ? Object.values(val.albums) : [],
favorites_artists: val.artists ? Object.values(val.artists) : [],
favorites_playlists: val.playlists ? Object.values(val.playlists) : []
favorites_playlists: val.playlists ? Object.values(val.playlists) : [],
};
db.importData(importData, true).then(() => {
// Notify UI to refresh
@ -173,7 +188,7 @@ export class SyncManager {
const val = snapshot.val();
if (val) {
const importData = {
history_tracks: Object.values(val)
history_tracks: Object.values(val),
};
db.importData(importData, true).then(() => {
// Notify UI to refresh
@ -193,7 +208,7 @@ export class SyncManager {
const val = snapshot.val();
if (val) {
const importData = {
user_playlists: Object.values(val)
user_playlists: Object.values(val),
};
db.importData(importData, true).then(() => {
// Notify UI to refresh library
@ -215,10 +230,10 @@ export class SyncManager {
// isAdded: boolean
const categoryMap = {
'track': 'tracks',
'album': 'albums',
'artist': 'artists',
'playlist': 'playlists'
track: 'tracks',
album: 'albums',
artist: 'artists',
playlist: 'playlists',
};
const category = categoryMap[type];
if (!category) return;
@ -235,7 +250,7 @@ export class SyncManager {
// we add it now. Ideally this matches local DB time, but a small diff is negligible.
const entry = {
...minified,
addedAt: item.addedAt || minified.addedAt || Date.now()
addedAt: item.addedAt || minified.addedAt || Date.now(),
};
await set(itemRef, entry);
} else {
@ -250,7 +265,7 @@ export class SyncManager {
try {
await set(itemRef, track);
} catch (error) {
console.error("Failed to sync history item:", error);
console.error('Failed to sync history item:', error);
}
}
@ -270,7 +285,7 @@ export class SyncManager {
async clearCloudData() {
if (!this.user || !this.userRef) {
throw new Error("Not authenticated");
throw new Error('Not authenticated');
}
await remove(this.userRef);
}
@ -278,12 +293,12 @@ export class SyncManager {
// Public Playlist API
async publishPlaylist(playlist) {
if (!this.user) throw new Error("Not authenticated");
if (!this.user) throw new Error('Not authenticated');
const minified = db._minifyItem('playlist', playlist);
const playlistId = playlist.id || playlist.uuid;
if (!playlistId) throw new Error("Invalid playlist ID");
if (!playlistId) throw new Error('Invalid playlist ID');
// Ensure playlist has necessary data
const publicData = {
@ -291,7 +306,7 @@ export class SyncManager {
uid: this.user.uid,
originalId: playlistId,
publishedAt: Date.now(),
tracks: playlist.tracks ? playlist.tracks.map(t => db._minifyItem('track', t)) : []
tracks: playlist.tracks ? playlist.tracks.map((t) => db._minifyItem('track', t)) : [],
};
// Use a global 'public_playlists' node
@ -300,14 +315,14 @@ export class SyncManager {
}
async unpublishPlaylist(playlistId) {
if (!this.user) throw new Error("Not authenticated");
if (!this.user) throw new Error('Not authenticated');
const publicRef = ref(database, `public_playlists/${playlistId}`);
await remove(publicRef);
}
async getPublicPlaylist(playlistId) {
if (!database) {
console.warn("[Sync] Database not initialized, cannot fetch public playlist");
console.warn('[Sync] Database not initialized, cannot fetch public playlist');
return null;
}
try {
@ -321,7 +336,7 @@ export class SyncManager {
console.log(`[Sync] Public playlist fetch for ${playlistId}: Found`);
return data;
} catch (error) {
console.error("[Sync] Failed to fetch public playlist:", error);
console.error('[Sync] Failed to fetch public playlist:', error);
return null;
}
}

31
js/lastfm.js
View file

@ -33,10 +33,13 @@ export class LastFMScrobbler {
saveSession(sessionKey, username) {
this.sessionKey = sessionKey;
this.username = username;
localStorage.setItem('lastfm-session', JSON.stringify({
localStorage.setItem(
'lastfm-session',
JSON.stringify({
key: sessionKey,
name: username
}));
name: username,
})
);
}
clearSession() {
@ -56,9 +59,7 @@ export class LastFMScrobbler {
const sortedKeys = Object.keys(filteredParams).sort();
const signatureString = sortedKeys
.map(key => `${key}${filteredParams[key]}`)
.join('') + this.API_SECRET;
const signatureString = sortedKeys.map((key) => `${key}${filteredParams[key]}`).join('') + this.API_SECRET;
console.log('Signature string:', signatureString);
@ -75,7 +76,7 @@ export class LastFMScrobbler {
const requestParams = {
method,
api_key: this.API_KEY,
...params
...params,
};
if (requiresAuth && this.sessionKey) {
@ -87,7 +88,7 @@ export class LastFMScrobbler {
const formData = new URLSearchParams({
...requestParams,
api_sig: signature,
format: 'json'
format: 'json',
});
try {
@ -96,7 +97,7 @@ export class LastFMScrobbler {
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: formData
body: formData,
});
const data = await response.json();
@ -119,7 +120,7 @@ export class LastFMScrobbler {
return {
token,
url: `https://www.last.fm/api/auth/?api_key=${this.API_KEY}&token=${token}`
url: `https://www.last.fm/api/auth/?api_key=${this.API_KEY}&token=${token}`,
};
} catch (error) {
console.error('Failed to get auth URL:', error);
@ -135,7 +136,7 @@ export class LastFMScrobbler {
this.saveSession(data.session.key, data.session.name);
return {
success: true,
username: data.session.name
username: data.session.name,
};
}
@ -156,7 +157,7 @@ export class LastFMScrobbler {
try {
const params = {
artist: track.artist?.name || track.artists?.[0]?.name || 'Unknown Artist',
track: track.title
track: track.title,
};
if (track.album?.title) {
@ -177,7 +178,6 @@ export class LastFMScrobbler {
this.scrobbleThreshold = Math.min(track.duration / 2, 240);
this.scheduleScrobble(this.scrobbleThreshold * 1000);
} catch (error) {
console.error('Failed to update now playing:', error);
}
@ -207,7 +207,7 @@ export class LastFMScrobbler {
const params = {
artist: this.currentTrack.artist?.name || this.currentTrack.artists?.[0]?.name || 'Unknown Artist',
track: this.currentTrack.title,
timestamp: timestamp
timestamp: timestamp,
};
if (this.currentTrack.album?.title) {
@ -226,7 +226,6 @@ export class LastFMScrobbler {
this.hasScrobbled = true;
console.log('Scrobbled:', this.currentTrack.title);
} catch (error) {
console.error('Failed to scrobble:', error);
}
@ -238,7 +237,7 @@ export class LastFMScrobbler {
try {
const params = {
artist: track.artist?.name || track.artists?.[0]?.name || 'Unknown Artist',
track: track.title
track: track.title,
};
await this.makeRequest('track.love', params, true);

236
js/lyrics.js
View file

@ -1,16 +1,10 @@
//js/lyrics.js
import {
getTrackTitle,
getTrackArtists,
buildTrackFilename,
SVG_DOWNLOAD,
SVG_CLOSE,
} from "./utils.js";
import { sidePanelManager } from "./side-panel.js";
import { getTrackTitle, getTrackArtists, buildTrackFilename, SVG_DOWNLOAD, SVG_CLOSE } from './utils.js';
import { sidePanelManager } from './side-panel.js';
// Dictionary path for kuromoji
// Using CDN - the kuroshiro-analyzer loaded from unpkg will use this as base for fetching dict files
const KUROMOJI_DICT_PATH = "https://cdn.jsdelivr.net/npm/kuromoji@0.1.2/dict/";
const KUROMOJI_DICT_PATH = 'https://cdn.jsdelivr.net/npm/kuromoji@0.1.2/dict/';
export class LyricsManager {
constructor(api) {
@ -85,38 +79,35 @@ export class LyricsManager {
// Load Kuroshiro from CDN
if (!window.Kuroshiro) {
await this.loadScript(
"https://unpkg.com/kuroshiro@1.2.0/dist/kuroshiro.min.js",
);
await this.loadScript('https://unpkg.com/kuroshiro@1.2.0/dist/kuroshiro.min.js');
}
// Load Kuromoji analyzer from CDN
if (!window.KuromojiAnalyzer) {
await this.loadScript(
"https://unpkg.com/kuroshiro-analyzer-kuromoji@1.1.0/dist/kuroshiro-analyzer-kuromoji.min.js",
'https://unpkg.com/kuroshiro-analyzer-kuromoji@1.1.0/dist/kuroshiro-analyzer-kuromoji.min.js'
);
}
// Initialize Kuroshiro (CDN version exports as .default)
const Kuroshiro = window.Kuroshiro.default || window.Kuroshiro;
const KuromojiAnalyzer =
window.KuromojiAnalyzer.default || window.KuromojiAnalyzer;
const KuromojiAnalyzer = window.KuromojiAnalyzer.default || window.KuromojiAnalyzer;
this.kuroshiro = new Kuroshiro();
// Initialize with a dummy path - our fetch interceptor will redirect to CDN
await this.kuroshiro.init(
new KuromojiAnalyzer({
dictPath: "/dict/", // This gets mangled but our interceptor fixes it
}),
dictPath: '/dict/', // This gets mangled but our interceptor fixes it
})
);
this.kuroshiroLoaded = true;
this.kuroshiroLoading = false;
console.log("✓ Kuroshiro loaded and initialized successfully");
console.log('✓ Kuroshiro loaded and initialized successfully');
return true;
} catch (error) {
console.error("✗ Failed to load Kuroshiro:", error);
console.error('✗ Failed to load Kuroshiro:', error);
this.kuroshiroLoaded = false;
this.kuroshiroLoading = false;
return false;
@ -131,7 +122,7 @@ export class LyricsManager {
resolve();
return;
}
const script = document.createElement("script");
const script = document.createElement('script');
script.src = src;
script.onload = resolve;
script.onerror = () => reject(new Error(`Failed to load script: ${src}`));
@ -159,32 +150,28 @@ export class LyricsManager {
if (!this.kuroshiroLoaded) {
const success = await this.loadKuroshiro();
if (!success) {
console.warn("Kuroshiro not available, skipping conversion");
console.warn('Kuroshiro not available, skipping conversion');
return text;
}
}
if (!this.kuroshiro) {
console.warn("Kuroshiro not available, skipping conversion");
console.warn('Kuroshiro not available, skipping conversion');
return text;
}
try {
// Convert to Romaji using Kuroshiro (handles Kanji, Hiragana, Katakana)
const result = await this.kuroshiro.convert(text, {
to: "romaji",
mode: "spaced",
romajiSystem: "hepburn",
to: 'romaji',
mode: 'spaced',
romajiSystem: 'hepburn',
});
// Cache the result
this.romajiTextCache.set(text, result);
return result;
} catch (error) {
console.warn(
"Romaji conversion failed for text:",
text.substring(0, 30),
error,
);
console.warn('Romaji conversion failed for text:', text.substring(0, 30), error);
return text;
}
}
@ -193,16 +180,16 @@ export class LyricsManager {
setRomajiMode(enabled) {
this.isRomajiMode = enabled;
try {
localStorage.setItem("lyricsRomajiMode", enabled ? "true" : "false");
localStorage.setItem('lyricsRomajiMode', enabled ? 'true' : 'false');
} catch (e) {
console.warn("Failed to save Romaji mode preference:", e);
console.warn('Failed to save Romaji mode preference:', e);
}
}
// Get saved Romaji mode preference
getRomajiMode() {
try {
return localStorage.getItem("lyricsRomajiMode") === "true";
return localStorage.getItem('lyricsRomajiMode') === 'true';
} catch (e) {
return false;
}
@ -211,24 +198,20 @@ export class LyricsManager {
async ensureComponentLoaded() {
if (this.componentLoaded) return;
if (
typeof customElements !== "undefined" &&
customElements.get("am-lyrics")
) {
if (typeof customElements !== 'undefined' && customElements.get('am-lyrics')) {
this.componentLoaded = true;
return;
}
return new Promise((resolve, reject) => {
const script = document.createElement("script");
script.type = "module";
script.src =
"https://cdn.jsdelivr.net/npm/@uimaxbai/am-lyrics@0.6.2/dist/src/am-lyrics.min.js";
const script = document.createElement('script');
script.type = 'module';
script.src = 'https://cdn.jsdelivr.net/npm/@uimaxbai/am-lyrics@0.6.2/dist/src/am-lyrics.min.js';
script.onload = () => {
if (typeof customElements !== "undefined") {
if (typeof customElements !== 'undefined') {
customElements
.whenDefined("am-lyrics")
.whenDefined('am-lyrics')
.then(() => {
this.componentLoaded = true;
resolve();
@ -239,8 +222,7 @@ export class LyricsManager {
}
};
script.onerror = () =>
reject(new Error("Failed to load lyrics component"));
script.onerror = () => reject(new Error('Failed to load lyrics component'));
document.head.appendChild(script);
});
}
@ -253,14 +235,14 @@ export class LyricsManager {
try {
const artist = Array.isArray(track.artists)
? track.artists.map((a) => a.name || a).join(", ")
: track.artist?.name || "";
const title = track.title || "";
const album = track.album?.title || "";
? track.artists.map((a) => a.name || a).join(', ')
: track.artist?.name || '';
const title = track.title || '';
const album = track.album?.title || '';
const duration = track.duration ? Math.round(track.duration) : null;
if (!title || !artist) {
console.warn("Missing required fields for LRCLIB");
console.warn('Missing required fields for LRCLIB');
return null;
}
@ -269,12 +251,10 @@ export class LyricsManager {
artist_name: artist,
});
if (album) params.append("album_name", album);
if (duration) params.append("duration", duration.toString());
if (album) params.append('album_name', album);
if (duration) params.append('duration', duration.toString());
const response = await fetch(
`https://lrclib.net/api/get?${params.toString()}`,
);
const response = await fetch(`https://lrclib.net/api/get?${params.toString()}`);
if (response.ok) {
const data = await response.json();
@ -282,7 +262,7 @@ export class LyricsManager {
if (data.syncedLyrics) {
const lyricsData = {
subtitles: data.syncedLyrics,
lyricsProvider: "LRCLIB",
lyricsProvider: 'LRCLIB',
};
this.lyricsCache.set(trackId, lyricsData);
@ -290,7 +270,7 @@ export class LyricsManager {
}
}
} catch (error) {
console.warn("LRCLIB fetch failed:", error);
console.warn('LRCLIB fetch failed:', error);
}
}
@ -299,16 +279,13 @@ export class LyricsManager {
parseSyncedLyrics(subtitles) {
if (!subtitles) return [];
const lines = subtitles.split("\n").filter((line) => line.trim());
const lines = subtitles.split('\n').filter((line) => line.trim());
return lines
.map((line) => {
const match = line.match(/\[(\d+):(\d+)\.(\d+)\]\s*(.+)/);
if (match) {
const [, minutes, seconds, centiseconds, text] = match;
const timeInSeconds =
parseInt(minutes) * 60 +
parseInt(seconds) +
parseInt(centiseconds) / 100;
const timeInSeconds = parseInt(minutes) * 60 + parseInt(seconds) + parseInt(centiseconds) / 100;
return { time: timeInSeconds, text: text.trim() };
}
return null;
@ -324,9 +301,9 @@ export class LyricsManager {
let lrc = `[ti:${trackTitle}]\n`;
lrc += `[ar:${trackArtist}]\n`;
lrc += `[al:${track.album?.title || "Unknown Album"}]\n`;
lrc += `[by:${lyricsData.lyricsProvider || "Unknown"}]\n`;
lrc += "\n";
lrc += `[al:${track.album?.title || 'Unknown Album'}]\n`;
lrc += `[by:${lyricsData.lyricsProvider || 'Unknown'}]\n`;
lrc += '\n';
lrc += lyricsData.subtitles;
return lrc;
@ -335,18 +312,15 @@ export class LyricsManager {
downloadLRC(lyricsData, track) {
const lrcContent = this.generateLRCContent(lyricsData, track);
if (!lrcContent) {
alert("No synced lyrics available for this track");
alert('No synced lyrics available for this track');
return;
}
const blob = new Blob([lrcContent], { type: "application/octet-stream" });
const blob = new Blob([lrcContent], { type: 'application/octet-stream' });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
const a = document.createElement('a');
a.href = url;
a.download = buildTrackFilename(track, "LOSSLESS").replace(
/\.flac$/,
".lrc",
);
a.download = buildTrackFilename(track, 'LOSSLESS').replace(/\.flac$/, '.lrc');
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
@ -379,11 +353,11 @@ export class LyricsManager {
// Check if any relevant mutation occurred
const hasRelevantChange = mutations.some((mutation) => {
// New nodes added
if (mutation.type === "childList" && mutation.addedNodes.length > 0) {
if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
return true;
}
// Text content changed
if (mutation.type === "characterData" && mutation.target.textContent) {
if (mutation.type === 'characterData' && mutation.target.textContent) {
// Only trigger if the text contains Japanese
return this.containsJapanese(mutation.target.textContent);
}
@ -431,19 +405,14 @@ export class LyricsManager {
if (!this.kuroshiroLoaded) {
const success = await this.loadKuroshiro();
if (!success) {
console.warn("Cannot convert lyrics - Kuroshiro load failed");
console.warn('Cannot convert lyrics - Kuroshiro load failed');
return;
}
}
// Find all text nodes in the component
const textNodes = [];
const walker = document.createTreeWalker(
rootToTraverse,
NodeFilter.SHOW_TEXT,
null,
false,
);
const walker = document.createTreeWalker(rootToTraverse, NodeFilter.SHOW_TEXT, null, false);
let node;
while ((node = walker.nextNode())) {
@ -457,10 +426,10 @@ export class LyricsManager {
}
const parentTag = textNode.parentElement.tagName?.toLowerCase();
const parentClass = String(textNode.parentElement.className || "");
const parentClass = String(textNode.parentElement.className || '');
// Skip elements that shouldn't be converted
const skipTags = ["script", "style", "code", "input", "textarea", "time"];
const skipTags = ['script', 'style', 'code', 'input', 'textarea', 'time'];
if (skipTags.includes(parentTag)) {
continue;
}
@ -469,11 +438,9 @@ export class LyricsManager {
// Skip progress indicators and timestamps (but NOT progress-text which is the actual lyrics!)
if (
(parentClass.includes("progress") &&
!parentClass.includes("progress-text")) ||
(parentClass.includes("time") &&
!parentClass.includes("progress-text")) ||
parentClass.includes("timestamp")
(parentClass.includes('progress') && !parentClass.includes('progress-text')) ||
(parentClass.includes('time') && !parentClass.includes('progress-text')) ||
parentClass.includes('timestamp')
) {
continue;
}
@ -543,7 +510,7 @@ export async function openLyricsPanel(track, audioPlayer, lyricsManager) {
} else {
// Otherwise, load in background
manager.loadKuroshiro().catch((err) => {
console.warn("Failed to load Kuroshiro for Romaji conversion:", err);
console.warn('Failed to load Kuroshiro for Romaji conversion:', err);
});
}
}
@ -556,7 +523,7 @@ export async function openLyricsPanel(track, audioPlayer, lyricsManager) {
<button id="close-side-panel-btn" class="btn-icon" title="Close">
${SVG_CLOSE}
</button>
<button id="romaji-toggle-btn" class="btn-icon" title="Toggle Romaji (Japanese to Latin)" data-enabled="${isRomajiMode}" style="color: ${isRomajiMode ? "var(--primary)" : ""}">
<button id="romaji-toggle-btn" class="btn-icon" title="Toggle Romaji (Japanese to Latin)" data-enabled="${isRomajiMode}" style="color: ${isRomajiMode ? 'var(--primary)' : ''}">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
@ -564,25 +531,23 @@ export async function openLyricsPanel(track, audioPlayer, lyricsManager) {
</button>
`;
container
.querySelector("#close-side-panel-btn")
.addEventListener("click", () => {
container.querySelector('#close-side-panel-btn').addEventListener('click', () => {
sidePanelManager.close();
clearLyricsPanelSync(audioPlayer, sidePanelManager.panel);
});
// Romaji toggle button handler
const romajiBtn = container.querySelector("#romaji-toggle-btn");
const romajiBtn = container.querySelector('#romaji-toggle-btn');
if (romajiBtn) {
const updateRomajiBtn = () => {
const enabled = manager.isRomajiMode;
romajiBtn.setAttribute("data-enabled", enabled);
romajiBtn.style.color = enabled ? "var(--primary)" : "";
romajiBtn.setAttribute('data-enabled', enabled);
romajiBtn.style.color = enabled ? 'var(--primary)' : '';
};
updateRomajiBtn();
romajiBtn.addEventListener("click", async () => {
const amLyrics = sidePanelManager.panel.querySelector("am-lyrics");
romajiBtn.addEventListener('click', async () => {
const amLyrics = sidePanelManager.panel.querySelector('am-lyrics');
if (amLyrics) {
const newMode = await manager.toggleRomajiMode(amLyrics);
updateRomajiBtn();
@ -596,15 +561,10 @@ export async function openLyricsPanel(track, audioPlayer, lyricsManager) {
await renderLyricsComponent(container, track, audioPlayer, manager);
};
sidePanelManager.open("lyrics", "Lyrics", renderControls, renderContent);
sidePanelManager.open('lyrics', 'Lyrics', renderControls, renderContent);
}
async function renderLyricsComponent(
container,
track,
audioPlayer,
lyricsManager,
) {
async function renderLyricsComponent(container, track, audioPlayer, lyricsManager) {
container.innerHTML = '<div class="lyrics-loading">Loading lyrics...</div>';
try {
@ -617,26 +577,24 @@ async function renderLyricsComponent(
const title = track.title;
const artist = getTrackArtists(track);
const album = track.album?.title;
const durationMs = track.duration
? Math.round(track.duration * 1000)
: undefined;
const isrc = track.isrc || "";
const durationMs = track.duration ? Math.round(track.duration * 1000) : undefined;
const isrc = track.isrc || '';
container.innerHTML = "";
const amLyrics = document.createElement("am-lyrics");
amLyrics.setAttribute("song-title", title);
amLyrics.setAttribute("song-artist", artist);
if (album) amLyrics.setAttribute("song-album", album);
if (durationMs) amLyrics.setAttribute("song-duration", durationMs);
amLyrics.setAttribute("query", `${title} ${artist}`.trim());
if (isrc) amLyrics.setAttribute("isrc", isrc);
container.innerHTML = '';
const amLyrics = document.createElement('am-lyrics');
amLyrics.setAttribute('song-title', title);
amLyrics.setAttribute('song-artist', artist);
if (album) amLyrics.setAttribute('song-album', album);
if (durationMs) amLyrics.setAttribute('song-duration', durationMs);
amLyrics.setAttribute('query', `${title} ${artist}`.trim());
if (isrc) amLyrics.setAttribute('isrc', isrc);
amLyrics.setAttribute("highlight-color", "#93c5fd");
amLyrics.setAttribute("hover-background-color", "rgba(59, 130, 246, 0.14)");
amLyrics.setAttribute("autoscroll", "");
amLyrics.setAttribute("interpolate", "");
amLyrics.style.height = "100%";
amLyrics.style.width = "100%";
amLyrics.setAttribute('highlight-color', '#93c5fd');
amLyrics.setAttribute('hover-background-color', 'rgba(59, 130, 246, 0.14)');
amLyrics.setAttribute('autoscroll', '');
amLyrics.setAttribute('interpolate', '');
amLyrics.style.height = '100%';
amLyrics.style.width = '100%';
container.appendChild(amLyrics);
@ -696,9 +654,8 @@ async function renderLyricsComponent(
return amLyrics;
} catch (error) {
console.error("Failed to load lyrics:", error);
container.innerHTML =
'<div class="lyrics-error">Failed to load lyrics</div>';
console.error('Failed to load lyrics:', error);
container.innerHTML = '<div class="lyrics-error">Failed to load lyrics</div>';
return null;
}
}
@ -745,11 +702,11 @@ function setupSync(track, audioPlayer, amLyrics) {
}
};
audioPlayer.addEventListener("timeupdate", updateTime);
audioPlayer.addEventListener("play", onPlay);
audioPlayer.addEventListener("pause", onPause);
audioPlayer.addEventListener("seeked", updateTime);
amLyrics.addEventListener("line-click", onLineClick);
audioPlayer.addEventListener('timeupdate', updateTime);
audioPlayer.addEventListener('play', onPlay);
audioPlayer.addEventListener('pause', onPause);
audioPlayer.addEventListener('seeked', updateTime);
amLyrics.addEventListener('line-click', onLineClick);
if (!audioPlayer.paused) {
tick();
@ -759,20 +716,15 @@ function setupSync(track, audioPlayer, amLyrics) {
if (animationFrameId) {
cancelAnimationFrame(animationFrameId);
}
audioPlayer.removeEventListener("timeupdate", updateTime);
audioPlayer.removeEventListener("play", onPlay);
audioPlayer.removeEventListener("pause", onPause);
audioPlayer.removeEventListener("seeked", updateTime);
amLyrics.removeEventListener("line-click", onLineClick);
audioPlayer.removeEventListener('timeupdate', updateTime);
audioPlayer.removeEventListener('play', onPlay);
audioPlayer.removeEventListener('pause', onPause);
audioPlayer.removeEventListener('seeked', updateTime);
amLyrics.removeEventListener('line-click', onLineClick);
};
}
export async function renderLyricsInFullscreen(
track,
audioPlayer,
lyricsManager,
container,
) {
export async function renderLyricsInFullscreen(track, audioPlayer, lyricsManager, container) {
return renderLyricsComponent(container, track, audioPlayer, lyricsManager);
}

138
js/metadata.js
View file

@ -68,11 +68,13 @@ async function addFlacMetadata(flacBlob, track, api) {
function isFlacFile(dataView) {
// Check for "fLaC" signature at the beginning
return dataView.byteLength >= 4 &&
return (
dataView.byteLength >= 4 &&
dataView.getUint8(0) === 0x66 && // 'f'
dataView.getUint8(1) === 0x4C && // 'L'
dataView.getUint8(1) === 0x4c && // 'L'
dataView.getUint8(2) === 0x61 && // 'a'
dataView.getUint8(3) === 0x43; // 'C'
dataView.getUint8(3) === 0x43
); // 'C'
}
function parseFlacBlocks(dataView) {
@ -82,9 +84,10 @@ function parseFlacBlocks(dataView) {
while (offset + 4 <= dataView.byteLength) {
const header = dataView.getUint8(offset);
const isLast = (header & 0x80) !== 0;
const blockType = header & 0x7F;
const blockType = header & 0x7f;
const blockSize = (dataView.getUint8(offset + 1) << 16) |
const blockSize =
(dataView.getUint8(offset + 1) << 16) |
(dataView.getUint8(offset + 2) << 8) |
dataView.getUint8(offset + 3);
@ -99,7 +102,7 @@ function parseFlacBlocks(dataView) {
isLast: isLast,
size: blockSize,
offset: offset + 4,
headerOffset: offset
headerOffset: offset,
});
offset += 4 + blockSize;
@ -138,7 +141,8 @@ function createVorbisCommentBlock(track) {
comments.push(['TRACKTOTAL', String(track.album.numberOfTracks)]);
}
const releaseDateStr = track.album?.releaseDate || (track.streamStartDate ? track.streamStartDate.split('T')[0] : '');
const releaseDateStr =
track.album?.releaseDate || (track.streamStartDate ? track.streamStartDate.split('T')[0] : '');
if (releaseDateStr) {
try {
const year = new Date(releaseDateStr).getFullYear();
@ -217,14 +221,18 @@ async function createFlacPictureBlock(coverId, api) {
const descBytes = new TextEncoder().encode(description);
// Calculate total size
const totalSize = 4 + // picture type
4 + mimeBytes.length + // mime length + mime
4 + descBytes.length + // desc length + desc
const totalSize =
4 + // picture type
4 +
mimeBytes.length + // mime length + mime
4 +
descBytes.length + // desc length + desc
4 + // width
4 + // height
4 + // color depth
4 + // indexed colors
4 + imageBytes.length; // image length + image
4 +
imageBytes.length; // image length + image
const buffer = new ArrayBuffer(totalSize);
const view = new DataView(buffer);
@ -288,7 +296,7 @@ function rebuildFlacWithMetadata(dataView, blocks, vorbisCommentBlock, pictureBl
const originalArray = new Uint8Array(dataView.buffer);
// Remove old Vorbis comment and picture blocks
const filteredBlocks = blocks.filter(b => b.type !== 4 && b.type !== 6); // 4 = Vorbis, 6 = Picture
const filteredBlocks = blocks.filter((b) => b.type !== 4 && b.type !== 6); // 4 = Vorbis, 6 = Picture
// Calculate new file size
let newSize = 4; // "fLaC" signature
@ -320,7 +328,7 @@ function rebuildFlacWithMetadata(dataView, blocks, vorbisCommentBlock, pictureBl
// Write "fLaC" signature
newFile[offset++] = 0x66; // 'f'
newFile[offset++] = 0x4C; // 'L'
newFile[offset++] = 0x4c; // 'L'
newFile[offset++] = 0x61; // 'a'
newFile[offset++] = 0x43; // 'C'
@ -332,9 +340,9 @@ function rebuildFlacWithMetadata(dataView, blocks, vorbisCommentBlock, pictureBl
// Write block header
const header = (isLast ? 0x80 : 0x00) | block.type;
newFile[offset++] = header;
newFile[offset++] = (block.size >> 16) & 0xFF;
newFile[offset++] = (block.size >> 8) & 0xFF;
newFile[offset++] = block.size & 0xFF;
newFile[offset++] = (block.size >> 16) & 0xff;
newFile[offset++] = (block.size >> 8) & 0xff;
newFile[offset++] = block.size & 0xff;
// Write block data
newFile.set(originalArray.subarray(block.offset, block.offset + block.size), offset);
@ -345,9 +353,9 @@ function rebuildFlacWithMetadata(dataView, blocks, vorbisCommentBlock, pictureBl
const vorbisHeaderOffset = offset;
const vorbisHeader = 0x04; // Vorbis comment type
newFile[offset++] = vorbisHeader;
newFile[offset++] = (vorbisCommentBlock.length >> 16) & 0xFF;
newFile[offset++] = (vorbisCommentBlock.length >> 8) & 0xFF;
newFile[offset++] = vorbisCommentBlock.length & 0xFF;
newFile[offset++] = (vorbisCommentBlock.length >> 16) & 0xff;
newFile[offset++] = (vorbisCommentBlock.length >> 8) & 0xff;
newFile[offset++] = vorbisCommentBlock.length & 0xff;
newFile.set(vorbisCommentBlock, offset);
offset += vorbisCommentBlock.length;
@ -358,9 +366,9 @@ function rebuildFlacWithMetadata(dataView, blocks, vorbisCommentBlock, pictureBl
const pictureHeaderOffset = offset;
const pictureHeader = 0x06; // Picture type
newFile[offset++] = pictureHeader;
newFile[offset++] = (pictureBlock.length >> 16) & 0xFF;
newFile[offset++] = (pictureBlock.length >> 8) & 0xFF;
newFile[offset++] = pictureBlock.length & 0xFF;
newFile[offset++] = (pictureBlock.length >> 16) & 0xff;
newFile[offset++] = (pictureBlock.length >> 8) & 0xff;
newFile[offset++] = pictureBlock.length & 0xff;
newFile.set(pictureBlock, offset);
offset += pictureBlock.length;
lastBlockHeaderOffset = pictureHeaderOffset;
@ -399,7 +407,7 @@ async function addM4aMetadata(m4aBlob, track, api) {
const imageBytes = new Uint8Array(await imageBlob.arrayBuffer());
metadataAtoms.cover = {
type: 'covr',
data: imageBytes
data: imageBytes,
};
}
} catch (error) {
@ -458,7 +466,7 @@ function parseMp4Atoms(dataView) {
atoms.push({
type: type,
offset: offset,
size: size
size: size,
});
offset += size;
@ -475,14 +483,15 @@ function createMp4MetadataAtoms(track) {
'©nam': track.title || DEFAULT_TITLE,
'©ART': track.artist?.name || DEFAULT_ARTIST,
'©alb': track.album?.title || DEFAULT_ALBUM,
'aART': track.album?.artist?.name || DEFAULT_ARTIST,
aART: track.album?.artist?.name || DEFAULT_ARTIST,
};
if (track.trackNumber) {
tags['trkn'] = track.trackNumber;
}
const releaseDateStr = track.album?.releaseDate || (track.streamStartDate ? track.streamStartDate.split('T')[0] : '');
const releaseDateStr =
track.album?.releaseDate || (track.streamStartDate ? track.streamStartDate.split('T')[0] : '');
if (releaseDateStr) {
try {
const year = new Date(releaseDateStr).getFullYear();
@ -501,7 +510,7 @@ function rebuildMp4WithMetadata(dataView, atoms, metadataAtoms) {
const originalArray = new Uint8Array(dataView.buffer);
// Find moov atom
const moovAtom = atoms.find(a => a.type === 'moov');
const moovAtom = atoms.find((a) => a.type === 'moov');
if (!moovAtom) {
console.warn('No moov atom found in M4A file');
return originalArray;
@ -524,7 +533,7 @@ function rebuildMp4WithMetadata(dataView, atoms, metadataAtoms) {
const moovChildren = parseMp4Atoms(new DataView(originalArray.buffer, moovAtom.offset + 8, moovAtom.size - 8));
// Filter out existing udta to replace it
const filteredMoovChildren = moovChildren.filter(a => a.type !== 'udta');
const filteredMoovChildren = moovChildren.filter((a) => a.type !== 'udta');
// Calculate new moov size
// Header (8) + Sum of other children sizes + New Metadata Block Size
@ -542,7 +551,7 @@ function rebuildMp4WithMetadata(dataView, atoms, metadataAtoms) {
let originalOffset = 0;
// Copy atoms before moov
const atomsBeforeMoov = atoms.filter(a => a.offset < moovAtom.offset);
const atomsBeforeMoov = atoms.filter((a) => a.offset < moovAtom.offset);
for (const atom of atomsBeforeMoov) {
newFile.set(originalArray.subarray(atom.offset, atom.offset + atom.size), offset);
offset += atom.size;
@ -551,15 +560,15 @@ function rebuildMp4WithMetadata(dataView, atoms, metadataAtoms) {
// Write new moov atom
// Size
newFile[offset++] = (newMoovSize >> 24) & 0xFF;
newFile[offset++] = (newMoovSize >> 16) & 0xFF;
newFile[offset++] = (newMoovSize >> 8) & 0xFF;
newFile[offset++] = newMoovSize & 0xFF;
newFile[offset++] = (newMoovSize >> 24) & 0xff;
newFile[offset++] = (newMoovSize >> 16) & 0xff;
newFile[offset++] = (newMoovSize >> 8) & 0xff;
newFile[offset++] = newMoovSize & 0xff;
// Type 'moov'
newFile[offset++] = 0x6D;
newFile[offset++] = 0x6F;
newFile[offset++] = 0x6F;
newFile[offset++] = 0x6d;
newFile[offset++] = 0x6f;
newFile[offset++] = 0x6f;
newFile[offset++] = 0x76;
// Write preserved children of moov
@ -592,7 +601,7 @@ function rebuildMp4WithMetadata(dataView, atoms, metadataAtoms) {
// If moov is BEFORE mdat, we need to shift offsets.
// Most streaming optimized files have moov before mdat.
const mdatAtom = atoms.find(a => a.type === 'mdat');
const mdatAtom = atoms.find((a) => a.type === 'mdat');
const moovBeforeMdat = mdatAtom && moovAtom.offset < mdatAtom.offset;
if (moovBeforeMdat) {
@ -664,20 +673,38 @@ function createMetadataBlock(metadataAtoms) {
// hdlr size: 4 (size) + 4 (type) + 4 (ver/flags) + 4 (pre_defined) + 4 (handler_type) + 12 (reserved) + name (string)
// Minimal valid hdlr for iTunes metadata:
const hdlrContent = new Uint8Array([
0, 0, 0, 0, // Version/Flags
0, 0, 0, 0, // Pre-defined
0x6D, 0x64, 0x69, 0x72, // 'mdir'
0x61, 0x70, 0x70, 0x6C, // 'appl'
0, 0, 0, 0, // Reserved
0, 0, 0, 0,
0, 0 // Name (empty null-term) check spec? usually simple 0 is enough
0,
0,
0,
0, // Version/Flags
0,
0,
0,
0, // Pre-defined
0x6d,
0x64,
0x69,
0x72, // 'mdir'
0x61,
0x70,
0x70,
0x6c, // 'appl'
0,
0,
0,
0, // Reserved
0,
0,
0,
0,
0,
0, // Name (empty null-term) check spec? usually simple 0 is enough
]);
const hdlrSize = 8 + hdlrContent.length;
const hdlr = new Uint8Array(hdlrSize);
writeAtomHeader(hdlr, 0, hdlrSize, 'hdlr');
hdlr.set(hdlrContent, 8);
// Construct udta atom
// udta contains meta. meta usually should contain hdlr before ilst?
// Actually, QuickTime spec says meta contains hdlr then ilst.
@ -765,8 +792,8 @@ function createIntAtom(type, value) {
buf[offset++] = 0;
// Track num
const trk = parseInt(value) || 0;
buf[offset++] = (trk >> 8) & 0xFF;
buf[offset++] = trk & 0xFF;
buf[offset++] = (trk >> 8) & 0xff;
buf[offset++] = trk & 0xff;
// Total (0 for now)
buf[offset++] = 0;
buf[offset++] = 0;
@ -792,7 +819,8 @@ function createCoverAtom(imageBytes) {
// Data Type (13 = JPEG, 14 = PNG)
// We try to detect or default to JPEG (13)
let type = 13;
if (imageBytes[0] === 0x89 && imageBytes[1] === 0x50) { // PNG signature
if (imageBytes[0] === 0x89 && imageBytes[1] === 0x50) {
// PNG signature
type = 14;
}
@ -811,10 +839,10 @@ function createCoverAtom(imageBytes) {
}
function writeAtomHeader(buf, offset, size, type) {
buf[offset++] = (size >> 24) & 0xFF;
buf[offset++] = (size >> 16) & 0xFF;
buf[offset++] = (size >> 8) & 0xFF;
buf[offset++] = size & 0xFF;
buf[offset++] = (size >> 24) & 0xff;
buf[offset++] = (size >> 16) & 0xff;
buf[offset++] = (size >> 8) & 0xff;
buf[offset++] = size & 0xff;
for (let i = 0; i < 4; i++) {
buf[offset++] = type.charCodeAt(i);
@ -856,7 +884,7 @@ function findAndShiftOffsets(view, start, end, shift) {
// Header (8) + Version(1) + Flags(3) + Count(4) + Entries(Count * 4)
const count = view.getUint32(offset + 12, false);
for (let i = 0; i < count; i++) {
const entryOffset = offset + 16 + (i * 4);
const entryOffset = offset + 16 + i * 4;
const oldVal = view.getUint32(entryOffset, false);
view.setUint32(entryOffset, oldVal + shift, false);
}
@ -865,7 +893,7 @@ function findAndShiftOffsets(view, start, end, shift) {
// Header (8) + Version(1) + Flags(3) + Count(4) + Entries(Count * 8)
const count = view.getUint32(offset + 12, false);
for (let i = 0; i < count; i++) {
const entryOffset = offset + 16 + (i * 8);
const entryOffset = offset + 16 + i * 8;
// Read 64-bit int
const oldHigh = view.getUint32(entryOffset, false);
const oldLow = view.getUint32(entryOffset + 4, false);
@ -881,7 +909,7 @@ function findAndShiftOffsets(view, start, end, shift) {
let newLow = oldLow + shift;
let carry = 0;
if (newLow > 0xFFFFFFFF) {
if (newLow > 0xffffffff) {
carry = Math.floor(newLow / 0x100000000);
newLow = newLow >>> 0;
}

48
js/player.js
View file

@ -112,7 +112,7 @@ export class Player {
const mixBtn = document.getElementById('now-playing-mix-btn');
if (mixBtn) {
mixBtn.style.display = (track.mixes && track.mixes.TRACK_MIX) ? 'flex' : 'none';
mixBtn.style.display = track.mixes && track.mixes.TRACK_MIX ? 'flex' : 'none';
}
const totalDurationEl = document.getElementById('total-duration');
if (totalDurationEl) totalDurationEl.textContent = formatTime(track.duration);
@ -131,7 +131,7 @@ export class Player {
originalQueueBeforeShuffle: this.originalQueueBeforeShuffle,
currentQueueIndex: this.currentQueueIndex,
shuffleActive: this.shuffleActive,
repeatMode: this.repeatMode
repeatMode: this.repeatMode,
});
}
@ -207,7 +207,6 @@ export class Player {
if (this.preloadAbortController.signal.aborted) break;
this.preloadCache.set(track.id, streamUrl);
// Warm connection/cache
fetch(streamUrl, { method: 'HEAD', signal: this.preloadAbortController.signal }).catch(() => {});
} catch (error) {
@ -241,14 +240,13 @@ export class Player {
}
}
document.querySelector('.now-playing-bar .cover').src =
this.api.getCoverUrl(track.album?.cover);
document.querySelector('.now-playing-bar .cover').src = this.api.getCoverUrl(track.album?.cover);
document.querySelector('.now-playing-bar .title').textContent = trackTitle;
document.querySelector('.now-playing-bar .artist').innerHTML = trackArtistsHTML + yearDisplay;
const mixBtn = document.getElementById('now-playing-mix-btn');
if (mixBtn) {
mixBtn.style.display = (track.mixes && track.mixes.TRACK_MIX) ? 'flex' : 'none';
mixBtn.style.display = track.mixes && track.mixes.TRACK_MIX ? 'flex' : 'none';
}
document.title = `${trackTitle} • ${getTrackArtists(track)}`;
@ -263,7 +261,7 @@ export class Player {
trackReplayGain: trackData.info.trackReplayGain,
trackPeakAmplitude: trackData.info.trackPeakAmplitude,
albumReplayGain: trackData.info.albumReplayGain,
albumPeakAmplitude: trackData.info.albumPeakAmplitude
albumPeakAmplitude: trackData.info.albumPeakAmplitude,
};
} else {
this.currentRgValues = null;
@ -345,9 +343,9 @@ export class Player {
}
if (this.audio.paused) {
this.audio.play().catch(e => {
this.audio.play().catch((e) => {
if (e.name === 'NotAllowedError' || e.name === 'AbortError') return;
console.error("Play failed, reloading track:", e);
console.error('Play failed, reloading track:', e);
if (this.currentTrack) {
this.playTrackFromQueue();
}
@ -378,7 +376,7 @@ export class Player {
this.originalQueueBeforeShuffle = [...this.queue];
const currentTrack = this.queue[this.currentQueueIndex];
this.shuffledQueue = [...this.queue].sort(() => Math.random() - 0.5);
this.currentQueueIndex = this.shuffledQueue.findIndex(t => t.id === currentTrack?.id);
this.currentQueueIndex = this.shuffledQueue.findIndex((t) => t.id === currentTrack?.id);
if (this.currentQueueIndex === -1 && currentTrack) {
this.shuffledQueue.unshift(currentTrack);
@ -387,7 +385,7 @@ export class Player {
} else {
const currentTrack = this.shuffledQueue[this.currentQueueIndex];
this.queue = [...this.originalQueueBeforeShuffle];
this.currentQueueIndex = this.queue.findIndex(t => t.id === currentTrack?.id);
this.currentQueueIndex = this.queue.findIndex((t) => t.id === currentTrack?.id);
}
this.preloadCache.clear();
@ -457,7 +455,7 @@ export class Player {
if (this.shuffleActive) {
// Also remove from original queue
const originalIndex = this.originalQueueBeforeShuffle.findIndex(t => t.id === removedTrack.id); // Simple ID check
const originalIndex = this.originalQueueBeforeShuffle.findIndex((t) => t.id === removedTrack.id); // Simple ID check
if (originalIndex !== -1) {
this.originalQueueBeforeShuffle.splice(originalIndex, 1);
}
@ -472,6 +470,7 @@ export class Player {
this.shuffledQueue = [];
this.originalQueueBeforeShuffle = [];
this.currentQueueIndex = -1;
this.preloadCache.clear();
this.saveQueueState();
}
@ -513,13 +512,11 @@ export class Player {
updatePlayingTrackIndicator() {
const currentTrack = this.getCurrentQueue()[this.currentQueueIndex];
document.querySelectorAll('.track-item').forEach(item => {
item.classList.toggle('playing',
currentTrack && item.dataset.trackId == currentTrack.id
);
document.querySelectorAll('.track-item').forEach((item) => {
item.classList.toggle('playing', currentTrack && item.dataset.trackId == currentTrack.id);
});
document.querySelectorAll('.queue-track-item').forEach(item => {
document.querySelectorAll('.queue-track-item').forEach((item) => {
const index = parseInt(item.dataset.queueIndex);
item.classList.toggle('playing', index === this.currentQueueIndex);
});
@ -537,11 +534,11 @@ export class Player {
const trackTitle = getTrackTitle(track);
if (coverId) {
sizes.forEach(size => {
sizes.forEach((size) => {
artwork.push({
src: this.api.getCoverUrl(coverId, size),
sizes: `${size}x${size}`,
type: 'image/jpeg'
type: 'image/jpeg',
});
});
}
@ -550,7 +547,7 @@ export class Player {
title: trackTitle || 'Unknown Title',
artist: getTrackArtists(track) || 'Unknown Artist',
album: track.album?.title || 'Unknown Album',
artwork: artwork.length > 0 ? artwork : undefined
artwork: artwork.length > 0 ? artwork : undefined,
});
this.updateMediaSessionPlaybackState();
@ -576,7 +573,7 @@ export class Player {
navigator.mediaSession.setPositionState({
duration: duration,
playbackRate: this.audio.playbackRate || 1,
position: Math.min(this.audio.currentTime, duration)
position: Math.min(this.audio.currentTime, duration),
});
} catch (error) {
console.debug('Failed to update Media Session position:', error);
@ -587,13 +584,16 @@ export class Player {
setSleepTimer(minutes) {
this.clearSleepTimer(); // Clear any existing timer
this.sleepTimerEndTime = Date.now() + (minutes * 60 * 1000);
this.sleepTimerEndTime = Date.now() + minutes * 60 * 1000;
this.sleepTimer = setTimeout(() => {
this.sleepTimer = setTimeout(
() => {
this.audio.pause();
this.clearSleepTimer();
this.updateSleepTimerUI();
}, minutes * 60 * 1000);
},
minutes * 60 * 1000
);
// Update UI every second
this.sleepTimerInterval = setInterval(() => {

2
js/router.js
View file

@ -3,7 +3,7 @@ import { getTrackArtists } from './utils.js';
export function createRouter(ui) {
const router = () => {
const path = window.location.hash.substring(1) || "home";
const path = window.location.hash.substring(1) || 'home';
const [page, param] = path.split('/');
switch (page) {

381
js/settings.js
View file

@ -9,12 +9,13 @@ import {
cardSettings,
waveformSettings,
replayGainSettings,
smoothScrollingSettings
} from "./storage.js";
import { db } from "./db.js";
import { authManager } from "./firebase/auth.js";
import { syncManager } from "./firebase/sync.js";
import { initializeFirebaseSettingsUI } from "./firebase/config.js";
smoothScrollingSettings,
downloadQualitySettings,
} from './storage.js';
import { db } from './db.js';
import { authManager } from './firebase/auth.js';
import { syncManager } from './firebase/sync.js';
import { initializeFirebaseSettingsUI } from './firebase/config.js';
export function initializeSettings(scrobbler, player, api, ui) {
// Initialize Firebase UI & Settings
@ -22,45 +23,43 @@ export function initializeSettings(scrobbler, player, api, ui) {
initializeFirebaseSettingsUI();
// Email Auth UI Logic
const toggleEmailBtn = document.getElementById("toggle-email-auth-btn");
const cancelEmailBtn = document.getElementById("cancel-email-auth-btn");
const authContainer = document.getElementById("email-auth-container");
const authButtonsContainer = document.getElementById(
"auth-buttons-container",
);
const emailInput = document.getElementById("auth-email");
const passwordInput = document.getElementById("auth-password");
const signInBtn = document.getElementById("email-signin-btn");
const signUpBtn = document.getElementById("email-signup-btn");
const toggleEmailBtn = document.getElementById('toggle-email-auth-btn');
const cancelEmailBtn = document.getElementById('cancel-email-auth-btn');
const authContainer = document.getElementById('email-auth-container');
const authButtonsContainer = document.getElementById('auth-buttons-container');
const emailInput = document.getElementById('auth-email');
const passwordInput = document.getElementById('auth-password');
const signInBtn = document.getElementById('email-signin-btn');
const signUpBtn = document.getElementById('email-signup-btn');
if (toggleEmailBtn && authContainer && authButtonsContainer) {
toggleEmailBtn.addEventListener("click", () => {
authContainer.style.display = "flex";
authButtonsContainer.style.display = "none";
toggleEmailBtn.addEventListener('click', () => {
authContainer.style.display = 'flex';
authButtonsContainer.style.display = 'none';
});
}
if (cancelEmailBtn && authContainer && authButtonsContainer) {
cancelEmailBtn.addEventListener("click", () => {
authContainer.style.display = "none";
authButtonsContainer.style.display = "flex";
cancelEmailBtn.addEventListener('click', () => {
authContainer.style.display = 'none';
authButtonsContainer.style.display = 'flex';
});
}
if (signInBtn) {
signInBtn.addEventListener("click", async () => {
signInBtn.addEventListener('click', async () => {
const email = emailInput.value;
const password = passwordInput.value;
if (!email || !password) {
alert("Please enter both email and password.");
alert('Please enter both email and password.');
return;
}
try {
await authManager.signInWithEmail(email, password);
authContainer.style.display = "none";
authButtonsContainer.style.display = "flex";
emailInput.value = "";
passwordInput.value = "";
authContainer.style.display = 'none';
authButtonsContainer.style.display = 'flex';
emailInput.value = '';
passwordInput.value = '';
} catch (e) {
// Error handled in authManager
}
@ -68,65 +67,64 @@ export function initializeSettings(scrobbler, player, api, ui) {
}
if (signUpBtn) {
signUpBtn.addEventListener("click", async () => {
signUpBtn.addEventListener('click', async () => {
const email = emailInput.value;
const password = passwordInput.value;
if (!email || !password) {
alert("Please enter both email and password.");
alert('Please enter both email and password.');
return;
}
try {
await authManager.signUpWithEmail(email, password);
authContainer.style.display = "none";
authButtonsContainer.style.display = "flex";
emailInput.value = "";
passwordInput.value = "";
authContainer.style.display = 'none';
authButtonsContainer.style.display = 'flex';
emailInput.value = '';
passwordInput.value = '';
} catch (e) {
// Error handled in authManager
}
});
}
const lastfmConnectBtn = document.getElementById("lastfm-connect-btn");
const lastfmStatus = document.getElementById("lastfm-status");
const lastfmToggle = document.getElementById("lastfm-toggle");
const lastfmToggleSetting = document.getElementById("lastfm-toggle-setting");
const lastfmLoveToggle = document.getElementById("lastfm-love-toggle");
const lastfmLoveSetting = document.getElementById("lastfm-love-setting");
const lastfmConnectBtn = document.getElementById('lastfm-connect-btn');
const lastfmStatus = document.getElementById('lastfm-status');
const lastfmToggle = document.getElementById('lastfm-toggle');
const lastfmToggleSetting = document.getElementById('lastfm-toggle-setting');
const lastfmLoveToggle = document.getElementById('lastfm-love-toggle');
const lastfmLoveSetting = document.getElementById('lastfm-love-setting');
function updateLastFMUI() {
if (scrobbler.isAuthenticated()) {
lastfmStatus.textContent = `Connected as ${scrobbler.username}`;
lastfmConnectBtn.textContent = "Disconnect";
lastfmConnectBtn.classList.add("danger");
lastfmToggleSetting.style.display = "flex";
lastfmLoveSetting.style.display = "flex";
lastfmConnectBtn.textContent = 'Disconnect';
lastfmConnectBtn.classList.add('danger');
lastfmToggleSetting.style.display = 'flex';
lastfmLoveSetting.style.display = 'flex';
lastfmToggle.checked = lastFMStorage.isEnabled();
lastfmLoveToggle.checked = lastFMStorage.shouldLoveOnLike();
} else {
lastfmStatus.textContent =
"Connect your Last.fm account to scrobble tracks";
lastfmConnectBtn.textContent = "Connect Last.fm";
lastfmConnectBtn.classList.remove("danger");
lastfmToggleSetting.style.display = "none";
lastfmLoveSetting.style.display = "none";
lastfmStatus.textContent = 'Connect your Last.fm account to scrobble tracks';
lastfmConnectBtn.textContent = 'Connect Last.fm';
lastfmConnectBtn.classList.remove('danger');
lastfmToggleSetting.style.display = 'none';
lastfmLoveSetting.style.display = 'none';
}
}
updateLastFMUI();
lastfmConnectBtn?.addEventListener("click", async () => {
lastfmConnectBtn?.addEventListener('click', async () => {
if (scrobbler.isAuthenticated()) {
if (confirm("Disconnect from Last.fm?")) {
if (confirm('Disconnect from Last.fm?')) {
scrobbler.disconnect();
updateLastFMUI();
}
return;
}
const authWindow = window.open("", "_blank");
const authWindow = window.open('', '_blank');
lastfmConnectBtn.disabled = true;
lastfmConnectBtn.textContent = "Opening Last.fm...";
lastfmConnectBtn.textContent = 'Opening Last.fm...';
try {
const { token, url } = await scrobbler.getAuthUrl();
@ -134,13 +132,13 @@ export function initializeSettings(scrobbler, player, api, ui) {
if (authWindow) {
authWindow.location.href = url;
} else {
alert("Popup blocked! Please allow popups.");
lastfmConnectBtn.textContent = "Connect Last.fm";
alert('Popup blocked! Please allow popups.');
lastfmConnectBtn.textContent = 'Connect Last.fm';
lastfmConnectBtn.disabled = false;
return;
}
lastfmConnectBtn.textContent = "Waiting for authorization...";
lastfmConnectBtn.textContent = 'Waiting for authorization...';
let attempts = 0;
const maxAttempts = 30;
@ -150,10 +148,10 @@ export function initializeSettings(scrobbler, player, api, ui) {
if (attempts > maxAttempts) {
clearInterval(checkAuth);
lastfmConnectBtn.textContent = "Connect Last.fm";
lastfmConnectBtn.textContent = 'Connect Last.fm';
lastfmConnectBtn.disabled = false;
if (authWindow && !authWindow.closed) authWindow.close();
alert("Authorization timed out. Please try again.");
alert('Authorization timed out. Please try again.');
return;
}
@ -174,60 +172,58 @@ export function initializeSettings(scrobbler, player, api, ui) {
}
}, 2000);
} catch (error) {
console.error("Last.fm connection failed:", error);
alert("Failed to connect to Last.fm: " + error.message);
lastfmConnectBtn.textContent = "Connect Last.fm";
console.error('Last.fm connection failed:', error);
alert('Failed to connect to Last.fm: ' + error.message);
lastfmConnectBtn.textContent = 'Connect Last.fm';
lastfmConnectBtn.disabled = false;
if (authWindow && !authWindow.closed) authWindow.close();
}
});
lastfmToggle?.addEventListener("change", (e) => {
lastfmToggle?.addEventListener('change', (e) => {
lastFMStorage.setEnabled(e.target.checked);
});
lastfmLoveToggle?.addEventListener("change", (e) => {
lastfmLoveToggle?.addEventListener('change', (e) => {
lastFMStorage.setLoveOnLike(e.target.checked);
});
// Theme picker
const themePicker = document.getElementById("theme-picker");
const themePicker = document.getElementById('theme-picker');
const currentTheme = themeManager.getTheme();
themePicker.querySelectorAll(".theme-option").forEach((option) => {
themePicker.querySelectorAll('.theme-option').forEach((option) => {
if (option.dataset.theme === currentTheme) {
option.classList.add("active");
option.classList.add('active');
}
option.addEventListener("click", () => {
option.addEventListener('click', () => {
const theme = option.dataset.theme;
themePicker
.querySelectorAll(".theme-option")
.forEach((opt) => opt.classList.remove("active"));
option.classList.add("active");
themePicker.querySelectorAll('.theme-option').forEach((opt) => opt.classList.remove('active'));
option.classList.add('active');
if (theme === "custom") {
document.getElementById("custom-theme-editor").classList.add("show");
if (theme === 'custom') {
document.getElementById('custom-theme-editor').classList.add('show');
renderCustomThemeEditor();
themeManager.setTheme('custom');
} else {
document.getElementById("custom-theme-editor").classList.remove("show");
document.getElementById('custom-theme-editor').classList.remove('show');
themeManager.setTheme(theme);
}
});
});
function renderCustomThemeEditor() {
const grid = document.getElementById("theme-color-grid");
const grid = document.getElementById('theme-color-grid');
const customTheme = themeManager.getCustomTheme() || {
background: "#000000",
foreground: "#fafafa",
primary: "#ffffff",
secondary: "#27272a",
muted: "#27272a",
border: "#27272a",
highlight: "#ffffff",
background: '#000000',
foreground: '#fafafa',
primary: '#ffffff',
secondary: '#27272a',
muted: '#27272a',
border: '#27272a',
highlight: '#ffffff',
};
grid.innerHTML = Object.entries(customTheme)
@ -237,199 +233,187 @@ export function initializeSettings(scrobbler, player, api, ui) {
<label>${key}</label>
<input type="color" data-color="${key}" value="${value}">
</div>
`,
`
)
.join("");
.join('');
}
document
.getElementById("apply-custom-theme")
?.addEventListener("click", () => {
document.getElementById('apply-custom-theme')?.addEventListener('click', () => {
const colors = {};
document
.querySelectorAll('#theme-color-grid input[type="color"]')
.forEach((input) => {
document.querySelectorAll('#theme-color-grid input[type="color"]').forEach((input) => {
colors[input.dataset.color] = input.value;
});
themeManager.setCustomTheme(colors);
});
document
.getElementById("reset-custom-theme")
?.addEventListener("click", () => {
document.getElementById('reset-custom-theme')?.addEventListener('click', () => {
renderCustomThemeEditor();
});
// Quality setting
const qualitySetting = document.getElementById("quality-setting");
if (qualitySetting) {
const savedQuality = localStorage.getItem("playback-quality") || "LOSSLESS";
qualitySetting.value = savedQuality;
// Streaming Quality setting
const streamingQualitySetting = document.getElementById('streaming-quality-setting');
if (streamingQualitySetting) {
const savedQuality = localStorage.getItem('playback-quality') || 'LOSSLESS';
streamingQualitySetting.value = savedQuality;
player.setQuality(savedQuality);
qualitySetting.addEventListener("change", (e) => {
streamingQualitySetting.addEventListener('change', (e) => {
const newQuality = e.target.value;
player.setQuality(newQuality);
localStorage.setItem("playback-quality", newQuality);
localStorage.setItem('playback-quality', newQuality);
});
}
// Download Quality setting
const downloadQualitySetting = document.getElementById('download-quality-setting');
if (downloadQualitySetting) {
downloadQualitySetting.value = downloadQualitySettings.getQuality();
downloadQualitySetting.addEventListener('change', (e) => {
downloadQualitySettings.setQuality(e.target.value);
});
}
// ReplayGain Settings
const replayGainMode = document.getElementById("replay-gain-mode");
const replayGainMode = document.getElementById('replay-gain-mode');
if (replayGainMode) {
replayGainMode.value = replayGainSettings.getMode();
replayGainMode.addEventListener("change", (e) => {
replayGainMode.addEventListener('change', (e) => {
replayGainSettings.setMode(e.target.value);
player.applyReplayGain();
});
}
const replayGainPreamp = document.getElementById("replay-gain-preamp");
const replayGainPreamp = document.getElementById('replay-gain-preamp');
if (replayGainPreamp) {
replayGainPreamp.value = replayGainSettings.getPreamp();
replayGainPreamp.addEventListener("change", (e) => {
replayGainPreamp.addEventListener('change', (e) => {
replayGainSettings.setPreamp(parseFloat(e.target.value) || 3);
player.applyReplayGain();
});
}
// Now Playing Mode
const nowPlayingMode = document.getElementById("now-playing-mode");
const nowPlayingMode = document.getElementById('now-playing-mode');
if (nowPlayingMode) {
nowPlayingMode.value = nowPlayingSettings.getMode();
nowPlayingMode.addEventListener("change", (e) => {
nowPlayingMode.addEventListener('change', (e) => {
nowPlayingSettings.setMode(e.target.value);
});
}
// Track List Actions Mode
const trackListActionsMode = document.getElementById(
"track-list-actions-mode",
);
const trackListActionsMode = document.getElementById('track-list-actions-mode');
if (trackListActionsMode) {
trackListActionsMode.value = trackListSettings.getMode();
trackListActionsMode.addEventListener("change", (e) => {
trackListActionsMode.addEventListener('change', (e) => {
trackListSettings.setMode(e.target.value);
});
}
// Compact Artist Toggle
const compactArtistToggle = document.getElementById("compact-artist-toggle");
const compactArtistToggle = document.getElementById('compact-artist-toggle');
if (compactArtistToggle) {
compactArtistToggle.checked = cardSettings.isCompactArtist();
compactArtistToggle.addEventListener("change", (e) => {
compactArtistToggle.addEventListener('change', (e) => {
cardSettings.setCompactArtist(e.target.checked);
});
}
// Compact Album Toggle
const compactAlbumToggle = document.getElementById("compact-album-toggle");
const compactAlbumToggle = document.getElementById('compact-album-toggle');
if (compactAlbumToggle) {
compactAlbumToggle.checked = cardSettings.isCompactAlbum();
compactAlbumToggle.addEventListener("change", (e) => {
compactAlbumToggle.addEventListener('change', (e) => {
cardSettings.setCompactAlbum(e.target.checked);
});
}
// Download Lyrics Toggle
const downloadLyricsToggle = document.getElementById(
"download-lyrics-toggle",
);
const downloadLyricsToggle = document.getElementById('download-lyrics-toggle');
if (downloadLyricsToggle) {
downloadLyricsToggle.checked = lyricsSettings.shouldDownloadLyrics();
downloadLyricsToggle.addEventListener("change", (e) => {
downloadLyricsToggle.addEventListener('change', (e) => {
lyricsSettings.setDownloadLyrics(e.target.checked);
});
}
// Romaji Lyrics Toggle
const romajiLyricsToggle = document.getElementById("romaji-lyrics-toggle");
const romajiLyricsToggle = document.getElementById('romaji-lyrics-toggle');
if (romajiLyricsToggle) {
romajiLyricsToggle.checked =
localStorage.getItem("lyricsRomajiMode") === "true";
romajiLyricsToggle.addEventListener("change", (e) => {
localStorage.setItem(
"lyricsRomajiMode",
e.target.checked ? "true" : "false",
);
romajiLyricsToggle.checked = localStorage.getItem('lyricsRomajiMode') === 'true';
romajiLyricsToggle.addEventListener('change', (e) => {
localStorage.setItem('lyricsRomajiMode', e.target.checked ? 'true' : 'false');
});
}
// Album Background Toggle
const albumBackgroundToggle = document.getElementById(
"album-background-toggle",
);
const albumBackgroundToggle = document.getElementById('album-background-toggle');
if (albumBackgroundToggle) {
albumBackgroundToggle.checked = backgroundSettings.isEnabled();
albumBackgroundToggle.addEventListener("change", (e) => {
albumBackgroundToggle.addEventListener('change', (e) => {
backgroundSettings.setEnabled(e.target.checked);
});
}
// Waveform Toggle
const waveformToggle = document.getElementById("waveform-toggle");
const waveformToggle = document.getElementById('waveform-toggle');
if (waveformToggle) {
waveformToggle.checked = waveformSettings.isEnabled();
waveformToggle.addEventListener("change", (e) => {
waveformToggle.addEventListener('change', (e) => {
waveformSettings.setEnabled(e.target.checked);
window.dispatchEvent(new CustomEvent("waveform-toggle", { detail: { enabled: e.target.checked } }));
window.dispatchEvent(new CustomEvent('waveform-toggle', { detail: { enabled: e.target.checked } }));
});
}
// Smooth Scrolling Toggle
const smoothScrollingToggle = document.getElementById("smooth-scrolling-toggle");
const smoothScrollingToggle = document.getElementById('smooth-scrolling-toggle');
if (smoothScrollingToggle) {
smoothScrollingToggle.checked = smoothScrollingSettings.isEnabled();
smoothScrollingToggle.addEventListener("change", (e) => {
smoothScrollingToggle.addEventListener('change', (e) => {
smoothScrollingSettings.setEnabled(e.target.checked);
window.dispatchEvent(new CustomEvent("smooth-scrolling-toggle", { detail: { enabled: e.target.checked } }));
window.dispatchEvent(new CustomEvent('smooth-scrolling-toggle', { detail: { enabled: e.target.checked } }));
});
}
// Filename template setting
const filenameTemplate = document.getElementById("filename-template");
const filenameTemplate = document.getElementById('filename-template');
if (filenameTemplate) {
filenameTemplate.value =
localStorage.getItem("filename-template") ||
"{trackNumber} - {artist} - {title}";
filenameTemplate.addEventListener("change", (e) => {
localStorage.setItem("filename-template", e.target.value);
filenameTemplate.value = localStorage.getItem('filename-template') || '{trackNumber} - {artist} - {title}';
filenameTemplate.addEventListener('change', (e) => {
localStorage.setItem('filename-template', e.target.value);
});
}
// ZIP folder template
const zipFolderTemplate = document.getElementById("zip-folder-template");
const zipFolderTemplate = document.getElementById('zip-folder-template');
if (zipFolderTemplate) {
zipFolderTemplate.value =
localStorage.getItem("zip-folder-template") ||
"{albumTitle} - {albumArtist}";
zipFolderTemplate.addEventListener("change", (e) => {
localStorage.setItem("zip-folder-template", e.target.value);
zipFolderTemplate.value = localStorage.getItem('zip-folder-template') || '{albumTitle} - {albumArtist}';
zipFolderTemplate.addEventListener('change', (e) => {
localStorage.setItem('zip-folder-template', e.target.value);
});
}
// API settings
document
.getElementById("refresh-speed-test-btn")
?.addEventListener("click", async () => {
const btn = document.getElementById("refresh-speed-test-btn");
document.getElementById('refresh-speed-test-btn')?.addEventListener('click', async () => {
const btn = document.getElementById('refresh-speed-test-btn');
const originalText = btn.textContent;
btn.textContent = "Testing...";
btn.textContent = 'Testing...';
btn.disabled = true;
try {
await api.settings.refreshSpeedTests();
ui.renderApiSettings();
btn.textContent = "Done!";
btn.textContent = 'Done!';
setTimeout(() => {
btn.textContent = originalText;
btn.disabled = false;
}, 1500);
} catch (error) {
console.error("Failed to refresh speed tests:", error);
btn.textContent = "Error";
console.error('Failed to refresh speed tests:', error);
btn.textContent = 'Error';
setTimeout(() => {
btn.textContent = originalText;
btn.disabled = false;
@ -437,58 +421,45 @@ export function initializeSettings(scrobbler, player, api, ui) {
}
});
document
.getElementById("api-instance-list")
?.addEventListener("click", async (e) => {
const button = e.target.closest("button");
document.getElementById('api-instance-list')?.addEventListener('click', async (e) => {
const button = e.target.closest('button');
if (!button) return;
const li = button.closest("li");
const li = button.closest('li');
const index = parseInt(li.dataset.index, 10);
const type = li.dataset.type || "api"; // Default to api if not present
const type = li.dataset.type || 'api'; // Default to api if not present
const instances = await api.settings.getInstances(type);
if (button.classList.contains("move-up") && index > 0) {
[instances[index], instances[index - 1]] = [
instances[index - 1],
instances[index],
];
} else if (
button.classList.contains("move-down") &&
index < instances.length - 1
) {
[instances[index], instances[index + 1]] = [
instances[index + 1],
instances[index],
];
if (button.classList.contains('move-up') && index > 0) {
[instances[index], instances[index - 1]] = [instances[index - 1], instances[index]];
} else if (button.classList.contains('move-down') && index < instances.length - 1) {
[instances[index], instances[index + 1]] = [instances[index + 1], instances[index]];
}
api.settings.saveInstances(instances, type);
ui.renderApiSettings();
});
document
.getElementById("clear-cache-btn")
?.addEventListener("click", async () => {
const btn = document.getElementById("clear-cache-btn");
document.getElementById('clear-cache-btn')?.addEventListener('click', async () => {
const btn = document.getElementById('clear-cache-btn');
const originalText = btn.textContent;
btn.textContent = "Clearing...";
btn.textContent = 'Clearing...';
btn.disabled = true;
try {
await api.clearCache();
btn.textContent = "Cleared!";
btn.textContent = 'Cleared!';
setTimeout(() => {
btn.textContent = originalText;
btn.disabled = false;
if (window.location.hash.includes("settings")) {
if (window.location.hash.includes('settings')) {
ui.renderApiSettings();
}
}, 1500);
} catch (error) {
console.error("Failed to clear cache:", error);
btn.textContent = "Error";
console.error('Failed to clear cache:', error);
btn.textContent = 'Error';
setTimeout(() => {
btn.textContent = originalText;
btn.disabled = false;
@ -496,49 +467,39 @@ export function initializeSettings(scrobbler, player, api, ui) {
}
});
document
.getElementById("firebase-clear-cloud-btn")
?.addEventListener("click", async () => {
if (
confirm(
"Are you sure you want to delete ALL your data from the cloud? This cannot be undone.",
)
) {
document.getElementById('firebase-clear-cloud-btn')?.addEventListener('click', async () => {
if (confirm('Are you sure you want to delete ALL your data from the cloud? This cannot be undone.')) {
try {
await syncManager.clearCloudData();
alert("Cloud data cleared successfully.");
alert('Cloud data cleared successfully.');
authManager.signOut();
} catch (error) {
console.error("Failed to clear cloud data:", error);
alert("Failed to clear cloud data: " + error.message);
console.error('Failed to clear cloud data:', error);
alert('Failed to clear cloud data: ' + error.message);
}
}
});
// Backup & Restore
document
.getElementById("export-library-btn")
?.addEventListener("click", async () => {
document.getElementById('export-library-btn')?.addEventListener('click', async () => {
const data = await db.exportData();
const blob = new Blob([JSON.stringify(data, null, 2)], {
type: "application/json",
type: 'application/json',
});
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
const a = document.createElement('a');
a.href = url;
a.download = `monochrome-library-${new Date().toISOString().split("T")[0]}.json`;
a.download = `monochrome-library-${new Date().toISOString().split('T')[0]}.json`;
a.click();
URL.revokeObjectURL(url);
});
const importInput = document.getElementById("import-library-input");
document
.getElementById("import-library-btn")
?.addEventListener("click", () => {
const importInput = document.getElementById('import-library-input');
document.getElementById('import-library-btn')?.addEventListener('click', () => {
importInput.click();
});
importInput?.addEventListener("change", async (e) => {
importInput?.addEventListener('change', async (e) => {
const file = e.target.files[0];
if (!file) return;
@ -547,11 +508,11 @@ export function initializeSettings(scrobbler, player, api, ui) {
try {
const data = JSON.parse(event.target.result);
await db.importData(data);
alert("Library imported successfully!");
alert('Library imported successfully!');
window.location.reload(); // Simple way to refresh all state
} catch (err) {
console.error("Import failed:", err);
alert("Failed to import library. Please check the file format.");
console.error('Import failed:', err);
alert('Failed to import library. Please check the file format.');
}
};
reader.readAsText(file);

2
js/smooth-scrolling.js
View file

@ -1,5 +1,5 @@
//js/smooth-scrolling.js
import { smoothScrollingSettings } from "./storage.js";
import { smoothScrollingSettings } from './storage.js';
let lenis = null;

100
js/storage.js
View file

@ -1,7 +1,7 @@
//storage.js
export const apiSettings = {
STORAGE_KEY: 'monochrome-api-instances-v2',
INSTANCES_URL: "instances.json",
INSTANCES_URL: 'instances.json',
SPEED_TEST_CACHE_KEY: 'monochrome-instance-speeds',
SPEED_TEST_CACHE_DURATION: 1000 * 60 * 60,
defaultInstances: { api: [], streaming: [] },
@ -53,20 +53,17 @@ export const apiSettings = {
} catch (error) {
console.error('Failed to load instances from GitHub:', error);
this.defaultInstances = {
api: [
"https://tidal-api.binimum.org",
"https://monochrome-api.samidy.com"
],
api: ['https://tidal-api.binimum.org', 'https://monochrome-api.samidy.com'],
streaming: [
"https://triton.squid.wtf",
"https://wolf.qqdl.site",
"https://maus.qqdl.site",
"https://vogel.qqdl.site",
"https://katze.qqdl.site",
"https://hund.qqdl.site",
"https://tidal.kinoplus.online",
"https://tidal-api.binimum.org"
]
'https://triton.squid.wtf',
'https://wolf.qqdl.site',
'https://maus.qqdl.site',
'https://vogel.qqdl.site',
'https://katze.qqdl.site',
'https://hund.qqdl.site',
'https://tidal.kinoplus.online',
'https://tidal-api.binimum.org',
],
};
this.instancesLoaded = true;
return this.defaultInstances;
@ -95,7 +92,7 @@ export const apiSettings = {
const response = await fetch(testUrl, {
signal: controller.signal,
cache: 'no-store'
cache: 'no-store',
});
clearTimeout(timeout);
@ -133,7 +130,7 @@ export const apiSettings = {
updateSpeedCache(newResults) {
const currentCache = this.getCachedSpeedTests();
newResults.forEach(r => {
newResults.forEach((r) => {
// Use distinct keys for streaming tests to avoid overwriting API tests for same URL
// API tests use raw URL as key (for backward compatibility with UI)
const key = r.type === 'streaming' ? `${r.url}#streaming` : r.url;
@ -155,12 +152,13 @@ export const apiSettings = {
if (!urls || urls.length === 0) return [];
console.log(`[SpeedTest] Testing ${urls.length} instances for ${type}...`);
const results = await Promise.all(
urls.map(url => this.speedTestInstance(url, type))
);
const results = await Promise.all(urls.map((url) => this.speedTestInstance(url, type)));
const validResults = results.filter(r => r.speed !== Infinity);
console.log(`[SpeedTest] ${type} Results:`, validResults.map(r => `${r.url}: ${r.speed.toFixed(0)}ms`));
const validResults = results.filter((r) => r.speed !== Infinity);
console.log(
`[SpeedTest] ${type} Results:`,
validResults.map((r) => `${r.url}: ${r.speed.toFixed(0)}ms`)
);
return results;
},
@ -168,12 +166,10 @@ export const apiSettings = {
async getInstances(type = 'api') {
let instancesObj;
try {
const stored = localStorage.getItem(this.STORAGE_KEY);
if (stored) {
instancesObj = JSON.parse(stored);
}
} catch (e) {}
if (!instancesObj) {
instancesObj = await this.loadInstancesFromGitHub();
@ -184,9 +180,9 @@ export const apiSettings = {
const speedCache = this.getCachedSpeedTests();
// Construct cache key based on type
const getCacheKey = (u) => type === 'streaming' ? `${u}#streaming` : u;
const getCacheKey = (u) => (type === 'streaming' ? `${u}#streaming` : u);
const urlsToTest = targetUrls.filter(url => !speedCache.speeds[getCacheKey(url)]);
const urlsToTest = targetUrls.filter((url) => !speedCache.speeds[getCacheKey(url)]);
if (urlsToTest.length > 0) {
const results = await this.testSpecificUrls(urlsToTest, type);
@ -239,12 +235,13 @@ export const apiSettings = {
fullObj[type] = instances;
localStorage.setItem(this.STORAGE_KEY, JSON.stringify(fullObj));
} catch (e) {
console.error("Failed to save instances:", e);
console.error('Failed to save instances:', e);
}
} else {
localStorage.setItem(this.STORAGE_KEY, JSON.stringify(instances));
}
} };
},
};
export const recentActivityManager = {
STORAGE_KEY: 'monochrome-recent-activity',
LIMIT: 10,
@ -271,7 +268,7 @@ export const recentActivityManager = {
_add(type, item) {
const data = this._get();
data[type] = data[type].filter(i => i.id !== item.id);
data[type] = data[type].filter((i) => i.id !== item.id);
data[type].unshift(item);
data[type] = data[type].slice(0, this.LIMIT);
this._save(data);
@ -291,7 +288,7 @@ export const recentActivityManager = {
addMix(mix) {
this._add('mixes', mix);
}
},
};
export const themeManager = {
@ -308,7 +305,7 @@ export const themeManager = {
mocha: {},
machiatto: {},
frappe: {},
latte: {}
latte: {},
},
getTheme() {
@ -329,10 +326,9 @@ export const themeManager = {
document.documentElement.setAttribute('data-theme', theme);
}
if (theme !== 'custom') {
const root = document.documentElement;
['background', 'foreground', 'primary', 'secondary', 'muted', 'border', 'highlight'].forEach(key => {
['background', 'foreground', 'primary', 'secondary', 'muted', 'border', 'highlight'].forEach((key) => {
root.style.removeProperty(`--${key}`);
});
} else {
@ -363,7 +359,7 @@ export const themeManager = {
for (const [key, value] of Object.entries(colors)) {
root.style.setProperty(`--${key}`, value);
}
}
},
};
export const lastFMStorage = {
@ -392,7 +388,7 @@ export const lastFMStorage = {
setLoveOnLike(enabled) {
localStorage.setItem(this.LOVE_ON_LIKE_KEY, enabled ? 'true' : 'false');
}
},
};
export const nowPlayingSettings = {
@ -408,7 +404,7 @@ export const nowPlayingSettings = {
setMode(mode) {
localStorage.setItem(this.STORAGE_KEY, mode);
}
},
};
export const lyricsSettings = {
@ -424,7 +420,7 @@ export const lyricsSettings = {
setDownloadLyrics(enabled) {
localStorage.setItem(this.DOWNLOAD_WITH_TRACKS, enabled ? 'true' : 'false');
}
},
};
export const backgroundSettings = {
@ -441,7 +437,7 @@ export const backgroundSettings = {
setEnabled(enabled) {
localStorage.setItem(this.STORAGE_KEY, enabled ? 'true' : 'false');
}
},
};
export const trackListSettings = {
@ -460,7 +456,7 @@ export const trackListSettings = {
setMode(mode) {
localStorage.setItem(this.STORAGE_KEY, mode);
document.documentElement.setAttribute('data-track-actions-mode', mode);
}
},
};
export const cardSettings = {
@ -490,7 +486,7 @@ export const cardSettings = {
setCompactAlbum(enabled) {
localStorage.setItem(this.COMPACT_ALBUM_KEY, enabled ? 'true' : 'false');
}
},
};
export const replayGainSettings = {
@ -508,7 +504,21 @@ export const replayGainSettings = {
},
setPreamp(db) {
localStorage.setItem(this.STORAGE_KEY_PREAMP, db);
},
};
export const downloadQualitySettings = {
STORAGE_KEY: 'download-quality',
getQuality() {
try {
return localStorage.getItem(this.STORAGE_KEY) || 'LOSSLESS';
} catch (e) {
return 'LOSSLESS';
}
},
setQuality(quality) {
localStorage.setItem(this.STORAGE_KEY, quality);
},
};
export const waveformSettings = {
@ -524,7 +534,7 @@ export const waveformSettings = {
setEnabled(enabled) {
localStorage.setItem(this.STORAGE_KEY, enabled ? 'true' : 'false');
}
},
};
export const smoothScrollingSettings = {
@ -540,7 +550,7 @@ export const smoothScrollingSettings = {
setEnabled(enabled) {
localStorage.setItem(this.STORAGE_KEY, enabled ? 'true' : 'false');
}
},
};
export const queueManager = {
@ -564,20 +574,18 @@ export const queueManager = {
originalQueueBeforeShuffle: queueState.originalQueueBeforeShuffle,
currentQueueIndex: queueState.currentQueueIndex,
shuffleActive: queueState.shuffleActive,
repeatMode: queueState.repeatMode
repeatMode: queueState.repeatMode,
};
localStorage.setItem(this.STORAGE_KEY, JSON.stringify(minimalState));
} catch (e) {
console.warn('Failed to save queue to localStorage:', e);
}
}
},
};
// System theme listener
if (typeof window !== 'undefined' && window.matchMedia) {
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
if (themeManager.getTheme() === 'system') {
document.documentElement.setAttribute('data-theme', e.matches ? 'dark' : 'light');
}

165
js/ui-interactions.js
View file

@ -1,5 +1,15 @@
//js/ui-interactions.js
import { SVG_CLOSE, SVG_BIN, SVG_HEART, formatTime, trackDataStore, getTrackTitle, getTrackArtists, escapeHtml } from './utils.js';
import {
SVG_CLOSE,
SVG_BIN,
SVG_HEART,
SVG_DOWNLOAD,
formatTime,
trackDataStore,
getTrackTitle,
getTrackArtists,
escapeHtml,
} from './utils.js';
import { sidePanelManager } from './side-panel.js';
export function initializeUIInteractions(player, api) {
@ -23,7 +33,7 @@ export function initializeUIInteractions(player, api) {
sidebarOverlay.addEventListener('click', closeSidebar);
sidebar.addEventListener('click', e => {
sidebar.addEventListener('click', (e) => {
if (e.target.closest('a')) {
closeSidebar();
}
@ -32,10 +42,22 @@ export function initializeUIInteractions(player, api) {
// Queue panel
const renderQueueControls = (container) => {
const currentQueue = player.getCurrentQueue();
const showClearBtn = currentQueue.length > 0;
const showActionBtns = currentQueue.length > 0;
container.innerHTML = `
<button id="clear-queue-btn" class="btn-icon" title="Clear Queue" style="display: ${showClearBtn ? 'flex' : 'none'}">
<button id="download-queue-btn" class="btn-icon" title="Download Queue" style="display: ${showActionBtns ? 'flex' : 'none'}">
${SVG_DOWNLOAD}
</button>
<button id="like-queue-btn" class="btn-icon" title="Add Queue to Liked" style="display: ${showActionBtns ? 'flex' : 'none'}">
${SVG_HEART}
</button>
<button id="add-queue-to-playlist-btn" class="btn-icon" title="Add Queue to Playlist" style="display: ${showActionBtns ? 'flex' : 'none'}">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
</svg>
</button>
<button id="clear-queue-btn" class="btn-icon" title="Clear Queue" style="display: ${showActionBtns ? 'flex' : 'none'}">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg>
</button>
<button id="close-side-panel-btn" class="btn-icon" title="Close">
@ -47,6 +69,113 @@ export function initializeUIInteractions(player, api) {
sidePanelManager.close();
});
const downloadBtn = container.querySelector('#download-queue-btn');
if (downloadBtn) {
downloadBtn.addEventListener('click', async () => {
const { downloadTracks } = await import('./downloads.js');
downloadTracks(currentQueue);
});
}
const likeBtn = container.querySelector('#like-queue-btn');
if (likeBtn) {
likeBtn.addEventListener('click', async () => {
const { db } = await import('./db.js');
const { syncManager } = await import('./firebase/sync.js');
const { showNotification } = await import('./downloads.js');
let addedCount = 0;
for (const track of currentQueue) {
const wasAdded = await db.toggleFavorite('track', track);
if (wasAdded) {
syncManager.syncLibraryItem('track', track, true);
addedCount++;
}
}
if (addedCount > 0) {
showNotification(`Added ${addedCount} track${addedCount > 1 ? 's' : ''} to Liked`);
} else {
showNotification('All tracks in queue are already liked');
}
refreshQueuePanel();
});
}
const addToPlaylistBtn = container.querySelector('#add-queue-to-playlist-btn');
if (addToPlaylistBtn) {
addToPlaylistBtn.addEventListener('click', async () => {
const { db } = await import('./db.js');
const { syncManager } = await import('./firebase/sync.js');
const { showNotification } = await import('./downloads.js');
const playlists = await db.getPlaylists();
if (playlists.length === 0) {
showNotification('No playlists yet. Create one first.');
return;
}
const modal = document.createElement('div');
modal.className = 'modal active';
modal.innerHTML = `
<div class="modal-overlay"></div>
<div class="modal-content">
<h3>Add Queue to Playlist</h3>
<div class="modal-list">
${playlists
.map(
(p) => `
<div class="modal-option" data-id="${p.id}">${escapeHtml(p.name)}</div>
`
)
.join('')}
</div>
<div class="modal-actions">
<button class="btn-secondary cancel-btn">Cancel</button>
</div>
</div>
`;
document.body.appendChild(modal);
const closeModal = () => {
modal.remove();
};
modal.addEventListener('click', async (e) => {
if (e.target.classList.contains('modal-overlay') || e.target.classList.contains('cancel-btn')) {
closeModal();
return;
}
const option = e.target.closest('.modal-option');
if (option) {
const playlistId = option.dataset.id;
const playlistName = option.textContent;
try {
let addedCount = 0;
for (const track of currentQueue) {
const playlist = await db.addTrackToPlaylist(playlistId, track);
addedCount++;
}
const updatedPlaylist = await db.getPlaylist(playlistId);
syncManager.syncUserPlaylist(updatedPlaylist, 'update');
showNotification(`Added ${addedCount} tracks to playlist: ${playlistName}`);
} catch (error) {
console.error('Failed to add tracks to playlist:', error);
showNotification('Failed to add tracks to playlist');
}
closeModal();
}
});
});
}
const clearBtn = container.querySelector('#clear-queue-btn');
if (clearBtn) {
clearBtn.addEventListener('click', () => {
@ -64,10 +193,11 @@ export function initializeUIInteractions(player, api) {
return;
}
const html = currentQueue.map((track, index) => {
const html = currentQueue
.map((track, index) => {
const isPlaying = index === player.currentQueueIndex;
const trackTitle = getTrackTitle(track);
const trackArtists = getTrackArtists(track, { fallback: "Unknown" });
const trackArtists = getTrackArtists(track, { fallback: 'Unknown' });
return `
<div class="queue-track-item ${isPlaying ? 'playing' : ''}" data-queue-index="${index}" data-track-id="${track.id}" draggable="true">
@ -94,7 +224,8 @@ export function initializeUIInteractions(player, api) {
</button>
</div>
`;
}).join('');
})
.join('');
container.innerHTML = html;
@ -108,7 +239,9 @@ export function initializeUIInteractions(player, api) {
const { db } = await import('./db.js');
const isLiked = await db.isFavorite('track', track.id);
likeBtn.classList.toggle('active', isLiked);
likeBtn.innerHTML = isLiked ? SVG_HEART.replace('class="heart-icon"', 'class="heart-icon filled"') : SVG_HEART;
likeBtn.innerHTML = isLiked
? SVG_HEART.replace('class="heart-icon"', 'class="heart-icon filled"')
: SVG_HEART;
}
item.addEventListener('click', async (e) => {
@ -134,9 +267,13 @@ export function initializeUIInteractions(player, api) {
// Update button state
likeBtn.classList.toggle('active', added);
likeBtn.innerHTML = added ? SVG_HEART.replace('class="heart-icon"', 'class="heart-icon filled"') : SVG_HEART;
likeBtn.innerHTML = added
? SVG_HEART.replace('class="heart-icon"', 'class="heart-icon filled"')
: SVG_HEART;
showNotification(added ? `Added to Liked: ${track.title}` : `Removed from Liked: ${track.title}`);
showNotification(
added ? `Added to Liked: ${track.title}` : `Removed from Liked: ${track.title}`
);
}
return;
}
@ -164,7 +301,6 @@ export function initializeUIInteractions(player, api) {
trackMixItem.style.display = hasMix ? 'block' : 'none';
}
const rect = item.getBoundingClientRect();
const menuWidth = 150;
const menuHeight = 200;
@ -183,7 +319,6 @@ export function initializeUIInteractions(player, api) {
contextMenu.style.top = `${top}px`;
contextMenu.style.display = 'block';
contextMenu._contextTrack = track;
}
}
@ -230,13 +365,13 @@ export function initializeUIInteractions(player, api) {
};
// Search and Library tabs
document.querySelectorAll('.search-tab').forEach(tab => {
document.querySelectorAll('.search-tab').forEach((tab) => {
tab.addEventListener('click', () => {
const page = tab.closest('.page');
if (!page) return;
page.querySelectorAll('.search-tab').forEach(t => t.classList.remove('active'));
page.querySelectorAll('.search-tab-content').forEach(c => c.classList.remove('active'));
page.querySelectorAll('.search-tab').forEach((t) => t.classList.remove('active'));
page.querySelectorAll('.search-tab-content').forEach((c) => c.classList.remove('active'));
tab.classList.add('active');

347
js/ui.js
View file

@ -1,5 +1,19 @@
//js/ui.js
import { SVG_PLAY, SVG_DOWNLOAD, SVG_MENU, SVG_HEART, formatTime, createPlaceholder, trackDataStore, hasExplicitContent, getTrackArtists, getTrackTitle, calculateTotalDuration, formatDuration, escapeHtml } from './utils.js';
import {
SVG_PLAY,
SVG_DOWNLOAD,
SVG_MENU,
SVG_HEART,
formatTime,
createPlaceholder,
trackDataStore,
hasExplicitContent,
getTrackArtists,
getTrackTitle,
calculateTotalDuration,
formatDuration,
escapeHtml,
} from './utils.js';
import { openLyricsPanel } from './lyrics.js';
import { recentActivityManager, backgroundSettings, trackListSettings, cardSettings } from './storage.js';
import { db } from './db.js';
@ -122,8 +136,6 @@ export class UIRenderer {
return '<span class="explicit-badge" title="Explicit">E</span>';
}
adjustTitleFontSize(element, text) {
element.classList.remove('long-title', 'very-long-title');
if (text.length > 40) {
@ -135,7 +147,9 @@ export class UIRenderer {
createTrackItemHTML(track, index, showCover = false, hasMultipleDiscs = false) {
const playIconSmall = SVG_PLAY;
const trackImageHTML = showCover ? `<img src="${this.api.getCoverUrl(track.album?.cover)}" alt="Track Cover" class="track-item-cover" loading="lazy">` : '';
const trackImageHTML = showCover
? `<img src="${this.api.getCoverUrl(track.album?.cover)}" alt="Track Cover" class="track-item-cover" loading="lazy">`
: '';
let displayIndex;
if (hasMultipleDiscs && !showCover) {
@ -212,14 +226,28 @@ export class UIRenderer {
`;
}
createBaseCardHTML({ type, id, href, title, subtitle, imageHTML, actionButtonsHTML, isCompact, extraClasses = '' }) {
const playBtnHTML = type !== 'artist' ? `
createBaseCardHTML({
type,
id,
href,
title,
subtitle,
imageHTML,
actionButtonsHTML,
isCompact,
extraClasses = '',
}) {
const playBtnHTML =
type !== 'artist'
? `
<button class="play-btn card-play-btn" data-action="play-card" data-type="${type}" data-id="${id}" title="Play">
${SVG_PLAY}
</button>
` : '';
`
: '';
const cardContent = type === 'artist'
const cardContent =
type === 'artist'
? `<h4 class="card-title">${title}</h4>`
: `<div class="card-info">
<h4 class="card-title">${title}</h4>
@ -259,7 +287,7 @@ export class UIRenderer {
${this.createHeartIcon(false)}
</button>
`,
isCompact
isCompact,
});
}
@ -280,7 +308,7 @@ export class UIRenderer {
${this.createHeartIcon(false)}
</button>
`,
isCompact
isCompact,
});
}
@ -310,7 +338,7 @@ export class UIRenderer {
const covers = uniqueCovers.slice(0, 4);
imageHTML = `
<div class="card-image card-collage ${itemsClass}">
${covers.map(cover => `<img src="${this.api.getCoverUrl(cover)}" alt="" loading="lazy">`).join('')}
${covers.map((cover) => `<img src="${this.api.getCoverUrl(cover)}" alt="" loading="lazy">`).join('')}
</div>
`;
} else if (uniqueCovers.length > 0) {
@ -328,7 +356,7 @@ export class UIRenderer {
id: playlist.id,
href: `#userplaylist/${playlist.id}`,
title: escapeHtml(playlist.name),
subtitle: `${playlist.tracks ? playlist.tracks.length : (playlist.numberOfTracks || 0)} tracks`,
subtitle: `${playlist.tracks ? playlist.tracks.length : playlist.numberOfTracks || 0} tracks`,
imageHTML: imageHTML,
actionButtonsHTML: `
<button class="edit-playlist-btn" data-action="edit-playlist" title="Edit Playlist">
@ -348,7 +376,7 @@ export class UIRenderer {
</button>
`,
isCompact,
extraClasses: 'user-playlist'
extraClasses: 'user-playlist',
});
}
@ -378,7 +406,7 @@ export class UIRenderer {
${this.createHeartIcon(false)}
</button>
`,
isCompact
isCompact,
});
}
@ -398,7 +426,7 @@ export class UIRenderer {
</button>
`,
isCompact,
extraClasses: 'artist'
extraClasses: 'artist',
});
}
@ -428,11 +456,17 @@ export class UIRenderer {
}
createSkeletonTracks(count = 5, showCover = false) {
return `<div class="skeleton-container">${Array(count).fill(0).map(() => this.createSkeletonTrack(showCover)).join('')}</div>`;
return `<div class="skeleton-container">${Array(count)
.fill(0)
.map(() => this.createSkeletonTrack(showCover))
.join('')}</div>`;
}
createSkeletonCards(count = 6, isArtist = false) {
return `<div class="card-grid">${Array(count).fill(0).map(() => this.createSkeletonCard(isArtist)).join('')}</div>`;
return `<div class="card-grid">${Array(count)
.fill(0)
.map(() => this.createSkeletonCard(isArtist))
.join('')}</div>`;
}
renderListWithTracks(container, tracks, showCover) {
@ -440,11 +474,11 @@ export class UIRenderer {
const tempDiv = document.createElement('div');
// Check if there are multiple discs in the tracks array
const hasMultipleDiscs = tracks.some(t => (t.volumeNumber || t.discNumber || 1) > 1);
const hasMultipleDiscs = tracks.some((t) => (t.volumeNumber || t.discNumber || 1) > 1);
tempDiv.innerHTML = tracks.map((track, i) =>
this.createTrackItemHTML(track, i, showCover, hasMultipleDiscs)
).join('');
tempDiv.innerHTML = tracks
.map((track, i) => this.createTrackItemHTML(track, i, showCover, hasMultipleDiscs))
.join('');
while (tempDiv.firstChild) {
fragment.appendChild(tempDiv.firstChild);
@ -453,7 +487,7 @@ export class UIRenderer {
container.innerHTML = '';
container.appendChild(fragment);
tracks.forEach(track => {
tracks.forEach((track) => {
const element = container.querySelector(`[data-track-id="${track.id}"]`);
if (element) {
trackDataStore.set(element, track);
@ -491,7 +525,10 @@ export class UIRenderer {
let hex = color.replace('#', '');
// Handle shorthand hex
if (hex.length === 3) {
hex = hex.split('').map(char => char + char).join('');
hex = hex
.split('')
.map((char) => char + char)
.join('');
}
let r = parseInt(hex.substr(0, 2), 16);
@ -499,7 +536,7 @@ export class UIRenderer {
let b = parseInt(hex.substr(4, 2), 16);
// Calculate perceived brightness
let brightness = ((r * 299) + (g * 587) + (b * 114)) / 1000;
let brightness = (r * 299 + g * 587 + b * 114) / 1000;
if (isLightMode) {
// In light mode, the background is white.
@ -509,7 +546,7 @@ export class UIRenderer {
r = Math.floor(r * 0.9);
g = Math.floor(g * 0.9);
b = Math.floor(b * 0.9);
brightness = ((r * 299) + (g * 587) + (b * 114)) / 1000;
brightness = (r * 299 + g * 587 + b * 114) / 1000;
}
} else {
// In dark mode, the background is dark.
@ -519,7 +556,7 @@ export class UIRenderer {
r = Math.min(255, Math.max(r + 1, Math.floor(r * 1.15)));
g = Math.min(255, Math.max(g + 1, Math.floor(g * 1.15)));
b = Math.min(255, Math.max(b + 1, Math.floor(b * 1.15)));
brightness = ((r * 299) + (g * 587) + (b * 114)) / 1000;
brightness = (r * 299 + g * 587 + b * 114) / 1000;
// Break if we hit white or can't get brighter to avoid infinite loop
if (r >= 255 && g >= 255 && b >= 255) break;
}
@ -583,7 +620,8 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
nextTrackEl.classList.remove('animate-in');
void nextTrackEl.offsetWidth;
nextTrackEl.classList.add('animate-in'); } else {
nextTrackEl.classList.add('animate-in');
} else {
nextTrackEl.style.display = 'none';
nextTrackEl.classList.remove('animate-in');
}
@ -615,11 +653,11 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
}
showPage(pageId) {
document.querySelectorAll('.page').forEach(page => {
document.querySelectorAll('.page').forEach((page) => {
page.classList.toggle('active', page.id === `page-${pageId}`);
});
document.querySelectorAll('.sidebar-nav a').forEach(link => {
document.querySelectorAll('.sidebar-nav a').forEach((link) => {
link.classList.toggle('active', link.hash === `#${pageId}`);
});
@ -653,8 +691,8 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
const likedAlbums = await db.getFavorites('album');
if (likedAlbums.length) {
albumsContainer.innerHTML = likedAlbums.map(a => this.createAlbumCardHTML(a)).join('');
likedAlbums.forEach(album => {
albumsContainer.innerHTML = likedAlbums.map((a) => this.createAlbumCardHTML(a)).join('');
likedAlbums.forEach((album) => {
const el = albumsContainer.querySelector(`[data-album-id="${album.id}"]`);
if (el) {
trackDataStore.set(el, album);
@ -667,8 +705,8 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
const likedArtists = await db.getFavorites('artist');
if (likedArtists.length) {
artistsContainer.innerHTML = likedArtists.map(a => this.createArtistCardHTML(a)).join('');
likedArtists.forEach(artist => {
artistsContainer.innerHTML = likedArtists.map((a) => this.createArtistCardHTML(a)).join('');
likedArtists.forEach((artist) => {
const el = artistsContainer.querySelector(`[data-artist-id="${artist.id}"]`);
if (el) {
trackDataStore.set(el, artist);
@ -683,20 +721,20 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
const likedMixes = await db.getFavorites('mix');
let mixedContent = [];
if (likedPlaylists.length) mixedContent.push(...likedPlaylists.map(p => ({ ...p, _type: 'playlist' })));
if (likedMixes.length) mixedContent.push(...likedMixes.map(m => ({ ...m, _type: 'mix' })));
if (likedPlaylists.length) mixedContent.push(...likedPlaylists.map((p) => ({ ...p, _type: 'playlist' })));
if (likedMixes.length) mixedContent.push(...likedMixes.map((m) => ({ ...m, _type: 'mix' })));
// Sort by addedAt descending
mixedContent.sort((a, b) => b.addedAt - a.addedAt);
if (mixedContent.length) {
playlistsContainer.innerHTML = mixedContent.map(item => {
return item._type === 'playlist'
? this.createPlaylistCardHTML(item)
: this.createMixCardHTML(item);
}).join('');
playlistsContainer.innerHTML = mixedContent
.map((item) => {
return item._type === 'playlist' ? this.createPlaylistCardHTML(item) : this.createMixCardHTML(item);
})
.join('');
likedPlaylists.forEach(playlist => {
likedPlaylists.forEach((playlist) => {
const el = playlistsContainer.querySelector(`[data-playlist-id="${playlist.uuid}"]`);
if (el) {
trackDataStore.set(el, playlist);
@ -704,7 +742,7 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
}
});
likedMixes.forEach(mix => {
likedMixes.forEach((mix) => {
const el = playlistsContainer.querySelector(`[data-mix-id="${mix.id}"]`);
if (el) {
trackDataStore.set(el, mix);
@ -718,8 +756,8 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
const myPlaylistsContainer = document.getElementById('my-playlists-container');
const myPlaylists = await db.getPlaylists();
if (myPlaylists.length) {
myPlaylistsContainer.innerHTML = myPlaylists.map(p => this.createUserPlaylistCardHTML(p)).join('');
myPlaylists.forEach(playlist => {
myPlaylistsContainer.innerHTML = myPlaylists.map((p) => this.createUserPlaylistCardHTML(p)).join('');
myPlaylists.forEach((playlist) => {
const el = myPlaylistsContainer.querySelector(`[data-user-playlist-id="${playlist.id}"]`);
if (el) {
trackDataStore.set(el, playlist);
@ -739,8 +777,8 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
const playlistsContainer = document.getElementById('home-recent-playlists');
if (recents.albums.length) {
albumsContainer.innerHTML = recents.albums.map(album => this.createAlbumCardHTML(album)).join('');
recents.albums.forEach(album => {
albumsContainer.innerHTML = recents.albums.map((album) => this.createAlbumCardHTML(album)).join('');
recents.albums.forEach((album) => {
const el = albumsContainer.querySelector(`[data-album-id="${album.id}"]`);
if (el) {
trackDataStore.set(el, album);
@ -752,8 +790,8 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
}
if (recents.artists.length) {
artistsContainer.innerHTML = recents.artists.map(artist => this.createArtistCardHTML(artist)).join('');
recents.artists.forEach(artist => {
artistsContainer.innerHTML = recents.artists.map((artist) => this.createArtistCardHTML(artist)).join('');
recents.artists.forEach((artist) => {
const el = artistsContainer.querySelector(`[data-artist-id="${artist.id}"]`);
if (el) {
trackDataStore.set(el, artist);
@ -776,17 +814,20 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
const combinedRecents = [...playlists, ...mixes]; // Order: Playlists then Mixes
if (combinedRecents.length) {
playlistsContainer.innerHTML = combinedRecents.map(item => {
playlistsContainer.innerHTML = combinedRecents
.map((item) => {
if (item.isUserPlaylist) {
return this.createUserPlaylistCardHTML(item);
}
if (item.mixType) { // It's a mix
if (item.mixType) {
// It's a mix
return this.createMixCardHTML(item);
}
return this.createPlaylistCardHTML(item);
}).join('');
})
.join('');
combinedRecents.forEach(item => {
combinedRecents.forEach((item) => {
if (item.isUserPlaylist) {
const el = playlistsContainer.querySelector(`[data-user-playlist-id="${item.id}"]`);
if (el) trackDataStore.set(el, item);
@ -835,7 +876,7 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
this.api.searchTracks(query, { signal }),
this.api.searchArtists(query, { signal }),
this.api.searchAlbums(query, { signal }),
this.api.searchPlaylists(query, { signal })
this.api.searchPlaylists(query, { signal }),
]);
let finalTracks = tracksResult.items;
@ -845,12 +886,12 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
if (finalArtists.length === 0 && finalTracks.length > 0) {
const artistMap = new Map();
finalTracks.forEach(track => {
finalTracks.forEach((track) => {
if (track.artist && !artistMap.has(track.artist.id)) {
artistMap.set(track.artist.id, track.artist);
}
if (track.artists) {
track.artists.forEach(artist => {
track.artists.forEach((artist) => {
if (!artistMap.has(artist.id)) {
artistMap.set(artist.id, artist);
}
@ -862,7 +903,7 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
if (finalAlbums.length === 0 && finalTracks.length > 0) {
const albumMap = new Map();
finalTracks.forEach(track => {
finalTracks.forEach((track) => {
if (track.album && !albumMap.has(track.album.id)) {
albumMap.set(track.album.id, track.album);
}
@ -877,10 +918,10 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
}
artistsContainer.innerHTML = finalArtists.length
? finalArtists.map(artist => this.createArtistCardHTML(artist)).join('')
? finalArtists.map((artist) => this.createArtistCardHTML(artist)).join('')
: createPlaceholder('No artists found.');
finalArtists.forEach(artist => {
finalArtists.forEach((artist) => {
const el = artistsContainer.querySelector(`[data-artist-id="${artist.id}"]`);
if (el) {
trackDataStore.set(el, artist);
@ -889,10 +930,10 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
});
albumsContainer.innerHTML = finalAlbums.length
? finalAlbums.map(album => this.createAlbumCardHTML(album)).join('')
? finalAlbums.map((album) => this.createAlbumCardHTML(album)).join('')
: createPlaceholder('No albums found.');
finalAlbums.forEach(album => {
finalAlbums.forEach((album) => {
const el = albumsContainer.querySelector(`[data-album-id="${album.id}"]`);
if (el) {
trackDataStore.set(el, album);
@ -901,20 +942,19 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
});
playlistsContainer.innerHTML = finalPlaylists.length
? finalPlaylists.map(playlist => this.createPlaylistCardHTML(playlist)).join('')
? finalPlaylists.map((playlist) => this.createPlaylistCardHTML(playlist)).join('')
: createPlaceholder('No playlists found.');
finalPlaylists.forEach(playlist => {
finalPlaylists.forEach((playlist) => {
const el = playlistsContainer.querySelector(`[data-playlist-id="${playlist.uuid}"]`);
if (el) {
trackDataStore.set(el, playlist);
this.updateLikeState(el, 'playlist', playlist.uuid);
}
});
} catch (error) {
if (error.name === 'AbortError') return;
console.error("Search failed:", error);
console.error('Search failed:', error);
const errorMsg = createPlaceholder(`Error during search. ${error.message}`);
tracksContainer.innerHTML = errorMsg;
artistsContainer.innerHTML = errorMsg;
@ -976,17 +1016,21 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
const releaseDate = new Date(album.releaseDate);
if (!isNaN(releaseDate.getTime())) {
const year = releaseDate.getFullYear();
dateDisplay = window.innerWidth > 768
? releaseDate.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })
dateDisplay =
window.innerWidth > 768
? releaseDate.toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric',
})
: year;
}
}
const firstCopyright = tracks.find(track => track.copyright)?.copyright;
const firstCopyright = tracks.find((track) => track.copyright)?.copyright;
metaEl.innerHTML =
(dateDisplay ? `${dateDisplay} • ` : '') +
`${tracks.length} tracks • ${formatDuration(totalDuration)}`;
(dateDisplay ? `${dateDisplay} • ` : '') + `${tracks.length} tracks • ${formatDuration(totalDuration)}`;
prodEl.innerHTML =
`By <a href="#artist/${album.artist.id}">${album.artist.name}</a>` +
@ -1036,7 +1080,7 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
const similarAlbumsContainer = document.getElementById('album-detail-similar-albums');
// Hide all initially
[moreAlbumsSection, epsSection, similarArtistsSection, similarAlbumsSection].forEach(el => {
[moreAlbumsSection, epsSection, similarArtistsSection, similarAlbumsSection].forEach((el) => {
if (el) el.style.display = 'none';
});
@ -1047,26 +1091,26 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
const mixBtn = document.getElementById('album-mix-btn');
if (mixBtn && artistData.mixes && artistData.mixes.ARTIST_MIX) {
mixBtn.style.display = 'flex';
mixBtn.onclick = () => window.location.hash = `#mix/${artistData.mixes.ARTIST_MIX}`;
mixBtn.onclick = () => (window.location.hash = `#mix/${artistData.mixes.ARTIST_MIX}`);
}
const renderSection = (items, container, section, titleEl, titleText) => {
if (!container || !section) return;
const filtered = (items || [])
.filter(a => a.id != album.id)
.filter((a, index, self) =>
index === self.findIndex((t) => t.title === a.title) // Dedup by title
.filter((a) => a.id != album.id)
.filter(
(a, index, self) => index === self.findIndex((t) => t.title === a.title) // Dedup by title
)
.slice(0, 12);
if (filtered.length === 0) return;
container.innerHTML = filtered.map(a => this.createAlbumCardHTML(a)).join('');
container.innerHTML = filtered.map((a) => this.createAlbumCardHTML(a)).join('');
if (titleEl && titleText) titleEl.textContent = titleText;
section.style.display = 'block';
filtered.forEach(a => {
filtered.forEach((a) => {
const el = container.querySelector(`[data-album-id="${a.id}"]`);
if (el) {
trackDataStore.set(el, a);
@ -1075,24 +1119,43 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
});
};
renderSection(artistData.albums, moreAlbumsContainer, moreAlbumsSection, moreAlbumsTitle, `More albums from ${album.artist.name}`);
renderSection(artistData.eps, epsContainer, epsSection, epsTitle, `EPs and Singles from ${album.artist.name}`);
renderSection(
artistData.albums,
moreAlbumsContainer,
moreAlbumsSection,
moreAlbumsTitle,
`More albums from ${album.artist.name}`
);
renderSection(
artistData.eps,
epsContainer,
epsSection,
epsTitle,
`EPs and Singles from ${album.artist.name}`
);
// Similar Artists
this.api.getSimilarArtists(album.artist.id).then(similar => {
this.api
.getSimilarArtists(album.artist.id)
.then((similar) => {
if (similar && similar.length > 0 && similarArtistsContainer && similarArtistsSection) {
similarArtistsContainer.innerHTML = similar.map(a => this.createArtistCardHTML(a)).join('');
similarArtistsContainer.innerHTML = similar
.map((a) => this.createArtistCardHTML(a))
.join('');
similarArtistsSection.style.display = 'block';
}
}).catch(e => console.warn('Failed to load similar artists:', e));
})
.catch((e) => console.warn('Failed to load similar artists:', e));
// Similar Albums
this.api.getSimilarAlbums(albumId).then(similar => {
this.api
.getSimilarAlbums(albumId)
.then((similar) => {
if (similar && similar.length > 0 && similarAlbumsContainer && similarAlbumsSection) {
similarAlbumsContainer.innerHTML = similar.map(a => this.createAlbumCardHTML(a)).join('');
similarAlbumsContainer.innerHTML = similar.map((a) => this.createAlbumCardHTML(a)).join('');
similarAlbumsSection.style.display = 'block';
similar.forEach(a => {
similar.forEach((a) => {
const el = similarAlbumsContainer.querySelector(`[data-album-id="${a.id}"]`);
if (el) {
trackDataStore.set(el, a);
@ -1100,14 +1163,13 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
}
});
}
}).catch(e => console.warn('Failed to load similar albums:', e));
})
.catch((e) => console.warn('Failed to load similar albums:', e));
} catch (err) {
console.warn('Failed to load "More from artist":', err);
}
} catch (error) {
console.error("Failed to load album:", error);
console.error('Failed to load album:', error);
tracklistContainer.innerHTML = createPlaceholder(`Could not load album details. ${error.message}`);
}
}
@ -1198,7 +1260,8 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
const removeBtn = document.createElement('button');
removeBtn.className = 'track-action-btn remove-from-playlist-btn';
removeBtn.title = 'Remove from playlist';
removeBtn.innerHTML = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>';
removeBtn.innerHTML =
'<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>';
removeBtn.dataset.trackIndex = index;
const menuBtn = actionsDiv.querySelector('.track-menu-btn');
actionsDiv.insertBefore(removeBtn, menuBtn);
@ -1238,7 +1301,7 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
cover: playlistData.cover,
images: uniqueCovers,
numberOfTracks: playlistData.tracks ? playlistData.tracks.length : 0,
isUserPlaylist: true
isUserPlaylist: true,
});
document.title = `${playlistData.name || playlistData.title} - Monochrome`;
} else {
@ -1248,12 +1311,7 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
}
// Render API playlist
let apiResult;
try {
apiResult = await this.api.getPlaylist(playlistId);
} catch (error) {
throw error;
}
let apiResult = await this.api.getPlaylist(playlistId);
const { playlist, tracks } = apiResult;
@ -1309,7 +1367,7 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
document.title = playlist.title || 'Artist Mix';
}
} catch (error) {
console.error("Failed to load playlist:", error);
console.error('Failed to load playlist:', error);
tracklistContainer.innerHTML = createPlaceholder(`Could not load playlist details. ${error.message}`);
}
}
@ -1402,7 +1460,7 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
document.title = displayTitle;
} catch (error) {
console.error("Failed to load mix:", error);
console.error('Failed to load mix:', error);
tracklistContainer.innerHTML = createPlaceholder(`Could not load mix details. ${error.message}`);
}
}
@ -1441,7 +1499,7 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
if (mixBtn) {
if (artist.mixes && artist.mixes.ARTIST_MIX) {
mixBtn.style.display = 'flex';
mixBtn.onclick = () => window.location.hash = `#mix/${artist.mixes.ARTIST_MIX}`;
mixBtn.onclick = () => (window.location.hash = `#mix/${artist.mixes.ARTIST_MIX}`);
} else {
mixBtn.style.display = 'none';
}
@ -1449,14 +1507,17 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
// Similar Artists
if (similarContainer && similarSection) {
this.api.getSimilarArtists(artistId).then(similar => {
this.api
.getSimilarArtists(artistId)
.then((similar) => {
if (similar && similar.length > 0) {
similarContainer.innerHTML = similar.map(a => this.createArtistCardHTML(a)).join('');
similarContainer.innerHTML = similar.map((a) => this.createArtistCardHTML(a)).join('');
similarSection.style.display = 'block';
} else {
similarSection.style.display = 'none';
}
}).catch(() => {
})
.catch(() => {
similarSection.style.display = 'none';
});
}
@ -1478,8 +1539,8 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
<span>${artist.popularity}% popularity</span>
<div class="artist-tags">
${(artist.artistRoles || [])
.filter(role => role.category)
.map(role => `<span class="artist-tag">${role.category}</span>`)
.filter((role) => role.category)
.map((role) => `<span class="artist-tag">${role.category}</span>`)
.join('')}
</div>
`;
@ -1494,25 +1555,23 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
artistLikeBtn.classList.toggle('active', isLiked);
}
albumsContainer.innerHTML = artist.albums.map(album =>
this.createAlbumCardHTML(album)
).join('');
albumsContainer.innerHTML = artist.albums.map((album) => this.createAlbumCardHTML(album)).join('');
// Render Albums
albumsContainer.innerHTML = artist.albums.length
? artist.albums.map(album => this.createAlbumCardHTML(album)).join('')
? artist.albums.map((album) => this.createAlbumCardHTML(album)).join('')
: createPlaceholder('No albums found.');
// Render EPs and Singles
if (epsContainer && epsSection) {
if (artist.eps && artist.eps.length > 0) {
epsContainer.innerHTML = artist.eps.map(album => this.createAlbumCardHTML(album)).join('');
epsContainer.innerHTML = artist.eps.map((album) => this.createAlbumCardHTML(album)).join('');
epsSection.style.display = 'block';
} else {
epsSection.style.display = 'none';
}
}
artist.albums.forEach(album => {
artist.albums.forEach((album) => {
const el = albumsContainer.querySelector(`[data-album-id="${album.id}"]`);
if (el) {
trackDataStore.set(el, album);
@ -1524,9 +1583,10 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
document.title = artist.name;
} catch (error) {
console.error("Failed to load artist:", error);
tracksContainer.innerHTML = albumsContainer.innerHTML =
createPlaceholder(`Could not load artist details. ${error.message}`);
console.error('Failed to load artist:', error);
tracksContainer.innerHTML = albumsContainer.innerHTML = createPlaceholder(
`Could not load artist details. ${error.message}`
);
}
}
@ -1548,14 +1608,20 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
const today = new Date().setHours(0, 0, 0, 0);
const yesterday = new Date(today - 86400000).setHours(0, 0, 0, 0);
history.forEach(item => {
history.forEach((item) => {
const date = new Date(item.timestamp);
const dayStart = new Date(date).setHours(0, 0, 0, 0);
let label;
if (dayStart === today) label = 'Today';
else if (dayStart === yesterday) label = 'Yesterday';
else label = date.toLocaleDateString(undefined, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
else
label = date.toLocaleDateString(undefined, {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric',
});
if (!groups[label]) groups[label] = [];
groups[label].push(item);
@ -1584,7 +1650,6 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
container.appendChild(tempContainer.firstChild);
}
}
} catch (error) {
console.error('Failed to load history:', error);
container.innerHTML = createPlaceholder('Failed to load history.');
@ -1595,7 +1660,7 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
const actionsDiv = document.getElementById('page-playlist').querySelector('.detail-header-actions');
// Cleanup existing dynamic buttons
['shuffle-playlist-btn', 'edit-playlist-btn', 'delete-playlist-btn', 'share-playlist-btn'].forEach(id => {
['shuffle-playlist-btn', 'edit-playlist-btn', 'delete-playlist-btn', 'share-playlist-btn'].forEach((id) => {
const btn = actionsDiv.querySelector(`#${id}`);
if (btn) btn.remove();
});
@ -1606,7 +1671,8 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
const shuffleBtn = document.createElement('button');
shuffleBtn.id = 'shuffle-playlist-btn';
shuffleBtn.className = 'btn-primary';
shuffleBtn.innerHTML = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 14 4 4-4 4"/><path d="m18 2 4 4-4 4"/><path d="M2 18h1.973a4 4 0 0 0 3.3-1.7l5.454-8.6a4 4 0 0 1 3.3-1.7H22"/><path d="M2 6h1.972a4 4 0 0 1 3.6 2.2"/><path d="M22 18h-6.041a4 4 0 0 1-3.3-1.8l-.359-.45"/></svg><span>Shuffle</span>';
shuffleBtn.innerHTML =
'<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 14 4 4-4 4"/><path d="m18 2 4 4-4 4"/><path d="M2 18h1.973a4 4 0 0 0 3.3-1.7l5.454-8.6a4 4 0 0 1 3.3-1.7H22"/><path d="M2 6h1.972a4 4 0 0 1 3.6 2.2"/><path d="M22 18h-6.041a4 4 0 0 1-3.3-1.8l-.359-.45"/></svg><span>Shuffle</span>';
shuffleBtn.onclick = () => {
const shuffledTracks = [...tracks].sort(() => Math.random() - 0.5);
this.player.setQueue(shuffledTracks, 0);
@ -1619,13 +1685,15 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
const editBtn = document.createElement('button');
editBtn.id = 'edit-playlist-btn';
editBtn.className = 'btn-secondary';
editBtn.innerHTML = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg><span>Edit</span>';
editBtn.innerHTML =
'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg><span>Edit</span>';
fragment.appendChild(editBtn);
const deleteBtn = document.createElement('button');
deleteBtn.id = 'delete-playlist-btn';
deleteBtn.className = 'btn-secondary danger';
deleteBtn.innerHTML = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg><span>Delete</span>';
deleteBtn.innerHTML =
'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg><span>Delete</span>';
fragment.appendChild(deleteBtn);
}
@ -1634,7 +1702,8 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
const shareBtn = document.createElement('button');
shareBtn.id = 'share-playlist-btn';
shareBtn.className = 'btn-secondary';
shareBtn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg><span>Share</span>';
shareBtn.innerHTML =
'<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg><span>Share</span>';
shareBtn.onclick = () => {
const url = `${window.location.origin}${window.location.pathname}#userplaylist/${playlist.id || playlist.uuid}`;
@ -1727,7 +1796,7 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
// Get new order from DOM
const newTrackItems = Array.from(container.querySelectorAll('.track-item'));
const newTracks = newTrackItems.map(item => {
const newTracks = newTrackItems.map((item) => {
const originalIndex = parseInt(item.dataset.index);
return tracks[originalIndex];
});
@ -1736,7 +1805,6 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
item.dataset.index = index;
});
tracks.length = 0;
tracks.push(...newTracks);
@ -1757,7 +1825,8 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
function getDragAfterElement(container, y) {
const draggableElements = [...container.querySelectorAll('.track-item:not(.dragging)')];
return draggableElements.reduce((closest, child) => {
return draggableElements.reduce(
(closest, child) => {
const box = child.getBoundingClientRect();
const offset = y - box.top - box.height / 2;
if (offset < 0 && offset > closest.offset) {
@ -1765,14 +1834,17 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
} else {
return closest;
}
}, { offset: Number.NEGATIVE_INFINITY }).element;
},
{ offset: Number.NEGATIVE_INFINITY }
).element;
}
}
getDragAfterElement(container, y) {
const draggableElements = [...container.querySelectorAll('.track-item:not(.dragging)')];
return draggableElements.reduce((closest, child) => {
return draggableElements.reduce(
(closest, child) => {
const box = child.getBoundingClientRect();
const offset = y - box.top - box.height / 2;
if (offset < 0 && offset > closest.offset) {
@ -1780,28 +1852,29 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
} else {
return closest;
}
}, { offset: Number.NEGATIVE_INFINITY }).element;
},
{ offset: Number.NEGATIVE_INFINITY }
).element;
}
renderApiSettings() {
const container = document.getElementById('api-instance-list');
Promise.all([
this.api.settings.getInstances('api'),
this.api.settings.getInstances('streaming')
]).then(([apiInstances, streamingInstances]) => {
Promise.all([this.api.settings.getInstances('api'), this.api.settings.getInstances('streaming')]).then(
([apiInstances, streamingInstances]) => {
const cachedData = this.api.settings.getCachedSpeedTests();
const speeds = cachedData?.speeds || {};
const renderGroup = (instances, type) => {
if (!instances || instances.length === 0) return '';
const listHtml = instances.map((url, index) => {
const listHtml = instances
.map((url, index) => {
const cacheKey = type === 'streaming' ? `${url}#streaming` : url;
const speedInfo = speeds[cacheKey];
const speedText = speedInfo
? (speedInfo.speed === Infinity || typeof speedInfo.speed !== 'number'
? speedInfo.speed === Infinity || typeof speedInfo.speed !== 'number'
? `<span style="color: var(--muted-foreground); font-size: 0.8rem;">Failed</span>`
: `<span style="color: var(--muted-foreground); font-size: 0.8rem;">${speedInfo.speed.toFixed(0)}ms</span>`)
: `<span style="color: var(--muted-foreground); font-size: 0.8rem;">${speedInfo.speed.toFixed(0)}ms</span>`
: '';
return `
@ -1824,7 +1897,8 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
</div>
</li>
`;
}).join('');
})
.join('');
return `
<li class="group-header" style="font-weight: bold; padding: 1rem 0 0.5rem; background: transparent; border: none; pointer-events: none;">
@ -1841,6 +1915,7 @@ async showFullscreenCover(track, nextTrack, lyricsManager, audioPlayer) {
if (cacheInfo) {
cacheInfo.textContent = `Cache: ${stats.memoryEntries}/${stats.maxSize} entries`;
}
});
}
);
}
}

79
js/utils.js
View file

@ -5,37 +5,58 @@ export const QUALITY = 'LOSSLESS';
export const REPEAT_MODE = {
OFF: 0,
ALL: 1,
ONE: 2
ONE: 2,
};
export const AUDIO_QUALITIES = {
HI_RES_LOSSLESS: 'HI_RES_LOSSLESS',
LOSSLESS: 'LOSSLESS',
HIGH: 'HIGH',
LOW: 'LOW'
LOW: 'LOW',
};
export const QUALITY_PRIORITY = ['HI_RES_LOSSLESS', 'LOSSLESS', 'HIGH', 'LOW'];
export const QUALITY_TOKENS = {
HI_RES_LOSSLESS: ['HI_RES_LOSSLESS', 'HIRES_LOSSLESS', 'HIRESLOSSLESS', 'HIFI_PLUS', 'HI_RES_FLAC', 'HI_RES', 'HIRES', 'MASTER', 'MASTER_QUALITY', 'MQA'],
HI_RES_LOSSLESS: [
'HI_RES_LOSSLESS',
'HIRES_LOSSLESS',
'HIRESLOSSLESS',
'HIFI_PLUS',
'HI_RES_FLAC',
'HI_RES',
'HIRES',
'MASTER',
'MASTER_QUALITY',
'MQA',
],
LOSSLESS: ['LOSSLESS', 'HIFI'],
HIGH: ['HIGH', 'HIGH_QUALITY'],
LOW: ['LOW', 'LOW_QUALITY']
LOW: ['LOW', 'LOW_QUALITY'],
};
export const RATE_LIMIT_ERROR_MESSAGE = 'Too Many Requests. Please wait a moment and try again.';
export const SVG_PLAY = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><polygon points="7 3 21 12 7 21 7 3"></polygon></svg>';
export const SVG_PAUSE = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="4" width="4" height="16"></rect><rect x="14" y="4" width="4" height="16"></rect></svg>';
export const SVG_VOLUME = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path></svg>';
export const SVG_MUTE = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><line x1="23" y1="9" x2="17" y2="15"></line><line x1="17" y1="9" x2="23" y2="15"></line></svg>';
export const SVG_DOWNLOAD = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>';
export const SVG_MENU = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>';
export const SVG_HEART = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="heart-icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>';
export const SVG_CLOSE = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>';
export const SVG_BIN = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>';
export const SVG_MIX = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/></svg>';
export const SVG_PLAY =
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><polygon points="7 3 21 12 7 21 7 3"></polygon></svg>';
export const SVG_PAUSE =
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="4" width="4" height="16"></rect><rect x="14" y="4" width="4" height="16"></rect></svg>';
export const SVG_VOLUME =
'<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path></svg>';
export const SVG_MUTE =
'<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><line x1="23" y1="9" x2="17" y2="15"></line><line x1="17" y1="9" x2="23" y2="15"></line></svg>';
export const SVG_DOWNLOAD =
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>';
export const SVG_MENU =
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>';
export const SVG_HEART =
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="heart-icon"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>';
export const SVG_CLOSE =
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>';
export const SVG_BIN =
'<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>';
export const SVG_MIX =
'<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/></svg>';
export const formatTime = (seconds) => {
if (isNaN(seconds)) return '0:00';
@ -78,7 +99,7 @@ export const buildTrackFilename = (track, quality) => {
trackNumber: track.trackNumber,
artist: artistName,
title: getTrackTitle(track),
album: track.album?.title
album: track.album?.title,
};
return formatTemplate(template, data) + '.' + extension;
@ -86,7 +107,10 @@ export const buildTrackFilename = (track, quality) => {
const sanitizeToken = (value) => {
if (!value) return '';
return value.trim().toUpperCase().replace(/[^A-Z0-9]+/g, '_');
return value
.trim()
.toUpperCase()
.replace(/[^A-Z0-9]+/g, '_');
};
export const normalizeQualityToken = (value) => {
@ -142,13 +166,13 @@ export const deriveTrackQuality = (track) => {
const candidates = [
deriveQualityFromTags(track.mediaMetadata?.tags),
deriveQualityFromTags(track.album?.mediaMetadata?.tags),
normalizeQualityToken(track.audioQuality)
normalizeQualityToken(track.audioQuality),
];
return pickBestQuality(candidates);
};
export const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
export const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
export const hasExplicitContent = (item) => {
return item?.explicit === true || item?.explicitLyrics === true;
@ -169,11 +193,11 @@ export const debounce = (func, wait) => {
export const escapeHtml = (unsafe) => {
if (typeof unsafe !== 'string') return unsafe;
return unsafe
.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;")
.replace(/'/g, "&#039;");
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#039;');
};
export const getTrackTitle = (track, { fallback = 'Unknown Title' } = {}) => {
@ -183,7 +207,7 @@ export const getTrackTitle = (track, { fallback = 'Unknown Title' } = {}) => {
export const getTrackArtists = (track = {}, { fallback = 'Unknown Artist' } = {}) => {
if (track?.artists?.length) {
return track.artists.map(artist => artist?.name).join(', ');
return track.artists.map((artist) => artist?.name).join(', ');
}
return fallback;
@ -191,9 +215,9 @@ export const getTrackArtists = (track = {}, { fallback = 'Unknown Artist' } = {}
export const getTrackArtistsHTML = (track = {}, { fallback = 'Unknown Artist' } = {}) => {
if (track?.artists?.length) {
return track.artists.map(artist =>
`<span class="artist-link" data-artist-id="${artist.id}">${artist.name}</span>`
).join(', ');
return track.artists
.map((artist) => `<span class="artist-link" data-artist-id="${artist.id}">${artist.name}</span>`)
.join(', ');
}
return fallback;
@ -275,4 +299,3 @@ export async function getCoverBlob(api, coverId) {
}
return null;
}

25
js/vibrant-color.js
View file

@ -10,7 +10,9 @@ function rgbToHsl(r, g, b) {
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
let h, s, l = (max + min) / 2;
let h,
s,
l = (max + min) / 2;
if (max === min) {
h = s = 0; // achromatic
@ -19,9 +21,15 @@ function rgbToHsl(r, g, b) {
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
case r:
h = (g - b) / d + (g < b ? 6 : 0);
break;
case g:
h = (b - r) / d + 2;
break;
case b:
h = (r - g) / d + 4;
break;
}
h /= 6;
}
@ -54,7 +62,7 @@ function hslToHex(h, s, l) {
b = hue2rgb(p, q, h - 1 / 3);
}
const toHex = x => {
const toHex = (x) => {
const hex = Math.round(x * 255).toString(16);
return hex.length === 1 ? '0' + hex : hex;
};
@ -67,7 +75,6 @@ export function getVibrantColorFromImage(imgElement) {
const ctx = canvas.getContext('2d');
if (!ctx) return null;
try {
const maxDimension = 64;
let w = imgElement.naturalWidth || imgElement.width;
let h = imgElement.naturalHeight || imgElement.height;
@ -129,7 +136,7 @@ export function getVibrantColorFromImage(imgElement) {
// Sort by saturation (descending) then lightness (proximity to 0.5)
candidates.sort((c1, c2) => {
return c2.s - c1.s || (0.5 - Math.abs(c1.l - 0.5)) - (0.5 - Math.abs(c2.l - 0.5));
return c2.s - c1.s || 0.5 - Math.abs(c1.l - 0.5) - (0.5 - Math.abs(c2.l - 0.5));
});
// Pick the top candidate (most vibrant)
@ -137,8 +144,4 @@ export function getVibrantColorFromImage(imgElement) {
const best = candidates[0];
return hslToHex(best.h, best.s, best.l);
} catch (e) {
throw e; // Re-throw to allow UI to handle CORS retry
}
}

2528
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

13
package.json
View file

@ -8,6 +8,11 @@
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"lint:js": "eslint .",
"lint:css": "stylelint \"**/*.css\"",
"lint:html": "htmlhint \"**/*.html\" --ignore=\"dist/**,legacy/**,node_modules/**\"",
"lint": "npm run lint:js && npm run lint:css && npm run lint:html",
"format": "prettier --write .",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
@ -22,6 +27,14 @@
},
"homepage": "https://github.com/SamidyFR/monochrome#readme",
"devDependencies": {
"eslint": "^9.39.2",
"eslint-config-prettier": "^10.1.8",
"globals": "^17.0.0",
"htmlhint": "^1.8.0",
"prettier": "^3.7.4",
"stylelint": "^16.26.1",
"stylelint-config-standard": "^39.0.1",
"stylelint-config-standard-scss": "^16.0.0",
"vite": "^7.3.0",
"vite-plugin-pwa": "^1.2.0"
},

12
public/discord.html
View file

@ -1,13 +1,13 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Redirecting...</title>
<meta http-equiv="refresh" content="0; URL='https://discord.gg/4DYm4artsN'">
<meta http-equiv="refresh" content="0; URL='https://discord.gg/4DYm4artsN'" />
<script>
window.location.href = "https://discord.gg/4DYm4artsN";
window.location.href = 'https://discord.gg/4DYm4artsN';
</script>
</head>
<body>

5
public/instances.json
View file

@ -1,8 +1,5 @@
{
"api": [
"https://tidal-api.binimum.org",
"https://monochrome-api.samidy.com"
],
"api": ["https://tidal-api.binimum.org", "https://monochrome-api.samidy.com"],
"streaming": [
"https://triton.squid.wtf",
"https://wolf.qqdl.site",

9
public/manifest.json
View file

@ -4,9 +4,7 @@
"description": "A minimalist music streaming application",
"start_url": "./",
"display": "standalone",
"display_override": [
"window-controls-overlay"
],
"display_override": ["window-controls-overlay"],
"background_color": "#000000",
"theme_color": "#000000",
"orientation": "portrait-primary",
@ -30,10 +28,7 @@
"purpose": "maskable"
}
],
"categories": [
"music",
"entertainment"
],
"categories": ["music", "entertainment"],
"shortcuts": [
{
"name": "Search",

277
styles.css
View file

@ -1,5 +1,6 @@
:root {
color-scheme: light dark;
--spacing-xs: 0.4rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
@ -8,15 +9,16 @@
--spacing-2xl: 3rem;
--radius: 0.5rem;
--transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
--shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.15);
--shadow-md: 0 6px 16px rgba(0, 0, 0, 0.2);
--shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
--shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.8);
--shadow-sm: 0 4px 12px rgb(0, 0, 0, 0.15);
--shadow-md: 0 6px 16px rgb(0, 0, 0, 0.2);
--shadow-lg: 0 10px 30px rgb(0, 0, 0, 0.5);
--shadow-xl: 0 20px 60px rgb(0, 0, 0, 0.8);
--cover-filter: blur(50px) brightness(0.4);
}
:root[data-theme="monochrome"] {
:root[data-theme='monochrome'] {
color-scheme: dark;
--background: #000;
--foreground: #fafafa;
--card: #111;
@ -36,8 +38,9 @@
--explicit-badge: #fafafa;
}
:root[data-theme="dark"] {
:root[data-theme='dark'] {
color-scheme: dark;
--background: #0a0a0a;
--foreground: #ededed;
--card: #1a1a1a;
@ -57,8 +60,9 @@
--explicit-badge: #750a0a;
}
:root[data-theme="ocean"] {
:root[data-theme='ocean'] {
color-scheme: dark;
--background: #0c1821;
--foreground: #e0f4ff;
--card: #1b2838;
@ -78,8 +82,9 @@
--explicit-badge: #f43f5e;
}
:root[data-theme="purple"] {
:root[data-theme='purple'] {
color-scheme: dark;
--background: #0f0514;
--foreground: #f3e8ff;
--card: #1e0a2e;
@ -99,8 +104,9 @@
--explicit-badge: #ec4899;
}
:root[data-theme="forest"] {
:root[data-theme='forest'] {
color-scheme: dark;
--background: #0a1409;
--foreground: #e8f5e9;
--card: #1a2e1a;
@ -120,8 +126,9 @@
--explicit-badge: #f59e0b;
}
:root[data-theme="mocha"] {
:root[data-theme='mocha'] {
color-scheme: dark;
--background: #1e1e2e;
--foreground: #cdd6f4;
--card: #313244;
@ -141,8 +148,9 @@
--explicit-badge: #f9e2af;
}
:root[data-theme="machiatto"] {
:root[data-theme='machiatto'] {
color-scheme: dark;
--background: #24273a;
--foreground: #cad3f5;
--card: #363a4f;
@ -162,8 +170,9 @@
--explicit-badge: #eed49f;
}
:root[data-theme="frappe"] {
:root[data-theme='frappe'] {
color-scheme: dark;
--background: #303446;
--foreground: #c6d0f5;
--card: #414559;
@ -183,8 +192,9 @@
--explicit-badge: #e5c890;
}
:root[data-theme="latte"] {
:root[data-theme='latte'] {
color-scheme: light;
--background: #eff1f5;
--foreground: #4c4f69;
--card: #ccd0da;
@ -204,16 +214,17 @@
--explicit-badge: #df8e1d;
}
:root[data-theme="light"] {
:root[data-theme='light'] {
color-scheme: light;
--background: #ffffff;
--foreground: #000000;
--background: #fff;
--foreground: #000;
--card: #f4f4f5;
--card-foreground: #000000;
--card-foreground: #000;
--primary: #2563eb;
--primary-foreground: #ffffff;
--primary-foreground: #fff;
--secondary: #e4e4e7;
--secondary-foreground: #000000;
--secondary-foreground: #000;
--muted: #e4e4e7;
--muted-foreground: #71717a;
--border: #e4e4e7;
@ -226,7 +237,9 @@
--cover-filter: blur(50px) brightness(1.6) opacity(0.35);
}
*, *::before, *::after {
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
@ -243,9 +256,11 @@ html {
body {
background-color: var(--background);
color: var(--foreground);
font-family: 'Inter', sans-serif;
font-family: Inter, sans-serif;
overflow: hidden;
transition: background-color 0.3s ease, color 0.3s ease;
transition:
background-color 0.3s ease,
color 0.3s ease;
height: 100%;
position: fixed;
width: 100%;
@ -280,7 +295,7 @@ kbd {
padding: 0.25rem 0.5rem;
font-size: 0.85rem;
font-family: 'Courier New', monospace;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 4px rgb(0, 0, 0, 0.1);
}
.app-container {
@ -288,8 +303,8 @@ kbd {
height: 100vh;
height: 100dvh;
grid-template:
"sidebar main" 1fr
"player player" auto / 190px 1fr;
'sidebar main' 1fr
'player player' auto / 190px 1fr;
}
.sidebar {
@ -333,8 +348,7 @@ kbd {
transition: opacity 0.5s ease-in-out;
/* Fade out at the bottom */
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.8) 40%, rgba(0, 0, 0, 0) 100%);
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.8) 40%, rgba(0, 0, 0, 0) 100%);
mask-image: linear-gradient(to bottom, rgb(0, 0, 0, 1) 0%, rgb(0, 0, 0, 0.8) 40%, rgb(0, 0, 0, 0) 100%);
/* Blur effect */
filter: var(--cover-filter);
@ -346,9 +360,8 @@ kbd {
}
/* Light mode adjustments */
:root[data-theme="light"] #page-background {
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
:root[data-theme='light'] #page-background {
mask-image: linear-gradient(to bottom, rgb(0, 0, 0, 1) 0%, rgb(0, 0, 0, 0) 100%);
}
.now-playing-bar {
@ -414,7 +427,7 @@ kbd {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
background: rgb(0, 0, 0, 0.5);
z-index: 1999;
backdrop-filter: blur(2px);
}
@ -579,7 +592,6 @@ body.has-page-background .track-item:hover {
}
@keyframes pulse {
0%,
100% {
opacity: 1;
@ -680,9 +692,8 @@ body.has-page-background .track-item:hover {
position: absolute;
top: 2%;
right: 2%;
background: rgba(0, 0, 0, 0.25) !important;
background: rgb(0, 0, 0, 0.25) !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: 50% !important;
width: 32px !important;
height: 32px !important;
@ -705,7 +716,7 @@ body.has-page-background .track-item:hover {
}
.card-like-btn:hover {
background: rgba(0, 0, 0, 0.7) !important;
background: rgb(0, 0, 0, 0.7) !important;
transform: scale(1.1) !important;
}
@ -717,9 +728,8 @@ body.has-page-background .track-item:hover {
.delete-playlist-btn {
position: absolute;
top: 2%;
background: rgba(0, 0, 0, 0.5) !important;
background: rgb(0, 0, 0, 0.5) !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: 50% !important;
width: 32px !important;
height: 32px !important;
@ -752,7 +762,7 @@ body.has-page-background .track-item:hover {
.edit-playlist-btn:hover,
.delete-playlist-btn:hover {
background: rgba(0, 0, 0, 0.8) !important;
background: rgb(0, 0, 0, 0.8) !important;
transform: scale(1.1) !important;
}
@ -821,7 +831,9 @@ body.has-page-background .track-item:hover {
}
.heart-icon {
transition: transform 0.2s ease, color 0.2s ease;
transition:
transform 0.2s ease,
color 0.2s ease;
}
.like-btn:hover .heart-icon {
@ -893,7 +905,7 @@ body.has-page-background .track-item:hover {
}
.track-item.playing {
background-color: rgba(var(--highlight-rgb), 0.15);
background-color: rgb(var(--highlight-rgb), 0.15);
border-left: 3px solid var(--highlight);
padding-left: calc(var(--spacing-sm) - 3px);
}
@ -984,7 +996,7 @@ body.has-page-background .track-item:hover {
z-index: 10;
}
[data-track-actions-mode="dropdown"] .track-menu-btn {
[data-track-actions-mode='dropdown'] .track-menu-btn {
display: flex;
}
@ -992,10 +1004,8 @@ body.has-page-background .track-item:hover {
opacity: 1;
}
.track-menu-btn:hover {
background-color: rgba(var(--highlight-rgb), 0.2);
background-color: rgb(var(--highlight-rgb), 0.2);
color: var(--foreground);
}
@ -1010,7 +1020,7 @@ body.has-page-background .track-item:hover {
opacity: 1;
}
[data-track-actions-mode="inline"] .track-actions-inline {
[data-track-actions-mode='inline'] .track-actions-inline {
display: flex;
}
@ -1018,8 +1028,6 @@ body.has-page-background .track-item:hover {
opacity: 1;
}
.track-action-btn {
background: transparent;
border: none;
@ -1035,7 +1043,7 @@ body.has-page-background .track-item:hover {
}
.track-action-btn:hover {
background-color: rgba(var(--highlight-rgb), 0.2);
background-color: rgb(var(--highlight-rgb), 0.2);
color: var(--foreground);
}
@ -1257,7 +1265,7 @@ body.has-page-background .track-item:hover {
}
.setting-item select,
.setting-item input[type="number"] {
.setting-item input[type='number'] {
background-color: var(--input);
color: var(--foreground);
border: 1px solid var(--border);
@ -1265,7 +1273,7 @@ body.has-page-background .track-item:hover {
padding: 0.5rem;
}
.setting-item input[type="number"] {
.setting-item input[type='number'] {
width: 100px;
}
@ -1310,7 +1318,7 @@ body.has-page-background .track-item:hover {
.slider::before {
position: absolute;
content: "";
content: '';
height: 16px;
width: 16px;
left: 4px;
@ -1479,7 +1487,6 @@ input:checked + .slider::before {
position: relative;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
touch-action: none;
}
@ -1519,8 +1526,9 @@ input:checked + .slider::before {
height: 12px;
background-color: var(--highlight);
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
box-shadow: 0 2px 4px rgb(0, 0, 0, 0.3);
}
.progress-bar.has-waveform.waveform-loaded {
height: 28px;
}
@ -1607,7 +1615,7 @@ input:checked + .slider::before {
height: 12px;
background-color: var(--highlight);
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
box-shadow: 0 2px 4px rgb(0, 0, 0, 0.3);
}
/* Sleep Timer Button */
@ -1624,7 +1632,7 @@ input:checked + .slider::before {
#sleep-timer-btn.active {
color: var(--primary);
text-shadow: 0 0 8px rgba(var(--highlight-rgb), 0.5);
text-shadow: 0 0 8px rgb(var(--highlight-rgb), 0.5);
}
#sleep-timer-btn svg {
@ -1672,7 +1680,7 @@ input:checked + .slider::before {
display: none;
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.7);
background-color: rgb(0, 0, 0, 0.7);
backdrop-filter: blur(4px);
z-index: 3000;
justify-content: center;
@ -1691,13 +1699,15 @@ input:checked + .slider::before {
animation: fadeIn 0.3s ease;
overflow: hidden;
background-color: var(--background);
/* Use a CSS variable for the image so we can set it in JS */
--bg-image: none;
padding-bottom: 90px; /* Account for desktop player bar */
}
#fullscreen-cover-overlay::before {
content: "";
content: '';
position: absolute;
inset: -20px;
background-size: cover;
@ -1716,6 +1726,7 @@ input:checked + .slider::before {
justify-content: center;
width: 100%;
height: 100%;
/* Remove fixed padding to allow flex centering to work within the overlay's padded box */
padding: 1rem;
position: relative;
@ -1749,7 +1760,7 @@ input:checked + .slider::before {
max-width: 80vw;
max-height: 60vh;
border-radius: var(--radius);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
box-shadow: 0 20px 50px rgb(0, 0, 0, 0.5);
object-fit: contain;
margin-bottom: 2rem;
z-index: 1;
@ -1805,8 +1816,6 @@ input:checked + .slider::before {
color: var(--foreground);
}
#queue-modal {
background-color: var(--card);
width: 90%;
@ -1892,7 +1901,7 @@ input:checked + .slider::before {
}
.queue-track-item .queue-like-btn:hover {
background-color: rgba(var(--highlight-rgb), 0.2);
background-color: rgb(var(--highlight-rgb), 0.2);
color: var(--foreground);
}
@ -1914,7 +1923,7 @@ input:checked + .slider::before {
}
.queue-track-item.playing {
background-color: rgba(var(--highlight-rgb), 0.15);
background-color: rgb(var(--highlight-rgb), 0.15);
border-left: 3px solid var(--highlight);
padding-left: calc(var(--spacing-sm) - 3px);
}
@ -1930,7 +1939,6 @@ input:checked + .slider::before {
.queue-track-item .queue-remove-btn {
background: transparent;
border: none;
color: var(--muted-foreground);
cursor: pointer;
padding: 0.5rem;
border-radius: var(--radius);
@ -1947,8 +1955,6 @@ input:checked + .slider::before {
opacity: 1;
}
.queue-track-item .queue-remove-btn:hover {
background-color: var(--background);
color: var(--foreground);
@ -1969,10 +1975,7 @@ input:checked + .slider::before {
}
.skeleton {
background: linear-gradient(90deg,
var(--secondary) 0%,
var(--muted) 50%,
var(--secondary) 100%);
background: linear-gradient(90deg, var(--secondary) 0%, var(--muted) 50%, var(--secondary) 100%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s ease-in-out infinite;
border-radius: var(--radius);
@ -2173,7 +2176,7 @@ input:checked + .slider::before {
color: var(--muted-foreground);
}
.theme-color-input input[type="color"] {
.theme-color-input input[type='color'] {
width: 100%;
height: 40px;
border: 1px solid var(--border);
@ -2223,7 +2226,7 @@ input:checked + .slider::before {
}
.about-features li::before {
content: "✓";
content: '✓';
position: absolute;
left: 0;
color: var(--highlight);
@ -2466,7 +2469,6 @@ input:checked + .slider::before {
border-bottom: none;
}
#playlist-detail-description,
#mix-detail-description {
color: var(--foreground);
@ -2497,21 +2499,6 @@ input:checked + .slider::before {
/* Responsive Design */
@supports (padding-top: env(safe-area-inset-top)) {
.now-playing-bar {
padding-bottom: max(var(--spacing-md), env(safe-area-inset-bottom));
@ -2542,7 +2529,9 @@ input:checked + .slider::before {
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
transition:
transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.3s ease;
box-shadow: none;
}
@ -2604,7 +2593,6 @@ input:checked + .slider::before {
/* Inherits side-panel */
}
/* Synced lyrics styling with Apple Music animations */
.synced-line {
padding: 0.5rem 0;
@ -2624,7 +2612,7 @@ input:checked + .slider::before {
opacity: 1;
transform: scale(1);
filter: blur(0);
text-shadow: 0 0 20px rgba(var(--highlight-rgb), 0.3);
text-shadow: 0 0 20px rgb(var(--highlight-rgb), 0.3);
}
.synced-line.upcoming {
@ -2708,7 +2696,6 @@ input:checked + .slider::before {
/* Hide play button initially on desktop (hover capable), show on hover */
/* Adjust like button for compact size */
.card.compact .card-like-btn {
width: 24px !important;
@ -2728,7 +2715,6 @@ input:checked + .slider::before {
/* Mobile adjustments */
/* Clickable album cover indicator */
.now-playing-bar .cover {
cursor: pointer;
@ -2747,7 +2733,7 @@ input:checked + .slider::before {
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.7);
background: rgb(0, 0, 0, 0.7);
opacity: 0;
transition: opacity var(--transition);
font-size: 1.5rem;
@ -2759,7 +2745,6 @@ input:checked + .slider::before {
/* Window Controls Overlay */
.now-playing-bar .artist .artist-link {
cursor: pointer;
transition: color var(--transition);
@ -2799,8 +2784,9 @@ input:checked + .slider::before {
}
/* Show a grey box for images with no source, hiding the broken icon */
img:not([src]), img[src=''] {
content: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
img:not([src]),
img[src=''] {
content: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
background-color: var(--muted);
}
@ -2885,7 +2871,6 @@ img:not([src]), img[src=''] {
max-width: 100%;
}
.fullscreen-cover-content {
display: flex;
flex-direction: row;
@ -2908,7 +2893,7 @@ img:not([src]), img[src=''] {
position: absolute;
top: 1rem;
right: 4rem;
background: rgba(0, 0, 0, 0.5);
background: rgb(0, 0, 0, 0.5);
border: none;
color: white;
padding: 0.75rem;
@ -2922,7 +2907,7 @@ img:not([src]), img[src=''] {
}
.fullscreen-lyrics-toggle:hover {
background: rgba(0, 0, 0, 0.7);
background: rgb(0, 0, 0, 0.7);
transform: scale(1.1);
}
@ -2947,7 +2932,7 @@ img:not([src]), img[src=''] {
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.7);
background: rgb(0, 0, 0, 0.7);
backdrop-filter: blur(4px);
z-index: -1;
}
@ -2984,12 +2969,29 @@ img:not([src]), img[src=''] {
cursor: pointer;
border-bottom: 1px solid var(--border);
transition: background 0.2s ease;
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-option:hover {
background: var(--secondary);
}
.modal-option.already-contains {
opacity: 0.6;
cursor: default;
}
.modal-option.already-contains:hover {
background: transparent;
}
.modal-option .checkmark {
color: var(--highlight);
flex-shrink: 0;
}
.modal-option:last-child {
border-bottom: none;
}
@ -3012,8 +3014,15 @@ img:not([src]), img[src=''] {
}
@keyframes scaleIn {
from { transform: scale(0.95); opacity: 0; }
to { transform: scale(1); opacity: 1; }
from {
transform: scale(0.95);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
#playlist-modal {
@ -3028,6 +3037,7 @@ img:not([src]), img[src=''] {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
@ -3054,7 +3064,7 @@ img:not([src]), img[src=''] {
}
.csv-import-progress .progress-header h4 {
margin: 0 0 0.5rem 0;
margin: 0 0 0.5rem;
font-size: 1.1rem;
font-weight: 600;
color: var(--foreground);
@ -3104,18 +3114,18 @@ img:not([src]), img[src=''] {
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.3) 50%,
transparent 100%
);
background: linear-gradient(90deg, transparent 0%, rgb(255, 255, 255, 0.3) 50%, transparent 100%);
animation: shimmer 2s infinite;
}
@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
.csv-import-progress .progress-text {
@ -3129,13 +3139,11 @@ img:not([src]), img[src=''] {
color: var(--foreground);
}
.missing-tracks-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2rem 2rem 1.5rem 2rem;
padding: 2rem 2rem 1.5rem;
border-bottom: 1px solid var(--border);
}
@ -3201,7 +3209,7 @@ img:not([src]), img[src=''] {
padding: 0.75rem 1.25rem;
border-bottom: 1px solid var(--border);
color: var(--foreground);
font-family: 'Inter', sans-serif;
font-family: Inter, sans-serif;
font-size: 0.95rem;
font-weight: 400;
line-height: 1.4;
@ -3212,11 +3220,11 @@ img:not([src]), img[src=''] {
}
.missing-tracks-list li:nth-child(even) {
background: rgba(255, 255, 255, 0.02);
background: rgb(255, 255, 255, 0.02);
}
.missing-tracks-actions {
padding: 1.5rem 2rem 2rem 2rem;
padding: 1.5rem 2rem 2rem;
border-top: 1px solid var(--border);
display: flex;
justify-content: flex-end;
@ -3229,10 +3237,6 @@ img:not([src]), img[src=''] {
font-weight: 500;
}
/* Default responsive classes */
.mobile-only {
display: none !important;
@ -3343,8 +3347,6 @@ img:not([src]), img[src=''] {
}
@media (max-width: 768px) {
.player-controls .progress-container {
order: -1;
}
@ -3368,9 +3370,9 @@ img:not([src]), img[src=''] {
.app-container {
grid-template:
"header" auto
"main" 1fr
"player" auto / 1fr;
'header' auto
'main' 1fr
'player' auto / 1fr;
height: 100vh;
height: 100dvh;
}
@ -3392,12 +3394,14 @@ img:not([src]), img[src=''] {
height: 100%;
transform: translateX(-100%);
z-index: 2000;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
transition:
transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.3s ease;
}
.sidebar.is-open {
transform: translateX(0);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 20px rgb(0, 0, 0, 0.5);
}
.hamburger-menu {
@ -3492,8 +3496,8 @@ img:not([src]), img[src=''] {
.now-playing-bar {
grid-template:
"track controls" auto
"progress progress" auto / 1fr auto;
'track controls' auto
'progress progress' auto / 1fr auto;
gap: var(--spacing-sm);
padding: var(--spacing-sm) var(--spacing-md);
height: var(--player-bar-height-mobile);
@ -3793,7 +3797,7 @@ img:not([src]), img[src=''] {
}
.detail-header-info .title.long-title {
font-size: 1.10rem;
font-size: 1.1rem;
}
.detail-header-info .title.very-long-title {
@ -3897,7 +3901,7 @@ img:not([src]), img[src=''] {
height: 32px;
}
[data-track-actions-mode="inline"] .track-actions-inline .track-action-btn:not([data-action="play-next"]) {
[data-track-actions-mode='inline'] .track-actions-inline .track-action-btn:not([data-action='play-next']) {
display: none;
}
@ -3905,6 +3909,7 @@ img:not([src]), img[src=''] {
gap: 0.25rem;
}
}
@media (max-width: 360px) {
.player-controls .buttons {
justify-content: space-between;
@ -3986,7 +3991,7 @@ img:not([src]), img[src=''] {
height: 16px;
background-color: var(--highlight);
border-radius: 50%;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
box-shadow: 0 2px 6px rgb(0, 0, 0, 0.3);
}
button {
@ -4021,3 +4026,9 @@ img:not([src]), img[src=''] {
transform: none !important;
}
}
@media (max-width: 1024px) {
.player-controls .progress-container {
order: -1;
}
}

28
vite.config.js
View file

@ -1,25 +1,25 @@
import { defineConfig } from "vite";
import { VitePWA } from "vite-plugin-pwa";
import { defineConfig } from 'vite';
import { VitePWA } from 'vite-plugin-pwa';
export default defineConfig({
base: "./",
base: './',
build: {
outDir: "dist",
outDir: 'dist',
emptyOutDir: true,
},
plugins: [
VitePWA({
registerType: "prompt",
registerType: 'prompt',
workbox: {
globPatterns: ["**/*.{js,css,html,ico,png,svg,json}"],
globPatterns: ['**/*.{js,css,html,ico,png,svg,json}'],
cleanupOutdatedCaches: true,
// Define runtime caching strategies
runtimeCaching: [
{
urlPattern: ({ request }) => request.destination === "image",
handler: "CacheFirst",
urlPattern: ({ request }) => request.destination === 'image',
handler: 'CacheFirst',
options: {
cacheName: "images",
cacheName: 'images',
expiration: {
maxEntries: 100,
maxAgeSeconds: 60 * 24 * 60 * 60, // 60 Days
@ -27,12 +27,10 @@ export default defineConfig({
},
},
{
urlPattern: ({ request }) =>
request.destination === "audio" ||
request.destination === "video",
handler: "CacheFirst",
urlPattern: ({ request }) => request.destination === 'audio' || request.destination === 'video',
handler: 'CacheFirst',
options: {
cacheName: "media",
cacheName: 'media',
expiration: {
maxEntries: 50,
maxAgeSeconds: 60 * 24 * 60 * 60, // 60 Days
@ -42,7 +40,7 @@ export default defineConfig({
},
],
},
includeAssets: ["instances.json", "discord.html"],
includeAssets: ['instances.json', 'discord.html'],
manifest: false, // Use existing public/manifest.json
}),
],