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;
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={{
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>

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

@ -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,
}}

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 [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

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

@ -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} /> */}

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

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

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

@ -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,6 +868,7 @@ export const VideoPlayer = ({
onVolumeChange={onVolumeChangeHandler}
controls={false}
/>
{!isVideoPlayerSmall && (
<PlayBackMenu
isFromDrawer={false}
close={closePlaybackMenu}
@ -862,8 +876,10 @@ export const VideoPlayer = ({
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: {

36
src/hooks/useGlobalPipPlayer.tsx
View File

@ -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,
left: 10,
top: 5,
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>
)}