wrap each video player around a div to maintain aspect-ratio

opencast · Jun 10, 2024 · a8301ed · a8301ed
1 parent a5eaccd
commit a8301ed
Showing 1 changed file with 29 additions and 18 deletions.
diff --git 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 (