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/components/streams/StreamViewer.vue

@@ -64,10 +64,52 @@
           :items="streamTypeOptions"
           value-key="value"
           class="w-full"
+          :disabled="viewMode === 'event'"
         />
       </div>
     </div>
 
+    <!-- Toggle Live/Eventos -->
+    <div v-if="selectedStream" class="mb-4">
+      <div class="flex items-center gap-2 mb-2">
+        <UButton
+          :color="viewMode === 'live' ? 'primary' : 'neutral'"
+          :variant="viewMode === 'live' ? 'solid' : 'ghost'"
+          size="sm"
+          icon="i-heroicons-signal"
+          @click="viewMode = 'live'; selectedEventId = null"
+        >
+          En Vivo
+        </UButton>
+        <UButton
+          :color="viewMode === 'event' ? 'primary' : 'neutral'"
+          :variant="viewMode === 'event' ? 'solid' : 'ghost'"
+          size="sm"
+          icon="i-heroicons-film"
+          :loading="isLoadingEvents"
+          @click="viewMode = 'event'"
+        >
+          Eventos ({{ events.length }})
+        </UButton>
+      </div>
+
+      <!-- Selector de Eventos -->
+      <div v-if="viewMode === 'event'" class="mt-2">
+        <USelect
+          v-model="selectedEventId"
+          :items="eventOptions"
+          placeholder="Seleccionar evento..."
+          :loading="isLoadingEvents"
+          :disabled="events.length === 0"
+          value-key="value"
+          class="w-full"
+        />
+        <p v-if="events.length === 0 && !isLoadingEvents" class="text-sm text-gray-500 mt-1">
+          No hay eventos recientes para esta camara
+        </p>
+      </div>
+    </div>
+
     <!-- Banner de conexión -->
     <div
       v-if="!isStreamSessionActive"
@@ -95,15 +137,40 @@
     </div>
 
     <!-- Reproductor (solo si hay sesión activa) -->
-    <StreamsStreamPlayer
-      v-if="isStreamSessionActive"
-      :key="streamPlayerKey"
-      :stream-url="getStreamUrl"
-      :use-iframe="useIframe"
-      :stream-type="selectedType"
-      :is-loading="isLoading"
-      @error="handlePlayerError"
-    />
+    <template v-if="isStreamSessionActive">
+      <!-- Reproductor Live -->
+      <StreamsStreamPlayer
+        v-if="viewMode === 'live'"
+        :key="streamPlayerKey"
+        :stream-url="getStreamUrl"
+        :use-iframe="useIframe"
+        :stream-type="selectedType"
+        :is-loading="isLoading"
+        @error="handlePlayerError"
+      />
+
+      <!-- Reproductor de Evento -->
+      <div v-else-if="viewMode === 'event'" class="relative aspect-video bg-black rounded-lg overflow-hidden">
+        <video
+          v-if="selectedEventUrl"
+          :key="selectedEventId"
+          :src="selectedEventUrl"
+          controls
+          autoplay
+          class="w-full h-full object-contain"
+          @error="handlePlayerError('Error al cargar el clip del evento')"
+        />
+        <div
+          v-else
+          class="absolute inset-0 flex items-center justify-center text-gray-400"
+        >
+          <div class="text-center">
+            <UIcon name="i-heroicons-film" class="w-12 h-12 mb-2" />
+            <p>Selecciona un evento para reproducir</p>
+          </div>
+        </div>
+      </div>
+    </template>
 
     <!-- Botones de Eventos -->
     <div v-if="selectedStream" class="mt-4 flex items-center gap-2">
@@ -245,7 +312,13 @@ const {
 
 const {
   isCreating: isCreatingEvent,
+  isLoadingEvents,
   error: eventError,
+  events,
+  fetchEvents,
+  getEventClipUrl,
+  getEventSnapshotUrl,
+  formatEventTime,
   createEvent,
   createQuickEvent,
   clearError: clearEventError
@@ -256,6 +329,10 @@ const toast = useToast()
 // Modal state
 const showEventModal = ref(false)
 
+// View mode: 'live' or 'event'
+const viewMode = ref<'live' | 'event'>('live')
+const selectedEventId = ref<string | null>(null)
+
 // Estado de conexión a streams
 const isConnecting = ref(false)
 const isStreamSessionActive = ref(false)
@@ -338,6 +415,30 @@ const currentTypeDescription = computed(() => {
   return type?.description || ''
 })
 
+// Opciones para el dropdown de eventos
+const eventOptions = computed(() => {
+  return events.value.map(e => ({
+    value: e.id,
+    label: `${formatEventTime(e.start_time)} - ${e.label}${e.sub_label ? ` (${e.sub_label})` : ''}`
+  }))
+})
+
+// URL del evento seleccionado
+const selectedEventUrl = computed(() => {
+  if (!selectedEventId.value) return null
+  return getEventClipUrl(selectedEventId.value)
+})
+
+// Cargar eventos cuando cambia la cámara
+watch(() => selectedStream.value, async (newStream) => {
+  if (newStream) {
+    await fetchEvents(newStream, 10)
+    // Reset event selection when camera changes
+    selectedEventId.value = null
+    viewMode.value = 'live'
+  }
+})
+
 // Cargar streams al montar el componente
 onMounted(() => {
   fetchStreams()

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