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"
      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>
        <UButton
          size="xs"
          color="error"
          variant="soft"
          @click="clearError"
        >
          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"
    />

    <!-- 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>
</template>

<script setup lang="ts">
const {
  streams,
  selectedStream,
  selectedType,
  isLoading,
  error,
  getStreamUrl,
  useIframe,
  streamTypeOptions,
  streamOptions,
  fetchStreams,
  clearError,
  STREAM_TYPES
} = useStreams()

const toast = useToast()

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