Scroll initially selected timeline in to view

frigate/http.py

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

web/src/components/card/TimelineItemCard.tsx

@@ -21,7 +21,7 @@ export default function TimelineItemCard({
 
   return (
     <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 && (
           <VideoPlayer
             options={{
@@ -48,7 +48,7 @@ export default function TimelineItemCard({
           />
         )}
       </div>
-      <div className="px-2 py-1 w-1/2">
+      <div className="py-1">
         <div className="capitalize font-semibold text-sm">
           {getTimelineItemDescription(timeline)}
         </div>

web/src/views/history/DesktopTimelineView.tsx

@@ -36,6 +36,7 @@ export default function DesktopTimelineView({
 
   const playerRef = useRef<Player | undefined>(undefined);
   const previewRef = useRef<Player | undefined>(undefined);
+  const initialScrollRef = useRef<HTMLDivElement | null>(null);
 
   const [scrubbing, setScrubbing] = useState(false);
   const [focusedItem, setFocusedItem] = useState<Timeline | undefined>(
@@ -120,6 +121,13 @@ export default function DesktopTimelineView({
     [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
   useEffect(() => {
     if (seeking) {
@@ -305,7 +313,7 @@ export default function DesktopTimelineView({
             )}
           </div>
         </>
-        <div className="px-2 h-[608px] overflow-auto">
+        <div className="px-2 h-[608px] w-1/3 overflow-auto">
           {selectedPlayback.timelineItems.map((timeline) => {
             return (
               <TimelineItemCard
@@ -320,12 +328,15 @@ export default function DesktopTimelineView({
       </div>
       <div className="m-1 w-full max-h-72 2xl:max-h-80 3xl:max-h-96 overflow-auto">
         {timelineStack.playbackItems.map((timeline) => {
+          const isInitiallySelected =
+            initialPlayback.range.start == timeline.range.start;
           const isSelected =
             timeline.range.start == selectedPlayback.range.start;
           const graphData = timelineGraphData[timeline.range.start];
 
           return (
             <div
+              ref={isInitiallySelected ? initialScrollRef : null}
               key={timeline.range.start}
               className={`relative p-2 ${
                 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 && (
                 <div className="absolute left-2 right-2 top-0 h-[84px]">