Add CI/CD pipelines, NSIS installer, ES module bundling, and ruff linting
- Add Gitea Actions workflows: test.yml (lint + test on push/PR) and release.yml (build + NSIS installer + upload on v* tags) - Add NSIS installer with optional desktop shortcut and auto-start - Add esbuild bundler: ES module migration with IIFE bundle output - Add build-dist-windows.sh for cross-building Windows distribution - Fix all ruff lint errors (import sorting, unused imports, line length) - Remove redundant scripts (start-server.bat, stop-server.bat, start-server-background.vbs) - Update CLAUDE.md with CI/CD and release documentation
This commit is contained in:
@@ -0,0 +1,418 @@
|
||||
// ============================================================
|
||||
// App: Entry point — imports all modules, registers window globals,
|
||||
// and orchestrates initialization (replaces main.js)
|
||||
// ============================================================
|
||||
|
||||
// Layer 0: Core state & utilities
|
||||
import {
|
||||
cacheDom, dom, registerUpdateCallbacks,
|
||||
initLocale, fetchVersion, formatTime, setupIconPreview,
|
||||
isUserAdjustingVolume, setIsUserAdjustingVolume,
|
||||
volumeUpdateTimer, setVolumeUpdateTimer,
|
||||
currentDuration, currentPosition, setVolume, seek,
|
||||
togglePlayPause, nextTrack, previousTrack, toggleMute,
|
||||
VOLUME_THROTTLE_MS, VOLUME_RELEASE_DELAY_MS,
|
||||
changeLocale, t,
|
||||
} from './core.js';
|
||||
|
||||
// Layer 1: Player (tabs, theme, accent, vinyl, visualizer, UI)
|
||||
import {
|
||||
activeTab, switchTab, updateTabIndicator, setMiniPlayerVisible,
|
||||
initTheme, toggleTheme, initAccentColor, applyAccentColor,
|
||||
renderAccentSwatches, selectAccentColor, toggleAccentPicker, lightenColor,
|
||||
toggleVinylMode, applyVinylMode,
|
||||
visualizerEnabled, visualizerAvailable,
|
||||
checkVisualizerAvailability, toggleVisualizer, applyVisualizerMode,
|
||||
loadAudioDevices, onAudioDeviceChanged,
|
||||
setupProgressDrag, updateUI, updatePlaybackState, stopPositionInterpolation,
|
||||
} from './player.js';
|
||||
|
||||
// Layer 2: WebSocket
|
||||
import {
|
||||
connectWebSocket, showAuthForm, authenticate, clearToken,
|
||||
manualReconnect, updateConnectionStatus,
|
||||
} from './websocket.js';
|
||||
|
||||
// Layer 3: Features
|
||||
import {
|
||||
loadScripts, loadScriptsTable, displayQuickAccess,
|
||||
showAddScriptDialog, showEditScriptDialog, closeScriptDialog, saveScript,
|
||||
deleteScriptConfirm, executeScriptDebug, executeCallbackDebug,
|
||||
closeExecutionDialog, scriptFormDirty, setScriptFormDirty,
|
||||
} from './scripts.js';
|
||||
|
||||
import {
|
||||
loadCallbacksTable,
|
||||
showAddCallbackDialog, showEditCallbackDialog, closeCallbackDialog,
|
||||
saveCallback, deleteCallbackConfirm,
|
||||
callbackFormDirty, setCallbackFormDirty,
|
||||
} from './callbacks.js';
|
||||
|
||||
import {
|
||||
loadMediaFolders, initBrowserToolbar, thumbnailCache,
|
||||
setViewMode, refreshBrowser, playAllFolder,
|
||||
previousPage, nextPage, goToPage,
|
||||
onBrowserSearch, clearBrowserSearch, onItemsPerPageChanged,
|
||||
downloadFile, closeFolderDialog, saveFolder,
|
||||
showManageFoldersDialog,
|
||||
} from './browser.js';
|
||||
|
||||
import {
|
||||
loadDisplayMonitors, onDisplayBrightnessInput, onDisplayBrightnessChange,
|
||||
toggleDisplayPower, loadHeaderLinks, loadLinksTable,
|
||||
showAddLinkDialog, showEditLinkDialog, closeLinkDialog, saveLink, deleteLinkConfirm,
|
||||
linkFormDirty, setLinkFormDirty,
|
||||
} from './links.js';
|
||||
|
||||
import {
|
||||
toggleDynamicBackground, applyDynamicBackground, updateBackgroundColors,
|
||||
} from './background.js';
|
||||
|
||||
// ============================================================
|
||||
// Register late-bound callbacks for core's updateAllText()
|
||||
// ============================================================
|
||||
|
||||
registerUpdateCallbacks({
|
||||
updatePlaybackState,
|
||||
updateConnectionStatus,
|
||||
loadScriptsTable,
|
||||
loadCallbacksTable,
|
||||
loadLinksTable,
|
||||
displayQuickAccess,
|
||||
renderAccentSwatches,
|
||||
});
|
||||
|
||||
// ============================================================
|
||||
// Register all functions on window for HTML onclick handlers
|
||||
// ============================================================
|
||||
|
||||
Object.assign(window, {
|
||||
// Player controls
|
||||
togglePlayPause, nextTrack, previousTrack, toggleMute, seek,
|
||||
// Tabs
|
||||
switchTab,
|
||||
// Theme & accent
|
||||
toggleTheme, toggleAccentPicker, selectAccentColor, lightenColor,
|
||||
// Vinyl & visualizer
|
||||
toggleVinylMode, toggleVisualizer,
|
||||
// Background
|
||||
toggleDynamicBackground,
|
||||
// Auth
|
||||
authenticate, clearToken, manualReconnect,
|
||||
// Locale
|
||||
changeLocale,
|
||||
// Scripts
|
||||
showAddScriptDialog, showEditScriptDialog, closeScriptDialog, saveScript,
|
||||
deleteScriptConfirm, executeScriptDebug, executeCallbackDebug,
|
||||
closeExecutionDialog,
|
||||
// Callbacks
|
||||
showAddCallbackDialog, showEditCallbackDialog, closeCallbackDialog,
|
||||
saveCallback, deleteCallbackConfirm,
|
||||
// Browser
|
||||
setViewMode, refreshBrowser, playAllFolder,
|
||||
previousPage, nextPage, goToPage,
|
||||
onBrowserSearch, clearBrowserSearch, onItemsPerPageChanged,
|
||||
downloadFile, closeFolderDialog, saveFolder,
|
||||
showManageFoldersDialog,
|
||||
// Links
|
||||
showAddLinkDialog, showEditLinkDialog, closeLinkDialog,
|
||||
saveLink, deleteLinkConfirm,
|
||||
// Display
|
||||
loadDisplayMonitors, onDisplayBrightnessInput, onDisplayBrightnessChange,
|
||||
toggleDisplayPower,
|
||||
// Audio device
|
||||
onAudioDeviceChanged,
|
||||
});
|
||||
|
||||
// ============================================================
|
||||
// Initialization (DOMContentLoaded)
|
||||
// ============================================================
|
||||
|
||||
window.addEventListener('DOMContentLoaded', async () => {
|
||||
// Cache DOM references
|
||||
cacheDom();
|
||||
|
||||
// Initialize theme and accent color
|
||||
initTheme();
|
||||
initAccentColor();
|
||||
|
||||
// Register service worker for PWA installability
|
||||
if ('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker.register('/sw.js').catch(() => {});
|
||||
}
|
||||
|
||||
// Initialize vinyl mode
|
||||
applyVinylMode();
|
||||
|
||||
// Initialize audio visualizer
|
||||
checkVisualizerAvailability().then(() => {
|
||||
if (visualizerEnabled && visualizerAvailable) {
|
||||
applyVisualizerMode();
|
||||
}
|
||||
});
|
||||
|
||||
// Initialize dynamic background
|
||||
applyDynamicBackground();
|
||||
|
||||
// Initialize locale (async - loads JSON file)
|
||||
await initLocale();
|
||||
|
||||
// Load version from health endpoint
|
||||
fetchVersion();
|
||||
|
||||
const token = localStorage.getItem('media_server_token');
|
||||
if (token) {
|
||||
connectWebSocket(token);
|
||||
loadScripts();
|
||||
loadScriptsTable();
|
||||
loadCallbacksTable();
|
||||
loadLinksTable();
|
||||
loadAudioDevices();
|
||||
} else {
|
||||
showAuthForm();
|
||||
}
|
||||
|
||||
// Shared volume slider setup (avoids duplicate handler code)
|
||||
function setupVolumeSlider(sliderId) {
|
||||
const slider = document.getElementById(sliderId);
|
||||
slider.addEventListener('input', (e) => {
|
||||
setIsUserAdjustingVolume(true);
|
||||
const volume = parseInt(e.target.value);
|
||||
// Sync both sliders and displays
|
||||
dom.volumeDisplay.textContent = `${volume}%`;
|
||||
dom.miniVolumeDisplay.textContent = `${volume}%`;
|
||||
dom.volumeSlider.value = volume;
|
||||
dom.miniVolumeSlider.value = volume;
|
||||
|
||||
if (volumeUpdateTimer) clearTimeout(volumeUpdateTimer);
|
||||
setVolumeUpdateTimer(setTimeout(() => {
|
||||
setVolume(volume);
|
||||
setVolumeUpdateTimer(null);
|
||||
}, VOLUME_THROTTLE_MS));
|
||||
});
|
||||
|
||||
slider.addEventListener('change', (e) => {
|
||||
if (volumeUpdateTimer) {
|
||||
clearTimeout(volumeUpdateTimer);
|
||||
setVolumeUpdateTimer(null);
|
||||
}
|
||||
const volume = parseInt(e.target.value);
|
||||
setVolume(volume);
|
||||
setTimeout(() => { setIsUserAdjustingVolume(false); }, VOLUME_RELEASE_DELAY_MS);
|
||||
});
|
||||
}
|
||||
|
||||
setupVolumeSlider('volume-slider');
|
||||
setupVolumeSlider('mini-volume-slider');
|
||||
|
||||
// Restore saved tab (migrate old tab names)
|
||||
let savedTab = localStorage.getItem('activeTab') || 'player';
|
||||
if (['scripts', 'callbacks', 'links'].includes(savedTab)) savedTab = 'settings';
|
||||
switchTab(savedTab);
|
||||
// Snap indicator to initial position without animation
|
||||
const initialActiveBtn = document.querySelector('.tab-btn.active');
|
||||
if (initialActiveBtn) updateTabIndicator(initialActiveBtn, false);
|
||||
|
||||
// Re-position tab indicator on window resize
|
||||
window.addEventListener('resize', () => {
|
||||
const activeBtn = document.querySelector('.tab-btn.active');
|
||||
if (activeBtn) updateTabIndicator(activeBtn, false);
|
||||
});
|
||||
|
||||
// Mini Player: Intersection Observer to show/hide when main player scrolls out of view
|
||||
const playerContainer = document.querySelector('.player-container');
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (activeTab !== 'player') return;
|
||||
setMiniPlayerVisible(!entry.isIntersecting);
|
||||
});
|
||||
}, { threshold: 0.1 });
|
||||
observer.observe(playerContainer);
|
||||
|
||||
// Drag-to-seek for progress bars
|
||||
setupProgressDrag(
|
||||
document.getElementById('mini-progress-bar'),
|
||||
document.getElementById('mini-progress-fill')
|
||||
);
|
||||
setupProgressDrag(
|
||||
document.getElementById('progress-bar'),
|
||||
document.getElementById('progress-fill')
|
||||
);
|
||||
|
||||
// Enter key in token input
|
||||
document.getElementById('token-input').addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
authenticate();
|
||||
}
|
||||
});
|
||||
|
||||
// Script form dirty state tracking
|
||||
const scriptForm = document.getElementById('scriptForm');
|
||||
scriptForm.addEventListener('input', () => {
|
||||
setScriptFormDirty(true);
|
||||
});
|
||||
scriptForm.addEventListener('change', () => {
|
||||
setScriptFormDirty(true);
|
||||
});
|
||||
|
||||
// Callback form dirty state tracking
|
||||
const callbackForm = document.getElementById('callbackForm');
|
||||
callbackForm.addEventListener('input', () => {
|
||||
setCallbackFormDirty(true);
|
||||
});
|
||||
callbackForm.addEventListener('change', () => {
|
||||
setCallbackFormDirty(true);
|
||||
});
|
||||
|
||||
// Script dialog backdrop click to close
|
||||
const scriptDialog = document.getElementById('scriptDialog');
|
||||
scriptDialog.addEventListener('click', (e) => {
|
||||
if (e.target === scriptDialog) {
|
||||
closeScriptDialog();
|
||||
}
|
||||
});
|
||||
|
||||
// Callback dialog backdrop click to close
|
||||
const callbackDialog = document.getElementById('callbackDialog');
|
||||
callbackDialog.addEventListener('click', (e) => {
|
||||
if (e.target === callbackDialog) {
|
||||
closeCallbackDialog();
|
||||
}
|
||||
});
|
||||
|
||||
// Delegated click handlers for script table actions (XSS-safe)
|
||||
document.getElementById('scriptsTableBody').addEventListener('click', (e) => {
|
||||
const btn = e.target.closest('[data-action]');
|
||||
if (!btn) return;
|
||||
const action = btn.dataset.action;
|
||||
const name = btn.dataset.scriptName;
|
||||
if (action === 'execute') executeScriptDebug(name);
|
||||
else if (action === 'edit') showEditScriptDialog(name);
|
||||
else if (action === 'delete') deleteScriptConfirm(name);
|
||||
});
|
||||
|
||||
// Delegated click handlers for callback table actions (XSS-safe)
|
||||
document.getElementById('callbacksTableBody').addEventListener('click', (e) => {
|
||||
const btn = e.target.closest('[data-action]');
|
||||
if (!btn) return;
|
||||
const action = btn.dataset.action;
|
||||
const name = btn.dataset.callbackName;
|
||||
if (action === 'execute') executeCallbackDebug(name);
|
||||
else if (action === 'edit') showEditCallbackDialog(name);
|
||||
else if (action === 'delete') deleteCallbackConfirm(name);
|
||||
});
|
||||
|
||||
// Link dialog backdrop click to close
|
||||
const linkDialog = document.getElementById('linkDialog');
|
||||
linkDialog.addEventListener('click', (e) => {
|
||||
if (e.target === linkDialog) {
|
||||
closeLinkDialog();
|
||||
}
|
||||
});
|
||||
|
||||
// Delegated click handlers for link table actions (XSS-safe)
|
||||
document.getElementById('linksTableBody').addEventListener('click', (e) => {
|
||||
const btn = e.target.closest('[data-action]');
|
||||
if (!btn) return;
|
||||
const action = btn.dataset.action;
|
||||
const name = btn.dataset.linkName;
|
||||
if (action === 'edit') showEditLinkDialog(name);
|
||||
else if (action === 'delete') deleteLinkConfirm(name);
|
||||
});
|
||||
|
||||
// Track link form dirty state
|
||||
const linkForm = document.getElementById('linkForm');
|
||||
linkForm.addEventListener('input', () => {
|
||||
setLinkFormDirty(true);
|
||||
});
|
||||
linkForm.addEventListener('change', () => {
|
||||
setLinkFormDirty(true);
|
||||
});
|
||||
|
||||
// Initialize browser toolbar and load folders
|
||||
initBrowserToolbar();
|
||||
if (token) {
|
||||
loadMediaFolders();
|
||||
}
|
||||
|
||||
// Icon preview for script and link dialogs
|
||||
setupIconPreview('scriptIcon', 'scriptIconPreview');
|
||||
setupIconPreview('linkIcon', 'linkIconPreview');
|
||||
|
||||
// Settings sections: restore collapse state and persist on toggle
|
||||
document.querySelectorAll('.settings-section').forEach(details => {
|
||||
const key = `settings_section_${details.querySelector('summary')?.getAttribute('data-i18n') || ''}`;
|
||||
const saved = localStorage.getItem(key);
|
||||
if (saved === 'closed') details.removeAttribute('open');
|
||||
else if (saved === 'open') details.setAttribute('open', '');
|
||||
details.addEventListener('toggle', () => {
|
||||
localStorage.setItem(key, details.open ? 'open' : 'closed');
|
||||
});
|
||||
});
|
||||
|
||||
// Cleanup blob URLs on page unload
|
||||
window.addEventListener('beforeunload', () => {
|
||||
thumbnailCache.forEach(url => URL.revokeObjectURL(url));
|
||||
thumbnailCache.clear();
|
||||
});
|
||||
|
||||
// Tab bar keyboard navigation (WAI-ARIA Tabs pattern)
|
||||
document.getElementById('tabBar').addEventListener('keydown', (e) => {
|
||||
const tabs = Array.from(document.querySelectorAll('.tab-btn'));
|
||||
const currentIdx = tabs.indexOf(document.activeElement);
|
||||
if (currentIdx === -1) return;
|
||||
|
||||
let newIdx;
|
||||
if (e.key === 'ArrowRight') {
|
||||
newIdx = (currentIdx + 1) % tabs.length;
|
||||
} else if (e.key === 'ArrowLeft') {
|
||||
newIdx = (currentIdx - 1 + tabs.length) % tabs.length;
|
||||
} else if (e.key === 'Home') {
|
||||
newIdx = 0;
|
||||
} else if (e.key === 'End') {
|
||||
newIdx = tabs.length - 1;
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
tabs[newIdx].focus();
|
||||
switchTab(tabs[newIdx].dataset.tab);
|
||||
});
|
||||
|
||||
// Global keyboard shortcuts
|
||||
document.addEventListener('keydown', (e) => {
|
||||
// Skip when typing in inputs, textareas, selects, or when a dialog is open
|
||||
const tag = e.target.tagName;
|
||||
if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return;
|
||||
if (document.querySelector('dialog[open]')) return;
|
||||
|
||||
switch (e.key) {
|
||||
case ' ':
|
||||
e.preventDefault();
|
||||
togglePlayPause();
|
||||
break;
|
||||
case 'ArrowLeft':
|
||||
e.preventDefault();
|
||||
if (currentDuration > 0) seek(Math.max(0, currentPosition - 5));
|
||||
break;
|
||||
case 'ArrowRight':
|
||||
e.preventDefault();
|
||||
if (currentDuration > 0) seek(Math.min(currentDuration, currentPosition + 5));
|
||||
break;
|
||||
case 'ArrowUp':
|
||||
e.preventDefault();
|
||||
setVolume(Math.min(100, parseInt(dom.volumeSlider.value) + 5));
|
||||
break;
|
||||
case 'ArrowDown':
|
||||
e.preventDefault();
|
||||
setVolume(Math.max(0, parseInt(dom.volumeSlider.value) - 5));
|
||||
break;
|
||||
case 'm':
|
||||
case 'M':
|
||||
toggleMute();
|
||||
break;
|
||||
}
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user