Adjustments to VideoControls and MobileControls CSS.

Qortal · Feb 6, 2025 · 9d9c161 · 9d9c161
1 parent 63bbf98
commit 9d9c161
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 34 deletions.
diff --git a/src/components/common/VideoPlayer/Components/MobileControlsBar.tsx b/src/components/common/VideoPlayer/Components/MobileControlsBar.tsx
@@ -14,9 +14,15 @@ import {
 } from "./VideoControls.tsx";
 
 export const MobileControlsBar = () => {
-  const { handleMenuOpen, handleMenuClose, anchorEl } = useVideoContext();
+  const { handleMenuOpen, handleMenuClose, anchorEl, controlsHeight } =
+    useVideoContext();
 
-  const controlGroupSX = { display: "flex", gap: "5px", alignItems: "center" };
+  const controlGroupSX = {
+    display: "flex",
+    gap: "5px",
+    alignItems: "center",
+    height: controlsHeight,
+  };
 
   return (
     <>
@@ -36,7 +42,7 @@ export const MobileControlsBar = () => {
           color="inherit"
           aria-label="menu"
           onClick={handleMenuOpen}
-          sx={{ minWidth: "30px", paddingLeft: "0px" }}
+          sx={{ paddingLeft: "0px", marginRight: "0px" }}
         >
           <MoreIcon />
         </IconButton>

diff --git a/src/components/common/VideoPlayer/Components/VideoControls-State.ts b/src/components/common/VideoPlayer/Components/VideoControls-State.ts
@@ -42,6 +42,7 @@ export const useVideoControlsState = (
     (state: RootState) => state.global.videoPlaying
   );
 
+  const controlsHeight = "42px";
   const minSpeed = 0.25;
   const maxSpeed = 4.0;
   const speedChange = 0.25;
@@ -372,5 +373,6 @@ export const useVideoControlsState = (
     isFullscreen,
     toggleObjectFit,
     setObjectFit,
+    controlsHeight,
   };
 };
diff --git a/src/components/common/VideoPlayer/Components/VideoControls.tsx b/src/components/common/VideoPlayer/Components/VideoControls.tsx
@@ -15,13 +15,17 @@ import {
 } from "@mui/icons-material";
 import { useSignalEffect } from "@preact/signals-react";
 
+const buttonPaddingBig = "6px";
+const buttonPaddingSmall = "4px";
+
 export const PlayButton = () => {
-  const { togglePlay, playing } = useVideoContext();
+  const { togglePlay, playing, isScreenSmall } = useVideoContext();
   return (
     <CustomFontTooltip title="Pause/Play (Spacebar)" placement="bottom" arrow>
       <IconButton
         sx={{
           color: "white",
+          padding: isScreenSmall ? buttonPaddingSmall : buttonPaddingBig,
         }}
         onClick={() => togglePlay()}
       >
@@ -32,12 +36,13 @@ export const PlayButton = () => {
 };
 
 export const ReloadButton = () => {
-  const { reloadVideo } = useVideoContext();
+  const { reloadVideo, isScreenSmall } = useVideoContext();
   return (
     <CustomFontTooltip title="Reload Video (R)" placement="bottom" arrow>
       <IconButton
         sx={{
           color: "white",
+          padding: isScreenSmall ? buttonPaddingSmall : buttonPaddingBig,
         }}
         onClick={reloadVideo}
       >
@@ -164,6 +169,7 @@ export const VolumeControl = ({ sliderWidth }: { sliderWidth: string }) => {
     </Box>
   );
 };
+
 export const PlaybackRate = () => {
   const { playbackRate, increaseSpeed, isScreenSmall } = useVideoContext();
   return (
@@ -175,22 +181,37 @@ export const PlaybackRate = () => {
       <IconButton
         sx={{
           color: "white",
-          fontSize: isScreenSmall ? fontSizeExSmall : fontSizeSmall,
-          paddingTop: "0px",
-          paddingBottom: "0px",
+          fontSize: fontSizeSmall,
+          padding: isScreenSmall ? buttonPaddingSmall : buttonPaddingBig,
         }}
         onClick={() => increaseSpeed()}
       >
-        <span style={{ display: "flex", alignItems: "center", height: "40px" }}>
-          {playbackRate}x
-        </span>
+        {playbackRate}x
+      </IconButton>
+    </CustomFontTooltip>
+  );
+};
+
+export const ObjectFitButton = () => {
+  const { toggleObjectFit, isScreenSmall } = useVideoContext();
+  return (
+    <CustomFontTooltip title="Toggle Aspect Ratio (O)" placement="bottom" arrow>
+      <IconButton
+        sx={{
+          color: "white",
+          padding: isScreenSmall ? buttonPaddingSmall : buttonPaddingBig,
+        }}
+        onClick={() => toggleObjectFit()}
+      >
+        <AspectRatioIcon />
       </IconButton>
     </CustomFontTooltip>
   );
 };
 
 export const PictureInPictureButton = () => {
-  const { isFullscreen, toggleRef, togglePictureInPicture } = useVideoContext();
+  const { isFullscreen, toggleRef, togglePictureInPicture, isScreenSmall } =
+    useVideoContext();
   return (
     <>
       {!isFullscreen.value && (
@@ -202,6 +223,7 @@ export const PictureInPictureButton = () => {
           <IconButton
             sx={{
               color: "white",
+              padding: isScreenSmall ? buttonPaddingSmall : buttonPaddingBig,
             }}
             ref={toggleRef}
             onClick={togglePictureInPicture}
@@ -214,31 +236,14 @@ export const PictureInPictureButton = () => {
   );
 };
 
-export const ObjectFitButton = () => {
-  const { toggleObjectFit } = useVideoContext();
-  return (
-    <CustomFontTooltip title="Toggle Aspect Ratio (O)" placement="bottom" arrow>
-      <IconButton
-        sx={{
-          color: "white",
-          paddingRight: "0px",
-        }}
-        onClick={() => toggleObjectFit()}
-      >
-        <AspectRatioIcon />
-      </IconButton>
-    </CustomFontTooltip>
-  );
-};
-
 export const FullscreenButton = () => {
-  const { toggleFullscreen } = useVideoContext();
+  const { toggleFullscreen, isScreenSmall } = useVideoContext();
   return (
     <CustomFontTooltip title="Toggle Fullscreen (F)" placement="bottom" arrow>
       <IconButton
         sx={{
           color: "white",
-          paddingRight: "0px",
+          padding: isScreenSmall ? buttonPaddingSmall : buttonPaddingBig,
         }}
         onClick={() => toggleFullscreen()}
       >

diff --git a/src/components/common/VideoPlayer/Components/VideoControlsBar.tsx b/src/components/common/VideoPlayer/Components/VideoControlsBar.tsx
@@ -15,11 +15,10 @@ import {
 } from "./VideoControls.tsx";
 
 export const VideoControlsBar = () => {
-  const { from, canPlay, showControlsFullScreen, isScreenSmall, progress } =
-    useVideoContext();
+  const { canPlay, isScreenSmall, controlsHeight } = useVideoContext();
 
   const showMobileControls = isScreenSmall && canPlay.value;
-  const controlsHeight = "42px";
+
   const controlGroupSX = {
     display: "flex",
     gap: "5px",