From c6605060db320cbb182b82713372917770cc5444 Mon Sep 17 00:00:00 2001
From: IrohDW <randomprogrammer@protonmail.com>
Date: Fri, 3 Jan 2025 16:03:43 -0700
Subject: [PATCH] Videoplayer updates:

VideoPlayer tooltips moved below buttons to avoid interfering with clicking on progress slider. Slider raised 2px and is thicker for the same reason.

Clicking on progress slider doesn't force the video to start playing.

Changed colors on Volume Slider so it is easier to see on Desktop and especially Mobile

Volume slider removed on mobile

Buggy feature that did picture in picture when leaving video while playing has been removed

If on Mobile, video title has bigger topMargin to prevent video clipping into it on some Mobile devices.
---
 .../Components/MobileControlsBar.tsx          |  7 +--
 .../VideoPlayer/Components/VideoControls.tsx  | 56 ++++++++++++++-----
 .../Components/VideoControlsBar.tsx           |  9 +--
 .../common/VideoPlayer/VideoPlayer-State.ts   |  9 +--
 .../common/VideoPlayer/VideoPlayerGlobal.tsx  | 36 ++++++------
 .../VideoContent/VideoContent.tsx             |  2 +-
 src/wrappers/GlobalWrapper.tsx                | 48 ++++++++--------
 7 files changed, 90 insertions(+), 77 deletions(-)

diff --git a/src/components/common/VideoPlayer/Components/MobileControlsBar.tsx b/src/components/common/VideoPlayer/Components/MobileControlsBar.tsx
index 7a733b2..81a677b 100644
--- a/src/components/common/VideoPlayer/Components/MobileControlsBar.tsx
+++ b/src/components/common/VideoPlayer/Components/MobileControlsBar.tsx
@@ -10,8 +10,7 @@ import {
   ProgressSlider,
   ReloadButton,
   VideoTime,
-  VolumeButton,
-  VolumeSlider,
+  VolumeControl,
 } from "./VideoControls.tsx";
 
 export const MobileControlsBar = () => {
@@ -54,10 +53,6 @@ export const MobileControlsBar = () => {
           },
         }}
       >
-        <MenuItem>
-          <VolumeButton />
-          <VolumeSlider width={"100%"} />
-        </MenuItem>
         <MenuItem>
           <ObjectFitButton />
         </MenuItem>
diff --git a/src/components/common/VideoPlayer/Components/VideoControls.tsx b/src/components/common/VideoPlayer/Components/VideoControls.tsx
index ec89106..d655279 100644
--- a/src/components/common/VideoPlayer/Components/VideoControls.tsx
+++ b/src/components/common/VideoPlayer/Components/VideoControls.tsx
@@ -1,4 +1,4 @@
-import { IconButton, Slider, Typography } from "@mui/material";
+import { Box, IconButton, Slider, Typography } from "@mui/material";
 import { fontSizeExSmall, fontSizeSmall } from "../../../../constants/Misc.ts";
 import { CustomFontTooltip } from "../../../../utils/CustomFontTooltip.tsx";
 import { formatTime } from "../../../../utils/numberFunctions.ts";
