feat: add server-sent events for logging and activity tracking
- Implemented a custom tracing layer (`AppLogLayer`) to capture log events and broadcast them to SSE clients. - Created admin routes for streaming server logs and listing recent activity logs. - Added an activity log repository interface and SQLite implementation for persisting activity events. - Integrated activity logging into user authentication and channel CRUD operations. - Developed frontend components for displaying server logs and activity logs in the admin panel. - Enhanced the video player with a stats overlay for monitoring streaming metrics.
This commit is contained in:
@@ -0,0 +1,73 @@
|
||||
"use client";
|
||||
|
||||
import type { ActivityEvent } from "@/lib/types";
|
||||
|
||||
const eventColors: Record<string, string> = {
|
||||
channel_created: "bg-green-900/40 text-green-400",
|
||||
channel_updated: "bg-blue-900/40 text-blue-400",
|
||||
channel_deleted: "bg-red-900/40 text-red-400",
|
||||
schedule_generated: "bg-violet-900/40 text-violet-400",
|
||||
user_login: "bg-zinc-800 text-zinc-400",
|
||||
};
|
||||
|
||||
function fmtTs(ts: string) {
|
||||
try {
|
||||
const d = new Date(ts);
|
||||
return d.toLocaleTimeString(undefined, { hour12: false });
|
||||
} catch {
|
||||
return ts;
|
||||
}
|
||||
}
|
||||
|
||||
interface ActivityLogPanelProps {
|
||||
events: ActivityEvent[];
|
||||
isLoading: boolean;
|
||||
}
|
||||
|
||||
export function ActivityLogPanel({ events, isLoading }: ActivityLogPanelProps) {
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
<div className="border-b border-zinc-800 px-4 py-2.5">
|
||||
<span className="text-xs font-semibold uppercase tracking-widest text-violet-400">
|
||||
Activity
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-3">
|
||||
{isLoading && events.length === 0 ? (
|
||||
<p className="mt-8 text-center text-xs text-zinc-600">Loading…</p>
|
||||
) : events.length === 0 ? (
|
||||
<p className="mt-8 text-center text-xs text-zinc-600">No activity yet.</p>
|
||||
) : (
|
||||
<div className="flex flex-col gap-2">
|
||||
{events.map((event) => (
|
||||
<div
|
||||
key={event.id}
|
||||
className="rounded-md border border-zinc-800 bg-zinc-900 p-3"
|
||||
>
|
||||
<div className="mb-1 flex items-center gap-2">
|
||||
<span
|
||||
className={`rounded px-1.5 py-0.5 text-[10px] font-medium ${
|
||||
eventColors[event.event_type] ?? "bg-zinc-800 text-zinc-400"
|
||||
}`}
|
||||
>
|
||||
{event.event_type.replace(/_/g, " ")}
|
||||
</span>
|
||||
<span className="ml-auto font-mono text-[10px] text-zinc-600">
|
||||
{fmtTs(event.timestamp)}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-zinc-300">{event.detail}</p>
|
||||
{event.channel_id && (
|
||||
<p className="mt-0.5 font-mono text-[10px] text-zinc-600">
|
||||
ch: {event.channel_id.slice(0, 8)}…
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
129
k-tv-frontend/app/(main)/admin/components/server-logs-panel.tsx
Normal file
129
k-tv-frontend/app/(main)/admin/components/server-logs-panel.tsx
Normal file
@@ -0,0 +1,129 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import type { LogLine } from "@/lib/types";
|
||||
|
||||
const LEVELS = ["DEBUG", "INFO", "WARN", "ERROR"] as const;
|
||||
|
||||
const levelColor: Record<string, string> = {
|
||||
DEBUG: "text-zinc-500",
|
||||
INFO: "text-zinc-300",
|
||||
WARN: "text-yellow-400",
|
||||
ERROR: "text-red-400",
|
||||
};
|
||||
|
||||
interface ServerLogsPanelProps {
|
||||
lines: LogLine[];
|
||||
connected: boolean;
|
||||
onClear: () => void;
|
||||
}
|
||||
|
||||
export function ServerLogsPanel({ lines, connected, onClear }: ServerLogsPanelProps) {
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
const [autoScroll, setAutoScroll] = useState(true);
|
||||
const [levelFilter, setLevelFilter] = useState<Set<string>>(
|
||||
new Set(["DEBUG", "INFO", "WARN", "ERROR"]),
|
||||
);
|
||||
|
||||
const filtered = lines.filter((l) => levelFilter.has(l.level.toUpperCase()));
|
||||
|
||||
useEffect(() => {
|
||||
if (!autoScroll) return;
|
||||
scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight });
|
||||
}, [filtered.length, autoScroll]);
|
||||
|
||||
const toggleLevel = (level: string) => {
|
||||
setLevelFilter((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(level)) next.delete(level);
|
||||
else next.add(level);
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const handleScroll = () => {
|
||||
const el = scrollRef.current;
|
||||
if (!el) return;
|
||||
const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 40;
|
||||
setAutoScroll(atBottom);
|
||||
};
|
||||
|
||||
const fmtTime = (ts: string) => {
|
||||
if (!ts) return "";
|
||||
try {
|
||||
return new Date(ts).toLocaleTimeString(undefined, { hour12: false });
|
||||
} catch {
|
||||
return ts;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-2 border-b border-zinc-800 px-4 py-2.5">
|
||||
<span className="text-xs font-semibold uppercase tracking-widest text-violet-400">
|
||||
Server Logs
|
||||
</span>
|
||||
<span
|
||||
className={`rounded px-1.5 py-0.5 text-[10px] font-medium ${
|
||||
connected
|
||||
? "bg-green-900/40 text-green-400"
|
||||
: "bg-zinc-800 text-zinc-500"
|
||||
}`}
|
||||
>
|
||||
{connected ? "● live" : "○ disconnected"}
|
||||
</span>
|
||||
|
||||
<div className="ml-auto flex items-center gap-1">
|
||||
{LEVELS.map((lvl) => (
|
||||
<button
|
||||
key={lvl}
|
||||
onClick={() => toggleLevel(lvl)}
|
||||
className={`rounded px-2 py-0.5 text-[10px] font-medium transition-opacity ${
|
||||
levelFilter.has(lvl) ? "opacity-100" : "opacity-30"
|
||||
} ${levelColor[lvl] ?? "text-zinc-400"}`}
|
||||
>
|
||||
{lvl}
|
||||
</button>
|
||||
))}
|
||||
<button
|
||||
onClick={() => {
|
||||
onClear();
|
||||
setAutoScroll(true);
|
||||
}}
|
||||
className="ml-2 rounded px-2 py-0.5 text-[10px] text-zinc-500 hover:text-zinc-300"
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Log lines */}
|
||||
<div
|
||||
ref={scrollRef}
|
||||
onScroll={handleScroll}
|
||||
className="flex-1 overflow-y-auto bg-zinc-950 px-4 py-2 font-mono text-[11px] leading-relaxed"
|
||||
>
|
||||
{filtered.length === 0 ? (
|
||||
<p className="mt-8 text-center text-zinc-600">
|
||||
{connected ? "Waiting for log events…" : "Connecting to server…"}
|
||||
</p>
|
||||
) : (
|
||||
filtered.map((line, i) => (
|
||||
<div key={i} className="flex gap-3">
|
||||
<span className="shrink-0 text-zinc-600">{fmtTime(line.timestamp)}</span>
|
||||
<span
|
||||
className={`w-10 shrink-0 font-semibold ${levelColor[line.level?.toUpperCase()] ?? "text-zinc-400"}`}
|
||||
>
|
||||
{line.level?.toUpperCase()}
|
||||
</span>
|
||||
<span className="shrink-0 text-zinc-500">{line.target}</span>
|
||||
<span className="text-zinc-200">{line.message}</span>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
<div className="text-violet-400">{connected && lines.length > 0 ? "▋" : ""}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
58
k-tv-frontend/app/(main)/admin/page.tsx
Normal file
58
k-tv-frontend/app/(main)/admin/page.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useAuthContext } from "@/context/auth-context";
|
||||
import { useActivityLog, useServerLogs } from "@/hooks/use-admin";
|
||||
import { ServerLogsPanel } from "./components/server-logs-panel";
|
||||
import { ActivityLogPanel } from "./components/activity-log-panel";
|
||||
|
||||
export default function AdminPage() {
|
||||
const { token, isLoaded } = useAuthContext();
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
if (isLoaded && !token) {
|
||||
router.replace("/login");
|
||||
}
|
||||
}, [isLoaded, token, router]);
|
||||
|
||||
const { lines, connected } = useServerLogs(token);
|
||||
const [localLines, setLocalLines] = useState(lines);
|
||||
|
||||
// Sync external lines into local state so Clear can reset without clearing the hook
|
||||
useEffect(() => {
|
||||
setLocalLines(lines);
|
||||
}, [lines]);
|
||||
|
||||
const { data: events = [], isLoading } = useActivityLog(token);
|
||||
|
||||
if (!isLoaded || !token) return null;
|
||||
|
||||
return (
|
||||
<div className="flex flex-1 flex-col overflow-hidden">
|
||||
{/* Page header */}
|
||||
<div className="flex items-center gap-3 border-b border-zinc-800 px-6 py-4">
|
||||
<h1 className="text-base font-semibold text-zinc-100">Admin</h1>
|
||||
<span className="text-xs text-zinc-500">System monitoring & logs</span>
|
||||
</div>
|
||||
|
||||
{/* Two-column layout */}
|
||||
<div className="flex min-h-0 flex-1 overflow-hidden">
|
||||
{/* Left: server logs */}
|
||||
<div className="flex min-w-0 flex-1 flex-col overflow-hidden border-r border-zinc-800">
|
||||
<ServerLogsPanel
|
||||
lines={localLines}
|
||||
connected={connected}
|
||||
onClear={() => setLocalLines([])}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Right: activity log */}
|
||||
<div className="flex w-80 shrink-0 flex-col overflow-hidden">
|
||||
<ActivityLogPanel events={events} isLoading={isLoading} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -6,6 +6,7 @@ const NAV_LINKS = [
|
||||
{ href: "/tv", label: "TV" },
|
||||
{ href: "/guide", label: "Guide" },
|
||||
{ href: "/dashboard", label: "Dashboard" },
|
||||
{ href: "/admin", label: "Admin" },
|
||||
{ href: "/docs", label: "Docs" },
|
||||
];
|
||||
|
||||
|
||||
150
k-tv-frontend/app/(main)/tv/components/stats-panel.tsx
Normal file
150
k-tv-frontend/app/(main)/tv/components/stats-panel.tsx
Normal file
@@ -0,0 +1,150 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import type Hls from "hls.js";
|
||||
import type { CurrentBroadcastResponse } from "@/lib/types";
|
||||
|
||||
interface StatsPanelProps {
|
||||
videoRef: React.RefObject<HTMLVideoElement | null>;
|
||||
hlsRef: React.RefObject<Hls | null>;
|
||||
streamingProtocol?: "hls" | "direct_file";
|
||||
broadcast?: CurrentBroadcastResponse | null;
|
||||
}
|
||||
|
||||
interface Stats {
|
||||
protocol: string;
|
||||
resolution: string;
|
||||
bitrate: string;
|
||||
bandwidth: string;
|
||||
buffer: string;
|
||||
offset: string;
|
||||
slotEnds: string;
|
||||
}
|
||||
|
||||
function fmtSecs(s: number) {
|
||||
const h = Math.floor(s / 3600);
|
||||
const m = Math.floor((s % 3600) / 60);
|
||||
const sec = Math.floor(s % 60);
|
||||
if (h > 0) return `${h}:${String(m).padStart(2, "0")}:${String(sec).padStart(2, "0")}`;
|
||||
return `${String(m).padStart(2, "0")}:${String(sec).padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
function fmtKbps(bps: number) {
|
||||
if (!bps) return "--";
|
||||
return `${Math.round(bps / 1000).toLocaleString()} kbps`;
|
||||
}
|
||||
|
||||
function getBufferAhead(video: HTMLVideoElement) {
|
||||
const ct = video.currentTime;
|
||||
for (let i = 0; i < video.buffered.length; i++) {
|
||||
if (video.buffered.start(i) <= ct && ct <= video.buffered.end(i)) {
|
||||
return video.buffered.end(i) - ct;
|
||||
}
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
export function StatsPanel({ videoRef, hlsRef, streamingProtocol, broadcast }: StatsPanelProps) {
|
||||
const [stats, setStats] = useState<Stats>({
|
||||
protocol: "--",
|
||||
resolution: "--",
|
||||
bitrate: "--",
|
||||
bandwidth: "--",
|
||||
buffer: "--",
|
||||
offset: "--",
|
||||
slotEnds: "--",
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const update = () => {
|
||||
const video = videoRef.current;
|
||||
const hls = hlsRef.current;
|
||||
|
||||
const protocol =
|
||||
streamingProtocol === "direct_file"
|
||||
? "Direct file"
|
||||
: hls
|
||||
? "HLS (hls.js)"
|
||||
: "HLS (native)";
|
||||
|
||||
let resolution = "--";
|
||||
let bitrate = "--";
|
||||
let bandwidth = "--";
|
||||
|
||||
if (hls) {
|
||||
const level = hls.currentLevel >= 0 ? hls.levels[hls.currentLevel] : null;
|
||||
if (level) {
|
||||
resolution = `${level.width}×${level.height}`;
|
||||
bitrate = fmtKbps(level.bitrate);
|
||||
}
|
||||
if (hls.bandwidthEstimate > 0) {
|
||||
bandwidth = fmtKbps(hls.bandwidthEstimate);
|
||||
}
|
||||
}
|
||||
|
||||
const buffer = video ? `${getBufferAhead(video).toFixed(1)} s` : "--";
|
||||
const offset = video ? fmtSecs(video.currentTime) : "--";
|
||||
|
||||
let slotEnds = "--";
|
||||
if (broadcast?.slot.end_at) {
|
||||
const secsLeft = (new Date(broadcast.slot.end_at).getTime() - Date.now()) / 1000;
|
||||
if (secsLeft > 0) {
|
||||
slotEnds = `in ${fmtSecs(secsLeft)}`;
|
||||
} else {
|
||||
slotEnds = "ending…";
|
||||
}
|
||||
}
|
||||
|
||||
setStats({ protocol, resolution, bitrate, bandwidth, buffer, offset, slotEnds });
|
||||
};
|
||||
|
||||
update();
|
||||
const id = setInterval(update, 1000);
|
||||
return () => clearInterval(id);
|
||||
}, [videoRef, hlsRef, streamingProtocol, broadcast]);
|
||||
|
||||
return (
|
||||
<div className="pointer-events-none absolute bottom-20 left-4 z-30 min-w-56 rounded-lg border border-white/10 bg-black/75 px-4 py-3 backdrop-blur-sm">
|
||||
<div className="mb-2.5 flex items-center gap-2">
|
||||
<span className="text-[10px] font-bold uppercase tracking-widest text-violet-400">
|
||||
Stats for nerds
|
||||
</span>
|
||||
<span className="rounded bg-green-900/50 px-1.5 py-0.5 text-[9px] text-green-400">
|
||||
LIVE
|
||||
</span>
|
||||
</div>
|
||||
<table className="w-full border-collapse font-mono text-[11px]">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="pr-4 text-zinc-500">Protocol</td>
|
||||
<td className="text-zinc-200">{stats.protocol}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="pr-4 text-zinc-500">Resolution</td>
|
||||
<td className="text-zinc-200">{stats.resolution}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="pr-4 text-zinc-500">Bitrate</td>
|
||||
<td className="text-zinc-200">{stats.bitrate}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="pr-4 text-zinc-500">Bandwidth est.</td>
|
||||
<td className="text-green-400">{stats.bandwidth}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="pr-4 text-zinc-500">Buffer</td>
|
||||
<td className="text-zinc-200">{stats.buffer}</td>
|
||||
</tr>
|
||||
<tr className="border-t border-white/10">
|
||||
<td className="pr-4 pt-2 text-zinc-500">Offset</td>
|
||||
<td className="pt-2 text-zinc-200">{stats.offset}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="pr-4 text-zinc-500">Slot ends</td>
|
||||
<td className="text-zinc-200">{stats.slotEnds}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,6 +1,8 @@
|
||||
import { forwardRef, useEffect, useRef, useState } from "react";
|
||||
import Hls from "hls.js";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import type { CurrentBroadcastResponse } from "@/lib/types";
|
||||
import { StatsPanel } from "./stats-panel";
|
||||
|
||||
export interface SubtitleTrack {
|
||||
id: number;
|
||||
@@ -19,6 +21,10 @@ interface VideoPlayerProps {
|
||||
muted?: boolean;
|
||||
/** Force direct-file mode (skips hls.js even for .m3u8 URLs). */
|
||||
streamingProtocol?: "hls" | "direct_file";
|
||||
/** When true, renders the Stats for Nerds overlay. */
|
||||
showStats?: boolean;
|
||||
/** Current broadcast data passed to the stats panel for slot timing. */
|
||||
broadcast?: CurrentBroadcastResponse | null;
|
||||
onStreamError?: () => void;
|
||||
onSubtitleTracksChange?: (tracks: SubtitleTrack[]) => void;
|
||||
/** Called when the browser blocks autoplay and user interaction is required. */
|
||||
@@ -37,6 +43,8 @@ const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayerProps>(
|
||||
subtitleTrack = -1,
|
||||
muted = false,
|
||||
streamingProtocol,
|
||||
showStats = false,
|
||||
broadcast,
|
||||
onStreamError,
|
||||
onSubtitleTracksChange,
|
||||
onNeedsInteraction,
|
||||
@@ -162,6 +170,16 @@ const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayerProps>(
|
||||
<Loader2 className="h-10 w-10 animate-spin text-zinc-500" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Stats for Nerds overlay */}
|
||||
{showStats && (
|
||||
<StatsPanel
|
||||
videoRef={internalRef}
|
||||
hlsRef={hlsRef}
|
||||
streamingProtocol={streamingProtocol}
|
||||
broadcast={broadcast}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
||||
@@ -16,6 +16,7 @@ import type { SubtitleTrack } from "./components/video-player";
|
||||
import type { LogoPosition } from "@/lib/types";
|
||||
import {
|
||||
Cast,
|
||||
Info,
|
||||
Maximize2,
|
||||
Minimize2,
|
||||
Volume1,
|
||||
@@ -101,6 +102,7 @@ function TvPageContent() {
|
||||
// Overlay / idle state
|
||||
const [showOverlays, setShowOverlays] = useState(true);
|
||||
const [showSchedule, setShowSchedule] = useState(false);
|
||||
const [showStats, setShowStats] = useState(false);
|
||||
const idleTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
// Video ref — used to resume playback if autoplay was blocked on load
|
||||
@@ -411,6 +413,10 @@ function TvPageContent() {
|
||||
e.preventDefault();
|
||||
prevChannel();
|
||||
break;
|
||||
case "s":
|
||||
case "S":
|
||||
setShowStats((v) => !v);
|
||||
break;
|
||||
case "g":
|
||||
case "G":
|
||||
toggleSchedule();
|
||||
@@ -623,6 +629,8 @@ function TvPageContent() {
|
||||
}
|
||||
subtitleTrack={activeSubtitleTrack}
|
||||
muted={isMuted}
|
||||
showStats={showStats}
|
||||
broadcast={broadcast}
|
||||
onSubtitleTracksChange={setSubtitleTracks}
|
||||
onStreamError={handleStreamError}
|
||||
onEnded={handleVideoEnded}
|
||||
@@ -850,6 +858,14 @@ function TvPageContent() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
className={`pointer-events-auto rounded-md bg-black/50 p-1.5 backdrop-blur transition-colors hover:bg-black/70 hover:text-white ${showStats ? "text-violet-400" : "text-zinc-400"}`}
|
||||
onClick={() => setShowStats((v) => !v)}
|
||||
title="Stats for nerds [S]"
|
||||
>
|
||||
<Info className="h-4 w-4" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="pointer-events-auto rounded-md bg-black/50 px-3 py-1.5 text-xs text-zinc-400 backdrop-blur transition-colors hover:bg-black/70 hover:text-white"
|
||||
onClick={toggleSchedule}
|
||||
|
||||
Reference in New Issue
Block a user