From a8301ed235bf484d4e992f35ccf4b230adc38943 Mon Sep 17 00:00:00 2001
From: ferishili <zamanifarbod2@gmail.com>
Date: Mon, 10 Jun 2024 10:35:11 +0200
Subject: [PATCH 1/3] wrap each video player around a div to maintain
 aspect-ratio

---
 src/main/VideoPlayers.tsx | 47 ++++++++++++++++++++++++---------------
 1 file changed, 29 insertions(+), 18 deletions(-)

diff --git a/src/main/VideoPlayers.tsx b/src/main/VideoPlayers.tsx
index 0eb23d6e8..bc047dcdc 100644
--- a/src/main/VideoPlayers.tsx
+++ b/src/main/VideoPlayers.tsx
@@ -399,27 +399,38 @@ export const VideoPlayer = React.forwardRef<VideoPlayerForwardRef, VideoPlayerPr
       ...(last) && { borderBottomRightRadius: "5px" },
     });
 
+    const videoPlayerWrapperStyles = css({
+      height: "100%",
+      width: "100%",
+      display: "flex",
+      ...(first && first != last) && { justifyContent: "end" },
+      ...(last && first != last) && { justifyContent: "start" },
+      ...(first == last) && { justifyContent: "center" },
+    });
+
     const render = () => {
       if (!errorState) {
         return (
-          <ReactPlayer url={url}
-            css={[backgroundBoxStyle(theme), reactPlayerStyle]}
-            ref={ref}
-            width="unset"
-            height="unset"
-            playing={isPlaying}
-            volume={volume}
-            muted={!isPrimary || isMuted}
-            onProgress={onProgressCallback}
-            progressInterval={100}
-            onReady={onReadyCallback}
-            onPlay={onPlay}
-            onEnded={onEndedCallback}
-            onError={onErrorCallback}
-            tabIndex={-1}
-            config={playerConfig}
-            disablePictureInPicture
-          />
+          <div css={videoPlayerWrapperStyles}>
+            <ReactPlayer url={url}
+              css={[backgroundBoxStyle(theme), reactPlayerStyle]}
+              ref={ref}
+              width="unset"
+              height="100%"
+              playing={isPlaying}
+              volume={volume}
+              muted={!isPrimary || isMuted}
+              onProgress={onProgressCallback}
+              progressInterval={100}
+              onReady={onReadyCallback}
+              onPlay={onPlay}
+              onEnded={onEndedCallback}
+              onError={onErrorCallback}
+              tabIndex={-1}
+              config={playerConfig}
+              disablePictureInPicture
+            />
+          </div>
         );
       } else {
         return (

From e7ac911976bd6e30ecb85519937ceb08163656ca Mon Sep 17 00:00:00 2001
From: ferishili <zamanifarbod2@gmail.com>
Date: Mon, 10 Jun 2024 13:01:39 +0200
Subject: [PATCH 2/3] multi videos grouping

---
 src/main/VideoPlayers.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/main/VideoPlayers.tsx b/src/main/VideoPlayers.tsx
index bc047dcdc..b7fb05d2a 100644
--- a/src/main/VideoPlayers.tsx
+++ b/src/main/VideoPlayers.tsx
@@ -403,9 +403,18 @@ export const VideoPlayer = React.forwardRef<VideoPlayerForwardRef, VideoPlayerPr
       height: "100%",
       width: "100%",
       display: "flex",
-      ...(first && first != last) && { justifyContent: "end" },
-      ...(last && first != last) && { justifyContent: "start" },
-      ...(first == last) && { justifyContent: "center" },
+
+      // For single video, center!
+      ...(first && last) && { justifyContent: "center" },
+
+      // For multi videos, first from right side, sitting on end
+      ...(first && !last) && { justifyContent: "end" },
+
+      // For multi videos, last from right side, sitting on start
+      ...(last && !first) && { justifyContent: "start" },
+
+      // For multi videos, in between, occupy only the content!
+      ...(!first && !last) && { justifyContent: "center", flexBasis: "fit-content" },
     });
 
     const render = () => {

From 9374306ddaa5d3cca71ec52b401ccc4a227d32ad Mon Sep 17 00:00:00 2001
From: ferishili <zamanifarbod2@gmail.com>
Date: Mon, 10 Jun 2024 13:08:14 +0200
Subject: [PATCH 3/3] adjust comments

---
 src/main/VideoPlayers.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main/VideoPlayers.tsx b/src/main/VideoPlayers.tsx
index b7fb05d2a..5535e254d 100644
--- a/src/main/VideoPlayers.tsx
+++ b/src/main/VideoPlayers.tsx
@@ -413,7 +413,7 @@ export const VideoPlayer = React.forwardRef<VideoPlayerForwardRef, VideoPlayerPr
       // For multi videos, last from right side, sitting on start
       ...(last && !first) && { justifyContent: "start" },
 
-      // For multi videos, in between, occupy only the content!
+      // For multi videos, in between, fit content and center!
       ...(!first && !last) && { justifyContent: "center", flexBasis: "fit-content" },
     });