Fix player controls visibility

This commit is contained in:
Nicolas Mowen 2024-03-22 10:31:35 -06:00
parent 5f00c5813b
commit 2969b6c4f5
2 changed files with 5 additions and 2 deletions

View File

@ -22,6 +22,7 @@ type HlsVideoPlayerProps = {
className: string; className: string;
children?: ReactNode; children?: ReactNode;
videoRef: MutableRefObject<HTMLVideoElement | null>; videoRef: MutableRefObject<HTMLVideoElement | null>;
visible: boolean;
currentSource: string; currentSource: string;
onClipEnded?: () => void; onClipEnded?: () => void;
onPlayerLoaded?: () => void; onPlayerLoaded?: () => void;
@ -32,6 +33,7 @@ export default function HlsVideoPlayer({
className, className,
children, children,
videoRef, videoRef,
visible,
currentSource, currentSource,
onClipEnded, onClipEnded,
onPlayerLoaded, onPlayerLoaded,
@ -137,7 +139,7 @@ export default function HlsVideoPlayer({
return ( return (
<div <div
className={`relative`} className={`relative ${visible ? "visible" : "hidden"}`}
onMouseOver={ onMouseOver={
isDesktop isDesktop
? () => { ? () => {

View File

@ -167,8 +167,9 @@ export default function DynamicVideoPlayer({
return ( return (
<div className={`relative ${className ?? ""}`}> <div className={`relative ${className ?? ""}`}>
<HlsVideoPlayer <HlsVideoPlayer
className={`w-full ${isScrubbing || isLoading ? "hidden" : "visible"} ${grow ?? ""}`} className={`w-full ${grow ?? ""}`}
videoRef={playerRef} videoRef={playerRef}
visible={!(isScrubbing || isLoading)}
currentSource={source} currentSource={source}
onTimeUpdate={onTimeUpdate} onTimeUpdate={onTimeUpdate}
onPlayerLoaded={onPlayerLoaded} onPlayerLoaded={onPlayerLoaded}