From d9fe81f282cc55d5c6e0006807d9d149a91d1bb7 Mon Sep 17 00:00:00 2001
From: Ben Miller <ben.p.miller@gmail.com>
Date: Mon, 29 Dec 2025 01:26:18 -0700
Subject: [PATCH] feat: Use Shopify thumbnail and playback URL for synced media

- Update \MediaService.ts\ to populate \	humbnail\ and \contentUrl\ from Shopify media when a Drive file is synced.
- Enable \synced\ videos to use the Shopify video URL for playback/hover.
- Update \MediaManager.html\ to allow \synced\ items to render as \<video>\ tags if they have a valid \contentUrl\.
- Add regression tests in \MediaService.test.ts\ for thumbnail and video sync behavior.
---
 src/MediaManager.html             | 13 ++++----
 src/services/MediaService.test.ts | 52 +++++++++++++++++++++++++++++++
 src/services/MediaService.ts      | 10 ++++--
 3 files changed, 66 insertions(+), 9 deletions(-)

diff --git a/src/MediaManager.html b/src/MediaManager.html
index 770b794..c2af61b 100644
--- a/src/MediaManager.html
+++ b/src/MediaManager.html
@@ -492,7 +492,7 @@
       <p style="color:var(--text-secondary); margin-bottom: 24px;">
         We found a matching file in Shopify. Should these be linked?
       </p>
-  
+
       <div style="display: flex; justify-content: center; gap: 24px; margin-bottom: 24px;">
         <!-- Drive Side -->
         <div style="flex: 1;">
@@ -503,10 +503,10 @@
             style="font-size: 11px; margin-top: 4px; color: var(--text-secondary); word-break: break-all;">filename.jpg
           </div>
         </div>
-  
+
         <!-- Icon -->
         <div style="display: flex; align-items: center; font-size: 24px; color: var(--text-secondary);">🔗</div>
-  
+
         <!-- Shopify Side -->
         <div style="flex: 1;">
           <div style="font-size: 12px; font-weight: 600; margin-bottom: 8px;">Shopify Media</div>
@@ -517,7 +517,7 @@
           </div>
         </div>
       </div>
-  
+
       <div style="display: flex; gap: 12px; justify-content: center;">
         <button id="btn-match-skip" onclick="controller.skipLink()" class="btn btn-secondary" style="width: 100px;">No,
           Skip</button>
@@ -795,8 +795,9 @@
         // Create Media Element
         // RULE: Only create <video> for Shopify-hosted videos (public).
         // Drive videos use static thumbnail + Iframe Preview.
-      var mediaEl;
-        if (isVideo && item.source === 'shopify_only' && contentUrl) {
+        var mediaEl;
+        // Allow Shopify-only OR Synced items with valid contentUrl (Shopify Video URL) to use <video> tag
+        if (isVideo && (item.source === 'shopify_only' || item.source === 'synced') && contentUrl) {
           mediaEl = document.createElement('video');
           mediaEl.src = contentUrl;
           mediaEl.poster = item.thumbnail || "";
diff --git a/src/services/MediaService.test.ts b/src/services/MediaService.test.ts
index c3c179c..45332df 100644
--- a/src/services/MediaService.test.ts
+++ b/src/services/MediaService.test.ts
@@ -205,4 +205,56 @@ describe("MediaService Robust Sync", () => {
         })
     ]))
   })
+
+  test("Thumbnail: Uses Shopify thumbnail when synced", () => {
+    const folder = driveService.getOrCreateFolder("SKU_THUMB", "root")
+
+    // Drive File
+    const blob1 = { getName: () => "img1.jpg", getBytes: () => [], getThumbnail: () => ({ getBytes: () => [1, 2, 3] }) } as any
+    const f1 = driveService.saveFile(blob1, folder.getId())
+    driveService.updateFileProperties(f1.getId(), { shopify_media_id: "gid://shopify/Media/123" })
+
+    // Shopify Media with distinct thumbnail
+    shopifyService.getProductMedia = jest.fn().mockReturnValue([
+        {
+            id: "gid://shopify/Media/123",
+            filename: "img1.jpg",
+            preview: { image: { originalSrc: "https://shopify.com/thumb.jpg" } }
+        }
+    ])
+
+    const state = mediaService.getUnifiedMediaState("SKU_THUMB", "pid")
+
+    const item = state.find(s => s.id === f1.getId())
+    expect(item.source).toBe("synced")
+    expect(item.thumbnail).toBe("https://shopify.com/thumb.jpg")
+    // Verify it didn't use the base64 drive thumbnail
+    expect(item.thumbnail).not.toContain("base64")
+  })
+
+  test("Video Sync: Uses Shopify contentUrl for synced videos", () => {
+      const folder = driveService.getOrCreateFolder("SKU_VID_SYNC", "root")
+
+      // Drive File (Video)
+      const blob = { getName: () => "vid.mp4", getBytes: () => [], getMimeType: () => "video/mp4", getThumbnail: () => ({ getBytes: () => [] }) } as any
+      const f = driveService.saveFile(blob, folder.getId())
+      driveService.updateFileProperties(f.getId(), { shopify_media_id: "gid://shopify/Media/Vid1" })
+
+      // Shopify Media (Video)
+      shopifyService.getProductMedia = jest.fn().mockReturnValue([
+          {
+              id: "gid://shopify/Media/Vid1",
+              filename: "vid.mp4",
+              mediaContentType: "VIDEO",
+              sources: [{ url: "https://shopify.com/video.mp4", mimeType: "video/mp4" }],
+              preview: { image: { originalSrc: "https://shopify.com/vid_thumb.jpg" } }
+          }
+      ])
+
+      const state = mediaService.getUnifiedMediaState("SKU_VID_SYNC", "pid")
+      const item = state.find(s => s.id === f.getId())
+
+      expect(item.contentUrl).toBe("https://shopify.com/video.mp4")
+      expect(item.thumbnail).toBe("https://shopify.com/vid_thumb.jpg")
+  })
 })
diff --git a/src/services/MediaService.ts b/src/services/MediaService.ts
index 4a5f7c7..e028b51 100644
--- a/src/services/MediaService.ts
+++ b/src/services/MediaService.ts
@@ -126,12 +126,16 @@ export class MediaService {
             shopifyId: match ? match.id : null,
             filename: d.file.getName(),
             source: match ? 'synced' : 'drive_only',
-            thumbnail: `data:image/jpeg;base64,${Utilities.base64Encode(d.file.getThumbnail().getBytes())}`,
+            thumbnail: (match && match.preview && match.preview.image && match.preview.image.originalSrc)
+                ? match.preview.image.originalSrc
+                : `data:image/jpeg;base64,${Utilities.base64Encode(d.file.getThumbnail().getBytes())}`,
             status: 'active',
             galleryOrder: d.galleryOrder,
             mimeType: d.file.getMimeType(),
-            // Use manual download URL construction which is often more reliable for authenticated sessions than getDownloadUrl()
-            contentUrl: `https://drive.google.com/uc?export=download&id=${d.file.getId()}`
+            // Prefer Shopify Video URL for playback/hover if available, otherwise Drive Download URL
+            contentUrl: (match && match.sources)
+                ? (match.sources.find((s: any) => s.mimeType === 'video/mp4')?.url || match.sources[0]?.url)
+                : `https://drive.google.com/uc?export=download&id=${d.file.getId()}`
         })
         // console.log(`[MediaService] File ${d.file.getName()} (${d.file.getId()}): Mime=${d.file.getMimeType()}, ContentUrl=https://drive.google.com/uc?export=download&id=${d.file.getId()}`)
     })