@camstack/addon-admin-ui 0.1.1 → 0.1.3

package/src/pages/Timeline.tsx

@@ -1,269 +0,0 @@
-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>
-  )
-}