Zac Gaetano
eadafffb18
End-to-end debugging against a live Premiere Pro 2025 + auth-enabled mam-api
surfaced four real bugs that made v1.0.0 install cleanly but never load,
plus the missing auth flow. All four are fixed and the panel is verified
connected (status dot green, Reconnect button shown, project list populated).
- manifest.xml: a comment in the <Resources> block contained "--" (inside
"--enable-nodejs"/"--mixed-context"), which is illegal per the XML spec.
CEP 12's strict parser logged
ERROR XPATH Double hyphen within comment
and skipped the panel entirely. Comment rewritten without double hyphens.
- manifest.xml: lacked the Version="X.Y" attribute on <ExtensionManifest>
and used a non-standard AbstractionLayers/empty <ExtensionList/>
structure. CEP rejected it with
Unsupported Manifest version ''
Manifest rewritten to the standard CSXS 7.0 schema (ExtensionList +
DispatchInfoList + RequiredRuntimeList), matching the working AMPP
panel template.
- main.js: re-declared `const csInterface = new CSInterface()` at top
level even though CSInterface.js already declared the same binding.
CEP 12 shares script-realm lexical scope across <script> tags, so the
second const threw
Identifier 'csInterface' has already been declared
The throw fired before setupEventListeners(), so the Connect button's
click handler was never attached. This is the root cause of the
original "clicking Connect does nothing" symptom; everything else was
secondary. Removed the duplicate declaration; main.js now uses the
binding from CSInterface.js.
- No auth support against AUTH_ENABLED=true servers. mam-api supports
Bearer tokens (POST /api/v1/tokens), so added:
• API token input field (password-masked) next to Server URL
• localStorage persistence on every keystroke
• window.fetch monkey-patch that injects
Authorization: Bearer <token>
on every request whose URL starts with the configured server.
Signed S3 download URLs are NOT touched.
Drive-by fixes that came out of the same debugging pass:
- Server URL input listener was 'change' (fires on blur); switched to
'input' so typing-then-clicking-Connect immediately commits.
- restoreSettings() now strips trailing slashes from the stored URL so
older saved values like 'http://host/' stop producing //api/v1 404s.
- CSS selector `input[type="text"].server-url` didn't match the new
password input → the token field was unstyled and effectively invisible.
Generalized to `input.server-url`; restructured the connection bar into
`.connection-controls--stacked` (flex column) of two `.server-input-row`
rows so two input fields fit cleanly.
- Build scripts now parse ExtensionBundleVersion from both element form
(<ExtensionBundleVersion>X</...>) and attribute form
(ExtensionBundleVersion="X"), since the manifest rewrite switched
schemas.
Version bumped 1.0.0 → 1.0.1. New artifacts committed at
services/premiere-plugin/build/releases/v1.0.1/ (.exe 2 MB, .zxp 35 KB).
v1.0.0 left in place so editors who downloaded it can verify they're on
the broken version.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
172 lines
7.2 KiB
HTML
172 lines
7.2 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 connection-controls--stacked">
|
|
<div class="server-input-row">
|
|
<input
|
|
type="text"
|
|
id="server-url"
|
|
class="server-url"
|
|
placeholder="http://10.0.0.25:47434"
|
|
title="MAM server URL"
|
|
>
|
|
<div class="status-indicator" id="status-indicator"></div>
|
|
</div>
|
|
<div class="server-input-row">
|
|
<input
|
|
type="password"
|
|
id="api-token"
|
|
class="server-url"
|
|
placeholder="API token (wd_…)"
|
|
title="API token — create with POST /api/v1/tokens"
|
|
autocomplete="off"
|
|
>
|
|
<button id="connect-btn" class="connect-btn">Connect</button>
|
|
</div>
|
|
</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: growing-file actions -->
|
|
<div class="action-row">
|
|
<button id="mount-live-btn" class="secondary" disabled title="Open the live (growing) file directly from the SMB share">Mount Live</button>
|
|
<button id="relink-btn" class="secondary" disabled title="Relink the imported clip from proxy to the finalized hi-res original">Relink to Hi-Res</button>
|
|
</div>
|
|
<!-- Row 3: 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>
|