mirror of
https://github.com/blakeblackshear/frigate.git
synced 2025-07-26 13:47:03 +02:00
UI tweaks (#17615)
* Ensure that text field doesn't zoom on iOS * Add keyboard shortcut support to generic video player
This commit is contained in:
parent
cab701f054
commit
5d63c58f2c
@ -55,7 +55,7 @@ export default function TextEntry({
|
||||
<FormControl>
|
||||
<Input
|
||||
{...field}
|
||||
className="w-full"
|
||||
className="text-md w-full"
|
||||
placeholder={placeholder}
|
||||
type="text"
|
||||
/>
|
||||
|
@ -1,7 +1,8 @@
|
||||
import React, { useState, useRef, useEffect } from "react";
|
||||
import React, { useState, useRef, useEffect, useCallback } from "react";
|
||||
import { useVideoDimensions } from "@/hooks/use-video-dimensions";
|
||||
import HlsVideoPlayer from "./HlsVideoPlayer";
|
||||
import ActivityIndicator from "../indicators/activity-indicator";
|
||||
import useKeyboardListener from "@/hooks/use-keyboard-listener";
|
||||
|
||||
type GenericVideoPlayerProps = {
|
||||
source: string;
|
||||
@ -36,6 +37,58 @@ export function GenericVideoPlayer({
|
||||
checkSourceExists(source);
|
||||
}, [source]);
|
||||
|
||||
const onSeek = useCallback(
|
||||
(diff: number) => {
|
||||
const currentTime = videoRef.current?.currentTime;
|
||||
|
||||
if (!currentTime) {
|
||||
return;
|
||||
}
|
||||
|
||||
videoRef.current!.currentTime = Math.max(0, currentTime + diff);
|
||||
},
|
||||
[videoRef],
|
||||
);
|
||||
|
||||
useKeyboardListener(
|
||||
["ArrowDown", "ArrowLeft", "ArrowRight", "ArrowUp", " ", "f", "m"],
|
||||
(key, modifiers) => {
|
||||
if (!modifiers.down || modifiers.repeat) {
|
||||
return;
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case "ArrowDown":
|
||||
onSeek(-1);
|
||||
break;
|
||||
case "ArrowLeft":
|
||||
onSeek(-10);
|
||||
break;
|
||||
case "ArrowRight":
|
||||
onSeek(10);
|
||||
break;
|
||||
case "ArrowUp":
|
||||
onSeek(1);
|
||||
break;
|
||||
case " ":
|
||||
if (videoRef.current?.paused) {
|
||||
videoRef.current?.play();
|
||||
} else {
|
||||
videoRef.current?.pause();
|
||||
}
|
||||
break;
|
||||
case "f":
|
||||
videoRef.current?.requestFullscreen();
|
||||
break;
|
||||
case "m":
|
||||
if (videoRef.current) {
|
||||
videoRef.current.muted = !videoRef.current.muted;
|
||||
}
|
||||
break;
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
return (
|
||||
<div ref={containerRef} className="relative flex h-full w-full flex-col">
|
||||
<div className="relative flex flex-grow items-center justify-center">
|
||||
|
Loading…
Reference in New Issue
Block a user