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

refactor(hls/dash): externalize hls.js and dashjs to reduce initial bundle size

Browse source
This commit is contained in:
Daniel 2026-03-19 12:20:41 -05:00
parent e4afdf833c
commit 4e2a595504
10 changed files with 145 additions and 107 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
bun.lock
View file

@ -11,13 +11,15 @@
"@ffmpeg/util": "^0.12.2",
"@kawarp/core": "^1.1.1",
"@neutralinojs/lib": "^6.5.0",
"@svta/common-media-library": "^0.18.1",
"@uimaxbai/am-lyrics": "^1.1.4",
"appwrite": "^23.0.0",
"butterchurn": "^2.6.7",
"butterchurn-presets": "^2.4.7",
"client-zip": "^2.5.0",
"cookie-session": "^2.1.1",
"dashjs": "^5.1.1",
"dashjs": "https://github.com/Dash-Industry-Forum/dash.js/archive/refs/tags/v5.1.1.tar.gz",
"eventemitter3": "^5.0.4",
"fuse.js": "^7.1.0",
"hls.js": "^1.6.15",
"jose": "^6.2.0",
@ -27,6 +29,7 @@
"pocketbase": "^0.26.8",
"simple-icons": "^16.12.0",
"svgo": "^4.0.1",
"url-toolkit": "^2.2.5",
"uuid": "^13.0.0",
},
"devDependencies": {
@ -537,6 +540,8 @@
"@svta/cml-xml": ["@svta/cml-xml@1.0.1", "", { "peerDependencies": { "@svta/cml-utils": "1.0.1" } }, "sha512-11LkJa5kDEcsRMWkVI1ABH3KLCxGoiSVe4kQ293ItVj8ncTTQ7htmCGiJDjS+Cmy35UgF3e/vc0ysJIiWRTx2g=="],
"@svta/common-media-library": ["@svta/common-media-library@0.18.1", "", {}, "sha512-VMj1jI8OWphurcozF+dezABUm9Mht6iAsSiKsFUKVT35fddOowvLoGz23Gx6lEHaAHkDy9o/aVi5s9DSp3K15Q=="],
"@types/estree": ["@types/estree@1.0.8", "", {}, "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w=="],
"@types/json-schema": ["@types/json-schema@7.0.15", "", {}, "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA=="],
@ -687,7 +692,7 @@
"d": ["d@1.0.2", "", { "dependencies": { "es5-ext": "^0.10.64", "type": "^2.7.2" } }, "sha512-MOqHvMWF9/9MX6nza0KgvFH4HpMU0EF5uUDXqX/BtxtU8NfB0QzRtJ8Oe/6SuS4kbhyzVJwjd97EA4PKrzJ8bw=="],
"dashjs": ["dashjs@5.1.1", "", { "dependencies": { "@svta/cml-608": "1.0.1", "@svta/cml-cmcd": "1.0.1", "@svta/cml-cmsd": "1.0.1", "@svta/cml-dash": "1.0.1", "@svta/cml-id3": "1.0.1", "@svta/cml-request": "1.0.1", "@svta/cml-xml": "1.0.1", "bcp-47-match": "^2.0.3", "bcp-47-normalize": "^2.3.0", "codem-isoboxer": "0.3.10", "fast-deep-equal": "3.1.3", "html-entities": "^2.5.2", "imsc": "^1.1.5", "localforage": "^1.10.0", "path-browserify": "^1.0.1", "ua-parser-js": "^1.0.37" } }, "sha512-BzNXlUgzEjhuZ5M5hlSp1qIyQHZ7NpXAR0loP9DAAFVZj/ntL1DHeZ7qp/L3bvI4rq50X5indkAZQ3zEHWJoCA=="],
"dashjs": ["dashjs@https://github.com/Dash-Industry-Forum/dash.js/archive/refs/tags/v5.1.1.tar.gz", { "dependencies": { "@svta/cml-608": "1.0.1", "@svta/cml-cmcd": "1.0.1", "@svta/cml-cmsd": "1.0.1", "@svta/cml-dash": "1.0.1", "@svta/cml-id3": "1.0.1", "@svta/cml-request": "1.0.1", "@svta/cml-xml": "1.0.1", "bcp-47-match": "^2.0.3", "bcp-47-normalize": "^2.3.0", "codem-isoboxer": "0.3.10", "fast-deep-equal": "3.1.3", "html-entities": "^2.5.2", "imsc": "^1.1.5", "localforage": "^1.10.0", "path-browserify": "^1.0.1", "ua-parser-js": "^1.0.37" } }, "sha512-lhD1tvEe4PO6t086flm6WfO2Jt1EOIolDQ17F3vLomMthaL1RH96h8peIQTvrDvfSJTRXeisL+CwPj4oud5e9g=="],
"data-view-buffer": ["data-view-buffer@1.0.2", "", { "dependencies": { "call-bound": "^1.0.3", "es-errors": "^1.3.0", "is-data-view": "^1.0.2" } }, "sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ=="],
@ -791,6 +796,8 @@
"event-emitter": ["event-emitter@0.3.5", "", { "dependencies": { "d": "1", "es5-ext": "~0.10.14" } }, "sha512-D9rRn9y7kLPnJ+hMq7S/nhvoKwwvVJahBi2BPmx3bvbsEdK3W9ii8cBSGjP+72/LnM4n6fo3+dkCX5FeTQruXA=="],
"eventemitter3": ["eventemitter3@5.0.4", "", {}, "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw=="],
"ext": ["ext@1.7.0", "", { "dependencies": { "type": "^2.7.2" } }, "sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw=="],
"fast-deep-equal": ["fast-deep-equal@3.1.3", "", {}, "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="],
@ -1401,6 +1408,8 @@
"uri-js": ["uri-js@4.4.1", "", { "dependencies": { "punycode": "^2.1.0" } }, "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg=="],
"url-toolkit": ["url-toolkit@2.2.5", "", {}, "sha512-mtN6xk+Nac+oyJ/PrI7tzfmomRVNFIWKUbG8jdYFt52hxbiReFAXIjYskvu64/dvuW71IcB7lV8l0HvZMac6Jg=="],
"utf-8-validate": ["utf-8-validate@5.0.10", "", { "dependencies": { "node-gyp-build": "^4.3.0" } }, "sha512-Z6czzLq4u8fPOyx7TU6X3dvUZVvoJmxSQ+IcrlmagKhilxlhZgxPK6C5Jqbkw1IDUmFTM+cz9QDnnLTwDz/2gQ=="],
"util-deprecate": ["util-deprecate@1.0.2", "", {}, "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="],

13
js/app.js
View file

@ -416,6 +416,7 @@ document.addEventListener('DOMContentLoaded', async () => {
const currentQuality = localStorage.getItem('playback-quality') || 'HI_RES_LOSSLESS';
const player = new Player(audioPlayer, api, currentQuality);
await player.init();
window.monochromePlayer = player;
// Initialize tracker
@ -1136,7 +1137,7 @@ document.addEventListener('DOMContentLoaded', async () => {
const shuffleBtn = document.getElementById('shuffle-btn');
if (shuffleBtn) shuffleBtn.classList.remove('active');
player.shuffleActive = false;
player.playTrackFromQueue();
await player.playTrackFromQueue();
}
} catch (error) {
console.error('Failed to play album:', error);
@ -1167,7 +1168,7 @@ document.addEventListener('DOMContentLoaded', async () => {
const shuffleBtn = document.getElementById('shuffle-btn');
if (shuffleBtn) shuffleBtn.classList.remove('active');
player.shuffleActive = false;
player.playTrackFromQueue();
await player.playTrackFromQueue();
const { showNotification } = await loadDownloadsModule();
showNotification('Shuffling album');
@ -1235,7 +1236,7 @@ document.addEventListener('DOMContentLoaded', async () => {
const shuffleBtn = document.getElementById('shuffle-btn');
if (shuffleBtn) shuffleBtn.classList.remove('active');
player.shuffleActive = false;
player.playTrackFromQueue();
await player.playTrackFromQueue();
const { showNotification } = await loadDownloadsModule();
showNotification('Shuffling artist discography');
@ -2183,7 +2184,7 @@ document.addEventListener('DOMContentLoaded', async () => {
if (tracks.length > 0) {
player.setQueue(tracks, 0);
document.getElementById('shuffle-btn').classList.remove('active');
player.playTrackFromQueue();
await player.playTrackFromQueue();
}
} catch (error) {
console.error('Failed to play playlist:', error);
@ -2369,7 +2370,7 @@ document.addEventListener('DOMContentLoaded', async () => {
}
player.setQueue(allTracks, 0);
player.playTrackFromQueue();
await player.playTrackFromQueue();
} else {
throw new Error('No tracks found across all albums');
}
@ -2398,7 +2399,7 @@ document.addEventListener('DOMContentLoaded', async () => {
}
player.setQueue(likedTracks, 0);
document.getElementById('shuffle-btn').classList.remove('active');
player.playTrackFromQueue();
await player.playTrackFromQueue();
}
} catch (error) {
console.error('Failed to shuffle liked tracks:', error);

86
js/commandPalette.js
View file

@ -66,15 +66,15 @@ class CommandPalette {
}
init() {
document.addEventListener('keydown', (e) => {
document.addEventListener('keydown', async (e) => {
if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
e.preventDefault();
this.toggle();
await this.toggle();
}
});
this.input.addEventListener('input', () => this.handleInput());
this.input.addEventListener('keydown', (e) => this.handleKeydown(e));
this.input.addEventListener('keydown', async (e) => await this.handleKeydown(e));
this.overlay.addEventListener('click', (e) => {
if (e.target === this.overlay) this.close();
@ -83,17 +83,17 @@ class CommandPalette {
this.cacheAllSettings();
}
toggle() {
async toggle() {
if (this.isOpen) this.close();
else this.open();
else await this.open();
}
open() {
async open() {
this.isOpen = true;
this.overlay.style.display = 'flex';
this.input.value = '>';
this.input.focus();
this.handleInput();
await this.handleInput();
}
close() {
@ -101,18 +101,18 @@ class CommandPalette {
this.overlay.style.display = 'none';
}
handleInput() {
async handleInput() {
const value = this.input.value;
this.selectedIndex = 0;
if (!value.startsWith('>')) {
this.renderResults([
await this.renderResults([
{
name: 'Type > to use commands',
description: 'e.g. >theme White, >play The Whole World Is Free',
action: () => {
action: async () => {
this.input.value = '>';
this.handleInput();
await this.handleInput();
},
type: 'hint',
},
@ -124,7 +124,7 @@ class CommandPalette {
const match = fullQuery.match(/^(\S+)(?:\s+(.*))?$/);
if (!match) {
this.renderDefaultCommands();
await this.renderDefaultCommands();
return;
}
@ -140,7 +140,7 @@ class CommandPalette {
return;
}
this.renderResults([
await this.renderResults([
{
name: `Execute: ${command.name} ${args}`,
description: args ? `Run ${command.name} for "${args}"` : command.description,
@ -153,11 +153,11 @@ class CommandPalette {
this.debouncedSearch(cmdName, args.trim());
}
} else {
this.renderDefaultCommands(cmdName);
await this.renderDefaultCommands(cmdName);
}
}
handleKeydown(e) {
async handleKeydown(e) {
if (e.key === 'ArrowDown') {
e.preventDefault();
this.selectedIndex = Math.min(this.selectedIndex + 1, this.results.length - 1);
@ -168,13 +168,13 @@ class CommandPalette {
this.updateSelection();
} else if (e.key === 'Enter') {
e.preventDefault();
this.executeSelected();
await this.executeSelected();
} else if (e.key === 'Escape') {
this.close();
}
}
renderDefaultCommands(filter = '') {
async renderDefaultCommands(filter = '') {
let cmds = this.commands;
if (filter) {
if (Fuse) {
@ -185,20 +185,20 @@ class CommandPalette {
}
}
this.renderResults(
await this.renderResults(
cmds.map((c) => ({
name: c.name,
description: c.description,
action: () => {
action: async () => {
this.input.value = `>${c.name} `;
this.handleInput();
await this.handleInput();
},
type: 'command',
}))
);
}
renderResults(results) {
async renderResults(results) {
this.results = results;
this.resultsContainer.innerHTML = '';
@ -222,9 +222,9 @@ class CommandPalette {
<div style="display: flex; flex-direction: column;"><span class="command-result-name" style="font-weight: 500;">${result.name}</span><span class="command-result-desc" style="font-size: 0.8rem; opacity: 0.7;">${result.description || ''}</span></div>
</div>
`;
div.addEventListener('click', () => {
div.addEventListener('click', async () => {
this.selectedIndex = index;
this.executeSelected();
await this.executeSelected();
});
this.resultsContainer.appendChild(div);
});
@ -242,16 +242,16 @@ class CommandPalette {
});
}
executeSelected() {
async executeSelected() {
const result = this.results[this.selectedIndex];
if (result && result.action) {
result.action();
await result.action();
if (result.type !== 'hint') {
this.close();
}
} else if (result && result.type === 'command') {
this.input.value = `>${result.name} `;
this.handleInput();
await this.handleInput();
}
}
@ -273,7 +273,7 @@ class CommandPalette {
showNotification(message);
}
handleQueue(args) {
async handleQueue(args) {
const player = window.monochromePlayer;
const ui = window.monochromeUi;
@ -283,7 +283,7 @@ class CommandPalette {
}
if (!args || !args.trim()) {
this.renderResults(
await this.renderResults(
[
{ name: '>queue wipe', description: 'Clear the queue and stop playback' },
{ name: '>queue like all', description: 'Like all tracks in the current queue' },
@ -291,9 +291,9 @@ class CommandPalette {
].map((c) => ({
...c,
type: 'command',
action: () => {
action: async () => {
this.input.value = c.name;
this.handleInput();
await this.handleInput();
},
}))
);
@ -358,11 +358,11 @@ class CommandPalette {
this.close();
}
handleNavigation(args) {
async handleNavigation(args) {
const validPages = ['home', 'library', 'recent', 'settings', 'unreleased', 'about', 'download'];
if (!args || !args.trim()) {
this.renderResults(
await this.renderResults(
validPages.map((p) => ({
name: `>go ${p}`,
description: `Navigate to ${p}`,
@ -386,9 +386,9 @@ class CommandPalette {
}
}
handleSleepTimer(args) {
async handleSleepTimer(args) {
if (!args || !args.trim()) {
this.renderResults(
await this.renderResults(
[15, 30, 45, 60, 120].map((m) => ({
name: `>sleep ${m}`,
description: `Set sleep timer for ${m} minutes`,
@ -418,7 +418,7 @@ class CommandPalette {
}
}
handleQuality(args) {
async handleQuality(args) {
const qualityMap = {
low: 'LOW',
high: 'HIGH',
@ -452,7 +452,7 @@ class CommandPalette {
action: () => {},
type: 'hint',
});
this.renderResults(results);
await this.renderResults(results);
return;
}
@ -524,7 +524,7 @@ class CommandPalette {
async handleVisualizer(args) {
if (!args || !args.trim()) {
this.renderResults(
await this.renderResults(
[
{ name: '>visualizer toggle', description: 'Toggle visualizer on/off', cmd: 'toggle' },
{ name: '>visualizer butterchurn', description: 'Set preset to Butterchurn', cmd: 'butterchurn' },
@ -630,7 +630,7 @@ class CommandPalette {
const query = args.trim().toLowerCase();
if (!query) {
this.renderResults(
await this.renderResults(
this.allSettings.map((setting) => ({
name: setting.label,
description: `[${setting.tab}] ${setting.description}`,
@ -659,7 +659,7 @@ class CommandPalette {
return;
}
this.renderResults(
await this.renderResults(
results.map((setting) => ({
name: setting.label,
description: `[${setting.tab}] ${setting.description}`,
@ -713,9 +713,9 @@ class CommandPalette {
name: track.title,
description: `${track.artist?.name || 'Unknown'} • ${track.album?.title || 'Unknown'}`,
image: api.getCoverUrl(track.album?.cover, 80),
action: () => {
action: async () => {
window.monochromePlayer.setQueue([track], 0);
window.monochromePlayer.playTrackFromQueue();
await window.monochromePlayer.playTrackFromQueue();
this.close();
},
type: 'result',
@ -769,7 +769,7 @@ class CommandPalette {
}
if (this.isOpen && results.length > 0) {
this.renderResults(results);
await this.renderResults(results);
}
}
@ -782,7 +782,7 @@ class CommandPalette {
if (results.items.length > 0) {
const track = results.items[0];
window.monochromePlayer.setQueue([track], 0);
window.monochromePlayer.playTrackFromQueue();
await window.monochromePlayer.playTrackFromQueue();
this.close();
}
}

1
js/dash-media-player.ts Normal file
View file

@ -0,0 +1 @@
export { default as MediaPlayer } from '!/dashjs/src/streaming/MediaPlayer.js';

23
js/player.js
View file

@ -1,5 +1,4 @@
//js/player.js
import { MediaPlayer } from 'dashjs';
import {
REPEAT_MODE,
formatTime,
@ -20,7 +19,8 @@ import {
} from './storage.js';
import { audioContextManager } from './audio-context.js';
import { db } from './db.js';
import Hls from 'hls.js';
import('./dash-media-player.js');
import { SVG_CLOCK } from './icons.js';
export class Player {
constructor(audioElement, api, quality = 'HI_RES_LOSSLESS') {
@ -52,7 +52,9 @@ export class Player {
this.sleepTimer = null;
this.sleepTimerEndTime = null;
this.sleepTimerInterval = null;
}
async init() {
// Apply audio effects when track is ready
this.audio.addEventListener('canplay', () => {
this.applyAudioEffects();
@ -64,6 +66,7 @@ export class Player {
}
// Initialize dash.js player
const { MediaPlayer } = await import('./dash-media-player.js');
this.dashPlayer = MediaPlayer().create();
this.dashPlayer.updateSettings({
streaming: {
@ -452,8 +455,9 @@ export class Player {
}
}
setupHlsVideo(video, result, fallbackImg) {
async setupHlsVideo(video, result, fallbackImg) {
const url = result.videoUrl || result.hlsUrl || result;
const Hls = (await import('hls.js')).default;
if (!url) return;
if (this.hls) {
@ -471,9 +475,9 @@ export class Player {
this.hls = new Hls();
this.hls.loadSource(url);
this.hls.attachMedia(video);
this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
this.hls.on(Hls.Events.MANIFEST_PARSED, async () => {
video.play().catch(() => {});
this.setupVideoQualitySelector();
await this.setupVideoQualitySelector();
});
this.hls.on(Hls.Events.ERROR, (event, data) => {
if (data.fatal) {
@ -490,9 +494,9 @@ export class Player {
}
} else {
video.src = url;
video.onerror = () => {
video.onerror = async () => {
if (result && result.hlsUrl) {
this.setupHlsVideo(video, { videoUrl: null, hlsUrl: result.hlsUrl }, fallbackImg);
await this.setupHlsVideo(video, { videoUrl: null, hlsUrl: result.hlsUrl }, fallbackImg);
} else if (fallbackImg) {
video.replaceWith(fallbackImg);
}
@ -500,8 +504,9 @@ export class Player {
}
}
setupVideoQualitySelector() {
async setupVideoQualitySelector() {
if (!this.hls || !this.hls.levels || this.hls.levels.length === 0) return;
const Hls = (await import('hls.js')).default;
const qualityBtn = document.getElementById('fs-quality-btn');
const qualityMenu = document.getElementById('fs-quality-menu');
@ -802,7 +807,7 @@ export class Player {
if (this.playbackSequence !== currentSequence) return;
if (streamUrl.includes('.m3u8') || streamUrl.includes('application/vnd.apple.mpegurl')) {
this.setupHlsVideo(activeElement, streamUrl, null);
await this.setupHlsVideo(activeElement, streamUrl, null);
} else if (streamUrl.startsWith('blob:') || streamUrl.includes('.mpd')) {
this.dashPlayer.initialize(activeElement, streamUrl, false);
this.dashInitialized = true;

82
js/ui.js
View file

@ -44,7 +44,6 @@ import {
createTrackFromSong,
} from './tracker.js';
import { trackSearch, trackChangeSort } from './analytics.js';
import Hls from 'hls.js';
fontSettings.applyFont();
fontSettings.applyFontSize();
@ -2652,12 +2651,13 @@ export class UIRenderer {
return items.filter((item) => !favoriteIds.has(item.id));
}
setupHlsVideo(video, result, fallbackImg) {
async setupHlsVideo(video, result, fallbackImg) {
if (!result) return;
const url = typeof result === 'string' ? result : result.videoUrl || result.hlsUrl;
if (!url) return;
if (url.endsWith('.m3u8')) {
const Hls = (await import('hls.js')).default;
if (Hls.isSupported()) {
const hls = new Hls();
video._hls = hls;
@ -2692,17 +2692,17 @@ export class UIRenderer {
video.play().catch(() => {});
});
}
video.onerror = () => {
video.onerror = async () => {
if (result.hlsUrl) {
// HLS fallback (for some reason alot of animated covers js dont work on MP4 lol)
this.setupHlsVideo(video, { videoUrl: null, hlsUrl: result.hlsUrl }, fallbackImg);
await this.setupHlsVideo(video, { videoUrl: null, hlsUrl: result.hlsUrl }, fallbackImg);
} else {
video.replaceWith(fallbackImg);
}
};
}
replaceVideoArtwork(container, type, id, result) {
async replaceVideoArtwork(container, type, id, result) {
const url = result.videoUrl || result.hlsUrl;
if (!url) return;
@ -2722,9 +2722,9 @@ export class UIRenderer {
video.poster = img.src;
video.onerror = () => {
video.onerror = async () => {
if (video.src === result.videoUrl && result.hlsUrl) {
this.setupHlsVideo(video, { videoUrl: null, hlsUrl: result.hlsUrl }, img);
await this.setupHlsVideo(video, { videoUrl: null, hlsUrl: result.hlsUrl }, img);
return;
}
video.replaceWith(img);
@ -2732,9 +2732,9 @@ export class UIRenderer {
video.addEventListener(
'error',
(e) => {
async (e) => {
if (video.src === result.videoUrl && result.hlsUrl) {
this.setupHlsVideo(video, { videoUrl: null, hlsUrl: result.hlsUrl }, img);
await this.setupHlsVideo(video, { videoUrl: null, hlsUrl: result.hlsUrl }, img);
return;
}
console.warn('Video decoding error:', e);
@ -2745,7 +2745,7 @@ export class UIRenderer {
img.replaceWith(video);
this.setupHlsVideo(video, result, img);
await this.setupHlsVideo(video, result, img);
}
}
@ -2999,7 +2999,7 @@ export class UIRenderer {
if (!videoCoverUrl && tracks.length > 0) {
const firstTrack = tracks[0];
this.api.getVideoArtwork(firstTrack.title, getTrackArtists(firstTrack)).then((result) => {
this.api.getVideoArtwork(firstTrack.title, getTrackArtists(firstTrack)).then(async (result) => {
if (result && this.currentPage === 'album' && this.currentAlbumId === albumId) {
const url = result.videoUrl || result.hlsUrl;
if (!url) return;
@ -3017,7 +3017,7 @@ export class UIRenderer {
video.style.opacity = '1';
video.poster = currentImageEl.src;
this.setupHlsVideo(video, result, currentImageEl);
await this.setupHlsVideo(video, result, currentImageEl);
currentImageEl.replaceWith(video);
}
}
@ -3036,10 +3036,10 @@ export class UIRenderer {
video.preload = 'auto';
video.className = imageEl.className;
video.id = imageEl.id;
this.setupHlsVideo(video, videoCoverUrl, imageEl);
await this.setupHlsVideo(video, videoCoverUrl, imageEl);
imageEl.replaceWith(video);
} else {
this.setupHlsVideo(imageEl, videoCoverUrl, null);
await this.setupHlsVideo(imageEl, videoCoverUrl, null);
}
} else {
if (imageEl.tagName === 'VIDEO') {
@ -3788,30 +3788,32 @@ export class UIRenderer {
if (!videoCoverUrl && (firstTrack.album || firstTrack.type === 'video')) {
const fetchArtwork = () => {
this.api.getVideoArtwork(firstTrack.title, getTrackArtists(firstTrack)).then((result) => {
if (result && this.currentPage === 'mix' && this.currentMixId === mixId) {
const url = result.videoUrl || result.hlsUrl;
if (!url) return;
firstTrack.album = firstTrack.album || {};
firstTrack.album.videoCoverUrl = url;
const currentImageEl = document.getElementById('mix-detail-image');
if (currentImageEl && currentImageEl.tagName !== 'VIDEO') {
const video = document.createElement('video');
video.autoplay = true;
video.loop = true;
video.muted = true;
video.playsInline = true;
video.preload = 'auto';
video.className = currentImageEl.className;
video.id = currentImageEl.id;
video.style.opacity = '1';
video.poster = currentImageEl.src;
this.api
.getVideoArtwork(firstTrack.title, getTrackArtists(firstTrack))
.then(async (result) => {
if (result && this.currentPage === 'mix' && this.currentMixId === mixId) {
const url = result.videoUrl || result.hlsUrl;
if (!url) return;
firstTrack.album = firstTrack.album || {};
firstTrack.album.videoCoverUrl = url;
const currentImageEl = document.getElementById('mix-detail-image');
if (currentImageEl && currentImageEl.tagName !== 'VIDEO') {
const video = document.createElement('video');
video.autoplay = true;
video.loop = true;
video.muted = true;
video.playsInline = true;
video.preload = 'auto';
video.className = currentImageEl.className;
video.id = currentImageEl.id;
video.style.opacity = '1';
video.poster = currentImageEl.src;
this.setupHlsVideo(video, result, currentImageEl);
currentImageEl.replaceWith(video);
await this.setupHlsVideo(video, result, currentImageEl);
currentImageEl.replaceWith(video);
}
}
}
});
});
};
if (firstTrack.type === 'video') {
@ -5141,7 +5143,7 @@ export class UIRenderer {
if (!videoCoverUrl && (track.album || track.type === 'video')) {
const fetchArtwork = () => {
this.api.getVideoArtwork(track.title, getTrackArtists(track)).then((result) => {
this.api.getVideoArtwork(track.title, getTrackArtists(track)).then(async (result) => {
if (result && this.currentPage === 'track' && this.currentTrackPageId === track.id) {
const url = result.videoUrl || result.hlsUrl;
if (!url) return;
@ -5160,7 +5162,7 @@ export class UIRenderer {
video.style.opacity = '1';
video.poster = currentImageEl.src;
this.setupHlsVideo(video, result, currentImageEl);
await this.setupHlsVideo(video, result, currentImageEl);
currentImageEl.replaceWith(video);
}
}
@ -5196,10 +5198,10 @@ export class UIRenderer {
video.preload = 'auto';
video.className = imageEl.className;
video.id = imageEl.id;
this.setupHlsVideo(video, videoCoverUrl, imageEl);
await this.setupHlsVideo(video, videoCoverUrl, imageEl);
imageEl.replaceWith(video);
} else {
this.setupHlsVideo(imageEl, videoCoverUrl, null);
await this.setupHlsVideo(imageEl, videoCoverUrl, null);
}
} else {
if (imageEl.tagName === 'VIDEO') {

25
package-lock.json generated
View file

@ -15,13 +15,15 @@
"@ffmpeg/util": "^0.12.2",
"@kawarp/core": "^1.1.1",
"@neutralinojs/lib": "^6.5.0",
"@svta/common-media-library": "^0.18.1",
"@uimaxbai/am-lyrics": "^1.1.4",
"appwrite": "^23.0.0",
"butterchurn": "^2.6.7",
"butterchurn-presets": "^2.4.7",
"client-zip": "^2.5.0",
"cookie-session": "^2.1.1",
"dashjs": "^5.1.1",
"dashjs": "https://github.com/Dash-Industry-Forum/dash.js/archive/refs/tags/v5.1.1.tar.gz",
"eventemitter3": "^5.0.4",
"fuse.js": "^7.1.0",
"hls.js": "^1.6.15",
"jose": "^6.2.0",
@ -31,6 +33,7 @@
"pocketbase": "^0.26.8",
"simple-icons": "^16.12.0",
"svgo": "^4.0.1",
"url-toolkit": "^2.2.5",
"uuid": "^13.0.0"
},
"devDependencies": {
@ -3774,6 +3777,13 @@
"@svta/cml-utils": "1.0.1"
}
},
"node_modules/@svta/common-media-library": {
"version": "0.18.1",
"license": "Apache-2.0",
"engines": {
"node": ">=20"
}
},
"node_modules/@types/estree": {
"version": "1.0.8",
"dev": true,
@ -4598,6 +4608,8 @@
},
"node_modules/dashjs": {
"version": "5.1.1",
"resolved": "https://github.com/Dash-Industry-Forum/dash.js/archive/refs/tags/v5.1.1.tar.gz",
"integrity": "sha512-lhD1tvEe4PO6t086flm6WfO2Jt1EOIolDQ17F3vLomMthaL1RH96h8peIQTvrDvfSJTRXeisL+CwPj4oud5e9g==",
"license": "BSD-3-Clause",
"dependencies": {
"@svta/cml-608": "1.0.1",
@ -5327,6 +5339,10 @@
"es5-ext": "~0.10.14"
}
},
"node_modules/eventemitter3": {
"version": "5.0.4",
"license": "MIT"
},
"node_modules/ext": {
"version": "1.7.0",
"dev": true,
@ -5518,11 +5534,8 @@
},
"node_modules/flatted": {
"version": "3.4.2",
<<<<<<< svg-refactor
=======
"resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz",
"integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==",
>>>>>>> main
"dev": true,
"license": "ISC"
},
@ -10813,6 +10826,10 @@
"punycode": "^2.1.0"
}
},
"node_modules/url-toolkit": {
"version": "2.2.5",
"license": "Apache-2.0"
},
"node_modules/utf-8-validate": {
"version": "5.0.10",
"dev": true,

5
package.json
View file

@ -57,13 +57,15 @@
"@ffmpeg/util": "^0.12.2",
"@kawarp/core": "^1.1.1",
"@neutralinojs/lib": "^6.5.0",
"@svta/common-media-library": "^0.18.1",
"@uimaxbai/am-lyrics": "^1.1.4",
"appwrite": "^23.0.0",
"butterchurn": "^2.6.7",
"butterchurn-presets": "^2.4.7",
"client-zip": "^2.5.0",
"cookie-session": "^2.1.1",
"dashjs": "^5.1.1",
"dashjs": "https://github.com/Dash-Industry-Forum/dash.js/archive/refs/tags/v5.1.1.tar.gz",
"eventemitter3": "^5.0.4",
"fuse.js": "^7.1.0",
"hls.js": "^1.6.15",
"jose": "^6.2.0",
@ -73,6 +75,7 @@
"pocketbase": "^0.26.8",
"simple-icons": "^16.12.0",
"svgo": "^4.0.1",
"url-toolkit": "^2.2.5",
"uuid": "^13.0.0"
}
}

1
stream-stub.js Normal file
View file

@ -0,0 +1 @@
export function Stream() {}

3
vite.config.ts
View file

@ -5,7 +5,6 @@ import authGatePlugin from './vite-plugin-auth-gate.js';
import path from 'path';
import uploadPlugin from './vite-plugin-upload.js';
import blobAssetPlugin from './vite-plugin-blob.js';
import injectHTML from 'vite-plugin-html-inject';
import svgUse from './vite-plugin-svg-use.js';
export default defineConfig(({ mode }) => {
@ -23,6 +22,7 @@ export default defineConfig(({ mode }) => {
'!': '/node_modules',
pocketbase: '/node_modules/pocketbase/dist/pocketbase.es.js',
stream: path.resolve(__dirname, 'stream-stub.js'), // Stub for stream module
},
},
optimizeDeps: {
@ -50,7 +50,6 @@ export default defineConfig(({ mode }) => {
uploadPlugin(),
blobAssetPlugin(),
svgUse(),
injectHTML(),
VitePWA({
registerType: 'prompt',
workbox: {