Fix timeline DST rendering and UI follow-ups

Author: matteius

tests/integration/specs/timeline-boundary.ui.spec.ts

@@ -212,4 +212,33 @@ test.describe('Timeline boundary flows @ui @timeline', () => {
     await page.evaluate(() => document.exitFullscreen());
     await expect.poll(() => page.evaluate(() => document.fullscreenElement)).toBeNull();
   });
+});
+
+test.describe('Timeline DST rendering @ui @timeline', () => {
+  test.use({ timezoneId: 'America/New_York' });
+
+  test.beforeEach(async ({ page }) => {
+    await login(page, USERS.admin);
+  });
+
+  test('skips the nonexistent 2am ruler label on spring-forward days while preserving playback selection', async ({ page }) => {
+    const stream = 'front_door';
+    const selectedDate = '2026-03-08';
+    const segments: Segment[] = [
+      { id: 601, stream, start_timestamp: Math.floor(Date.parse('2026-03-08T06:50:00Z') / 1000), end_timestamp: Math.floor(Date.parse('2026-03-08T06:55:00Z') / 1000) },
+      { id: 602, stream, start_timestamp: Math.floor(Date.parse('2026-03-08T07:10:00Z') / 1000), end_timestamp: Math.floor(Date.parse('2026-03-08T07:15:00Z') / 1000) }
+    ];
+
+    await mockTimelineApis(page, stream, segments);
+    await page.goto(`/timeline.html?stream=${stream}&date=${selectedDate}&time=03:10:00`, { waitUntil: 'domcontentloaded' });
+
+    const timelinePage = new TimelinePage(page);
+    const ruler = page.locator('.timeline-ruler');
+
+    await expect(timelinePage.timelineContainer).toBeVisible();
+    await expect(timelinePage.timeDisplay).toHaveText('front_door - 03:10:00');
+    await expect(timelinePage.videoPlayer).toHaveAttribute('src', /\/api\/recordings\/play\/602(?:\?|$)/);
+    await expect(ruler.getByText('3:00', { exact: true })).toBeVisible();
+    await expect(ruler.getByText('2:00', { exact: true })).toHaveCount(0);
+  });
 });

tests/unit/test_config.c

@@ -319,7 +319,7 @@ void test_save_config_accepts_hidden_ini_dotfile(void) {
     rmdir(dir);
 }
 
