feat(playout): fix 409 drag bug, add HLS preview, advanced playlist

- Fix event bubbling: e.stopPropagation() in onItemDrop prevents
  duplicate POST when dropping on an existing playlist item
- Wrap all drop handlers in try/catch with inline error display
- ProgramMonitor: replace text placeholder with hls.js video player
  loading /media/live/<channel_id>/index.m3u8; falls back to native
  HLS on Safari; destroys Hls instance on channel stop/unmount
- Playlist: per-item duration (MM:SS), staging progress bar with
  animated stripe while staging, now-playing highlight + ▶ indicator
  driven by engine.currentIndex from 4s status poll
- Playlist footer: clip count + total duration sum
- Transport: Play button disabled + shows '⏳ N staging' until all
  items are media_status=ready, eliminating the staging-not-ready 409

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

services/web-ui/public/screens-playout.jsx

@@ -24,6 +24,26 @@ async function poFetch(path, opts) {
   return window.ZAMPP_API.fetch('/playout' + path, opts);
 }
 
+// ── Helpers ──────────────────────────────────────────────────────────────────
+
+function fmtDuration(secs) {
+  if (!secs || secs < 0) return '—';
+  const s = Math.floor(secs);
+  const h = Math.floor(s / 3600);
+  const m = Math.floor((s % 3600) / 60);
+  const ss = s % 60;
+  const mm = String(m).padStart(2, '0');
+  const ssStr = String(ss).padStart(2, '0');
+  return h > 0 ? `${h}:${mm}:${ssStr}` : `${m}:${ssStr}`;
+}
+
+function itemEffectiveDuration(it) {
+  const total = (it.asset_duration_ms || 0) / 1000;
+  const inPt  = it.in_point  != null ? Number(it.in_point)  : 0;
+  const outPt = it.out_point != null ? Number(it.out_point) : total;
+  return Math.max(0, outPt - inPt);
+}
+
 // ── Output-config sub-form (varies by output type) ───────────────────────────
 function OutputConfigFields({ type, config, onChange }) {
   const set = (k, v) => onChange({ ...config, [k]: v });
@@ -175,29 +195,37 @@ function MediaBin({ projectId }) {
   );
 }
 
-const MEDIA_STATUS_BADGE = {
+// ── Staging progress bar ──────────────────────────────────────────────────────
-  ready:   'success', staging: 'warn', pending: 'neutral', error: 'error',
+function StagingBar({ status }) {
-};
+  return (
+    <div className={'po-staging-bar po-staging-bar--' + (status || 'pending')} aria-hidden="true" />
+  );
+}
 
 // ── Playlist: ordered, drag-drop reorder, drop-target for bin assets ─────────
