Agregar banner de conexion a streams con estilo profesional

- Banner con gradiente que indica cuando se requiere conexion
- Boton "Iniciar Sesion" abre popup para autenticarse en streams
- El popup se cierra automaticamente despues de autenticar
- El banner desaparece una vez conectado

nuxt4/app/components/streams/StreamViewer.vue

@@ -13,9 +13,7 @@
           variant="ghost"
           :loading="isLoading"
           @click="refreshStreams"
-        >
+        />
-          Actualizar
-        </UButton>
       </div>
     </template>
 
@@ -70,6 +68,32 @@
       </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 -->
     <StreamsStreamPlayer
       :stream-url="getStreamUrl"
@@ -230,6 +254,71 @@ const toast = useToast()
 // Modal state
 const showEventModal = ref(false)
 
+// Estado de conexión a streams
+const isConnecting = ref(false)
+const isStreamSessionActive = ref(false)
+
+/**
+ * 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
+        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
+          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',