fix: update asset video previews for card and list (#8908)

## Summary
Render generated video previews in list items using a real video element (instead of an image element (this caused errors before)) and include a custom play button with dimming per [the designs](https://www.figma.com/design/LVilZgHGk5RwWOkVN6yCEK/Queue-Progress-Modal?node-id=3928-39270&m=dev).

## Changes
- **What**:
  - List item preview path now renders a `video` element when `isVideoPreview` is true.
  - Video list preview uses `preload="metadata"`, `muted`, `playsinline`, and `pointer-events-none` so row click behavior stays unchanged.
  - Kept the custom overlay/play affordance and increased overlay dimming from `bg-black/10` to `bg-black/15`.
  - Updated tests for `AssetsListItem`, `MediaVideoTop`, and `AssetsSidebarListView`.

## Review Focus
- Confirm list item click behavior still opens/selects asset (no inline playback interaction).
- Confirm video list previews now show actual video frame path instead of broken image fallback.

## Limitation
Backend does not currently provide a dedicated poster/thumbnail image for video outputs in the job preview payload. In the frontend today, we can either show a video icon placeholder, or load/render the full video itself to obtain a preview frame.

## Screenshots (if applicable)
<img width="427" height="499" alt="image" src="https://github.com/user-attachments/assets/3f974817-9d73-4fee-9fa5-2f1f68942c06" />
<img width="230" height="92" alt="image" src="https://github.com/user-attachments/assets/1fbfdd6a-72dd-47e2-96bf-8f7eb41c36f2" />

src/components/sidebar/tabs/AssetsSidebarListView.test.ts

@@ -2,8 +2,8 @@ import { mount } from '@vue/test-utils'
 import { defineComponent } from 'vue'
 import { describe, expect, it, vi } from 'vitest'
 
-import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import type { OutputStackListItem } from '@/platform/assets/composables/useOutputStacks'
+import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 
 import AssetsSidebarListView from './AssetsSidebarListView.vue'
 
@@ -72,4 +72,21 @@ describe('AssetsSidebarListView', () => {
 
     expect(wrapper.text()).not.toContain('sideToolbar.generatedAssetsHeader')
   })
+
+  it('marks mp4 assets as video previews', () => {
+    const videoAsset = {
+      ...buildAsset('video-asset', 'clip.mp4'),
+      preview_url: '/api/view/clip.mp4',
+      user_metadata: {}
+    } satisfies AssetItem
+
+    const wrapper = mountListView([buildOutputItem(videoAsset)])
+
+    const listItems = wrapper.findAllComponents({ name: 'AssetsListItem' })
+    const assetListItem = listItems.at(-1)
+
+    expect(assetListItem).toBeDefined()
+    expect(assetListItem?.props('previewUrl')).toBe('/api/view/clip.mp4')
+    expect(assetListItem?.props('isVideoPreview')).toBe(true)
+  })
 })

src/components/sidebar/tabs/AssetsSidebarListView.vue

@@ -34,7 +34,7 @@
             :aria-label="
               t('assetBrowser.ariaLabel.assetCard', {
                 name: item.asset.name,
-                type: getMediaTypeFromFilename(item.asset.name)
+                type: getAssetMediaType(item.asset)
               })
             "
             :class="
@@ -45,9 +45,8 @@
             "
             :preview-url="item.asset.preview_url"
             :preview-alt="item.asset.name"
-            :icon-name="
-              iconForMediaType(getMediaTypeFromFilename(item.asset.name))
-            "
+            :icon-name="iconForMediaType(getAssetMediaType(item.asset))"
+            :is-video-preview="isVideoAsset(item.asset)"
             :primary-text="getAssetPrimaryText(item.asset)"
             :secondary-text="getAssetSecondaryText(item.asset)"
             :stack-count="getStackCount(item.asset)"
@@ -135,6 +134,14 @@ function getAssetPrimaryText(asset: AssetItem): string {
   return truncateFilename(asset.name)
 }
 
+function getAssetMediaType(asset: AssetItem) {
+  return getMediaTypeFromFilename(asset.name)
+}
+
+function isVideoAsset(asset: AssetItem): boolean {
+  return getAssetMediaType(asset) === 'video'
+}
+
 function getAssetSecondaryText(asset: AssetItem): string {
   const metadata = getOutputAssetMetadata(asset.user_metadata)
   if (typeof metadata?.executionTimeInSeconds === 'number') {