ZGaetano
9ba3bf6f83
- Active sequence info bar shows current Premiere sequence name - Import Proxy / Hi-Res split buttons replace single Import button - Export panel (hidden) slides in with seq name, project picker, clip count - Export Timeline button in second action row triggers panel
157 lines
6.3 KiB
HTML
157 lines
6.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Wild Dragon MAM</title>
|
|
<link rel="stylesheet" href="css/styles.css">
|
|
</head>
|
|
<body>
|
|
<div id="panel-container">
|
|
<!-- Connection Bar -->
|
|
<div class="connection-bar">
|
|
<div class="connection-controls">
|
|
<div class="server-input-group">
|
|
<input
|
|
type="text"
|
|
id="server-url"
|
|
class="server-url"
|
|
placeholder="http://localhost:7434"
|
|
title="MAM server URL"
|
|
>
|
|
<div class="status-indicator" id="status-indicator"></div>
|
|
</div>
|
|
<button id="connect-btn" class="connect-btn">Connect</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search and Filter Area -->
|
|
<div class="search-filter-area">
|
|
<div class="search-bar">
|
|
<input
|
|
type="text"
|
|
id="search-input"
|
|
class="search-input"
|
|
placeholder="Search assets..."
|
|
>
|
|
</div>
|
|
<div class="filter-controls">
|
|
<select id="project-filter" title="Filter by project">
|
|
<option value="all">All Projects</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Active Sequence Info Bar (hidden until connected with an active sequence) -->
|
|
<div id="seq-info-bar" class="seq-info-bar hidden">
|
|
<span class="seq-info-label">SEQ</span>
|
|
<span id="seq-info-name" class="seq-info-name"></span>
|
|
<button id="seq-refresh-btn" class="seq-refresh-btn" title="Refresh active sequence">↻</button>
|
|
</div>
|
|
|
|
<!-- Main Content Area -->
|
|
<div class="content-area">
|
|
<!-- Asset Grid -->
|
|
<div class="asset-grid-container">
|
|
<div id="asset-grid" class="asset-grid">
|
|
<div id="empty-state" class="empty-state">
|
|
<div class="empty-state-icon">📁</div>
|
|
<div>Connect to server and load assets</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Details Panel -->
|
|
<div id="details-panel" class="details-panel hidden">
|
|
<div class="details-section">
|
|
<div class="details-label">Filename</div>
|
|
<div id="details-filename" class="details-value truncate-lines-2"></div>
|
|
</div>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<div class="details-section">
|
|
<div class="details-label">Codec</div>
|
|
<div id="details-codec" class="details-value"></div>
|
|
</div>
|
|
|
|
<div class="details-section">
|
|
<div class="details-label">Resolution</div>
|
|
<div id="details-resolution" class="details-value"></div>
|
|
</div>
|
|
|
|
<div class="details-section">
|
|
<div class="details-label">Frame Rate</div>
|
|
<div id="details-fps" class="details-value"></div>
|
|
</div>
|
|
|
|
<div class="details-section">
|
|
<div class="details-label">Duration</div>
|
|
<div id="details-duration" class="details-value"></div>
|
|
</div>
|
|
|
|
<div class="details-section">
|
|
<div class="details-label">File Size</div>
|
|
<div id="details-size" class="details-value"></div>
|
|
</div>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<div class="details-section">
|
|
<div class="details-label">Tags</div>
|
|
<div id="details-tags" class="tags-list"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Progress Indicator -->
|
|
<div id="progress-container" class="progress-container">
|
|
<div class="progress-label" id="progress-label">Downloading...</div>
|
|
<div class="progress-bar">
|
|
<div id="progress-fill" class="progress-fill"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Export Panel — shown when Export Timeline is clicked -->
|
|
<div id="export-panel" class="export-panel hidden">
|
|
<div class="export-panel-title">Push Timeline to MAM</div>
|
|
<input
|
|
type="text"
|
|
id="export-seq-name"
|
|
placeholder="Sequence name"
|
|
title="Name this sequence will have in the MAM"
|
|
>
|
|
<select id="export-proj-select" title="Target project in MAM">
|
|
<option value="">— Select project —</option>
|
|
</select>
|
|
<div id="export-clip-info" class="export-clip-info"></div>
|
|
<div class="export-panel-actions">
|
|
<button id="export-confirm-btn">Push to MAM</button>
|
|
<button id="export-cancel-btn" class="secondary">Cancel</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Bar -->
|
|
<div class="action-bar">
|
|
<!-- Row 1: per-asset import buttons -->
|
|
<div class="action-row">
|
|
<button id="import-btn" disabled title="Download proxy and import into Premiere">Import Proxy</button>
|
|
<button id="import-hires-btn" class="secondary" disabled title="Download original hi-res and import into Premiere">Hi-Res</button>
|
|
</div>
|
|
<!-- Row 2: bulk + timeline actions -->
|
|
<div class="action-row">
|
|
<button id="import-all-btn" class="secondary" title="Import all visible assets as proxy">Import All</button>
|
|
<button id="export-timeline-btn" class="secondary" title="Push the current Premiere sequence to MAM">Export Timeline ↑</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Adobe CSInterface Library -->
|
|
<script src="js/CSInterface.js"></script>
|
|
|
|
<!-- Main Panel Script -->
|
|
<!-- NOTE: premiere.jsx is NOT loaded here — it runs in the Premiere host context,
|
|
registered via <ScriptPath> in manifest.xml. Panel calls it via csInterface.evalScript(). -->
|
|
<script src="js/main.js"></script>
|
|
</body>
|
|
</html>
|