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

Choose a channel by what it is, not by its name in a list

Browse Source 
A <select> of ninety channels tells the reader almost nothing: a wall of
bare names, nothing to say which site a name belongs to or what it
carries, and no way to look for one. The server has been sending far more
than the name all along -- a favicon, a description, tags, its own
groupings, and whether a channel still says "work in progress" -- so the
picker shows that.

It opens as a dialog in the site's own style: a search field, then the
server's groups as sections, each led by an "All <group>" row that browses
the whole group. Search matches the name, the id, the description, the
tags and the group, so "jav" finds Tokyo Motion (whose name never says it)
and "leaks" finds the OnlyFans mirrors. Arrows and Enter walk the list,
Escape closes it, and opening it with nothing typed scrolls to the channel
already being read. On a phone it fills the screen and leaves the field
unfocused -- the keyboard would cover the thing being chosen from.

Favicons load through attachThumbnail, so they get the same route race,
proxy fallback and retries as every other remote picture, with the
channel's initial behind them for the ones that never arrive.

The <select> was also where the command palette read its channel actions,
so the list lives in App.ui.channels now and the palette asks for it.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QBDkEXP4htyXTCZUwMLphd
This commit is contained in:
Simon
2026-09-19 08:27:43 +00:00
parent b478c51551
commit a795442634
5 changed files with 834 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/js/enhance.js
View File

@@ -196,11 +196,19 @@ App.enhance = App.enhance || {};
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); } });
// The channel list is the picker's (App.ui.channels), not a
// <select>'s -- same entries, drawn as palette rows.
if (App.ui && App.ui.channels) {
const current = App.storage && App.storage.getSession ?
App.storage.getSession() : null;
const currentId = (current && current.channel) ? current.channel.id : '';
App.ui.channels.entries().forEach((entry) => {
if (entry.id === currentId) return;
out.push({
label: entry.label,
hint: entry.group || 'Channel',
run: () => App.ui.channels.choose(entry.id)
});
});
}
return out;

423
frontend/js/ui.js
View File

