frontend/src/views/ExploreView.vue

@@ -90,12 +90,22 @@
         <!-- CENTER: the focused image (light viewer) + meta. -->
         <section class="fc-ex__viewer">
           <div class="fc-ex__canvas">
-            <ImageCanvas
-              v-if="store.anchor"
-              :key="store.anchor.id"
-              :src="store.anchor.image_url"
-              :alt="`Image ${store.anchor.id}`"
-            />
+            <template v-if="store.anchor">
+              <!-- Videos can't render in an <img> — branch to VideoCanvas like
+                   the modal does (an MP4 in ImageCanvas just shows the alt). -->
+              <ImageCanvas
+                v-if="!isVideo"
+                :key="store.anchor.id"
+                :src="store.anchor.image_url"
+                :alt="`Image ${store.anchor.id}`"
+              />
+              <VideoCanvas
+                v-else
+                :key="store.anchor.id"
+                :src="store.anchor.image_url"
+                :mime="store.anchor.mime"
+              />
+            </template>
           </div>
           <div v-if="store.anchor" class="fc-ex__viewer-foot">
             <div class="fc-ex__artist">{{ store.anchor.artist?.name || 'Unknown artist' }}</div>
@@ -129,6 +139,7 @@ import { useModalStore } from '../stores/modal.js'
 import { useHeadTraining } from '../composables/useHeadTraining.js'
 import { isTextEntry } from '../utils/textEntry.js'
 import ImageCanvas from '../components/modal/ImageCanvas.vue'
+import VideoCanvas from '../components/modal/VideoCanvas.vue'
 import ImageMetaBar from '../components/modal/ImageMetaBar.vue'
 import ProvenancePanel from '../components/modal/ProvenancePanel.vue'
 import TagPanel from '../components/modal/TagPanel.vue'
@@ -140,6 +151,7 @@ const store = useExploreStore()
 const modal = useModalStore()
 
 const anchorId = computed(() => route.params.imageId || null)
+const isVideo = computed(() => !!store.anchor?.mime?.startsWith('video/'))
 const seeding = ref(false)
 const seedError = ref(null)
 const tagPanelRef = ref(null)