diff --git a/src/components/VideoPlayer/LoadingVideo.tsx b/src/components/VideoPlayer/LoadingVideo.tsx index b8e1c5b..78d77bd 100644 --- a/src/components/VideoPlayer/LoadingVideo.tsx +++ b/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", + }} > + + + { - - - const controlGroupSX = { - display: "flex", - gap: "5px", - alignItems: "center", - height: controlsHeight, - }; - - return ( - <> - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; diff --git a/src/components/VideoPlayer/TimelineActionsComponent.tsx b/src/components/VideoPlayer/TimelineActionsComponent.tsx index c32677a..9de8002 100644 --- a/src/components/VideoPlayer/TimelineActionsComponent.tsx +++ b/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, 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 }} > - handleClick(action)}> + handleClick(action)}> {action.label} diff --git a/src/components/VideoPlayer/VideoControls.tsx b/src/components/VideoPlayer/VideoControls.tsx index 3fc482c..a2fa9cf 100644 --- a/src/components/VideoPlayer/VideoControls.tsx +++ b/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} > { color: "white", visibility: typeof duration !== "number" ? "hidden" : "visible", whiteSpace: "nowrap", - fontFamily: "sans-serif" + fontFamily: "sans-serif", }} > {typeof duration === "number" ? formatTime(progress) : ""} diff --git a/src/components/VideoPlayer/VideoControlsBar.tsx b/src/components/VideoPlayer/VideoControlsBar.tsx index c802682..2999c36 100644 --- a/src/components/VideoPlayer/VideoControlsBar.tsx +++ b/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 - // ) : canPlay ? ( (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); 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 && (