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

refactor: adjust imports to allow for file splitting

Browse source 
- dynamically import router
- dynamically import visualizers
- update import syntax for am-lyrics to use dynamic import syntax
This commit is contained in:
Daniel 2026-03-18 10:34:58 -05:00
parent 4e2a595504
commit c19dbcf52a
5 changed files with 49 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
js/commandPalette.js
View file

@ -1,6 +1,7 @@
import { debounce } from './utils.js'; import { debounce } from './utils.js';
import { db } from './db.js'; import { db } from './db.js';
import Fuse from 'fuse.js'; import Fuse from 'fuse.js';
import { navigate } from './router.js';
class CommandPalette { class CommandPalette {
constructor() { constructor() {
@ -368,7 +369,7 @@ class CommandPalette {
description: `Navigate to ${p}`, description: `Navigate to ${p}`,
action: () => { action: () => {
this.close(); this.close();
import('./router.js').then((m) => m.navigate(p === 'home' ? '/' : `/${p}`)); navigate(p === 'home' ? '/' : `/${p}`);
}, },
type: 'command', type: 'command',
})) }))
@ -380,7 +381,7 @@ class CommandPalette {
if (validPages.includes(page)) { if (validPages.includes(page)) {
this.close(); this.close();
import('./router.js').then((m) => m.navigate(page === 'home' ? '/' : `/${page}`)); navigate(page === 'home' ? '/' : `/${page}`);
} else { } else {
this.showNotification(`Unknown page: ${page}`); this.showNotification(`Unknown page: ${page}`);
} }
@ -673,8 +674,7 @@ class CommandPalette {
} }
async navigateToSetting(setting) { async navigateToSetting(setting) {
const router = await import('./router.js'); navigate('/settings');
router.navigate('/settings');
await new Promise((resolve) => setTimeout(resolve, 100)); await new Promise((resolve) => setTimeout(resolve, 100));

2
js/lyrics.js
View file

@ -10,7 +10,7 @@ import {
SVG_GLOBE, SVG_GLOBE,
} from './icons.js'; } from './icons.js';
import { sidePanelManager } from './side-panel.js'; import { sidePanelManager } from './side-panel.js';
import '@uimaxbai/am-lyrics/am-lyrics.js'; import('@uimaxbai/am-lyrics/am-lyrics.js');
// Check if text contains Japanese, Chinese, or Korean characters // Check if text contains Japanese, Chinese, or Korean characters
function containsAsianText(text) { function containsAsianText(text) {

44
js/settings.js
View file

@ -37,12 +37,16 @@ import {
modalSettings, modalSettings,
} from './storage.js'; } from './storage.js';
import { audioContextManager, EQ_PRESETS } from './audio-context.js'; import { audioContextManager, EQ_PRESETS } from './audio-context.js';
import { getButterchurnPresets } from './visualizers/butterchurn.js';
import { db } from './db.js'; import { db } from './db.js';
import { authManager } from './accounts/auth.js'; import { authManager } from './accounts/auth.js';
import { syncManager } from './accounts/pocketbase.js'; import { syncManager } from './accounts/pocketbase.js';
import { containerFormats, customFormats } from './ffmpegFormats.ts'; import { containerFormats, customFormats } from './ffmpegFormats.ts';
async function getButterchurnPresets(...args) {
const butterchurnModule = await import('./visualizers/butterchurn.js');
return butterchurnModule.getButterchurnPresets(...args);
}
export function initializeSettings(scrobbler, player, api, ui) { export function initializeSettings(scrobbler, player, api, ui) {
// Restore last active settings tab // Restore last active settings tab
const savedTab = settingsUiState.getActiveTab(); const savedTab = settingsUiState.getActiveTab();
@ -2311,7 +2315,7 @@ export function initializeSettings(scrobbler, player, api, ui) {
const butterchurnDurationInput = document.getElementById('butterchurn-duration-input'); const butterchurnDurationInput = document.getElementById('butterchurn-duration-input');
const butterchurnRandomizeToggle = document.getElementById('butterchurn-randomize-toggle'); const butterchurnRandomizeToggle = document.getElementById('butterchurn-randomize-toggle');
const updateButterchurnSettingsVisibility = () => { const updateButterchurnSettingsVisibility = async () => {
const isEnabled = visualizerEnabledToggle ? visualizerEnabledToggle.checked : false; const isEnabled = visualizerEnabledToggle ? visualizerEnabledToggle.checked : false;
const isButterchurn = visualizerPresetSelect ? visualizerPresetSelect.value === 'butterchurn' : false; const isButterchurn = visualizerPresetSelect ? visualizerPresetSelect.value === 'butterchurn' : false;
const show = isEnabled && isButterchurn; const show = isEnabled && isButterchurn;
@ -2327,7 +2331,7 @@ export function initializeSettings(scrobbler, player, api, ui) {
if (butterchurnRandomizeSetting) butterchurnRandomizeSetting.style.display = showSubSettings ? 'flex' : 'none'; if (butterchurnRandomizeSetting) butterchurnRandomizeSetting.style.display = showSubSettings ? 'flex' : 'none';
// Populate preset list using module-level cache (works even before visualizer initializes) // Populate preset list using module-level cache (works even before visualizer initializes)
const { keys: presetNames } = getButterchurnPresets(); const { keys: presetNames } = await getButterchurnPresets();
const select = butterchurnSpecificPresetSelect; const select = butterchurnSpecificPresetSelect;
if (select && presetNames.length > 0) { if (select && presetNames.length > 0) {
@ -2362,7 +2366,7 @@ export function initializeSettings(scrobbler, player, api, ui) {
} }
}; };
const updateVisualizerSettingsVisibility = (enabled) => { const updateVisualizerSettingsVisibility = async (enabled) => {
const display = enabled ? 'flex' : 'none'; const display = enabled ? 'flex' : 'none';
if (visualizerModeSetting) visualizerModeSetting.style.display = display; if (visualizerModeSetting) visualizerModeSetting.style.display = display;
if (visualizerSmartIntensitySetting) visualizerSmartIntensitySetting.style.display = display; if (visualizerSmartIntensitySetting) visualizerSmartIntensitySetting.style.display = display;
@ -2370,7 +2374,7 @@ export function initializeSettings(scrobbler, player, api, ui) {
if (visualizerPresetSetting) visualizerPresetSetting.style.display = display; if (visualizerPresetSetting) visualizerPresetSetting.style.display = display;
// Also update Butterchurn specific visibility // Also update Butterchurn specific visibility
updateButterchurnSettingsVisibility(); await updateButterchurnSettingsVisibility();
}; };
// Initialize preset select value early so visibility logic works correctly on load // Initialize preset select value early so visibility logic works correctly on load
@ -2381,24 +2385,24 @@ export function initializeSettings(scrobbler, player, api, ui) {
if (visualizerEnabledToggle) { if (visualizerEnabledToggle) {
visualizerEnabledToggle.checked = visualizerSettings.isEnabled(); visualizerEnabledToggle.checked = visualizerSettings.isEnabled();
updateVisualizerSettingsVisibility(visualizerEnabledToggle.checked); await updateVisualizerSettingsVisibility(visualizerEnabledToggle.checked);
visualizerEnabledToggle.addEventListener('change', (e) => { visualizerEnabledToggle.addEventListener('change', async (e) => {
visualizerSettings.setEnabled(e.target.checked); visualizerSettings.setEnabled(e.target.checked);
updateVisualizerSettingsVisibility(e.target.checked); await updateVisualizerSettingsVisibility(e.target.checked);
}); });
} }
// Visualizer Preset Select // Visualizer Preset Select
if (visualizerPresetSelect) { if (visualizerPresetSelect) {
// value set above // value set above
visualizerPresetSelect.addEventListener('change', (e) => { visualizerPresetSelect.addEventListener('change', async (e) => {
const val = e.target.value; const val = e.target.value;
visualizerSettings.setPreset(val); visualizerSettings.setPreset(val);
if (ui && ui.visualizer) { if (ui && ui.visualizer) {
ui.visualizer.setPreset(val); ui.visualizer.setPreset(val);
} }
updateButterchurnSettingsVisibility(); await updateButterchurnSettingsVisibility();
//Since changing the preset breaks the visualizer, a location.reload() is added to make sure that it works //Since changing the preset breaks the visualizer, a location.reload() is added to make sure that it works
window.location.reload(); window.location.reload();
@ -2407,9 +2411,9 @@ export function initializeSettings(scrobbler, player, api, ui) {
if (butterchurnCycleToggle) { if (butterchurnCycleToggle) {
butterchurnCycleToggle.checked = visualizerSettings.isButterchurnCycleEnabled(); butterchurnCycleToggle.checked = visualizerSettings.isButterchurnCycleEnabled();
butterchurnCycleToggle.addEventListener('change', (e) => { butterchurnCycleToggle.addEventListener('change', async (e) => {
visualizerSettings.setButterchurnCycleEnabled(e.target.checked); visualizerSettings.setButterchurnCycleEnabled(e.target.checked);
updateButterchurnSettingsVisibility(); await updateButterchurnSettingsVisibility();
}); });
} }
@ -2441,30 +2445,30 @@ export function initializeSettings(scrobbler, player, api, ui) {
} }
// Refresh settings when presets are loaded asynchronously // Refresh settings when presets are loaded asynchronously
window.addEventListener('butterchurn-presets-loaded', () => { window.addEventListener('butterchurn-presets-loaded', async () => {
console.log('[Settings] Butterchurn presets loaded event received'); console.log('[Settings] Butterchurn presets loaded event received');
updateButterchurnSettingsVisibility(); await updateButterchurnSettingsVisibility();
}); });
// Check if presets already cached and update immediately // Check if presets already cached and update immediately
const { keys: cachedKeys } = getButterchurnPresets(); const { keys: cachedKeys } = await getButterchurnPresets();
if (cachedKeys.length > 0) { if (cachedKeys.length > 0) {
console.log('[Settings] Presets already cached, updating dropdown immediately'); console.log('[Settings] Presets already cached, updating dropdown immediately');
updateButterchurnSettingsVisibility(); await updateButterchurnSettingsVisibility();
} }
// Watch for appearance tab becoming active and refresh presets // Watch for appearance tab becoming active and refresh presets
const appearanceTabContent = document.getElementById('settings-tab-appearance'); const appearanceTabContent = document.getElementById('settings-tab-appearance');
if (appearanceTabContent) { if (appearanceTabContent) {
const observer = new MutationObserver((mutations) => { const observer = new MutationObserver(async (mutations) => {
mutations.forEach((mutation) => { for (const mutation of mutations) {
if (mutation.type === 'attributes' && mutation.attributeName === 'class') { if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
if (appearanceTabContent.classList.contains('active')) { if (appearanceTabContent.classList.contains('active')) {
console.log('[Settings] Appearance tab became active, refreshing presets'); console.log('[Settings] Appearance tab became active, refreshing presets');
updateButterchurnSettingsVisibility(); await updateButterchurnSettingsVisibility();
} }
} }
}); }
}); });
observer.observe(appearanceTabContent, { attributes: true }); observer.observe(appearanceTabContent, { attributes: true });
} }

11
js/ui.js
View file

@ -1126,7 +1126,7 @@ export class UIRenderer {
overlay.style.display = 'flex'; overlay.style.display = 'flex';
const startVisualizer = () => { const startVisualizer = async () => {
if (!visualizerSettings.isEnabled()) { if (!visualizerSettings.isEnabled()) {
if (this.visualizer) this.visualizer.stop(); if (this.visualizer) this.visualizer.stop();
return; return;
@ -1136,6 +1136,7 @@ export class UIRenderer {
const canvas = document.getElementById('visualizer-canvas'); const canvas = document.getElementById('visualizer-canvas');
if (canvas) { if (canvas) {
this.visualizer = new Visualizer(canvas, activeElement); this.visualizer = new Visualizer(canvas, activeElement);
await this.visualizer.initPresets();
} }
} }
if (this.visualizer) { if (this.visualizer) {
@ -1150,7 +1151,7 @@ export class UIRenderer {
this.setupUIToggleButton(overlay); this.setupUIToggleButton(overlay);
if (localStorage.getItem('epilepsy-warning-dismissed') === 'true') { if (localStorage.getItem('epilepsy-warning-dismissed') === 'true') {
startVisualizer(); await startVisualizer();
} else { } else {
const modal = document.getElementById('epilepsy-warning-modal'); const modal = document.getElementById('epilepsy-warning-modal');
if (modal) { if (modal) {
@ -1159,17 +1160,17 @@ export class UIRenderer {
const acceptBtn = document.getElementById('epilepsy-accept-btn'); const acceptBtn = document.getElementById('epilepsy-accept-btn');
const cancelBtn = document.getElementById('epilepsy-cancel-btn'); const cancelBtn = document.getElementById('epilepsy-cancel-btn');
acceptBtn.onclick = () => { acceptBtn.onclick = async () => {
modal.classList.remove('active'); modal.classList.remove('active');
localStorage.setItem('epilepsy-warning-dismissed', 'true'); localStorage.setItem('epilepsy-warning-dismissed', 'true');
startVisualizer(); await startVisualizer();
}; };
cancelBtn.onclick = () => { cancelBtn.onclick = () => {
modal.classList.remove('active'); modal.classList.remove('active');
this.closeFullscreenCover(); this.closeFullscreenCover();
}; };
} else { } else {
startVisualizer(); await startVisualizer();
} }
} }
} }

31
js/visualizer.js
View file

@ -1,10 +1,5 @@
// js/visualizer.js // js/visualizer.js
import { visualizerSettings } from './storage.js'; import { visualizerSettings } from './storage.js';
import { LCDPreset } from './visualizers/lcd.js';
import { ParticlesPreset } from './visualizers/particles.js';
import { UnknownPleasuresWebGL } from './visualizers/unknown_pleasures_webgl.js';
import { ButterchurnPreset } from './visualizers/butterchurn.js';
import { KawarpPreset } from './visualizers/kawarp.js';
import { audioContextManager } from './audio-context.js'; import { audioContextManager } from './audio-context.js';
export class Visualizer { export class Visualizer {
@ -12,21 +7,10 @@ export class Visualizer {
this.canvas = canvas; this.canvas = canvas;
this.ctx = null; this.ctx = null;
this.audio = audio; this.audio = audio;
this.audioContext = null; this.audioContext = null;
this.analyser = null; this.analyser = null;
this.isActive = false; this.isActive = false;
this.animationId = null; this.animationId = null;
this.presets = {
lcd: new LCDPreset(),
particles: new ParticlesPreset(),
'unknown-pleasures': new UnknownPleasuresWebGL(),
butterchurn: new ButterchurnPreset(),
kawarp: new KawarpPreset(),
};
this.activePresetKey = visualizerSettings.getPreset(); this.activePresetKey = visualizerSettings.getPreset();
// ---- AUDIO BUFFERS (REUSED) ---- // ---- AUDIO BUFFERS (REUSED) ----
@ -51,6 +35,19 @@ export class Visualizer {
this._resizeBound = () => this.resize(); this._resizeBound = () => this.resize();
} }
/**
* Must be called after class is constructed!
*/
async initPresets() {
this.presets = {
lcd: new (await import('./visualizers/lcd.js')).LCDPreset(),
particles: new (await import('./visualizers/particles.js')).ParticlesPreset(),
'unknown-pleasures': new (await import('./visualizers/unknown_pleasures_webgl.js')).UnknownPleasuresWebGL(),
butterchurn: new (await import('./visualizers/butterchurn.js')).ButterchurnPreset(),
kawarp: new (await import('./visualizers/kawarp.js')).KawarpPreset(),
};
}
updateDimming() { updateDimming() {
if (!this.canvas || !this.canvas.parentElement) return; if (!this.canvas || !this.canvas.parentElement) return;
const dimAmount = visualizerSettings.getDimAmount(); const dimAmount = visualizerSettings.getDimAmount();
@ -61,7 +58,7 @@ export class Visualizer {
return this.presets[this.activePresetKey] || this.presets['lcd']; return this.presets[this.activePresetKey] || this.presets['lcd'];
} }
init() { async init() {
// Ensure shared audio context is initialized // Ensure shared audio context is initialized
if (!audioContextManager.isReady()) { if (!audioContextManager.isReady()) {
audioContextManager.init(this.audio); audioContextManager.init(this.audio);