mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-02-08 20:25:26 +03:00
Merge branch 'dev' into web-deps
This commit is contained in:
Nicolas Mowen
GitHub
commit
be81c9fe10
57
web/package-lock.json
generated
57
web/package-lock.json
generated
@ -27,6 +27,7 @@
|
||||
"@radix-ui/react-toggle": "^1.0.3",
|
||||
"@radix-ui/react-toggle-group": "^1.0.4",
|
||||
"@radix-ui/react-tooltip": "^1.0.7",
|
||||
"@types/react-lazy-load-image-component": "^1.6.3",
|
||||
"apexcharts": "^3.45.1",
|
||||
"axios": "^1.6.2",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
@ -45,6 +46,7 @@
|
||||
"react-dom": "^18.2.0",
|
||||
"react-hook-form": "^7.48.2",
|
||||
"react-icons": "^4.12.0",
|
||||
"react-lazy-load-image-component": "^1.6.0",
|
||||
"react-router-dom": "^6.20.1",
|
||||
"react-transition-group": "^4.4.5",
|
||||
"react-use-websocket": "^4.5.0",
|
||||
@ -2594,14 +2596,12 @@
|
||||
"node_modules/@types/prop-types": {
|
||||
"version": "15.7.11",
|
||||
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz",
|
||||
"integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==",
|
||||
"devOptional": true
|
||||
"integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng=="
|
||||
},
|
||||
"node_modules/@types/react": {
|
||||
"version": "18.2.41",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.41.tgz",
|
||||
"integrity": "sha512-CwOGr/PiLiNBxEBqpJ7fO3kocP/2SSuC9fpH5K7tusrg4xPSRT/193rzolYwQnTN02We/ATXKnb6GqA5w4fRxw==",
|
||||
"devOptional": true,
|
||||
"dependencies": {
|
||||
"@types/prop-types": "*",
|
||||
"@types/scheduler": "*",
|
||||
@ -2627,6 +2627,15 @@
|
||||
"react-icons": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-lazy-load-image-component": {
|
||||
"version": "1.6.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-lazy-load-image-component/-/react-lazy-load-image-component-1.6.3.tgz",
|
||||
"integrity": "sha512-HsIsYz7yWWTh/bftdzGnijKD26JyofLRqM/RM80sxs7Gk13G83ew8R/ra2XzXuiZfjNEjAq/Va+NBHFF9ciwxA==",
|
||||
"dependencies": {
|
||||
"@types/react": "*",
|
||||
"csstype": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-transition-group": {
|
||||
"version": "4.4.10",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz",
|
||||
@ -2639,8 +2648,7 @@
|
||||
"node_modules/@types/scheduler": {
|
||||
"version": "0.16.8",
|
||||
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
|
||||
"integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==",
|
||||
"devOptional": true
|
||||
"integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A=="
|
||||
},
|
||||
"node_modules/@types/semver": {
|
||||
"version": "7.5.6",
|
||||
@ -5457,12 +5465,38 @@
|
||||
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/lodash.debounce": {
|
||||
"version": "4.0.8",
|
||||
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
|
||||
"integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
|
||||
},
|
||||
"node_modules/lodash.merge": {
|
||||
"version": "4.6.2",
|
||||
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
|
||||
"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/lodash.throttle": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
|
||||
"integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
|
||||
},
|
||||
"node_modules/log-symbols": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
|
||||
"integrity": "sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"chalk": "^4.1.0",
|
||||
"is-unicode-supported": "^0.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/loose-envify": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
|
||||
@ -6690,6 +6724,19 @@
|
||||
"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/react-lazy-load-image-component": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/react-lazy-load-image-component/-/react-lazy-load-image-component-1.6.0.tgz",
|
||||
"integrity": "sha512-8KFkDTgjh+0+PVbH+cx0AgxLGbdTsxWMnxXzU5HEUztqewk9ufQAu8cstjZhyvtMIPsdMcPZfA0WAa7HtjQbBQ==",
|
||||
"dependencies": {
|
||||
"lodash.debounce": "^4.0.8",
|
||||
"lodash.throttle": "^4.1.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^15.x.x || ^16.x.x || ^17.x.x || ^18.x.x",
|
||||
"react-dom": "^15.x.x || ^16.x.x || ^17.x.x || ^18.x.x"
|
||||
}
|
||||
},
|
||||
"node_modules/react-remove-scroll": {
|
||||
"version": "2.5.5",
|
||||
"resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz",
|
||||
|
||||
@ -32,6 +32,7 @@
|
||||
"@radix-ui/react-toggle": "^1.0.3",
|
||||
"@radix-ui/react-toggle-group": "^1.0.4",
|
||||
"@radix-ui/react-tooltip": "^1.0.7",
|
||||
"@types/react-lazy-load-image-component": "^1.6.3",
|
||||
"apexcharts": "^3.45.1",
|
||||
"axios": "^1.6.2",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
@ -50,6 +51,7 @@
|
||||
"react-dom": "^18.2.0",
|
||||
"react-hook-form": "^7.48.2",
|
||||
"react-icons": "^4.12.0",
|
||||
"react-lazy-load-image-component": "^1.6.0",
|
||||
"react-router-dom": "^6.20.1",
|
||||
"react-transition-group": "^4.4.5",
|
||||
"react-use-websocket": "^4.5.0",
|
||||
|
||||
@ -199,8 +199,6 @@ export default function DynamicVideoPlayer({
|
||||
return <ActivityIndicator />;
|
||||
}
|
||||
|
||||
//console.log(`${config.detect.width / config.detect.height < 1.7 ? "16:9" : undefined}`)
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<div
|
||||
@ -228,7 +226,7 @@ export default function DynamicVideoPlayer({
|
||||
player.on("timeupdate", () => {
|
||||
controller.updateProgress(player.currentTime() || 0);
|
||||
});
|
||||
player.on("ended", () => controller.fireClipEndEvent());
|
||||
player.on("ended", () => controller.fireClipChangeEvent("forward"));
|
||||
|
||||
if (onControllerReady) {
|
||||
onControllerReady(controller);
|
||||
@ -264,6 +262,7 @@ export default function DynamicVideoPlayer({
|
||||
previewRef.current = player;
|
||||
player.pause();
|
||||
player.on("seeked", () => controller.finishedSeeking());
|
||||
player.on("loadeddata", () => controller.previewReady());
|
||||
}}
|
||||
onDispose={() => {
|
||||
previewRef.current = undefined;
|
||||
@ -285,7 +284,8 @@ export class DynamicVideoController {
|
||||
// playback
|
||||
private recordings: Recording[] = [];
|
||||
private onPlaybackTimestamp: ((time: number) => void) | undefined = undefined;
|
||||
private onClipEnded: (() => void) | undefined = undefined;
|
||||
private onClipChange: ((dir: "forward" | "backward") => void) | undefined =
|
||||
undefined;
|
||||
private annotationOffset: number;
|
||||
private timeToStart: number | undefined = undefined;
|
||||
|
||||
@ -293,6 +293,7 @@ export class DynamicVideoController {
|
||||
private preview: Preview | undefined = undefined;
|
||||
private timeToSeek: number | undefined = undefined;
|
||||
private seeking = false;
|
||||
private readyToScrub = true;
|
||||
|
||||
constructor(
|
||||
playerRef: MutableRefObject<Player | undefined>,
|
||||
@ -395,30 +396,50 @@ export class DynamicVideoController {
|
||||
this.onPlaybackTimestamp = listener;
|
||||
}
|
||||
|
||||
onClipEndedEvent(listener: () => void) {
|
||||
this.onClipEnded = listener;
|
||||
onClipChangedEvent(listener: (dir: "forward" | "backward") => void) {
|
||||
this.onClipChange = listener;
|
||||
}
|
||||
|
||||
fireClipEndEvent() {
|
||||
if (this.onClipEnded) {
|
||||
this.onClipEnded();
|
||||
fireClipChangeEvent(dir: "forward" | "backward") {
|
||||
if (this.onClipChange) {
|
||||
this.onClipChange(dir);
|
||||
}
|
||||
}
|
||||
|
||||
scrubToTimestamp(time: number) {
|
||||
if (!this.preview) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.readyToScrub) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (time > this.preview.end) {
|
||||
if (this.playerMode == "scrubbing") {
|
||||
this.playerMode = "playback";
|
||||
this.setScrubbing(false);
|
||||
this.timeToSeek = undefined;
|
||||
this.seeking = false;
|
||||
this.readyToScrub = false;
|
||||
this.fireClipChangeEvent("forward");
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.playerMode != "scrubbing") {
|
||||
this.playerMode = "scrubbing";
|
||||
this.playerRef.current?.pause();
|
||||
this.setScrubbing(true);
|
||||
}
|
||||
|
||||
if (this.preview) {
|
||||
if (this.seeking) {
|
||||
this.timeToSeek = time;
|
||||
} else {
|
||||
this.previewRef.current?.currentTime(time - this.preview.start);
|
||||
this.seeking = true;
|
||||
}
|
||||
if (this.seeking) {
|
||||
this.timeToSeek = time;
|
||||
} else {
|
||||
this.previewRef.current?.currentTime(
|
||||
Math.max(0, time - this.preview.start)
|
||||
);
|
||||
this.seeking = true;
|
||||
}
|
||||
}
|
||||
|
||||
@ -438,4 +459,9 @@ export class DynamicVideoController {
|
||||
this.seeking = false;
|
||||
}
|
||||
}
|
||||
|
||||
previewReady() {
|
||||
this.previewRef.current?.pause();
|
||||
this.readyToScrub = true;
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,7 +7,7 @@ import { getIconForLabel, getIconForSubLabel } from "@/utils/iconUtil";
|
||||
import TimeAgo from "../dynamic/TimeAgo";
|
||||
import useSWR from "swr";
|
||||
import { FrigateConfig } from "@/types/frigateConfig";
|
||||
import { isMobile, isSafari } from "react-device-detect";
|
||||
import { isFirefox, isMobile, isSafari } from "react-device-detect";
|
||||
import Chip from "../Chip";
|
||||
import {
|
||||
ContextMenu,
|
||||
@ -19,6 +19,8 @@ import {
|
||||
import { LuCheckSquare, LuFileUp, LuTrash } from "react-icons/lu";
|
||||
import axios from "axios";
|
||||
import { useFormattedTimestamp } from "@/hooks/use-date-utils";
|
||||
import { Skeleton } from "../ui/skeleton";
|
||||
import { LazyLoadImage } from "react-lazy-load-image-component";
|
||||
|
||||
type PreviewPlayerProps = {
|
||||
review: ReviewSegment;
|
||||
@ -49,6 +51,7 @@ export default function PreviewThumbnailPlayer({
|
||||
const [hoverTimeout, setHoverTimeout] = useState<NodeJS.Timeout | null>();
|
||||
const [playback, setPlayback] = useState(false);
|
||||
const [progress, setProgress] = useState(0);
|
||||
const [imgLoaded, setImgLoaded] = useState(false);
|
||||
|
||||
const playingBack = useMemo(() => playback, [playback, autoPlayback]);
|
||||
|
||||
@ -110,7 +113,7 @@ export default function PreviewThumbnailPlayer({
|
||||
onClick={onClick}
|
||||
>
|
||||
{playingBack && (
|
||||
<div className="absolute left-0 top-0 right-0 bottom-0">
|
||||
<div className="absolute left-0 top-0 right-0 bottom-0 animate-in fade-in">
|
||||
<PreviewContent
|
||||
review={review}
|
||||
relevantPreview={relevantPreview}
|
||||
@ -119,37 +122,48 @@ export default function PreviewThumbnailPlayer({
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<img
|
||||
<LazyLoadImage
|
||||
className={`w-full h-full transition-opacity ${
|
||||
playingBack ? "opacity-0" : "opacity-100"
|
||||
}`}
|
||||
loading="lazy"
|
||||
src={`${apiHost}${review.thumb_path.replace(
|
||||
"/media/frigate/",
|
||||
""
|
||||
)}`}
|
||||
onLoad={() => {
|
||||
setImgLoaded(true);
|
||||
}}
|
||||
placeholder={<Skeleton className="w-full h-full rounded-xl" />}
|
||||
/>
|
||||
{(review.severity == "alert" || review.severity == "detection") && (
|
||||
<Chip className="absolute top-2 left-2 flex gap-1 bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500 z-0">
|
||||
{review.data.objects.map((object) => {
|
||||
return getIconForLabel(object, "w-3 h-3 text-white");
|
||||
})}
|
||||
{review.data.audio.map((audio) => {
|
||||
return getIconForLabel(audio, "w-3 h-3 text-white");
|
||||
})}
|
||||
{review.data.sub_labels?.map((sub) => {
|
||||
return getIconForSubLabel(sub, "w-3 h-3 text-white");
|
||||
})}
|
||||
</Chip>
|
||||
|
||||
{!playingBack && imgLoaded && (
|
||||
<>
|
||||
<div className="absolute top-0 left-0 right-0 rounded-t-l z-10 w-full h-[30%] bg-gradient-to-b from-black/60 to-transparent pointer-events-none animate-in fade-in">
|
||||
<div className="flex h-full justify-between items-start mx-3 pb-1 text-white text-sm ">
|
||||
{(review.severity == "alert" ||
|
||||
review.severity == "detection") && (
|
||||
<Chip className="absolute top-2 left-2 flex gap-1 bg-gradient-to-br from-gray-400 to-gray-500 bg-gray-500 z-0">
|
||||
{review.data.objects.map((object) => {
|
||||
return getIconForLabel(object, "w-3 h-3 text-white");
|
||||
})}
|
||||
{review.data.audio.map((audio) => {
|
||||
return getIconForLabel(audio, "w-3 h-3 text-white");
|
||||
})}
|
||||
{review.data.sub_labels?.map((sub) => {
|
||||
return getIconForSubLabel(sub, "w-3 h-3 text-white");
|
||||
})}
|
||||
</Chip>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute bottom-0 left-0 right-0 rounded-b-l z-10 w-full h-[20%] bg-gradient-to-t from-black/60 to-transparent pointer-events-none animate-in fade-in">
|
||||
<div className="flex h-full justify-between items-end mx-3 pb-1 text-white text-sm ">
|
||||
<TimeAgo time={review.start_time * 1000} dense />
|
||||
{formattedDate}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{!playingBack && (
|
||||
<div className="absolute left-[6px] right-[6px] bottom-1 flex justify-between text-white">
|
||||
<TimeAgo time={review.start_time * 1000} dense />
|
||||
{formattedDate}
|
||||
</div>
|
||||
)}
|
||||
<div className="absolute top-0 left-0 right-0 rounded-2xl z-10 w-full h-[30%] bg-gradient-to-b from-black/20 to-transparent pointer-events-none" />
|
||||
<div className="absolute bottom-0 left-0 right-0 rounded-2xl z-10 w-full h-[10%] bg-gradient-to-t from-black/20 to-transparent pointer-events-none" />
|
||||
{playingBack && (
|
||||
<Slider
|
||||
className="absolute left-0 right-0 bottom-0 z-10"
|
||||
@ -159,8 +173,8 @@ export default function PreviewThumbnailPlayer({
|
||||
max={100}
|
||||
/>
|
||||
)}
|
||||
{!playingBack && review.has_been_reviewed && (
|
||||
<div className="absolute left-0 top-0 bottom-0 right-0 bg-black bg-opacity-60" />
|
||||
{!playingBack && imgLoaded && review.has_been_reviewed && (
|
||||
<div className="absolute left-0 top-0 bottom-0 right-0 z-10 bg-black bg-opacity-60" />
|
||||
)}
|
||||
</div>
|
||||
</ContextMenuTrigger>
|
||||
@ -192,7 +206,10 @@ function PreviewContent({
|
||||
}
|
||||
|
||||
// start with a bit of padding
|
||||
return Math.max(0, review.start_time - relevantPreview.start - PREVIEW_PADDING);
|
||||
return Math.max(
|
||||
0,
|
||||
review.start_time - relevantPreview.start - PREVIEW_PADDING
|
||||
);
|
||||
}, []);
|
||||
const [lastPercent, setLastPercent] = useState(0.0);
|
||||
|
||||
@ -203,7 +220,7 @@ function PreviewContent({
|
||||
return;
|
||||
}
|
||||
|
||||
if (isSafari) {
|
||||
if (isSafari || (isFirefox && isMobile)) {
|
||||
playerRef.current.pause();
|
||||
setManualPlayback(true);
|
||||
} else {
|
||||
@ -223,7 +240,8 @@ function PreviewContent({
|
||||
(playerRef.current?.currentTime || 0) - playerStartTime;
|
||||
|
||||
// end with a bit of padding
|
||||
const playerDuration = review.end_time - review.start_time + PREVIEW_PADDING;
|
||||
const playerDuration =
|
||||
review.end_time - review.start_time + PREVIEW_PADDING;
|
||||
const playerPercent = (playerProgress / playerDuration) * 100;
|
||||
|
||||
if (
|
||||
@ -340,9 +358,8 @@ function InProgressPreview({
|
||||
|
||||
if (!previewFrames || previewFrames.length == 0) {
|
||||
return (
|
||||
<img
|
||||
<LazyLoadImage
|
||||
className="h-full w-full"
|
||||
loading="lazy"
|
||||
src={`${apiHost}${review.thumb_path.replace("/media/frigate/", "")}`}
|
||||
/>
|
||||
);
|
||||
|
||||
15
web/src/components/ui/skeleton.tsx
Normal file
15
web/src/components/ui/skeleton.tsx
Normal file
@ -0,0 +1,15 @@
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Skeleton({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) {
|
||||
return (
|
||||
<div
|
||||
className={cn("animate-pulse rounded-md bg-muted", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Skeleton }
|
||||
@ -133,7 +133,7 @@ export default function DesktopEventView({
|
||||
setMinimap([...visibleTimestamps]);
|
||||
});
|
||||
},
|
||||
{ root: contentRef.current, threshold: 0.5 }
|
||||
{ root: contentRef.current, threshold: 0.1 }
|
||||
);
|
||||
|
||||
return () => {
|
||||
|
||||
@ -20,9 +20,13 @@ export default function DesktopRecordingView({
|
||||
relevantPreviews,
|
||||
}: DesktopRecordingViewProps) {
|
||||
const navigate = useNavigate();
|
||||
const controllerRef = useRef<DynamicVideoController | undefined>(undefined);
|
||||
const contentRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
// controller state
|
||||
|
||||
const [playerReady, setPlayerReady] = useState(false);
|
||||
const controllerRef = useRef<DynamicVideoController | undefined>(undefined);
|
||||
|
||||
// timeline time
|
||||
|
||||
const timeRange = useMemo(
|
||||
@ -44,12 +48,14 @@ export default function DesktopRecordingView({
|
||||
return;
|
||||
}
|
||||
|
||||
if (selectedRangeIdx < timeRange.ranges.length - 1) {
|
||||
controllerRef.current.onClipEndedEvent(() => {
|
||||
controllerRef.current.onClipChangedEvent((dir) => {
|
||||
if (dir == "forward" && selectedRangeIdx < timeRange.ranges.length - 1) {
|
||||
setSelectedRangeIdx(selectedRangeIdx + 1);
|
||||
});
|
||||
}
|
||||
}, [controllerRef, selectedRangeIdx]);
|
||||
} else if (selectedRangeIdx > 0) {
|
||||
setSelectedRangeIdx(selectedRangeIdx - 1);
|
||||
}
|
||||
});
|
||||
}, [playerReady, selectedRangeIdx]);
|
||||
|
||||
// scrubbing and timeline state
|
||||
|
||||
@ -62,13 +68,13 @@ export default function DesktopRecordingView({
|
||||
if (scrubbing) {
|
||||
controllerRef.current?.scrubToTimestamp(currentTime);
|
||||
}
|
||||
}, [controllerRef, currentTime, scrubbing]);
|
||||
}, [currentTime, scrubbing]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!scrubbing) {
|
||||
controllerRef.current?.seekToTimestamp(currentTime, true);
|
||||
}
|
||||
}, [controllerRef, scrubbing]);
|
||||
}, [scrubbing]);
|
||||
|
||||
return (
|
||||
<div ref={contentRef} className="relative w-full h-full">
|
||||
@ -87,6 +93,7 @@ export default function DesktopRecordingView({
|
||||
cameraPreviews={relevantPreviews || []}
|
||||
onControllerReady={(controller) => {
|
||||
controllerRef.current = controller;
|
||||
setPlayerReady(true);
|
||||
controllerRef.current.onPlayerTimeUpdate((timestamp: number) => {
|
||||
setCurrentTime(timestamp);
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user