From 4a70c0ea083306cb79d0fa325d331ffa4333154a Mon Sep 17 00:00:00 2001 From: Paul Buetow Date: Wed, 29 Apr 2026 20:19:34 +0300 Subject: feat: create web PWA frontend --- web/js/app.js | 311 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 311 insertions(+) create mode 100644 web/js/app.js (limited to 'web/js/app.js') diff --git a/web/js/app.js b/web/js/app.js new file mode 100644 index 0000000..8e8393e --- /dev/null +++ b/web/js/app.js @@ -0,0 +1,311 @@ +import { API } from './api.js'; +import { initKeyboard } from './keyboard.js'; +import { initSelection, select, selectByElement, next, prev, currentIndex, currentElement } from './selection.js'; +import { initPlayer, togglePlay, toggleFullscreen, exitFullscreenIfNeeded, currentMediaId, selectAndPlay, playPrevious, playNext } from './player.js'; +import { initSearch, focusSearch, trigger as triggerSearch } from './search.js'; +import { initShuffle, toggle as toggleShuffle, isOn as isShuffle } from './shuffle.js'; +import { initThemes } from './themes.js'; +import { initNotes, open as openNotes } from './notes.js'; +import { initAdmin } from './admin.js'; +import { state, setMedia } from './state.js'; +import { initPWA } from './pwa.js'; + +const qs = document.querySelector.bind(document); +const pageMap = { '/index.html': 'spa', '/login.html': 'login', '/bootstrap.html': 'bootstrap' }; + +main(); + +function main() { + const page = pageMap[location.pathname] || 'spa'; + if (page === 'login') initLogin(); + else if (page === 'bootstrap') initBootstrap(); + else initApp(); + initThemes(); +} + +// Login page +function initLogin() { + const form = document.getElementById('login-form'); + const err = document.getElementById('login-error'); + if (!form) return; + form.addEventListener('submit', async (e) => { + e.preventDefault(); + err.textContent = ''; + const fd = new FormData(form); + const username = fd.get('username'); + const password = fd.get('password'); + if (!username || !password) { err.textContent = 'Please fill in all fields.'; return; } + try { + await API.login(username, password); + location.href = '/'; + } catch (ex) { + err.textContent = ex.message || 'Login failed'; + } + }); +} + +// Bootstrap page +function initBootstrap() { + const form = document.getElementById('bootstrap-form'); + const err = document.getElementById('bootstrap-error'); + if (!form) return; + form.addEventListener('submit', async (e) => { + e.preventDefault(); + err.textContent = ''; + const fd = new FormData(form); + const username = fd.get('username'); + const password = fd.get('password'); + const confirm = fd.get('password-confirm'); + if (!username || !password || !confirm) { err.textContent = 'All fields are required.'; return; } + if (password !== confirm) { err.textContent = 'Passwords do not match.'; return; } + try { + await API.bootstrap(username, password); + location.href = '/login.html'; + } catch (ex) { + err.textContent = ex.message || 'Bootstrap failed'; + } + }); +} + +// SPA +async function initApp() { + initPlayer(); + initSelection(); + initSearch({ + onChange: (q) => { + state.filters.search = q; + loadMedia(); + }, + input: document.getElementById('search-input'), + clearBtn: document.getElementById('search-clear'), + }); + initShuffle({ + onChange: () => loadMedia(), + }); + initKeyboard({ + navUp: () => prev(), + navDown: () => next(), + navLeft: () => setSetByDelta(-1), + navRight: () => setSetByDelta(1), + enter: () => { + const el = currentElement(); + if (el) { selectByElement(el); playSelected(); } + }, + playPause: () => togglePlay(), + fullscreen: () => toggleFullscreen(), + escape: () => { exitFullscreenIfNeeded(); const el = currentElement(); if (el) el.classList.remove('selected'); }, + shuffle: () => { toggleShuffle(); loadMedia(); }, + share: () => shareSelected(), + search: focusSearch, + notes: openNotesForSelected, + }); + initNotes(() => toast('Note saved')); + initAdmin(); + initPWA(); + + // Filters + document.getElementById('filter-type')?.addEventListener('change', (e) => { state.filters.type = e.target.value; loadMedia(); }); + document.getElementById('filter-favorites')?.addEventListener('click', (e) => { + state.filters.favorites = !state.filters.favorites; + e.target.classList.toggle('active', state.filters.favorites); + loadMedia(); + }); + + // Menu toggle + document.getElementById('menu-btn')?.addEventListener('click', () => { + document.getElementById('sidebar')?.classList.toggle('open'); + }); + document.getElementById('logout-btn')?.addEventListener('click', async () => { + try { await API.logout(); location.href = '/login.html'; } catch {} + }); + + const user = await API.loginProfile ? API.loginProfile : undefined; // not a route; we just try to bootstrap auth via /api/sets + try { + const sets = await API.sets(); + state.sets = sets || []; + state.isAdmin = !!state.sets?.__isAdmin; // backend may not send this; we'll infer from admin endpoint later + // Admin check via admin users endpoint + API.users().then(() => { state.isAdmin = true; showAdmin(); }).catch(() => {}); + renderSets(); + if (state.sets.length) { state.selectedSetId = state.sets[0].id; setActiveSet(state.sets[0].id); loadMedia(); } + } catch (err) { + toast(err.message || 'Error loading sets', 'error'); + } + + // Play on double-click + document.getElementById('media-grid')?.addEventListener('dblclick', (e) => { + const el = e.target.closest('.media-card, .media-row'); + if (el) { selectByElement(el); playSelected(); } + }); +} + +function renderSets() { + const el = document.getElementById('set-list'); + if (!el) return; + el.innerHTML = state.sets.map((s) => + `${escapeHtml(s.name)}` + ).join(''); + el.querySelectorAll('.set-item').forEach((a) => { + a.addEventListener('click', (e) => { + e.preventDefault(); + state.selectedSetId = parseInt(a.dataset.id, 10); + setActiveSet(state.selectedSetId); + loadMedia(); + }); + }); +} + +function setActiveSet(id) { + document.querySelectorAll('.set-item').forEach((a) => a.classList.toggle('active', parseInt(a.dataset.id, 10) === id)); +} + +function setSetByDelta(dx) { + if (!state.sets.length) return; + let idx = state.sets.findIndex((s) => s.id === state.selectedSetId); + if (idx < 0) idx = 0; + const nextIdx = (idx + dx + state.sets.length) % state.sets.length; + state.selectedSetId = state.sets[nextIdx].id; + setActiveSet(state.selectedSetId); + loadMedia(); +} + +async function loadMedia() { + const grid = document.getElementById('media-grid'); + if (!grid) return; + grid.innerHTML = '

