Show all timelines for day

web/src/utils/historyUtil.ts

@@ -101,3 +101,26 @@ export function getHourlyTimelineData(
 
   return cards;
 }
+
+export function getTimelineHoursForDay(timestamp: number) {
+  const now = new Date();
+  const data = [];
+  const startDay = new Date(timestamp * 1000);
+  startDay.setHours(0, 0, 0, 0);
+  let start = startDay.getTime() / 1000;
+  let end = 0;
+
+  for (let i = 0; i < 24; i++) {
+    startDay.setHours(startDay.getHours() + 1);
+
+    if (startDay > now) {
+      break;
+    }
+
+    end = startDay.getTime() / 1000;
+    data.push({ start, end });
+    start = startDay.getTime() / 1000;
+  }
+
+  return data.reverse();
+}

web/src/views/history/HistoryTimelineView.tsx

@@ -21,6 +21,7 @@ import React, {
 import useSWR from "swr";
 import Player from "video.js/dist/types/player";
 import TimelineItemCard from "@/components/card/TimelineItemCard";
+import { getTimelineHoursForDay } from "@/utils/historyUtil";
 
 type HistoryTimelineViewProps = {
   playback: TimelinePlayback;
@@ -255,6 +256,9 @@ function DesktopView({
   onScrubTime,
   onStopScrubbing,
 }: DesktopViewProps) {
+  const timelineStack =
+    playback == undefined ? [] : getTimelineHoursForDay(timelineTime);
+
   return (
     <div className="w-full">
       <div className="flex">
@@ -338,9 +342,14 @@ function DesktopView({
           })}
         </div>
       </div>
-      <div className="m-1">
+      <div className="m-1 max-h-96 overflow-auto">
-        {playback != undefined && (
+        {timelineStack.map((range) => {
+          const isSelected = timelineTime > range.start && timelineTime < range.end;
+
+          return (
+            <div className={`${isSelected ? "border border-primary" : ""}`}>
               <ActivityScrubber
+              key={range.start}
               items={[]}
               timeBars={
                 hasRelevantPreview
@@ -349,8 +358,9 @@ function DesktopView({
               }
               options={{
                 snap: null,
-              min: new Date(playbackTimes.start * 1000),
+                min: new Date(range.start * 1000),
-              max: new Date(playbackTimes.end * 1000),
+                max: new Date(range.end * 1000),
+                zoomable: false,
               }}
               timechangeHandler={onScrubTime}
               timechangedHandler={onStopScrubbing}
@@ -365,7 +375,9 @@ function DesktopView({
                 }
               }}
             />
-        )}
+            </div>
+          );
+        })}
       </div>
     </div>
   );