administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-09 04:35:25 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Improve mobile controls experience

Browse Source
This commit is contained in:
Nicolas Mowen 2024-03-13 12:55:33 -06:00
parent 503997c066
commit eded5260d6
1 changed files with 20 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
web/src/components/player/HlsVideoPlayer.tsx
View File

@ -22,7 +22,7 @@ import useKeyboardListener from "@/hooks/use-keyboard-listener";
const HLS_MIME_TYPE = "application/vnd.apple.mpegurl" as const; const HLS_MIME_TYPE = "application/vnd.apple.mpegurl" as const;
type HlsVideovideoProps = { type HlsVideoPlayerProps = {
className: string; className: string;
children?: ReactNode; children?: ReactNode;
videoRef: MutableRefObject<HTMLVideoElement | null>; videoRef: MutableRefObject<HTMLVideoElement | null>;
@ -31,7 +31,7 @@ type HlsVideovideoProps = {
onPlayerLoaded?: () => void; onPlayerLoaded?: () => void;
onTimeUpdate?: (time: number) => void; onTimeUpdate?: (time: number) => void;
}; };
export default function HlsVideovideo({ export default function HlsVideoPlayer({
className, className,
children, children,
videoRef, videoRef,
@ -39,7 +39,7 @@ export default function HlsVideovideo({
onClipEnded, onClipEnded,
onPlayerLoaded, onPlayerLoaded,
onTimeUpdate, onTimeUpdate,
}: HlsVideovideoProps) { }: HlsVideoPlayerProps) {
// playback // playback
const hlsRef = useRef<Hls>(); const hlsRef = useRef<Hls>();
@ -74,6 +74,7 @@ export default function HlsVideovideo({
// controls // controls
const [isPlaying, setIsPlaying] = useState(true); const [isPlaying, setIsPlaying] = useState(true);
const [mobileCtrlTimeout, setMobileCtrlTimeout] = useState<NodeJS.Timeout>();
const [controls, setControls] = useState(isMobile); const [controls, setControls] = useState(isMobile);
const [controlsOpen, setControlsOpen] = useState(false); const [controlsOpen, setControlsOpen] = useState(false);
@ -148,13 +149,26 @@ export default function HlsVideovideo({
> >
<video <video
ref={videoRef} ref={videoRef}
className="size-full" className="size-full rounded-2xl"
preload="auto" preload="auto"
autoPlay autoPlay
controls={false} controls={false}
playsInline playsInline
onPlay={() => setIsPlaying(true)} onPlay={() => {
onPause={() => setIsPlaying(false)} setIsPlaying(true);
if (isMobile) {
setControls(true);
setMobileCtrlTimeout(setTimeout(() => setControls(false), 4000));
}
}}
onPause={() => {
setIsPlaying(false);
if (isMobile && mobileCtrlTimeout) {
clearTimeout(mobileCtrlTimeout);
}
}}
onTimeUpdate={() => onTimeUpdate={() =>
onTimeUpdate && videoRef.current onTimeUpdate && videoRef.current
? onTimeUpdate(videoRef.current.currentTime) ? onTimeUpdate(videoRef.current.currentTime)