-function Playlist({ channel, playlistId, items, onReload }) {
+function Playlist({ channel, playlistId, items, activeIndex, onReload }) {
   const [dragIndex, setDragIndex] = React.useState(null);
+  const [dropErr, setDropErr] = React.useState(null);
 
   const onItemDragStart = (e, index) => {
     setDragIndex(index);
     e.dataTransfer.effectAllowed = 'move';
   };
   const onItemDragOver = (e) => { e.preventDefault(); };
+
   const onItemDrop = async (e, index) => {
     e.preventDefault();
-    // Asset dropped from the bin → append.
+    e.stopPropagation(); // prevent bubble to onContainerDrop
+    setDropErr(null);
     const assetRaw = e.dataTransfer.getData('application/x-df-asset');
     if (assetRaw) {
-      const asset = JSON.parse(assetRaw);
+      try {
-      await poFetch('/playlists/' + playlistId + '/items', {
+        const asset = JSON.parse(assetRaw);
-        method: 'POST', body: JSON.stringify({ asset_id: asset.id }),
+        await poFetch('/playlists/' + playlistId + '/items', {
-      });
+          method: 'POST', body: JSON.stringify({ asset_id: asset.id }),
-      onReload();
+        });
+        onReload();
+      } catch (err) { setDropErr(err.message || 'Failed to add clip'); }
       return;
     }
     // Reorder within the playlist.
@@ -206,63 +234,92 @@ function Playlist({ channel, playlistId, items, onReload }) {
     const [moved] = order.splice(dragIndex, 1);
     order.splice(index, 0, moved);
     setDragIndex(null);
-    await poFetch('/playlists/' + playlistId + '/reorder', {
+    try {
-      method: 'PUT', body: JSON.stringify({ order }),
+      await poFetch('/playlists/' + playlistId + '/reorder', {
-    });
+        method: 'PUT', body: JSON.stringify({ order }),
-    onReload();
+      });
+      onReload();
+    } catch (err) { setDropErr(err.message || 'Failed to reorder'); }
   };
-  // Dropping onto empty area appends.
+
   const onContainerDrop = async (e) => {
     const assetRaw = e.dataTransfer.getData('application/x-df-asset');
     if (!assetRaw) return;
     e.preventDefault();
-    const asset = JSON.parse(assetRaw);
+    setDropErr(null);
-    await poFetch('/playlists/' + playlistId + '/items', {
+    try {
-      method: 'POST', body: JSON.stringify({ asset_id: asset.id }),
+      const asset = JSON.parse(assetRaw);
-    });
+      await poFetch('/playlists/' + playlistId + '/items', {
-    onReload();
+        method: 'POST', body: JSON.stringify({ asset_id: asset.id }),
+      });
+      onReload();
+    } catch (err) { setDropErr(err.message || 'Failed to add clip'); }
   };
 
   const removeItem = async (id) => {
-    await poFetch('/items/' + id, { method: 'DELETE' });
+    try { await poFetch('/items/' + id, { method: 'DELETE' }); onReload(); }
-    onReload();
+    catch (err) { setDropErr(err.message || 'Failed to remove'); }
   };
   const restage = async (id) => {
-    await poFetch('/items/' + id + '/stage', { method: 'POST' });
+    try { await poFetch('/items/' + id + '/stage', { method: 'POST' }); onReload(); }
-    onReload();
+    catch (err) { setDropErr(err.message || 'Failed to restage'); }
   };
 
+  const totalSecs = items.reduce((sum, it) => sum + itemEffectiveDuration(it), 0);
+
   return (
     <div className="panel po-playlist" onDragOver={e => e.preventDefault()} onDrop={onContainerDrop}>
-      <div className="po-section-label" style={{ padding: '8px 12px' }}>Playlist</div>
+      <div className="po-playlist-head">
+        <span className="po-section-label">Playlist</span>
+        {dropErr && <span className="po-drop-err">{dropErr}</span>}
+      </div>
       {items.length === 0 && (
         <div className="muted po-playlist-empty">Drag clips here to build the playlist.</div>
       )}
-      {items.map((it, index) => (
+      {items.map((it, index) => {
-        <div key={it.id} className="po-pl-item" draggable
+        const isActive = index === activeIndex;
-          onDragStart={e => onItemDragStart(e, index)}
+        const dur = itemEffectiveDuration(it);
-          onDragOver={onItemDragOver}
+        return (
-          onDrop={e => onItemDrop(e, index)}>
+          <div key={it.id}
-          <span className="po-pl-index">{index + 1}</span>
+            className={'po-pl-item' + (isActive ? ' po-pl-item--active' : '')}
-          <span className="po-pl-name">{it.clip_name || it.asset_id}</span>
+            draggable
-          <span className={'badge ' + (MEDIA_STATUS_BADGE[it.media_status] || 'neutral')}>
+            onDragStart={e => onItemDragStart(e, index)}
-            {it.media_status}
+            onDragOver={onItemDragOver}
-          </span>
+            onDrop={e => onItemDrop(e, index)}>
-          {it.media_status === 'error' && (
+            <span className="po-pl-index">
-            <button className="btn ghost xs" onClick={() => restage(it.id)}>Retry</button>
+              {isActive ? <span className="po-pl-onair">▶</span> : index + 1}
-          )}
+            </span>
-          <button className="btn ghost xs" onClick={() => removeItem(it.id)}>✕</button>
+            <span className="po-pl-name">{it.clip_name || it.asset_id}</span>
+            <span className="mono po-pl-dur">{fmtDuration(dur)}</span>
+            <span className={'badge po-pl-badge ' + (it.media_status === 'ready' ? 'success' : it.media_status === 'staging' ? 'warn' : it.media_status === 'error' ? 'error' : 'neutral')}>
+              {it.media_status}
+            </span>
+            {it.media_status === 'error' && (
+              <button className="btn ghost xs" onClick={() => restage(it.id)}>Retry</button>
+            )}
+            <button className="btn ghost xs" onClick={() => removeItem(it.id)}>✕</button>
+            <StagingBar status={it.media_status} />
+          </div>
+        );
+      })}
+      {items.length > 0 && (
+        <div className="po-playlist-footer">
+          <span className="mono muted">{items.length} clip{items.length !== 1 ? 's' : ''}</span>
+          <span className="mono po-pl-total">{fmtDuration(totalSecs)} total</span>
         </div>
-      ))}
+      )}
     </div>
   );
 }
 
 // ── Transport bar ────────────────────────────────────────────────────────────
-function Transport({ channel, playlistId, onStatus }) {
+function Transport({ channel, playlistId, items, onStatus }) {
   const [busy, setBusy] = React.useState(false);
   const act = async (fn) => { setBusy(true); try { await fn(); } catch (e) { alert(e.message); } finally { setBusy(false); } };
 
+  const notReady = items.filter(i => i.media_status !== 'ready').length;
+  const canPlay  = channel.status === 'running' && !busy && !!playlistId && notReady === 0;
+
   const play = () => act(async () => {
     const r = await poFetch('/channels/' + channel.id + '/play', {
       method: 'POST', body: JSON.stringify({ playlist_id: playlistId }),
@@ -277,7 +334,9 @@ function Transport({ channel, playlistId, onStatus }) {
   const live = channel.status === 'running';
   return (
     <div className="po-transport">
-      <button className="btn primary" disabled={!live || busy || !playlistId} onClick={play}>▶ Play</button>
+      <button className="btn primary" disabled={!canPlay} onClick={play} title={notReady > 0 ? notReady + ' clip(s) still staging' : ''}>
+        {notReady > 0 && live ? '⏳ ' + notReady + ' staging' : '▶ Play'}
+      </button>
       <button className="btn ghost" disabled={!live || busy} onClick={pause}>⏸ Pause</button>
       <button className="btn ghost" disabled={!live || busy} onClick={resume}>⏵ Resume</button>
       <button className="btn ghost" disabled={!live || busy} onClick={skip}>⏭ Skip</button>
@@ -288,7 +347,37 @@ function Transport({ channel, playlistId, onStatus }) {
 
 // ── Program monitor ──────────────────────────────────────────────────────────
 function ProgramMonitor({ channel, engine }) {
-  const onAir = channel.status === 'running';
+  const videoRef  = React.useRef(null);
+  const hlsRef    = React.useRef(null);
+  const onAir     = channel.status === 'running';
+  const previewUrl = `/media/live/${channel.id}/index.m3u8`;
+
+  React.useEffect(() => {
+    const vid = videoRef.current;
+    if (!vid) return;
+
+    // Tear down any previous HLS instance before re-evaluating.
+    if (hlsRef.current) { hlsRef.current.destroy(); hlsRef.current = null; }
+
+    if (!onAir) { vid.src = ''; return; }
+
+    if (window.Hls && window.Hls.isSupported()) {
+      const hls = new window.Hls({ liveSyncDurationCount: 3, liveMaxLatencyDurationCount: 6 });
+      hlsRef.current = hls;
+      hls.loadSource(previewUrl);
+      hls.attachMedia(vid);
+      hls.on(window.Hls.Events.MANIFEST_PARSED, () => vid.play().catch(() => {}));
+    } else if (vid.canPlayType('application/vnd.apple.mpegurl')) {
+      // Native HLS (Safari).
+      vid.src = previewUrl;
+      vid.play().catch(() => {});
+    }
+
+    return () => {
+      if (hlsRef.current) { hlsRef.current.destroy(); hlsRef.current = null; }
+    };
+  }, [onAir, channel.id]);
+
   return (
     <div className="po-monitor">
       <div className="po-monitor-head">
@@ -296,14 +385,16 @@ function ProgramMonitor({ channel, engine }) {
         <span className="mono muted">{channel.output_type?.toUpperCase()} · {channel.video_format}</span>
       </div>
       <div className="po-monitor-screen">
-        {engine && engine.currentClip
+        <video ref={videoRef} className="po-monitor-video" muted playsInline autoPlay />
-          ? <div className="po-monitor-clip">{engine.currentClip}</div>
+        {!onAir && (
-          : <div className="muted">{onAir ? 'Idle — no clip playing' : 'Channel stopped'}</div>}
+          <div className="po-monitor-overlay muted">Channel stopped</div>
+        )}
       </div>
       {engine && (
         <div className="po-monitor-foot mono muted">
-          clip {engine.currentIndex >= 0 ? engine.currentIndex + 1 : '–'} / {engine.playlistLength || 0}
+          {engine.currentClip && <span className="po-monitor-clip-name">{engine.currentClip}</span>}
-          {engine.loop ? ' · loop' : ''}
+          <span>clip {engine.currentIndex >= 0 ? engine.currentIndex + 1 : '–'} / {engine.playlistLength || 0}</span>
+          {engine.loop && <span> · loop</span>}
         </div>
       )}
     </div>
@@ -366,6 +457,9 @@ function ChannelDetail({ channel, onChannelChange }) {
     setCh(updated); onChannelChange(updated);
   };
 
+  // engine.currentIndex maps directly to the sorted item position.
+  const activeIndex = (engine && engine.currentIndex >= 0) ? engine.currentIndex : -1;
+
   return (
     <div className="po-detail">
       <div className="po-detail-head">
@@ -386,10 +480,16 @@ function ChannelDetail({ channel, onChannelChange }) {
         <MediaBin projectId={ch.project_id} />
       </div>
 
-      <Transport channel={ch} playlistId={playlistId} onStatus={() => loadItems()} />
+      <Transport channel={ch} playlistId={playlistId} items={items} onStatus={() => loadItems()} />
 
       {playlistId && (
-        <Playlist channel={ch} playlistId={playlistId} items={items} onReload={loadItems} />
+        <Playlist
+          channel={ch}
+          playlistId={playlistId}
+          items={items}
+          activeIndex={activeIndex}
+          onReload={loadItems}
+        />
       )}
     </div>
   );

services/web-ui/public/styles-playout.css

@@ -50,12 +50,26 @@
 .po-onair { font-size: 12px; font-weight: 700; color: var(--text-3); letter-spacing: 0.04em; }
 .po-onair.live { color: var(--danger); }
 .po-monitor-screen {
-  flex: 1; min-height: 220px; background: #000;
+  position: relative; flex: 1; min-height: 220px; background: #000;
   display: flex; align-items: center; justify-content: center;
-  color: var(--text-2);
 }
-.po-monitor-clip { font-family: var(--font-mono); font-size: 14px; color: var(--text-1); }
+.po-monitor-video {
-.po-monitor-foot { padding: 8px 12px; border-top: 1px solid var(--border); font-size: 11px; }
+  width: 100%; height: 100%; object-fit: contain; display: block;
+}
+.po-monitor-overlay {
+  position: absolute; inset: 0;
+  display: flex; align-items: center; justify-content: center;
+  background: rgba(0,0,0,0.6); color: var(--text-2);
+  pointer-events: none;
+}
+.po-monitor-foot {
+  display: flex; align-items: center; gap: 10px;
+  padding: 8px 12px; border-top: 1px solid var(--border); font-size: 11px;
+}
+.po-monitor-clip-name {
+  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  color: var(--text-1);
+}
 
 /* Media bin */
 .po-bin {
@@ -75,7 +89,7 @@
 
 /* Transport */
 .po-transport {
-  display: flex; gap: 8px; flex-wrap: wrap;
+  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
   padding: 12px; background: var(--bg-1); border: 1px solid var(--border); border-radius: 12px;
 }
 
@@ -84,19 +98,63 @@
   border-radius: 12px; overflow: hidden;
   min-height: 120px;
 }
-.po-playlist-empty { padding: 28px 12px; text-align: center; }
+.po-playlist-head {
-.po-pl-item {
   display: flex; align-items: center; gap: 10px;
-  padding: 9px 12px; border-bottom: 1px solid var(--border);
+  padding: 8px 12px; border-bottom: 1px solid var(--border);
+}
+.po-drop-err { font-size: 11px; color: var(--danger); }
+.po-playlist-empty { padding: 28px 12px; text-align: center; }
+
+.po-pl-item {
+  position: relative;
+  display: flex; align-items: center; gap: 10px;
+  padding: 9px 12px 13px; /* extra bottom padding for the staging bar */
+  border-bottom: 1px solid var(--border);
   cursor: grab; user-select: none;
 }
 .po-pl-item:hover { background: var(--bg-3); }
 .po-pl-item:active { cursor: grabbing; }
+.po-pl-item--active {
+  background: color-mix(in srgb, var(--danger) 8%, transparent);
+  border-left: 3px solid var(--danger);
+}
+.po-pl-item--active:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); }
+
 .po-pl-index {
   width: 22px; text-align: center; font-family: var(--font-mono);
-  font-size: 12px; color: var(--text-3);
+  font-size: 12px; color: var(--text-3); flex-shrink: 0;
 }
+.po-pl-onair { color: var(--danger); font-size: 11px; }
 .po-pl-name { flex: 1; font-size: 13px; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.po-pl-dur { font-size: 11px; color: var(--text-3); flex-shrink: 0; min-width: 40px; text-align: right; }
+.po-pl-badge { flex-shrink: 0; }
+
+/* Staging progress bar — sits flush at the bottom of each playlist item */
+.po-staging-bar {
+  position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
+}
+.po-staging-bar--pending  { background: var(--text-3); opacity: 0.3; }
+.po-staging-bar--staging  {
+  background: linear-gradient(90deg, transparent 0%, var(--warning) 50%, transparent 100%);
+  background-size: 200% 100%;
+  animation: po-staging-sweep 1.4s linear infinite;
+}
+.po-staging-bar--ready    { background: var(--success); opacity: 0.8; }
+.po-staging-bar--error    { background: var(--danger); }
+
+@keyframes po-staging-sweep {
+  0%   { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+/* Playlist footer */
+.po-playlist-footer {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: 8px 12px; border-top: 1px solid var(--border);
+  font-size: 11px; color: var(--text-3);
+  background: var(--bg-2);
+}
+.po-pl-total { color: var(--text-2); }
 
 /* Small button variants reused */
 .btn.xs { padding: 2px 8px; font-size: 11px; }