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>