added time for mobile

src/components/VideoPlayer/LoadingVideo.tsx

@@ -106,7 +106,6 @@ export const LoadingVideo = ({
             
             sx={{
               cursor: "pointer",
-              borderRadius: "10px",
               position:"absolute",
             top:0,
             left:0,
@@ -114,6 +113,9 @@ export const LoadingVideo = ({
             bottom:0,
             zIndex: 501,
             background: 'rgba(0,0,0,0.3)',
+            padding: '0px',
+            borderRadius: "0px",
+     
             }}
           >
             <PlayArrow

src/components/VideoPlayer/MobileControls.tsx

@@ -1,6 +1,6 @@
 import { alpha, Box, IconButton } from "@mui/material";
 import React from "react";
-import { ProgressSlider } from "./VideoControls";
+import { ProgressSlider, VideoTime } from "./VideoControls";
 import PlayArrowIcon from "@mui/icons-material/PlayArrow";
 import PauseIcon from "@mui/icons-material/Pause";
 import SubtitlesIcon from "@mui/icons-material/Subtitles";
@@ -226,8 +226,15 @@ export const MobileControls = ({
           width: "100%",
           position: "absolute",
           bottom: 0,
+          display: 'flex',
+          flexDirection: 'column'
         }}
       >
+        <Box sx={{
+          padding: '0px 10px'
+        }}>
+        <VideoTime isScreenSmall  progress={progress} duration={duration}/>
+        </Box>
         <ProgressSlider
           playerRef={playerRef}
           progress={progress}

src/components/VideoPlayer/MobileControlsBar.tsx

@@ -1,69 +0,0 @@
-import { MoreVert as MoreIcon } from "@mui/icons-material";
-import { Box, IconButton, Menu, MenuItem } from "@mui/material";
-import {
-  FullscreenButton,
-  ObjectFitButton,
-  PictureInPictureButton,
-  PlaybackRate,
-  PlayButton,
-  ProgressSlider,
-  ReloadButton,
-  VideoTime,
-  VolumeControl,
-} from "./VideoControls";
-
-export const MobileControlsBar = ({handleMenuOpen, handleMenuClose, anchorEl, controlsHeight}) => {
-
-
-  const controlGroupSX = {
-    display: "flex",
-    gap: "5px",
-    alignItems: "center",
-    height: controlsHeight,
-  };
-
-  return (
-    <>
-      <Box sx={controlGroupSX}>
-        <PlayButton />
-        <ReloadButton />
-        <ProgressSlider />
-        <VideoTime />
-      </Box>
-
-      <Box sx={controlGroupSX}>
-        <PlaybackRate />
-        <FullscreenButton />
-
-        <IconButton
-          edge="end"
-          color="inherit"
-          aria-label="menu"
-          onClick={handleMenuOpen}
-          sx={{ paddingLeft: "0px", marginRight: "0px" }}
-        >
-          <MoreIcon />
-        </IconButton>
-      </Box>
-      <Menu
-        id="simple-menu"
-        anchorEl={anchorEl.value}
-        keepMounted
-        open={Boolean(anchorEl.value)}
-        onClose={handleMenuClose}
-        PaperProps={{
-          style: {
-            width: "250px",
-          },
-        }}
-      >
-        <MenuItem>
-          <ObjectFitButton />
-        </MenuItem>
-        <MenuItem>
-          <PictureInPictureButton />
-        </MenuItem>
-      </Menu>
-    </>
-  );
-};

src/components/VideoPlayer/TimelineActionsComponent.tsx

@@ -7,6 +7,7 @@ timelineActions: TimelineAction[]
 progress: number
 containerRef: any
 seekTo: (time: number)=> void
+isVideoPlayerSmall: boolean
 
 }
 
@@ -17,7 +18,7 @@ const placementStyles: Record<NonNullable<TimelineAction['placement']>, React.CS
   'BOTTOM-RIGHT': { bottom: 60, right: 16 },
 };
 
-export const TimelineActionsComponent = ({timelineActions, progress, containerRef, seekTo}: TimelineActionsComponentProps) => {
+export const TimelineActionsComponent = ({timelineActions, progress, containerRef, seekTo, isVideoPlayerSmall}: TimelineActionsComponentProps) => {
     const [isOpen, setIsOpen] = useState(true)
 
     const handleClick = useCallback((action: TimelineAction)=> {
@@ -60,7 +61,9 @@ export const TimelineActionsComponent = ({timelineActions, progress, containerRe
       }}
     >
       
-        <Typography key={index} variant="body2" onClick={()=> handleClick(action)}>
+        <Typography key={index}  sx={{
+          fontSize: isVideoPlayerSmall ? '16px' : '18px'
+        }} onClick={()=> handleClick(action)}>
           {action.label}
         </Typography>
       

src/components/VideoPlayer/VideoControls.tsx

@@ -289,6 +289,9 @@ export const VideoTime = ({ progress, isScreenSmall, duration }: any) => {
       title="Seek video in 10% increments (0-9)"
       placement="bottom"
       arrow
+      disableHoverListener={isScreenSmall}
+  disableFocusListener={isScreenSmall}
+  disableTouchListener={isScreenSmall}
     >
       <Typography
         sx={{
@@ -296,7 +299,7 @@ export const VideoTime = ({ progress, isScreenSmall, duration }: any) => {
           color: "white",
           visibility: typeof duration !== "number" ? "hidden" : "visible",
           whiteSpace: "nowrap",
-          fontFamily: "sans-serif"
+          fontFamily: "sans-serif",
         }}
       >
         {typeof duration === "number" ? formatTime(progress) : ""}

src/components/VideoPlayer/VideoControlsBar.tsx

@@ -1,6 +1,5 @@
 import { Box, IconButton } from "@mui/material";
 import { ControlsContainer } from "./VideoPlayer-styles";
-// import { MobileControlsBar } from "./MobileControlsBar";
 import {
   FullscreenButton,
   ObjectFitButton,
@@ -80,7 +79,6 @@ export const VideoControlsBar = ({subtitleBtnRef, setLocalProgress, showControls
     >
       {showMobileControls ? (
         null
-        // <MobileControlsBar />
       ) : canPlay ? (
         <Box sx={{
           display: 'flex',

src/components/VideoPlayer/VideoPlayer.tsx

@@ -148,7 +148,7 @@ export const VideoPlayer = ({
   const playerRef = useRef<Player | null>(null);
   const [drawerOpenSubtitles, setDrawerOpenSubtitles] = useState(false);
   const [drawerOpenPlayback, setDrawerOpenPlayback] = useState(false);
-  const [showControlsMobile, setShowControlsMobile] = useState(false);
+  const [showControlsMobile2, setShowControlsMobile] = useState(false);
   const [isPlayerInitialized, setIsPlayerInitialized] = useState(false);
   const [videoCodec, setVideoCodec] = useState<null | false | string>(null);
   const [isMuted, setIsMuted] = useState(false);
@@ -201,6 +201,8 @@ export const VideoPlayer = ({
     videoRef,
   });
 
+  const showControlsMobile = (showControlsMobile2 || !isPlaying) && isVideoPlayerSmall
+
   useEffect(() => {
     if (location) {
       locationRef.current = location.pathname;
@@ -920,6 +922,7 @@ export const VideoPlayer = ({
             containerRef={containerRef}
             progress={localProgress}
             timelineActions={timelineActions}
+            isVideoPlayerSmall={isVideoPlayerSmall}
           />
         )}
         {showControlsMobile && isReady && (