604 lines
22 KiB
JavaScript
604 lines
22 KiB
JavaScript
(() => {
|
|
'use strict';
|
|
|
|
// Bumped: v3 stores group ids (with optional variant id) instead of raw paths.
|
|
const STORAGE_KEY = 'arcana-fx-sets-v3';
|
|
const LEGACY_KEY = 'arcana-fx-sets-v2';
|
|
|
|
const els = {
|
|
grid: document.getElementById('grid'),
|
|
setGrid: document.getElementById('set-grid'),
|
|
setEmpty: document.getElementById('set-empty'),
|
|
empty: document.getElementById('empty'),
|
|
search: document.getElementById('search'),
|
|
categories: document.getElementById('categories'),
|
|
status: document.getElementById('status'),
|
|
statusText: document.getElementById('status-text'),
|
|
refresh: document.getElementById('refresh-btn'),
|
|
stop: document.getElementById('stop-btn'),
|
|
stream: document.getElementById('stream-btn'),
|
|
streamStop: document.getElementById('stream-stop-btn'),
|
|
now: document.getElementById('now-btn'),
|
|
nowCount: document.getElementById('now-count'),
|
|
entityLabel: document.getElementById('entity-label'),
|
|
countLabel: document.getElementById('count-label'),
|
|
setSelect: document.getElementById('set-select'),
|
|
newSet: document.getElementById('new-set-btn'),
|
|
renameSet: document.getElementById('rename-set-btn'),
|
|
deleteSet: document.getElementById('delete-set-btn'),
|
|
setTitle: document.getElementById('set-title'),
|
|
setCount: document.getElementById('set-count'),
|
|
drawer: document.getElementById('now-drawer'),
|
|
backdrop: document.getElementById('drawer-backdrop'),
|
|
drawerClose: document.getElementById('drawer-close'),
|
|
drawerStopAll: document.getElementById('drawer-stop-all'),
|
|
activeList: document.getElementById('active-list'),
|
|
activeEmpty: document.getElementById('active-empty'),
|
|
filterGrid: document.getElementById('filter-grid'),
|
|
filterStatus: document.getElementById('filter-status'),
|
|
};
|
|
|
|
const state = {
|
|
groups: [],
|
|
groupsById: new Map(),
|
|
pathToGroup: new Map(), // legacy path -> { groupId, variantId }
|
|
categories: [],
|
|
activeCategory: 'all',
|
|
search: '',
|
|
busy: false,
|
|
streamOn: false,
|
|
active: [],
|
|
statusSocket: null,
|
|
statusFallbackTimer: null,
|
|
statusReconnectTimer: null,
|
|
statusReconnectDelay: 500,
|
|
sets: [],
|
|
currentSetId: null,
|
|
lastVariantPerGroup: new Map(), // anti-immediate-repeat memory
|
|
filters: [],
|
|
filter: { id: null, name: null, active: false },
|
|
};
|
|
|
|
state.sets = loadSets();
|
|
if (!state.sets.length) state.sets = [{ id: uid(), name: 'Session Favorites', items: [] }];
|
|
state.currentSetId = state.sets[0].id;
|
|
|
|
function uid() { return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`; }
|
|
function currentSet() { return state.sets.find((s) => s.id === state.currentSetId) || state.sets[0]; }
|
|
|
|
function setStatus(kind, text) {
|
|
els.status.classList.remove('ok', 'busy', 'err');
|
|
if (kind) els.status.classList.add(kind);
|
|
els.statusText.textContent = text;
|
|
}
|
|
|
|
function escapeHtml(str) {
|
|
return String(str).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"').replace(/'/g, ''');
|
|
}
|
|
|
|
function loadSets() {
|
|
// Prefer v3. If absent but v2 exists, migrate later (after groups load).
|
|
try {
|
|
const raw = localStorage.getItem(STORAGE_KEY);
|
|
if (raw) {
|
|
const parsed = JSON.parse(raw);
|
|
if (Array.isArray(parsed)) {
|
|
return parsed.filter((s) => s && s.id && s.name && Array.isArray(s.items));
|
|
}
|
|
}
|
|
} catch { /* fall through */ }
|
|
return [];
|
|
}
|
|
|
|
function saveSets() { localStorage.setItem(STORAGE_KEY, JSON.stringify(state.sets)); }
|
|
|
|
/**
|
|
* Migrate v2 (path-based) favourites to v3 (group/variant-based) using
|
|
* the path index from the freshly-loaded groups. Drops items that no
|
|
* longer resolve (effect was renamed or removed from the share).
|
|
*/
|
|
function migrateLegacySetsIfNeeded() {
|
|
if (state.sets.some((s) => s.items && s.items.length)) return; // already populated
|
|
if (localStorage.getItem(STORAGE_KEY)) return; // v3 already present
|
|
let legacy;
|
|
try {
|
|
const raw = localStorage.getItem(LEGACY_KEY);
|
|
if (!raw) return;
|
|
legacy = JSON.parse(raw);
|
|
} catch { return; }
|
|
if (!Array.isArray(legacy) || !legacy.length) return;
|
|
|
|
const migrated = legacy.map((s) => {
|
|
const items = Array.isArray(s.paths) ? s.paths
|
|
.map((p) => state.pathToGroup.get(p))
|
|
.filter(Boolean)
|
|
// de-dup: same group+variant pair shouldn't appear twice
|
|
.filter((ref, i, arr) => arr.findIndex((r) => r.groupId === ref.groupId && r.variantId === ref.variantId) === i)
|
|
: [];
|
|
return { id: s.id || uid(), name: s.name || 'Set', items };
|
|
}).filter((s) => s.name);
|
|
|
|
if (migrated.length) {
|
|
state.sets = migrated;
|
|
state.currentSetId = state.sets[0].id;
|
|
saveSets();
|
|
}
|
|
}
|
|
|
|
async function fetchJson(url, opts) {
|
|
const res = await fetch(url, opts);
|
|
const text = await res.text();
|
|
let body = null;
|
|
if (text) { try { body = JSON.parse(text); } catch { body = { error: text }; } }
|
|
if (!res.ok) {
|
|
const err = new Error((body && body.error) || `${res.status} ${res.statusText}`);
|
|
err.status = res.status;
|
|
throw err;
|
|
}
|
|
return body || {};
|
|
}
|
|
|
|
function renderCategories() {
|
|
const all = ['all', ...state.categories];
|
|
els.categories.innerHTML = all.map((c) => {
|
|
const active = state.activeCategory === c ? ' active' : '';
|
|
const label = c === 'all' ? 'All' : c;
|
|
return `<button class="chip${active}" data-cat="${escapeHtml(c)}" type="button">${escapeHtml(label)}</button>`;
|
|
}).join('');
|
|
}
|
|
|
|
function groupMatches(group, q) {
|
|
if (!q) return true;
|
|
const variantNames = group.variants.map((v) => v.name).join(' ');
|
|
const variantPaths = group.variants.flatMap((v) => v.allPaths || []).join(' ');
|
|
const tagText = (group.tags || []).join(' ');
|
|
const haystack = `${group.name} ${group.category} ${tagText} ${variantNames} ${variantPaths}`
|
|
.replace(/[/.\\_-]+/g, ' ')
|
|
.toLowerCase();
|
|
return haystack.includes(q);
|
|
}
|
|
|
|
function visibleGroups() {
|
|
const q = state.search.trim().toLowerCase();
|
|
return state.groups.filter((g) => {
|
|
if (state.activeCategory !== 'all' && g.category !== state.activeCategory) return false;
|
|
return groupMatches(g, q);
|
|
}).slice(0, 240);
|
|
}
|
|
|
|
function groupInCurrentSet(groupId) {
|
|
const set = currentSet();
|
|
return set.items.some((it) => it.groupId === groupId);
|
|
}
|
|
|
|
function variantsButtons(group) {
|
|
if (!group.hasNumberedVariants) return '';
|
|
const buttons = group.variants
|
|
.filter((v) => v.number != null)
|
|
.map((v) => `<button class="variant-btn" type="button" data-action="play-variant" data-variant="${escapeHtml(v.id)}" title="Play take ${v.number}">${v.number}</button>`)
|
|
.join('');
|
|
return `<div class="variant-row">${buttons}</div>`;
|
|
}
|
|
|
|
function tile(group, { inSetView = false } = {}) {
|
|
const inSet = groupInCurrentSet(group.id);
|
|
const variantTagText = group.hasNumberedVariants ? `${group.variantCount} takes` : null;
|
|
const tags = [
|
|
group.category,
|
|
group.isLoop ? 'LOOP' : null,
|
|
variantTagText,
|
|
].filter(Boolean);
|
|
const tagHtml = tags.map((t) => `<span class="tag${t === 'LOOP' ? ' tag-loop' : ''}">${escapeHtml(t)}</span>`).join('');
|
|
return `
|
|
<article class="tile${group.isLoop ? ' is-loop' : ''}" data-group-id="${escapeHtml(group.id)}">
|
|
<button class="play-hit" type="button" data-action="play" title="Play ${escapeHtml(group.name)}">
|
|
<div class="name">${escapeHtml(group.name)}${group.isLoop ? ' <span class="loop-glyph" aria-hidden="true">∞</span>' : ''}</div>
|
|
<div class="meta">${tagHtml}</div>
|
|
</button>
|
|
${variantsButtons(group)}
|
|
<div class="tile-actions">
|
|
${inSetView
|
|
? `<button class="mini danger" data-action="remove-set" type="button">Remove</button>`
|
|
: `<button class="mini ${inSet ? 'ok' : ''}" data-action="toggle-set" type="button">${inSet ? 'In set' : '+ Set'}</button>`}
|
|
</div>
|
|
</article>`;
|
|
}
|
|
|
|
function renderGrid() {
|
|
const filtered = visibleGroups();
|
|
els.empty.hidden = filtered.length !== 0;
|
|
els.countLabel.textContent = `${state.groups.length} sounds · showing ${filtered.length}`;
|
|
els.grid.innerHTML = filtered.map((g) => tile(g)).join('');
|
|
renderSet();
|
|
}
|
|
|
|
function renderSetsSelect() {
|
|
els.setSelect.innerHTML = state.sets.map((s) => `<option value="${escapeHtml(s.id)}">${escapeHtml(s.name)}</option>`).join('');
|
|
els.setSelect.value = state.currentSetId;
|
|
}
|
|
|
|
function renderSet() {
|
|
renderSetsSelect();
|
|
const set = currentSet();
|
|
const groups = set.items
|
|
.map((it) => state.groupsById.get(it.groupId))
|
|
.filter(Boolean);
|
|
els.setTitle.textContent = set.name;
|
|
els.setCount.textContent = `${groups.length} item${groups.length === 1 ? '' : 's'}`;
|
|
els.setEmpty.hidden = groups.length > 0;
|
|
els.setGrid.innerHTML = groups.map((g) => tile(g, { inSetView: true })).join('');
|
|
}
|
|
|
|
function renderActive() {
|
|
els.nowCount.textContent = String(state.active.length);
|
|
els.activeEmpty.hidden = state.active.length > 0;
|
|
els.activeList.innerHTML = state.active.map((a) => `
|
|
<div class="active-row${a.loop ? ' is-loop' : ''}">
|
|
<div>
|
|
<strong>${escapeHtml(a.name)}${a.loop ? ' <span class="loop-glyph">∞</span>' : ''}</strong>
|
|
<span>${escapeHtml(a.category || '')} · ${Math.round((a.ageMs || 0) / 1000)}s${a.loop ? ' · looping' : ''}</span>
|
|
${a.error ? `<em>${escapeHtml(a.error)}</em>` : ''}
|
|
</div>
|
|
<button class="mini danger" data-stop-id="${escapeHtml(a.id)}">Stop</button>
|
|
</div>`).join('');
|
|
}
|
|
|
|
function renderFilters() {
|
|
const activeId = state.filter && state.filter.active ? state.filter.id : null;
|
|
els.filterStatus.textContent = activeId ? `Active: ${state.filter.name || activeId}` : 'No filter';
|
|
els.filterStatus.classList.toggle('filter-active', Boolean(activeId));
|
|
els.filterGrid.innerHTML = state.filters.map((f) => {
|
|
const active = f.id === activeId ? ' active' : '';
|
|
return `
|
|
<article class="filter-card${active}" data-filter-id="${escapeHtml(f.id)}">
|
|
<div>
|
|
<strong>${escapeHtml(f.name)}</strong>
|
|
<span>${escapeHtml(f.description || '')}</span>
|
|
</div>
|
|
<div class="filter-actions">
|
|
<button class="mini${active ? ' ok' : ''}" type="button" data-filter-action="toggle">${active ? 'Clear' : 'Toggle'}</button>
|
|
<button class="mini momentary" type="button" data-filter-action="hold" title="Hold down to apply, release to clear">Hold</button>
|
|
</div>
|
|
</article>`;
|
|
}).join('');
|
|
}
|
|
|
|
async function setFilter(id, active = true) {
|
|
try {
|
|
const res = await fetchJson('/api/filter', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ id, active }),
|
|
});
|
|
state.filter = res.filter || (res.stream && res.stream.filter) || state.filter;
|
|
renderFilters();
|
|
setStatus('ok', state.filter && state.filter.active ? `Filter active — ${state.filter.name}` : 'Filter cleared');
|
|
} catch (err) {
|
|
console.error(err);
|
|
setStatus('err', `Filter failed: ${err.message}`);
|
|
}
|
|
}
|
|
|
|
async function loadFilters() {
|
|
try {
|
|
const res = await fetchJson('/api/filters');
|
|
state.filters = Array.isArray(res.filters) ? res.filters : [];
|
|
state.filter = res.filter || state.filter;
|
|
renderFilters();
|
|
} catch (err) {
|
|
console.warn('filters load failed', err);
|
|
}
|
|
}
|
|
|
|
async function loadConfig() {
|
|
try {
|
|
const cfg = await fetchJson('/api/config');
|
|
if (cfg.mediaPlayer) els.entityLabel.textContent = cfg.mediaPlayer;
|
|
} catch (err) { console.warn('config load failed', err); }
|
|
}
|
|
|
|
function indexGroups(groups) {
|
|
state.groups = groups;
|
|
state.groupsById = new Map(groups.map((g) => [g.id, g]));
|
|
state.pathToGroup = new Map();
|
|
for (const g of groups) {
|
|
for (const v of g.variants) {
|
|
for (const p of (v.allPaths || [])) {
|
|
state.pathToGroup.set(p, { groupId: g.id, variantId: v.id });
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
async function loadEffects({ force = false } = {}) {
|
|
setStatus('busy', force ? 'Rescanning library…' : 'Loading effects…');
|
|
try {
|
|
const data = await fetchJson(force ? '/api/effects?refresh=1' : '/api/effects');
|
|
indexGroups(Array.isArray(data.groups) ? data.groups : []);
|
|
state.categories = Array.isArray(data.categories) ? data.categories : [];
|
|
if (!state.categories.includes(state.activeCategory) && state.activeCategory !== 'all') state.activeCategory = 'all';
|
|
migrateLegacySetsIfNeeded();
|
|
renderCategories();
|
|
renderGrid();
|
|
setStatus('ok', `Ready — ${state.groups.length} sounds (${data.count} files)`);
|
|
} catch (err) {
|
|
console.error(err);
|
|
setStatus('err', `Load failed: ${err.message}`);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Picks a variant for a group, biased away from the last one played from
|
|
* the same group, so consecutive presses don't trigger the same take.
|
|
*/
|
|
function pickVariantForGroup(group) {
|
|
const variants = group.variants;
|
|
if (!variants.length) return null;
|
|
if (variants.length === 1) return variants[0];
|
|
const last = state.lastVariantPerGroup.get(group.id);
|
|
const pool = variants.filter((v) => v.id !== last);
|
|
const picked = pool[Math.floor(Math.random() * pool.length)] || variants[0];
|
|
state.lastVariantPerGroup.set(group.id, picked.id);
|
|
return picked;
|
|
}
|
|
|
|
async function playGroup(groupId, variantId) {
|
|
const group = state.groupsById.get(groupId);
|
|
if (!group) { setStatus('err', 'Group not found'); return; }
|
|
let chosenVariantId = variantId;
|
|
if (!chosenVariantId) {
|
|
const picked = pickVariantForGroup(group);
|
|
if (!picked) { setStatus('err', 'No variants'); return; }
|
|
chosenVariantId = picked.id;
|
|
} else {
|
|
state.lastVariantPerGroup.set(groupId, chosenVariantId);
|
|
}
|
|
const label = group.name + (group.isLoop ? ' (loop)' : '');
|
|
setStatus('busy', `Injecting — ${label}`);
|
|
try {
|
|
const res = await fetchJson('/api/play', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ groupId, variantId: chosenVariantId }),
|
|
});
|
|
state.active = (res.stream && res.stream.active) || state.active;
|
|
renderActive();
|
|
setStatus('ok', `Injected — ${(res.injected && res.injected.name) || label}`);
|
|
} catch (err) {
|
|
console.error(err);
|
|
setStatus('err', `Play failed: ${err.message}`);
|
|
}
|
|
}
|
|
|
|
async function startStream() {
|
|
if (state.busy) return;
|
|
state.busy = true;
|
|
setStatus('busy', 'Starting continuous device stream…');
|
|
try {
|
|
await fetchJson('/api/stream/start', { method: 'POST' });
|
|
state.streamOn = true;
|
|
els.stream.textContent = 'Restart device stream';
|
|
setStatus('ok', 'Device stream running — clicks will mix instead of replacing playback');
|
|
} catch (err) {
|
|
console.error(err);
|
|
setStatus('err', `Stream start failed: ${err.message}`);
|
|
} finally { state.busy = false; }
|
|
}
|
|
|
|
async function stopDeviceStream() {
|
|
setStatus('busy', 'Stopping device stream…');
|
|
try {
|
|
await fetchJson('/api/stream/stop', { method: 'POST' });
|
|
state.streamOn = false;
|
|
state.active = [];
|
|
els.stream.textContent = 'Start device stream';
|
|
renderActive();
|
|
setStatus('ok', 'Device stream stopped');
|
|
} catch (err) { setStatus('err', `Stop failed: ${err.message}`); }
|
|
}
|
|
|
|
async function stopEffects() {
|
|
try {
|
|
const res = await fetchJson('/api/stop', { method: 'POST' });
|
|
state.active = (res.stream && res.stream.active) || [];
|
|
renderActive();
|
|
setStatus('ok', 'Stopped all injected effects');
|
|
} catch (err) { setStatus('err', `Stop failed: ${err.message}`); }
|
|
}
|
|
|
|
async function refreshActive() {
|
|
try {
|
|
const res = await fetchJson('/api/stream/status');
|
|
applyStreamStatus(res.stream);
|
|
} catch { /* status fallback is best-effort */ }
|
|
}
|
|
|
|
function applyStreamStatus(stream) {
|
|
if (!stream) return;
|
|
state.active = stream.active || [];
|
|
if (stream.filter) {
|
|
state.filter = stream.filter;
|
|
if (Array.isArray(stream.filters)) state.filters = stream.filters;
|
|
renderFilters();
|
|
}
|
|
renderActive();
|
|
}
|
|
|
|
function statusWsUrl() {
|
|
const proto = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
|
return `${proto}//${window.location.host}/ws/status`;
|
|
}
|
|
|
|
function stopStatusFallback() {
|
|
if (state.statusFallbackTimer) clearInterval(state.statusFallbackTimer);
|
|
state.statusFallbackTimer = null;
|
|
}
|
|
|
|
function startStatusFallback() {
|
|
if (state.statusFallbackTimer) return;
|
|
refreshActive();
|
|
state.statusFallbackTimer = setInterval(refreshActive, 5000);
|
|
}
|
|
|
|
function connectStatusSocket() {
|
|
if (state.statusSocket && (
|
|
state.statusSocket.readyState === WebSocket.OPEN ||
|
|
state.statusSocket.readyState === WebSocket.CONNECTING
|
|
)) return;
|
|
|
|
const ws = new WebSocket(statusWsUrl());
|
|
state.statusSocket = ws;
|
|
|
|
ws.addEventListener('open', () => {
|
|
state.statusReconnectDelay = 500;
|
|
stopStatusFallback();
|
|
ws.send(JSON.stringify({ type: 'getStatus' }));
|
|
});
|
|
|
|
ws.addEventListener('message', (event) => {
|
|
let msg = null;
|
|
try { msg = JSON.parse(event.data); } catch { return; }
|
|
if (msg && msg.type === 'streamStatus') applyStreamStatus(msg.stream);
|
|
});
|
|
|
|
ws.addEventListener('close', () => {
|
|
if (state.statusSocket === ws) state.statusSocket = null;
|
|
startStatusFallback();
|
|
clearTimeout(state.statusReconnectTimer);
|
|
const delay = state.statusReconnectDelay;
|
|
state.statusReconnectDelay = Math.min(10000, Math.round(state.statusReconnectDelay * 1.7));
|
|
state.statusReconnectTimer = setTimeout(connectStatusSocket, delay);
|
|
});
|
|
|
|
ws.addEventListener('error', () => {
|
|
try { ws.close(); } catch { /* noop */ }
|
|
});
|
|
}
|
|
|
|
function toggleSet(groupId) {
|
|
const set = currentSet();
|
|
const idx = set.items.findIndex((it) => it.groupId === groupId);
|
|
if (idx >= 0) set.items.splice(idx, 1);
|
|
else set.items.push({ groupId });
|
|
saveSets();
|
|
renderGrid();
|
|
}
|
|
|
|
function removeFromSet(groupId) {
|
|
const set = currentSet();
|
|
set.items = set.items.filter((it) => it.groupId !== groupId);
|
|
saveSets();
|
|
renderGrid();
|
|
}
|
|
|
|
function newSet() {
|
|
const name = prompt('Set name?', 'New Encounter');
|
|
if (!name) return;
|
|
const set = { id: uid(), name: name.trim(), items: [] };
|
|
state.sets.push(set);
|
|
state.currentSetId = set.id;
|
|
saveSets();
|
|
renderGrid();
|
|
}
|
|
|
|
function renameSet() {
|
|
const set = currentSet();
|
|
const name = prompt('Rename set:', set.name);
|
|
if (!name) return;
|
|
set.name = name.trim();
|
|
saveSets();
|
|
renderGrid();
|
|
}
|
|
|
|
function deleteSet() {
|
|
if (state.sets.length === 1) return alert('Keep at least one set.');
|
|
const set = currentSet();
|
|
if (!confirm(`Delete set "${set.name}"?`)) return;
|
|
state.sets = state.sets.filter((s) => s.id !== set.id);
|
|
state.currentSetId = state.sets[0].id;
|
|
saveSets();
|
|
renderGrid();
|
|
}
|
|
|
|
function openDrawer() { els.drawer.removeAttribute('aria-hidden'); els.backdrop.hidden = false; refreshActive(); }
|
|
function closeDrawer() { els.drawer.setAttribute('aria-hidden', 'true'); els.backdrop.hidden = true; }
|
|
|
|
function gridClick(e) {
|
|
const action = e.target.closest('[data-action]');
|
|
const tileEl = e.target.closest('.tile');
|
|
if (!action || !tileEl) return;
|
|
const groupId = tileEl.dataset.groupId;
|
|
if (!groupId) return;
|
|
const a = action.dataset.action;
|
|
if (a === 'play') playGroup(groupId);
|
|
else if (a === 'play-variant') playGroup(groupId, action.dataset.variant);
|
|
else if (a === 'toggle-set') toggleSet(groupId);
|
|
else if (a === 'remove-set') removeFromSet(groupId);
|
|
}
|
|
|
|
els.grid.addEventListener('click', gridClick);
|
|
els.setGrid.addEventListener('click', gridClick);
|
|
els.filterGrid.addEventListener('click', (e) => {
|
|
const btn = e.target.closest('[data-filter-action="toggle"]');
|
|
if (!btn) return;
|
|
const card = btn.closest('[data-filter-id]');
|
|
if (!card) return;
|
|
const id = card.dataset.filterId;
|
|
const alreadyActive = state.filter && state.filter.active && state.filter.id === id;
|
|
setFilter(id, !alreadyActive);
|
|
});
|
|
|
|
els.filterGrid.addEventListener('pointerdown', (e) => {
|
|
const btn = e.target.closest('[data-filter-action="hold"]');
|
|
if (!btn) return;
|
|
e.preventDefault();
|
|
const card = btn.closest('[data-filter-id]');
|
|
if (!card) return;
|
|
btn.setPointerCapture?.(e.pointerId);
|
|
btn.classList.add('holding');
|
|
setFilter(card.dataset.filterId, true);
|
|
});
|
|
for (const eventName of ['pointerup', 'pointercancel', 'lostpointercapture']) {
|
|
els.filterGrid.addEventListener(eventName, (e) => {
|
|
const btn = e.target.closest?.('[data-filter-action="hold"]');
|
|
if (!btn || !btn.classList.contains('holding')) return;
|
|
btn.classList.remove('holding');
|
|
setFilter(null, false);
|
|
});
|
|
}
|
|
|
|
els.categories.addEventListener('click', (e) => {
|
|
const btn = e.target.closest('.chip'); if (!btn) return;
|
|
state.activeCategory = btn.dataset.cat || 'all'; renderCategories(); renderGrid();
|
|
});
|
|
let searchTimer = null;
|
|
els.search.addEventListener('input', () => {
|
|
clearTimeout(searchTimer);
|
|
searchTimer = setTimeout(() => { state.search = els.search.value; renderGrid(); }, 80);
|
|
});
|
|
els.refresh.addEventListener('click', () => loadEffects({ force: true }));
|
|
els.stop.addEventListener('click', stopEffects);
|
|
els.stream.addEventListener('click', startStream);
|
|
els.streamStop.addEventListener('click', stopDeviceStream);
|
|
els.drawerStopAll.addEventListener('click', stopEffects);
|
|
els.now.addEventListener('click', openDrawer);
|
|
els.drawerClose.addEventListener('click', closeDrawer);
|
|
els.backdrop.addEventListener('click', closeDrawer);
|
|
els.setSelect.addEventListener('change', () => { state.currentSetId = els.setSelect.value; renderGrid(); });
|
|
els.newSet.addEventListener('click', newSet);
|
|
els.renameSet.addEventListener('click', renameSet);
|
|
els.deleteSet.addEventListener('click', deleteSet);
|
|
els.activeList.addEventListener('click', async (e) => {
|
|
const btn = e.target.closest('[data-stop-id]'); if (!btn) return;
|
|
await fetchJson('/api/play/stop', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id: btn.dataset.stopId }) });
|
|
refreshActive();
|
|
});
|
|
|
|
loadConfig();
|
|
loadFilters();
|
|
loadEffects();
|
|
renderSetsSelect();
|
|
renderActive();
|
|
connectStatusSocket();
|
|
})();
|