mirror of
https://github.com/blakeblackshear/frigate.git
synced 2024-11-21 19:07:46 +01:00
Recording fixes (#10728)
* Use timerange everywhere and ensure recordings has last 24 hours * Pause recording when selecting timeline * Fix loading layout * Fix updating current time not always working * Simplify dynamic video player * Clean up desktop sizing * Fix current hour * Make padding consistent * Improve spacing for extra cameras * Make back button consistent * Fix preview player not jumping to correct time * Dont use useEffect due to preview changing * Simplify * Fix transition
This commit is contained in:
Nicolas Mowen
GitHub
parent
7d3b481181
commit
190cdc471a
@ -31,7 +31,7 @@ function App() {
|
||||
{isMobile && <Bottombar />}
|
||||
<div
|
||||
id="pageRoot"
|
||||
className={`absolute top-2 right-0 overflow-hidden ${isMobile ? "left-0 bottom-16" : "left-16 bottom-8"}`}
|
||||
className={`absolute top-0 right-0 overflow-hidden ${isMobile ? "left-0 bottom-16" : "left-12 bottom-8"}`}
|
||||
>
|
||||
<Suspense>
|
||||
<Routes>
|
||||
|
||||
@ -33,11 +33,11 @@ export default function ReviewCard({
|
||||
|
||||
return (
|
||||
<div
|
||||
className="w-full flex flex-col gap-1.5 cursor-pointer"
|
||||
className="w-full relative flex flex-col gap-1.5 cursor-pointer"
|
||||
onClick={onClick}
|
||||
>
|
||||
<ImageLoadingIndicator
|
||||
className="size-full aspect-video"
|
||||
className="absolute inset-0"
|
||||
imgLoaded={imgLoaded}
|
||||
/>
|
||||
<img
|
||||
|
||||
@ -12,8 +12,7 @@ import { Preview } from "@/types/preview";
|
||||
import { PreviewPlayback } from "@/types/playback";
|
||||
import { isCurrentHour } from "@/utils/dateUtil";
|
||||
import { baseUrl } from "@/api/baseUrl";
|
||||
import { isAndroid, isChrome, isMobile, isSafari } from "react-device-detect";
|
||||
import { Skeleton } from "../ui/skeleton";
|
||||
import { isAndroid, isChrome, isMobile } from "react-device-detect";
|
||||
import { TimeRange } from "@/types/timeline";
|
||||
|
||||
type PreviewPlayerProps = {
|
||||
@ -23,6 +22,7 @@ type PreviewPlayerProps = {
|
||||
cameraPreviews: Preview[];
|
||||
startTime?: number;
|
||||
isScrubbing: boolean;
|
||||
forceAspect?: number;
|
||||
onControllerReady: (controller: PreviewController) => void;
|
||||
onClick?: () => void;
|
||||
};
|
||||
@ -143,8 +143,6 @@ function PreviewVideoPlayer({
|
||||
|
||||
// initial state
|
||||
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
const [hasCanvas, setHasCanvas] = useState(false);
|
||||
const initialPreview = useMemo(() => {
|
||||
return cameraPreviews.find(
|
||||
(preview) =>
|
||||
@ -164,14 +162,52 @@ function PreviewVideoPlayer({
|
||||
return;
|
||||
}
|
||||
|
||||
setCurrentHourFrame(undefined);
|
||||
|
||||
if (isAndroid && isChrome) {
|
||||
// android/chrome glitches when setting currentTime at the same time as onSeeked
|
||||
setTimeout(() => controller.finishedSeeking(), 25);
|
||||
} else {
|
||||
controller.finishedSeeking();
|
||||
}
|
||||
// we only want to update on controller change
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [controller]);
|
||||
|
||||
// canvas to cover preview transition
|
||||
|
||||
const canvasRef = useRef<HTMLCanvasElement | null>(null);
|
||||
const [videoSize, setVideoSize] = useState<number[]>([0, 0]);
|
||||
|
||||
const changeSource = useCallback(
|
||||
(newPreview: Preview | undefined, video: HTMLVideoElement | null) => {
|
||||
if (!newPreview || !video) {
|
||||
setCurrentPreview(newPreview);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!canvasRef.current && videoSize[0] > 0) {
|
||||
const canvas = document.createElement("canvas");
|
||||
canvas.width = videoSize[0];
|
||||
canvas.height = videoSize[1];
|
||||
canvasRef.current = canvas;
|
||||
}
|
||||
|
||||
const context = canvasRef.current?.getContext("2d");
|
||||
|
||||
if (context) {
|
||||
context.drawImage(video, 0, 0, videoSize[0], videoSize[1]);
|
||||
setCurrentHourFrame(canvasRef.current?.toDataURL("image/webp"));
|
||||
}
|
||||
|
||||
setCurrentPreview(newPreview);
|
||||
|
||||
// we only want this to change when current preview changes
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
},
|
||||
[setCurrentHourFrame, videoSize],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!controller) {
|
||||
return;
|
||||
@ -185,8 +221,7 @@ function PreviewVideoPlayer({
|
||||
);
|
||||
|
||||
if (preview != currentPreview) {
|
||||
setCurrentPreview(preview);
|
||||
setLoaded(false);
|
||||
changeSource(preview, previewRef.current);
|
||||
}
|
||||
|
||||
controller.newPlayback({
|
||||
@ -196,63 +231,21 @@ function PreviewVideoPlayer({
|
||||
|
||||
// we only want this to change when recordings update
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [controller, timeRange]);
|
||||
|
||||
// canvas to cover preview transition
|
||||
|
||||
const canvasRef = useRef<HTMLCanvasElement | null>(null);
|
||||
const [videoWidth, videoHeight] = useMemo(() => {
|
||||
if (!previewRef.current) {
|
||||
return [0, 0];
|
||||
}
|
||||
|
||||
return [previewRef.current.videoWidth, previewRef.current.videoHeight];
|
||||
// we know the video size will be known on load
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [loaded]);
|
||||
// handle switching sources
|
||||
|
||||
useEffect(() => {
|
||||
if (!currentPreview || !previewRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (canvasRef.current) {
|
||||
canvasRef.current
|
||||
.getContext("2d")
|
||||
?.drawImage(previewRef.current, 0, 0, videoWidth, videoHeight);
|
||||
setHasCanvas(true);
|
||||
}
|
||||
|
||||
if (isSafari) {
|
||||
setTimeout(() => previewRef.current?.load(), 100);
|
||||
} else {
|
||||
previewRef.current.load();
|
||||
}
|
||||
// we only want this to change when current preview changes
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [currentPreview, previewRef]);
|
||||
}, [controller, timeRange, changeSource]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`relative w-full rounded-2xl bg-black overflow-hidden ${className ?? ""} ${onClick ? "cursor-pointer" : ""}`}
|
||||
className={`relative rounded-2xl bg-black overflow-hidden ${onClick ? "cursor-pointer" : ""} ${className ?? ""}`}
|
||||
onClick={onClick}
|
||||
>
|
||||
{currentHourFrame && (
|
||||
<img
|
||||
className="absolute size-full object-contain"
|
||||
src={currentHourFrame}
|
||||
/>
|
||||
)}
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
width={videoWidth}
|
||||
height={videoHeight}
|
||||
className={`absolute h-full left-1/2 -translate-x-1/2 ${!loaded && hasCanvas ? "" : "hidden"}`}
|
||||
<img
|
||||
className={`absolute size-full object-contain ${currentHourFrame ? "visible" : "invisible"}`}
|
||||
src={currentHourFrame}
|
||||
onLoad={() => previewRef.current?.load()}
|
||||
/>
|
||||
<video
|
||||
ref={previewRef}
|
||||
className="size-full"
|
||||
className={`absolute size-full ${currentHourFrame ? "invisible" : "visible"}`}
|
||||
preload="auto"
|
||||
autoPlay
|
||||
playsInline
|
||||
@ -260,17 +253,21 @@ function PreviewVideoPlayer({
|
||||
disableRemotePlayback
|
||||
onSeeked={onPreviewSeeked}
|
||||
onLoadedData={() => {
|
||||
setCurrentHourFrame(undefined);
|
||||
setLoaded(true);
|
||||
|
||||
if (controller) {
|
||||
controller.previewReady();
|
||||
} else {
|
||||
previewRef.current?.pause();
|
||||
}
|
||||
|
||||
if (previewRef.current && startTime && currentPreview) {
|
||||
previewRef.current.currentTime = startTime - currentPreview.start;
|
||||
if (previewRef.current) {
|
||||
setVideoSize([
|
||||
previewRef.current.videoWidth,
|
||||
previewRef.current.videoHeight,
|
||||
]);
|
||||
|
||||
if (startTime && currentPreview) {
|
||||
previewRef.current.currentTime = startTime - currentPreview.start;
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
@ -278,9 +275,6 @@ function PreviewVideoPlayer({
|
||||
<source src={currentPreview.src} type={currentPreview.type} />
|
||||
)}
|
||||
</video>
|
||||
{!loaded && !hasCanvas && !currentHourFrame && (
|
||||
<Skeleton className="absolute inset-0" />
|
||||
)}
|
||||
{cameraPreviews && !currentPreview && (
|
||||
<div className="absolute inset-0 text-white rounded-2xl flex justify-center items-center">
|
||||
No Preview Found
|
||||
@ -362,7 +356,9 @@ class PreviewVideoController extends PreviewController {
|
||||
}
|
||||
|
||||
override setNewPreviewStartTime(time: number) {
|
||||
this.timeToSeek = time;
|
||||
if (this.preview) {
|
||||
this.timeToSeek = time - this.preview.start;
|
||||
}
|
||||
}
|
||||
|
||||
previewReady() {
|
||||
@ -468,7 +464,7 @@ function PreviewFramesPlayer({
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`relative w-full ${className ?? ""} ${onClick ? "cursor-pointer" : ""}`}
|
||||
className={`relative ${className ?? ""} ${onClick ? "cursor-pointer" : ""}`}
|
||||
onClick={onClick}
|
||||
>
|
||||
<img
|
||||
|
||||
@ -9,7 +9,6 @@ import PreviewPlayer, { PreviewController } from "../PreviewPlayer";
|
||||
import { DynamicVideoController } from "./DynamicVideoController";
|
||||
import HlsVideoPlayer from "../HlsVideoPlayer";
|
||||
import { TimeRange, Timeline } from "@/types/timeline";
|
||||
import { isDesktop } from "react-device-detect";
|
||||
|
||||
/**
|
||||
* Dynamically switches between video playback and scrubbing preview player.
|
||||
@ -41,26 +40,6 @@ export default function DynamicVideoPlayer({
|
||||
const apiHost = useApiHost();
|
||||
const { data: config } = useSWR<FrigateConfig>("config");
|
||||
|
||||
// playback behavior
|
||||
|
||||
const grow = useMemo(() => {
|
||||
if (!config) {
|
||||
return "aspect-video";
|
||||
}
|
||||
|
||||
const aspectRatio =
|
||||
config.cameras[camera].detect.width /
|
||||
config.cameras[camera].detect.height;
|
||||
|
||||
if (aspectRatio > 2) {
|
||||
return "";
|
||||
} else if (aspectRatio < 16 / 9) {
|
||||
return isDesktop ? "" : "aspect-tall";
|
||||
} else {
|
||||
return "aspect-video";
|
||||
}
|
||||
}, [camera, config]);
|
||||
|
||||
// controlling playback
|
||||
|
||||
const playerRef = useRef<HTMLVideoElement | null>(null);
|
||||
@ -169,9 +148,9 @@ export default function DynamicVideoPlayer({
|
||||
}, [controller, recordings]);
|
||||
|
||||
return (
|
||||
<div className={`w-full relative ${className ?? ""}`}>
|
||||
<>
|
||||
<HlsVideoPlayer
|
||||
className={isDesktop ? `w-full ${grow}` : "max-h-[50dvh]"}
|
||||
className={className ?? ""}
|
||||
videoRef={playerRef}
|
||||
visible={!(isScrubbing || isLoading)}
|
||||
currentSource={source}
|
||||
@ -195,7 +174,7 @@ export default function DynamicVideoPlayer({
|
||||
)}
|
||||
</HlsVideoPlayer>
|
||||
<PreviewPlayer
|
||||
className={`${isScrubbing || isLoading ? "visible" : "hidden"} ${isDesktop ? `w-full ${grow}` : "max-h-[50dvh]"}`}
|
||||
className={`${isScrubbing || isLoading ? "visible" : "hidden"} ${className}`}
|
||||
camera={camera}
|
||||
timeRange={timeRange}
|
||||
cameraPreviews={cameraPreviews}
|
||||
@ -205,6 +184,6 @@ export default function DynamicVideoPlayer({
|
||||
setPreviewController(previewController);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -338,6 +338,7 @@ export default function Events() {
|
||||
reviewItems={reviews}
|
||||
reviewSummary={reviewSummary}
|
||||
allPreviews={allPreviews}
|
||||
timeRange={selectedTimeRange}
|
||||
filter={reviewFilter}
|
||||
updateFilter={onUpdateFilter}
|
||||
/>
|
||||
|
||||
@ -53,7 +53,7 @@ function Logs() {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="size-full flex flex-col pr-2">
|
||||
<div className="size-full p-2 flex flex-col">
|
||||
<div className="flex justify-between items-center">
|
||||
<ToggleGroup
|
||||
className="*:px-3 *:py-4 *:rounded-2xl"
|
||||
|
||||
@ -121,18 +121,22 @@ export function getTimelineItemDescription(timelineItem: Timeline) {
|
||||
}
|
||||
}
|
||||
|
||||
export function getChunkedTimeDay(timestamp: number) {
|
||||
const endOfThisHour = new Date();
|
||||
endOfThisHour.setHours(endOfThisHour.getHours() + 1, 0, 0, 0);
|
||||
/**
|
||||
*
|
||||
* @param timeRange
|
||||
* @returns timeRange chunked into individual hours
|
||||
*/
|
||||
export function getChunkedTimeDay(timeRange: TimeRange): TimeRange[] {
|
||||
const endOfThisHour = new Date(timeRange.before * 1000);
|
||||
endOfThisHour.setSeconds(0, 0);
|
||||
const data: TimeRange[] = [];
|
||||
const startDay = new Date(timestamp * 1000);
|
||||
startDay.setHours(0, 0, 0, 0);
|
||||
const startTimestamp = startDay.getTime() / 1000;
|
||||
const startDay = new Date(timeRange.after * 1000);
|
||||
startDay.setMinutes(0, 0, 0);
|
||||
let start = startDay.getTime() / 1000;
|
||||
let end = 0;
|
||||
|
||||
for (let i = 0; i < 24; i++) {
|
||||
startDay.setHours(startDay.getHours() + 1);
|
||||
startDay.setHours(startDay.getHours() + 1, 0, 0, 0);
|
||||
|
||||
if (startDay > endOfThisHour) {
|
||||
break;
|
||||
@ -146,7 +150,12 @@ export function getChunkedTimeDay(timestamp: number) {
|
||||
start = startDay.getTime() / 1000;
|
||||
}
|
||||
|
||||
return { start: startTimestamp, end, ranges: data };
|
||||
data.push({
|
||||
after: start,
|
||||
before: Math.floor(timeRange.before),
|
||||
});
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
export function getChunkedTimeRange(
|
||||
|
||||
@ -46,7 +46,7 @@ type EventViewProps = {
|
||||
reviews?: ReviewSegment[];
|
||||
reviewSummary?: ReviewSummary;
|
||||
relevantPreviews?: Preview[];
|
||||
timeRange: { before: number; after: number };
|
||||
timeRange: TimeRange;
|
||||
filter?: ReviewFilter;
|
||||
severity: ReviewSeverity;
|
||||
startTime?: number;
|
||||
@ -205,7 +205,7 @@ export default function EventView({
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col size-full">
|
||||
<div className="py-2 flex flex-col size-full">
|
||||
<div className="h-11 px-2 relative flex justify-between items-center">
|
||||
{isMobile && (
|
||||
<Logo className="absolute inset-x-1/2 -translate-x-1/2 h-8" />
|
||||
@ -492,7 +492,7 @@ function DetectionReview({
|
||||
<>
|
||||
<div
|
||||
ref={contentRef}
|
||||
className="mt-2 flex flex-1 flex-wrap content-start gap-2 md:gap-4 overflow-y-auto no-scrollbar"
|
||||
className="flex flex-1 flex-wrap content-start gap-2 md:gap-4 overflow-y-auto no-scrollbar"
|
||||
>
|
||||
{filter?.before == undefined && (
|
||||
<NewReviewData
|
||||
@ -687,6 +687,8 @@ function MotionReview({
|
||||
[selectedRangeIdx, timeRangeSegments],
|
||||
);
|
||||
|
||||
const [previewStart, setPreviewStart] = useState(startTime);
|
||||
|
||||
const [scrubbing, setScrubbing] = useState(false);
|
||||
const [playing, setPlaying] = useState(false);
|
||||
|
||||
@ -702,9 +704,7 @@ function MotionReview({
|
||||
);
|
||||
|
||||
if (index != -1) {
|
||||
Object.values(videoPlayersRef.current).forEach((controller) => {
|
||||
controller.setNewPreviewStartTime(currentTime);
|
||||
});
|
||||
setPreviewStart(currentTime);
|
||||
setSelectedRangeIdx(index);
|
||||
}
|
||||
return;
|
||||
@ -713,7 +713,9 @@ function MotionReview({
|
||||
Object.values(videoPlayersRef.current).forEach((controller) => {
|
||||
controller.scrubToTimestamp(currentTime);
|
||||
});
|
||||
}, [currentTime, currentTimeRange, timeRangeSegments]);
|
||||
// only refresh when current time or available segments changes
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [currentTime, timeRangeSegments]);
|
||||
|
||||
// playback
|
||||
|
||||
@ -826,7 +828,7 @@ function MotionReview({
|
||||
className={`${detectionType ? `outline outline-3 outline-offset-1 outline-severity_${detectionType}` : "outline-0 shadow-none"} rounded-2xl ${grow}`}
|
||||
camera={camera.name}
|
||||
timeRange={currentTimeRange}
|
||||
startTime={startTime}
|
||||
startTime={previewStart}
|
||||
cameraPreviews={relevantPreviews || []}
|
||||
isScrubbing={scrubbing}
|
||||
onControllerReady={(controller) => {
|
||||
|
||||
@ -46,6 +46,7 @@ type RecordingViewProps = {
|
||||
startTime: number;
|
||||
reviewItems?: ReviewSegment[];
|
||||
reviewSummary?: ReviewSummary;
|
||||
timeRange: TimeRange;
|
||||
allCameras: string[];
|
||||
allPreviews?: Preview[];
|
||||
filter?: ReviewFilter;
|
||||
@ -56,6 +57,7 @@ export function RecordingView({
|
||||
startTime,
|
||||
reviewItems,
|
||||
reviewSummary,
|
||||
timeRange,
|
||||
allCameras,
|
||||
allPreviews,
|
||||
filter,
|
||||
@ -85,15 +87,18 @@ export function RecordingView({
|
||||
"timeline",
|
||||
);
|
||||
|
||||
const timeRange = useMemo(() => getChunkedTimeDay(startTime), [startTime]);
|
||||
const chunkedTimeRange = useMemo(
|
||||
() => getChunkedTimeDay(timeRange),
|
||||
[timeRange],
|
||||
);
|
||||
const [selectedRangeIdx, setSelectedRangeIdx] = useState(
|
||||
timeRange.ranges.findIndex((chunk) => {
|
||||
chunkedTimeRange.findIndex((chunk) => {
|
||||
return chunk.after <= startTime && chunk.before >= startTime;
|
||||
}),
|
||||
);
|
||||
const currentTimeRange = useMemo(
|
||||
() => timeRange.ranges[selectedRangeIdx],
|
||||
[selectedRangeIdx, timeRange],
|
||||
() => chunkedTimeRange[selectedRangeIdx],
|
||||
[selectedRangeIdx, chunkedTimeRange],
|
||||
);
|
||||
|
||||
// export
|
||||
@ -108,10 +113,10 @@ export function RecordingView({
|
||||
return;
|
||||
}
|
||||
|
||||
if (selectedRangeIdx < timeRange.ranges.length - 1) {
|
||||
if (selectedRangeIdx < chunkedTimeRange.length - 1) {
|
||||
setSelectedRangeIdx(selectedRangeIdx + 1);
|
||||
}
|
||||
}, [selectedRangeIdx, timeRange]);
|
||||
}, [selectedRangeIdx, chunkedTimeRange]);
|
||||
|
||||
// scrubbing and timeline state
|
||||
|
||||
@ -121,7 +126,7 @@ export function RecordingView({
|
||||
|
||||
const updateSelectedSegment = useCallback(
|
||||
(currentTime: number, updateStartTime: boolean) => {
|
||||
const index = timeRange.ranges.findIndex(
|
||||
const index = chunkedTimeRange.findIndex(
|
||||
(seg) => seg.after <= currentTime && seg.before >= currentTime,
|
||||
);
|
||||
|
||||
@ -133,7 +138,7 @@ export function RecordingView({
|
||||
setSelectedRangeIdx(index);
|
||||
}
|
||||
},
|
||||
[timeRange],
|
||||
[chunkedTimeRange],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
@ -189,40 +194,53 @@ export function RecordingView({
|
||||
|
||||
// motion timeline data
|
||||
|
||||
const getCameraAspect = useCallback(
|
||||
(cam: string) => {
|
||||
if (!config) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const camera = config.cameras[cam];
|
||||
|
||||
if (!camera) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
return camera.detect.width / camera.detect.height;
|
||||
},
|
||||
[config],
|
||||
);
|
||||
|
||||
const mainCameraAspect = useMemo(() => {
|
||||
if (!config) {
|
||||
const aspectRatio = getCameraAspect(mainCamera);
|
||||
|
||||
if (!aspectRatio) {
|
||||
return "normal";
|
||||
}
|
||||
|
||||
const aspectRatio =
|
||||
config.cameras[mainCamera].detect.width /
|
||||
config.cameras[mainCamera].detect.height;
|
||||
|
||||
if (aspectRatio > 2) {
|
||||
} else if (aspectRatio > 2) {
|
||||
return "wide";
|
||||
} else if (aspectRatio < 16 / 9) {
|
||||
return "tall";
|
||||
} else {
|
||||
return "normal";
|
||||
}
|
||||
}, [config, mainCamera]);
|
||||
}, [getCameraAspect, mainCamera]);
|
||||
|
||||
const grow = useMemo(() => {
|
||||
if (isMobile) {
|
||||
return "";
|
||||
}
|
||||
|
||||
if (mainCameraAspect == "wide") {
|
||||
return "w-full aspect-wide";
|
||||
} else if (isDesktop && mainCameraAspect == "tall") {
|
||||
return "h-full aspect-tall flex flex-col justify-center";
|
||||
} else if (mainCameraAspect == "tall") {
|
||||
if (isDesktop) {
|
||||
return "size-full aspect-tall flex flex-col justify-center";
|
||||
} else {
|
||||
return "size-full";
|
||||
}
|
||||
} else {
|
||||
return "w-full aspect-video";
|
||||
}
|
||||
}, [mainCameraAspect]);
|
||||
|
||||
return (
|
||||
<div ref={contentRef} className="size-full flex flex-col">
|
||||
<div ref={contentRef} className="size-full pt-2 flex flex-col">
|
||||
<Toaster />
|
||||
<div
|
||||
className={`w-full h-11 px-2 relative flex items-center justify-between`}
|
||||
@ -251,10 +269,16 @@ export function RecordingView({
|
||||
<ExportDialog
|
||||
camera={mainCamera}
|
||||
currentTime={currentTime}
|
||||
latestTime={timeRange.end}
|
||||
latestTime={timeRange.before}
|
||||
mode={exportMode}
|
||||
range={exportRange}
|
||||
setRange={setExportRange}
|
||||
setRange={(range) => {
|
||||
setExportRange(range);
|
||||
|
||||
if (range != undefined) {
|
||||
mainControllerRef.current?.pause();
|
||||
}
|
||||
}}
|
||||
setMode={setExportMode}
|
||||
/>
|
||||
)}
|
||||
@ -303,7 +327,7 @@ export function RecordingView({
|
||||
camera={mainCamera}
|
||||
filter={filter}
|
||||
currentTime={currentTime}
|
||||
latestTime={timeRange.end}
|
||||
latestTime={timeRange.before}
|
||||
mode={exportMode}
|
||||
range={exportRange}
|
||||
onUpdateFilter={updateFilter}
|
||||
@ -314,19 +338,26 @@ export function RecordingView({
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`h-full flex my-2 justify-center overflow-hidden ${isDesktop ? "" : "flex-col gap-2"}`}
|
||||
className={`h-full flex justify-center overflow-hidden ${isDesktop ? "" : "flex-col gap-2"}`}
|
||||
>
|
||||
<div className="flex flex-1 flex-wrap">
|
||||
<div className={`${isDesktop ? "w-[80%]" : ""} flex flex-1 flex-wrap`}>
|
||||
<div
|
||||
className={`size-full flex px-2 items-center ${mainCameraAspect == "tall" ? "flex-row justify-evenly" : "flex-col justify-center"}`}
|
||||
className={`size-full flex items-center ${mainCameraAspect == "tall" ? "flex-row justify-evenly" : "flex-col justify-center gap-2"}`}
|
||||
>
|
||||
<div
|
||||
key={mainCamera}
|
||||
className={
|
||||
isDesktop
|
||||
? `flex justify-center mb-5 ${mainCameraAspect == "tall" ? "h-full" : "w-[78%]"}`
|
||||
: `w-full ${mainCameraAspect == "wide" ? "" : "aspect-video"}`
|
||||
? `${mainCameraAspect == "tall" ? "h-[90%]" : mainCameraAspect == "wide" ? "w-full" : "w-[78%]"} px-4 flex justify-center`
|
||||
: `w-full pt-2 ${mainCameraAspect == "wide" ? "aspect-wide" : "aspect-video"}`
|
||||
}
|
||||
style={{
|
||||
aspectRatio: isDesktop
|
||||
? mainCameraAspect == "tall"
|
||||
? getCameraAspect(mainCamera)
|
||||
: undefined
|
||||
: Math.max(1, getCameraAspect(mainCamera) ?? 0),
|
||||
}}
|
||||
>
|
||||
<DynamicVideoPlayer
|
||||
className={grow}
|
||||
@ -351,33 +382,38 @@ export function RecordingView({
|
||||
</div>
|
||||
{isDesktop && (
|
||||
<div
|
||||
className={`flex gap-2 ${mainCameraAspect == "tall" ? "h-full w-[16%] flex-col overflow-y-auto" : "w-full justify-center overflow-x-auto"}`}
|
||||
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"} `}
|
||||
>
|
||||
{allCameras.map((cam) => {
|
||||
if (cam !== mainCamera) {
|
||||
return (
|
||||
<div key={cam}>
|
||||
<PreviewPlayer
|
||||
className={
|
||||
mainCameraAspect == "tall"
|
||||
? "size-full"
|
||||
: "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>
|
||||
);
|
||||
if (cam == mainCamera) {
|
||||
return;
|
||||
}
|
||||
return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={cam}
|
||||
className={
|
||||
mainCameraAspect == "tall" ? undefined : "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>
|
||||
)}
|
||||
@ -406,7 +442,7 @@ type TimelineProps = {
|
||||
contentRef: MutableRefObject<HTMLDivElement | null>;
|
||||
mainCamera: string;
|
||||
timelineType: TimelineType;
|
||||
timeRange: { start: number; end: number };
|
||||
timeRange: TimeRange;
|
||||
mainCameraReviewItems: ReviewSegment[];
|
||||
currentTime: number;
|
||||
exportRange?: TimeRange;
|
||||
@ -429,8 +465,8 @@ function Timeline({
|
||||
const { data: motionData } = useSWR<MotionData[]>([
|
||||
"review/activity/motion",
|
||||
{
|
||||
before: timeRange.end,
|
||||
after: timeRange.start,
|
||||
before: timeRange.before,
|
||||
after: timeRange.after,
|
||||
scale: SEGMENT_DURATION / 2,
|
||||
cameras: mainCamera,
|
||||
},
|
||||
@ -455,7 +491,7 @@ function Timeline({
|
||||
<div
|
||||
className={`${
|
||||
isDesktop
|
||||
? `${timelineType == "timeline" ? "w-[100px]" : "w-60"} mt-2 overflow-y-auto no-scrollbar`
|
||||
? `${timelineType == "timeline" ? "w-[100px]" : "w-60"} overflow-y-auto no-scrollbar`
|
||||
: "flex-grow overflow-hidden"
|
||||
} relative`}
|
||||
>
|
||||
@ -465,8 +501,8 @@ function Timeline({
|
||||
<MotionReviewTimeline
|
||||
segmentDuration={30}
|
||||
timestampSpread={15}
|
||||
timelineStart={timeRange.end}
|
||||
timelineEnd={timeRange.start}
|
||||
timelineStart={timeRange.before}
|
||||
timelineEnd={timeRange.after}
|
||||
showHandlebar={exportRange == undefined}
|
||||
showExportHandles={exportRange != undefined}
|
||||
exportStartTime={exportRange?.after}
|
||||
@ -496,7 +532,11 @@ function Timeline({
|
||||
key={review.id}
|
||||
event={review}
|
||||
currentTime={currentTime}
|
||||
onClick={() => setCurrentTime(review.start_time)}
|
||||
onClick={() => {
|
||||
setScrubbing(true);
|
||||
setCurrentTime(review.start_time);
|
||||
setScrubbing(false);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
|
||||
@ -116,7 +116,7 @@ export default function LiveBirdseyeView() {
|
||||
className={
|
||||
fullscreen
|
||||
? `fixed inset-0 bg-black z-30`
|
||||
: `size-full flex flex-col ${isMobile ? "landscape:flex-row" : ""}`
|
||||
: `size-full p-2 flex flex-col ${isMobile ? "landscape:flex-row" : ""}`
|
||||
}
|
||||
>
|
||||
<div
|
||||
@ -128,11 +128,11 @@ export default function LiveBirdseyeView() {
|
||||
>
|
||||
{!fullscreen ? (
|
||||
<Button
|
||||
className={`rounded-lg ${isMobile ? "ml-2" : "ml-0"}`}
|
||||
size={isMobile ? "icon" : "default"}
|
||||
className={`rounded-lg flex items-center gap-2 ${isMobile ? "ml-2" : "ml-0"}`}
|
||||
size={isMobile ? "icon" : "sm"}
|
||||
onClick={() => navigate(-1)}
|
||||
>
|
||||
<IoMdArrowBack className="size-5 lg:mr-[10px]" />
|
||||
<IoMdArrowBack className="size-5" />
|
||||
{isDesktop && "Back"}
|
||||
</Button>
|
||||
) : (
|
||||
|
||||
@ -204,7 +204,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
|
||||
className={
|
||||
fullscreen
|
||||
? `fixed inset-0 bg-black z-30`
|
||||
: `size-full flex flex-col ${isMobile ? "landscape:flex-row" : ""}`
|
||||
: `size-full p-2 flex flex-col ${isMobile ? "landscape:flex-row" : ""}`
|
||||
}
|
||||
>
|
||||
<div
|
||||
@ -217,7 +217,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
|
||||
{!fullscreen ? (
|
||||
<Button
|
||||
className={`rounded-lg ${isMobile ? "ml-2" : "ml-0"}`}
|
||||
size={isMobile ? "icon" : "default"}
|
||||
size={isMobile ? "icon" : "sm"}
|
||||
onClick={() => navigate(-1)}
|
||||
>
|
||||
<IoMdArrowBack className="size-5 lg:mr-[10px]" />
|
||||
@ -228,7 +228,7 @@ export default function LiveCameraView({ camera }: LiveCameraViewProps) {
|
||||
)}
|
||||
<TooltipProvider>
|
||||
<div
|
||||
className={`flex flex-row items-center gap-2 mr-1 *:rounded-lg ${isMobile ? "landscape:flex-col" : ""}`}
|
||||
className={`flex flex-row items-center gap-2 *:rounded-lg ${isMobile ? "landscape:flex-col" : ""}`}
|
||||
>
|
||||
{!isIOS && (
|
||||
<CameraFeatureToggle
|
||||
|
||||
@ -129,9 +129,9 @@ export default function LiveDashboardView({
|
||||
const birdseyeConfig = useMemo(() => config?.birdseye, [config]);
|
||||
|
||||
return (
|
||||
<div className="size-full overflow-y-auto">
|
||||
<div className="size-full p-2 overflow-y-auto">
|
||||
{isMobile && (
|
||||
<div className="h-11 px-2 relative flex items-center justify-between">
|
||||
<div className="h-11 relative flex items-center justify-between">
|
||||
<Logo className="absolute inset-x-1/2 -translate-x-1/2 h-8" />
|
||||
<CameraGroupSelector />
|
||||
<div className="flex items-center gap-1">
|
||||
@ -164,7 +164,7 @@ export default function LiveDashboardView({
|
||||
{events && events.length > 0 && (
|
||||
<ScrollArea>
|
||||
<TooltipProvider>
|
||||
<div className="flex gap-2 items-center">
|
||||
<div className="px-1 flex gap-2 items-center">
|
||||
{events.map((event) => {
|
||||
return <AnimatedEventCard key={event.id} event={event} />;
|
||||
})}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user