Agregar dropdown de eventos Frigate y corregir endpoint de creacion

- Agregar toggle Live/Eventos en StreamViewer
- Agregar dropdown para seleccionar eventos recientes (max 10)
- Reproducir clips de eventos en el mismo reproductor
- Crear endpoint proxy /api/frigate/events para listar eventos
- Corregir URL de creacion de eventos: /api/events/:camera/:label/create
- Actualizar useFrigateEvents con fetchEvents, formatEventTime, getEventClipUrl

nuxt4/app/composables/useFrigateEvents.ts

@@ -1,7 +1,7 @@
 /**
  * Composable para gestionar eventos de Frigate
  * Usa proxy backend para evitar problemas de CORS/cookies entre subdominios
- * API Proxy: /api/frigate/event
+ * API Proxy: /api/frigate/event, /api/frigate/events
  */
 
 export interface FrigateEventParams {
@@ -24,10 +24,81 @@ export interface FrigateEventResponse {
   message?: string
 }
 
+export interface FrigateEvent {
+  id: string
+  label: string
+  sub_label?: string
+  camera: string
+  start_time: number
+  end_time?: number
+  has_clip: boolean
+  has_snapshot: boolean
+  zones: string[]
+}
+
 export const useFrigateEvents = () => {
+  const FRIGATE_PUBLIC_URL = 'https://camaras.nucleoriofrio.com'
+
   const isCreating = useState<boolean>('frigate_creating', () => false)
+  const isLoadingEvents = useState<boolean>('frigate_loading_events', () => false)
   const error = useState<string | null>('frigate_error', () => null)
   const lastEventId = useState<string | null>('frigate_last_event', () => null)
+  const events = useState<FrigateEvent[]>('frigate_events', () => [])
+
+  /**
+   * Obtiene los eventos recientes de una camara
+   */
+  const fetchEvents = async (camera?: string, limit: number = 10): Promise<FrigateEvent[]> => {
+    isLoadingEvents.value = true
+    error.value = null
+
+    try {
+      const params = new URLSearchParams()
+      if (camera) {
+        params.set('camera', camera)
+      }
+      params.set('limit', limit.toString())
+
+      const response = await $fetch<FrigateEvent[]>(`/api/frigate/events?${params.toString()}`)
+
+      events.value = response
+      return response
+    } catch (err: unknown) {
+      const errorMessage = (err as Error)?.message || 'Error al obtener eventos'
+      error.value = errorMessage
+      console.error('[Frigate] Error fetching events:', err)
+      return []
+    } finally {
+      isLoadingEvents.value = false
+    }
+  }
+
+  /**
+   * Genera la URL del clip de un evento
+   */
+  const getEventClipUrl = (eventId: string): string => {
+    return `${FRIGATE_PUBLIC_URL}/api/events/${eventId}/clip.mp4`
+  }
+
+  /**
+   * Genera la URL del snapshot de un evento
+   */
+  const getEventSnapshotUrl = (eventId: string): string => {
+    return `${FRIGATE_PUBLIC_URL}/api/events/${eventId}/snapshot.jpg`
+  }
+
+  /**
+   * Formatea la fecha de un evento
+   */
+  const formatEventTime = (timestamp: number): string => {
+    const date = new Date(timestamp * 1000)
+    return date.toLocaleString('es-ES', {
+      day: '2-digit',
+      month: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit'
+    })
+  }
 
   /**
    * Crea un evento en Frigate para una camara especifica via proxy
@@ -40,7 +111,6 @@ export const useFrigateEvents = () => {
     error.value = null
 
     try {
-      // Usar proxy backend para evitar CORS/cookies issues
       const response = await $fetch<FrigateEventResponse>('/api/frigate/event', {
         method: 'POST',
         body: {
@@ -83,9 +153,18 @@ export const useFrigateEvents = () => {
   }
 
   return {
+    // Estado
     isCreating: readonly(isCreating),
+    isLoadingEvents: readonly(isLoadingEvents),
     error: readonly(error),
     lastEventId: readonly(lastEventId),
+    events: readonly(events),
+
+    // Métodos
+    fetchEvents,
+    getEventClipUrl,
+    getEventSnapshotUrl,
+    formatEventTime,
     createEvent,
     createQuickEvent,
     clearError