Start playing next hour when current hour ends

web/src/components/player/DynamicVideoPlayer.tsx

@@ -228,6 +228,7 @@ export default function DynamicVideoPlayer({
             player.on("timeupdate", () => {
               controller.updateProgress(player.currentTime() || 0);
             });
+            player.on("ended", () => controller.fireClipEndEvent());
 
             if (onControllerReady) {
               onControllerReady(controller);
@@ -284,6 +285,7 @@ export class DynamicVideoController {
   // playback
   private recordings: Recording[] = [];
   private onPlaybackTimestamp: ((time: number) => void) | undefined = undefined;
+  private onClipEnded: (() => void) | undefined = undefined;
   private annotationOffset: number;
   private timeToStart: number | undefined = undefined;
 
@@ -393,6 +395,16 @@ export class DynamicVideoController {
     this.onPlaybackTimestamp = listener;
   }
 
+  onClipEndedEvent(listener: () => void) {
+    this.onClipEnded = listener;
+  }
+
+  fireClipEndEvent() {
+    if (this.onClipEnded) {
+      this.onClipEnded();
+    }
+  }
+
   scrubToTimestamp(time: number) {
     if (this.playerMode != "scrubbing") {
       this.playerMode = "scrubbing";

web/src/views/history/DesktopTimelineView.tsx

@@ -34,9 +34,6 @@ export default function DesktopTimelineView({
   const controllerRef = useRef<DynamicVideoController | undefined>(undefined);
   const initialScrollRef = useRef<HTMLDivElement | null>(null);
 
-  const [selectedPlayback, setSelectedPlayback] = useState(initialPlayback);
-  const [timelineTime, setTimelineTime] = useState(0);
-
   // handle scrolling to initial timeline item
   useEffect(() => {
     if (initialScrollRef.current != null) {
@@ -50,17 +47,45 @@ export default function DesktopTimelineView({
     });
   }, []);
 
+  const [timelineTime, setTimelineTime] = useState(0);
   const timelineStack = useMemo(
     () =>
       getTimelineHoursForDay(
-        selectedPlayback.camera,
+        initialPlayback.camera,
         timelineData,
         cameraPreviews,
-        selectedPlayback.range.start + 60
+        initialPlayback.range.start + 60
       ),
     []
   );
 
+  const [selectedPlaybackIdx, setSelectedPlaybackIdx] = useState(
+    timelineStack.playbackItems.findIndex((playback) => {
+      return (
+        playback.range.start == initialPlayback.range.start &&
+        playback.range.end == initialPlayback.range.end
+      );
+    })
+  );
+  const selectedPlayback = useMemo(
+    () => timelineStack.playbackItems[selectedPlaybackIdx],
+    [selectedPlaybackIdx]
+  );
+
+  // handle moving to next clip
+  useEffect(() => {
+    if (!controllerRef.current) {
+      return;
+    }
+
+    if (selectedPlaybackIdx > 0) {
+      controllerRef.current.onClipEndedEvent(() => {
+        console.log("setting to " + (selectedPlaybackIdx - 1));
+        setSelectedPlaybackIdx(selectedPlaybackIdx - 1);
+      });
+    }
+  }, [controllerRef, selectedPlaybackIdx]);
+
   const { data: activity } = useSWR<RecordingActivity>(
     [
       `${initialPlayback.camera}/recording/hourly/activity`,
@@ -148,7 +173,7 @@ export default function DesktopTimelineView({
       </div>
       <div className="relative mt-4 w-full h-full">
         <div className="absolute left-0 top-0 right-0 bottom-0 overflow-auto">
-          {timelineStack.playbackItems.map((timeline) => {
+          {timelineStack.playbackItems.map((timeline, tIdx) => {
             const isInitiallySelected =
               initialPlayback.range.start == timeline.range.start;
             const isSelected =
@@ -224,7 +249,7 @@ export default function DesktopTimelineView({
                     startTime={timeline.range.start}
                     graphData={graphData}
                     onClick={() => {
-                      setSelectedPlayback(timeline);
+                      setSelectedPlaybackIdx(tIdx);
 
                       let startTs;
                       if (timeline.timelineItems.length > 0) {