Merge pull request #1383 from elan-ev/eth-issue-316

Fix aspect ratio video box size in Safari
opencast · Jun 13, 2024 · f9e0258 · f9e0258
2 parents 44afe77 + 9374306
commit f9e0258
Showing 1 changed file with 38 additions and 18 deletions.
diff --git a/src/main/VideoPlayers.tsx b/src/main/VideoPlayers.tsx
@@ -399,27 +399,47 @@ export const VideoPlayer = React.forwardRef<VideoPlayerForwardRef, VideoPlayerPr
       ...(last) && { borderBottomRightRadius: "5px" },
     });
 
+    const videoPlayerWrapperStyles = css({
+      height: "100%",
+      width: "100%",
+      display: "flex",
+
+      // 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, fit content and center!
+      ...(!first && !last) && { justifyContent: "center", flexBasis: "fit-content" },
+    });
+
     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 (