From fc55fa9005712cf6abdfa4ac7f9ec96e74448193 Mon Sep 17 00:00:00 2001
From: Austin Mroz <austin@comfy.org>
Date: Wed, 7 Jan 2026 12:17:40 -0800
Subject: [PATCH] More reliable dimension tracking

---
 .../extensions/linearMode/ElementDetails.vue  |  8 ------
 .../extensions/linearMode/ImagePreview.vue    | 26 +++++++++++-------
 .../extensions/linearMode/VideoPreview.vue    | 27 +++++++++++++++++++
 src/views/LinearView.vue                      | 21 +++++----------
 4 files changed, 49 insertions(+), 33 deletions(-)
 delete mode 100644 src/renderer/extensions/linearMode/ElementDetails.vue
 create mode 100644 src/renderer/extensions/linearMode/VideoPreview.vue

diff --git a/src/renderer/extensions/linearMode/ElementDetails.vue b/src/renderer/extensions/linearMode/ElementDetails.vue
deleted file mode 100644
index 71ac23169..000000000
--- a/src/renderer/extensions/linearMode/ElementDetails.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<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/renderer/extensions/linearMode/ImagePreview.vue b/src/renderer/extensions/linearMode/ImagePreview.vue
index 23d6c7c15..c9d8651f8 100644
--- a/src/renderer/extensions/linearMode/ImagePreview.vue
+++ b/src/renderer/extensions/linearMode/ImagePreview.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useTemplateRef } from 'vue'
+import { ref, useTemplateRef } from 'vue'
 
 import ZoomPane from '@/components/ui/ZoomPane.vue'
 
@@ -8,17 +8,23 @@ const { src } = defineProps<{
 }>()
 
 const imageRef = useTemplateRef('imageRef')
+const width = ref('')
+const height = ref('')
 </script>
 <template>
   <ZoomPane v-slot="slotProps" class="flex-1 w-full">
-    <img ref="imageRef" :src v-bind="slotProps" />
+    <img
+      ref="imageRef"
+      :src
+      v-bind="slotProps"
+      @load="
+        () => {
+          if (!imageRef) return
+          width = `${imageRef.naturalWidth}`
+          height = `${imageRef.naturalHeight}`
+        }
+      "
+    />
   </ZoomPane>
-  <span
-    class="self-center z-10"
-    v-text="
-      imageRef?.naturalWidth && imageRef?.naturalHeight
-        ? `${imageRef.naturalWidth} x ${imageRef.naturalHeight}`
-        : ''
-    "
-  />
+  <span class="self-center z-10" v-text="`${width} x ${height}`" />
 </template>
diff --git a/src/renderer/extensions/linearMode/VideoPreview.vue b/src/renderer/extensions/linearMode/VideoPreview.vue
new file mode 100644
index 000000000..57504fc25
--- /dev/null
+++ b/src/renderer/extensions/linearMode/VideoPreview.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { ref, useTemplateRef } from 'vue'
+
+const { src } = defineProps<{
+  src: string
+}>()
+
+const videoRef = useTemplateRef('videoRef')
+const width = ref('')
+const height = ref('')
+</script>
+<template>
+  <video
+    ref="videoRef"
+    :src
+    controls
+    v-bind="$attrs"
+    @loadedmetadata="
+      () => {
+        if (!videoRef) return
+        width = `${videoRef.videoWidth}`
+        height = `${videoRef.videoHeight}`
+      }
+    "
+  />
+  <span class="self-center z-10" v-text="`${width} x ${height}`" />
+</template>
diff --git a/src/views/LinearView.vue b/src/views/LinearView.vue
index c18cc1efc..1b3c46b1c 100644
--- a/src/views/LinearView.vue
+++ b/src/views/LinearView.vue
@@ -36,8 +36,8 @@ import { useTelemetry } from '@/platform/telemetry'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 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 VideoPreview from '@/renderer/extensions/linearMode/VideoPreview.vue'
 import NodeWidgets from '@/renderer/extensions/vueNodes/components/NodeWidgets.vue'
 import WidgetInputNumberInput from '@/renderer/extensions/vueNodes/widgets/components/WidgetInputNumber.vue'
 import { app } from '@/scripts/app'
@@ -586,20 +586,11 @@ function downloadAsset(item: AssetItem) {
           : 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>
+    <VideoPreview
+      v-else-if="getMediaType(preview) === 'video'"
+      :src="preview.url"
+      class="object-contain flex-1 contain-size"
+    />
     <audio
       v-else-if="getMediaType(preview) === 'audio'"
       class="w-full m-auto"