Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-04-30 11:11:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add resolution indicator for video previews

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

8
src/renderer/extensions/linearMode/ElementDetails.vue Normal file
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>

21
src/views/LinearView.vue
View File

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