From 8dd2f5a9835113515ad70e3b9b8ac14b2c82477d Mon Sep 17 00:00:00 2001
From: lorretheboy <lorretheboy@outlook.com>
Date: Wed, 8 Oct 2025 00:17:19 +0800
Subject: [PATCH 1/5] fix: thumbnail for video attachment

---
 src/components/VideoPlayerPreview/index.tsx | 25 +++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/src/components/VideoPlayerPreview/index.tsx b/src/components/VideoPlayerPreview/index.tsx
index 5edb2977ce2..8679d076be1 100644
--- a/src/components/VideoPlayerPreview/index.tsx
+++ b/src/components/VideoPlayerPreview/index.tsx
@@ -13,7 +13,9 @@ import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useThumbnailDimensions from '@hooks/useThumbnailDimensions';
+import getPlatform from '@libs/getPlatform';
 import Navigation from '@navigation/Navigation';
+import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import VideoPlayerThumbnail from './VideoPlayerThumbnail';
 
@@ -65,6 +67,29 @@ function VideoPlayerPreview({videoUrl, thumbnailUrl, reportID, fileName, videoDi
     const isOnSearch = useIsOnSearch();
     const navigation = useNavigation();
 
+    useEffect(() => {
+        if (typeof videoUrl !== 'string' || !videoUrl || getPlatform() !== CONST.PLATFORM.WEB) {
+            return;
+        }
+
+        const video = document.createElement('video');
+        video.onloadedmetadata = () => {
+            if (video.videoWidth === measuredDimensions.width && video.videoHeight === measuredDimensions.height) {
+                return;
+            }
+            setMeasuredDimensions({
+                width: video.videoWidth,
+                height: video.videoHeight,
+            });
+        };
+        video.src = videoUrl;
+        video.load();
+
+        return () => {
+            video.src = '';
+        };
+    }, [videoUrl, measuredDimensions.width, measuredDimensions.height]);
+
     // We want to play the video only when the user is on the page where it was initially rendered
     const doesUserRemainOnFirstRenderRoute = useCheckIfRouteHasRemainedUnchanged(videoUrl);
 

From b59c8c55bdc22f095a0213ce767812ea7da0c552 Mon Sep 17 00:00:00 2001
From: lorretheboy <lorretheboy@outlook.com>
Date: Wed, 8 Oct 2025 00:53:21 +0800
Subject: [PATCH 2/5] fix: add desktop

---
 src/components/VideoPlayerPreview/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/VideoPlayerPreview/index.tsx b/src/components/VideoPlayerPreview/index.tsx
index 8679d076be1..1fc14cc5c02 100644
--- a/src/components/VideoPlayerPreview/index.tsx
+++ b/src/components/VideoPlayerPreview/index.tsx
@@ -68,7 +68,7 @@ function VideoPlayerPreview({videoUrl, thumbnailUrl, reportID, fileName, videoDi
     const navigation = useNavigation();
 
     useEffect(() => {
-        if (typeof videoUrl !== 'string' || !videoUrl || getPlatform() !== CONST.PLATFORM.WEB) {
+        if (typeof videoUrl !== 'string' || !videoUrl || (getPlatform() !== CONST.PLATFORM.WEB && getPlatform() !== CONST.PLATFORM.DESKTOP)) {
             return;
         }
 

From 1333dc9d6d3e1a6ddb18ff9d37c967cb7c4bac09 Mon Sep 17 00:00:00 2001
From: lorretheboy <lorretheboy@outlook.com>
Date: Thu, 9 Oct 2025 00:00:28 +0800
Subject: [PATCH 3/5] fix: native

---
 src/components/VideoPlayerPreview/index.tsx | 39 ++++++++++-----------
 1 file changed, 19 insertions(+), 20 deletions(-)

diff --git a/src/components/VideoPlayerPreview/index.tsx b/src/components/VideoPlayerPreview/index.tsx
index 1fc14cc5c02..4c79b55bf4a 100644
--- a/src/components/VideoPlayerPreview/index.tsx
+++ b/src/components/VideoPlayerPreview/index.tsx
@@ -68,27 +68,26 @@ function VideoPlayerPreview({videoUrl, thumbnailUrl, reportID, fileName, videoDi
     const navigation = useNavigation();
 
     useEffect(() => {
-        if (typeof videoUrl !== 'string' || !videoUrl || (getPlatform() !== CONST.PLATFORM.WEB && getPlatform() !== CONST.PLATFORM.DESKTOP)) {
-            return;
+        if (videoUrl && (getPlatform() === CONST.PLATFORM.WEB || getPlatform() === CONST.PLATFORM.DESKTOP)) {
+            const video = document.createElement('video');
+            video.onloadedmetadata = () => {
+                if (video.videoWidth === measuredDimensions.width && video.videoHeight === measuredDimensions.height) {
+                    return;
+                }
+                setMeasuredDimensions({
+                    width: video.videoWidth,
+                    height: video.videoHeight,
+                });
+            };
+            video.src = videoUrl;
+            video.load();
+
+            return () => {
+                video.src = '';
+            };
         }
-
-        const video = document.createElement('video');
-        video.onloadedmetadata = () => {
-            if (video.videoWidth === measuredDimensions.width && video.videoHeight === measuredDimensions.height) {
-                return;
-            }
-            setMeasuredDimensions({
-                width: video.videoWidth,
-                height: video.videoHeight,
-            });
-        };
-        video.src = videoUrl;
-        video.load();
-
-        return () => {
-            video.src = '';
-        };
-    }, [videoUrl, measuredDimensions.width, measuredDimensions.height]);
+        setMeasuredDimensions(videoDimensions);
+    }, [videoUrl, measuredDimensions.width, measuredDimensions.height, videoDimensions]);
 
     // We want to play the video only when the user is on the page where it was initially rendered
     const doesUserRemainOnFirstRenderRoute = useCheckIfRouteHasRemainedUnchanged(videoUrl);

From 1c26217fc04e72c79ba75e30c87ab53eb7a1848f Mon Sep 17 00:00:00 2001
From: lorretheboy <lorretheboy@outlook.com>
Date: Thu, 9 Oct 2025 00:03:07 +0800
Subject: [PATCH 4/5] fix: native

---
 src/components/VideoPlayerPreview/index.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/VideoPlayerPreview/index.tsx b/src/components/VideoPlayerPreview/index.tsx
index 4c79b55bf4a..b1700eaa0bf 100644
--- a/src/components/VideoPlayerPreview/index.tsx
+++ b/src/components/VideoPlayerPreview/index.tsx
@@ -68,7 +68,8 @@ function VideoPlayerPreview({videoUrl, thumbnailUrl, reportID, fileName, videoDi
     const navigation = useNavigation();
 
     useEffect(() => {
-        if (videoUrl && (getPlatform() === CONST.PLATFORM.WEB || getPlatform() === CONST.PLATFORM.DESKTOP)) {
+        const platform = getPlatform();
+        if (videoUrl && (platform === CONST.PLATFORM.WEB || platform === CONST.PLATFORM.DESKTOP)) {
             const video = document.createElement('video');
             video.onloadedmetadata = () => {
                 if (video.videoWidth === measuredDimensions.width && video.videoHeight === measuredDimensions.height) {

From e24c9c4046e1102919b2317b362b80d21e4f4353 Mon Sep 17 00:00:00 2001
From: lorretheboy <lorretheboy@outlook.com>
Date: Fri, 10 Oct 2025 02:23:28 +0800
Subject: [PATCH 5/5] chore: add code comment

---
 src/components/VideoPlayerPreview/index.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/VideoPlayerPreview/index.tsx b/src/components/VideoPlayerPreview/index.tsx
index b1700eaa0bf..6c6bd194d3e 100644
--- a/src/components/VideoPlayerPreview/index.tsx
+++ b/src/components/VideoPlayerPreview/index.tsx
@@ -69,6 +69,9 @@ function VideoPlayerPreview({videoUrl, thumbnailUrl, reportID, fileName, videoDi
 
     useEffect(() => {
         const platform = getPlatform();
+        // On web and desktop platforms, we can use the DOM video element to get accurate video dimensions
+        // by loading the video metadata. On mobile platforms, we rely on the provided videoDimensions
+        // since document.createElement is not available in React Native environments.
         if (videoUrl && (platform === CONST.PLATFORM.WEB || platform === CONST.PLATFORM.DESKTOP)) {
             const video = document.createElement('video');
             video.onloadedmetadata = () => {