nucleoWhisper/nuxt4/app/components/streams/StreamViewer.vue

<template>
  <UCard>
    <template #header>
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-2">
          <UIcon name="i-heroicons-video-camera" class="w-5 h-5 text-green-500" />
          <h3 class="text-lg font-semibold">Streams de Video</h3>
        </div>
        <UButton
          icon="i-heroicons-arrow-path"
          size="sm"
          color="neutral"
          variant="ghost"
          :loading="isLoading"
          @click="refreshStreams"
        >
          Actualizar
        </UButton>
      </div>
    </template>

    <!-- Error State -->
    <div
      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 || eventError }}</span>
        <UButton
          size="xs"
          color="error"
          variant="soft"
          @click="handleClearError"
        >
          Cerrar
        </UButton>
      </div>
    </div>

    <!-- Selectores -->
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
      <!-- Selector de Stream -->
      <div>
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
          Stream
        </label>
        <USelect
          v-model="selectedStream"
          :items="streamOptions"
          placeholder="Seleccionar stream..."
          :loading="isLoading"
          :disabled="streams.length === 0"
          value-key="value"
          class="w-full"
        />
      </div>

      <!-- Selector de Tipo -->
      <div>
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
          Tipo de reproduccion
        </label>
        <USelect
          v-model="selectedType"
          :items="streamTypeOptions"
          value-key="value"
          class="w-full"
        />
      </div>
    </div>

    <!-- Reproductor -->
    <StreamsStreamPlayer
      :stream-url="getStreamUrl"
      :use-iframe="useIframe"
      :stream-type="selectedType"
      :is-loading="isLoading"
      @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">
        <span>
          <UIcon name="i-heroicons-signal" class="w-4 h-4 inline mr-1" />
          {{ selectedStream }}
        </span>
        <span class="flex items-center gap-1">
          <UIcon name="i-heroicons-play-circle" class="w-4 h-4" />
          {{ currentTypeDescription }}
        </span>
      </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">
const {
  streams,
  selectedStream,
  selectedType,
  isLoading,
  error,
  getStreamUrl,
  useIframe,
  streamTypeOptions,
  streamOptions,
  fetchStreams,
  clearError,
  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)
  return type?.description || ''
})

// Cargar streams al montar el componente
onMounted(() => {
  fetchStreams()
})

const refreshStreams = () => {
  fetchStreams()
}

const handleClearError = () => {
  clearError()
  clearEventError()
}

const handlePlayerError = (message: string) => {
  toast.add({
    title: 'Error de reproduccion',
    description: message,
    icon: 'i-heroicons-exclamation-circle',
    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>