From b0c9db2d7df0d602422a46bc40f571ef311dd95d Mon Sep 17 00:00:00 2001
From: arabcoders <admin@arabcoders.org>
Date: Wed, 12 Nov 2025 18:48:33 +0300
Subject: [PATCH] Refactor: update video player to account for video height and
 width

---
 ui/app/components/VideoPlayer.vue | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/ui/app/components/VideoPlayer.vue b/ui/app/components/VideoPlayer.vue
index 83289f59..9b893e5b 100644
--- a/ui/app/components/VideoPlayer.vue
+++ b/ui/app/components/VideoPlayer.vue
@@ -84,8 +84,8 @@
 <template>
   <div v-if="infoLoaded">
     <div style="position: relative;">
-      <video class="player" ref="video" :poster="uri(thumbnail)" playsinline controls crossorigin="anonymous"
-        preload="auto" autoplay>
+      <video class="player" ref="video" :poster="uri(thumbnail)" :width="videoWidth" :height="videoHeight"
+        playsinline controls crossorigin="anonymous" preload="auto" autoplay>
         <source v-for="source in sources" :key="source.src" :src="source.src" @error="source.onerror"
           :type="source.type" />
         <track v-for="(track, i) in tracks" :key="track.file" :kind="track.kind" :label="track.label"
@@ -275,6 +275,8 @@ const artist = ref('')
 const title = ref('')
 const isAudio = ref(false)
 const hasVideoStream = ref(false)
+const videoWidth = ref<number | undefined>(undefined)
+const videoHeight = ref<number | undefined>(undefined)
 const volume = useStorage('player_volume', 1)
 const notFirefox = !navigator.userAgent.toLowerCase().includes('firefox')
 const infoLoaded = ref(false)
@@ -504,6 +506,15 @@ onMounted(async () => {
   hasVideoStream.value = Array.isArray(response.ffprobe?.video)
     && response.ffprobe.video.some(s => 'video' === s.codec_type)
 
+  // Extract video dimensions to prevent layout reflow
+  if (hasVideoStream.value && response.ffprobe?.video) {
+    const videoStream = response.ffprobe.video.find(s => 'video' === s.codec_type)
+    if (videoStream?.width && videoStream?.height) {
+      videoWidth.value = videoStream.width
+      videoHeight.value = videoStream.height
+    }
+  }
+
   if (!props.item.extras?.is_video && props.item.extras?.is_audio) {
     isAudio.value = true
   } else {