From f6e10ccc4f02dbd6449d417de23b953416b57827 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Mon, 29 Jun 2026 08:41:40 -0400
Subject: [PATCH] fix(explore): render videos with VideoCanvas, not ImageCanvas
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Explore center pane hardcoded ImageCanvas, so a video anchor (e.g. a 169 MB
MP4) tried to load the MP4 into an <img> and showed only the alt text — the
thumbnail worked but the "main image" never rendered. Branch on
mime.startsWith('video/') to VideoCanvas (with mime), exactly like the image
modal. The anchor payload already carries mime.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ttrj5P7upUTueSfoJcxEqa
---
 frontend/src/views/ExploreView.vue | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/frontend/src/views/ExploreView.vue b/frontend/src/views/ExploreView.vue
index 5a3052f..a196dd1 100644
--- a/frontend/src/views/ExploreView.vue
+++ b/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)