mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-21 15:24:09 +00:00
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:
8
src/renderer/extensions/linearMode/ElementDetails.vue
Normal file
8
src/renderer/extensions/linearMode/ElementDetails.vue
Normal 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>
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user