@camstack/addon-admin-ui 0.1.2 → 0.1.4

package/src/components/shared/WebRtcPlayer.tsx

@@ -1,211 +0,0 @@
-import { useEffect, useRef, useState, useCallback } from 'react'
-import { Volume2, VolumeX, RefreshCw, WifiOff } from 'lucide-react'
-
-export interface WebRtcPlayerProps {
-  serverUrl: string
-  streamId: string
-  autoPlay?: boolean
-  muted?: boolean
-  className?: string
-  onError?: (error: string) => void
-}
-
-type PlayerState = 'connecting' | 'playing' | 'error' | 'disconnected'
-
-const RECONNECT_DELAY_MS = 3000
-const MAX_RECONNECT_ATTEMPTS = 5
-
-export function WebRtcPlayer({
-  serverUrl,
-  streamId,
-  autoPlay = true,
-  muted: initialMuted = true,
-  className = '',
-  onError,
-}: WebRtcPlayerProps) {
-  const videoRef = useRef<HTMLVideoElement>(null)
-  const pcRef = useRef<RTCPeerConnection | null>(null)
-  const reconnectTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-  const reconnectAttemptsRef = useRef(0)
-  const mountedRef = useRef(true)
-
-  const [state, setState] = useState<PlayerState>('connecting')
-  const [errorMessage, setErrorMessage] = useState<string>('')
-  const [isMuted, setIsMuted] = useState(initialMuted)
-
-  const cleanup = useCallback(() => {
-    if (reconnectTimerRef.current) {
-      clearTimeout(reconnectTimerRef.current)
-      reconnectTimerRef.current = null
-    }
-    if (pcRef.current) {
-      pcRef.current.close()
-      pcRef.current = null
-    }
-    if (videoRef.current) {
-      videoRef.current.srcObject = null
-    }
-  }, [])
-
-  const connect = useCallback(async () => {
-    if (!mountedRef.current) return
-
-    cleanup()
-    setState('connecting')
-
-    try {
-      const pc = new RTCPeerConnection({
-        iceServers: [{ urls: 'stun:stun.l.google.com:19302' }],
-      })
-      pcRef.current = pc
-
-      // Add a transceiver for video (receive-only)
-      pc.addTransceiver('video', { direction: 'recvonly' })
-      // Optionally receive audio
-      pc.addTransceiver('audio', { direction: 'recvonly' })
-
-      pc.ontrack = (event) => {
-        if (videoRef.current && event.streams[0]) {
-          videoRef.current.srcObject = event.streams[0]
-        }
-      }
-
-      pc.oniceconnectionstatechange = () => {
-        if (!mountedRef.current) return
-        const iceState = pc.iceConnectionState
-        if (iceState === 'connected' || iceState === 'completed') {
-          reconnectAttemptsRef.current = 0
-          setState('playing')
-        } else if (iceState === 'failed' || iceState === 'disconnected' || iceState === 'closed') {
-          setState('disconnected')
-          scheduleReconnect()
-        }
-      }
-
-      // Create SDP offer (WHEP)
-      const offer = await pc.createOffer()
-      await pc.setLocalDescription(offer)
-
-      // Wait for ICE gathering to complete
-      await new Promise<void>((resolve) => {
-        if (pc.iceGatheringState === 'complete') {
-          resolve()
-          return
-        }
-        const onGatheringChange = () => {
-          if (pc.iceGatheringState === 'complete') {
-            pc.removeEventListener('icegatheringstatechange', onGatheringChange)
-            resolve()
-          }
-        }
-        pc.addEventListener('icegatheringstatechange', onGatheringChange)
-        // Timeout after 5s
-        setTimeout(resolve, 5000)
-      })
-
-      if (!mountedRef.current) return
-
-      const whepUrl = `${serverUrl}/api/webrtc?src=${encodeURIComponent(streamId)}`
-      const response = await fetch(whepUrl, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/sdp' },
-        body: pc.localDescription?.sdp ?? '',
-      })
-
-      if (!response.ok) {
-        throw new Error(`WHEP server returned ${response.status}: ${response.statusText}`)
-      }
-
-      const answerSdp = await response.text()
-      await pc.setRemoteDescription({ type: 'answer', sdp: answerSdp })
-    } catch (err) {
-      if (!mountedRef.current) return
-      const msg = err instanceof Error ? err.message : String(err)
-      setErrorMessage(msg)
-      setState('error')
-      onError?.(msg)
-      scheduleReconnect()
-    }
-  }, [serverUrl, streamId, cleanup, onError])
-
-  const scheduleReconnect = useCallback(() => {
-    if (!mountedRef.current) return
-    if (reconnectAttemptsRef.current >= MAX_RECONNECT_ATTEMPTS) return
-    reconnectAttemptsRef.current += 1
-    reconnectTimerRef.current = setTimeout(() => {
-      if (mountedRef.current) connect()
-    }, RECONNECT_DELAY_MS)
-  }, [connect])
-
-  useEffect(() => {
-    mountedRef.current = true
-    reconnectAttemptsRef.current = 0
-    connect()
-    return () => {
-      mountedRef.current = false
-      cleanup()
-    }
-  }, [serverUrl, streamId]) // Re-connect if serverUrl or streamId changes
-
-  const handleManualReconnect = () => {
-    reconnectAttemptsRef.current = 0
-    connect()
-  }
-
-  const toggleMute = () => {
-    if (videoRef.current) {
-      videoRef.current.muted = !videoRef.current.muted
-      setIsMuted(videoRef.current.muted)
-    }
-  }
-
-  return (
-    <div className={`relative bg-black overflow-hidden rounded ${className}`}>
-      <video
-        ref={videoRef}
-        autoPlay={autoPlay}
-        muted={isMuted}
-        playsInline
-        className="w-full h-full object-contain"
-      />
-
-      {/* Overlay: connecting */}
-      {state === 'connecting' && (
-        <div className="absolute inset-0 flex flex-col items-center justify-center bg-black/70 gap-2">
-          <RefreshCw className="h-6 w-6 text-foreground-subtle animate-spin" />
-          <span className="text-xs text-foreground-subtle">Connecting…</span>
-        </div>
-      )}
-
-      {/* Overlay: error / disconnected */}
-      {(state === 'error' || state === 'disconnected') && (
-        <div className="absolute inset-0 flex flex-col items-center justify-center bg-black/70 gap-2">
-          <WifiOff className="h-6 w-6 text-danger" />
-          <span className="text-xs text-danger text-center px-4">
-            {state === 'error' ? errorMessage || 'Connection failed' : 'Stream disconnected'}
-          </span>
-          <button
-            onClick={handleManualReconnect}
-            className="mt-1 inline-flex items-center gap-1.5 rounded px-3 py-1 text-xs bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
-          >
-            <RefreshCw className="h-3 w-3" />
-            Reconnect
-          </button>
-        </div>
-      )}
-
-      {/* Controls: mute button (only visible while playing) */}
-      {state === 'playing' && (
-        <div className="absolute bottom-2 right-2">
-          <button
-            onClick={toggleMute}
-            title={isMuted ? 'Unmute' : 'Mute'}
-            className="rounded-full p-1.5 bg-black/50 text-white hover:bg-black/70 transition-colors"
-          >
-            {isMuted ? <VolumeX className="h-3.5 w-3.5" /> : <Volume2 className="h-3.5 w-3.5" />}
-          </button>
-        </div>
-      )}
-    </div>
-  )
-}

