From 1d611e857ceddb3369388c956b11abb3be2630d0 Mon Sep 17 00:00:00 2001
From: Austin Mroz <austin@comfy.org>
Date: Mon, 5 Jan 2026 09:34:43 -0800
Subject: [PATCH] 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
---
 .../extensions/linearMode/ElementDetails.vue  |  8 +++++++
 src/views/LinearView.vue                      | 21 +++++++++++++------
 2 files changed, 23 insertions(+), 6 deletions(-)
 create mode 100644 src/renderer/extensions/linearMode/ElementDetails.vue

diff --git a/src/renderer/extensions/linearMode/ElementDetails.vue b/src/renderer/extensions/linearMode/ElementDetails.vue
new file mode 100644
index 0000000000..71ac231692
--- /dev/null
+++ b/src/renderer/extensions/linearMode/ElementDetails.vue
@@ -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>
diff --git a/src/views/LinearView.vue b/src/views/LinearView.vue
index 7a23bd02c9..2b65c38715 100644
--- a/src/views/LinearView.vue
+++ b/src/views/LinearView.vue
@@ -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"