e4e69973e5
User feedback after v2.1.9: panel still chrome-heavy. The Asset Info panel duplicates what the card already shows; 8 buttons across 3 full-width rows still claim too much vertical real estate. Three surgical changes: 1. Drop the Asset Info details panel entirely. Card meta (name + duration + codec) already carries everything we showed in the key:value table. Library._showDetails / hideDetails become no-ops so the existing call sites in main.js + library.js don't need conditional branches. 2. Shrink .action-row .btn to 20px tall, 10.5px font, 6px horiz padding, 3px radius. Two rows of compact buttons fit where one bulky row used to. 3. Collapse Advanced section behind a toggle (▸ / ▾). Default collapsed so the main 6 buttons stay the primary action surface; click the row to expand and reveal Export & Conform / Fetch & Relink All. Per DESIGN.md "density over whitespace." Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
236 lines
11 KiB
HTML
236 lines
11 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">
|
||
<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 ─────────────────────────────────────────────── -->
|
||
<section id="library-pane" class="pane hidden">
|
||
|
||
<!-- Connection status strip (v2.1.8): dot + identity + ⋯ menu.
|
||
Disconnect lives inside the menu so it's not always visible. -->
|
||
<header class="status-strip">
|
||
<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="btn-ghost" title="More" aria-label="More">⋯</button>
|
||
<div id="status-menu" class="menu hidden" role="menu">
|
||
<button id="disconnect-btn" class="menu-item" role="menuitem">Disconnect</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Tabs -->
|
||
<div class="tab-nav">
|
||
<button id="tab-library" class="tab-btn active">
|
||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>
|
||
</svg>
|
||
Library
|
||
</button>
|
||
<button id="tab-growing" class="tab-btn">
|
||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M23 7l-7 5 7 5V7z"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
|
||
</svg>
|
||
Growing
|
||
<span id="growing-count" class="badge" style="display:none">0</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Search + Project filter -->
|
||
<div class="search-row">
|
||
<input id="search-input" type="search" placeholder="Search assets…" />
|
||
<select id="project-filter" title="Filter by project">
|
||
<option value="all">All Projects</option>
|
||
</select>
|
||
<button id="refresh-btn" class="btn btn-icon" title="Refresh">↻</button>
|
||
</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>
|
||
|
||
<!-- (v2.2.0) Asset details panel dropped — card meta already carries
|
||
name / codec / duration. If we need richer detail later, surface
|
||
it on the card hover state rather than reserving permanent space. -->
|
||
<div id="details-panel" class="hidden"></div>
|
||
|
||
<!-- Action buttons -->
|
||
<footer class="actions">
|
||
<div class="action-row">
|
||
<button id="import-proxy-btn" class="btn btn-primary" disabled>Import Proxy</button>
|
||
<button id="import-hires-btn" class="btn btn-secondary" disabled>Hi-Res</button>
|
||
</div>
|
||
<div class="action-row">
|
||
<button id="mount-live-btn" class="btn btn-secondary" disabled title="Open live file from SMB share">Mount Live</button>
|
||
<button id="relink-btn" class="btn btn-secondary" disabled title="Relink proxy → hi-res original">Relink Hi-Res</button>
|
||
</div>
|
||
<div class="action-row">
|
||
<button id="import-all-btn" class="btn btn-secondary" disabled>Import All</button>
|
||
<button id="export-timeline-btn" class="btn btn-secondary" disabled>Export Timeline ↑</button>
|
||
</div>
|
||
|
||
<!-- Progress -->
|
||
<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>
|
||
|
||
<!-- Toast -->
|
||
<div id="toast" class="toast hidden"></div>
|
||
</footer>
|
||
|
||
<!-- Advanced section — collapsed by default; click the row to expand. -->
|
||
<div class="advanced-section">
|
||
<button id="advanced-toggle" class="advanced-toggle" type="button" aria-expanded="false">
|
||
<span class="advanced-caret">▸</span>
|
||
<span class="advanced-title">Advanced</span>
|
||
</button>
|
||
<div id="advanced-body" class="advanced-body hidden">
|
||
<div class="action-row">
|
||
<button id="export-conform-btn" class="btn btn-secondary" disabled>Export & Conform</button>
|
||
<button id="fetch-relink-btn" class="btn btn-secondary" disabled>Fetch & Relink All</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</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/main.js"></script>
|
||
</body>
|
||
</html>
|