-void test_env_integer_with_trailing_whitespace(void) {
+void test_env_integer_whitespace_handling(void) {
     char temp_dir[] = "/tmp/lightnvr_load_config_XXXXXX";
     char *dir = mkdtemp(temp_dir);
     TEST_ASSERT_NOT_NULL(dir);
@@ -393,6 +393,8 @@ void test_env_integer_with_trailing_whitespace(void) {
     }
 
     unlink(config_path);
+    unlink(db_path);
+    unlink(log_path);
     rmdir(storage_hls_path);
     rmdir(storage_path);
     rmdir(models_path);
@@ -454,7 +456,7 @@ int main(void) {
     RUN_TEST(test_custom_config_path_roundtrip);
     RUN_TEST(test_get_loaded_config_path_initially);
     RUN_TEST(test_save_config_accepts_hidden_ini_dotfile);
-    RUN_TEST(test_env_integer_with_trailing_whitespace);
+    RUN_TEST(test_env_integer_whitespace_handling);
 
     int result = UNITY_END();
     shutdown_logger();

web/js/components/preact/UI.jsx

@@ -159,7 +159,7 @@ export function ConfirmDialog({ isOpen, onClose, onConfirm, title, message, conf
           </div>
           <h3 className="text-base font-semibold pt-2">{title}</h3>
         </div>
-        <p className="text-sm text-muted-foreground mb-6 ml-13">{message}</p>
+        <p className="text-sm text-muted-foreground mb-6 ml-12">{message}</p>
         <div className="flex justify-end space-x-3">
           <button
             className="px-4 py-2 border border-border rounded-md text-sm font-medium hover:bg-muted transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary dark:focus:ring-offset-gray-800"
@@ -722,9 +722,15 @@ export function VideoModal({ isOpen, onClose, videoUrl, title, downloadUrl }) {
       })
       : null;
 
+    const handleWindowResize = () => {
+      scheduleRedraw();
+    };
+
     if (resizeObserver) {
       resizeObserver.observe(container);
       resizeObserver.observe(videoRef.current);
+    } else {
+      window.addEventListener('resize', handleWindowResize);
     }
 
     document.addEventListener('fullscreenchange', handleFullscreenChange);
@@ -735,6 +741,9 @@ export function VideoModal({ isOpen, onClose, videoUrl, title, downloadUrl }) {
       document.removeEventListener('fullscreenchange', handleFullscreenChange);
       document.removeEventListener('webkitfullscreenchange', handleFullscreenChange);
       resizeObserver?.disconnect();
+      if (!resizeObserver) {
+        window.removeEventListener('resize', handleWindowResize);
+      }
       if (redrawTimeoutId !== null) {
         clearTimeout(redrawTimeoutId);
       }
@@ -858,7 +867,6 @@ export function VideoModal({ isOpen, onClose, videoUrl, title, downloadUrl }) {
                   className={isFullscreen ? 'w-full h-full object-contain' : 'w-full h-auto max-w-full object-contain'}
                   controls
                   controlsList="nofullscreen"
-                  autoPlay
                   key={videoUrl} /* Add key to force re-render when URL changes */
                   onError={(e) => {
                     console.error('Video error:', e);

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

@@ -10,8 +10,9 @@ import {
   findContainingSegmentIndex,
   findNearestSegmentIndex,
   formatPlaybackTimeLabel,
-  MAX_TIMELINE_VIEW_HOURS,
+  getTimelineDayLengthHours,
   MIN_TIMELINE_VIEW_HOURS,
+  timestampToTimelineOffset,
   zoomTimelineRange
 } from './timelineUtils.js';
 
@@ -28,9 +29,10 @@ export function TimelineControls() {
   useEffect(() => {
     const syncControlsState = (state) => {
       setIsPlaying(state.isPlaying);
-      const range = (state.timelineEndHour ?? MAX_TIMELINE_VIEW_HOURS) - (state.timelineStartHour ?? 0);
+      const dayLengthHours = getTimelineDayLengthHours(state.selectedDate);
+      const range = (state.timelineEndHour ?? dayLengthHours) - (state.timelineStartHour ?? 0);
       setCanZoomIn(range > MIN_TIMELINE_VIEW_HOURS);
-      setCanZoomOut(range < MAX_TIMELINE_VIEW_HOURS);
+      setCanZoomOut(range < dayLengthHours);
 
       const currentSegment = state.currentSegmentIndex >= 0 && state.currentSegmentIndex < state.timelineSegments.length
         ? state.timelineSegments[state.currentSegmentIndex]
@@ -352,24 +354,25 @@ export function TimelineControls() {
   // ── Helper: get the center hour for zoom (cursor position or range midpoint) ──
   const getCenter = () => {
     const s = timelineState.timelineStartHour ?? 0;
-    const e = timelineState.timelineEndHour ?? MAX_TIMELINE_VIEW_HOURS;
+    const dayLengthHours = getTimelineDayLengthHours(timelineState.selectedDate);
+    const e = timelineState.timelineEndHour ?? dayLengthHours;
     if (timelineState.currentTime !== null) {
-      const d = new Date(timelineState.currentTime * 1000);
-      const h = d.getHours() + d.getMinutes() / 60 + d.getSeconds() / 3600;
+      const h = timestampToTimelineOffset(timelineState.currentTime, timelineState.selectedDate);
       // Only use cursor if it's inside the current view
-      if (h >= s && h <= e) return h;
+      if (h !== null && h >= s && h <= e) return h;
     }
     return (s + e) / 2;
   };
 
   // Zoom in — halve the visible range, centered on cursor
   const zoomIn = () => {
     const s = timelineState.timelineStartHour ?? 0;
-    const e = timelineState.timelineEndHour ?? MAX_TIMELINE_VIEW_HOURS;
+    const dayLengthHours = getTimelineDayLengthHours(timelineState.selectedDate);
+    const e = timelineState.timelineEndHour ?? dayLengthHours;
     const range = e - s;
     if (range <= MIN_TIMELINE_VIEW_HOURS) return;
     const center = getCenter();
-    const nextRange = zoomTimelineRange(s, e, 0.5, center);
+    const nextRange = zoomTimelineRange(s, e, 0.5, center, dayLengthHours);
     timelineState.setState({
       timelineStartHour: nextRange.startHour,
       timelineEndHour: nextRange.endHour
@@ -379,11 +382,12 @@ export function TimelineControls() {
   // Zoom out — double the visible range, centered on cursor, capped at 0-24
   const zoomOut = () => {
     const s = timelineState.timelineStartHour ?? 0;
-    const e = timelineState.timelineEndHour ?? MAX_TIMELINE_VIEW_HOURS;
+    const dayLengthHours = getTimelineDayLengthHours(timelineState.selectedDate);
+    const e = timelineState.timelineEndHour ?? dayLengthHours;
     const range = e - s;
-    if (range >= MAX_TIMELINE_VIEW_HOURS) return;
+    if (range >= dayLengthHours) return;
     const center = getCenter();
-    const nextRange = zoomTimelineRange(s, e, 2, center);
+    const nextRange = zoomTimelineRange(s, e, 2, center, dayLengthHours);
     timelineState.setState({
       timelineStartHour: nextRange.startHour,
       timelineEndHour: nextRange.endHour
@@ -393,7 +397,7 @@ export function TimelineControls() {
   // Fit — reset to the auto-fit range computed on data load
   const fitToSegments = () => {
     const fs = timelineState.autoFitStartHour ?? 0;
-    const fe = timelineState.autoFitEndHour ?? MAX_TIMELINE_VIEW_HOURS;
+    const fe = timelineState.autoFitEndHour ?? getTimelineDayLengthHours(timelineState.selectedDate);
     timelineState.setState({ timelineStartHour: fs, timelineEndHour: fe });
   };
 

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

@@ -8,7 +8,9 @@ import { timelineState } from './TimelinePage.jsx';
 import {
   findContainingSegmentIndex,
   findNearestSegmentIndex,
-  formatTimestampAsClock
+  formatTimestampAsClock,
+  getTimelineDayLengthHours,
+  timestampToTimelineOffset
 } from './timelineUtils.js';
 
 /**
@@ -55,12 +57,16 @@ export function TimelineCursor() {
   useEffect(() => {
     const unsubscribe = timelineState.subscribe(state => {
       setStartHour(state.timelineStartHour || 0);
-      setEndHour(state.timelineEndHour || 24);
+      setEndHour(state.timelineEndHour || getTimelineDayLengthHours(state.selectedDate));
 
       // Only update current time if not dragging
       if (!isDraggingRef.current && !state.userControllingCursor) {
         updateTimeDisplay(state.currentTime);
-        debouncedUpdateCursorPosition(state.currentTime, state.timelineStartHour || 0, state.timelineEndHour || 24);
+        debouncedUpdateCursorPosition(
+          state.currentTime,
+          state.timelineStartHour || 0,
+          state.timelineEndHour || getTimelineDayLengthHours(state.selectedDate)
+        );
       }
     });
 
@@ -179,8 +185,11 @@ export function TimelineCursor() {
       return;
     }
 
-    const date = new Date(time * 1000);
-    const hour = date.getHours() + date.getMinutes() / 60 + date.getSeconds() / 3600;
+    const hour = timestampToTimelineOffset(time, timelineState.selectedDate);
+    if (hour === null) {
+      setVisible(false);
+      return;
+    }
 
     if (hour < startHr || hour > endHr) {
       setVisible(false);
@@ -209,7 +218,7 @@ export function TimelineCursor() {
         updateCursorPosition(
           timelineState.currentTime,
           timelineState.timelineStartHour || 0,
-          timelineState.timelineEndHour || 24
+          timelineState.timelineEndHour || getTimelineDayLengthHours(timelineState.selectedDate)
         );
         return true;
       }
@@ -219,7 +228,11 @@ export function TimelineCursor() {
         timelineState.currentSegmentIndex = 0;
         timelineState.setState({});
         setVisible(true);
-        updateCursorPosition(t, timelineState.timelineStartHour || 0, timelineState.timelineEndHour || 24);
+        updateCursorPosition(
+          t,
+          timelineState.timelineStartHour || 0,
+          timelineState.timelineEndHour || getTimelineDayLengthHours(timelineState.selectedDate)
+        );
         return true;
       }
       return false;

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

@@ -22,36 +22,24 @@ import {
   getAvailableDatesForSegments,
   getClippedSegmentHourRange,
   getLocalDayBounds,
+  getTimelineDayLengthHours,
+  localClockTimeToTimestamp,
   panTimelineRange,
+  timelineOffsetToTimestamp,
+  timestampToTimelineOffset,
   zoomTimelineRange
 } from './timelineUtils.js';
 
 const RECORDINGS_RETURN_URL_KEY = 'lightnvr_recordings_return_url';
 
-// Convert fractional hour (0–24) → Unix timestamp (seconds) for the given date
+// Convert an elapsed timeline offset → Unix timestamp (seconds) for the selected local day.
 function timelineHourToTimestamp(hour, selectedDate) {
-  const numericHour = Number(hour);
-  if (!Number.isFinite(numericHour)) {
-    throw new Error(`timelineHourToTimestamp: invalid hour value "${hour}"`);
-  }
-
-  const normalizedHour = Math.min(24, Math.max(0, numericHour));
-
-  let date;
-  if (selectedDate && typeof selectedDate === 'string' && selectedDate.includes('-')) {
-    const [year, month, day] = selectedDate.split('-').map(Number);
-    date = new Date(year, month - 1, day, 0, 0, 0, 0);
-  } else {
-    date = new Date();
-    date.setHours(0, 0, 0, 0);
-  }
-  return Math.floor((date.getTime() + normalizedHour * 3600000) / 1000);
+  return timelineOffsetToTimestamp(hour, selectedDate);
 }
 
-// Utility function to convert timestamp to timeline hour
-function timestampToTimelineHour(timestamp) {
-  const date = new Date(timestamp * 1000);
-  return date.getHours() + (date.getMinutes() / 60) + (date.getSeconds() / 3600);
+// Convert a Unix timestamp to an elapsed timeline offset for the selected local day.
+function timestampToTimelineHour(timestamp, selectedDate = null) {
+  return timestampToTimelineOffset(timestamp, selectedDate);
 }
 
 // Global timeline state for child components
@@ -264,7 +252,7 @@ export function TimelinePage() {
 
     const handleWheel = (event) => {
       const startHour = timelineState.timelineStartHour ?? 0;
-      const endHour = timelineState.timelineEndHour ?? 24;
+      const endHour = timelineState.timelineEndHour ?? getTimelineDayLengthHours(timelineState.selectedDate);
       const currentRange = endHour - startHour;
       if (currentRange <= 0) {
         return;
@@ -280,7 +268,7 @@ export function TimelinePage() {
         const pointerRatio = Math.min(Math.max((event.clientX - rect.left) / rect.width, 0), 1);
         const anchorHour = startHour + (pointerRatio * currentRange);
         const zoomFactor = event.deltaY < 0 ? 0.8 : 1.25;
-        const nextRange = zoomTimelineRange(startHour, endHour, zoomFactor, anchorHour);
+        const nextRange = zoomTimelineRange(startHour, endHour, zoomFactor, anchorHour, getTimelineDayLengthHours(timelineState.selectedDate));
         timelineState.setState({
           timelineStartHour: nextRange.startHour,
           timelineEndHour: nextRange.endHour
@@ -295,7 +283,7 @@ export function TimelinePage() {
       if (horizontalDelta !== 0) {
         event.preventDefault();
         const deltaHours = (horizontalDelta / rect.width) * currentRange;
-        const nextRange = panTimelineRange(startHour, endHour, deltaHours);
+        const nextRange = panTimelineRange(startHour, endHour, deltaHours, getTimelineDayLengthHours(timelineState.selectedDate));
         timelineState.setState({
           timelineStartHour: nextRange.startHour,
           timelineEndHour: nextRange.endHour
@@ -360,10 +348,11 @@ export function TimelinePage() {
     setSegments(segmentsCopy);
 
     const dayBounds = getLocalDayBounds(effectiveDate);
+    const dayLengthHours = getTimelineDayLengthHours(effectiveDate);
     const visibleIndices = [];
 
     // Compute auto-fit range from segments for the selected day
-    let earliest = 24;
+    let earliest = dayLengthHours;
     let latest = 0;
     segmentsCopy.forEach((seg, index) => {
       const visibleRange = getClippedSegmentHourRange(seg, effectiveDate);
@@ -382,9 +371,9 @@ export function TimelinePage() {
         isPlaying: false,
         selectedDate: effectiveDate,
         timelineStartHour: 0,
-        timelineEndHour: 24,
+        timelineEndHour: dayLengthHours,
         autoFitStartHour: 0,
-        autoFitEndHour: 24
+        autoFitEndHour: dayLengthHours
       });
       return false;
     }
@@ -428,10 +417,8 @@ export function TimelinePage() {
     }
 
     if (initialSegmentIndex === -1 && initialTimeRef.current) {
-      const timeParts = initialTimeRef.current.match(/^(\d{2}):(\d{2}):(\d{2})$/);
-      if (timeParts) {
-        const [, h, m, s] = timeParts.map(Number);
-        const seekTs = timelineHourToTimestamp(h + m / 60 + s / 3600, effectiveDate);
+      const seekTs = localClockTimeToTimestamp(initialTimeRef.current, effectiveDate);
+      if (seekTs !== null) {
 
         const containingIndex = findContainingSegmentIndex(segmentsCopy, seekTs);
         if (containingIndex !== -1 && getClippedSegmentHourRange(segmentsCopy[containingIndex], effectiveDate)) {
@@ -460,16 +447,16 @@ export function TimelinePage() {
     }
 
     let fitStart = 0;
-    let fitEnd = 24;
-    if (earliest < 24 && latest > 0) {
+    let fitEnd = dayLengthHours;
+    if (earliest < dayLengthHours && latest > 0) {
       const span = latest - earliest;
       const pad = Math.max(0.5, Math.min(1, span * 0.1));
       fitStart = Math.max(0, Math.floor((earliest - pad) * 2) / 2);
-      fitEnd = Math.min(24, Math.ceil((latest + pad) * 2) / 2);
+      fitEnd = Math.min(dayLengthHours, Math.ceil((latest + pad) * 2) / 2);
       if (fitEnd - fitStart < 2) {
         const center = (earliest + latest) / 2;
         fitStart = Math.max(0, Math.floor((center - 1) * 2) / 2);
-        fitEnd = Math.min(24, fitStart + 2);
+        fitEnd = Math.min(dayLengthHours, fitStart + 2);
       }
     }