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

@@ -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 || "";