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/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()}`)
     })