Fix delayed preview not showing (#13295)

This commit is contained in:
Nicolas Mowen 2024-08-23 08:51:59 -06:00
parent 1529ee59fe
commit f8fd746678
2 changed files with 22 additions and 15 deletions

View File

@ -16,7 +16,10 @@ import { isAndroid, isChrome, isMobile } from "react-device-detect";
import { TimeRange } from "@/types/timeline"; import { TimeRange } from "@/types/timeline";
import { Skeleton } from "../ui/skeleton"; import { Skeleton } from "../ui/skeleton";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { usePreviewForTimeRange } from "@/hooks/use-camera-previews"; import {
getPreviewForTimeRange,
usePreviewForTimeRange,
} from "@/hooks/use-camera-previews";
type PreviewPlayerProps = { type PreviewPlayerProps = {
className?: string; className?: string;
@ -243,12 +246,7 @@ function PreviewVideoPlayer({
return; return;
} }
const preview = cameraPreviews.find( const preview = getPreviewForTimeRange(cameraPreviews, camera, timeRange);
(preview) =>
preview.camera == camera &&
Math.round(preview.start) >= timeRange.after &&
Math.floor(preview.end) <= timeRange.before,
);
if (preview != currentPreview) { if (preview != currentPreview) {
controller.newPreviewLoaded = false; controller.newPreviewLoaded = false;

View File

@ -38,17 +38,26 @@ export function useCameraPreviews(
// it is not falsely thrown out. // it is not falsely thrown out.
const PREVIEW_END_BUFFER = 5; // seconds const PREVIEW_END_BUFFER = 5; // seconds
export function usePreviewForTimeRange( export function getPreviewForTimeRange(
allPreviews: Preview[], allPreviews: Preview[],
camera: string, camera: string,
timeRange: TimeRange, timeRange: TimeRange,
) { ) {
return useMemo(() => {
return allPreviews.find( return allPreviews.find(
(preview) => (preview) =>
preview.camera == camera && preview.camera == camera &&
Math.ceil(preview.start) >= timeRange.after && Math.ceil(preview.start) >= timeRange.after &&
Math.floor(preview.end) <= timeRange.before + PREVIEW_END_BUFFER, Math.floor(preview.end) <= timeRange.before + PREVIEW_END_BUFFER,
); );
}, [allPreviews, camera, timeRange]); }
export function usePreviewForTimeRange(
allPreviews: Preview[],
camera: string,
timeRange: TimeRange,
) {
return useMemo(
() => getPreviewForTimeRange(allPreviews, camera, timeRange),
[allPreviews, camera, timeRange],
);
} }