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"
        />
      </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"
          :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"
      class="mb-4 p-4 bg-gradient-to-r from-blue-500/10 to-purple-500/10 border border-blue-200 dark:border-blue-800 rounded-lg"
    >
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-3">
          <div class="p-2 bg-blue-500/20 rounded-full">
            <UIcon name="i-heroicons-lock-closed" class="w-5 h-5 text-blue-500" />
          </div>
          <div>
            <p class="font-medium text-gray-800 dark:text-gray-200">Conexion requerida</p>
            <p class="text-sm text-gray-500">Inicia sesion en Streams para ver el video</p>
          </div>
        </div>
        <UButton
          icon="i-heroicons-arrow-top-right-on-square"
          color="primary"
          :loading="isConnecting"
          @click="connectToStreams"
        >
          Iniciar Sesion
        </UButton>
      </div>
    </div>

    <!-- Reproductor (solo si hay sesión activa) -->
    <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">
      <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,
  isLoadingEvents,
  error: eventError,
  events,
  fetchEvents,
  getEventClipUrl,
  getEventSnapshotUrl,
  formatEventTime,
  createEvent,
  createQuickEvent,
  clearError: clearEventError
} = useFrigateEvents()

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)
const streamPlayerKey = ref(0) // Para forzar refresh del player

/**
 * Abre popup para autenticarse en streams.nucleoriofrio.com
 * El popup se cierra automáticamente después de cargar
 */
const connectToStreams = () => {
  isConnecting.value = true

  const popup = window.open(
    'https://streams.nucleoriofrio.com/api',
    'streams_auth',
    'width=500,height=400,menubar=no,toolbar=no,location=no,status=no'
  )

  // Verificar cuando el popup carga y cerrarlo
  const checkPopup = setInterval(() => {
    try {
      // Si el popup se cerró manualmente
      if (!popup || popup.closed) {
        clearInterval(checkPopup)
        isConnecting.value = false
        isStreamSessionActive.value = true
        streamPlayerKey.value++ // Forzar refresh del player
        toast.add({
          title: 'Conectado',
          description: 'Sesion de streams establecida',
          icon: 'i-heroicons-check-circle',
          color: 'success'
        })
        return
      }

      // Intentar acceder al contenido (solo funciona si ya autenticó)
      if (popup.document && popup.document.body) {
        // Cerrar después de 1 segundo para asegurar que la cookie se guardó
        setTimeout(() => {
          popup.close()
          clearInterval(checkPopup)
          isConnecting.value = false
          isStreamSessionActive.value = true
          streamPlayerKey.value++ // Forzar refresh del player
          toast.add({
            title: 'Conectado',
            description: 'Sesion de streams establecida',
            icon: 'i-heroicons-check-circle',
            color: 'success'
          })
        }, 1000)
      }
    } catch {
      // Error de CORS significa que está en Authentik (aún autenticando)
    }
  }, 500)

  // Timeout máximo de 60 segundos
  setTimeout(() => {
    clearInterval(checkPopup)
    isConnecting.value = false
    if (popup && !popup.closed) {
      popup.close()
    }
  }, 60000)
}

// 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 || ''
})

// 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()
})

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>