administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-07 03:35:26 +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);
}, [items, groups, options, currentTime, eventHandlers]);
return (
<div>
<div ref={containerRef} />
<div className="absolute bg-red-500 w-[2px]" />
</div>
);
return <div ref={containerRef} />;
}
export default ActivityScrubber;

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

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

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

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