Merge pull request #2 from cloudinary-devs/fix/preview-and-video-enhancements

njb90 · web-flow · commit a6953d11caeb · 2025-11-12T14:58:02.000Z
Fix/preview and video enhancements
diff --git a/src/commands/clearSearch.ts b/src/commands/clearSearch.ts
diff --git a/src/commands/previewAsset.ts b/src/commands/previewAsset.ts
@@ -111,6 +111,25 @@ function registerPreview(context: vscode.ExtensionContext) {
           a:hover {
             text-decoration: underline;
           }
+      
+          .copy-btn {
+            background-color: var(--vscode-button-background);
+            color: var(--vscode-button-foreground);
+            border: none;
+            padding: 0.25rem 0.5rem;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 0.85rem;
+            margin-left: 0.5rem;
+          }
+      
+          .copy-btn:hover {
+            background-color: var(--vscode-button-hoverBackground);
+          }
+      
+          .copy-btn:active {
+            background-color: var(--vscode-button-activeBackground);
+          }
         </style>
       </head>
       <body>
@@ -125,7 +144,7 @@ function registerPreview(context: vscode.ExtensionContext) {
           </nav>
       
           <div class="tab-content active" id="tab-info">
-            <p><strong>Public ID:</strong> ${asset.public_id}</p>
+            <p><strong>Public ID:</strong> ${asset.public_id} <button class="copy-btn" data-copy="${asset.public_id}">Copy</button></p>
             <p><strong>Original filename:</strong> ${asset.filename}</p>
             <p><strong>Dimensions:</strong> ${asset.width} x ${asset.height}</p>
             <p><strong>Size:</strong> ${(asset.bytes / 1024).toFixed(2)} KB</p>
@@ -156,8 +175,8 @@ function registerPreview(context: vscode.ExtensionContext) {
         </div>
       
           <div class="tab-content" id="tab-urls">
-            <p><strong>Original URL:</strong> <a href="${asset.secure_url}" target="_blank">${asset.secure_url}</a></p>
-            <p><strong>Optimized URL:</strong> <a href="${asset.optimized_url}" target="_blank">${asset.optimized_url}</a></p>
+            <p><strong>Original URL:</strong> <a href="${asset.secure_url}" target="_blank">${asset.secure_url}</a> <button class="copy-btn" data-copy="${asset.secure_url}">Copy</button></p>
+            <p><strong>Optimized URL:</strong> <a href="${asset.optimized_url}" target="_blank">${asset.optimized_url}</a> <button class="copy-btn" data-copy="${asset.optimized_url}">Copy</button></p>
           </div>
         </div>
       
@@ -175,6 +194,21 @@ function registerPreview(context: vscode.ExtensionContext) {
               if (target) target.classList.add("active");
             });
           });
+      
+          // Copy button functionality
+          const copyButtons = document.querySelectorAll(".copy-btn");
+          copyButtons.forEach((btn) => {
+            btn.addEventListener("click", () => {
+              const textToCopy = btn.getAttribute("data-copy");
+              navigator.clipboard.writeText(textToCopy).then(() => {
+                const originalText = btn.textContent;
+                btn.textContent = "Copied!";
+                setTimeout(() => {
+                  btn.textContent = originalText;
+                }, 2000);
+              });
+            });
+          });
         </script>
       </body>
       </html>
diff --git a/src/commands/registerCommands.ts b/src/commands/registerCommands.ts
@@ -6,7 +6,7 @@ import registerLoadMore from "./loadMoreAssets";
 import registerUpload from "./uploadWidget";
 import registerClipboard from "./copyCommands";
 import registerSwitchEnv from "./switchEnvironment";
-import registerClearSearch from "./clearSeach";
+import registerClearSearch from "./clearSearch";
 import registerWelcomeScreen from "./welcomeScreen";
 import { CloudinaryTreeDataProvider } from "../tree/treeDataProvider";
 
diff --git a/src/tree/cloudinaryItem.ts b/src/tree/cloudinaryItem.ts
@@ -66,7 +66,10 @@ class CloudinaryItem extends vscode.TreeItem {
           : cloudinary.url(data.public_id, {
             resource_type: assetType,
             type: data.type,
-            transformation: [{ fetch_format: 'auto' }, { quality: 'auto' }],
+            transformation: [
+              { fetch_format: assetType === 'video' ? 'auto:video' : 'auto' },
+              { quality: 'auto' }
+            ],
           });
 
       data.optimized_url = optimizedUrl;
@@ -130,15 +133,15 @@ class CloudinaryItem extends vscode.TreeItem {
 }
 
 function truncateLabel(label: string, maxLength: number = 20): string {
-  if (label.length <= maxLength) {return label;}
+  if (label.length <= maxLength) { return label; }
   const extension = label.includes('.') ? label.split('.').pop() : '';
   const nameWithoutExt = extension ? label.slice(0, -(extension.length + 1)) : label;
   const truncatedName = nameWithoutExt.slice(0, maxLength - 3) + '...';
   return extension ? `${truncatedName}.${extension}` : truncatedName;
 }
 
 function formatFileSize(bytes: number): string {
-  if (bytes === 0) {return '0 B';}
+  if (bytes === 0) { return '0 B'; }
   const k = 1024;
   const sizes = ['B', 'KB', 'MB', 'GB'];
   const i = Math.floor(Math.log(bytes) / Math.log(k));
