Agregar botones de eventos Frigate al visor de streams

- Nuevo composable useFrigateEvents.ts para crear eventos en Frigate
- Boton "Evento Rapido" crea eventoWhisper de 1 minuto
- Boton de configuracion abre modal con campos personalizables
- Modal permite editar: label, sub_label, duration, include_recording
- API: POST camaras.nucleoriofrio.com/api/events/{camera}/create

nuxt4/app/components/streams/StreamViewer.vue

@@ -21,17 +21,17 @@
 
     <!-- Error State -->
     <div
-      v-if="error"
+      v-if="error || eventError"
       class="mb-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg"
     >
       <div class="flex items-center gap-2 text-red-600 dark:text-red-400">
         <UIcon name="i-heroicons-exclamation-triangle" class="w-5 h-5" />
-        <span>{{ error }}</span>
+        <span>{{ error || eventError }}</span>
         <UButton
           size="xs"
           color="error"
           variant="soft"
-          @click="clearError"
+          @click="handleClearError"
         >
           Cerrar
         </UButton>
@@ -79,6 +79,27 @@
       @error="handlePlayerError"
     />
 
+    <!-- Botones de Eventos -->
+    <div v-if="selectedStream" class="mt-4 flex items-center gap-2">
+      <UButton
+        icon="i-heroicons-bolt"
+        color="primary"
+        :loading="isCreatingEvent"
+        :disabled="!selectedStream"
+        @click="handleQuickEvent"
+      >
+        Evento Rapido
+      </UButton>
+      <UButton
+        icon="i-heroicons-cog-6-tooth"
+        color="neutral"
+        variant="soft"
+        size="sm"
+        :disabled="!selectedStream"
+        @click="showEventModal = true"
+      />
+    </div>
+
     <!-- Info del stream actual -->
     <template #footer v-if="selectedStream">
       <div class="flex items-center justify-between text-sm text-gray-500">
@@ -93,6 +114,91 @@
       </div>
     </template>
   </UCard>
+
+  <!-- Modal de Evento Personalizado -->
+  <UModal v-model:open="showEventModal">
+    <template #content>
+      <UCard>
+        <template #header>
+          <div class="flex items-center gap-2">
+            <UIcon name="i-heroicons-bolt" class="w-5 h-5 text-primary-500" />
+            <h3 class="text-lg font-semibold">Crear Evento</h3>
+          </div>
+        </template>
+
+        <div class="space-y-4">
+          <!-- Label -->
+          <div>
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+              Label *
+            </label>
+            <UInput
+              v-model="eventForm.label"
+              placeholder="Ej: person, car, eventoWhisper"
+            />
+          </div>
+
+          <!-- Sub Label -->
+          <div>
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+              Sub Label
+            </label>
+            <UInput
+              v-model="eventForm.sub_label"
+              placeholder="Etiqueta secundaria (opcional)"
+            />
+          </div>
+
+          <!-- Duration -->
+          <div>
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+              Duracion (segundos)
+            </label>
+            <UInput
+              v-model.number="eventForm.duration"
+              type="number"
+              min="1"
+              max="3600"
+              placeholder="60"
+            />
+          </div>
+
+          <!-- Include Recording -->
+          <div class="flex items-center gap-2">
+            <UCheckbox
+              v-model="eventForm.include_recording"
+              label="Incluir grabacion"
+            />
+          </div>
+
+          <!-- Camera Info -->
+          <div class="text-sm text-gray-500 bg-gray-50 dark:bg-gray-800 p-2 rounded">
+            <span class="font-medium">Camara:</span> {{ selectedStream?.replace(/_main$|_sub$/, '') }}
+          </div>
+        </div>
+
+        <template #footer>
+          <div class="flex justify-end gap-2">
+            <UButton
+              color="neutral"
+              variant="ghost"
+              @click="showEventModal = false"
+            >
+              Cancelar
+            </UButton>
+            <UButton
+              color="primary"
+              :loading="isCreatingEvent"
+              :disabled="!eventForm.label"
+              @click="handleCustomEvent"
+            >
+              Crear Evento
+            </UButton>
+          </div>
+        </template>
+      </UCard>
+    </template>
+  </UModal>
 </template>
 
 <script setup lang="ts">
@@ -111,8 +217,27 @@ const {
   STREAM_TYPES
 } = useStreams()
 
+const {
+  isCreating: isCreatingEvent,
+  error: eventError,
+  createEvent,
+  createQuickEvent,
+  clearError: clearEventError
+} = useFrigateEvents()
+
 const toast = useToast()
 
