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
Qortal · Jan 2, 2025 · d4f5c7a · d4f5c7a
1 parent 1cfdb7a
commit d4f5c7a
Show file tree

Hide file tree

Showing 9 changed files with 98 additions and 69 deletions.
diff --git a/src/components/common/VideoPlayer/Components/MobileControlsBar.tsx b/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 />

diff --git a/src/components/common/VideoPlayer/Components/VideoControls-State.ts b/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,
   };
 };
diff --git a/src/components/common/VideoPlayer/Components/VideoControls.tsx b/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,
-          height: sliderThumbSize,
+          width: "16px",
+          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 (

diff --git a/src/components/common/VideoPlayer/Components/VideoControlsBar.tsx b/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>

diff --git a/src/components/common/VideoPlayer/VideoPlayer.tsx b/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)"

diff --git a/src/index.css b/src/index.css
@@ -67,7 +67,7 @@
   height: 100%;
 }
 
-
+a:link { color: #8AB4F8}
 
 .test-grid {
   display: grid;

diff --git a/src/pages/ContentPages/VideoContent/VideoContent.tsx b/src/pages/ContentPages/VideoContent/VideoContent.tsx
@@ -174,18 +174,17 @@ export const VideoContent = () => {
                 cursor: !descriptionHeight
                   ? "default"
                   : isExpandedDescription
-                  ? "default"
-                  : "pointer",
+                    ? "default"
+                    : "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"
-                    : "200px",
+                      ? "auto"
+                      : "200px",
                   overflow: "hidden",
                 }}
               >

diff --git a/src/pages/Home/Components/VideoList-styles.tsx b/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 }) => ({