fix colors

src/components/VideoPlayer/MobileControls.tsx

@@ -22,6 +22,7 @@ interface MobileControlsProps {
   toggleFullscreen: () => void;
   setProgressRelative: (val: number) => void;
   setLocalProgress: (val: number)=> void;
+  resetHideTimeout: ()=> void
 }
 export const MobileControls = ({
   showControlsMobile,
@@ -35,7 +36,8 @@ export const MobileControls = ({
   openPlaybackMenu,
   toggleFullscreen,
   setProgressRelative,
-  setLocalProgress
+  setLocalProgress,
+  resetHideTimeout
 }: MobileControlsProps) => {
   return (
     <Box
@@ -67,23 +69,34 @@ export const MobileControls = ({
             e.stopPropagation();
             openSubtitleManager();
           }}
+          sx={{
+            background: 'rgba(0,0,0,0.3)',
+            borderRadius: '50%',
+            padding: '7px'
+          }}
         >
           <SubtitlesIcon
             sx={{
               fontSize: "24px",
+              color: 'white'
             }}
           />
         </IconButton>
         <IconButton
-          sx={{
+         sx={{
-            fontSize: "24px",
+            background: 'rgba(0,0,0,0.3)',
+            borderRadius: '50%',
+            padding: '7px'
           }}
           onClick={(e) => {
             e.stopPropagation();
             openPlaybackMenu();
           }}
         >
-          <SlowMotionVideoIcon />
+          <SlowMotionVideoIcon sx={{
+              fontSize: "24px",
+              color: 'white'
+            }}/>
         </IconButton>
       </Box>
       <Box
@@ -101,6 +114,9 @@ export const MobileControls = ({
           sx={{
             opacity: 1,
             zIndex: 2,
+            background: 'rgba(0,0,0,0.3)',
+            borderRadius: '50%',
+            padding: '10px'
           }}
           onClick={(e) => {
             e.stopPropagation();
@@ -110,6 +126,7 @@ export const MobileControls = ({
           <Replay10Icon
             sx={{
               fontSize: "36px",
+              color: 'white'
             }}
           />
         </IconButton>
@@ -118,6 +135,9 @@ export const MobileControls = ({
             sx={{
               opacity: 1,
               zIndex: 2,
+              background: 'rgba(0,0,0,0.3)',
+            borderRadius: '50%',
+            padding: '10px'
             }}
             onClick={(e) => {
               e.stopPropagation();
@@ -127,6 +147,7 @@ export const MobileControls = ({
             <PauseIcon
               sx={{
                 fontSize: "36px",
+                color: 'white'
               }}
             />
           </IconButton>
@@ -136,6 +157,9 @@ export const MobileControls = ({
             sx={{
               opacity: 1,
               zIndex: 2,
+              background: 'rgba(0,0,0,0.3)',
+            borderRadius: '50%',
+            padding: '10px'
             }}
             onClick={(e) => {
               e.stopPropagation();
@@ -145,6 +169,7 @@ export const MobileControls = ({
             <PlayArrowIcon
               sx={{
                 fontSize: "36px",
+                color: 'white'
               }}
             />
           </IconButton>
@@ -153,6 +178,9 @@ export const MobileControls = ({
           sx={{
             opacity: 1,
             zIndex: 2,
+            background: 'rgba(0,0,0,0.3)',
+            borderRadius: '50%',
+            padding: '10px'
           }}
           onClick={(e) => {
             e.stopPropagation();
@@ -162,6 +190,7 @@ export const MobileControls = ({
           <Forward10Icon
             sx={{
               fontSize: "36px",
+              color: 'white'
             }}
           />
         </IconButton>
@@ -177,13 +206,19 @@ export const MobileControls = ({
         <IconButton
           sx={{
             fontSize: "24px",
+            background: 'rgba(0,0,0,0.3)',
+            borderRadius: '50%',
+            padding: '7px'
           }}
           onClick={(e) => {
             e.stopPropagation();
             toggleFullscreen();
           }}
         >
-          <Fullscreen />
+          <Fullscreen sx={{
+            color: 'white',
+            fontSize: "24px",
+          }} />
         </IconButton>
       </Box>
       <Box
@@ -198,6 +233,8 @@ export const MobileControls = ({
           progress={progress}
           duration={duration}
           setLocalProgress={setLocalProgress}
+          setShowControlsMobile={setShowControlsMobile}
+          resetHideTimeout={resetHideTimeout}
         />
       </Box>
     </Box>

src/components/VideoPlayer/SubtitleManager.tsx

@@ -74,6 +74,7 @@ export interface SubtitleManagerProps {
   currentSubTrack: null | string
   setDrawerOpenSubtitles: (val: boolean)=> void
   isFromDrawer: boolean
+  exitFullscreen: ()=> void
 }
 export interface Subtitle {
   language: string | null;
@@ -111,7 +112,8 @@ const SubtitleManagerComponent = ({
   subtitleBtnRef,
   currentSubTrack,
   setDrawerOpenSubtitles,
-  isFromDrawer = false
+  isFromDrawer = false,
+  exitFullscreen
 }: SubtitleManagerProps) => {
   const [mode, setMode] = useState(1);
   const [isOpenPublish, setIsOpenPublish] = useState(false);
@@ -315,7 +317,10 @@ const SubtitleManagerComponent = ({
             sx={{
               marginLeft: "auto",
             }}
-            onClick={() => setIsOpenPublish(true)}
+            onClick={() => {
+                            setIsOpenPublish(true)
+
+            }}
           >
             <ModeEditIcon
               sx={{
@@ -575,6 +580,7 @@ const PublishSubtitles = ({
       open={isOpen}
       fullWidth={true}
       maxWidth={"md"}
+      disablePortal={true}
       sx={{
         zIndex: 999990,
       }}

src/components/VideoPlayer/VideoControls.tsx

@@ -65,14 +65,37 @@ export const ReloadButton = ({ reloadVideo, isScreenSmall }: any) => {
   );
 };
 
-export const ProgressSlider = ({ progress, setLocalProgress, duration, playerRef }: any) => {
+export const ProgressSlider = ({ progress, setLocalProgress, duration, playerRef, resetHideTimeout, isVideoPlayerSmall }: any) => {
   const sliderRef = useRef(null);
   const [isDragging, setIsDragging] = useState(false);
 const [sliderValue, setSliderValue] = useState(0); // local slider value
   const [hoverX, setHoverX] = useState<number | null>(null);
   const [thumbnailUrl, setThumbnailUrl] = useState<string | null>(null);
   const [showDuration, setShowDuration] = useState(0);
+
+const showTimeFunc = (val: number, clientX: number) => {
+  const slider = sliderRef.current;
+  if (!slider) return;
+  console.log('time',val, duration)
+  const percent = val / duration;
+  const time = Math.min(Math.max(0, percent * duration), duration);
+
+  setHoverX(clientX);
+  setShowDuration(time);
+
+  resetHideTimeout()
+  // Optionally debounce processing thumbnails
+  // debounceTimeoutRef.current = setTimeout(() => {
+  //   debouncedExtract(time, clientX);
+  // }, THUMBNAIL_DEBOUNCE);
+};
   const onProgressChange = (e: any, value: number | number[]) => {
+      const clientX = 'touches' in e ? e.touches[0].clientX : (e as React.MouseEvent).clientX;
+if(clientX && resetHideTimeout){
+      showTimeFunc(value as number, clientX);
+
+
+}
     setIsDragging(true);
     setSliderValue(value as number);
   };
@@ -82,7 +105,7 @@ const onChangeCommitted = (e: any, value: number | number[]) => {
     playerRef.current?.currentTime(value as number);
             setIsDragging(false);
             setLocalProgress(value)
-
+handleMouseLeave()
   };
 
 
@@ -148,7 +171,7 @@ const onChangeCommitted = (e: any, value: number | number[]) => {
       position="relative"
       sx={{
         width: "100%",
-        padding: "0px 10px",
+        padding: isVideoPlayerSmall ? "0px" : "0px 10px",
       }}
     >
       <Box

src/components/VideoPlayer/VideoControlsBar.tsx

@@ -113,7 +113,9 @@ export const VideoControlsBar = ({subtitleBtnRef, setLocalProgress, showControls
                     arrow
                   >
             <IconButton ref={subtitleBtnRef} onClick={openSubtitleManager}>
-              <SubtitlesIcon />
+              <SubtitlesIcon sx={{
+                color: "white",
+              }} />
             </IconButton>
             </CustomFontTooltip>
             {/* <PictureInPictureButton togglePictureInPicture={togglePictureInPicture} /> */}

src/components/VideoPlayer/VideoPlayer-styles.ts

@@ -32,10 +32,7 @@ export const VideoElement = styled("video")(({ theme }) => ({
   },
   "&::-webkit-media-controls": {
     display: "none !important",
-  },
+  }
-  "&:fullscreen": {
-    paddingBottom: '50px',
-  },
 }));
 
 //1075 x 604

src/components/VideoPlayer/VideoPlayer.tsx

@@ -272,6 +272,8 @@ export const VideoPlayer = ({
   }, [isFullscreen]);
 
   const toggleFullscreen = useCallback(() => {
+    setShowControls(false)
+    setShowControlsMobile(false)
     isFullscreen ? exitFullscreen() : enterFullscreen();
   }, [isFullscreen]);
 
@@ -313,6 +315,7 @@ export const VideoPlayer = ({
   const openSubtitleManager = useCallback(() => {
     if (isVideoPlayerSmall) {
       setDrawerOpenSubtitles(true);
+      return
     }
     setIsOpenSubtitleManage(true);
   }, [isVideoPlayerSmall]);
@@ -378,11 +381,11 @@ export const VideoPlayer = ({
 
   const videoStylesContainer = useMemo(() => {
     return {
-      cursor: showControls ? "auto" : "none",
+      cursor: "auto",
       // aspectRatio: "16 / 9",
       ...videoStyles?.videoContainer,
     };
-  }, [showControls]);
+  }, [showControls, isVideoPlayerSmall]);
 
   const videoStylesVideo = useMemo(() => {
     return {
@@ -460,7 +463,7 @@ export const VideoPlayer = ({
   const hideTimeout = useRef<any>(null);
 
   const resetHideTimer = () => {
-    if (isTouchDevice) return;
+    if (isVideoPlayerSmall) return;
     setShowControls(true);
     if (hideTimeout.current) clearTimeout(hideTimeout.current);
     hideTimeout.current = setTimeout(() => {
@@ -469,7 +472,8 @@ export const VideoPlayer = ({
   };
 
   const handleMouseMove = () => {
-    if (isTouchDevice) return;
+    if (isVideoPlayerSmall) return;
+    console.log('going 222')
     resetHideTimer();
   };
 
@@ -486,12 +490,12 @@ export const VideoPlayer = ({
   }, [isVideoPlayerSmall]);
 
   useEffect(() => {
-    if (isTouchDevice) return;
+    if (isVideoPlayerSmall) return;
     resetHideTimer(); // initial show
     return () => {
       if (hideTimeout.current) clearTimeout(hideTimeout.current);
     };
-  }, []);
+  }, [isVideoPlayerSmall]);
 
   const previousSubtitleUrlRef = useRef<string | null>(null);
 
@@ -816,7 +820,16 @@ export const VideoPlayer = ({
     };
   }, []);
 
-  console.log("showControlsMobile", showControlsMobile);
+  const handleClickVideoElement = useCallback(()=> {
+    if(isVideoPlayerSmall){
+      resetHideTimeout()
+      return
+    }
+    console.log('sup')
+    togglePlay()
+  }, [isVideoPlayerSmall, togglePlay])
+
+  console.log("showControlsMobile", isVideoPlayerSmall);
 
   return (
     <>
@@ -845,7 +858,7 @@ export const VideoPlayer = ({
           poster={startPlay ? "" : poster}
           onTimeUpdate={updateProgress}
           autoPlay={autoPlay}
-          onClick={togglePlay}
+          onClick={handleClickVideoElement}
           onEnded={handleEnded}
           onCanPlay={handleCanPlay}
           preload="metadata"
@@ -855,15 +868,18 @@ export const VideoPlayer = ({
           onVolumeChange={onVolumeChangeHandler}
           controls={false}
         />
-        <PlayBackMenu
+        {!isVideoPlayerSmall && (
+          <PlayBackMenu
           isFromDrawer={false}
           close={closePlaybackMenu}
           isOpen={isOpenPlaybackMenu}
           onSelect={onSelectPlaybackRate}
           playbackRate={playbackRate}
         />
+        )}
+        
 
-        {isReady && !showControlsMobile && (
+        {isReady && showControls && (
           <VideoControlsBar
             isVideoPlayerSmall={isVideoPlayerSmall}
             subtitleBtnRef={subtitleBtnRef}
@@ -903,7 +919,7 @@ export const VideoPlayer = ({
             timelineActions={timelineActions}
           />
         )}
-        {showControlsMobile && (
+        {showControlsMobile && isReady && (
           <MobileControls
             setLocalProgress={setLocalProgress}
             setProgressRelative={setProgressRelative}
@@ -913,6 +929,7 @@ export const VideoPlayer = ({
             togglePlay={togglePlay}
             isPlaying={isPlaying}
             setShowControlsMobile={setShowControlsMobile}
+            resetHideTimeout={resetHideTimeout}
             duration={duration}
             progress={localProgress}
             playerRef={playerRef}
@@ -930,13 +947,14 @@ export const VideoPlayer = ({
             currentSubTrack={currentSubTrack}
             setDrawerOpenSubtitles={setDrawerOpenSubtitles}
             isFromDrawer={false}
+            exitFullscreen={exitFullscreen}
           />
         )}
  <ClickAwayListener onClickAway={() => setDrawerOpenSubtitles(false)}>
         <Drawer
         variant="persistent"
           anchor="bottom"
-          open={drawerOpenSubtitles}
+          open={drawerOpenSubtitles && isVideoPlayerSmall}
           sx={{}}
           slotProps={{
             paper: {
@@ -962,6 +980,7 @@ export const VideoPlayer = ({
             currentSubTrack={currentSubTrack}
             setDrawerOpenSubtitles={setDrawerOpenSubtitles}
             isFromDrawer={true}
+            exitFullscreen={exitFullscreen}
           />
         </Drawer>
          </ClickAwayListener>
@@ -969,7 +988,7 @@ export const VideoPlayer = ({
           <Drawer
             variant="persistent"
             anchor="bottom"
-            open={drawerOpenPlayback}
+            open={drawerOpenPlayback && isVideoPlayerSmall}
             sx={{}}
             slotProps={{
               paper: {

src/hooks/useGlobalPipPlayer.tsx

@@ -342,24 +342,32 @@ useEffect(() => {
             <IconButton
               sx={{
                 position: "absolute",
-                top: 10,
+                top: 5,
                 opacity: 1,
-                right: 10,
+                right: 5,
                 zIndex: 2,
+                 background: 'rgba(0,0,0,0.3)',
+            borderRadius: '50%',
+            padding: '5px'
               }}
               onClick={reset}
               onTouchStart={reset}
             >
-              <CloseIcon />
+              <CloseIcon sx={{
+            color: 'white',
+          }} />
             </IconButton>
             {location && (
               <IconButton
                 sx={{
                   position: "absolute",
-                  top: 10,
+                  top: 5,
-                  left: 10,
+                  left: 5,
                   zIndex: 2,
                   opacity: 1,
+                 background: 'rgba(0,0,0,0.3)',
+            borderRadius: '50%',
+            padding: '5px'
                 }}
                 onClick={(e) => {
                   e.stopPropagation()
@@ -374,7 +382,9 @@ useEffect(() => {
                   }
                 }}
               >
-                <OpenInFullIcon />
+                <OpenInFullIcon sx={{
+            color: 'white',
+          }} />
               </IconButton>
             )}
             {playing && (
@@ -386,11 +396,16 @@ useEffect(() => {
                   transform: "translate(-50%, -50%)",
                   opacity: 1,
                   zIndex: 2,
+                  background: 'rgba(0,0,0,0.3)',
+            borderRadius: '50%',
+            padding: '5px'
                 }}
                 onClick={stopPlay}
                 onTouchStart={stopPlay}
               >
-                <PauseIcon />
+                <PauseIcon sx={{
+            color: 'white',
+          }} />
               </IconButton>
             )}
             {!playing && (
@@ -402,11 +417,16 @@ useEffect(() => {
                   left: "50%",
                   transform: "translate(-50%, -50%)",
                   zIndex: 2,
+                  background: 'rgba(0,0,0,0.3)',
+            borderRadius: '50%',
+            padding: '5px'
                 }}
                 onClick={startPlay}
                 onTouchStart={startPlay}
               >
-                <PlayArrowIcon />
+                <PlayArrowIcon sx={{
+            color: 'white',
+          }} />
               </IconButton>
             )}