+// Modal state
+const showEventModal = ref(false)
+
+// Form state
+const eventForm = reactive({
+  label: 'eventoWhisper',
+  sub_label: '',
+  duration: 60,
+  include_recording: true
+})
+
 // Descripcion del tipo actual
 const currentTypeDescription = computed(() => {
   const type = STREAM_TYPES.find(t => t.value === selectedType.value)
@@ -128,6 +253,11 @@ const refreshStreams = () => {
   fetchStreams()
 }
 
+const handleClearError = () => {
+  clearError()
+  clearEventError()
+}
+
 const handlePlayerError = (message: string) => {
   toast.add({
     title: 'Error de reproduccion',
@@ -136,4 +266,54 @@ const handlePlayerError = (message: string) => {
     color: 'error'
   })
 }
+
+const handleQuickEvent = async () => {
+  if (!selectedStream.value) return
+
+  const result = await createQuickEvent(selectedStream.value)
+
+  if (result.success) {
+    toast.add({
+      title: 'Evento creado',
+      description: 'eventoWhisper (1 minuto)',
+      icon: 'i-heroicons-check-circle',
+      color: 'success'
+    })
+  } else {
+    toast.add({
+      title: 'Error',
+      description: result.message || 'No se pudo crear el evento',
+      icon: 'i-heroicons-x-circle',
+      color: 'error'
+    })
+  }
+}
+
+const handleCustomEvent = async () => {
+  if (!selectedStream.value || !eventForm.label) return
+
+  const result = await createEvent(selectedStream.value, {
+    label: eventForm.label,
+    sub_label: eventForm.sub_label || undefined,
+    duration: eventForm.duration || 60,
+    include_recording: eventForm.include_recording
+  })
+
+  if (result.success) {
+    toast.add({
+      title: 'Evento creado',
+      description: `${eventForm.label} (${eventForm.duration}s)`,
+      icon: 'i-heroicons-check-circle',
+      color: 'success'
+    })
+    showEventModal.value = false
+  } else {
+    toast.add({
+      title: 'Error',
+      description: result.message || 'No se pudo crear el evento',
+      icon: 'i-heroicons-x-circle',
+      color: 'error'
+    })
+  }
+}
 </script>

nuxt4/app/composables/useFrigateEvents.ts

@@ -0,0 +1,97 @@
+/**
+ * Composable para gestionar eventos de Frigate
+ * API: https://camaras.nucleoriofrio.com/api/events/{camera}/create
+ */
+
+export interface FrigateEventParams {
+  label: string
+  sub_label?: string
+  duration?: number
+  include_recording?: boolean
+  draw?: {
+    boxes?: Array<{
+      box: [number, number, number, number]
+      color?: [number, number, number]
+      score?: number
+    }>
+  }
+}
+
+export interface FrigateEventResponse {
+  success: boolean
+  event_id?: string
+  message?: string
+}
+
+export const useFrigateEvents = () => {
+  const BASE_URL = 'https://camaras.nucleoriofrio.com'
+
+  const isCreating = useState<boolean>('frigate_creating', () => false)
+  const error = useState<string | null>('frigate_error', () => null)
+  const lastEventId = useState<string | null>('frigate_last_event', () => null)
+
+  /**
+   * Crea un evento en Frigate para una camara especifica
+   */
+  const createEvent = async (
+    camera: string,
+    params: FrigateEventParams
+  ): Promise<FrigateEventResponse> => {
+    isCreating.value = true
+    error.value = null
+
+    try {
+      // Extraer el nombre base de la camara (sin _main o _sub)
+      const cameraName = camera.replace(/_main$|_sub$/, '')
+
+      const response = await $fetch<FrigateEventResponse>(
+        `${BASE_URL}/api/events/${cameraName}/create`,
+        {
+          method: 'POST',
+          credentials: 'include',
+          body: params
+        }
+      )
+
+      if (response.event_id) {
+        lastEventId.value = response.event_id
+      }
+
+      return { success: true, ...response }
+    } catch (err: unknown) {
+      const errorMessage = (err as Error)?.message || 'Error al crear evento'
+      error.value = errorMessage
+      console.error('[Frigate] Error creating event:', err)
+      return { success: false, message: errorMessage }
+    } finally {
+      isCreating.value = false
+    }
+  }
+
+  /**
+   * Crea un evento rapido "eventoWhisper" de 1 minuto
+   */
+  const createQuickEvent = async (camera: string): Promise<FrigateEventResponse> => {
+    return createEvent(camera, {
+      label: 'eventoWhisper',
+      duration: 60,
+      include_recording: true
+    })
+  }
+
+  /**
+   * Limpia el error
+   */
+  const clearError = () => {
+    error.value = null
+  }
+
+  return {
+    isCreating: readonly(isCreating),
+    error: readonly(error),
+    lastEventId: readonly(lastEventId),
+    createEvent,
+    createQuickEvent,
+    clearError
+  }
+}