audio player at the bottom

This commit is contained in:
Priec
2026-05-19 18:03:32 +02:00
parent e9439382cc
commit 4597b120f4
5 changed files with 128 additions and 17 deletions

View File

@@ -27,13 +27,43 @@
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function () {
if ((localStorage.getItem('theme') || 'dark') === 'system') applyTheme('system');
});
document.addEventListener('DOMContentLoaded', function () {
highlightTheme(localStorage.getItem('theme') || 'dark');
function markActiveNav() {
var path = location.pathname;
document.querySelectorAll('.term-navlinks a[data-nav]').forEach(function (a) {
var h = a.getAttribute('data-nav');
if (h === path || (h !== '/' && path.indexOf(h) === 0)) a.classList.add('is-active');
a.classList.toggle('is-active', h === path || (h !== '/' && path.indexOf(h) === 0));
});
}
function initPage() {
highlightTheme(localStorage.getItem('theme') || 'dark');
markActiveNav();
}
// --- persistent audio player (survives boosted page navigation) ---
function uwPlay(src, title) {
var audio = document.getElementById('uw-audio');
if (!audio) return;
var now = document.getElementById('uw-now');
if (now) now.textContent = title || 'unknown track';
if (audio.getAttribute('src') !== src) audio.setAttribute('src', src);
document.documentElement.classList.add('uw-playing');
var played = audio.play();
if (played && played.catch) played.catch(function () {});
}
function uwStop() {
var audio = document.getElementById('uw-audio');
if (audio) audio.pause();
document.documentElement.classList.remove('uw-playing');
}
document.addEventListener('DOMContentLoaded', initPage);
document.addEventListener('htmx:afterSwap', initPage);
document.addEventListener('click', function (e) {
if (!e.target.closest) return;
var play = e.target.closest('.uw-play');
if (play) {
uwPlay(play.getAttribute('data-src'), play.getAttribute('data-title'));
} else if (e.target.closest('#uw-close')) {
uwStop();
}
});
</script>
<link href="/static/css/app.css" rel="stylesheet" type="text/css">
@@ -63,7 +93,7 @@
}
</style>
</head>
<body class="flex min-h-screen flex-col bg-base-100 text-base-content antialiased">
<body hx-boost="true" class="flex min-h-screen flex-col bg-base-100 text-base-content antialiased">
<header class="term-titlebar">
<nav class="term-nav">
<span class="term-dots" aria-hidden="true">
@@ -81,7 +111,7 @@
{% if logged_in_admin %}
<li><a href="/admin/dashboard" class="t-yellow" data-nav="/admin">admin</a></li>
<li>
<form method="post" action="/admin/logout">
<form method="post" action="/admin/logout" hx-boost="false">
<button type="submit" class="t-red w-full">logout</button>
</form>
</li>
@@ -148,5 +178,13 @@
<span class="term-seg is-alt">gruvbox-dark</span>
<span class="term-seg is-mode">100%</span>
</footer>
<div id="uw-player" hx-preserve="true">
<div class="uw-player-inner">
<span class="uw-player-tag">&#9654; now playing</span>
<span id="uw-now" class="uw-player-title">&mdash;</span>
<audio id="uw-audio" controls preload="none"></audio>
<button type="button" id="uw-close" class="uw-player-close" aria-label="Stop playback" title="Stop">&#10005;</button>
</div>
</div>
</body>
</html>