From c5e35f0889fab9bd3478c6b3cdd222f9c612bfda Mon Sep 17 00:00:00 2001
From: Carsten Kvist <carsten@familienkvist.dk>
Date: Wed, 15 Apr 2026 16:58:52 +0200
Subject: [PATCH] Ny live

---
 linedance-api/app/routers/live.py  |  13 +-
 linedance-api/web/public/live.html | 305 +++++++++++++++++++----------
 linedance-app/ui/main_window.py    |  16 +-
 3 files changed, 213 insertions(+), 121 deletions(-)

diff --git a/linedance-api/app/routers/live.py b/linedance-api/app/routers/live.py
index bccd6a59..2ce1ef87 100644
--- a/linedance-api/app/routers/live.py
+++ b/linedance-api/app/routers/live.py
@@ -20,12 +20,13 @@ _live_cache: dict = {}
 
 
 class SongStatus(BaseModel):
-    title:    str
-    artist:   str = ""
-    status:   str = "pending"
-    position: int
-    dance:    str = ""
-    duration: int = 0
+    title:       str
+    artist:      str = ""
+    status:      str = "pending"
+    position:    int
+    dance:       str = ""
+    duration:    int = 0
+    is_workshop: bool = False
 
 
 class LiveStatus(BaseModel):
diff --git a/linedance-api/web/public/live.html b/linedance-api/web/public/live.html
index ce3004b4..487afb13 100644
--- a/linedance-api/web/public/live.html
+++ b/linedance-api/web/public/live.html
@@ -6,15 +6,13 @@
 <title>LineDance — Live</title>
 <style>
   :root {
-    --bg:       #0a0b0d;
-    --surface:  #13151a;
-    --border:   #252830;
-    --accent:   #e8a020;
-    --text:     #eceef4;
-    --muted:    #60687a;
-    --green:    #27ae60;
-    --played:   #2d3a2e;
-    --skip:     #2a2020;
+    --bg:      #0a0b0d;
+    --surface: #13151a;
+    --border:  #252830;
+    --accent:  #e8a020;
+    --text:    #eceef4;
+    --muted:   #60687a;
+    --green:   #27ae60;
   }
   .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-bg { fill: none; stroke: var(--border); stroke-width: 3; }
+  .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="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 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 {
@@ -304,7 +350,7 @@ async function showPicker() {
     document.getElementById('picker-list').innerHTML = lists.map(p => `
       <button class="playlist-pick-btn" onclick="selectPlaylist('${p.id}')">
         <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('');
   } catch(e) { showNoEvent(); }
 }
@@ -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';
@@ -332,7 +378,9 @@ function show(id) {
 }
 
 function render(data) {
-  const songs = data.songs || [];
+  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,63 +392,104 @@ 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`;
-    document.getElementById('np-remaining').textContent = `${pending.length} tilbage`;
+    document.getElementById('np-progress').style.width   = pct + '%';
+    document.getElementById('np-played').textContent     = `${playedN} afspillet`;
+    document.getElementById('np-remaining').textContent  = `${pending.length} tilbage`;
 
     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('');
 }
diff --git a/linedance-app/ui/main_window.py b/linedance-app/ui/main_window.py
index 01261090..621aa11f 100644
--- a/linedance-app/ui/main_window.py
+++ b/linedance-app/ui/main_window.py
@@ -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
@@ -1301,13 +1302,14 @@ class MainWindow(QMainWindow):
         payload = json.dumps({
             "songs": [
                 {
-                    "title":    s.get("title", ""),
-                    "artist":   s.get("artist", ""),
-                    "status":   statuses[i] if i < len(statuses) else "pending",
-                    "position": i + 1,
-                    "dance":    s.get("active_dance", "") or
-                                (s.get("dances", [""])[0] if s.get("dances") else ""),
-                    "duration": s.get("duration_sec", 0),
+                    "title":       s.get("title", ""),
+                    "artist":      s.get("artist", ""),
+                    "status":      statuses[i] if i < len(statuses) else "pending",
+                    "position":    i + 1,
+                    "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)
             ]