Qortal/qapp-core
1
0
Fork 0
mirror of https://github.com/Qortal/qapp-core.git synced 2025-07-13 12:51:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix colors

Browse Source
This commit is contained in:
PhilReact 2025-06-23 17:20:21 +03:00
parent 8afeb4af7b
commit 28093534b8
7 changed files with 140 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/VideoPlayer/MobileControls.tsx
View File

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

10
src/components/VideoPlayer/SubtitleManager.tsx
View File

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

29
src/components/VideoPlayer/VideoControls.tsx
View File

@ -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 sliderRef = useRef(null);
const [isDragging, setIsDragging] = useState(false); const [isDragging, setIsDragging] = useState(false);
const [sliderValue, setSliderValue] = useState(0); // local slider value const [sliderValue, setSliderValue] = useState(0); // local slider value
const [hoverX, setHoverX] = useState<number | null>(null); const [hoverX, setHoverX] = useState<number | null>(null);
const [thumbnailUrl, setThumbnailUrl] = useState<string | null>(null); const [thumbnailUrl, setThumbnailUrl] = useState<string | null>(null);
const [showDuration, setShowDuration] = useState(0); 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 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); setIsDragging(true);
setSliderValue(value as number); setSliderValue(value as number);
}; };
@ -82,7 +105,7 @@ const onChangeCommitted = (e: any, value: number | number[]) => {
playerRef.current?.currentTime(value as number); playerRef.current?.currentTime(value as number);
setIsDragging(false); setIsDragging(false);
setLocalProgress(value) setLocalProgress(value)
handleMouseLeave()
}; };
@ -148,7 +171,7 @@ const onChangeCommitted = (e: any, value: number | number[]) => {
position="relative" position="relative"
sx={{ sx={{
width: "100%", width: "100%",
padding: "0px 10px", padding: isVideoPlayerSmall ? "0px" : "0px 10px",
}} }}
> >
<Box <Box

4
src/components/VideoPlayer/VideoControlsBar.tsx
View File

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

5
src/components/VideoPlayer/VideoPlayer-styles.ts
View File

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

43
src/components/VideoPlayer/VideoPlayer.tsx
View File

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

36
src/hooks/useGlobalPipPlayer.tsx
View File

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