fix(auth+bugs): optional auth bypass, login routes, conform column name, panel metadata fields, login page: main.js

services/premiere-plugin/js/main.js

@@ -90,7 +90,7 @@ async function loadThumbnail(img, assetId) {
         img.src = url;
         img.dataset.loaded = '1';
     } catch (_) {
-        // thumbnail unavailable — leave placeholder visible
+        // thumbnail unavailable — leave placeholder
     }
 }
 
@@ -109,9 +109,8 @@ function setupEventListeners() {
     elements.serverUrlInput.addEventListener('change', (e) => {
         state.serverUrl = e.target.value.trim().replace(/\/$/, '');
         localStorage.setItem('mam_server_url', state.serverUrl);
-        state.thumbCache = {}; // bust cache when server changes
+        state.thumbCache = {};
     });
-
     elements.connectBtn.addEventListener('click', connectToServer);
     elements.searchInput.addEventListener('input', debounce(handleSearch, 300));
     elements.projectFilter.addEventListener('change', handleProjectFilter);
@@ -136,10 +135,11 @@ async function connectToServer() {
     elements.connectBtn.disabled = true;
 
     try {
-        // Use the projects endpoint as a health check (no separate /health route exists)
+        // Use the projects endpoint as a connectivity check
         const response = await fetch(`${state.serverUrl}/api/v1/projects`, {
             method: 'GET',
             headers: { Accept: 'application/json' },
+            credentials: 'include',
         });
 
         if (response.ok) {
@@ -148,7 +148,6 @@ async function connectToServer() {
             elements.connectBtn.textContent = 'Reconnect';
             logMessage('Connected to Wild Dragon MAM');
 
-            // Pass the already-fetched JSON to avoid a second round-trip
             const projectData = await response.json();
             await fetchProjects(projectData);
             await fetchAssets();
@@ -178,19 +177,15 @@ function updateConnectionStatus(status) {
 // API Calls
 // ============================================================================
 
-/**
- * Load projects into state and the filter dropdown.
- * @param {Array} [preloadedData] - If provided, skips the fetch (reuse connection-check response).
- */
 async function fetchProjects(preloadedData) {
     try {
         let projects;
         if (preloadedData) {
-            // GET /api/v1/projects returns a plain array (not { projects: [] })
             projects = Array.isArray(preloadedData) ? preloadedData : [];
         } else {
             const response = await fetch(`${state.serverUrl}/api/v1/projects`, {
                 headers: { Accept: 'application/json' },
+                credentials: 'include',
             });
             if (!response.ok) throw new Error(`HTTP ${response.status}`);
             const data = await response.json();
@@ -217,21 +212,18 @@ async function fetchProjects(preloadedData) {
 
 async function fetchAssets(page = 0) {
     if (!state.isConnected) return;
-
     try {
         const params = new URLSearchParams({
             offset: page * state.pageSize,
             limit:  state.pageSize,
         });
-
         if (state.searchQuery)               params.append('search',     state.searchQuery);
         if (state.selectedProject !== 'all') params.append('project_id', state.selectedProject);
 
         const response = await fetch(
             `${state.serverUrl}/api/v1/assets?${params.toString()}`,
-            { headers: { Accept: 'application/json' } }
+            { headers: { Accept: 'application/json' }, credentials: 'include' }
         );
-
         if (!response.ok) throw new Error(`HTTP ${response.status}`);
 
         const data        = await response.json();
@@ -252,6 +244,7 @@ async function fetchAssetDetails(assetId) {
     try {
         const response = await fetch(`${state.serverUrl}/api/v1/assets/${assetId}`, {
             headers: { Accept: 'application/json' },
+            credentials: 'include',
         });
         if (!response.ok) throw new Error(`HTTP ${response.status}`);
         return await response.json();
@@ -268,6 +261,7 @@ async function fetchAssetDetails(assetId) {
 async function getSignedDownloadUrl(assetId) {
     const response = await fetch(`${state.serverUrl}/api/v1/assets/${assetId}/stream`, {
         headers: { Accept: 'application/json' },
+        credentials: 'include',
     });
     if (!response.ok) throw new Error(`HTTP ${response.status} from /stream`);
     const { url } = await response.json();
@@ -301,7 +295,7 @@ function createAssetCard(asset) {
     }
     card.dataset.assetId = asset.id;
 
-    // Thumbnail — lazy loaded by IntersectionObserver
+    // Thumbnail — lazy loaded via IntersectionObserver
     const thumbnail = document.createElement('div');
     thumbnail.className = 'asset-thumbnail';
 
@@ -312,7 +306,6 @@ function createAssetCard(asset) {
     img.onerror         = () => { img.style.display = 'none'; };
     thumbnail.appendChild(img);
     thumbObserver.observe(img);
-
     card.appendChild(thumbnail);
 
     // Info row
@@ -327,7 +320,8 @@ function createAssetCard(asset) {
     info.appendChild(filenameEl);
 
     const durationSec = asset.duration_ms ? asset.duration_ms / 1000 : null;
-    const codec = (asset.metadata && asset.metadata.codec) || asset.media_type || 'video';
+    // codec and media_type are top-level columns on the asset record
+    const codec = asset.codec || asset.media_type || 'video';
     const meta  = document.createElement('div');
     meta.className   = 'asset-meta';
     meta.innerHTML   = [
@@ -350,16 +344,16 @@ function showAssetDetails(asset) {
     state.selectedAsset = asset;
     elements.detailsPanel.classList.remove('hidden');
 
-    const meta = asset.metadata || {};
+    // All of these are top-level columns in the assets table
     elements.detailsFilename.textContent   = asset.display_name || asset.filename;
-    elements.detailsCodec.textContent      = meta.codec || asset.media_type || 'Unknown';
+    elements.detailsCodec.textContent      = asset.codec || asset.media_type || 'Unknown';
-    elements.detailsResolution.textContent = meta.resolution || 'N/A';
+    elements.detailsResolution.textContent = asset.resolution || 'N/A';
-    elements.detailsFps.textContent        = meta.fps ? meta.fps + ' fps' : 'N/A';
+    elements.detailsFps.textContent        = asset.fps ? asset.fps + ' fps' : 'N/A';
     elements.detailsDuration.textContent   = asset.duration_ms
         ? formatDuration(asset.duration_ms / 1000)
         : 'N/A';
-    elements.detailsSize.textContent       = meta.file_size
+    elements.detailsSize.textContent       = asset.file_size
-        ? formatFileSize(meta.file_size)
+        ? formatFileSize(asset.file_size)
         : 'N/A';
 
     elements.detailsTags.innerHTML = '';
@@ -428,18 +422,18 @@ async function importAsset(asset) {
     try {
         elements.importBtn.disabled = true;
 
-        // Step 1: get a presigned proxy URL from the MAM API
+        // 1. Get a presigned proxy URL
         showProgress('Getting download link...', 5);
         const url = await getSignedDownloadUrl(asset.id);
 
-        // Step 2: download the proxy (H.264) to the OS temp directory
+        // 2. Download proxy to OS temp dir via Node.js
         const safeName = sanitizeFilename(
             (asset.display_name || asset.filename || asset.id) + '.mp4'
         );
         showProgress('Downloading ' + safeName + '...', 10);
         const filePath = await downloadFile(url, safeName);
 
-        // Step 3: hand the local path to Premiere Pro via ExtendScript
+        // 3. Hand the local path to Premiere Pro
         showProgress('Importing into Premiere Pro...', 85);
         await importFileToPremiereProject(filePath);
 
@@ -456,13 +450,7 @@ async function importAsset(asset) {
 
 /**
  * Downloads a remote URL to a local temp file using Node.js http/https.
- *
+ * Requires --enable-nodejs in the CEP manifest.
- * Node.js is available via require() in CEP when the manifest contains:
- *   <CEFCommandLine><Parameter>--enable-nodejs</Parameter></CEFCommandLine>
- *
- * @param {string} url      - Presigned download URL (http or https)
- * @param {string} filename - Desired local filename (sanitized)
- * @returns {Promise<string>} Resolved with the absolute path to the saved file
  */
 function downloadFile(url, filename) {
     return new Promise(function (resolve, reject) {
@@ -517,15 +505,10 @@ function downloadFile(url, filename) {
 }
 
 /**
- * Uses csInterface.evalScript to call the Premiere Pro ExtendScript layer
+ * Calls csInterface.evalScript to import a local file into the open Premiere project.
- * and import the given local file into the active project.
- *
- * @param {string} filePath - Absolute local path to the downloaded proxy file
- * @returns {Promise<object>}
  */
 function importFileToPremiereProject(filePath) {
     return new Promise(function (resolve, reject) {
-        // Escape backslashes for Windows paths inside the script string literal
         var safePath = filePath.replace(/\\/g, '\\\\');
 
         var script = [
@@ -641,9 +624,6 @@ function escapeHtml(str) {
         .replace(/'/g,  '&#39;');
 }
 
-/**
- * Strips characters illegal in file names on Windows/macOS.
- */
 function sanitizeFilename(name) {
     return name.replace(/[<>:"/\\|?*\x00-\x1f]/g, '_');
 }
@@ -653,9 +633,7 @@ function formatDuration(seconds) {
     var h = Math.floor(seconds / 3600);
     var m = Math.floor((seconds % 3600) / 60);
     var s = Math.floor(seconds % 60);
-    if (h > 0) {
+    if (h > 0) return h + ':' + String(m).padStart(2, '0') + ':' + String(s).padStart(2, '0');
-        return h + ':' + String(m).padStart(2, '0') + ':' + String(s).padStart(2, '0');
-    }
     return m + ':' + String(s).padStart(2, '0');
 }