From ffee55325b739f8f0f9fb8e18436a722a2dee783 Mon Sep 17 00:00:00 2001
From: Misir Jafarov <misir.ceferov@gmail.com>
Date: Sun, 24 Dec 2023 01:42:37 +0400
Subject: [PATCH] Use loadeddata event to fix aspect ratio

---
 client/components/videoplayer/VideoPlayer.vue |  1 +
 client/utils/videoplayer/helpers/index.ts     | 16 +++++++++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/client/components/videoplayer/VideoPlayer.vue b/client/components/videoplayer/VideoPlayer.vue
index f6fe64b2a..dc2358146 100644
--- a/client/components/videoplayer/VideoPlayer.vue
+++ b/client/components/videoplayer/VideoPlayer.vue
@@ -40,6 +40,7 @@
         @timeupdate="onPlaybackProgress"
         @progress="onLoadingProgress"
         @loadedmetadata="onLoadedMetadata"
+        @loadeddata="onLoadedData"
         @ratechange="onSpeedChanged"
       />
     </div>
diff --git a/client/utils/videoplayer/helpers/index.ts b/client/utils/videoplayer/helpers/index.ts
index 283e8d252..7a8f6ae2f 100644
--- a/client/utils/videoplayer/helpers/index.ts
+++ b/client/utils/videoplayer/helpers/index.ts
@@ -60,6 +60,7 @@ export const videoPlayerSetup = (
     loadingPercentage: 0,
     firstTimeBuffering: true,
     aspectRatio: 16 / 9,
+    deferredAspectRatio: false,
     playerVolume: 1,
     zoomed: false,
     duration: 0
@@ -316,8 +317,20 @@ export const videoPlayerSetup = (
     }
   };
 
+  const onLoadedData = (e: any) => {
+    const aspectRatio = e.target.videoHeight / e.target.videoWidth;
+    if (videoElement.deferredAspectRatio && aspectRatio) {
+      videoElement.aspectRatio = aspectRatio;
+    }
+  };
+
   const onLoadedMetadata = async (e: any) => {
-    videoElement.aspectRatio = e.target.videoHeight / e.target.videoWidth;
+    const aspectRatio = e.target.videoHeight / e.target.videoWidth;
+    if (aspectRatio) {
+      videoElement.aspectRatio = aspectRatio;
+    }
+    videoElement.deferredAspectRatio = !aspectRatio;
+
     if (videoRef.value) {
       videoElement.playerVolume = playerVolumeStore.playerVolume;
       if (videoElement.firstTimeBuffering) {
@@ -1015,6 +1028,7 @@ export const videoPlayerSetup = (
     selectedAudioQuality,
     renderedVideoQuality,
     getChapterForPercentage,
+    onLoadedData,
     onLoadedMetadata,
     onPlaybackProgress,
     onLoadingProgress,