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

Get custom time scrubber working

Browse Source
This commit is contained in:
Nick Mowen 2023-12-21 13:58:40 -07:00
parent d5b7adefd9
commit c0276f9686
3 changed files with 19 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/src/components/scrubber/ActivityScrubber.tsx
View File

@ -185,12 +185,7 @@ function ActivityScrubber({
if (items) timelineRef.current.timeline.setItems(items); if (items) timelineRef.current.timeline.setItems(items);
}, [items, groups, options, currentTime, eventHandlers]); }, [items, groups, options, currentTime, eventHandlers]);
return ( return <div ref={containerRef} />;
<div>
<div ref={containerRef} />
<div className="absolute bg-red-500 w-[2px]" />
</div>
);
} }
export default ActivityScrubber; export default ActivityScrubber;

2
web/src/pages/History.tsx
View File

@ -195,7 +195,7 @@ function History() {
onItemSelected={(card) => setPlayback(card)} onItemSelected={(card) => setPlayback(card)}
/> />
)} )}
{playback != undefined && <HistoryTimelineView card={playback} />} {playback != undefined && <HistoryTimelineView card={playback} isMobile={shouldAutoPlay} />}
</> </>
</> </>
); );

25
web/src/views/history/HistoryTimelineView.tsx
View File

@ -11,10 +11,12 @@ import Player from "video.js/dist/types/player";
type HistoryTimelineViewProps = { type HistoryTimelineViewProps = {
card: Card; card: Card;
isMobile: boolean;
}; };
export default function HistoryTimelineView({ export default function HistoryTimelineView({
card, card,
isMobile,
}: HistoryTimelineViewProps) { }: HistoryTimelineViewProps) {
const apiHost = useApiHost(); const apiHost = useApiHost();
const playerRef = useRef<Player | undefined>(undefined); const playerRef = useRef<Player | undefined>(undefined);
@ -47,8 +49,12 @@ export default function HistoryTimelineView({
return ( return (
<> <>
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 -mr-[640px]"> <div
<div className={`2xl:w-[1280px]`}> className={
isMobile ? "" : "absolute left-1/2 -translate-x-1/2 -mr-[640px]"
}
>
<div className={`w-screen 2xl:w-[1280px]`}>
<div className={`${scrubbing ? "hidden" : "visible"}`}> <div className={`${scrubbing ? "hidden" : "visible"}`}>
<VideoPlayer <VideoPlayer
options={{ options={{
@ -101,24 +107,25 @@ export default function HistoryTimelineView({
/> />
</div> </div>
<ActivityScrubber <ActivityScrubber
midBar={true}
items={timelineItemsToScrubber(card.entries)} items={timelineItemsToScrubber(card.entries)}
timeBars={[{ time: new Date(timelineTime * 1000), id: "playback" }]}
options={{ options={{
min: new Date(parseInt(playbackTimes.start) * 1000), min: new Date(parseInt(playbackTimes.start) * 1000),
max: new Date(parseInt(playbackTimes.end) * 1000), max: new Date(parseInt(playbackTimes.end) * 1000),
snap: null,
}} }}
rangechangeHandler={(time) => { timechangeHandler={(data) => {
if (!scrubbing) { if (!scrubbing) {
playerRef.current?.pause(); playerRef.current?.pause();
setScrubbing(true); setScrubbing(true);
} }
const rangeStart = time.start.getTime() / 1000; const seekTimestamp = data.time.getTime() / 1000;
const midTime = previewRef.current?.currentTime(
rangeStart + (time.end.getTime() / 1000 - rangeStart / 2); seekTimestamp - relevantPreview.start
previewRef.current?.currentTime(midTime - relevantPreview.start); );
}} }}
rangechangedHandler={(data) => { timechangedHandler={(data) => {
const playbackTime = data.time.getTime() / 1000; const playbackTime = data.time.getTime() / 1000;
playerRef.current?.currentTime( playerRef.current?.currentTime(
playbackTime - parseInt(playbackTimes.start) playbackTime - parseInt(playbackTimes.start)