Mejoras de estabilidad de stream IPTV y nuevo registro de fallos
- restream.py: eliminar -reconnect_streamed de ffmpeg para evitar rebobinados al reconectar (el proveedor re-enviaba desde keyframe anterior causando PTS backward). El loop de Python gestiona las reconexiones con conexión fresca. - restream.py: eliminar _drain_queue del loop de reconexión para que el buffer de la cola cubra el tiempo de reconexión sin pantalla negra en el player. - restream.py: añadir buffer_server_bytes/secs/capacity a stats() y método _log_stream_event() para persistir eventos de caída y recuperación en BD. - models/stream_event.py: nuevo modelo StreamEvent para registro de fallos. - database.py: registrar StreamEvent en init_db. - api/admin/logs.py: nuevos endpoints GET/DELETE /logs/events. - Dashboard.tsx: mostrar reserva de buffer del servidor (capacidad + estado). - Logs.tsx: añadir pestaña "Fallos de stream" con tabla de eventos persistidos. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
KiraStream
@@ -0,0 +1,480 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Film, Tv, RefreshCw, Trash2, Plus, Check, X, ChevronDown, ChevronUp, Loader, Pencil } from 'lucide-react'
|
||||
import api from '../lib/api'
|
||||
|
||||
interface JellyfinConfig {
|
||||
id: number
|
||||
name: string
|
||||
url: string
|
||||
api_key: string
|
||||
is_active: boolean
|
||||
movies_library_id: string | null
|
||||
series_library_id: string | null
|
||||
movies_category_name: string
|
||||
series_category_name: string
|
||||
last_sync_at: string | null
|
||||
item_count: number
|
||||
}
|
||||
|
||||
interface Library {
|
||||
id: string
|
||||
name: string
|
||||
type: string
|
||||
}
|
||||
|
||||
interface SyncStatus {
|
||||
status: 'idle' | 'running' | 'done' | 'error'
|
||||
message: string
|
||||
synced: number
|
||||
}
|
||||
|
||||
const EMPTY_FORM = {
|
||||
name: '',
|
||||
url: 'http://10.10.10.15:8096',
|
||||
api_key: 'c339ccd3b7234c9a874bcfb70e92364a',
|
||||
movies_category_name: 'Películas KiraTV',
|
||||
series_category_name: 'Series KiraTV',
|
||||
movies_library_id: '',
|
||||
series_library_id: '',
|
||||
}
|
||||
|
||||
export default function Jellyfin() {
|
||||
const [configs, setConfigs] = useState<JellyfinConfig[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [showForm, setShowForm] = useState(false)
|
||||
const [editId, setEditId] = useState<number | null>(null)
|
||||
const [form, setForm] = useState({ ...EMPTY_FORM })
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [testResult, setTestResult] = useState<{ ok: boolean; server_name?: string; error?: string } | null>(null)
|
||||
const [testing, setTesting] = useState(false)
|
||||
const [libraries, setLibraries] = useState<Library[]>([])
|
||||
const [libsLoading, setLibsLoading] = useState(false)
|
||||
const [syncStatus, setSyncStatus] = useState<Record<number, SyncStatus>>({})
|
||||
const [expanded, setExpanded] = useState<number | null>(null)
|
||||
|
||||
useEffect(() => { load() }, [])
|
||||
|
||||
async function load() {
|
||||
setLoading(true)
|
||||
try {
|
||||
const { data } = await api.get('/jellyfin')
|
||||
setConfigs(data)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
setEditId(null)
|
||||
setForm({ ...EMPTY_FORM })
|
||||
setTestResult(null)
|
||||
setLibraries([])
|
||||
setShowForm(true)
|
||||
}
|
||||
|
||||
function openEdit(cfg: JellyfinConfig) {
|
||||
setEditId(cfg.id)
|
||||
setForm({
|
||||
name: cfg.name,
|
||||
url: cfg.url,
|
||||
api_key: cfg.api_key,
|
||||
movies_category_name: cfg.movies_category_name,
|
||||
series_category_name: cfg.series_category_name,
|
||||
movies_library_id: cfg.movies_library_id ?? '',
|
||||
series_library_id: cfg.series_library_id ?? '',
|
||||
})
|
||||
setTestResult(null)
|
||||
setLibraries([])
|
||||
setShowForm(true)
|
||||
}
|
||||
|
||||
async function testConnection() {
|
||||
if (!form.url || !form.api_key) return
|
||||
setTesting(true)
|
||||
setTestResult(null)
|
||||
try {
|
||||
// Test via temporary save-less call using an existing config if editId, else test inline
|
||||
if (editId) {
|
||||
const { data } = await api.post(`/jellyfin/${editId}/test`)
|
||||
setTestResult(data)
|
||||
} else {
|
||||
// Create temp config, test, then delete
|
||||
const { data: created } = await api.post('/jellyfin', {
|
||||
name: '__test__',
|
||||
url: form.url,
|
||||
api_key: form.api_key,
|
||||
movies_category_name: form.movies_category_name,
|
||||
series_category_name: form.series_category_name,
|
||||
})
|
||||
const { data: result } = await api.post(`/jellyfin/${created.id}/test`)
|
||||
await api.delete(`/jellyfin/${created.id}`)
|
||||
setTestResult(result)
|
||||
}
|
||||
} catch {
|
||||
setTestResult({ ok: false, error: 'Error de red' })
|
||||
} finally {
|
||||
setTesting(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function loadLibraries() {
|
||||
if (!editId) {
|
||||
// Need to save first
|
||||
await save()
|
||||
return
|
||||
}
|
||||
setLibsLoading(true)
|
||||
try {
|
||||
const { data } = await api.get(`/jellyfin/${editId}/libraries`)
|
||||
setLibraries(data)
|
||||
} catch {
|
||||
setLibraries([])
|
||||
} finally {
|
||||
setLibsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function save() {
|
||||
setSaving(true)
|
||||
try {
|
||||
const payload = {
|
||||
...form,
|
||||
movies_library_id: form.movies_library_id || null,
|
||||
series_library_id: form.series_library_id || null,
|
||||
}
|
||||
if (editId) {
|
||||
await api.put(`/jellyfin/${editId}`, payload)
|
||||
} else {
|
||||
const { data } = await api.post('/jellyfin', payload)
|
||||
setEditId(data.id)
|
||||
}
|
||||
await load()
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteCfg(id: number) {
|
||||
if (!confirm('¿Eliminar esta configuración de Jellyfin? Se borrarán todos los canales sincronizados.')) return
|
||||
await api.delete(`/jellyfin/${id}`)
|
||||
setConfigs(prev => prev.filter(c => c.id !== id))
|
||||
if (editId === id) setShowForm(false)
|
||||
}
|
||||
|
||||
async function startSync(id: number) {
|
||||
setSyncStatus(prev => ({ ...prev, [id]: { status: 'running', message: 'Iniciando…', synced: 0 } }))
|
||||
await api.post(`/jellyfin/${id}/sync`)
|
||||
pollSync(id)
|
||||
}
|
||||
|
||||
function pollSync(id: number) {
|
||||
const iv = setInterval(async () => {
|
||||
try {
|
||||
const { data } = await api.get(`/jellyfin/${id}/sync-status`)
|
||||
setSyncStatus(prev => ({ ...prev, [id]: data }))
|
||||
if (data.status !== 'running') {
|
||||
clearInterval(iv)
|
||||
if (data.status === 'done') load()
|
||||
}
|
||||
} catch {
|
||||
clearInterval(iv)
|
||||
}
|
||||
}, 1500)
|
||||
}
|
||||
|
||||
const movieLibs = libraries.filter(l => l.type === 'movies' || l.type === '')
|
||||
const tvLibs = libraries.filter(l => l.type === 'tvshows' || l.type === '')
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-4xl mx-auto">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">Biblioteca Jellyfin</h1>
|
||||
<p className="text-gray-400 text-sm mt-1">
|
||||
Integra tu catálogo local de Jellyfin como VOD y Series en KiraStream
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={openCreate}
|
||||
className="flex items-center gap-2 bg-primary-600 hover:bg-primary-500 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors"
|
||||
>
|
||||
<Plus size={16} /> Nueva conexión
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Config list */}
|
||||
{loading ? (
|
||||
<div className="flex justify-center py-12">
|
||||
<Loader size={24} className="animate-spin text-gray-400" />
|
||||
</div>
|
||||
) : configs.length === 0 ? (
|
||||
<div className="bg-dark-800 border border-dark-700 rounded-xl p-12 text-center text-gray-500">
|
||||
<Film size={36} className="mx-auto mb-3 opacity-30" />
|
||||
<p className="text-sm">No hay conexiones Jellyfin configuradas</p>
|
||||
<button onClick={openCreate} className="mt-4 text-primary-400 hover:text-primary-300 text-sm">
|
||||
+ Añadir primera conexión
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{configs.map(cfg => {
|
||||
const ss = syncStatus[cfg.id]
|
||||
return (
|
||||
<div key={cfg.id} className="bg-dark-800 border border-dark-700 rounded-xl overflow-hidden">
|
||||
<div className="flex items-center gap-4 p-4">
|
||||
<div className="w-10 h-10 rounded-lg bg-purple-900/30 flex items-center justify-center shrink-0">
|
||||
<Film size={20} className="text-purple-400" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium">{cfg.name}</span>
|
||||
<span className={`text-xs px-1.5 py-0.5 rounded ${cfg.is_active ? 'bg-green-900/30 text-green-400' : 'bg-gray-700 text-gray-400'}`}>
|
||||
{cfg.is_active ? 'activo' : 'inactivo'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 mt-0.5 truncate">{cfg.url}</div>
|
||||
<div className="text-xs text-gray-600 mt-0.5">
|
||||
{cfg.item_count} elementos
|
||||
{cfg.last_sync_at && ` · Última sync: ${new Date(cfg.last_sync_at).toLocaleString('es-ES')}`}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
{ss?.status === 'running' ? (
|
||||
<span className="flex items-center gap-1 text-xs text-yellow-400">
|
||||
<RefreshCw size={12} className="animate-spin" /> {ss.message}
|
||||
</span>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => startSync(cfg.id)}
|
||||
className="flex items-center gap-1.5 text-xs bg-dark-700 hover:bg-primary-600 text-gray-300 hover:text-white px-3 py-1.5 rounded-lg transition-colors"
|
||||
>
|
||||
<RefreshCw size={12} /> Sincronizar
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => openEdit(cfg)}
|
||||
className="text-gray-500 hover:text-primary-400 p-1.5 rounded transition-colors"
|
||||
title="Editar"
|
||||
>
|
||||
<Pencil size={14} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => deleteCfg(cfg.id)}
|
||||
className="text-gray-500 hover:text-red-400 p-1.5 rounded transition-colors"
|
||||
title="Eliminar"
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setExpanded(expanded === cfg.id ? null : cfg.id)}
|
||||
className="text-gray-500 hover:text-gray-300 p-1.5 rounded transition-colors"
|
||||
>
|
||||
{expanded === cfg.id ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{ss?.status === 'done' && (
|
||||
<div className="px-4 pb-3 text-xs text-green-400 flex items-center gap-1">
|
||||
<Check size={12} /> {ss.message} · {ss.synced} elementos importados
|
||||
</div>
|
||||
)}
|
||||
{ss?.status === 'error' && (
|
||||
<div className="px-4 pb-3 text-xs text-red-400 flex items-center gap-1">
|
||||
<X size={12} /> Error: {ss.message}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{expanded === cfg.id && (
|
||||
<div className="px-4 pb-4 border-t border-dark-700 pt-3 grid grid-cols-2 gap-4 text-xs text-gray-400">
|
||||
<div>
|
||||
<div className="flex items-center gap-1 mb-1 text-purple-400 font-medium">
|
||||
<Film size={12} /> Películas
|
||||
</div>
|
||||
<div>Categoría: <span className="text-gray-300">{cfg.movies_category_name}</span></div>
|
||||
<div>Biblioteca: <span className="text-gray-300">{cfg.movies_library_id || '—'}</span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-1 mb-1 text-blue-400 font-medium">
|
||||
<Tv size={12} /> Series
|
||||
</div>
|
||||
<div>Categoría: <span className="text-gray-300">{cfg.series_category_name}</span></div>
|
||||
<div>Biblioteca: <span className="text-gray-300">{cfg.series_library_id || '—'}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Form modal */}
|
||||
{showForm && (
|
||||
<div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-dark-800 border border-dark-700 rounded-xl w-full max-w-lg max-h-[90vh] overflow-y-auto">
|
||||
<div className="flex items-center justify-between p-4 border-b border-dark-700">
|
||||
<h2 className="font-semibold">{editId ? 'Editar conexión' : 'Nueva conexión Jellyfin'}</h2>
|
||||
<button onClick={() => setShowForm(false)} className="text-gray-500 hover:text-white">
|
||||
<X size={16} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="p-4 space-y-4">
|
||||
<div>
|
||||
<label className="text-xs text-gray-400 mb-1 block">Nombre</label>
|
||||
<input
|
||||
className="w-full bg-dark-700 border border-dark-600 rounded-lg px-3 py-2 text-sm"
|
||||
value={form.name}
|
||||
onChange={e => setForm(f => ({ ...f, name: e.target.value }))}
|
||||
placeholder="Mi Jellyfin"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-gray-400 mb-1 block">URL del servidor</label>
|
||||
<input
|
||||
className="w-full bg-dark-700 border border-dark-600 rounded-lg px-3 py-2 text-sm font-mono"
|
||||
value={form.url}
|
||||
onChange={e => setForm(f => ({ ...f, url: e.target.value }))}
|
||||
placeholder="http://192.168.1.x:8096"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-gray-400 mb-1 block">API Key</label>
|
||||
<input
|
||||
className="w-full bg-dark-700 border border-dark-600 rounded-lg px-3 py-2 text-sm font-mono"
|
||||
value={form.api_key}
|
||||
onChange={e => setForm(f => ({ ...f, api_key: e.target.value }))}
|
||||
placeholder="Tu API key de Jellyfin"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Test connection */}
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={testConnection}
|
||||
disabled={testing || !form.url || !form.api_key}
|
||||
className="flex items-center gap-1.5 bg-dark-700 hover:bg-dark-600 text-sm px-3 py-2 rounded-lg transition-colors disabled:opacity-50"
|
||||
>
|
||||
{testing ? <Loader size={14} className="animate-spin" /> : <Check size={14} />}
|
||||
Probar conexión
|
||||
</button>
|
||||
{testResult && (
|
||||
<span className={`text-xs flex items-center gap-1 ${testResult.ok ? 'text-green-400' : 'text-red-400'}`}>
|
||||
{testResult.ok ? (
|
||||
<><Check size={12} /> {testResult.server_name}</>
|
||||
) : (
|
||||
<><X size={12} /> {testResult.error}</>
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<hr className="border-dark-600" />
|
||||
|
||||
{/* Library selectors */}
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs text-gray-400 font-medium uppercase tracking-wider">Bibliotecas</span>
|
||||
<button
|
||||
onClick={loadLibraries}
|
||||
disabled={libsLoading}
|
||||
className="flex items-center gap-1 text-xs text-primary-400 hover:text-primary-300 transition-colors disabled:opacity-50"
|
||||
>
|
||||
{libsLoading ? <Loader size={11} className="animate-spin" /> : <RefreshCw size={11} />}
|
||||
{editId ? 'Cargar bibliotecas' : 'Guardar primero para cargar'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="text-xs text-gray-400 mb-1 block flex items-center gap-1">
|
||||
<Film size={11} /> Biblioteca de Películas
|
||||
</label>
|
||||
{libraries.length > 0 ? (
|
||||
<select
|
||||
className="w-full bg-dark-700 border border-dark-600 rounded-lg px-3 py-2 text-sm"
|
||||
value={form.movies_library_id}
|
||||
onChange={e => setForm(f => ({ ...f, movies_library_id: e.target.value }))}
|
||||
>
|
||||
<option value="">— ninguna —</option>
|
||||
{libraries.map(l => (
|
||||
<option key={l.id} value={l.id}>{l.name} ({l.type || 'sin tipo'})</option>
|
||||
))}
|
||||
</select>
|
||||
) : (
|
||||
<input
|
||||
className="w-full bg-dark-700 border border-dark-600 rounded-lg px-3 py-2 text-sm font-mono text-xs"
|
||||
value={form.movies_library_id}
|
||||
onChange={e => setForm(f => ({ ...f, movies_library_id: e.target.value }))}
|
||||
placeholder="ID de biblioteca"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-gray-400 mb-1 block flex items-center gap-1">
|
||||
<Tv size={11} /> Biblioteca de Series
|
||||
</label>
|
||||
{libraries.length > 0 ? (
|
||||
<select
|
||||
className="w-full bg-dark-700 border border-dark-600 rounded-lg px-3 py-2 text-sm"
|
||||
value={form.series_library_id}
|
||||
onChange={e => setForm(f => ({ ...f, series_library_id: e.target.value }))}
|
||||
>
|
||||
<option value="">— ninguna —</option>
|
||||
{libraries.map(l => (
|
||||
<option key={l.id} value={l.id}>{l.name} ({l.type || 'sin tipo'})</option>
|
||||
))}
|
||||
</select>
|
||||
) : (
|
||||
<input
|
||||
className="w-full bg-dark-700 border border-dark-600 rounded-lg px-3 py-2 text-sm font-mono text-xs"
|
||||
value={form.series_library_id}
|
||||
onChange={e => setForm(f => ({ ...f, series_library_id: e.target.value }))}
|
||||
placeholder="ID de biblioteca"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="text-xs text-gray-400 mb-1 block">Nombre categoría Películas</label>
|
||||
<input
|
||||
className="w-full bg-dark-700 border border-dark-600 rounded-lg px-3 py-2 text-sm"
|
||||
value={form.movies_category_name}
|
||||
onChange={e => setForm(f => ({ ...f, movies_category_name: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-gray-400 mb-1 block">Nombre categoría Series</label>
|
||||
<input
|
||||
className="w-full bg-dark-700 border border-dark-600 rounded-lg px-3 py-2 text-sm"
|
||||
value={form.series_category_name}
|
||||
onChange={e => setForm(f => ({ ...f, series_category_name: e.target.value }))}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-3 p-4 border-t border-dark-700">
|
||||
<button
|
||||
onClick={() => setShowForm(false)}
|
||||
className="px-4 py-2 text-sm text-gray-400 hover:text-white"
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
<button
|
||||
onClick={async () => { await save(); setShowForm(false) }}
|
||||
disabled={saving || !form.name || !form.url || !form.api_key}
|
||||
className="flex items-center gap-2 bg-primary-600 hover:bg-primary-500 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors disabled:opacity-50"
|
||||
>
|
||||
{saving && <Loader size={14} className="animate-spin" />}
|
||||
{editId ? 'Guardar cambios' : 'Crear'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user