@camstack/addon-admin-ui 0.1.1

package/src/pages/Timeline.tsx

@@ -0,0 +1,269 @@
+import { useState, useMemo } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { Film, Calendar, ChevronLeft, ChevronRight } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { useBackendClient } from '../hooks/useBackendClient'
+import { TimelineBar, type RecordingSegment, type TimelineEvent } from '../components/timeline/TimelineBar'
+
+// ---------------------------------------------------------------------------
+// Class → colour mapping
+// ---------------------------------------------------------------------------
+const CLASS_COLORS: Record<string, string> = {
+  person:    '#f59e0b',
+  vehicle:   '#3b82f6',
+  car:       '#3b82f6',
+  face:      '#a855f7',
+  plate:     '#ec4899',
+  animal:    '#10b981',
+  motion:    '#ef4444',
+  unknown:   '#6b7280',
+}
+
+function colorForClass(cls: string): string {
+  return CLASS_COLORS[cls.toLowerCase()] ?? CLASS_COLORS['unknown']!
+}
+
+// ---------------------------------------------------------------------------
+// Date helpers
+// ---------------------------------------------------------------------------
+function startOfDay(date: Date): number {
+  const d = new Date(date)
+  d.setHours(0, 0, 0, 0)
+  return d.getTime()
+}
+
+function formatDateInput(ms: number): string {
+  return new Date(ms).toISOString().slice(0, 10)
+}
+
+function parseDateInput(value: string): number {
+  return new Date(value + 'T00:00:00').getTime()
+}
+
+// ---------------------------------------------------------------------------
+// Placeholder segments (shown when no real API data exists)
+// ---------------------------------------------------------------------------
+function buildPlaceholderSegments(dayStartMs: number): readonly RecordingSegment[] {
+  return [
+    { startMs: dayStartMs + 0 * 3_600_000,  endMs: dayStartMs + 4 * 3_600_000 },
+    { startMs: dayStartMs + 6 * 3_600_000,  endMs: dayStartMs + 10 * 3_600_000 },
+    { startMs: dayStartMs + 12 * 3_600_000, endMs: dayStartMs + 16 * 3_600_000 },
+    { startMs: dayStartMs + 18 * 3_600_000, endMs: dayStartMs + 23 * 3_600_000 },
+  ]
+}
+
+function buildPlaceholderEvents(dayStartMs: number): readonly TimelineEvent[] {
+  const classes = ['person', 'vehicle', 'face', 'motion']
+  return Array.from({ length: 24 }, (_, i) => ({
+    id: `placeholder-${i}`,
+    timestampMs: dayStartMs + Math.floor(Math.random() * 24 * 3_600_000),
+    label: classes[i % classes.length]!,
+    color: colorForClass(classes[i % classes.length]!),
+  })).sort((a, b) => a.timestampMs - b.timestampMs)
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+export function TimelinePage() {
+  const { t } = useTranslation()
+  const client = useBackendClient()
+
+  const today = startOfDay(new Date())
+  const [selectedDayMs, setSelectedDayMs] = useState(today)
+  const [selectedCameraId, setSelectedCameraId] = useState<string | null>(null)
+  const [playheadMs, setPlayheadMs] = useState(today + 12 * 3_600_000)
+
+  const dayStartMs = selectedDayMs
+  const dayEndMs = selectedDayMs + 24 * 3_600_000
+
+  // Fetch devices to populate camera tabs
+  const { data: devices, isLoading: devicesLoading } = useQuery({
+    queryKey: ['devices'],
+    queryFn: () => client.listDevices(),
+    staleTime: 30_000,
+  })
+
+  const deviceList = (devices ?? []) as unknown as Array<Record<string, unknown>>
+
+  const cameras = useMemo(() => {
+    const list = deviceList.filter((d) => {
+      const type = String(d.type ?? '').toLowerCase()
+      const caps = (d.capabilities ?? []) as string[]
+      return (
+        type === 'camera' ||
+        type.includes('camera') ||
+        caps.some((c) => c.toLowerCase().includes('video') || c.toLowerCase().includes('stream'))
+      )
+    })
+    return list.map((d) => ({ id: String(d.id), name: String(d.name ?? d.id) }))
+  }, [deviceList])
+
+  // Auto-select first camera
+  const activeCameraId = selectedCameraId ?? cameras[0]?.id ?? null
+
+  // Fetch real events for the selected camera on the selected day
+  const { data: rawEvents } = useQuery({
+    queryKey: ['events', activeCameraId, dayStartMs],
+    queryFn: (): Promise<unknown> =>
+      activeCameraId ? client.getEvents(activeCameraId, { limit: 200 }) : Promise.resolve(null),
+    enabled: !!activeCameraId,
+    staleTime: 60_000,
+  })
+
+  const timelineEvents: readonly TimelineEvent[] = useMemo(() => {
+    const raw = rawEvents as unknown
+    // getEvents returns { events: [...], total: n } or an array depending on router version
+    const evtsArr: unknown[] =
+      Array.isArray(raw)
+        ? (raw as unknown[])
+        : raw != null && typeof raw === 'object' && Array.isArray((raw as Record<string, unknown>)['events'])
+          ? ((raw as Record<string, unknown>)['events'] as unknown[])
+          : []
+    const evts = evtsArr as Array<Record<string, unknown>>
+    if (evts.length === 0) {
+      return activeCameraId ? buildPlaceholderEvents(dayStartMs) : []
+    }
+    return evts.map((ev, idx) => {
+      const cls = String((ev.class ?? ev.type ?? ev.label ?? 'unknown')).toLowerCase()
+      const ts = typeof ev.timestamp === 'number' ? ev.timestamp : dayStartMs
+      return {
+        id: String(ev.id ?? idx),
+        timestampMs: ts,
+        label: cls,
+        color: colorForClass(cls),
+      }
+    })
+  }, [rawEvents, activeCameraId, dayStartMs])
+
+  // Use placeholder segments (no real segment API exposed yet)
+  const segments: readonly RecordingSegment[] = useMemo(
+    () => (activeCameraId ? buildPlaceholderSegments(dayStartMs) : []),
+    [activeCameraId, dayStartMs],
+  )
+
+  function navigateDay(delta: number) {
+    setSelectedDayMs((prev) => prev + delta * 24 * 3_600_000)
+    setPlayheadMs((prev) => prev + delta * 24 * 3_600_000)
+  }
+
+  return (
+    <div className="flex flex-col h-full p-6 gap-5 overflow-hidden">
+      {/* ── Header ── */}
+      <div className="flex items-center justify-between gap-4 shrink-0">
+        <h1 className="text-lg font-semibold text-foreground">{t('nav.timeline', 'Timeline')}</h1>
+
+        {/* Date navigation */}
+        <div className="flex items-center gap-2">
+          <button
+            onClick={() => navigateDay(-1)}
+            className="p-1 rounded hover:bg-surface-hover text-foreground-subtle hover:text-foreground transition-colors"
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </button>
+          <div className="relative flex items-center">
+            <Calendar className="absolute left-2 h-3.5 w-3.5 text-foreground-subtle pointer-events-none" />
+            <input
+              type="date"
+              value={formatDateInput(selectedDayMs)}
+              onChange={(e) => {
+                if (e.target.value) {
+                  const ms = parseDateInput(e.target.value)
+                  setSelectedDayMs(ms)
+                  setPlayheadMs(ms + 12 * 3_600_000)
+                }
+              }}
+              className="rounded-lg border border-border bg-surface pl-7 pr-3 py-1.5 text-xs text-foreground focus:outline-none focus:border-primary/50"
+            />
+          </div>
+          <button
+            onClick={() => navigateDay(1)}
+            className="p-1 rounded hover:bg-surface-hover text-foreground-subtle hover:text-foreground transition-colors"
+            disabled={selectedDayMs >= today}
+          >
+            <ChevronRight className="h-4 w-4" />
+          </button>
+        </div>
+      </div>
+
+      {/* ── Camera selector tabs ── */}
+      <div className="flex gap-1.5 shrink-0 overflow-x-auto pb-1">
+        {devicesLoading && (
+          <div className="h-8 w-48 rounded-lg bg-surface animate-pulse" />
+        )}
+        {!devicesLoading && cameras.length === 0 && (
+          <span className="text-xs text-foreground-subtle">No cameras found</span>
+        )}
+        {cameras.map((cam) => {
+          const active = cam.id === activeCameraId
+          return (
+            <button
+              key={cam.id}
+              onClick={() => setSelectedCameraId(cam.id)}
+              className={`shrink-0 rounded-lg px-3 py-1.5 text-[12px] font-medium transition-all border ${
+                active
+                  ? 'bg-primary/12 text-primary border-primary/30'
+                  : 'bg-surface text-foreground-subtle border-border hover:bg-surface-hover hover:text-foreground'
+              }`}
+            >
+              {cam.name}
+            </button>
+          )
+        })}
+      </div>
+
+      {/* ── Video player placeholder ── */}
+      <div className="relative rounded-xl border border-border bg-black shrink-0 overflow-hidden" style={{ aspectRatio: '16/9', maxHeight: '45vh' }}>
+        <div className="absolute inset-0 flex flex-col items-center justify-center gap-3 text-foreground-subtle">
+          <Film className="h-12 w-12 opacity-20" />
+          <p className="text-sm opacity-50">
+            {activeCameraId
+              ? `${cameras.find((c) => c.id === activeCameraId)?.name ?? activeCameraId} — seek to play`
+              : 'Select a camera'}
+          </p>
+        </div>
+
+        {/* Playhead timestamp overlay */}
+        <div className="absolute top-3 left-3 rounded bg-black/60 px-2 py-1 text-[11px] text-white font-mono">
+          {new Date(playheadMs).toLocaleTimeString()}
+        </div>
+      </div>
+
+      {/* ── Timeline scrub bar ── */}
+      <div className="rounded-xl border border-border bg-surface px-4 pt-3 pb-4 shrink-0">
+        {/* Legend */}
+        <div className="flex items-center gap-4 mb-3">
+          <span className="text-[10px] font-semibold text-foreground-subtle uppercase tracking-wider">Timeline</span>
+          <div className="flex items-center gap-1.5">
+            <span className="inline-block h-2 w-4 rounded-sm bg-success/60" />
+            <span className="text-[10px] text-foreground-subtle">Recording</span>
+          </div>
+          {Array.from(new Set(timelineEvents.map((e) => e.label))).slice(0, 5).map((cls) => (
+            <div key={cls} className="flex items-center gap-1.5">
+              <span
+                className="inline-block h-2.5 w-2.5 rounded-full"
+                style={{ backgroundColor: colorForClass(cls) }}
+              />
+              <span className="text-[10px] text-foreground-subtle capitalize">{cls}</span>
+            </div>
+          ))}
+        </div>
+
+        {activeCameraId ? (
+          <TimelineBar
+            startMs={dayStartMs}
+            endMs={dayEndMs}
+            segments={segments}
+            events={timelineEvents}
+            playheadMs={playheadMs}
+            onSeek={setPlayheadMs}
+          />
+        ) : (
+          <div className="h-8 rounded bg-surface-hover flex items-center justify-center text-xs text-foreground-subtle">
+            Select a camera to view timeline
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}