import { Box, IconButton } from "@mui/material"; import { ControlsContainer } from "./VideoPlayer-styles"; // import { MobileControlsBar } from "./MobileControlsBar"; import { FullscreenButton, ObjectFitButton, PictureInPictureButton, PlaybackRate, PlayButton, ProgressSlider, ReloadButton, VideoTime, VolumeControl, } from "./VideoControls"; import { Ref } from "react"; import SubtitlesIcon from '@mui/icons-material/Subtitles'; import { CustomFontTooltip } from "./CustomFontTooltip"; interface VideoControlsBarProps { canPlay: boolean isScreenSmall: boolean controlsHeight?: string progress: number; duration: number isPlaying: boolean; togglePlay: ()=> void; reloadVideo: ()=> void; volume: number onVolumeChange: (_: any, val: number)=> void toggleFullscreen: ()=> void extractFrames: (time: number)=> void showControls: boolean; showControlsFullScreen: boolean; isFullScreen: boolean; playerRef: any increaseSpeed: ()=> void decreaseSpeed: ()=> void playbackRate: number openSubtitleManager: ()=> void subtitleBtnRef: any onSelectPlaybackRate: (rate: number)=> void; isMuted: boolean toggleMute: ()=> void openPlaybackMenu: ()=> void togglePictureInPicture: ()=> void isVideoPlayerSmall: boolean } export const VideoControlsBar = ({subtitleBtnRef, showControls, playbackRate, increaseSpeed,decreaseSpeed, isFullScreen, showControlsFullScreen, reloadVideo, onVolumeChange, volume, isPlaying, canPlay, isScreenSmall, controlsHeight, playerRef, duration, progress, togglePlay, toggleFullscreen, extractFrames, openSubtitleManager, onSelectPlaybackRate, isMuted, toggleMute, openPlaybackMenu, togglePictureInPicture, isVideoPlayerSmall}: VideoControlsBarProps) => { const showMobileControls = isScreenSmall && canPlay; const controlGroupSX = { display: "flex", gap: "5px", alignItems: "center", height: controlsHeight, }; let additionalStyles: React.CSSProperties = {} if(isFullScreen && showControlsFullScreen){ additionalStyles = { opacity: 1, position: 'fixed', bottom: 0 } } return ( {showMobileControls ? ( null // ) : canPlay ? ( {!isVideoPlayerSmall && ( {/* */} {/* */} )} ) : null} ); };