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

Remove check

Browse Source
This commit is contained in:
Nicolas Mowen 2024-08-12 13:19:02 -06:00
parent a58850076b
commit ae691c30b4
1 changed files with 126 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -108,7 +108,7 @@ export function RecordingView({
return chunk.after <= startTime && chunk.before >= startTime; return chunk.after <= startTime && chunk.before >= startTime;
}), }),
); );
const currentTimeRange = useMemo<TimeRange | undefined>( const currentTimeRange = useMemo<TimeRange>(
() => () =>
chunkedTimeRange[selectedRangeIdx] ?? chunkedTimeRange[selectedRangeIdx] ??
chunkedTimeRange[chunkedTimeRange.length - 1], chunkedTimeRange[chunkedTimeRange.length - 1],
@ -174,10 +174,6 @@ export function RecordingView({
); );
useEffect(() => { useEffect(() => {
if (!currentTimeRange) {
return;
}
if (scrubbing || exportRange) { if (scrubbing || exportRange) {
if ( if (
currentTime > currentTimeRange.before + 60 || currentTime > currentTimeRange.before + 60 ||
@ -221,10 +217,6 @@ export function RecordingView({
); );
useEffect(() => { useEffect(() => {
if (!currentTimeRange) {
return;
}
if (!scrubbing) { if (!scrubbing) {
if (Math.abs(currentTime - playerTime) > 10) { if (Math.abs(currentTime - playerTime) > 10) {
if ( if (
@ -486,153 +478,143 @@ export function RecordingView({
</div> </div>
</div> </div>
{currentTimeRange ? ( <div
ref={mainLayoutRef}
className={cn(
"flex h-full justify-center overflow-hidden",
isDesktop ? "" : "flex-col gap-2 landscape:flex-row",
)}
>
<div <div
ref={mainLayoutRef} ref={cameraLayoutRef}
className={cn( className={cn("flex flex-1 flex-wrap", isDesktop ? "w-[80%]" : "")}
"flex h-full justify-center overflow-hidden",
isDesktop ? "" : "flex-col gap-2 landscape:flex-row",
)}
> >
<div <div
ref={cameraLayoutRef} className={cn(
className={cn("flex flex-1 flex-wrap", isDesktop ? "w-[80%]" : "")} "flex size-full items-center",
mainCameraAspect == "tall"
? "flex-row justify-evenly"
: "flex-col justify-center gap-2",
)}
> >
<div <div
key={mainCamera}
className={cn( className={cn(
"flex size-full items-center", "relative",
mainCameraAspect == "tall" isDesktop
? "flex-row justify-evenly" ? cn(
: "flex-col justify-center gap-2", "flex justify-center px-4",
mainCameraAspect == "tall"
? "h-[50%] md:h-[60%] lg:h-[75%] xl:h-[90%]"
: mainCameraAspect == "wide"
? "w-full"
: "",
)
: cn(
"pt-2 portrait:w-full",
mainCameraAspect == "wide"
? "aspect-wide landscape:w-full"
: "aspect-video landscape:h-[94%] landscape:xl:h-[65%]",
),
)} )}
style={{
width: mainCameraStyle ? mainCameraStyle.width : undefined,
aspectRatio: isDesktop
? mainCameraAspect == "tall"
? getCameraAspect(mainCamera)
: undefined
: Math.max(1, getCameraAspect(mainCamera) ?? 0),
}}
> >
<div <DynamicVideoPlayer
key={mainCamera} className={grow}
className={cn( camera={mainCamera}
"relative", timeRange={currentTimeRange}
isDesktop cameraPreviews={allPreviews ?? []}
? cn( startTimestamp={playbackStart}
"flex justify-center px-4", hotKeys={exportMode != "select"}
mainCameraAspect == "tall" fullscreen={fullscreen}
? "h-[50%] md:h-[60%] lg:h-[75%] xl:h-[90%]" onTimestampUpdate={(timestamp) => {
: mainCameraAspect == "wide" setPlayerTime(timestamp);
? "w-full" setCurrentTime(timestamp);
: "", Object.values(previewRefs.current ?? {}).forEach((prev) =>
) prev.scrubToTimestamp(Math.floor(timestamp)),
: cn( );
"pt-2 portrait:w-full",
mainCameraAspect == "wide"
? "aspect-wide landscape:w-full"
: "aspect-video landscape:h-[94%] landscape:xl:h-[65%]",
),
)}
style={{
width: mainCameraStyle ? mainCameraStyle.width : undefined,
aspectRatio: isDesktop
? mainCameraAspect == "tall"
? getCameraAspect(mainCamera)
: undefined
: Math.max(1, getCameraAspect(mainCamera) ?? 0),
}} }}
> onClipEnded={onClipEnded}
<DynamicVideoPlayer onControllerReady={(controller) => {
className={grow} mainControllerRef.current = controller;
camera={mainCamera} }}
timeRange={currentTimeRange} isScrubbing={scrubbing || exportMode == "timeline"}
cameraPreviews={allPreviews ?? []} setFullResolution={setFullResolution}
startTimestamp={playbackStart} toggleFullscreen={toggleFullscreen}
hotKeys={exportMode != "select"} containerRef={mainLayoutRef}
fullscreen={fullscreen} />
onTimestampUpdate={(timestamp) => {
setPlayerTime(timestamp);
setCurrentTime(timestamp);
Object.values(previewRefs.current ?? {}).forEach((prev) =>
prev.scrubToTimestamp(Math.floor(timestamp)),
);
}}
onClipEnded={onClipEnded}
onControllerReady={(controller) => {
mainControllerRef.current = controller;
}}
isScrubbing={scrubbing || exportMode == "timeline"}
setFullResolution={setFullResolution}
toggleFullscreen={toggleFullscreen}
containerRef={mainLayoutRef}
/>
</div>
{isDesktop && (
<div
ref={previewRowRef}
className={cn(
"scrollbar-container flex gap-2 overflow-auto",
mainCameraAspect == "tall"
? "h-full w-72 flex-col"
: `h-28 w-full`,
previewRowOverflows ? "" : "items-center justify-center",
)}
>
<div className="w-2" />
{allCameras.map((cam) => {
if (cam == mainCamera || cam == "birdseye") {
return;
}
return (
<div
key={cam}
className={
mainCameraAspect == "tall" ? "w-full" : "h-full"
}
style={{
aspectRatio: getCameraAspect(cam),
}}
>
<PreviewPlayer
className="size-full"
camera={cam}
timeRange={currentTimeRange}
cameraPreviews={allPreviews ?? []}
startTime={startTime}
isScrubbing={scrubbing}
onControllerReady={(controller) => {
previewRefs.current[cam] = controller;
controller.scrubToTimestamp(startTime);
}}
onClick={() => onSelectCamera(cam)}
/>
</div>
);
})}
<div className="w-2" />
</div>
)}
</div> </div>
</div> {isDesktop && (
<Timeline <div
contentRef={contentRef} ref={previewRowRef}
mainCamera={mainCamera} className={cn(
timelineType={ "scrollbar-container flex gap-2 overflow-auto",
(exportRange == undefined ? timelineType : "timeline") ?? mainCameraAspect == "tall"
"timeline" ? "h-full w-72 flex-col"
} : `h-28 w-full`,
timeRange={timeRange} previewRowOverflows ? "" : "items-center justify-center",
mainCameraReviewItems={mainCameraReviewItems} )}
currentTime={currentTime} >
exportRange={exportMode == "timeline" ? exportRange : undefined} <div className="w-2" />
setCurrentTime={setCurrentTime} {allCameras.map((cam) => {
manuallySetCurrentTime={manuallySetCurrentTime} if (cam == mainCamera || cam == "birdseye") {
setScrubbing={setScrubbing} return;
setExportRange={setExportRange} }
/>
</div> return (
) : ( <div
<div className="relative size-full"> key={cam}
<div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center text-center"> className={
<LuFolderX className="size-16" /> mainCameraAspect == "tall" ? "w-full" : "h-full"
No recordings or previews found for this time }
style={{
aspectRatio: getCameraAspect(cam),
}}
>
<PreviewPlayer
className="size-full"
camera={cam}
timeRange={currentTimeRange}
cameraPreviews={allPreviews ?? []}
startTime={startTime}
isScrubbing={scrubbing}
onControllerReady={(controller) => {
previewRefs.current[cam] = controller;
controller.scrubToTimestamp(startTime);
}}
onClick={() => onSelectCamera(cam)}
/>
</div>
);
})}
<div className="w-2" />
</div>
)}
</div> </div>
</div> </div>
)} <Timeline
contentRef={contentRef}
mainCamera={mainCamera}
timelineType={
(exportRange == undefined ? timelineType : "timeline") ?? "timeline"
}
timeRange={timeRange}
mainCameraReviewItems={mainCameraReviewItems}
currentTime={currentTime}
exportRange={exportMode == "timeline" ? exportRange : undefined}
setCurrentTime={setCurrentTime}
manuallySetCurrentTime={manuallySetCurrentTime}
setScrubbing={setScrubbing}
setExportRange={setExportRange}
/>
</div>
</div> </div>
); );
} }