From a0e8ce6cbf0d2ded7b0798002d394aa91081d4a9 Mon Sep 17 00:00:00 2001
From: IrohDW <randomprogrammer@protonmail.com>
Date: Wed, 31 Jul 2024 14:18:26 -0600
Subject: [PATCH] Layout of VideoContent.tsx and PlaylistContent.tsx changed to
 maximize Video Player size while maintaining aspect ratio.

Forced aspect ratio of videos to 16 / 9
---
 src/components/Playlists/Playlists.tsx        |  2 +-
 .../PlaylistContent/PlaylistContent.tsx       | 38 ++++++++++++-------
 .../VideoContent/VideoContent.tsx             | 29 +++++++++-----
 3 files changed, 45 insertions(+), 24 deletions(-)

diff --git a/src/components/Playlists/Playlists.tsx b/src/components/Playlists/Playlists.tsx
index 71e924f..0bf6ddc 100644
--- a/src/components/Playlists/Playlists.tsx
+++ b/src/components/Playlists/Playlists.tsx
@@ -21,7 +21,7 @@ export const Playlists = ({
         display: "flex",
         flexDirection: "column",
         width: "100%",
-        maxWidth: "25vw",
+        maxHeight: "30.94vw",
       }}
     >
       <CardContentContainerComment
diff --git a/src/pages/ContentPages/PlaylistContent/PlaylistContent.tsx b/src/pages/ContentPages/PlaylistContent/PlaylistContent.tsx
index 2d0c1de..401b650 100644
--- a/src/pages/ContentPages/PlaylistContent/PlaylistContent.tsx
+++ b/src/pages/ContentPages/PlaylistContent/PlaylistContent.tsx
@@ -447,24 +447,34 @@ export const PlaylistContent = () => {
             <Box
               sx={{
                 display: "grid",
-                gridTemplateColumns: "55vw 30vw",
+                gridTemplateColumns: "55vw 35vw",
                 width: "100vw",
-                gap: "5vw",
+                gap: "3vw",
               }}
             >
               {videoReference && (
-                <VideoPlayer
-                  name={videoReference?.name}
-                  service={videoReference?.service}
-                  identifier={videoReference?.identifier}
-                  user={channelName}
-                  jsonId={id}
-                  poster={videoCover || ""}
-                  nextVideo={nextVideo}
-                  onEnd={onEndVideo}
-                  autoPlay={doAutoPlay}
-                  ref={containerRef}
-                />
+                <Box
+                  sx={{
+                    aspectRatio: "16/9",
+                  }}
+                >
+                  <VideoPlayer
+                    name={videoReference?.name}
+                    service={videoReference?.service}
+                    identifier={videoReference?.identifier}
+                    user={channelName}
+                    jsonId={id}
+                    poster={videoCover || ""}
+                    nextVideo={nextVideo}
+                    onEnd={onEndVideo}
+                    autoPlay={doAutoPlay}
+                    ref={containerRef}
+                    videoStyles={{
+                      videoContainer: { aspectRatio: "16 / 9" },
+                      video: { aspectRatio: "16 / 9" },
+                    }}
+                  />
+                </Box>
               )}
               {playlistData && (
                 <Playlists
diff --git a/src/pages/ContentPages/VideoContent/VideoContent.tsx b/src/pages/ContentPages/VideoContent/VideoContent.tsx
index d7289af..60d1947 100644
--- a/src/pages/ContentPages/VideoContent/VideoContent.tsx
+++ b/src/pages/ContentPages/VideoContent/VideoContent.tsx
@@ -402,18 +402,29 @@ export const VideoContent = () => {
       <VideoPlayerContainer
         sx={{
           width: "55vw",
+          aspectRatio: "16/9",
         }}
       >
         {videoReference ? (
-          <VideoPlayer
-            name={videoReference?.name}
-            service={videoReference?.service}
-            identifier={videoReference?.identifier}
-            user={channelName}
-            jsonId={id}
-            poster={videoCover || ""}
-            ref={containerRef}
-          />
+          <Box
+            sx={{
+              aspectRatio: "16/9",
+            }}
+          >
+            <VideoPlayer
+              name={videoReference?.name}
+              service={videoReference?.service}
+              identifier={videoReference?.identifier}
+              user={channelName}
+              jsonId={id}
+              poster={videoCover || ""}
+              ref={containerRef}
+              videoStyles={{
+                videoContainer: { aspectRatio: "16 / 9" },
+                video: { aspectRatio: "16 / 9" },
+              }}
+            />
+          </Box>
         ) : (
           <img src={DeletedVideo} width={"100%"} height={"100%"} />
         )}