Merge pull request #33 from QortalSeth/main

Layout of VideoContent.tsx and PlaylistContent.tsx changed to maximize Video Player size while maintaining aspect ratio.

src/components/Playlists/Playlists.tsx

@@ -21,7 +21,7 @@ export const Playlists = ({
         display: "flex",
         flexDirection: "column",
         width: "100%",
-        maxWidth: "25vw",
+        maxHeight: "30.94vw",
       }}
     >
       <CardContentContainerComment

src/pages/ContentPages/PlaylistContent/PlaylistContent.tsx

@@ -447,12 +447,17 @@ export const PlaylistContent = () => {
             <Box
               sx={{
                 display: "grid",
-                gridTemplateColumns: "55vw 30vw",
+                gridTemplateColumns: "55vw 35vw",
                 width: "100vw",
-                gap: "5vw",
+                gap: "3vw",
               }}
             >
               {videoReference && (
+                <Box
+                  sx={{
+                    aspectRatio: "16/9",
+                  }}
+                >
                   <VideoPlayer
                     name={videoReference?.name}
                     service={videoReference?.service}
@@ -464,7 +469,12 @@ export const PlaylistContent = () => {
                     onEnd={onEndVideo}
                     autoPlay={doAutoPlay}
                     ref={containerRef}
+                    videoStyles={{
+                      videoContainer: { aspectRatio: "16 / 9" },
+                      video: { aspectRatio: "16 / 9" },
+                    }}
                   />
+                </Box>
               )}
               {playlistData && (
                 <Playlists

src/pages/ContentPages/VideoContent/VideoContent.tsx

@@ -402,9 +402,15 @@ export const VideoContent = () => {
       <VideoPlayerContainer
         sx={{
           width: "55vw",
+          aspectRatio: "16/9",
         }}
       >
         {videoReference ? (
+          <Box
+            sx={{
+              aspectRatio: "16/9",
+            }}
+          >
             <VideoPlayer
               name={videoReference?.name}
               service={videoReference?.service}
@@ -413,7 +419,12 @@ export const VideoContent = () => {
               jsonId={id}
               poster={videoCover || ""}
               ref={containerRef}
+              videoStyles={{
+                videoContainer: { aspectRatio: "16 / 9" },
+                video: { aspectRatio: "16 / 9" },
+              }}
             />
+          </Box>
         ) : (
           <img src={DeletedVideo} width={"100%"} height={"100%"} />
         )}