carsten/LinedanceAfspiller
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ny live

Browse Source
This commit is contained in:
Carsten Kvist
2026-04-15 16:58:52 +02:00
parent 920cd8222d
commit c5e35f0889
3 changed files with 213 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
linedance-api/app/routers/live.py
View File

@@ -20,12 +20,13 @@ _live_cache: dict = {}
class SongStatus(BaseModel): class SongStatus(BaseModel):
title: str title: str
artist: str = "" artist: str = ""
status: str = "pending" status: str = "pending"
position: int position: int
dance: str = "" dance: str = ""
duration: int = 0 duration: int = 0
is_workshop: bool = False
class LiveStatus(BaseModel): class LiveStatus(BaseModel):

305
linedance-api/web/public/live.html
View File

@@ -6,15 +6,13 @@
<title>LineDance — Live</title> <title>LineDance — Live</title>
<style> <style>
:root { :root {
--bg: #0a0b0d; --bg: #0a0b0d;
--surface: #13151a; --surface: #13151a;
--border: #252830; --border: #252830;
--accent: #e8a020; --accent: #e8a020;
--text: #eceef4; --text: #eceef4;
--muted: #60687a; --muted: #60687a;
--green: #27ae60; --green: #27ae60;
--played: #2d3a2e;
--skip: #2a2020;
} }
.light { .light {
--bg: #f5f4ef; --bg: #f5f4ef;
@@ -24,10 +22,7 @@
--text: #1a1c22; --text: #1a1c22;
--muted: #7a7a6a; --muted: #7a7a6a;
--green: #1e8449; --green: #1e8449;
--played: #eaf4ea;
--skip: #f4eaea;
} }
* { box-sizing: border-box; margin: 0; padding: 0; } * { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; } html, body { height: 100%; }
body { body {
@@ -39,116 +34,124 @@
/* ── Header ── */ /* ── Header ── */
header { header {
padding: .6rem 1.25rem; padding: .55rem 1.25rem;
display: flex; align-items: center; justify-content: space-between; display: flex; align-items: center; justify-content: space-between;
border-bottom: 1px solid var(--border); flex-shrink: 0; border-bottom: 1px solid var(--border); flex-shrink: 0;
} }
.logo { font-size: .8rem; letter-spacing: .1em; color: var(--muted); font-weight: 600; } .logo { font-size: .75rem; letter-spacing: .1em; color: var(--muted); font-weight: 600; }
.logo b { color: var(--accent); } .logo b { color: var(--accent); }
.header-right { display: flex; align-items: center; gap: .75rem; } .header-right { display: flex; align-items: center; gap: .75rem; }
/* Countdown ring */ /* Countdown ring */
.countdown-wrap { display: flex; align-items: center; gap: .4rem; } .countdown-wrap { display: flex; align-items: center; gap: .35rem; }
.countdown-svg { width: 24px; height: 24px; flex-shrink: 0; } .countdown-svg { width: 22px; height: 22px; flex-shrink: 0; }
.countdown-bg { fill: none; stroke: var(--border); stroke-width: 3; } .countdown-bg { fill: none; stroke: var(--border); stroke-width: 3; }
.countdown-arc { .countdown-arc {
fill: none; stroke: var(--accent); stroke-width: 3; fill: none; stroke: var(--accent); stroke-width: 3;
stroke-linecap: round; stroke-linecap: round; stroke-dasharray: 56.5; stroke-dashoffset: 0;
stroke-dasharray: 56.5; transform: rotate(-90deg); transform-origin: 50% 50%;
stroke-dashoffset: 0;
transform: rotate(-90deg);
transform-origin: 50% 50%;
transition: stroke-dashoffset .9s linear; transition: stroke-dashoffset .9s linear;
} }
.countdown-num { .countdown-num { font-size: .68rem; color: var(--muted); min-width: 1rem; }
font-size: .7rem; color: var(--muted); .live-dot { display: flex; align-items: center; gap: .35rem; font-size: .7rem; color: var(--muted); }
font-variant-numeric: tabular-nums; min-width: 1.2rem; .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
}
/* Live dot */
.live-dot { display: flex; align-items: center; gap: .35rem; font-size: .72rem; color: var(--muted); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); transition: background .3s; }
.dot.active { background: var(--green); animation: pulse 2s infinite; } .dot.active { background: var(--green); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} } @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
/* Theme toggle */
.theme-btn { .theme-btn {
background: none; border: 1px solid var(--border); border-radius: 6px; background: none; border: 1px solid var(--border); border-radius: 5px;
padding: .25rem .5rem; cursor: pointer; color: var(--muted); padding: .2rem .5rem; cursor: pointer; color: var(--muted); font-size: .72rem;
font-size: .78rem; transition: all .15s; transition: all .15s;
} }
.theme-btn:hover { border-color: var(--accent); color: var(--text); } .theme-btn:hover { border-color: var(--accent); color: var(--text); }
/* ── Now playing ── */ /* ── Now playing ── */
#now-playing { #now-playing { padding: 1.5rem 1.25rem 1rem; flex-shrink: 0; }
padding: 1.75rem 1.25rem 1.25rem; flex-shrink: 0;
}
.np-label { .np-label {
font-size: .65rem; letter-spacing: .18em; text-transform: uppercase; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
color: var(--accent); font-weight: 700; margin-bottom: .5rem; color: var(--accent); font-weight: 700; margin-bottom: .4rem;
} }
/* Dans er primær */ /* Dans primær — stor */
.np-dance { .np-dance {
font-size: clamp(2rem, 7vw, 4.5rem); font-size: clamp(2.2rem, 8vw, 5rem);
font-weight: 800; line-height: 1; color: var(--text); font-weight: 800; line-height: 1; color: var(--text);
margin-bottom: .4rem; letter-spacing: -.02em; letter-spacing: -.02em; margin-bottom: .3rem;
} }
.np-dance:empty::before { content: '—'; color: var(--muted); } .np-dance:empty::before { content: '—'; color: var(--muted); }
/* Nummer under dans */
.np-number {
font-size: clamp(.75rem, 2vw, 1rem);
color: var(--muted); margin-bottom: .2rem;
font-variant-numeric: tabular-nums;
}
.np-number b { color: var(--text); }
/* Sang + artist sekundær */ /* Sang + artist sekundær */
.np-song { .np-song {
font-size: clamp(.9rem, 2.5vw, 1.3rem); font-size: clamp(.85rem, 2.2vw, 1.2rem);
color: var(--muted); margin-bottom: 1rem; line-height: 1.3; color: var(--muted); margin-bottom: .9rem;
} }
.np-song span { color: var(--text); font-weight: 500; } .np-song span { color: var(--text); }
/* Progress */ /* Estimeret tid til næste */
.progress-bar { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; margin-bottom: .4rem; } .np-eta {
.progress-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width .3s; width: 0%; } font-size: clamp(.72rem, 1.8vw, .9rem);
.progress-text { font-size: .72rem; color: var(--muted); display: flex; justify-content: space-between; } color: var(--muted); margin-bottom: .5rem;
display: flex; align-items: center; gap: .4rem;
}
.np-eta b { color: var(--accent); }
/* ── Fremgangsbar — NEDERST på now-playing ── */
.progress-section { margin-top: .5rem; }
.progress-bar { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; margin-bottom: .35rem; }
.progress-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width .4s; width: 0%; }
.progress-text {
font-size: .7rem; color: var(--muted);
display: flex; justify-content: space-between;
}
/* ── Divider ── */ /* ── Divider ── */
.divider { border: none; border-top: 1px solid var(--border); margin: .5rem 1.25rem; flex-shrink: 0; } .divider { border: none; border-top: 1px solid var(--border); margin: .4rem 1.25rem; flex-shrink: 0; }
.next-label { .next-label {
padding: .5rem 1.25rem .3rem; padding: .4rem 1.25rem .2rem;
font-size: .65rem; letter-spacing: .15em; text-transform: uppercase; font-size: .62rem; letter-spacing: .15em; text-transform: uppercase;
color: var(--muted); font-weight: 600; flex-shrink: 0; color: var(--muted); font-weight: 600; flex-shrink: 0;
} }
/* ── Song list ── */ /* ── Song list ── */
#song-list { flex: 1; overflow-y: auto; padding: .25rem .75rem .5rem; } #song-list { flex: 1; overflow-y: auto; padding: .2rem .75rem .5rem; }
#song-list::-webkit-scrollbar { width: 3px; } #song-list::-webkit-scrollbar { width: 3px; }
#song-list::-webkit-scrollbar-thumb { background: var(--border); } #song-list::-webkit-scrollbar-thumb { background: var(--border); }
.song-item { .song-item {
display: flex; align-items: center; gap: .6rem; display: flex; align-items: center; gap: .6rem;
padding: .45rem .5rem; border-radius: 7px; transition: background .1s; padding: .4rem .5rem; border-radius: 7px; margin-bottom: 1px;
margin-bottom: 1px;
} }
.song-item.playing { .song-item.playing {
background: rgba(232,160,32,.09); background: rgba(232,160,32,.09);
border: 1px solid rgba(232,160,32,.22); border: 1px solid rgba(232,160,32,.22);
} }
.song-item.played { background: var(--played); opacity: .55; } .song-item.played { opacity: .4; }
.song-item.skipped { background: var(--skip); opacity: .35; } .song-item.skipped { opacity: .25; }
.song-num { font-size: .7rem; color: var(--muted); width: 1.4rem; text-align: right; flex-shrink: 0; } .song-num { font-size: .68rem; color: var(--muted); width: 1.4rem; text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.song-check { width: 1.1rem; flex-shrink: 0; text-align: center; font-size: .75rem; color: var(--muted); } .song-check { width: 1rem; flex-shrink: 0; text-align: center; font-size: .72rem; color: var(--muted); }
.song-item.played .song-check { color: var(--green); } .song-item.played .song-check { color: var(--green); }
.song-info { flex: 1; min-width: 0; } .song-info { flex: 1; min-width: 0; }
/* Dans er primær i listen også */
.song-dance-name { .song-dance-name {
font-size: clamp(.82rem, 2vw, 1rem); font-weight: 600; font-size: clamp(.8rem, 2vw, .95rem); font-weight: 600;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
color: var(--text);
} }
.song-dance-name:empty { display: none; }
.song-title-sm { .song-title-sm {
font-size: clamp(.7rem, 1.6vw, .82rem); color: var(--muted); font-size: clamp(.68rem, 1.6vw, .8rem); color: var(--muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
} }
.song-eta-sm {
font-size: .65rem; color: var(--muted); flex-shrink: 0;
font-variant-numeric: tabular-nums; text-align: right; min-width: 2.5rem;
}
/* ── States ── */ /* ── States ── */
#empty, #no-event, #picker { #empty, #no-event, #picker {
@@ -156,24 +159,22 @@
justify-content: center; flex: 1; gap: .75rem; justify-content: center; flex: 1; gap: .75rem;
color: var(--muted); text-align: center; padding: 2rem; color: var(--muted); text-align: center; padding: 2rem;
} }
.spinner { width: 28px; height: 28px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; } .spinner { width: 26px; height: 26px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } } @keyframes spin { to { transform: rotate(360deg); } }
.no-event-icon { font-size: 2.5rem; opacity: .25; }
.big-text { font-size: 1rem; color: var(--text); } .big-text { font-size: 1rem; color: var(--text); }
.playlist-pick-btn { .playlist-pick-btn {
background: var(--surface); border: 1px solid var(--border); background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
border-radius: 10px; padding: .8rem 1.1rem; width: 100%; max-width: 320px; padding: .75rem 1.1rem; width: 100%; max-width: 320px; text-align: left;
text-align: left; cursor: pointer; color: var(--text); font-family: inherit; cursor: pointer; color: var(--text); font-family: inherit; transition: all .15s;
transition: all .15s;
} }
.playlist-pick-btn:hover { border-color: var(--accent); } .playlist-pick-btn:hover { border-color: var(--accent); }
.playlist-pick-btn strong { display: block; font-size: .9rem; margin-bottom: .15rem; } .playlist-pick-btn strong { display: block; font-size: .88rem; margin-bottom: .15rem; }
.playlist-pick-btn span { font-size: .75rem; color: var(--muted); } .playlist-pick-btn span { font-size: .74rem; color: var(--muted); }
/* ── Footer ── */ /* ── Footer ── */
footer { footer {
padding: .5rem 1.25rem; border-top: 1px solid var(--border); padding: .45rem 1.25rem; border-top: 1px solid var(--border);
font-size: .68rem; color: var(--muted); font-size: .67rem; color: var(--muted);
display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;
} }
@@ -206,13 +207,13 @@
</header> </header>
<div id="picker"> <div id="picker">
<h2 style="font-size:1.05rem;color:var(--text)">Vælg playliste</h2> <h2 style="font-size:1rem;color:var(--text)">Vælg playliste</h2>
<p>Brug URL-parametret <code>?id=PLAYLIST_ID</code> eller vælg herunder</p> <p style="max-width:300px">Brug <code>?id=PLAYLIST_ID</code> i URL eller vælg herunder</p>
<div id="picker-list"></div> <div id="picker-list"></div>
</div> </div>
<div id="no-event"> <div id="no-event">
<div class="no-event-icon">🎵</div> <div style="font-size:2.5rem;opacity:.2">🎵</div>
<div class="big-text">Ingen aktiv playliste</div> <div class="big-text">Ingen aktiv playliste</div>
<div>Åbn LineDance Player og start et event</div> <div>Åbn LineDance Player og start et event</div>
</div> </div>
@@ -222,16 +223,23 @@
<div id="now-playing" style="display:none"> <div id="now-playing" style="display:none">
<div class="np-label" id="np-label">▶ Spiller nu</div> <div class="np-label" id="np-label">▶ Spiller nu</div>
<div class="np-dance" id="np-dance"></div> <div class="np-dance" id="np-dance"></div>
<div class="np-number" id="np-number"></div>
<div class="np-song" id="np-song"></div> <div class="np-song" id="np-song"></div>
<div class="progress-bar"><div class="progress-fill" id="np-progress"></div></div> <div class="np-eta" id="np-eta" style="display:none">
<div class="progress-text"> ⏱ Næste dans starter om ca. <b id="np-eta-val"></b>
<span id="np-played">0 afspillet</span> </div>
<span id="np-remaining">0 tilbage</span> <!-- Fremgangsbar NEDERST -->
<div class="progress-section">
<div class="progress-bar"><div class="progress-fill" id="np-progress"></div></div>
<div class="progress-text">
<span id="np-played">0 afspillet</span>
<span id="np-remaining">0 tilbage</span>
</div>
</div> </div>
</div> </div>
<hr class="divider" id="divider" style="display:none"> <hr class="divider" id="divider" style="display:none">
<div class="next-label" id="next-label" style="display:none">Kommende dans</div> <div class="next-label" id="next-label" style="display:none">Kommende</div>
<div id="song-list"></div> <div id="song-list"></div>
<footer> <footer>
@@ -242,8 +250,10 @@
<script> <script>
const API = '/api'; const API = '/api';
const POLL_SECS = 5; const POLL_SECS = 5;
const BETWEEN_DANCE_SEC = 30; // pause mellem danse (bruges i estimat)
const WORKSHOP_MIN_SEC = 20 * 60; // default workshoptid hvis ingen varighed
let playlistId = new URLSearchParams(location.search).get('id'); let playlistId = new URLSearchParams(location.search).get('id');
let pollTimer = null;
let countdownTimer = null; let countdownTimer = null;
let countdownVal = POLL_SECS; let countdownVal = POLL_SECS;
let dark = localStorage.getItem('ld_live_theme') !== 'light'; let dark = localStorage.getItem('ld_live_theme') !== 'light';
@@ -278,13 +288,49 @@ function updateCountdown() {
document.getElementById('countdown-num').textContent = countdownVal; document.getElementById('countdown-num').textContent = countdownVal;
} }
// ── Fetch & render ──────────────────────────────────────────────────────────── // ── Hjælpefunktioner ─────────────────────────────────────────────────────────
function fmt(s) { return (s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); } function fmt(s) { return (s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
function fmtDur(secs) {
if (!secs || secs <= 0) return '';
const m = Math.floor(secs / 60);
const s = Math.round(secs % 60);
if (m === 0) return `${s}s`;
return s === 0 ? `${m} min` : `${m}:${String(s).padStart(2,'0')}`;
}
function fmtTime(d) { function fmtTime(d) {
if (!d) return ''; if (!d) return '';
return new Date(d).toLocaleTimeString('da-DK', { hour:'2-digit', minute:'2-digit', second:'2-digit' }); return new Date(d).toLocaleTimeString('da-DK', { hour:'2-digit', minute:'2-digit', second:'2-digit' });
} }
// Dansenavn — workshop vises som "Workshop"
function getDanceName(song) {
if (song.is_workshop) return 'Workshop';
return song.dance || '';
}
// Estimeret varighed for en sang (bruges til tidsestimat)
function songDuration(song) {
if (song.is_workshop) {
return song.duration > 0 ? song.duration : WORKSHOP_MIN_SEC;
}
return song.duration > 0 ? song.duration : 210; // default 3:30
}
// Beregn estimeret sekunder til en bestemt index
function estimateSecsTo(songs, fromIdx) {
let secs = 0;
for (let i = 0; i < fromIdx; i++) {
const s = songs[i];
if (s.status === 'played' || s.status === 'skipped') continue;
secs += songDuration(s);
secs += BETWEEN_DANCE_SEC; // pause mellem danse
}
return secs;
}
// ── Fetch & render ────────────────────────────────────────────────────────────
async function loadAndRender() { async function loadAndRender() {
if (!playlistId) { await showPicker(); return; } if (!playlistId) { await showPicker(); return; }
try { try {
@@ -304,7 +350,7 @@ async function showPicker() {
document.getElementById('picker-list').innerHTML = lists.map(p => ` document.getElementById('picker-list').innerHTML = lists.map(p => `
<button class="playlist-pick-btn" onclick="selectPlaylist('${p.id}')"> <button class="playlist-pick-btn" onclick="selectPlaylist('${p.id}')">
<strong>${fmt(p.name)}</strong> <strong>${fmt(p.name)}</strong>
<span>${p.now_playing ? '▶ ' + fmt(p.now_playing) : 'Afventer start'}</span> <span>${p.now_playing ? '▶ '+fmt(p.now_playing) : 'Afventer start'}</span>
</button>`).join(''); </button>`).join('');
} catch(e) { showNoEvent(); } } catch(e) { showNoEvent(); }
} }
@@ -322,7 +368,7 @@ function showNoEvent() {
function show(id) { function show(id) {
['picker','no-event','empty','now-playing'].forEach(x => { ['picker','no-event','empty','now-playing'].forEach(x => {
document.getElementById(x).style.display = x === id ? (x === 'empty' ? 'flex' : '') : 'none'; document.getElementById(x).style.display = x === id ? '' : 'none';
}); });
if (id !== 'now-playing') { if (id !== 'now-playing') {
document.getElementById('divider').style.display = 'none'; document.getElementById('divider').style.display = 'none';
@@ -332,7 +378,9 @@ function show(id) {
} }
function render(data) { function render(data) {
const songs = data.songs || []; const songs = data.songs || [];
const hasLive = !!data.updated_at;
document.getElementById('picker').style.display = 'none'; document.getElementById('picker').style.display = 'none';
document.getElementById('no-event').style.display = 'none'; document.getElementById('no-event').style.display = 'none';
document.getElementById('empty').style.display = 'none'; document.getElementById('empty').style.display = 'none';
@@ -344,63 +392,104 @@ function render(data) {
const pending = songs.filter(s => s.status === 'pending'); const pending = songs.filter(s => s.status === 'pending');
const playedN = songs.filter(s => s.status === 'played' || s.status === 'skipped').length; const playedN = songs.filter(s => s.status === 'played' || s.status === 'skipped').length;
const total = songs.length; const total = songs.length;
const hasLive = !!data.updated_at;
// Now playing sektion // ── Now playing ────────────────────────────────────────────────────────────
const npSection = document.getElementById('now-playing');
if (songs.length > 0) { if (songs.length > 0) {
npSection.style.display = ''; document.getElementById('now-playing').style.display = '';
const current = playing || pending[0]; const current = playing || pending[0];
const done = !playing && pending.length === 0; const done = !playing && pending.length === 0;
const currentIdx = current ? songs.indexOf(current) : -1;
document.getElementById('np-label').textContent = document.getElementById('np-label').textContent =
playing ? '▶ Spiller nu' : done ? '✓ Afsluttet' : '⏸ Pause'; playing ? '▶ Spiller nu' : done ? '✓ Afsluttet' : '⏸ Pause';
// Dans er primær // Dans primær
document.getElementById('np-dance').textContent = document.getElementById('np-dance').textContent =
current ? (current.dance || '') : ''; current ? getDanceName(current) : '';
// Sang + artist sekundær // Nummer under dansen
if (current) { if (current && currentIdx >= 0) {
document.getElementById('np-number').innerHTML =
`Nr. <b>${currentIdx + 1}</b> af ${total}`;
} else {
document.getElementById('np-number').textContent = '';
}
// Sang sekundær (ikke ved workshop)
if (current && !current.is_workshop) {
const t = current.title || '—'; const t = current.title || '—';
const a = current.artist || ''; const a = current.artist || '';
document.getElementById('np-song').innerHTML = document.getElementById('np-song').innerHTML =
`<span>${fmt(t)}</span>${a ? ' · ' + fmt(a) : ''}`; `<span>${fmt(t)}</span>${a ? ' · ' + fmt(a) : ''}`;
} else { } else {
document.getElementById('np-song').textContent = done ? 'Danselisten er afsluttet' : ''; document.getElementById('np-song').textContent = '';
} }
// ETA til næste dans
const etaEl = document.getElementById('np-eta');
const etaValEl = document.getElementById('np-eta-val');
if (playing && currentIdx >= 0) {
// Find næste pending sang
const nextIdx = songs.findIndex((s, i) => i > currentIdx && s.status === 'pending');
if (nextIdx >= 0) {
// Varighed af nuværende sang + pause
const remainSecs = songDuration(playing) + BETWEEN_DANCE_SEC;
etaEl.style.display = '';
etaValEl.textContent = fmtDur(remainSecs);
} else {
etaEl.style.display = 'none';
}
} else {
etaEl.style.display = 'none';
}
// Fremgangsbar
const pct = total > 0 ? Math.round(playedN / total * 100) : 0; const pct = total > 0 ? Math.round(playedN / total * 100) : 0;
document.getElementById('np-progress').style.width = pct + '%'; document.getElementById('np-progress').style.width = pct + '%';
document.getElementById('np-played').textContent = `${playedN} afspillet`; document.getElementById('np-played').textContent = `${playedN} afspillet`;
document.getElementById('np-remaining').textContent = `${pending.length} tilbage`; document.getElementById('np-remaining').textContent = `${pending.length} tilbage`;
setDot(hasLive, hasLive ? 'Live' : 'Afventer'); setDot(hasLive, hasLive ? 'Live' : 'Afventer');
} else { } else {
npSection.style.display = 'none'; document.getElementById('now-playing').style.display = 'none';
setDot(false, 'Ingen sange'); setDot(false, 'Ingen sange');
} }
// Liste — vis alle sange, dans primær // ── Songliste ──────────────────────────────────────────────────────────────
const hasList = songs.length > 0; const hasList = songs.length > 0;
document.getElementById('divider').style.display = hasList ? '' : 'none'; document.getElementById('divider').style.display = hasList ? '' : 'none';
document.getElementById('next-label').style.display = hasList ? '' : 'none'; document.getElementById('next-label').style.display = hasList ? '' : 'none';
// Beregn kumulative tidsestimater fra nuværende position
const playingIdx = songs.findIndex(s => s.status === 'playing');
let cumSecs = 0;
document.getElementById('song-list').innerHTML = songs.map((s, i) => { document.getElementById('song-list').innerHTML = songs.map((s, i) => {
const icon = s.status === 'played' ? '✓' : const icon = s.status === 'played' ? '✓' :
s.status === 'skipped' ? '—' : s.status === 'skipped' ? '—' :
s.status === 'playing' ? '▶' : ''; s.status === 'playing' ? '▶' : '';
const cls = 'song-item ' + (s.status || 'pending'); const cls = 'song-item ' + (s.status || 'pending');
const dance = s.dance || ''; const name = getDanceName(s);
const song = [s.title, s.artist].filter(Boolean).join(' · '); const sub = (!s.is_workshop && s.title) ? s.title + (s.artist ? ' · ' + s.artist : '') : '';
// ETA for pending sange efter den der spiller
let etaTxt = '';
if (s.status === 'pending' && playingIdx >= 0 && i > playingIdx) {
cumSecs += songDuration(songs[i-1] || s) + BETWEEN_DANCE_SEC;
if (cumSecs > 0) etaTxt = `~${fmtDur(cumSecs)}`;
} else if (s.status === 'playing') {
cumSecs = 0;
}
return ` return `
<div class="${cls}"> <div class="${cls}">
<span class="song-num">${i+1}</span> <span class="song-num">${i+1}</span>
<span class="song-check">${icon}</span> <span class="song-check">${icon}</span>
<div class="song-info"> <div class="song-info">
<div class="song-dance-name">${fmt(dance)}</div> <div class="song-dance-name">${fmt(name)}</div>
<div class="song-title-sm">${fmt(song)}</div> ${sub ? `<div class="song-title-sm">${fmt(sub)}</div>` : ''}
</div> </div>
${etaTxt ? `<span class="song-eta-sm">${etaTxt}</span>` : ''}
</div>`; </div>`;
}).join(''); }).join('');
} }

16
linedance-app/ui/main_window.py
View File

@@ -1071,6 +1071,7 @@ class MainWindow(QMainWindow):
self._song_ended = False self._song_ended = False
self._player.play() self._player.play()
self._btn_play.setText("⏸") self._btn_play.setText("⏸")
self._sync_event_status_to_playlist()
def _stop(self): def _stop(self):
# Annuller evt. igangværende demo_then_play # Annuller evt. igangværende demo_then_play
@@ -1301,13 +1302,14 @@ class MainWindow(QMainWindow):
payload = json.dumps({ payload = json.dumps({
"songs": [ "songs": [
{ {
"title": s.get("title", ""), "title": s.get("title", ""),
"artist": s.get("artist", ""), "artist": s.get("artist", ""),
"status": statuses[i] if i < len(statuses) else "pending", "status": statuses[i] if i < len(statuses) else "pending",
"position": i + 1, "position": i + 1,
"dance": s.get("active_dance", "") or "dance": s.get("active_dance", "") or
(s.get("dances", [""])[0] if s.get("dances") else ""), (s.get("dances", [""])[0] if s.get("dances") else ""),
"duration": s.get("duration_sec", 0), "duration": s.get("duration_sec", 0),
"is_workshop": s.get("is_workshop", False),
} }
for i, s in enumerate(songs) for i, s in enumerate(songs)
] ]