refactor(hls/dash): externalize hls.js and dashjs to reduce initial bundle size
This commit is contained in:
Daniel
parent
e4afdf833c
commit
4e2a595504
10 changed files with 145 additions and 107 deletions
13
bun.lock
13
bun.lock
|
|
@ -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
13
js/app.js
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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
1
js/dash-media-player.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export { default as MediaPlayer } from '!/dashjs/src/streaming/MediaPlayer.js';
|
||||
23
js/player.js
23
js/player.js
|
|
@ -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;
|
||||
|
|
|
|||
42
js/ui.js
42
js/ui.js
|
|
@ -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,7 +3788,9 @@ export class UIRenderer {
|
|||
|
||||
if (!videoCoverUrl && (firstTrack.album || firstTrack.type === 'video')) {
|
||||
const fetchArtwork = () => {
|
||||
this.api.getVideoArtwork(firstTrack.title, getTrackArtists(firstTrack)).then((result) => {
|
||||
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;
|
||||
|
|
@ -3807,7 +3809,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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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
25
package-lock.json
generated
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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
1
stream-stub.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
export function Stream() {}
|
||||
|
|
@ -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: {
|
||||
|
|
|
|||
Loading…
Reference in a new issue