fix(explore): render videos with VideoCanvas, not ImageCanvas
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
This commit is contained in:
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user