simon/jacuzzi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add modern UI enhancements over the classic redesign

Browse Source 
Layered progressive polish on the warm classic + brass theme:
- Card entrance animation on first mount (virtualizer-aware)
- Cursor-tracking brass spotlight border on cards
- Thumbnail skeleton shimmer until the poster paints
- Hover video preview after a short dwell (only when formats resolved)
- View Transition + blurred-poster ambient backdrop on player open
- Favorite heart pop + expanding ring on add
- ⌘K command palette (search, theme, density, reels, source/channel)
- Scroll-progress bar + back-to-top FAB
- Grid density toggle (comfortable/compact)
- Reels HUD: serif title, brass scrubber, muted-state pulse

All new motion respects prefers-reduced-motion; no JS/HTML structure
changes to the core grid/feed. New glue lives in frontend/js/enhance.js.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Simon
2026-06-30 08:25:37 +00:00
parent 382a637b95
commit 138c3224de
11 changed files with 715 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

252
frontend/js/enhance.js Normal file
View File

@@ -0,0 +1,252 @@
window.App = window.App || {};
App.enhance = App.enhance || {};
// Progressive UI enhancements layered on top of the core app. Everything here
// is non-essential polish: cursor-tracking card spotlight, a scroll-progress
// bar, a back-to-top button, a ⌘K command palette, and hover video previews.
// None of it is required for the app to function, so each piece fails soft.
(function() {
const fineHover = window.matchMedia('(hover: hover) and (pointer: fine)').matches;
const reduceMotion = () => window.matchMedia('(prefers-reduced-motion: reduce)').matches;
// ---- Cursor-tracking spotlight border on grid cards ----------------------
// One delegated listener keeps per-card vars (--mx/--my) updated; the brass
// border gradient that reads them lives in CSS (.video-card::after).
function initSpotlight() {
const grid = document.getElementById('video-grid');
if (!grid || !fineHover) return;
grid.addEventListener('pointermove', (e) => {
const card = e.target.closest('.video-card');
if (!card) return;
const r = card.getBoundingClientRect();
card.style.setProperty('--mx', (e.clientX - r.left) + 'px');
card.style.setProperty('--my', (e.clientY - r.top) + 'px');
}, { passive: true });
}
// ---- Scroll progress bar + back-to-top FAB -------------------------------
function initScrollAffordances() {
const bar = document.getElementById('scroll-progress');
const fab = document.getElementById('back-to-top');
let ticking = false;
const onScroll = () => {
if (ticking) return;
ticking = true;
requestAnimationFrame(() => {
ticking = false;
const doc = document.documentElement;
const max = doc.scrollHeight - window.innerHeight;
const pct = max > 0 ? (window.scrollY / max) * 100 : 0;
if (bar) bar.style.width = pct.toFixed(2) + '%';
if (fab) fab.classList.toggle('is-visible', window.scrollY > 700);
});
};
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
if (fab) {
fab.addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: reduceMotion() ? 'auto' : 'smooth' });
});
}
}
// ---- Hover video preview --------------------------------------------------
// After a short dwell over a card, play a muted inline clip in place of the
// poster — but only if the video's real formats are already resolved (the
// grid resolves them lazily on hover/scroll anyway), so we never block or
// hammer the backend just to preview.
function initHoverPreview() {
const grid = document.getElementById('video-grid');
if (!grid || !fineHover) return;
let dwellTimer = null;
let activeCard = null;
const clearPreview = () => {
if (dwellTimer) { clearTimeout(dwellTimer); dwellTimer = null; }
if (activeCard) {
const vid = activeCard.querySelector('.card-preview');
if (vid) { try { vid.pause(); } catch (e) {} vid.remove(); }
activeCard.classList.remove('is-previewing');
activeCard = null;
}
};
const startPreview = (card) => {
if (!App.videos || typeof App.videos.getVideoForCard !== 'function') return;
const v = App.videos.getVideoForCard(card);
if (!v) return;
const meta = v.meta;
const ready = meta && Array.isArray(meta.formats) && meta.formats.length;
if (!ready) {
// Not resolved yet: kick it off so the *next* hover can preview.
if (typeof App.videos.resolveAndProbe === 'function') App.videos.resolveAndProbe(v);
return;
}
let url = '';
try { url = App.videos.buildStreamUrl(v); } catch (e) { return; }
if (!url) return;
const img = card.querySelector('img');
const vid = document.createElement('video');
vid.className = 'card-preview';
vid.muted = true;
vid.loop = true;
vid.playsInline = true;
vid.setAttribute('playsinline', '');
vid.setAttribute('webkit-playsinline', '');
vid.preload = 'auto';
if (img) vid.style.height = img.getBoundingClientRect().height + 'px';
vid.src = url;
vid.addEventListener('error', () => { if (vid.isConnected) vid.remove(); }, { once: true });
card.appendChild(vid);
card.classList.add('is-previewing');
const p = vid.play();
if (p && p.catch) p.catch(() => {});
};
grid.addEventListener('pointerover', (e) => {
const card = e.target.closest('.video-card');
if (!card || card === activeCard) return;
clearPreview();
activeCard = card;
dwellTimer = setTimeout(() => { dwellTimer = null; if (activeCard === card) startPreview(card); }, 600);
});
grid.addEventListener('pointerout', (e) => {
const card = e.target.closest('.video-card');
if (!card) return;
const to = e.relatedTarget;
if (to && card.contains(to)) return; // still inside the same card
if (card === activeCard) clearPreview();
});
window.addEventListener('scroll', clearPreview, { passive: true });
}
// ---- Command palette (⌘K / Ctrl+K) ---------------------------------------
function initCommandPalette() {
const palette = document.getElementById('command-palette');
const input = document.getElementById('cmdk-input');
const list = document.getElementById('cmdk-list');
if (!palette || !input || !list) return;
let actions = [];
let filtered = [];
let activeIndex = 0;
const fireChange = (el) => el && el.dispatchEvent(new Event('change'));
const buildActions = () => {
const out = [];
out.push({ label: 'Search videos', hint: 'Focus the search box', run: () => {
const s = document.getElementById('search-input'); if (s) { s.focus(); s.select(); }
}});
const theme = (localStorage.getItem('theme') || 'dark');
out.push({ label: `Switch to ${theme === 'light' ? 'dark' : 'light'} theme`, hint: 'Appearance', run: () => {
localStorage.setItem('theme', theme === 'light' ? 'dark' : 'light');
if (App.ui && App.ui.applyTheme) App.ui.applyTheme();
}});
const density = (App.storage && App.storage.getDensity) ? App.storage.getDensity() : 'comfortable';
out.push({ label: `Grid density: ${density === 'compact' ? 'comfortable' : 'compact'}`, hint: 'Layout', run: () => {
if (!App.storage) return;
App.storage.setDensity(density === 'compact' ? 'comfortable' : 'compact');
if (App.ui && App.ui.applyDensity) App.ui.applyDensity();
if (App.virtualGrid && App.virtualGrid.relayout) App.virtualGrid.relayout();
}});
out.push({ label: 'Toggle Reels view', hint: 'Playback', run: () => { if (App.feed) App.feed.toggle(); } });
out.push({ label: 'Reload channel', hint: 'Refresh the current feed', run: () => { if (App.videos) App.videos.resetAndReload(); } });
out.push({ label: 'Open Menu', hint: 'Source · channel · filters', run: () => { if (App.ui) App.ui.toggleDrawer('menu'); } });
out.push({ label: 'Open Settings', hint: 'Preferences', run: () => { if (App.ui) App.ui.toggleDrawer('settings'); } });
const sourceSelect = document.getElementById('source-select');
if (sourceSelect) {
Array.from(sourceSelect.options).forEach((opt) => {
if (opt.value === sourceSelect.value) return;
out.push({ label: opt.textContent, hint: 'Source', run: () => { sourceSelect.value = opt.value; fireChange(sourceSelect); } });
});
}
const channelSelect = document.getElementById('channel-select');
if (channelSelect) {
Array.from(channelSelect.options).forEach((opt) => {
if (opt.value === channelSelect.value) return;
out.push({ label: opt.textContent, hint: 'Channel', run: () => { channelSelect.value = opt.value; fireChange(channelSelect); } });
});
}
return out;
};
const render = () => {
list.innerHTML = '';
filtered.forEach((a, i) => {
const li = document.createElement('button');
li.type = 'button';
li.className = 'cmdk-item' + (i === activeIndex ? ' is-active' : '');
li.innerHTML = `<span class="cmdk-label"></span><span class="cmdk-hint"></span>`;
li.querySelector('.cmdk-label').textContent = a.label;
li.querySelector('.cmdk-hint').textContent = a.hint || '';
li.addEventListener('click', () => choose(i));
li.addEventListener('pointermove', () => { if (activeIndex !== i) { activeIndex = i; render(); } });
list.appendChild(li);
});
};
const applyFilter = () => {
const q = input.value.trim().toLowerCase();
filtered = q
? actions.filter((a) => (a.label + ' ' + (a.hint || '')).toLowerCase().includes(q))
: actions.slice();
activeIndex = 0;
render();
};
const choose = (i) => {
const a = filtered[i];
close();
if (a && a.run) a.run();
};
const open = () => {
actions = buildActions();
input.value = '';
applyFilter();
palette.classList.add('open');
palette.setAttribute('aria-hidden', 'false');
requestAnimationFrame(() => input.focus());
};
const close = () => {
palette.classList.remove('open');
palette.setAttribute('aria-hidden', 'true');
};
App.enhance.openPalette = open;
input.addEventListener('input', applyFilter);
input.addEventListener('keydown', (e) => {
if (e.key === 'ArrowDown') { e.preventDefault(); activeIndex = Math.min(activeIndex + 1, filtered.length - 1); render(); scrollActive(); }
else if (e.key === 'ArrowUp') { e.preventDefault(); activeIndex = Math.max(activeIndex - 1, 0); render(); scrollActive(); }
else if (e.key === 'Enter') { e.preventDefault(); choose(activeIndex); }
else if (e.key === 'Escape') { e.preventDefault(); close(); }
});
const scrollActive = () => {
const el = list.children[activeIndex];
if (el) el.scrollIntoView({ block: 'nearest' });
};
palette.addEventListener('click', (e) => { if (e.target === palette) close(); });
document.addEventListener('keydown', (e) => {
if ((e.metaKey || e.ctrlKey) && (e.key === 'k' || e.key === 'K')) {
e.preventDefault();
if (palette.classList.contains('open')) close(); else open();
}
});
}
function init() {
initSpotlight();
initScrollAffordances();
initHoverPreview();
initCommandPalette();
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();

10
frontend/js/favorites.js
View File

@@ -77,6 +77,7 @@ App.favorites = App.favorites || {};
if (!key) return;
const favorites = App.favorites.getAll();
const existingIndex = favorites.findIndex((item) => item.key === key);
const becameFavorite = existingIndex < 0;
if (existingIndex >= 0) {
favorites.splice(existingIndex, 1);
} else {
@@ -86,6 +87,15 @@ App.favorites = App.favorites || {};
App.favorites.setAll(favorites);
App.favorites.renderBar();
App.favorites.syncButtons();
// Celebrate an add with a brass pop + ring on every button for this key.
if (becameFavorite) {
document.querySelectorAll(`.favorite-btn[data-fav-key="${(window.CSS && CSS.escape) ? CSS.escape(key) : key}"]`).forEach((btn) => {
btn.classList.remove('just-favorited');
void btn.offsetWidth; // restart the animation
btn.classList.add('just-favorited');
btn.addEventListener('animationend', () => btn.classList.remove('just-favorited'), { once: true });
});
}
};
App.favorites.renderBar = function() {

3
frontend/js/feed.js
View File

@@ -749,5 +749,8 @@ App.feed = App.feed || {};
? 'https://cdn.jsdelivr.net/npm/heroicons@2.0.13/24/outline/speaker-x-mark.svg'
: 'https://cdn.jsdelivr.net/npm/heroicons@2.0.13/24/outline/speaker-wave.svg';
icon.alt = state.feedMuted ? 'Unmute' : 'Mute';
// Pulse a brass ring while muted to hint "tap to hear sound".
const btn = document.getElementById('feed-mute-btn');
if (btn) btn.classList.toggle('is-muted', !!state.feedMuted);
};
})();

