timeline keyboard improvement

Author: matteius

web/js/components/preact/timeline/TimelineCursor.jsx

@@ -34,26 +34,6 @@ export function TimelineCursor() {
   startHourRef.current = startHour;
   endHourRef.current = endHour;
 
-  // Debounce function to limit how often a function can be called
-  const debounce = (func, delay) => {
-    let timeoutId;
-    return function(...args) {
-      if (timeoutId) {
-        clearTimeout(timeoutId);
-      }
-      timeoutId = setTimeout(() => {
-        func.apply(this, args);
-      }, delay);
-    };
-  };
-
-  // Create debounced version of updateCursorPosition
-  const debouncedUpdateCursorPosition = useRef(
-    debounce((time, startHr, endHr) => {
-      updateCursorPosition(time, startHr, endHr);
-    }, 100)
-  ).current;
-
   // Subscribe to timeline state changes
   useEffect(() => {
     const unsubscribe = timelineState.subscribe(state => {
@@ -63,7 +43,7 @@ export function TimelineCursor() {
       // Only update current time if not dragging
       if (!isDraggingRef.current && !state.userControllingCursor) {
         updateTimeDisplay(state.currentTime);
-        debouncedUpdateCursorPosition(
+        updateCursorPosition(
           state.currentTime,
           state.timelineStartHour || 0,
           state.timelineEndHour || getTimelineDayLengthHours(state.selectedDate)
@@ -72,7 +52,7 @@ export function TimelineCursor() {
     });
 
     return () => unsubscribe();
-  }, [debouncedUpdateCursorPosition]);
+  }, []);
 
   // Set up drag handling
   useEffect(() => {

web/js/components/preact/timeline/TimelinePage.jsx

@@ -295,6 +295,28 @@ export function TimelinePage() {
       return false;
     }
 
+    // Backward auto-advance: if seeking before the start of this segment, jump to the
+    // end of the previous segment (mirrors how forward auto-advance works via handleEnded).
+    if (directionSeconds < 0 && videoPlayer.currentTime + directionSeconds < 0) {
+      const prevIndex = activeIndex - 1;
+      const prevSegment = timelineState.timelineSegments?.[prevIndex];
+      if (prevSegment) {
+        const prevDuration = prevSegment.end_timestamp - prevSegment.start_timestamp;
+        // Land 1 second before the end (magnitude of directionSeconds), clamped to [0, duration].
+        const seekOffset = Math.max(prevDuration + directionSeconds, 0);
+        timelineState.setState({
+          currentSegmentIndex: prevIndex,
+          currentTime: prevSegment.start_timestamp + seekOffset,
+          prevCurrentTime: timelineState.currentTime,
+          isPlaying: timelineState.isPlaying,
+          forceReload: true
+        });
+      }
+      // Return true whether or not there is a previous segment, so the browser
+      // does not scroll the page on the key press.
+      return true;
+    }
+
     const fallbackDuration = Math.max(activeSegment.end_timestamp - activeSegment.start_timestamp, 0);
     const effectiveDuration = Number.isFinite(videoPlayer.duration) && videoPlayer.duration > 0
       ? videoPlayer.duration