josedario87
9140272940
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m0s
- 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
409 lines
11 KiB
Vue
409 lines
11 KiB
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"
|
|
/>
|
|
</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"
|
|
: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)
|
|
|
|
// 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',
|
|
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>
|