Merge pull request #32 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

@@ -22,7 +22,6 @@ export const Playlists = ({
         flexDirection: "column",
         width: "100%",
         maxWidth: "25vw",
-        maxHeight: "70vh",
       }}
     >
       <CardContentContainerComment

src/components/common/VideoPlayer/VideoPlayer-styles.ts

@@ -11,16 +11,15 @@ export const VideoContainer = styled(Box)(({ theme }) => ({
   height: "100%",
   margin: 0,
   padding: 0,
-  maxHeight: "70vh",
+
   "&:focus": { outline: "none" },
 }));
 
-export const VideoElement = styled("video")`
-  width: 100%;
-  background: rgb(33, 33, 33);
-  max-height: 70vh;
-`;
-
+export const VideoElement = styled("video")(({ theme }) => ({
+  width: "100%",
+  background: "rgb(33, 33, 33)",
+}));
+//1075 x 604
 export const ControlsContainer = styled(Box)`
   position: absolute;
   display: flex;

src/components/common/VideoPlayer/VideoPlayer.tsx

@@ -36,6 +36,11 @@ import {
 import CSS from "csstype";
 import { setReduxPlaybackRate } from "../../../state/features/persistSlice.ts";
 
+export interface VideoStyles {
+  videoContainer?: CSS.Properties;
+  video?: CSS.Properties;
+  controls?: CSS.Properties;
+}
 interface VideoPlayerProps {
   src?: string;
   poster?: string;
@@ -44,7 +49,7 @@ interface VideoPlayerProps {
   service?: string;
   autoplay?: boolean;
   from?: string | null;
-  customStyle?: any;
+  videoStyles?: VideoStyles;
   user?: string;
   jsonId?: string;
   nextVideo?: any;
@@ -66,7 +71,7 @@ export const VideoPlayer = React.forwardRef<refType, VideoPlayerProps>(
       service,
       autoplay = true,
       from = null,
-      customStyle = {},
+      videoStyles = {},
       user = "",
       jsonId = "",
       nextVideo,
@@ -701,7 +706,7 @@ export const VideoPlayer = React.forwardRef<refType, VideoPlayerProps>(
         onKeyDown={keyboardShortcutsDown}
         style={{
           padding: from === "create" ? "8px" : 0,
-          ...customStyle,
+          ...videoStyles?.videoContainer,
         }}
         ref={containerRef}
       >
@@ -721,6 +726,7 @@ export const VideoPlayer = React.forwardRef<refType, VideoPlayerProps>(
               display: "flex",
               flexDirection: "column",
               gap: "10px",
+              height: "100%",
             }}
           >
             <CircularProgress color="secondary" />
@@ -818,11 +824,10 @@ export const VideoPlayer = React.forwardRef<refType, VideoPlayerProps>(
           style={
             startPlay
               ? {
-                  ...customStyle,
+                  ...videoStyles?.video,
                   objectFit: persistSelector.stretchVideoSetting,
-                  height: "calc(100% - 80px)",
                 }
-              : { ...customStyle, height: "100%" }
+              : { height: "100%", ...videoStyles }
           }
         />
 

src/components/layout/Navbar/Navbar-styles.tsx

@@ -14,26 +14,22 @@ export const CustomAppBar = styled(AppBar)(({ theme }) => ({
   borderBottom: `1px solid ${theme.palette.primary.light}`,
   backgroundColor: theme.palette.background.default,
   [theme.breakpoints.only("xs")]: {
-    gap: "15px"
+    gap: "15px",
   },
-  height: '55px'
+  height: "40px",
 }));
 export const LogoContainer = styled("div")({
-  cursor: 'pointer',
-  height: '100%',
-  display: 'flex',
-  alignItems: 'center'
+  cursor: "pointer",
+  height: "100%",
+  display: "flex",
+  alignItems: "center",
 });
 
-
-
-
 export const CustomTitle = styled(Typography)({
   fontWeight: 600,
-  color: "#000000"
+  color: "#000000",
 });
 
-
 export const AuthenticateButton = styled(Button)(({ theme }) => ({
   display: "flex",
   flexDirection: "row",
@@ -50,8 +46,8 @@ export const AuthenticateButton = styled(Button)(({ theme }) => ({
     cursor: "pointer",
     boxShadow: "rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;",
     backgroundColor: theme.palette.secondary.dark,
-    filter: "brightness(1.1)"
-  }
+    filter: "brightness(1.1)",
+  },
 }));
 
 export const AvatarContainer = styled(Box)({
@@ -61,9 +57,9 @@ export const AvatarContainer = styled(Box)({
     cursor: "pointer",
     "& #expand-icon": {
       transition: "all 0.3s ease-in-out",
-      filter: "brightness(0.7)"
-    }
-  }
+      filter: "brightness(0.7)",
+    },
+  },
 });
 
 export const DropdownContainer = styled(Box)(({ theme }) => ({
@@ -76,22 +72,22 @@ export const DropdownContainer = styled(Box)(({ theme }) => ({
   "&:hover": {
     cursor: "pointer",
     filter:
-      theme.palette.mode === "light" ? "brightness(0.95)" : "brightness(1.1)"
-  }
+      theme.palette.mode === "light" ? "brightness(0.95)" : "brightness(1.1)",
+  },
 }));
 
 export const DropdownText = styled(Typography)(({ theme }) => ({
   fontFamily: "Raleway",
   fontSize: "16px",
   color: theme.palette.text.primary,
-  userSelect: "none"
+  userSelect: "none",
 }));
 
 export const NavbarName = styled(Typography)(({ theme }) => ({
   fontFamily: "Raleway",
   fontSize: "18px",
   color: theme.palette.text.primary,
-  margin: "0 10px"
+  margin: "0 10px",
 }));
 
 export const ThemeSelectRow = styled(Box)({
@@ -99,7 +95,7 @@ export const ThemeSelectRow = styled(Box)({
   alignItems: "center",
   gap: "5px",
   flexBasis: 0,
-  height: '100%'
+  height: "100%",
 });
 
 export const LightModeIcon = styled(LightModeSVG)(({ theme }) => ({
@@ -109,8 +105,8 @@ export const LightModeIcon = styled(LightModeSVG)(({ theme }) => ({
     filter:
       theme.palette.mode === "dark"
         ? "drop-shadow(0px 4px 6px rgba(255, 255, 255, 0.6))"
-        : "drop-shadow(0px 4px 6px rgba(99, 88, 88, 0.1))"
-  }
+        : "drop-shadow(0px 4px 6px rgba(99, 88, 88, 0.1))",
+  },
 }));
 
 export const DarkModeIcon = styled(DarkModeSVG)(({ theme }) => ({
@@ -120,6 +116,6 @@ export const DarkModeIcon = styled(DarkModeSVG)(({ theme }) => ({
     filter:
       theme.palette.mode === "dark"
         ? "drop-shadow(0px 4px 6px rgba(255, 255, 255, 0.6))"
-        : "drop-shadow(0px 4px 6px rgba(99, 88, 88, 0.1))"
-  }
+        : "drop-shadow(0px 4px 6px rgba(99, 88, 88, 0.1))",
+  },
 }));

src/components/layout/Navbar/Navbar.tsx

@@ -374,15 +374,15 @@ const NavBar: React.FC<Props> = ({
               {!userAvatar ? (
                 <AccountCircleSVG
                   color={theme.palette.text.primary}
-                  width="32"
-                  height="32"
+                  width="30"
+                  height="30"
                 />
               ) : (
                 <img
                   src={userAvatar}
                   alt="User Avatar"
-                  width="32"
-                  height="32"
+                  width="30"
+                  height="30"
                   style={{
                     borderRadius: "50%",
                   }}
@@ -428,15 +428,15 @@ const NavBar: React.FC<Props> = ({
             {!userAvatar ? (
               <AccountCircleSVG
                 color={theme.palette.text.primary}
-                  width="32"
-                  height="32"
+                width="28"
+                height="28"
               />
             ) : (
               <img
                 src={userAvatar}
                 alt="User Avatar"
-                  width="32"
-                  height="32"
+                width="28"
+                height="28"
                 style={{
                   borderRadius: "50%",
                 }}

src/pages/ContentPages/PlaylistContent/PlaylistContent.tsx

@@ -12,6 +12,7 @@ import { Avatar, Box, Typography, useTheme } from "@mui/material";
 import {
   refType,
   VideoPlayer,
+  VideoStyles,
 } from "../../../components/common/VideoPlayer/VideoPlayer.tsx";
 import { RootState } from "../../../state/store.ts";
 import { addToHashMap } from "../../../state/features/videoSlice.ts";
@@ -199,6 +200,7 @@ export const PlaylistContent = () => {
         }
       }
     } catch (error) {
+      console.log(error);
     } finally {
       dispatch(setIsLoadingGlobal(false));
     }
@@ -261,7 +263,7 @@ export const PlaylistContent = () => {
                 const responseDataSearchVid = await response.json();
 
                 if (responseDataSearchVid?.length > 0) {
-                  let resourceData2 = responseDataSearchVid[0];
+                  const resourceData2 = responseDataSearchVid[0];
                   videos.push(resourceData2);
                 }
               }
@@ -282,6 +284,7 @@ export const PlaylistContent = () => {
           }
         }
       } catch (error) {
+        console.log(error);
       } finally {
         dispatch(setIsLoadingGlobal(false));
       }
@@ -387,7 +390,9 @@ export const PlaylistContent = () => {
                 },
               ];
             }
-          } catch (error) {}
+          } catch (error) {
+            console.log(error);
+          }
         }
       }
       setSuperlikelist(comments);
@@ -417,7 +422,7 @@ export const PlaylistContent = () => {
         display: "flex",
         alignItems: "center",
         flexDirection: "column",
-        padding: "20px 10px",
+        padding: "0px 10px",
       }}
       onClick={focusVideo}
     >
@@ -442,8 +447,9 @@ export const PlaylistContent = () => {
             <Box
               sx={{
                 display: "grid",
-                gridTemplateColumns: "70vw 30vw",
+                gridTemplateColumns: "55vw 30vw",
                 width: "100vw",
+                gap: "5vw",
               }}
             >
               {videoReference && (
@@ -457,7 +463,6 @@ export const PlaylistContent = () => {
                   nextVideo={nextVideo}
                   onEnd={onEndVideo}
                   autoPlay={doAutoPlay}
-                  customStyle={{ aspectRatio: "16/9" }}
                   ref={containerRef}
                 />
               )}
@@ -584,7 +589,7 @@ export const PlaylistContent = () => {
                 justifyContent: "space-between",
                 alignItems: "center",
                 width: "100%",
-                marginTop: "20px",
+                marginTop: "10px",
                 gap: "10px",
               }}
             >

src/pages/ContentPages/VideoContent/VideoContent.tsx

@@ -395,14 +395,13 @@ export const VideoContent = () => {
         display: "flex",
         alignItems: "center",
         flexDirection: "column",
-        padding: "20px 10px",
+        padding: "0px 10px",
       }}
       onClick={focusVideo}
     >
       <VideoPlayerContainer
         sx={{
-          marginBottom: "30px",
-          width: "70vw",
+          width: "55vw",
         }}
       >
         {videoReference ? (
@@ -413,7 +412,6 @@ export const VideoContent = () => {
             user={channelName}
             jsonId={id}
             poster={videoCover || ""}
-            customStyle={{ aspectRatio: "16/9" }}
             ref={containerRef}
           />
         ) : (