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>
699 lines
13 KiB
CSS
699 lines
13 KiB
CSS
/* Wild Dragon MAM Panel - Dark Theme Styles */
|
|
|
|
:root {
|
|
--bg-primary: #0f0f1e;
|
|
--bg-secondary: #1a1a2e;
|
|
--bg-tertiary: #16213e;
|
|
--accent: #e94560;
|
|
--accent-hover: #ff5a7e;
|
|
--text-primary: #ffffff;
|
|
--text-secondary: #b0b0c0;
|
|
--border: #2a2a3e;
|
|
--success: #00d084;
|
|
--error: #ff4444;
|
|
--warning: #ffb84d;
|
|
--shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html, body {
|
|
width: 100%;
|
|
height: 100%;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
background-color: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* Scrollbar styling */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--accent);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--accent-hover);
|
|
}
|
|
|
|
/* Main panel container */
|
|
#panel-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Connection bar at top */
|
|
.connection-bar {
|
|
background-color: var(--bg-secondary);
|
|
border-bottom: 1px solid var(--border);
|
|
padding: 12px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.connection-controls {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto auto;
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
|
|
.server-input-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.connection-controls--stacked {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.server-input-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
input.server-url {
|
|
flex: 1;
|
|
min-width: 0;
|
|
background-color: var(--bg-tertiary);
|
|
border: 1px solid var(--border);
|
|
color: var(--text-primary);
|
|
padding: 6px 8px;
|
|
border-radius: 4px;
|
|
font-size: 11px;
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
input.server-url:focus {
|
|
outline: none;
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 0 2px rgba(233, 69, 96, 0.1);
|
|
}
|
|
|
|
input.server-url::placeholder {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.status-indicator {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background-color: var(--error);
|
|
transition: background-color 0.2s;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.status-indicator.connected {
|
|
background-color: var(--success);
|
|
box-shadow: 0 0 6px rgba(0, 208, 132, 0.5);
|
|
}
|
|
|
|
.status-indicator.connecting {
|
|
background-color: var(--warning);
|
|
animation: pulse 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
|
|
/* Buttons */
|
|
button {
|
|
background-color: var(--accent);
|
|
color: var(--text-primary);
|
|
border: none;
|
|
padding: 6px 12px;
|
|
border-radius: 4px;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
button:hover:not(:disabled) {
|
|
background-color: var(--accent-hover);
|
|
transform: translateY(-1px);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
button:active:not(:disabled) {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
button:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
button.secondary {
|
|
background-color: var(--bg-tertiary);
|
|
border: 1px solid var(--border);
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
button.secondary:hover:not(:disabled) {
|
|
background-color: var(--bg-secondary);
|
|
border-color: var(--accent);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Search and filter area */
|
|
.search-filter-area {
|
|
background-color: var(--bg-secondary);
|
|
border-bottom: 1px solid var(--border);
|
|
padding: 12px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.search-bar {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
input[type="text"].search-input {
|
|
flex: 1;
|
|
background-color: var(--bg-tertiary);
|
|
border: 1px solid var(--border);
|
|
color: var(--text-primary);
|
|
padding: 8px 12px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
input[type="text"].search-input:focus {
|
|
outline: none;
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 0 2px rgba(233, 69, 96, 0.1);
|
|
}
|
|
|
|
input[type="text"].search-input::placeholder {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.filter-controls {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
select {
|
|
flex: 1;
|
|
background-color: var(--bg-tertiary);
|
|
border: 1px solid var(--border);
|
|
color: var(--text-primary);
|
|
padding: 6px 8px;
|
|
border-radius: 4px;
|
|
font-size: 11px;
|
|
cursor: pointer;
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
select:focus {
|
|
outline: none;
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
select option {
|
|
background-color: var(--bg-secondary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Active sequence info bar */
|
|
.seq-info-bar {
|
|
background-color: var(--bg-tertiary);
|
|
border-bottom: 1px solid var(--border);
|
|
padding: 5px 12px;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.seq-info-bar.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.seq-info-label {
|
|
font-size: 9px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.5px;
|
|
color: var(--accent);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.seq-info-name {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
flex: 1;
|
|
}
|
|
|
|
.seq-refresh-btn {
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-secondary);
|
|
font-size: 14px;
|
|
padding: 0 2px;
|
|
cursor: pointer;
|
|
flex-shrink: 0;
|
|
line-height: 1;
|
|
}
|
|
|
|
.seq-refresh-btn:hover:not(:disabled) {
|
|
color: var(--accent);
|
|
transform: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Main content area */
|
|
.content-area {
|
|
display: flex;
|
|
flex: 1;
|
|
gap: 0;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* Asset grid */
|
|
.asset-grid-container {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
border-right: 1px solid var(--border);
|
|
}
|
|
|
|
.asset-grid {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 12px;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.asset-card {
|
|
background-color: var(--bg-secondary);
|
|
border: 2px solid var(--border);
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 160px;
|
|
}
|
|
|
|
.asset-card:hover {
|
|
border-color: var(--accent);
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.asset-card.selected {
|
|
border-color: var(--accent);
|
|
background-color: var(--bg-tertiary);
|
|
box-shadow: 0 0 12px rgba(233, 69, 96, 0.3);
|
|
}
|
|
|
|
.asset-thumbnail {
|
|
width: 100%;
|
|
aspect-ratio: 16 / 9;
|
|
background-color: var(--bg-tertiary);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 10px;
|
|
color: var(--text-secondary);
|
|
overflow: hidden;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.asset-thumbnail img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.asset-info {
|
|
padding: 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
.asset-filename {
|
|
font-weight: 600;
|
|
font-size: 11px;
|
|
color: var(--text-primary);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.asset-meta {
|
|
display: flex;
|
|
gap: 4px;
|
|
font-size: 10px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.asset-status-badge {
|
|
display: inline-block;
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
font-size: 9px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
width: fit-content;
|
|
}
|
|
|
|
.status-badge.ready {
|
|
background-color: rgba(0, 208, 132, 0.2);
|
|
color: var(--success);
|
|
}
|
|
|
|
.status-badge.processing {
|
|
background-color: rgba(255, 184, 77, 0.2);
|
|
color: var(--warning);
|
|
animation: pulse 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
.status-badge.error {
|
|
background-color: rgba(255, 68, 68, 0.2);
|
|
color: var(--error);
|
|
}
|
|
|
|
/* Empty state */
|
|
.empty-state {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 24px;
|
|
text-align: center;
|
|
color: var(--text-secondary);
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.empty-state-icon {
|
|
font-size: 32px;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* Details panel */
|
|
.details-panel {
|
|
width: 200px;
|
|
background-color: var(--bg-secondary);
|
|
border-left: 1px solid var(--border);
|
|
padding: 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.details-panel.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.details-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.details-label {
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
color: var(--text-secondary);
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.details-value {
|
|
font-size: 12px;
|
|
color: var(--text-primary);
|
|
word-break: break-word;
|
|
}
|
|
|
|
.tags-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
}
|
|
|
|
.tag {
|
|
display: inline-block;
|
|
background-color: var(--bg-tertiary);
|
|
border: 1px solid var(--border);
|
|
color: var(--text-secondary);
|
|
padding: 4px 8px;
|
|
border-radius: 3px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.divider {
|
|
height: 1px;
|
|
background-color: var(--border);
|
|
}
|
|
|
|
/* Progress indicator */
|
|
.progress-container {
|
|
padding: 12px;
|
|
background-color: var(--bg-secondary);
|
|
border-bottom: 1px solid var(--border);
|
|
display: none;
|
|
}
|
|
|
|
.progress-container.visible {
|
|
display: block;
|
|
}
|
|
|
|
.progress-label {
|
|
font-size: 11px;
|
|
margin-bottom: 6px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.progress-bar {
|
|
width: 100%;
|
|
height: 4px;
|
|
background-color: var(--bg-tertiary);
|
|
border-radius: 2px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
background-color: var(--accent);
|
|
width: 0%;
|
|
transition: width 0.3s;
|
|
}
|
|
|
|
/* Export timeline panel */
|
|
.export-panel {
|
|
background-color: var(--bg-secondary);
|
|
border-top: 2px solid var(--accent);
|
|
padding: 12px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.export-panel.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.export-panel-title {
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
color: var(--accent);
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.export-panel input[type="text"] {
|
|
width: 100%;
|
|
background-color: var(--bg-tertiary);
|
|
border: 1px solid var(--border);
|
|
color: var(--text-primary);
|
|
padding: 6px 8px;
|
|
border-radius: 4px;
|
|
font-size: 11px;
|
|
margin-bottom: 6px;
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
.export-panel input[type="text"]:focus {
|
|
outline: none;
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 0 2px rgba(233, 69, 96, 0.1);
|
|
}
|
|
|
|
.export-panel select {
|
|
width: 100%;
|
|
margin-bottom: 8px;
|
|
flex: none;
|
|
}
|
|
|
|
.export-clip-info {
|
|
font-size: 10px;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.export-panel-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.export-panel-actions button {
|
|
flex: 1;
|
|
}
|
|
|
|
/* Action bar — two rows */
|
|
.action-bar {
|
|
background-color: var(--bg-secondary);
|
|
border-top: 1px solid var(--border);
|
|
padding: 10px 12px;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.action-row {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.action-row button {
|
|
flex: 1;
|
|
}
|
|
|
|
/* Loading spinner */
|
|
.spinner {
|
|
display: inline-block;
|
|
width: 12px;
|
|
height: 12px;
|
|
border: 2px solid var(--border);
|
|
border-top-color: var(--accent);
|
|
border-radius: 50%;
|
|
animation: spin 0.8s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* Responsive layout for smaller panels */
|
|
@media (max-width: 500px) {
|
|
.asset-grid {
|
|
grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
|
|
gap: 10px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.details-panel {
|
|
width: 150px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.asset-card {
|
|
height: 150px;
|
|
}
|
|
|
|
.connection-controls {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.server-input-group {
|
|
grid-column: 1;
|
|
width: 100%;
|
|
}
|
|
|
|
button.connect-btn {
|
|
grid-column: 2 / 4;
|
|
}
|
|
}
|
|
|
|
/* Utility classes */
|
|
.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
.loading {
|
|
opacity: 0.6;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.error-message {
|
|
background-color: rgba(255, 68, 68, 0.1);
|
|
border: 1px solid var(--error);
|
|
color: var(--error);
|
|
padding: 8px 12px;
|
|
border-radius: 4px;
|
|
font-size: 11px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.success-message {
|
|
background-color: rgba(0, 208, 132, 0.1);
|
|
border: 1px solid var(--success);
|
|
color: var(--success);
|
|
padding: 8px 12px;
|
|
border-radius: 4px;
|
|
font-size: 11px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.info-message {
|
|
background-color: rgba(233, 69, 96, 0.1);
|
|
border: 1px solid var(--accent);
|
|
color: var(--accent);
|
|
padding: 8px 12px;
|
|
border-radius: 4px;
|
|
font-size: 11px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
/* Text truncation */
|
|
.truncate {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.truncate-lines-2 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|