6a161c7133
Replace the text-heavy panel layout with a minimal icon-first UI: a VS Code-style vertical activity rail for view switching plus a contextual icon dock for clip actions. Every control carries a [data-tip] label surfaced on hover via a JS-positioned tooltip bubble (UXP's CSS engine can't be trusted with content: attr()). All existing main.js element IDs and the JS wiring contract are preserved; the dropped advanced section was already guarded. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
248 lines
14 KiB
HTML
248 lines
14 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>Dragonflight MAM</title>
|
||
<link rel="stylesheet" href="styles.css" />
|
||
</head>
|
||
<body>
|
||
<div id="root">
|
||
|
||
<!-- ── Connect Pane ─────────────────────────────────────────────── -->
|
||
<section id="connect-pane" class="pane pane-connect">
|
||
<div class="brand">
|
||
<div class="brand-icon">
|
||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||
<path d="M23 7l-7 5 7 5V7z"/><rect x="1" y="5" width="15" height="14" rx="2"/>
|
||
</svg>
|
||
</div>
|
||
<div class="brand-title">Dragonflight</div>
|
||
<div class="brand-tag">Wild Dragon Broadcast</div>
|
||
<div class="brand-version" id="brand-version"></div>
|
||
</div>
|
||
<label class="field-label" for="server-url">Server URL</label>
|
||
<input id="server-url" type="text" placeholder="https://dragonflight.live" />
|
||
<label class="field-label" for="api-token">API Token</label>
|
||
<input id="api-token" type="password" placeholder="Bearer token from web UI" autocomplete="off" />
|
||
<button id="connect-btn" class="btn btn-primary" disabled>Connect</button>
|
||
<div id="connect-status" class="status-msg muted"></div>
|
||
</section>
|
||
|
||
<!-- ── Library Pane (app-shell: statusbar · rail · main · dock) ──── -->
|
||
<section id="library-pane" class="pane hidden">
|
||
<div class="app">
|
||
|
||
<!-- Connection collapsed to a status line: dot + host + version + ⋯ -->
|
||
<header class="statusbar">
|
||
<span class="signal-dot"></span>
|
||
<span id="connected-host" class="connected-host"></span>
|
||
<span id="panel-version" class="panel-version" title="Plugin version"></span>
|
||
<button id="menu-btn" class="iconbtn iconbtn--sm" data-tip="More" data-tip-pos="down-left" aria-label="More">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="5" cy="12" r="1.4" fill="currentColor" stroke="none"/><circle cx="12" cy="12" r="1.4" fill="currentColor" stroke="none"/><circle cx="19" cy="12" r="1.4" fill="currentColor" stroke="none"/></svg>
|
||
</button>
|
||
<div id="status-menu" class="menu hidden" role="menu">
|
||
<button id="disconnect-btn" class="menu-item" role="menuitem">Disconnect</button>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="workspace">
|
||
|
||
<!-- Vertical icon rail: views on top, global actions below -->
|
||
<nav class="rail">
|
||
<button id="tab-library" class="rail-btn active" data-tip="Library" data-tip-pos="right">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
|
||
</button>
|
||
<button id="tab-growing" class="rail-btn" data-tip="Growing" data-tip-pos="right">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M23 7l-7 5 7 5V7z"/><rect x="1" y="5" width="15" height="14" rx="2"/></svg>
|
||
<span id="growing-count" class="rail-count" style="display:none">0</span>
|
||
</button>
|
||
|
||
<span class="rail-spacer"></span>
|
||
|
||
<button id="export-timeline-btn" class="rail-btn rail-btn--accent" data-tip="Export Timeline" data-tip-pos="right">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9"><path d="M12 19V6"/><path d="m5 12 7-7 7 7"/><path d="M5 21h14"/></svg>
|
||
</button>
|
||
<button id="refresh-btn" class="rail-btn" data-tip="Refresh" data-tip-pos="right">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 12a9 9 0 1 1-2.64-6.36"/><path d="M21 3v5h-5"/></svg>
|
||
</button>
|
||
</nav>
|
||
|
||
<!-- Main column -->
|
||
<div class="main">
|
||
|
||
<!-- Search + project filter -->
|
||
<div class="toolbar">
|
||
<label class="search">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
|
||
<input id="search-input" type="search" placeholder="Search assets" />
|
||
</label>
|
||
<select id="project-filter" class="filter-select" title="Filter by project">
|
||
<option value="all">All Projects</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- Active sequence info bar -->
|
||
<div id="seq-info-bar" class="seq-info-bar hidden">
|
||
<span class="chip chip-ok">SEQ</span>
|
||
<span id="seq-info-name" class="seq-info-name"></span>
|
||
</div>
|
||
|
||
<!-- Asset grid (library tab) -->
|
||
<div id="library-container" class="grid-container">
|
||
<div id="asset-grid" class="asset-grid">
|
||
<div class="empty muted">Loading…</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Growing grid -->
|
||
<div id="growing-container" class="grid-container hidden">
|
||
<div id="growing-grid" class="asset-grid">
|
||
<div class="empty muted">No growing files</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Details panel retired (v2.2.0) — card meta carries name/codec/duration. -->
|
||
<div id="details-panel" class="hidden"></div>
|
||
|
||
<!-- Progress + toast sit just above the action dock -->
|
||
<div id="progress-row" class="progress-row hidden">
|
||
<div class="progress-bar"><div id="progress-fill"></div></div>
|
||
<div id="progress-label" class="progress-label">…</div>
|
||
</div>
|
||
<div id="toast" class="toast hidden"></div>
|
||
|
||
<!-- Contextual action dock: text buttons replaced by icon buttons
|
||
with hover labels. Per-asset actions left, batch actions right. -->
|
||
<footer class="dock">
|
||
<button id="import-proxy-btn" class="iconbtn iconbtn--primary" data-tip="Import Proxy" data-tip-pos="up" disabled>
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9"><path d="M12 3v13"/><path d="m7 11 5 5 5-5"/><path d="M5 21h14"/></svg>
|
||
</button>
|
||
<button id="import-hires-btn" class="iconbtn" data-tip="Import Hi-Res" data-tip-pos="up" disabled>
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M12 2 2 7l10 5 10-5z"/><path d="m2 17 10 5 10-5"/><path d="m2 12 10 5 10-5"/></svg>
|
||
</button>
|
||
<button id="mount-live-btn" class="iconbtn" data-tip="Mount Live" data-tip-pos="up" disabled>
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="2.5"/><path d="M6.3 6.3a8 8 0 0 0 0 11.4M17.7 6.3a8 8 0 0 1 0 11.4"/></svg>
|
||
</button>
|
||
<button id="relink-btn" class="iconbtn" data-tip="Relink Hi-Res" data-tip-pos="up" disabled>
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M10 13a5 5 0 0 0 7 0l2-2a5 5 0 0 0-7-7l-1 1"/><path d="M14 11a5 5 0 0 0-7 0l-2 2a5 5 0 0 0 7 7l1-1"/></svg>
|
||
</button>
|
||
|
||
<span class="dock-sep"></span>
|
||
|
||
<button id="import-all-btn" class="iconbtn" data-tip="Import All" data-tip-pos="up-left" disabled>
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><path d="m3.27 6.96 8.73 5.05 8.73-5.05"/><path d="M12 22.08V12"/></svg>
|
||
</button>
|
||
<button id="export-conform-btn" class="iconbtn" data-tip="Export & Conform" data-tip-pos="up-left" disabled>
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="17" y1="16" x2="23" y2="16"/></svg>
|
||
</button>
|
||
<button id="fetch-relink-btn" class="iconbtn" data-tip="Fetch & Relink All" data-tip-pos="up-left" disabled>
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 2v6h-6"/><path d="M3 12a9 9 0 0 1 15-6.7L21 8"/><path d="M3 22v-6h6"/><path d="M21 12a9 9 0 0 1-15 6.7L3 16"/></svg>
|
||
</button>
|
||
</footer>
|
||
|
||
</div><!-- /main -->
|
||
</div><!-- /workspace -->
|
||
</div><!-- /app -->
|
||
</section>
|
||
|
||
<!-- ── Export Timeline Slide Panel ──────────────────────────────── -->
|
||
<div id="export-overlay" class="slide-overlay hidden"></div>
|
||
<div id="export-panel" class="slide-panel hidden">
|
||
<div class="slide-header">
|
||
<span class="slide-title">Push Timeline to MAM</span>
|
||
<button id="export-close-btn" class="btn btn-icon">✕</button>
|
||
</div>
|
||
<div class="slide-body">
|
||
<label class="field-label">Sequence name</label>
|
||
<input id="export-seq-name" type="text" placeholder="Sequence 1" />
|
||
<label class="field-label">Target project</label>
|
||
<select id="export-proj-select"><option value="">— Select project —</option></select>
|
||
<div id="export-clip-info" class="clip-info"></div>
|
||
</div>
|
||
<div class="slide-footer">
|
||
<button id="export-cancel-btn" class="btn btn-secondary">Cancel</button>
|
||
<button id="export-confirm-btn" class="btn btn-primary">Push to MAM</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ── Export & Conform Slide Panel ─────────────────────────────── -->
|
||
<div id="conform-overlay" class="slide-overlay hidden"></div>
|
||
<div id="conform-panel" class="slide-panel hidden">
|
||
<div class="slide-header">
|
||
<span class="slide-title">Export & Conform</span>
|
||
<button id="conform-close-btn" class="btn btn-icon">✕</button>
|
||
</div>
|
||
<div class="slide-body">
|
||
<label class="field-label">Target project</label>
|
||
<select id="conform-proj-select"><option value="">— Select project —</option></select>
|
||
<label class="field-label">Preset</label>
|
||
<div id="preset-cards" class="preset-grid">
|
||
<div class="preset-card selected" data-preset="broadcast"><div class="pc-title">Broadcast</div><div class="pc-desc">ProRes 422 HQ · 1080p · 48kHz</div></div>
|
||
<div class="preset-card" data-preset="web"><div class="pc-title">Web</div><div class="pc-desc">H.264 · 1080p · AAC 320k</div></div>
|
||
<div class="preset-card" data-preset="archive"><div class="pc-title">Archive</div><div class="pc-desc">ProRes 4444 · UHD · 48kHz</div></div>
|
||
<div class="preset-card" data-preset="custom"><div class="pc-title">Custom</div><div class="pc-desc">Manual settings</div></div>
|
||
</div>
|
||
<label class="field-label">Codec</label>
|
||
<select id="conform-codec">
|
||
<option value="prores_hq">ProRes 422 HQ</option>
|
||
<option value="prores_4444">ProRes 4444</option>
|
||
<option value="h264">H.264</option>
|
||
<option value="h265">H.265 / HEVC</option>
|
||
<option value="dnxhr_hq">DNxHR HQ</option>
|
||
</select>
|
||
<label class="field-label">Quality</label>
|
||
<select id="conform-quality">
|
||
<option value="high">High</option>
|
||
<option value="medium" selected>Medium</option>
|
||
<option value="low">Low</option>
|
||
</select>
|
||
<label class="field-label">Resolution</label>
|
||
<select id="conform-resolution">
|
||
<option value="uhd">UHD (3840×2160)</option>
|
||
<option value="1080p" selected>Full HD (1920×1080)</option>
|
||
<option value="720p">HD (1280×720)</option>
|
||
<option value="source">Source</option>
|
||
</select>
|
||
<label class="field-label">Audio</label>
|
||
<select id="conform-audio">
|
||
<option value="broadcast">Broadcast (48kHz PCM)</option>
|
||
<option value="web">Web (AAC 320k)</option>
|
||
<option value="archive">Archive (96kHz PCM)</option>
|
||
</select>
|
||
<div id="conform-clip-info" class="clip-info"></div>
|
||
</div>
|
||
<div class="slide-footer">
|
||
<button id="conform-cancel-btn" class="btn btn-secondary">Cancel</button>
|
||
<button id="conform-start-btn" class="btn btn-primary" disabled>Start Conform</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ── Fetch & Relink Slide Panel ───────────────────────────────── -->
|
||
<div id="relink-overlay" class="slide-overlay hidden"></div>
|
||
<div id="relink-panel" class="slide-panel hidden">
|
||
<div class="slide-header">
|
||
<span class="slide-title">Fetch & Relink Hi-Res</span>
|
||
<button id="relink-close-btn" class="btn btn-icon">✕</button>
|
||
</div>
|
||
<div class="slide-body">
|
||
<div class="field-label" style="margin-bottom:6px">Select clips to upgrade to hi-res:</div>
|
||
<div id="clip-list" class="clip-list"></div>
|
||
<div id="relink-summary" class="relink-summary hidden"></div>
|
||
</div>
|
||
<div class="slide-footer">
|
||
<button id="relink-cancel-btn" class="btn btn-secondary">Cancel</button>
|
||
<button id="relink-start-btn" class="btn btn-primary" disabled>Start Relink</button>
|
||
</div>
|
||
</div>
|
||
|
||
</div><!-- /#root -->
|
||
|
||
<script src="src/ui.js"></script>
|
||
<script src="src/api.js"></script>
|
||
<script src="src/library.js"></script>
|
||
<script src="src/import-flow.js"></script>
|
||
<script src="src/timeline.js"></script>
|
||
<script src="src/tooltip.js"></script>
|
||
<script src="src/main.js"></script>
|
||
</body>
|
||
</html>
|