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

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

@@ -26,6 +26,7 @@ class SongStatus(BaseModel):
position: int
dance: str = ""
duration: int = 0
is_workshop: bool = False
class LiveStatus(BaseModel):

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

@@ -13,8 +13,6 @@
--text: #eceef4;
--muted: #60687a;
--green: #27ae60;
--played: #2d3a2e;
--skip: #2a2020;
}
.light {
--bg: #f5f4ef;
@@ -24,10 +22,7 @@
--text: #1a1c22;
--muted: #7a7a6a;
--green: #1e8449;
--played: #eaf4ea;
--skip: #f4eaea;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
@@ -39,116 +34,124 @@
/* ── Header ── */
header {
padding: .6rem 1.25rem;
padding: .55rem 1.25rem;
display: flex; align-items: center; justify-content: space-between;
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); }
.header-right { display: flex; align-items: center; gap: .75rem; }
/* Countdown ring */
.countdown-wrap { display: flex; align-items: center; gap: .4rem; }
.countdown-svg { width: 24px; height: 24px; flex-shrink: 0; }
.countdown-wrap { display: flex; align-items: center; gap: .35rem; }
.countdown-svg { width: 22px; height: 22px; flex-shrink: 0; }
.countdown-bg { fill: none; stroke: var(--border); stroke-width: 3; }
.countdown-arc {
fill: none; stroke: var(--accent); stroke-width: 3;
stroke-linecap: round;
stroke-dasharray: 56.5;
stroke-dashoffset: 0;
transform: rotate(-90deg);
transform-origin: 50% 50%;
stroke-linecap: round; stroke-dasharray: 56.5; stroke-dashoffset: 0;
transform: rotate(-90deg); transform-origin: 50% 50%;
transition: stroke-dashoffset .9s linear;
}
.countdown-num {
font-size: .7rem; color: var(--muted);
font-variant-numeric: tabular-nums; min-width: 1.2rem;
}
/* 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; }
.countdown-num { font-size: .68rem; color: var(--muted); min-width: 1rem; }
.live-dot { display: flex; align-items: center; gap: .35rem; font-size: .7rem; color: var(--muted); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.dot.active { background: var(--green); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
/* Theme toggle */
.theme-btn {
background: none; border: 1px solid var(--border); border-radius: 6px;
padding: .25rem .5rem; cursor: pointer; color: var(--muted);
font-size: .78rem; transition: all .15s;
background: none; border: 1px solid var(--border); border-radius: 5px;
padding: .2rem .5rem; cursor: pointer; color: var(--muted); font-size: .72rem;
transition: all .15s;
}
.theme-btn:hover { border-color: var(--accent); color: var(--text); }
/* ── Now playing ── */
#now-playing {
padding: 1.75rem 1.25rem 1.25rem; flex-shrink: 0;
}
#now-playing { padding: 1.5rem 1.25rem 1rem; flex-shrink: 0; }
.np-label {
font-size: .65rem; letter-spacing: .18em; text-transform: uppercase;
color: var(--accent); font-weight: 700; margin-bottom: .5rem;
font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
color: var(--accent); font-weight: 700; margin-bottom: .4rem;
}
/* Dans er primær */
/* Dans primær — stor */
.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);
margin-bottom: .4rem; letter-spacing: -.02em;
letter-spacing: -.02em; margin-bottom: .3rem;
}
.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 */
.np-song {
font-size: clamp(.9rem, 2.5vw, 1.3rem);
color: var(--muted); margin-bottom: 1rem; line-height: 1.3;
font-size: clamp(.85rem, 2.2vw, 1.2rem);
color: var(--muted); margin-bottom: .9rem;
}
.np-song span { color: var(--text); font-weight: 500; }
.np-song span { color: var(--text); }
/* Progress */
.progress-bar { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; margin-bottom: .4rem; }
.progress-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width .3s; width: 0%; }
.progress-text { font-size: .72rem; color: var(--muted); display: flex; justify-content: space-between; }
/* Estimeret tid til næste */
.np-eta {
font-size: clamp(.72rem, 1.8vw, .9rem);
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 { 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 {
padding: .5rem 1.25rem .3rem;
font-size: .65rem; letter-spacing: .15em; text-transform: uppercase;
padding: .4rem 1.25rem .2rem;
font-size: .62rem; letter-spacing: .15em; text-transform: uppercase;
color: var(--muted); font-weight: 600; flex-shrink: 0;
}
/* ── 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-thumb { background: var(--border); }
.song-item {
display: flex; align-items: center; gap: .6rem;
padding: .45rem .5rem; border-radius: 7px; transition: background .1s;
margin-bottom: 1px;
padding: .4rem .5rem; border-radius: 7px; margin-bottom: 1px;
}
.song-item.playing {
background: rgba(232,160,32,.09);
border: 1px solid rgba(232,160,32,.22);
}
.song-item.played { background: var(--played); opacity: .55; }
.song-item.skipped { background: var(--skip); opacity: .35; }
.song-item.played { opacity: .4; }
.song-item.skipped { opacity: .25; }
.song-num { font-size: .7rem; color: var(--muted); width: 1.4rem; text-align: right; flex-shrink: 0; }
.song-check { width: 1.1rem; flex-shrink: 0; text-align: center; font-size: .75rem; color: var(--muted); }
.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: 1rem; flex-shrink: 0; text-align: center; font-size: .72rem; color: var(--muted); }
.song-item.played .song-check { color: var(--green); }
.song-info { flex: 1; min-width: 0; }
/* Dans er primær i listen også */
.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;
color: var(--text);
}
.song-dance-name:empty { display: none; }
.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;
}
.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 ── */
#empty, #no-event, #picker {
@@ -156,24 +159,22 @@
justify-content: center; flex: 1; gap: .75rem;
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); } }
.no-event-icon { font-size: 2.5rem; opacity: .25; }
.big-text { font-size: 1rem; color: var(--text); }
.playlist-pick-btn {
background: var(--surface); border: 1px solid var(--border);
border-radius: 10px; padding: .8rem 1.1rem; width: 100%; max-width: 320px;
text-align: left; cursor: pointer; color: var(--text); font-family: inherit;
transition: all .15s;
background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
padding: .75rem 1.1rem; width: 100%; max-width: 320px; text-align: left;
cursor: pointer; color: var(--text); font-family: inherit; transition: all .15s;
}
.playlist-pick-btn:hover { border-color: var(--accent); }
.playlist-pick-btn strong { display: block; font-size: .9rem; margin-bottom: .15rem; }
.playlist-pick-btn span { font-size: .75rem; color: var(--muted); }
.playlist-pick-btn strong { display: block; font-size: .88rem; margin-bottom: .15rem; }
.playlist-pick-btn span { font-size: .74rem; color: var(--muted); }
/* ── Footer ── */
footer {
padding: .5rem 1.25rem; border-top: 1px solid var(--border);
font-size: .68rem; color: var(--muted);
padding: .45rem 1.25rem; border-top: 1px solid var(--border);
font-size: .67rem; color: var(--muted);
display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;
}
@@ -206,13 +207,13 @@
</header>
<div id="picker">
<h2 style="font-size:1.05rem;color:var(--text)">Vælg playliste</h2>
<p>Brug URL-parametret <code>?id=PLAYLIST_ID</code> eller vælg herunder</p>
<h2 style="font-size:1rem;color:var(--text)">Vælg playliste</h2>
<p style="max-width:300px">Brug <code>?id=PLAYLIST_ID</code> i URL eller vælg herunder</p>
<div id="picker-list"></div>
</div>
<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>Åbn LineDance Player og start et event</div>
</div>
@@ -222,16 +223,23 @@
<div id="now-playing" style="display:none">
<div class="np-label" id="np-label">▶ Spiller nu</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-eta" id="np-eta" style="display:none">
⏱ Næste dans starter om ca. <b id="np-eta-val"></b>
</div>
<!-- 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>
<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>
<footer>
@@ -242,8 +250,10 @@
<script>
const API = '/api';
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 pollTimer = null;
let countdownTimer = null;
let countdownVal = POLL_SECS;
let dark = localStorage.getItem('ld_live_theme') !== 'light';
@@ -278,13 +288,49 @@ function updateCountdown() {
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 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) {
if (!d) return '';
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() {
if (!playlistId) { await showPicker(); return; }
try {
@@ -322,7 +368,7 @@ function showNoEvent() {
function show(id) {
['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') {
document.getElementById('divider').style.display = 'none';
@@ -333,6 +379,8 @@ function show(id) {
function render(data) {
const songs = data.songs || [];
const hasLive = !!data.updated_at;
document.getElementById('picker').style.display = 'none';
document.getElementById('no-event').style.display = 'none';
document.getElementById('empty').style.display = 'none';
@@ -344,32 +392,58 @@ function render(data) {
const pending = songs.filter(s => s.status === 'pending');
const playedN = songs.filter(s => s.status === 'played' || s.status === 'skipped').length;
const total = songs.length;
const hasLive = !!data.updated_at;
// Now playing sektion
const npSection = document.getElementById('now-playing');
// ── Now playing ────────────────────────────────────────────────────────────
if (songs.length > 0) {
npSection.style.display = '';
document.getElementById('now-playing').style.display = '';
const current = playing || pending[0];
const done = !playing && pending.length === 0;
const currentIdx = current ? songs.indexOf(current) : -1;
document.getElementById('np-label').textContent =
playing ? '▶ Spiller nu' : done ? '✓ Afsluttet' : '⏸ Pause';
// Dans er primær
// Dans primær
document.getElementById('np-dance').textContent =
current ? (current.dance || '') : '';
current ? getDanceName(current) : '';
// Sang + artist sekundær
if (current) {
// Nummer under dansen
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 a = current.artist || '';
document.getElementById('np-song').innerHTML =
`<span>${fmt(t)}</span>${a ? ' · ' + fmt(a) : ''}`;
} 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;
document.getElementById('np-progress').style.width = pct + '%';
document.getElementById('np-played').textContent = `${playedN} afspillet`;
@@ -377,30 +451,45 @@ function render(data) {
setDot(hasLive, hasLive ? 'Live' : 'Afventer');
} else {
npSection.style.display = 'none';
document.getElementById('now-playing').style.display = 'none';
setDot(false, 'Ingen sange');
}
// Liste — vis alle sange, dans primær
// ── Songliste ──────────────────────────────────────────────────────────────
const hasList = songs.length > 0;
document.getElementById('divider').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) => {
const icon = s.status === 'played' ? '✓' :
s.status === 'skipped' ? '—' :
s.status === 'playing' ? '▶' : '';
const cls = 'song-item ' + (s.status || 'pending');
const dance = s.dance || '';
const song = [s.title, s.artist].filter(Boolean).join(' · ');
const name = getDanceName(s);
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 `
<div class="${cls}">
<span class="song-num">${i+1}</span>
<span class="song-check">${icon}</span>
<div class="song-info">
<div class="song-dance-name">${fmt(dance)}</div>
<div class="song-title-sm">${fmt(song)}</div>
<div class="song-dance-name">${fmt(name)}</div>
${sub ? `<div class="song-title-sm">${fmt(sub)}</div>` : ''}
</div>
${etaTxt ? `<span class="song-eta-sm">${etaTxt}</span>` : ''}
</div>`;
}).join('');
}

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

@@ -1071,6 +1071,7 @@ class MainWindow(QMainWindow):
self._song_ended = False
self._player.play()
self._btn_play.setText("⏸")
self._sync_event_status_to_playlist()
def _stop(self):
# Annuller evt. igangværende demo_then_play
@@ -1308,6 +1309,7 @@ class MainWindow(QMainWindow):
"dance": s.get("active_dance", "") or
(s.get("dances", [""])[0] if s.get("dances") else ""),
"duration": s.get("duration_sec", 0),
"is_workshop": s.get("is_workshop", False),
}
for i, s in enumerate(songs)
]