package/src/components/timeline/EventMarker.tsx

@@ -1,32 +0,0 @@
-interface EventMarkerProps {
-  readonly label: string
-  readonly color: string
-  readonly title?: string
-  readonly style?: React.CSSProperties
-}
-
-export function EventMarker({ label, color, title, style }: EventMarkerProps) {
-  return (
-    <div
-      className="absolute top-1/2 -translate-y-1/2 -translate-x-1/2 z-10 group cursor-pointer"
-      style={style}
-      title={title}
-    >
-      <div
-        className="h-2.5 w-2.5 rounded-full border-2 border-background shadow-sm transition-transform group-hover:scale-150"
-        style={{ backgroundColor: color }}
-      />
-      {title && (
-        <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 hidden group-hover:block z-20 pointer-events-none">
-          <div className="bg-surface border border-border rounded px-2 py-1 text-[10px] text-foreground whitespace-nowrap shadow-lg">
-            <span
-              className="inline-block h-1.5 w-1.5 rounded-full mr-1 align-middle"
-              style={{ backgroundColor: color }}
-            />
-            {label}
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}

package/src/components/timeline/TimelineBar.tsx

@@ -1,131 +0,0 @@
-import { useRef, useCallback } from 'react'
-import { EventMarker } from './EventMarker'
-
-export interface RecordingSegment {
-  readonly startMs: number
-  readonly endMs: number
-}
-
-export interface TimelineEvent {
-  readonly id: string
-  readonly timestampMs: number
-  readonly label: string
-  readonly color: string
-}
-
-interface TimelineBarProps {
-  readonly startMs: number
-  readonly endMs: number
-  readonly segments: readonly RecordingSegment[]
-  readonly events: readonly TimelineEvent[]
-  readonly playheadMs: number
-  readonly onSeek: (ms: number) => void
-}
-
-const HOUR_MS = 3_600_000
-const LABEL_HOURS = [0, 3, 6, 9, 12, 15, 18, 21, 24]
-
-function padTwo(n: number): string {
-  return String(n).padStart(2, '0')
-}
-
-function formatHour(ms: number): string {
-  const d = new Date(ms)
-  return `${padTwo(d.getHours())}:00`
-}
-
-export function TimelineBar({
-  startMs,
-  endMs,
-  segments,
-  events,
-  playheadMs,
-  onSeek,
-}: TimelineBarProps) {
-  const trackRef = useRef<HTMLDivElement>(null)
-  const durationMs = endMs - startMs
-
-  const msToPercent = useCallback(
-    (ms: number) => Math.max(0, Math.min(100, ((ms - startMs) / durationMs) * 100)),
-    [startMs, durationMs],
-  )
-
-  function handlePointerEvent(e: React.PointerEvent<HTMLDivElement>) {
-    if (!trackRef.current) return
-    const rect = trackRef.current.getBoundingClientRect()
-    const ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))
-    onSeek(Math.round(startMs + ratio * durationMs))
-  }
-
-  // Build hour tick labels within the window
-  const tickLabels: Array<{ percent: number; label: string }> = []
-  const windowStartHour = Math.floor(startMs / HOUR_MS)
-  const windowEndHour = Math.ceil(endMs / HOUR_MS)
-  for (let h = windowStartHour; h <= windowEndHour; h++) {
-    const tickMs = h * HOUR_MS
-    if (tickMs < startMs || tickMs > endMs) continue
-    tickLabels.push({
-      percent: msToPercent(tickMs),
-      label: formatHour(tickMs),
-    })
-  }
-
-  return (
-    <div className="select-none">
-      {/* Hour labels */}
-      <div className="relative h-5 mb-1">
-        {tickLabels.map(({ percent, label }) => (
-          <span
-            key={label}
-            className="absolute -translate-x-1/2 text-[10px] text-foreground-subtle"
-            style={{ left: `${percent}%` }}
-          >
-            {label}
-          </span>
-        ))}
-      </div>
-
-      {/* Track */}
-      <div
-        ref={trackRef}
-        className="relative h-8 rounded bg-surface-hover cursor-pointer overflow-hidden border border-border"
-        onClick={handlePointerEvent}
-        onPointerMove={(e) => {
-          if (e.buttons === 1) handlePointerEvent(e)
-        }}
-      >
-        {/* Recording segments */}
-        {segments.map((seg, idx) => {
-          const left = msToPercent(seg.startMs)
-          const width = msToPercent(seg.endMs) - left
-          return (
-            <div
-              key={idx}
-              className="absolute top-1 bottom-1 rounded-sm bg-success/60"
-              style={{ left: `${left}%`, width: `${Math.max(width, 0.1)}%` }}
-            />
-          )
-        })}
-
-        {/* Event markers */}
-        {events.map((ev) => (
-          <EventMarker
-            key={ev.id}
-            label={ev.label}
-            color={ev.color}
-            title={`${ev.label} — ${new Date(ev.timestampMs).toLocaleTimeString()}`}
-            style={{ left: `${msToPercent(ev.timestampMs)}%` }}
-          />
-        ))}
-
-        {/* Playhead */}
-        <div
-          className="absolute top-0 bottom-0 w-0.5 bg-danger z-20 pointer-events-none"
-          style={{ left: `${msToPercent(playheadMs)}%` }}
-        >
-          <div className="absolute -top-0.5 left-1/2 -translate-x-1/2 w-2.5 h-2.5 bg-danger rotate-45" />
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/components/ui/ConfirmDialog.tsx

@@ -1,115 +0,0 @@
-import { useState, useCallback, createContext, useContext, type ReactNode } from 'react'
-
-// ---------------------------------------------------------------------------
-// Dialog state
-// ---------------------------------------------------------------------------
-
-interface ConfirmOptions {
-  title: string
-  message: string
-  confirmLabel?: string
-  cancelLabel?: string
-  variant?: 'danger' | 'warning' | 'default'
-}
-
-interface ConfirmContextValue {
-  confirm: (options: ConfirmOptions) => Promise<boolean>
-}
-
-const ConfirmContext = createContext<ConfirmContextValue | null>(null)
-
-export function useConfirm(): (options: ConfirmOptions) => Promise<boolean> {
-  const ctx = useContext(ConfirmContext)
-  if (!ctx) throw new Error('useConfirm must be used within ConfirmDialogProvider')
-  return ctx.confirm
-}
-
-// ---------------------------------------------------------------------------
-// Provider
-// ---------------------------------------------------------------------------
-
-interface DialogState extends ConfirmOptions {
-  resolve: (value: boolean) => void
-}
-
-export function ConfirmDialogProvider({ children }: { children: ReactNode }) {
-  const [dialog, setDialog] = useState<DialogState | null>(null)
-
-  const confirm = useCallback((options: ConfirmOptions): Promise<boolean> => {
-    return new Promise<boolean>((resolve) => {
-      setDialog({ ...options, resolve })
-    })
-  }, [])
-
-  const handleConfirm = () => {
-    dialog?.resolve(true)
-    setDialog(null)
-  }
-
-  const handleCancel = () => {
-    dialog?.resolve(false)
-    setDialog(null)
-  }
-
-  const variantStyles = {
-    danger: {
-      icon: 'text-red-400',
-      button: 'bg-red-500 hover:bg-red-600 text-white',
-    },
-    warning: {
-      icon: 'text-orange-400',
-      button: 'bg-orange-500 hover:bg-orange-600 text-white',
-    },
-    default: {
-      icon: 'text-primary',
-      button: 'bg-primary hover:bg-primary/90 text-white',
-    },
-  }
-
-  const style = dialog ? variantStyles[dialog.variant ?? 'default'] : variantStyles.default
-
-  return (
-    <ConfirmContext.Provider value={{ confirm }}>
-      {children}
-
-      {/* Backdrop + Dialog */}
-      {dialog && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center">
-          {/* Backdrop */}
-          <div
-            className="absolute inset-0 bg-black/50 backdrop-blur-sm"
-            onClick={handleCancel}
-          />
-
-          {/* Dialog */}
-          <div
-            className="relative z-10 w-full max-w-sm mx-4 rounded-xl border border-border bg-surface shadow-2xl overflow-hidden animate-in fade-in zoom-in-95 duration-150"
-            onClick={(e) => e.stopPropagation()}
-          >
-            <div className="px-5 pt-5 pb-4">
-              <h3 className="text-sm font-semibold text-foreground">{dialog.title}</h3>
-              <p className="mt-2 text-xs text-foreground-subtle leading-relaxed">{dialog.message}</p>
-            </div>
-
-            <div className="flex justify-end gap-2 px-5 py-3 border-t border-border bg-surface-hover/30">
-              <button
-                type="button"
-                onClick={handleCancel}
-                className="px-3 py-1.5 text-xs font-medium rounded-md border border-border text-foreground-subtle hover:text-foreground hover:bg-surface-hover transition-colors"
-              >
-                {dialog.cancelLabel ?? 'Cancel'}
-              </button>
-              <button
-                type="button"
-                onClick={handleConfirm}
-                className={`px-3 py-1.5 text-xs font-medium rounded-md transition-colors ${style.button}`}
-              >
-                {dialog.confirmLabel ?? 'Confirm'}
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-    </ConfirmContext.Provider>
-  )
-}

package/src/components/ui/ToastContainer.tsx

@@ -1,92 +0,0 @@
-import { useState, useEffect, useCallback } from 'react'
-import { X, Info, AlertTriangle, AlertCircle } from 'lucide-react'
-import { useBackendClient } from '../../hooks/useBackendClient'
-
-interface ToastItem {
-  id: string
-  title: string
-  message: string
-  severity: 'info' | 'warning' | 'critical'
-  duration?: number
-  timestamp: number
-}
-
-const SEVERITY_STYLES: Record<string, { bg: string; border: string; icon: typeof Info }> = {
-  info: { bg: 'bg-blue-500/10', border: 'border-blue-500/30', icon: Info },
-  warning: { bg: 'bg-orange-500/10', border: 'border-orange-500/30', icon: AlertTriangle },
-  critical: { bg: 'bg-red-500/10', border: 'border-red-500/30', icon: AlertCircle },
-}
-
-function Toast({ toast, onDismiss }: { toast: ToastItem; onDismiss: (id: string) => void }) {
-  const style = SEVERITY_STYLES[toast.severity] ?? SEVERITY_STYLES.info
-  const Icon = style.icon
-
-  useEffect(() => {
-    const duration = toast.duration ?? 5000
-    if (duration <= 0) return
-    const timer = setTimeout(() => onDismiss(toast.id), duration)
-    return () => clearTimeout(timer)
-  }, [toast.id, toast.duration, onDismiss])
-
-  return (
-    <div
-      className={`flex items-start gap-3 px-4 py-3 rounded-lg border ${style.border} ${style.bg} shadow-lg backdrop-blur-sm animate-in slide-in-from-right-5 fade-in duration-200`}
-    >
-      <Icon className="h-4 w-4 shrink-0 mt-0.5 text-foreground-subtle" />
-      <div className="flex-1 min-w-0">
-        <div className="text-xs font-semibold text-foreground">{toast.title}</div>
-        <div className="text-[11px] text-foreground-subtle mt-0.5">{toast.message}</div>
-      </div>
-      <button
-        type="button"
-        onClick={() => onDismiss(toast.id)}
-        className="shrink-0 p-0.5 rounded hover:bg-surface-hover transition-colors"
-      >
-        <X className="h-3.5 w-3.5 text-foreground-subtle" />
-      </button>
-    </div>
-  )
-}
-
-export function ToastContainer() {
-  const [toasts, setToasts] = useState<ToastItem[]>([])
-  const client = useBackendClient()
-
-  const dismiss = useCallback((id: string) => {
-    setToasts((prev) => prev.filter((t) => t.id !== id))
-  }, [])
-
-  useEffect(() => {
-    let unsubscribe: (() => void) | null = null
-
-    try {
-      // Subscribe to toast events via tRPC WebSocket subscription
-      const sub = client.trpc.toast?.onToast.subscribe(undefined, {
-        onData: (toast: any) => {
-          const id = `toast-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`
-          setToasts((prev) => [...prev, { ...toast, id, timestamp: Date.now() }])
-        },
-        onError: (err: unknown) => {
-          console.warn('[ToastContainer] Subscription error:', err)
-        },
-      })
-      unsubscribe = () => sub?.unsubscribe()
-    } catch {
-      // WS not available (e.g., server not ready)
-    }
-
-    return () => unsubscribe?.()
-  }, [client])
-
-  if (toasts.length === 0) return null
-
-  return (
-    <div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2 max-w-sm w-full pointer-events-none">
-      {toasts.map((toast) => (
-        <div key={toast.id} className="pointer-events-auto">
-          <Toast toast={toast} onDismiss={dismiss} />
-        </div>
-      ))}
-    </div>
-  )
-}

package/src/contexts/auth-context.tsx

@@ -1,91 +0,0 @@
-import { createContext, useCallback, useContext, useEffect, useState } from 'react'
-import type { ReactNode } from 'react'
-import { getBackendClient, resetBackendClient } from '../lib/backend'
-
-interface AuthUser {
-  username: string
-  role: string
-  exp: number
-}
-
-interface AuthContextValue {
-  user: AuthUser | null
-  loading: boolean
-  login: (username: string, password: string) => Promise<void>
-  logout: () => void
-}
-
-const AuthContext = createContext<AuthContextValue | null>(null)
-
-function decodeToken(token: string): AuthUser | null {
-  try {
-    const payload = JSON.parse(atob(token.split('.')[1]!))
-    return { username: payload.username ?? 'unknown', role: payload.role ?? 'viewer', exp: payload.exp ?? 0 }
-  } catch {
-    return null
-  }
-}
-
-export function AuthProvider({ children }: { children: ReactNode }) {
-  const [user, setUser] = useState<AuthUser | null>(null)
-  const [loading, setLoading] = useState(true)
-
-  useEffect(() => {
-    const token = localStorage.getItem('camstack_admin_token')
-    if (!token) {
-      setLoading(false)
-      return
-    }
-
-    const decoded = decodeToken(token)
-    if (!decoded || decoded.exp * 1000 < Date.now()) {
-      localStorage.removeItem('camstack_admin_token')
-      setLoading(false)
-      return
-    }
-
-    const client = getBackendClient()
-    client.getSystemInfo()
-      .then(() => setUser(decoded))
-      .catch((err: unknown) => {
-        // Only invalidate token for explicit auth rejection from the server.
-        // tRPC returns { data: { code: 'UNAUTHORIZED' } } when the token is invalid.
-        const code = (err as { data?: { code?: string } })?.data?.code
-        if (code === 'UNAUTHORIZED' || code === 'FORBIDDEN') {
-          localStorage.removeItem('camstack_admin_token')
-          resetBackendClient()
-        } else {
-          // Network error, server not ready, timeout, etc. — keep the token
-          setUser(decoded)
-        }
-      })
-      .finally(() => setLoading(false))
-  }, [])
-
-  const login = useCallback(async (username: string, password: string) => {
-    const client = getBackendClient()
-    const result = await client.login(username, password) as { token: string }
-    const token = result.token
-    localStorage.setItem('camstack_admin_token', token)
-    client.setToken(token)
-    setUser(decodeToken(token))
-  }, [])
-
-  const logout = useCallback(() => {
-    localStorage.removeItem('camstack_admin_token')
-    resetBackendClient()
-    setUser(null)
-  }, [])
-
-  return (
-    <AuthContext.Provider value={{ user, loading, login, logout }}>
-      {children}
-    </AuthContext.Provider>
-  )
-}
-
-export function useAuth(): AuthContextValue {
-  const ctx = useContext(AuthContext)
-  if (!ctx) throw new Error('useAuth must be used within AuthProvider')
-  return ctx
-}

package/src/hooks/useBackendClient.ts

@@ -1,6 +0,0 @@
-import { useMemo } from 'react'
-import { getBackendClient } from '../lib/backend'
-
-export function useBackendClient() {
-  return useMemo(() => getBackendClient(), [])
-}

package/src/hooks/useTheme.ts

@@ -1 +0,0 @@
-export { useThemeMode } from '@camstack/ui'