@@ -18,7 +18,7 @@ import { useSignalEffect } from "@preact/signals-react";
 export const PlayButton = () => {
   const { togglePlay, playing } = useVideoContext();
   return (
-    <CustomFontTooltip title="Pause/Play (Spacebar)" placement="top" arrow>
+    <CustomFontTooltip title="Pause/Play (Spacebar)" placement="bottom" arrow>
       <IconButton
         sx={{
           color: "white",
@@ -34,7 +34,7 @@ export const PlayButton = () => {
 export const ReloadButton = () => {
   const { reloadVideo } = useVideoContext();
   return (
-    <CustomFontTooltip title="Reload Video (R)" placement="top" arrow>
+    <CustomFontTooltip title="Reload Video (R)" placement="bottom" arrow>
       <IconButton
         sx={{
           color: "white",
@@ -57,7 +57,7 @@ export const ProgressSlider = () => {
       max={videoRef.current?.duration || 100}
       sx={{
         position: "absolute",
-        bottom: "40px",
+        bottom: "42px",
         color: "#00abff",
         padding: "0px",
         // prevents the slider from jumping up 20px in certain mobile conditions
@@ -69,7 +69,8 @@ export const ProgressSlider = () => {
           height: "16px",
         },
         "& .MuiSlider-thumb::after": { width: "20px", height: "20px" },
-        "& .MuiSlider-rail": { opacity: 0.5 },
+        "& .MuiSlider-rail": { opacity: 0.5, height: "6px" },
+        "& .MuiSlider-track": { height: "6px", border: "0px" },
       }}
     />
   );
@@ -81,7 +82,7 @@ export const VideoTime = () => {
   return (
     <CustomFontTooltip
       title="Seek video in 10% increments (0-9)"
-      placement="top"
+      placement="bottom"
       arrow
     >
       <Typography
@@ -102,12 +103,12 @@ export const VideoTime = () => {
   );
 };
 
-export const VolumeButton = () => {
+const VolumeButton = () => {
   const { isMuted, toggleMute } = useVideoContext();
   return (
     <CustomFontTooltip
       title="Toggle Mute (M), Raise (UP), Lower (DOWN)"
-      placement="top"
+      placement="bottom"
       arrow
     >
       <IconButton
@@ -122,8 +123,13 @@ export const VolumeButton = () => {
   );
 };
 
-export const VolumeSlider = ({ width }: { width: string }) => {
+const VolumeSlider = ({ width }: { width: string }) => {
   const { volume, onVolumeChange } = useVideoContext();
+  let color = "";
+  if (volume.value <= 0.5) color = "green";
+  else if (volume.value <= 0.75) color = "yellow";
+  else color = "red";
+
   return (
     <Slider
       value={volume.value}
@@ -134,18 +140,36 @@ export const VolumeSlider = ({ width }: { width: string }) => {
       sx={{
         width,
         marginRight: "10px",
-        "& .MuiSlider-thumb::after": { width: "25px", height: "25px" },
+        color,
+        "& .MuiSlider-thumb": {
+          backgroundColor: "#fff",
+          width: "16px",
+          height: "16px",
+        },
+        "& .MuiSlider-thumb::after": { width: "16px", height: "16px" },
+        "& .MuiSlider-rail": { opacity: 0.5, height: "6px" },
+        "& .MuiSlider-track": { height: "6px", border: "0px" },
       }}
     />
   );
 };
 
+export const VolumeControl = ({ sliderWidth }: { sliderWidth: string }) => {
+  return (
+    <Box
+      sx={{ display: "flex", gap: "5px", alignItems: "center", width: "100%" }}
+    >
+      <VolumeButton />
+      <VolumeSlider width={sliderWidth} />
+    </Box>
+  );
+};
 export const PlaybackRate = () => {
   const { playbackRate, increaseSpeed, isScreenSmall } = useVideoContext();
   return (
     <CustomFontTooltip
       title="Video Speed. Increase (+ or >), Decrease (- or <)"
-      placement="top"
+      placement="bottom"
       arrow
     >
       <IconButton
@@ -170,7 +194,11 @@ export const PictureInPictureButton = () => {
   return (
     <>
       {!isFullscreen.value && (
-        <CustomFontTooltip title="Picture in Picture (P)" placement="top" arrow>
+        <CustomFontTooltip
+          title="Picture in Picture (P)"
+          placement="bottom"
+          arrow
+        >
           <IconButton
             sx={{
               color: "white",
@@ -189,7 +217,7 @@ export const PictureInPictureButton = () => {
 export const ObjectFitButton = () => {
   const { toggleObjectFit } = useVideoContext();
   return (
-    <CustomFontTooltip title="Toggle Aspect Ratio (O)" placement="top" arrow>
+    <CustomFontTooltip title="Toggle Aspect Ratio (O)" placement="bottom" arrow>
       <IconButton
         sx={{
           color: "white",
@@ -206,7 +234,7 @@ export const ObjectFitButton = () => {
 export const FullscreenButton = () => {
   const { toggleFullscreen } = useVideoContext();
   return (
-    <CustomFontTooltip title="Toggle Fullscreen (F)" placement="top" arrow>
+    <CustomFontTooltip title="Toggle Fullscreen (F)" placement="bottom" arrow>
       <IconButton
         sx={{
           color: "white",
diff --git a/src/components/common/VideoPlayer/Components/VideoControlsBar.tsx b/src/components/common/VideoPlayer/Components/VideoControlsBar.tsx
index 48f1362..2aa5663 100644
--- a/src/components/common/VideoPlayer/Components/VideoControlsBar.tsx
+++ b/src/components/common/VideoPlayer/Components/VideoControlsBar.tsx
@@ -11,17 +11,15 @@ import {
   ProgressSlider,
   ReloadButton,
   VideoTime,
-  VolumeButton,
-  VolumeSlider,
+  VolumeControl,
 } from "./VideoControls.tsx";
-import { useSignalEffect } from "@preact/signals-react";
 
 export const VideoControlsBar = () => {
   const { from, canPlay, showControlsFullScreen, isScreenSmall, progress } =
     useVideoContext();
 
   const showMobileControls = isScreenSmall && canPlay.value;
-  const controlsHeight = "40px";
+  const controlsHeight = "42px";
   const controlGroupSX = {
     display: "flex",
     gap: "5px",
@@ -46,8 +44,7 @@ export const VideoControlsBar = () => {
 
             <ProgressSlider />
 
-            <VolumeButton />
-            <VolumeSlider width={"100px"} />
+            <VolumeControl sliderWidth={"100px"} />
             <VideoTime />
           </Box>
 
diff --git a/src/components/common/VideoPlayer/VideoPlayer-State.ts b/src/components/common/VideoPlayer/VideoPlayer-State.ts
index 6a1b20f..a41a87d 100644
--- a/src/components/common/VideoPlayer/VideoPlayer-State.ts
+++ b/src/components/common/VideoPlayer/VideoPlayer-State.ts
@@ -147,11 +147,6 @@ export const useVideoPlayerState = (props: VideoPlayerProps, ref: any) => {
     if (!videoRef.current) return;
     videoRef.current.currentTime = value as number;
     progress.value = value as number;
-
-    if (!playing.value) {
-      await videoRef.current.play();
-      playing.value = true;
-    }
   };
 
   const handleEnded = () => {
@@ -198,9 +193,7 @@ export const useVideoPlayerState = (props: VideoPlayerProps, ref: any) => {
       const target = event?.target;
       if (target) {
         target.pause();
-        if (playing.value) {
-          playing.value = false;
-        }
+        if (playing.value) playing.value = false;
       }
     };
 
diff --git a/src/components/common/VideoPlayer/VideoPlayerGlobal.tsx b/src/components/common/VideoPlayer/VideoPlayerGlobal.tsx
index 436aa26..df29970 100644
--- a/src/components/common/VideoPlayer/VideoPlayerGlobal.tsx
+++ b/src/components/common/VideoPlayer/VideoPlayerGlobal.tsx
@@ -445,21 +445,21 @@ export const VideoPlayerGlobal: React.FC<VideoPlayerProps> = ({
     }
   };
 
-  useEffect(() => {
-    if (element) {
-      const oldElement = document.getElementById("videoPlayer");
-      if (oldElement && oldElement?.parentNode) {
-        oldElement?.parentNode.replaceChild(element, oldElement);
-        videoRef.current = element;
-        setPlaying(true);
-        setCanPlay(true);
-        setStartPlay(true);
-        //videoRef?.current?.addEventListener("click", () => {});
-        videoRef?.current?.addEventListener("timeupdate", updateProgress);
-        videoRef?.current?.addEventListener("ended", handleEnded);
-      }
-    }
-  }, [element]);
+  // useEffect(() => {
+  //   if (element) {
+  //     const oldElement = document.getElementById("videoPlayer");
+  //     if (oldElement && oldElement?.parentNode) {
+  //       oldElement?.parentNode.replaceChild(element, oldElement);
+  //       videoRef.current = element;
+  //       setPlaying(true);
+  //       setCanPlay(true);
+  //       setStartPlay(true);
+  //       //videoRef?.current?.addEventListener("click", () => {});
+  //       videoRef?.current?.addEventListener("timeupdate", updateProgress);
+  //       videoRef?.current?.addEventListener("ended", handleEnded);
+  //     }
+  //   }
+  // }, [element]);
 
   return (
     <VideoContainer
@@ -483,9 +483,9 @@ export const VideoPlayerGlobal: React.FC<VideoPlayerProps> = ({
           }}
         ></CloseIcon>
       </div>
-      <div onClick={togglePlay}>
-        <VideoElement id="videoPlayer" />
-      </div>
+      {/*<div onClick={togglePlay}>*/}
+      {/*  <VideoElement id="videoPlayer" />*/}
+      {/*</div>*/}
       <ControlsContainer
         style={{
           bottom: from === "create" ? "15px" : 0,
diff --git a/src/pages/ContentPages/VideoContent/VideoContent.tsx b/src/pages/ContentPages/VideoContent/VideoContent.tsx
index 1671614..626e43a 100644
--- a/src/pages/ContentPages/VideoContent/VideoContent.tsx
+++ b/src/pages/ContentPages/VideoContent/VideoContent.tsx
@@ -121,7 +121,7 @@ export const VideoContent = () => {
             color="textPrimary"
             sx={{
               textAlign: "start",
-              marginTop: "10px",
+              marginTop: isScreenSmall ? "20px" : "10px",
             }}
           >
             {videoData?.title}
diff --git a/src/wrappers/GlobalWrapper.tsx b/src/wrappers/GlobalWrapper.tsx
index 59dbd34..58a95c9 100644
--- a/src/wrappers/GlobalWrapper.tsx
+++ b/src/wrappers/GlobalWrapper.tsx
@@ -228,30 +228,30 @@ const GlobalWrapper: React.FC<Props> = ({ children, setTheme }) => {
       />
       <EditVideo />
       <EditPlaylist />
-      <Rnd
-        onDragStart={onDragStart}
-        onDragStop={onDragStop}
-        style={{
-          display: videoPlaying ? "block" : "none",
-          position: "fixed",
-          height: "auto",
-          width: 350,
-          zIndex: 1000,
-          maxWidth: 800,
-        }}
-        default={{
-          x: 0,
-          y: 60,
-          width: 350,
-          height: "auto",
-        }}
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        onDrag={() => {}}
-      >
-        {videoPlaying && (
-          <VideoPlayerGlobal checkIfDrag={checkIfDrag} element={videoPlaying} />
-        )}
-      </Rnd>
+      {/*<Rnd*/}
+      {/*  onDragStart={onDragStart}*/}
+      {/*  onDragStop={onDragStop}*/}
+      {/*  style={{*/}
+      {/*    display: videoPlaying ? "block" : "none",*/}
+      {/*    position: "fixed",*/}
+      {/*    height: "auto",*/}
+      {/*    width: 350,*/}
+      {/*    zIndex: 1000,*/}
+      {/*    maxWidth: 800,*/}
+      {/*  }}*/}
+      {/*  default={{*/}
+      {/*    x: 0,*/}
+      {/*    y: 60,*/}
+      {/*    width: 350,*/}
+      {/*    height: "auto",*/}
+      {/*  }}*/}
+      {/*  // eslint-disable-next-line @typescript-eslint/no-empty-function*/}
+      {/*  onDrag={() => {}}*/}
+      {/*>*/}
+      {/*  {videoPlaying && (*/}
+      {/*    <VideoPlayerGlobal checkIfDrag={checkIfDrag} element={videoPlaying} />*/}
+      {/*  )}*/}
+      {/*</Rnd>*/}
 
       {children}
     </>