More reliable dimension tracking

src/renderer/extensions/linearMode/ElementDetails.vue

@@ -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>

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>

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>

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"