Add resolution indicator for video previews

Attempting to future proof things a little here.
I'm conflicted on current implementation vs slot based implementation
(which also requires a siblingElement lookup) vs dedicated components
for each type media being previewed
This commit is contained in:
Austin Mroz
2026-01-05 09:34:43 -08:00
parent 44bd2469ef
commit 1d611e857c
2 changed files with 23 additions and 6 deletions

View File

@@ -0,0 +1,8 @@
<script setup lang="ts" generic="T extends HTMLElement">
const { elementToString } = defineProps<{
elementToString: (e: T) => string
}>()
</script>
<template>
<span v-text="elementToString($el?.previousElementSibling)" />
</template>

View File

@@ -37,6 +37,7 @@ import { useWorkflowStore } from '@/platform/workflow/management/stores/workflow
import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
import DropZone from '@/renderer/extensions/linearMode/DropZone.vue'
import ElementDetails from '@/renderer/extensions/linearMode/ElementDetails.vue'
import ImagePreview from '@/renderer/extensions/linearMode/ImagePreview.vue'
import NodeWidgets from '@/renderer/extensions/vueNodes/components/NodeWidgets.vue'
import WidgetInputNumberInput from '@/renderer/extensions/vueNodes/widgets/components/WidgetInputNumber.vue'
@@ -526,12 +527,20 @@ onKeyStroke('ArrowUp', gotoPreviousOutput)
: preview.url
"
/>
<video
v-else-if="getMediaType(preview) === 'video'"
class="object-contain flex-1 contain-size"
controls
:src="preview.url"
/>
<template v-else-if="getMediaType(preview) === 'video'">
<video
class="object-contain flex-1 contain-size"
controls
:src="preview.url"
/>
<ElementDetails
class="self-center z-10"
:element-to-string="
(e: HTMLVideoElement) =>
e ? `${e.videoWidth} x ${e.videoHeight}` : ''
"
/>
</template>
<audio
v-else-if="getMediaType(preview) === 'audio'"
class="w-full m-auto"