@@ -229,12 +229,356 @@ App.ui = App.ui || {};
}
};
// ---------------------------------------------------------------------
// Channel picker
//
// A <select> of ninety channels tells the reader almost nothing: a wall of
// bare names, nothing to say which site a name belongs to or what it
// carries, and no way to look for one. The server sends far more than the
// name -- a favicon, a description, tags, whether the channel still says
// "work in progress" -- so the picker shows that, and lets the reader type.
//
// The <select> was also where the command palette read its channel actions
// from, so the list lives here now and the palette asks for it.
// ---------------------------------------------------------------------
App.ui.channels = (function() {
// Sections in display order: a group, then whatever the server didn't
// put in one. Rebuilt whenever the menu renders, which is whenever the
// server, its status, or the selection changes.
let sections = [];
let matched = []; // the rows the current search leaves on screen
let activeIndex = 0;
let bound = false;
const el = (id) => document.getElementById(id);
const activeServerData = function() {
const session = App.storage.getSession();
if (!session) return null;
const entry = App.storage.getServerEntries()
.find((candidate) => candidate.url === session.server);
return (entry && entry.data) || null;
};
// Everything about a channel worth searching, in one string: a reader
// typing "jav", "leaks" or the site's own name should all land.
const haystack = function(parts) {
return parts.filter(Boolean).join(' ').toLowerCase();
};
const channelRow = function(channel, groupTitle) {
const tags = Array.isArray(channel.tags) ? channel.tags : [];
return {
id: channel.id,
name: channel.name || channel.id,
note: channel.description || '',
favicon: channel.favicon || '',
tags: tags.slice(0, 3),
// "work in progress" is the server's own word for a channel
// that may not answer; worth saying before it's picked.
flag: channel.status && channel.status !== 'active' ? channel.status :
(channel.premium ? 'premium' : ''),
group: groupTitle || '',
search: haystack([channel.name, channel.id, channel.description,
tags.join(' '), groupTitle])
};
};
const build = function() {
const data = activeServerData();
const channels = (data && Array.isArray(data.channels)) ? data.channels : [];
const groups = (data && Array.isArray(data.channelGroups)) ? data.channelGroups : [];
const byId = new Map(channels.map((channel) => [channel.id, channel]));
const grouped = new Set();
sections = [];
groups.forEach((group) => {
const ids = (Array.isArray(group.channelIds) ? group.channelIds : [])
.filter((id) => byId.has(id));
if (!ids.length) return;
ids.forEach((id) => grouped.add(id));
const title = group.title || group.id;
sections.push({
title: title,
rows: [{
id: `group:${group.id}`,
name: `All ${title}`,
// Every group row would otherwise be an "A" for "All".
mark: title,
note: `Every channel in ${title}, interleaved.`,
favicon: '',
tags: [],
flag: ids.length === 1 ? '1 channel' : `${ids.length} channels`,
group: title,
search: haystack(['all', title, group.id])
}].concat(ids.map((id) => channelRow(byId.get(id), title)))
});
});
const ungrouped = channels
.filter((channel) => !grouped.has(channel.id))
.sort((a, b) => (a.name || a.id || '').toLowerCase()
.localeCompare((b.name || b.id || '').toLowerCase()));
if (ungrouped.length) {
sections.push({
title: sections.length ? 'Everything else' : 'Channels',
rows: ungrouped.map((channel) => channelRow(channel, ''))
});
}
};
// The letter behind a favicon that hasn't arrived (or never will), so a
// row is never a name next to an empty square.
const markFor = function(row) {
const mark = document.createElement('span');
mark.className = 'channel-mark';
mark.dataset.letter = (row.mark || row.name || '?').trim().charAt(0).toUpperCase();
if (row.favicon) {
const img = document.createElement('img');
img.className = 'channel-favicon';
img.alt = '';
img.loading = 'lazy';
img.decoding = 'async';
mark.appendChild(img);
// The same route race, proxy fallback and retries every other
// remote picture in the app goes through.
App.videos.attachThumbnail(img, row.favicon);
}
return mark;
};
const rowButton = function(row, currentId) {
const button = document.createElement('button');
button.type = 'button';
button.className = 'channel-row' + (row.id === currentId ? ' is-current' : '');
button.setAttribute('role', 'option');
button.setAttribute('aria-selected', row.id === currentId ? 'true' : 'false');
button.dataset.channelId = row.id;
button.appendChild(markFor(row));
const text = document.createElement('span');
text.className = 'channel-row-text';
const name = document.createElement('span');
name.className = 'channel-row-name';
name.textContent = row.name;
text.appendChild(name);
if (row.note) {
const note = document.createElement('span');
note.className = 'channel-row-note';
note.textContent = row.note;
text.appendChild(note);
}
if (row.tags.length) {
const tags = document.createElement('span');
tags.className = 'channel-row-tags';
row.tags.forEach((tag) => {
const chip = document.createElement('span');
chip.className = 'channel-tag';
chip.textContent = tag;
tags.appendChild(chip);
});
text.appendChild(tags);
}
button.appendChild(text);
if (row.flag) {
const flag = document.createElement('span');
flag.className = 'channel-row-flag';
flag.textContent = row.flag;
button.appendChild(flag);
}
return button;
};
const render = function() {
const list = el('channel-picker-list');
const empty = el('channel-picker-empty');
const search = el('channel-search');
if (!list) return;
const query = (search ? search.value : '').trim().toLowerCase();
const session = App.storage.getSession();
const currentId = (session && session.channel) ? session.channel.id : '';
list.innerHTML = '';
matched = [];
sections.forEach((section) => {
const rows = query
? section.rows.filter((row) => row.search.includes(query))
: section.rows;
if (!rows.length) return;
const heading = document.createElement('div');
heading.className = 'channel-section';
heading.textContent = section.title;
list.appendChild(heading);
rows.forEach((row) => {
const button = rowButton(row, currentId);
const index = matched.length;
button.addEventListener('click', () => App.ui.channels.choose(row.id));
button.addEventListener('pointermove', () => setActive(index));
list.appendChild(button);
matched.push(button);
});
});
if (empty) empty.hidden = matched.length > 0;
// A shorter list under an unchanged scroll position hides its own
// first hits, so every search starts back at the top.
if (query) list.scrollTop = 0;
// A search starts on its first hit; an unsearched list starts on the
// channel already being read, which is also what gets scrolled to.
const current = matched.findIndex((button) => button.classList.contains('is-current'));
setActive(query || current < 0 ? 0 : current, !query);
};
const setActive = function(index, scroll) {
if (!matched.length) { activeIndex = 0; return; }
activeIndex = Math.max(0, Math.min(index, matched.length - 1));
matched.forEach((button, i) => button.classList.toggle('is-active', i === activeIndex));
if (scroll && matched[activeIndex]) {
matched[activeIndex].scrollIntoView({ block: 'center' });
}
};
const step = function(delta) {
setActive(activeIndex + delta);
const button = matched[activeIndex];
if (button) button.scrollIntoView({ block: 'nearest' });
};
const open = function() {
const picker = el('channel-picker');
const search = el('channel-search');
const trigger = el('channel-picker-btn');
if (!picker) return;
build();
if (search) search.value = '';
// Shown before it is filled: scrolling the current channel into
// view can't work while the list is still display:none.
picker.classList.add('open');
picker.setAttribute('aria-hidden', 'false');
render();
if (trigger) trigger.setAttribute('aria-expanded', 'true');
// Typing is the point of the thing -- but not on a phone, where
// focusing the field throws up the keyboard over the list.
if (search && window.matchMedia('(min-width: 720px)').matches) {
requestAnimationFrame(() => search.focus());
}
};
const close = function() {
const picker = el('channel-picker');
const trigger = el('channel-picker-btn');
if (picker) {
picker.classList.remove('open');
picker.setAttribute('aria-hidden', 'true');
}
if (trigger) trigger.setAttribute('aria-expanded', 'false');
};
const bind = function() {
if (bound) return;
const picker = el('channel-picker');
const trigger = el('channel-picker-btn');
const search = el('channel-search');
const closeBtn = el('channel-picker-close');
if (!picker || !trigger) return;
bound = true;
trigger.addEventListener('click', open);
if (closeBtn) closeBtn.addEventListener('click', close);
picker.addEventListener('click', (event) => { if (event.target === picker) close(); });
if (search) {
search.addEventListener('input', render);
search.addEventListener('keydown', (event) => {
if (event.key === 'ArrowDown') { event.preventDefault(); step(1); }
else if (event.key === 'ArrowUp') { event.preventDefault(); step(-1); }
else if (event.key === 'Enter') {
event.preventDefault();
const button = matched[activeIndex];
if (button) button.click();
} else if (event.key === 'Escape') { event.preventDefault(); close(); }
});
}
document.addEventListener('keydown', (event) => {
if (event.key === 'Escape' && picker.classList.contains('open')) close();
});
};
// The trigger says what is being read now, with the same favicon the
// list shows, so the menu answers the question without being opened.
const renderTrigger = function() {
const session = App.storage.getSession();
const channel = session && session.channel;
const name = el('channel-trigger-name');
const note = el('channel-trigger-note');
const mark = el('channel-trigger-mark');
const icon = el('channel-trigger-icon');
if (!name || !mark || !icon) return;
name.textContent = channel ? (channel.name || channel.id) : 'No channel';
mark.dataset.letter = (channel ? (channel.name || channel.id || '?') : '?')
.trim().charAt(0).toUpperCase();
if (note) {
note.textContent = channel
? (channel.isGroup ? 'Whole group' : (channel.description || ''))
: 'This source has no channels.';
}
App.videos.detachThumbnail(icon);
icon.removeAttribute('src');
icon.hidden = !(channel && channel.favicon);
if (channel && channel.favicon) App.videos.attachThumbnail(icon, channel.favicon);
};
return {
// Called by renderMenu: the picker follows whatever the menu is
// showing, and nothing else has to know it exists.
render: function() {
bind();
build();
renderTrigger();
if (el('channel-picker') && el('channel-picker').classList.contains('open')) {
render();
}
},
open: open,
close: close,
// The flat list the command palette offers alongside its own
// actions -- id and label only; it draws its own rows.
entries: function() {
if (!sections.length) build();
const out = [];
sections.forEach((section) => section.rows.forEach((row) => {
out.push({ id: row.id, label: row.name, group: section.title });
}));
return out;
},
choose: function(id) {
const session = App.storage.getSession();
const data = activeServerData();
const nextChannel = data ? App.session.resolveChannelById(data, id) : null;
if (!session || !nextChannel) return;
const serverPrefs = App.storage.getPreferences()[session.server] || {};
const savedOptions = serverPrefs.optionsByChannel ?
serverPrefs.optionsByChannel[nextChannel.id] : null;
const nextSession = {
server: session.server,
channel: nextChannel,
options: savedOptions ?
App.session.hydrateOptions(nextChannel, savedOptions) :
App.session.buildDefaultOptions(nextChannel)
};
App.storage.setSession(nextSession);
App.session.savePreference(nextSession);
close();
App.ui.renderMenu();
App.videos.resetAndReload();
}
};
})();
// Settings + menu rendering.
App.ui.renderMenu = function() {
const session = App.storage.getSession();
const serverEntries = App.storage.getServerEntries();
const sourceSelect = document.getElementById('source-select');
const channelSelect = document.getElementById('channel-select');
const filtersContainer = document.getElementById('filters-container');
const sourcesList = document.getElementById('sources-list');
const addSourceBtn = document.getElementById('add-source-btn');
@@ -242,7 +586,7 @@ App.ui = App.ui || {};
const reloadChannelBtn = document.getElementById('reload-channel-btn');
const favoritesToggle = document.getElementById('favorites-toggle');
if (!sourceSelect || !channelSelect || !filtersContainer) return;
if (!sourceSelect || !filtersContainer) return;
sourceSelect.innerHTML = "";
serverEntries.forEach((entry) => {
@@ -281,80 +625,7 @@ App.ui = App.ui || {};
App.videos.resetAndReload();
};
const activeServer = serverEntries.find((entry) => entry.url === (session && session.server));
const activeServerData = activeServer && activeServer.data ? activeServer.data : null;
const availableChannels = activeServerData && activeServerData.channels ?
[...activeServerData.channels] :
[];
availableChannels.sort((a, b) => {
const nameA = (a.name || a.id || '').toLowerCase();
const nameB = (b.name || b.id || '').toLowerCase();
return nameA.localeCompare(nameB);
});
const channelGroups = activeServerData && Array.isArray(activeServerData.channelGroups) ?
activeServerData.channelGroups :
[];
channelSelect.innerHTML = "";
const groupedChannelIds = new Set();
channelGroups.forEach((group) => {
const channelIds = Array.isArray(group.channelIds) ?
group.channelIds.filter((id) => availableChannels.some((channel) => channel.id === id)) :
[];
if (channelIds.length === 0) return;
channelIds.forEach((id) => groupedChannelIds.add(id));
const optgroup = document.createElement('optgroup');
optgroup.label = group.title || group.id;
const groupOption = document.createElement('option');
groupOption.value = `group:${group.id}`;
groupOption.textContent = `All ${group.title || group.id}`;
optgroup.appendChild(groupOption);
channelIds.forEach((id) => {
const channel = availableChannels.find((ch) => ch.id === id);
const option = document.createElement('option');
option.value = channel.id;
option.textContent = channel.name || channel.id;
optgroup.appendChild(option);
});
channelSelect.appendChild(optgroup);
});
availableChannels
.filter((channel) => !groupedChannelIds.has(channel.id))
.forEach((channel) => {
const option = document.createElement('option');
option.value = channel.id;
option.textContent = channel.name || channel.id;
channelSelect.appendChild(option);
});
if (session && session.channel) {
channelSelect.value = session.channel.id;
}
channelSelect.onchange = () => {
const selectedId = channelSelect.value;
const nextChannel = activeServerData ? App.session.resolveChannelById(activeServerData, selectedId) : null;
const prefs = App.storage.getPreferences();
const serverPrefs = prefs[session.server] || {};
const savedOptions = nextChannel && serverPrefs.optionsByChannel ?
serverPrefs.optionsByChannel[nextChannel.id] :
null;
const nextSession = {
server: session.server,
channel: nextChannel,
options: nextChannel ? (savedOptions ? App.session.hydrateOptions(nextChannel, savedOptions) : App.session.buildDefaultOptions(nextChannel)) : {}
};
App.storage.setSession(nextSession);
App.session.savePreference(nextSession);
App.ui.renderMenu();
App.videos.resetAndReload();
};
App.ui.channels.render();
App.ui.renderFilters(filtersContainer, session);