Loading...

'; + try { + const params = { + set_id: state.selectedSetId ?? '', + type: state.filters.type, + search: state.filters.search, + favorites: state.filters.favorites ? 'true' : '', + sort: isShuffle() ? 'random' : 'name', + limit: '200', + }; + const data = await API.media(params); + const list = Array.isArray(data) ? data : data?.media || []; + setMedia(list); + renderGrid(list); + document.getElementById('result-count').textContent = `${list.length} items`; + } catch (err) { + grid.innerHTML = `

${escapeHtml(err.message)}

`; + } +} + +function renderGrid(items) { + const grid = document.getElementById('media-grid'); + if (!grid) return; + if (!items.length) { grid.innerHTML = `

No results.

`; return; } + grid.innerHTML = items.map((m, i) => renderItem(m, i)).join(''); + grid.querySelectorAll('.media-card, .media-row').forEach((el) => { + el.addEventListener('click', () => { selectByElement(el); }); + const playBtn = el.querySelector('[data-action="play"]'); + const favBtn = el.querySelector('[data-action="favorite"]'); + const noteBtn = el.querySelector('[data-action="notes"]'); + playBtn?.addEventListener('click', (e) => { e.stopPropagation(); selectByElement(el); playSelected(); }); + favBtn?.addEventListener('click', (e) => { e.stopPropagation(); toggleFavorite(el.dataset.id, favBtn); }); + noteBtn?.addEventListener('click', (e) => { e.stopPropagation(); openNotesForSelected(); }); + }); +} + +function renderItem(m, index) { + if (m.type === 'video') { + return ` +
+
+ ${m.thumbnail_path ? `` : `No image`} + ${fmtDur(m.duration)} +
+
+
${escapeHtml(m.file_name)}
+
${escapeHtml(m.codec || '')} ${m.resolution || ''} ${m.bitrate ? Math.round(m.bitrate / 1000) + 'kbps' : ''}
+
+
+ + + +
+
+ `; + } + return ` +
+ 🎵 +
+
${escapeHtml(m.file_name)}
+
${escapeHtml(m.codec || '')} ${m.bitrate ? Math.round(m.bitrate/1000)+'kbps' : ''}
+
+ ${fmtDur(m.duration)} + + + +
+ `; +} + +function playSelected() { + const el = currentElement(); + if (!el) return; + const idx = parseInt(el.dataset.index, 10); + const media = state.media[idx]; + if (media) selectAndPlay(media, idx); +} + +async function shareSelected() { + const el = currentElement(); + if (!el) return; + const id = el.dataset.id; + try { + const res = await API.share(id); + const token = res?.token || res?.share?.token; + const url = `${location.origin}/s/${token}`; + navigator.clipboard?.writeText(url); + toast('Share link copied'); + } catch (err) { toast(err.message || 'Share failed', 'error'); } +} + +async function toggleFavorite(id, btn) { + try { + await API.favorite(id); + btn?.classList.toggle('active'); + } catch (err) { toast(err.message || 'Favorite failed', 'error'); } +} + +async function openNotesForSelected() { + const el = currentElement(); + if (!el) return; + const id = el.dataset.id; + let content = ''; + try { + const note = await API.notes(id); + content = note?.content || ''; + } catch {} + openNotes(id, content); +} + +function showAdmin() { + const btn = document.getElementById('admin-toggle'); + if (btn) btn.classList.remove('hidden'); +} + +function fmtDur(s) { + if (!s || s < 0) return '0:00'; + const h = Math.floor(s / 3600); + const m = Math.floor((s % 3600) / 60); + const sec = Math.floor(s % 60); + const mm = String(m).padStart(2, '0'); + const ss = String(sec).padStart(2, '0'); + return h > 0 ? `${h}:${mm}:${ss}` : `${mm}:${ss}`; +} + +function escapeHtml(s) { + return (s ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c])); +} + +function toast(msg, type = 'info') { + const t = document.getElementById('toast'); + if (!t) return; + t.textContent = msg; + t.className = 'toast show ' + type; + setTimeout(() => t.classList.remove('show'), 2800); +} -- cgit v1.2.3