1
frontend/js/main.js
View File

@@ -7,6 +7,7 @@ window.App = window.App || {};
App.ui.applyTheme();
App.ui.applyPreferredQuality();
App.ui.applyFeedEndBehavior();
App.ui.applyDensity();
App.ui.renderMenu();
App.favorites.renderBar();
App.ui.bindGlobalHandlers();

20
frontend/js/player.js
View File

@@ -294,7 +294,25 @@ App.player = App.player || {};
attempt(0);
if (state.playerMode === 'modal') {
modal.style.display = 'flex';
// Ambient backdrop: a blurred copy of the poster fills the letterbox
// behind the contained video for a richer, less sterile player.
const modalContent = modal.querySelector('.modal-content');
if (modalContent) {
let poster = (source && (source.thumb || (source.meta && (source.meta.thumbnail || source.meta.thumb)))) || '';
if (!poster && originEl) {
const img = originEl.querySelector('img');
if (img) poster = img.currentSrc || img.src || '';
}
if (poster) modalContent.style.setProperty('--poster', `url("${poster.replace(/"/g, '%22')}")`);
else modalContent.style.removeProperty('--poster');
}
const reveal = () => { modal.style.display = 'flex'; };
const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!reduce && document.startViewTransition) {
document.startViewTransition(reveal);
} else {
reveal();
}
document.body.style.overflow = 'hidden';
} else {
modal.style.display = 'none';

9
frontend/js/storage.js
View File

@@ -48,6 +48,15 @@ App.session = App.session || {};
localStorage.setItem(FEED_END_BEHAVIOR_KEY, nextBehavior === 'scroll' ? 'scroll' : 'loop');
};
// Grid density: 'comfortable' (default) or 'compact' (more, smaller columns).
App.storage.getDensity = function() {
return localStorage.getItem('density') === 'compact' ? 'compact' : 'comfortable';
};
App.storage.setDensity = function(nextDensity) {
localStorage.setItem('density', nextDensity === 'compact' ? 'compact' : 'comfortable');
};
App.storage.getServerEntries = function() {
const config = App.storage.getConfig();
if (!config.servers || !Array.isArray(config.servers)) return [];

19
frontend/js/ui.js
View File

@@ -21,6 +21,13 @@ App.ui = App.ui || {};
if (select) select.value = App.storage.getFeedEndBehavior();
};
App.ui.applyDensity = function() {
const density = App.storage.getDensity();
document.body.dataset.density = density;
const select = document.getElementById('density-select');
if (select) select.value = density;
};
// Toast helper for playback + network errors.
App.ui.showError = function(message) {
const toast = document.getElementById('error-toast');
@@ -286,6 +293,18 @@ App.ui = App.ui || {};
};
}
const densitySelect = document.getElementById('density-select');
if (densitySelect) {
densitySelect.value = App.storage.getDensity();
densitySelect.onchange = () => {
App.storage.setDensity(densitySelect.value);
App.ui.applyDensity();
if (App.virtualGrid && typeof App.virtualGrid.relayout === 'function') {
App.virtualGrid.relayout();
}
};
}
const feedEndSelect = document.getElementById('feed-end-select');
if (feedEndSelect) {
feedEndSelect.value = App.storage.getFeedEndBehavior();

23
frontend/js/videos.js
View File

@@ -548,6 +548,7 @@ App.videos = App.videos || {};
// ---------------------------------------------------------------------
App.virtualGrid = (function() {
const mounted = new Map(); // loadedVideos index -> card element
const revealed = new Set(); // indices that have played their entrance once
const layout = []; // index -> { top, left, width, height, col, posInCol }
const heightCache = new Map(); // shape signature -> estimated px height
let colItems = []; // col -> ordered list of item indices in that column
@@ -575,7 +576,10 @@ App.videos = App.videos || {};
el.style.padding = '0';
const inner = el.clientWidth - padX * 2;
if (inner <= 0) return false;
cols = mobile ? 2 : Math.max(1, Math.floor((inner + gap) / (260 + gap)));
// Density toggle (see enhance.js / settings) tunes the minimum card
// width, so "compact" packs more columns at the same viewport width.
const minCardW = document.body.dataset.density === 'compact' ? 210 : 260;
cols = mobile ? 2 : Math.max(1, Math.floor((inner + gap) / (minCardW + gap)));
colWidth = (inner - gap * (cols - 1)) / cols;
return true;
};
@@ -682,14 +686,22 @@ App.videos = App.videos || {};
if (!v || !l) return;
const card = App.videos.buildCard(v);
place(card, l);
// Entrance animation only the first time an index appears, so cards
// don't re-animate every time they scroll back into the window.
if (!revealed.has(i)) {
revealed.add(i);
card.classList.add('is-revealing');
card.addEventListener('animationend', () => card.classList.remove('is-revealing'), { once: true });
}
grid().appendChild(card);
mounted.set(i, card);
// Once the thumbnail loads, drop the 16:9 placeholder so it shows at
// its true aspect ratio, then correct this card's height.
// its true aspect ratio, clear the shimmer, then correct the height.
const img = card.querySelector('img');
if (img) {
const reveal = () => {
img.style.aspectRatio = 'auto';
img.classList.add('is-loaded');
if (mounted.get(i) === card) correct(i);
};
if (img.complete && img.naturalHeight > 0) requestAnimationFrame(reveal);
@@ -807,6 +819,7 @@ App.videos = App.videos || {};
const reset = function() {
mounted.forEach((card, i) => unmount(i));
mounted.clear();
revealed.clear(); // new result set should animate in again
layout.length = 0;
colBottoms = [];
colItems = [];
@@ -1190,6 +1203,12 @@ App.videos = App.videos || {};
return App.videos.buildStreamUrlFromSource(App.videos.resolveStreamSource(videoOrUrl, options));
};
// Lets enhancement layers (e.g. hover preview) recover the video object that
// backs a mounted card without reaching into the virtualizer internals.
App.videos.getVideoForCard = function(card) {
return cardVideo.get(card);
};
App.videos.downloadVideo = function(video) {
if (!video) return;
const streamUrl = App.videos.buildStreamUrl(video, { applyPreferredQuality: false });