77 lines
2.5 KiB
JavaScript
77 lines
2.5 KiB
JavaScript
// static/streams-ui.js — public streams loader and profile-link handling
|
|
import { showOnly } from './router.js';
|
|
|
|
let loadingStreams = false;
|
|
|
|
export function renderStreamList(streams) {
|
|
const ul = document.getElementById('stream-list');
|
|
if (!ul) return;
|
|
if (streams.length) {
|
|
streams.sort();
|
|
ul.innerHTML = streams
|
|
.map(
|
|
uid => `<li><a href="/?profile=${encodeURIComponent(uid)}" class="profile-link">▶ ${uid}</a></li>`
|
|
)
|
|
.join('');
|
|
} else {
|
|
ul.innerHTML = '<li>No active streams.</li>';
|
|
}
|
|
highlightActiveProfileLink();
|
|
}
|
|
|
|
export function highlightActiveProfileLink() {
|
|
const params = new URLSearchParams(window.location.search);
|
|
const profileUid = params.get('profile');
|
|
const ul = document.getElementById('stream-list');
|
|
if (!ul) return;
|
|
ul.querySelectorAll('a.profile-link').forEach(link => {
|
|
const url = new URL(link.href, window.location.origin);
|
|
const uidParam = url.searchParams.get('profile');
|
|
link.classList.toggle('active', uidParam === profileUid);
|
|
});
|
|
}
|
|
|
|
export function initStreamsLoader() {
|
|
const streamsLink = document.getElementById('show-streams');
|
|
streamsLink?.addEventListener('click', async e => {
|
|
e.preventDefault();
|
|
if (loadingStreams) return;
|
|
loadingStreams = true;
|
|
showOnly('stream-page');
|
|
try {
|
|
const res = await fetch('/streams');
|
|
if (!res.ok) throw new Error(`HTTP error ${res.status}`);
|
|
const data = await res.json();
|
|
renderStreamList(data.streams || []);
|
|
} catch {
|
|
const ul = document.getElementById('stream-list');
|
|
if (ul) ul.innerHTML = '<li>Error loading stream list</li>';
|
|
} finally {
|
|
loadingStreams = false;
|
|
}
|
|
});
|
|
}
|
|
|
|
export function initStreamLinks() {
|
|
const ul = document.getElementById('stream-list');
|
|
if (!ul) return;
|
|
ul.addEventListener('click', e => {
|
|
const a = e.target.closest('a.profile-link');
|
|
if (!a || !ul.contains(a)) return;
|
|
e.preventDefault();
|
|
const url = new URL(a.href, window.location.origin);
|
|
const profileUid = url.searchParams.get('profile');
|
|
if (profileUid && window.location.search !== `?profile=${encodeURIComponent(profileUid)}`) {
|
|
window.profileNavigationTriggered = true;
|
|
window.history.pushState({}, '', `/?profile=${encodeURIComponent(profileUid)}`);
|
|
window.dispatchEvent(new Event('popstate'));
|
|
}
|
|
});
|
|
}
|
|
|
|
export function initStreamsUI() {
|
|
initStreamsLoader();
|
|
initStreamLinks();
|
|
window.addEventListener('popstate', highlightActiveProfileLink);
|
|
}
|