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

Implement fullscreen button

Browse Source
This commit is contained in:
Nicolas Mowen 2024-05-09 09:16:41 -06:00
parent 021ffb2437
commit 89c2d3a462
5 changed files with 97 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,7 +6,7 @@ import {
useState,
} from "react";
import Hls from "hls.js";
import { isAndroid, isDesktop, isMobile } from "react-device-detect";
import { isAndroid, isDesktop, isIOS, isMobile } from "react-device-detect";
import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
import VideoControls from "./VideoControls";
import { VideoResolutionType } from "@/types/live";
@ -28,24 +28,28 @@ type HlsVideoPlayerProps = {
visible: boolean;
currentSource: string;
hotKeys: boolean;
fullscreen: boolean;
onClipEnded?: () => void;
onPlayerLoaded?: () => void;
onTimeUpdate?: (time: number) => void;
onPlaying?: () => void;
setFullResolution?: React.Dispatch<React.SetStateAction<VideoResolutionType>>;
onUploadFrame?: (playTime: number) => Promise<AxiosResponse> | undefined;
setFullscreen?: (full: boolean) => void;
};
export default function HlsVideoPlayer({
videoRef,
visible,
currentSource,
hotKeys,
fullscreen,
onClipEnded,
onPlayerLoaded,
onTimeUpdate,
onPlaying,
setFullResolution,
onUploadFrame,
setFullscreen,
}: HlsVideoPlayerProps) {
const { data: config } = useSWR<FrigateConfig>("config");
@ -153,6 +157,7 @@ export default function HlsVideoPlayer({
seek: true,
playbackRate: true,
plusUpload: config?.plus?.enabled == true,
fullscreen: !isIOS,
}}
setControlsOpen={setControlsOpen}
setMuted={setMuted}
@ -196,6 +201,8 @@ export default function HlsVideoPlayer({
}
}
}}
fullscreen={fullscreen}
setFullscreen={setFullscreen}
/>
<TransformComponent
wrapperStyle={{

15
web/src/components/player/VideoControls.tsx
View File

@ -30,12 +30,14 @@ import {
AlertDialogTrigger,
} from "../ui/alert-dialog";
import { cn } from "@/lib/utils";
import { FaCompress, FaExpand } from "react-icons/fa";
type VideoControls = {
volume?: boolean;
seek?: boolean;
playbackRate?: boolean;
plusUpload?: boolean;
fullscreen?: boolean;
};
const CONTROLS_DEFAULT: VideoControls = {
@ -43,6 +45,7 @@ const CONTROLS_DEFAULT: VideoControls = {
seek: true,
playbackRate: true,
plusUpload: false,
fullscreen: false,
};
const PLAYBACK_RATE_DEFAULT = isSafari ? [0.5, 1, 2] : [0.5, 1, 2, 4, 8, 16];
@ -57,12 +60,14 @@ type VideoControlsProps = {
playbackRates?: number[];
playbackRate: number;
hotKeys?: boolean;
fullscreen?: boolean;
setControlsOpen?: (open: boolean) => void;
setMuted?: (muted: boolean) => void;
onPlayPause: (play: boolean) => void;
onSeek: (diff: number) => void;
onSetPlaybackRate: (rate: number) => void;
onUploadFrame?: () => void;
setFullscreen?: (full: boolean) => void;
};
export default function VideoControls({
className,
@ -75,12 +80,14 @@ export default function VideoControls({
playbackRates = PLAYBACK_RATE_DEFAULT,
playbackRate,
hotKeys = true,
fullscreen,
setControlsOpen,
setMuted,
onPlayPause,
onSeek,
onSetPlaybackRate,
onUploadFrame,
setFullscreen,
}: VideoControlsProps) {
const onReplay = useCallback(
(e: React.MouseEvent<SVGElement>) => {
@ -248,6 +255,14 @@ export default function VideoControls({
onUploadFrame={onUploadFrame}
/>
)}
{features.fullscreen && setFullscreen && (
<div
className="cursor-pointer"
onClick={() => setFullscreen(!fullscreen)}
>
{fullscreen ? <FaCompress /> : <FaExpand />}
</div>
)}
</div>
);
}

6
web/src/components/player/dynamic/DynamicVideoPlayer.tsx
View File

@ -24,10 +24,12 @@ type DynamicVideoPlayerProps = {
startTimestamp?: number;
isScrubbing: boolean;
hotKeys: boolean;
fullscreen: boolean;
onControllerReady: (controller: DynamicVideoController) => void;
onTimestampUpdate?: (timestamp: number) => void;
onClipEnded?: () => void;
setFullResolution: React.Dispatch<React.SetStateAction<VideoResolutionType>>;
setFullscreen: (full: boolean) => void;
};
export default function DynamicVideoPlayer({
className,
@ -37,10 +39,12 @@ export default function DynamicVideoPlayer({
startTimestamp,
isScrubbing,
hotKeys,
fullscreen,
onControllerReady,
onTimestampUpdate,
onClipEnded,
setFullResolution,
setFullscreen,
}: DynamicVideoPlayerProps) {
const apiHost = useApiHost();
const { data: config } = useSWR<FrigateConfig>("config");
@ -184,6 +188,7 @@ export default function DynamicVideoPlayer({
visible={!(isScrubbing || isLoading)}
currentSource={source}
hotKeys={hotKeys}
fullscreen={fullscreen}
onTimeUpdate={onTimeUpdate}
onPlayerLoaded={onPlayerLoaded}
onClipEnded={onClipEnded}
@ -201,6 +206,7 @@ export default function DynamicVideoPlayer({
}}
setFullResolution={setFullResolution}
onUploadFrame={onUploadFrameToPlus}
setFullscreen={setFullscreen}
/>
<PreviewPlayer
className={cn(

1
web/src/views/events/EventView.tsx
View File

@ -997,6 +997,7 @@ function MotionReview({
volume: false,
seek: true,
playbackRate: true,
fullscreen: false,
}}
isPlaying={playing}
show={!scrubbing || controlsOpen}

75
web/src/views/events/RecordingView.tsx
View File

@ -43,6 +43,7 @@ import { Skeleton } from "@/components/ui/skeleton";
import { FaVideo } from "react-icons/fa";
import { VideoResolutionType } from "@/types/live";
import { ASPECT_VERTICAL_LAYOUT, ASPECT_WIDE_LAYOUT } from "@/types/record";
import { cn } from "@/lib/utils";
const SEGMENT_DURATION = 30;
@ -76,6 +77,7 @@ export function RecordingView({
const [mainCamera, setMainCamera] = useState(startCamera);
const mainControllerRef = useRef<DynamicVideoController | null>(null);
const mainLayoutRef = useRef<HTMLDivElement | null>(null);
const previewRefs = useRef<{ [camera: string]: PreviewController }>({});
const [playbackStart, setPlaybackStart] = useState(startTime);
@ -208,7 +210,36 @@ export function RecordingView({
[currentTime],
);
// motion timeline data
// fullscreen
const [fullscreen, setFullscreen] = useState(false);
const onToggleFullscreen = useCallback(
(full: boolean) => {
if (full) {
mainLayoutRef.current?.requestFullscreen();
} else {
document.exitFullscreen();
}
},
[mainLayoutRef],
);
useEffect(() => {
if (mainLayoutRef.current == null) {
return;
}
const fsListener = () => {
setFullscreen(document.fullscreenElement != null);
};
document.addEventListener("fullscreenchange", fsListener);
return () => {
document.removeEventListener("fullscreenchange", fsListener);
};
}, [mainLayoutRef]);
// layout
const getCameraAspect = useCallback(
(cam: string) => {
@ -372,19 +403,40 @@ export function RecordingView({
</div>
<div
className={`h-full flex justify-center overflow-hidden ${isDesktop ? "" : "flex-col landscape:flex-row gap-2"}`}
ref={mainLayoutRef}
className={cn(
"h-full flex justify-center overflow-hidden",
isDesktop ? "" : "flex-col landscape:flex-row gap-2",
)}
>
<div className={`${isDesktop ? "w-[80%]" : ""} flex flex-1 flex-wrap`}>
<div
className={cn("flex flex-1 flex-wrap", isDesktop ? "w-[80%]" : "")}
>
<div
className={`size-full flex items-center ${mainCameraAspect == "tall" ? "flex-row justify-evenly" : "flex-col justify-center gap-2"}`}
>
<div
key={mainCamera}
className={`relative ${
className={cn(
"relative",
isDesktop
? `${mainCameraAspect == "tall" ? "h-[50%] md:h-[60%] lg:h-[75%] xl:h-[90%]" : mainCameraAspect == "wide" ? "w-full" : "w-[78%]"} px-4 flex justify-center`
: `portrait:w-full pt-2 ${mainCameraAspect == "wide" ? "landscape:w-full aspect-wide" : "landscape:h-[94%] aspect-video"}`
}`}
? cn(
"px-4 flex justify-center",
mainCameraAspect == "tall"
? "h-[50%] md:h-[60%] lg:h-[75%] xl:h-[90%]"
: mainCameraAspect == "wide"
? "w-full"
: fullscreen
? "w-[100%]"
: "w-[78%]",
)
: cn(
"portrait:w-full pt-2",
mainCameraAspect == "wide"
? "landscape:w-full aspect-wide"
: "landscape:h-[94%] aspect-video",
),
)}
style={{
aspectRatio: isDesktop
? mainCameraAspect == "tall"
@ -400,6 +452,7 @@ export function RecordingView({
cameraPreviews={allPreviews ?? []}
startTimestamp={playbackStart}
hotKeys={exportMode != "select"}
fullscreen={fullscreen}
onTimestampUpdate={(timestamp) => {
setPlayerTime(timestamp);
setCurrentTime(timestamp);
@ -413,11 +466,17 @@ export function RecordingView({
}}
isScrubbing={scrubbing || exportMode == "timeline"}
setFullResolution={setFullResolution}
setFullscreen={onToggleFullscreen}
/>
</div>
{isDesktop && (
<div
className={`flex gap-2 ${mainCameraAspect == "tall" ? "h-full w-[12%] flex-col justify-center overflow-y-auto" : "w-full h-[14%] justify-center items-center overflow-x-auto"} `}
className={cn(
"flex gap-2",
mainCameraAspect == "tall"
? "h-full w-[12%] flex-col justify-center overflow-y-auto"
: `justify-center items-center overflow-x-auto ${fullscreen ? "h-[12%]" : "h-[14%]"}`,
)}
>
{allCameras.map((cam) => {
if (cam == mainCamera) {