VideoPlayer Bugfixes

Videoplayer doesn't set fill ObjectFit when fullscreen.

Added ObjectFit button

Volume slider doesn't clip into video time label

Volume and Progress sliders have a smaller click range so they don't override other video buttons.

Usernames in the videolist component now show ellipses when they overflow

Hyperlink color throughout the app changed so they are easier to see

src/components/common/VideoPlayer/Components/MobileControlsBar.tsx

@@ -3,6 +3,7 @@ import { Box, IconButton, Menu, MenuItem } from "@mui/material";
 import { useVideoContext } from "./VideoContext.ts";
 import {
   FullscreenButton,
+  ObjectFitButton,
   PictureInPictureButton,
   PlaybackRate,
   PlayButton,
@@ -55,7 +56,10 @@ export const MobileControlsBar = () => {
       >
         <MenuItem>
           <VolumeButton />
-          <VolumeSlider />
+          <VolumeSlider width={"100%"} />
+        </MenuItem>
+        <MenuItem>
+          <ObjectFitButton />
         </MenuItem>
         <MenuItem>
           <PictureInPictureButton />

src/components/common/VideoPlayer/Components/VideoControls-State.ts

@@ -209,11 +209,11 @@ export const useVideoControlsState = (
     }
   };
 
-  const setStretchVideoSetting = (value: "contain" | "fill") => {
+  const setObjectFit = (value: "contain" | "fill") => {
     videoObjectFit.value = value;
   };
 
-  const toggleStretchVideoSetting = () => {
+  const toggleObjectFit = () => {
     videoObjectFit.value =
       videoObjectFit.value === "contain" ? "fill" : "contain";
   };
@@ -226,7 +226,7 @@ export const useVideoControlsState = (
 
     switch (e.key) {
       case "o":
-        toggleStretchVideoSetting();
+        toggleObjectFit();
         break;
 
       case Key.Add:
@@ -364,6 +364,7 @@ export const useVideoControlsState = (
     showControlsFullScreen,
     setPlaying,
     isFullscreen,
-    setStretchVideoSetting,
+    toggleObjectFit,
+    setObjectFit,
   };
 };

src/components/common/VideoPlayer/Components/VideoControls.tsx

@@ -3,6 +3,7 @@ import { fontSizeExSmall, fontSizeSmall } from "../../../../constants/Misc.ts";
 import { CustomFontTooltip } from "../../../../utils/CustomFontTooltip.tsx";
 import { formatTime } from "../../../../utils/numberFunctions.ts";
 import { useVideoContext } from "./VideoContext.ts";
+import AspectRatioIcon from "@mui/icons-material/AspectRatio";
 import {
   Fullscreen,
   Pause,
@@ -48,7 +49,6 @@ export const ReloadButton = () => {
 
 export const ProgressSlider = () => {
   const { progress, onProgressChange, videoRef } = useVideoContext();
-  const sliderThumbSize = "16px";
   return (
     <Slider
       value={progress.value}
@@ -65,9 +65,10 @@ export const ProgressSlider = () => {
 
         "& .MuiSlider-thumb": {
           backgroundColor: "#fff",
-          width: sliderThumbSize,
+          width: "16px",
-          height: sliderThumbSize,
+          height: "16px",
         },
+        "& .MuiSlider-thumb::after": { width: "20px", height: "20px" },
         "& .MuiSlider-rail": { opacity: 0.5 },
       }}
     />
@@ -112,6 +113,7 @@ export const VolumeButton = () => {
       <IconButton
         sx={{
           color: "white",
+          marginRight: "10px",
         }}
         onClick={toggleMute}
       >
@@ -121,7 +123,7 @@ export const VolumeButton = () => {
   );
 };
 
-export const VolumeSlider = () => {
+export const VolumeSlider = ({ width }: { width: string }) => {
   const { volume, onVolumeChange } = useVideoContext();
   return (
     <Slider
@@ -131,7 +133,9 @@ export const VolumeSlider = () => {
       max={1}
       step={0.01}
       sx={{
-        width: "100px",
+        width,
+        marginRight: "10px",
+        "& .MuiSlider-thumb::after": { width: "25px", height: "25px" },
       }}
     />
   );
@@ -183,6 +187,23 @@ export const PictureInPictureButton = () => {
   );
 };
 
+export const ObjectFitButton = () => {
+  const { toggleObjectFit } = useVideoContext();
+  return (
+    <CustomFontTooltip title="Toggle Aspect Ratio (O)" placement="top" arrow>
+      <IconButton
+        sx={{
+          color: "white",
+          paddingRight: "0px",
+        }}
+        onClick={() => toggleObjectFit()}
+      >
+        <AspectRatioIcon />
+      </IconButton>
+    </CustomFontTooltip>
+  );
+};
+
 export const FullscreenButton = () => {
   const { toggleFullscreen } = useVideoContext();
   return (

src/components/common/VideoPlayer/Components/VideoControlsBar.tsx

@@ -4,6 +4,7 @@ import { MobileControlsBar } from "./MobileControlsBar.tsx";
 import { useVideoContext } from "./VideoContext.ts";
 import {
   FullscreenButton,
+  ObjectFitButton,
   PictureInPictureButton,
   PlaybackRate,
   PlayButton,
@@ -46,12 +47,13 @@ export const VideoControlsBar = () => {
             <ProgressSlider />
 
             <VolumeButton />
-            <VolumeSlider />
+            <VolumeSlider width={"100px"} />
             <VideoTime />
           </Box>
 
           <Box sx={controlGroupSX}>
             <PlaybackRate />
+            <ObjectFitButton />
             <PictureInPictureButton />
             <FullscreenButton />
           </Box>

src/components/common/VideoPlayer/VideoPlayer.tsx

@@ -103,7 +103,7 @@ export const VideoPlayer = forwardRef<videoRefType, VideoPlayerProps>(
             preload="metadata"
             style={{
               ...videoStyles?.video,
-              objectFit: isFullscreen ? "fill" : videoObjectFit.value,
+              objectFit: videoObjectFit.value,
               height:
                 isFullscreen.value && showControlsFullScreen.value
                   ? "calc(100vh - 40px)"

src/index.css

@@ -67,7 +67,7 @@
   height: 100%;
 }
 
-
+a:link { color: #8AB4F8}
 
 .test-grid {
   display: grid;

src/pages/ContentPages/VideoContent/VideoContent.tsx

@@ -174,18 +174,17 @@ export const VideoContent = () => {
                 cursor: !descriptionHeight
                   ? "default"
                   : isExpandedDescription
-                  ? "default"
+                    ? "default"
-                  : "pointer",
+                    : "pointer",
                 position: "relative",
-
                 marginBottom: "30px",
               }}
               className={
                 !descriptionHeight
                   ? ""
                   : isExpandedDescription
-                  ? ""
+                    ? ""
-                  : "hover-click"
+                    : "hover-click"
               }
             >
               {descriptionHeight && !isExpandedDescription && (
@@ -210,8 +209,8 @@ export const VideoContent = () => {
                   height: !descriptionHeight
                     ? "auto"
                     : isExpandedDescription
-                    ? "auto"
+                      ? "auto"
-                    : "200px",
+                      : "200px",
                   overflow: "hidden",
                 }}
               >

src/pages/Home/Components/VideoList-styles.tsx

@@ -110,6 +110,7 @@ export const NameContainer = styled(Box)(({ theme }) => ({
   alignItems: "center",
   gap: "10px",
   marginBottom: "2px",
+  width: "100%",
 }));
 
 export const VideoManagerRow = styled(Box)(({ theme }) => ({

src/styles/theme.tsx

@@ -11,38 +11,38 @@ const commonThemeOptions = {
       "Oxygen",
       "Catamaran",
       "Cairo",
-      "Arial"
+      "Arial",
     ].join(","),
     h1: {
       fontSize: "2rem",
-      fontWeight: 600
+      fontWeight: 600,
     },
     h2: {
       fontSize: "1.75rem",
-      fontWeight: 500
+      fontWeight: 500,
     },
     h3: {
       fontSize: "1.5rem",
-      fontWeight: 500
+      fontWeight: 500,
     },
     h4: {
       fontSize: "1.25rem",
-      fontWeight: 500
+      fontWeight: 500,
     },
     h5: {
       fontSize: "1rem",
-      fontWeight: 500
+      fontWeight: 500,
     },
     h6: {
       fontSize: "0.875rem",
-      fontWeight: 500
+      fontWeight: 500,
     },
     body1: {
       fontSize: "23px",
       fontFamily: "Raleway",
       fontWeight: 400,
       lineHeight: 1.5,
-      letterSpacing: "0.5px"
+      letterSpacing: "0.5px",
     },
 
     body2: {
@@ -50,12 +50,12 @@ const commonThemeOptions = {
       fontFamily: "Raleway, Arial",
       fontWeight: 400,
       lineHeight: 1.4,
-      letterSpacing: "0.2px"
+      letterSpacing: "0.2px",
-    }
+    },
   },
   spacing: 8,
   shape: {
-    borderRadius: 4
+    borderRadius: 4,
   },
   breakpoints: {
     values: {
@@ -63,8 +63,8 @@ const commonThemeOptions = {
       sm: 600,
       md: 900,
       lg: 1200,
-      xl: 1536
+      xl: 1536,
-    }
+    },
   },
   components: {
     MuiButton: {
@@ -73,16 +73,16 @@ const commonThemeOptions = {
           backgroundColor: "inherit",
           transition: "filter 0.3s ease-in-out",
           "&:hover": {
-            filter: "brightness(1.1)"
+            filter: "brightness(1.1)",
-          }
+          },
-        }
+        },
       },
       defaultProps: {
         disableElevation: true,
-        disableRipple: true
+        disableRipple: true,
-      }
+      },
-    }
+    },
-  }
+  },
 };
 
 const lightTheme = createTheme({
@@ -92,21 +92,22 @@ const lightTheme = createTheme({
     primary: {
       main: "#ffffff",
       dark: "#F5F5F5",
-      light: "#FCFCFC"
+      light: "#FCFCFC",
     },
     secondary: {
       main: "#417Ed4",
-      dark: "#3e74c1"
+      dark: "#3e74c1",
     },
     background: {
       default: "#fcfcfc",
-      paper: "#F5F5F5"
+      paper: "#F5F5F5",
     },
     text: {
       primary: "#000000",
-      secondary: "#525252"
+      secondary: "#525252",
-    }
+    },
   },
+
   components: {
     MuiCard: {
       styleOverrides: {
@@ -118,19 +119,19 @@ const lightTheme = createTheme({
           "&:hover": {
             cursor: "pointer",
             boxShadow:
-              "rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;"
+              "rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;",
-          }
+          },
-        }
+        },
-      }
+      },
     },
     MuiIcon: {
       defaultProps: {
         style: {
-          color: "#000000"
+          color: "#000000",
-        }
+        },
-      }
+      },
-    }
+    },
-  }
+  },
 });
 
 const darkTheme = createTheme({
@@ -140,22 +141,22 @@ const darkTheme = createTheme({
     primary: {
       main: "#2e3d60",
       dark: "#1a2744",
-      light: "#353535"
+      light: "#353535",
     },
     secondary: {
       main: "#417Ed4",
-      dark: "#3e74c1"
+      dark: "#3e74c1",
     },
-
     background: {
       default: "#111111",
-      paper: "#1A1C1E"
+      paper: "#1A1C1E",
     },
     text: {
       primary: "#ffffff",
-      secondary: "#b3b3b3"
+      secondary: "#b3b3b3",
-    }
+    },
   },
+
   components: {
     MuiCard: {
       styleOverrides: {
@@ -166,19 +167,19 @@ const darkTheme = createTheme({
           "&:hover": {
             cursor: "pointer",
             boxShadow:
-              " 0px 3px 4px 0px hsla(0,0%,0%,0.14), 0px 3px 3px -2px hsla(0,0%,0%,0.12), 0px 1px 8px 0px hsla(0,0%,0%,0.2);"
+              " 0px 3px 4px 0px hsla(0,0%,0%,0.14), 0px 3px 3px -2px hsla(0,0%,0%,0.12), 0px 1px 8px 0px hsla(0,0%,0%,0.2);",
-          }
+          },
-        }
+        },
-      }
+      },
     },
     MuiIcon: {
       defaultProps: {
         style: {
-          color: "#ffffff"
+          color: "#ffffff",
-        }
+        },
-      }
+      },
-    }
+    },
-  }
+  },
 });
 
 export { lightTheme, darkTheme };