administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-08 04:05:26 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Scroll initially selected timeline in to view

Browse Source
This commit is contained in:
Nick Mowen 2024-01-14 06:53:33 -07:00
parent 2d3ff15cc1
commit 0a873a1686
3 changed files with 19 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frigate/http.py
View File

@ -770,7 +770,7 @@ def hourly_timeline_activity(camera_name: str):
hours[int(key.timestamp())].append( hours[int(key.timestamp())].append(
[ [
recording.start_time + (recording.duration / 2), recording.start_time + (recording.duration / 2),
recording.motion, max(recording.motion, recording.objects),
data_type, data_type,
] ]
) )

4
web/src/components/card/TimelineItemCard.tsx
View File

@ -21,7 +21,7 @@ export default function TimelineItemCard({
return ( return (
<Card className="relative m-2 flex w-full h-32 cursor-pointer" onClick={onSelect}> <Card className="relative m-2 flex w-full h-32 cursor-pointer" onClick={onSelect}>
<div className="w-1/2 p-2"> <div className="p-2">
{relevantPreview && ( {relevantPreview && (
<VideoPlayer <VideoPlayer
options={{ options={{
@ -48,7 +48,7 @@ export default function TimelineItemCard({
/> />
)} )}
</div> </div>
<div className="px-2 py-1 w-1/2"> <div className="py-1">
<div className="capitalize font-semibold text-sm"> <div className="capitalize font-semibold text-sm">
{getTimelineItemDescription(timeline)} {getTimelineItemDescription(timeline)}
</div> </div>

18
web/src/views/history/DesktopTimelineView.tsx
View File

@ -36,6 +36,7 @@ export default function DesktopTimelineView({
const playerRef = useRef<Player | undefined>(undefined); const playerRef = useRef<Player | undefined>(undefined);
const previewRef = useRef<Player | undefined>(undefined); const previewRef = useRef<Player | undefined>(undefined);
const initialScrollRef = useRef<HTMLDivElement | null>(null);
const [scrubbing, setScrubbing] = useState(false); const [scrubbing, setScrubbing] = useState(false);
const [focusedItem, setFocusedItem] = useState<Timeline | undefined>( const [focusedItem, setFocusedItem] = useState<Timeline | undefined>(
@ -120,6 +121,13 @@ export default function DesktopTimelineView({
[annotationOffset, recordings, playerRef] [annotationOffset, recordings, playerRef]
); );
// handle scrolling to initial timeline item
useEffect(() => {
if (initialScrollRef.current != null) {
initialScrollRef.current.scrollIntoView();
}
}, [initialScrollRef]);
// handle seeking to next frame when seek is finished // handle seeking to next frame when seek is finished
useEffect(() => { useEffect(() => {
if (seeking) { if (seeking) {
@ -305,7 +313,7 @@ export default function DesktopTimelineView({
)} )}
</div> </div>
</> </>
<div className="px-2 h-[608px] overflow-auto"> <div className="px-2 h-[608px] w-1/3 overflow-auto">
{selectedPlayback.timelineItems.map((timeline) => { {selectedPlayback.timelineItems.map((timeline) => {
return ( return (
<TimelineItemCard <TimelineItemCard
@ -320,12 +328,15 @@ export default function DesktopTimelineView({
</div> </div>
<div className="m-1 w-full max-h-72 2xl:max-h-80 3xl:max-h-96 overflow-auto"> <div className="m-1 w-full max-h-72 2xl:max-h-80 3xl:max-h-96 overflow-auto">
{timelineStack.playbackItems.map((timeline) => { {timelineStack.playbackItems.map((timeline) => {
const isInitiallySelected =
initialPlayback.range.start == timeline.range.start;
const isSelected = const isSelected =
timeline.range.start == selectedPlayback.range.start; timeline.range.start == selectedPlayback.range.start;
const graphData = timelineGraphData[timeline.range.start]; const graphData = timelineGraphData[timeline.range.start];
return ( return (
<div <div
ref={isInitiallySelected ? initialScrollRef : null}
key={timeline.range.start} key={timeline.range.start}
className={`relative p-2 ${ className={`relative p-2 ${
isSelected ? "bg-secondary bg-opacity-30 rounded-md" : "" isSelected ? "bg-secondary bg-opacity-30 rounded-md" : ""
@ -380,7 +391,10 @@ export default function DesktopTimelineView({
); );
} }
}} }}
doubleClickHandler={() => setSelectedPlayback(timeline)} doubleClickHandler={() => {
setScrubbing(false);
setSelectedPlayback(timeline);
}}
/> />
{isSelected && graphData && ( {isSelected && graphData && (
<div className="absolute left-2 right-2 top-0 h-[84px]"> <div className="absolute left-2 right-2 top-0 h-[84px]">