* Ensure that text field doesn't zoom on iOS

* Add keyboard shortcut support to generic video player
This commit is contained in:
Nicolas Mowen 2025-04-09 08:46:27 -06:00 committed by GitHub
parent cab701f054
commit 5d63c58f2c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 55 additions and 2 deletions

View File

@ -55,7 +55,7 @@ export default function TextEntry({
<FormControl>
<Input
{...field}
className="w-full"
className="text-md w-full"
placeholder={placeholder}
type="text"
/>

View File

@ -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">