first commit
This commit is contained in:
+21
@@ -0,0 +1,21 @@
|
||||
import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router-dom";
|
||||
import AppShell from "@/components/AppShell";
|
||||
import Live from "@/pages/Live";
|
||||
import Playback from "@/pages/Playback";
|
||||
import Settings from "@/pages/Settings";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<Router>
|
||||
<AppShell>
|
||||
<Routes>
|
||||
<Route path="/" element={<Navigate to="/live" replace />} />
|
||||
<Route path="/live" element={<Live />} />
|
||||
<Route path="/playback" element={<Playback />} />
|
||||
<Route path="/settings" element={<Settings />} />
|
||||
<Route path="*" element={<Navigate to="/live" replace />} />
|
||||
</Routes>
|
||||
</AppShell>
|
||||
</Router>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
@@ -0,0 +1,14 @@
|
||||
import { ReactNode } from "react";
|
||||
import TopNav from "@/components/TopNav";
|
||||
|
||||
export default function AppShell({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
<div className="min-h-dvh bg-zinc-950 text-zinc-50">
|
||||
<TopNav />
|
||||
<main className="mx-auto w-full max-w-7xl px-4 py-4 md:px-6 md:py-6">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,106 @@
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { Maximize, RefreshCcw } from "lucide-react";
|
||||
import { useWhepPlayer } from "@/hooks/useWhepPlayer";
|
||||
|
||||
type Props = {
|
||||
name: string;
|
||||
webrtcBaseUrl: string;
|
||||
isOnline: boolean;
|
||||
};
|
||||
|
||||
function StatusDot({ online }: { online: boolean }) {
|
||||
return (
|
||||
<span
|
||||
className={[
|
||||
"inline-flex h-2.5 w-2.5 rounded-full",
|
||||
online ? "bg-emerald-400" : "bg-rose-400",
|
||||
].join(" ")}
|
||||
aria-label={online ? "online" : "offline"}
|
||||
title={online ? "online" : "offline"}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default function CameraTile({ name, webrtcBaseUrl, isOnline }: Props) {
|
||||
const containerRef = useRef<HTMLDivElement | null>(null);
|
||||
const [visible, setVisible] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const el = containerRef.current;
|
||||
if (!el) return;
|
||||
|
||||
const io = new IntersectionObserver(
|
||||
(entries) => {
|
||||
const entry = entries[0];
|
||||
setVisible(Boolean(entry?.isIntersecting));
|
||||
},
|
||||
{ threshold: 0.2 }
|
||||
);
|
||||
|
||||
io.observe(el);
|
||||
return () => io.disconnect();
|
||||
}, []);
|
||||
|
||||
const enabled = useMemo(() => visible, [visible]);
|
||||
const player = useWhepPlayer({ enabled, webrtcBaseUrl, streamName: name });
|
||||
|
||||
const onFullscreen = async () => {
|
||||
const v = player.videoRef.current;
|
||||
if (!v) return;
|
||||
const anyV = v as HTMLVideoElement & { webkitRequestFullscreen?: () => Promise<void> | void };
|
||||
if (v.requestFullscreen) await v.requestFullscreen();
|
||||
else if (anyV.webkitRequestFullscreen) anyV.webkitRequestFullscreen();
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="group relative overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900/30"
|
||||
>
|
||||
<div className="absolute left-0 top-0 z-10 flex w-full items-center justify-between gap-2 bg-gradient-to-b from-zinc-950/80 to-transparent px-3 py-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<StatusDot online={isOnline} />
|
||||
<div className="text-xs font-medium text-zinc-100">{name}</div>
|
||||
<div className="text-[11px] text-zinc-400">
|
||||
{player.status === "playing" ? "webrtc" : player.status}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1 opacity-100 transition md:opacity-0 md:group-hover:opacity-100">
|
||||
<button
|
||||
type="button"
|
||||
onClick={player.restart}
|
||||
className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-zinc-700 bg-zinc-950/40 text-zinc-200 transition hover:bg-zinc-900"
|
||||
title="Reload"
|
||||
>
|
||||
<RefreshCcw className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onFullscreen}
|
||||
className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-zinc-700 bg-zinc-950/40 text-zinc-200 transition hover:bg-zinc-900"
|
||||
title="Fullscreen"
|
||||
>
|
||||
<Maximize className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="aspect-video w-full bg-black">
|
||||
<video
|
||||
ref={player.videoRef}
|
||||
className="h-full w-full object-contain"
|
||||
muted
|
||||
playsInline
|
||||
/>
|
||||
</div>
|
||||
|
||||
{player.status === "error" ? (
|
||||
<div className="border-t border-zinc-800 px-3 py-2 text-xs text-rose-300">
|
||||
{player.error ?? "error"}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
// Empty component
|
||||
export default function Empty() {
|
||||
return (
|
||||
<div className={cn('flex h-full items-center justify-center')}>Empty</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import { MemoryRouter } from "react-router-dom";
|
||||
import { describe, expect, it } from "vitest";
|
||||
import TopNav from "@/components/TopNav";
|
||||
|
||||
describe("TopNav", () => {
|
||||
it("renders navigation links", () => {
|
||||
render(
|
||||
<MemoryRouter>
|
||||
<TopNav />
|
||||
</MemoryRouter>
|
||||
);
|
||||
|
||||
expect(screen.getByText("Live")).toBeInTheDocument();
|
||||
expect(screen.getByText("Playback")).toBeInTheDocument();
|
||||
expect(screen.getByText("Settings")).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -0,0 +1,55 @@
|
||||
import { NavLink } from "react-router-dom";
|
||||
import { Film, Settings2, Video } from "lucide-react";
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
function NavItem({
|
||||
to,
|
||||
label,
|
||||
icon,
|
||||
}: {
|
||||
to: string;
|
||||
label: string;
|
||||
icon: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<NavLink
|
||||
to={to}
|
||||
className={({ isActive }) =>
|
||||
[
|
||||
"inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition",
|
||||
isActive
|
||||
? "bg-zinc-800 text-zinc-50"
|
||||
: "text-zinc-300 hover:bg-zinc-900 hover:text-zinc-50",
|
||||
].join(" ")
|
||||
}
|
||||
>
|
||||
<span className="inline-flex h-4 w-4 items-center justify-center">{icon}</span>
|
||||
<span>{label}</span>
|
||||
</NavLink>
|
||||
);
|
||||
}
|
||||
|
||||
export default function TopNav() {
|
||||
return (
|
||||
<header className="border-b border-zinc-800 bg-zinc-950/70 backdrop-blur">
|
||||
<div className="mx-auto flex w-full max-w-7xl items-center justify-between gap-4 px-4 py-3 md:px-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-9 w-9 items-center justify-center rounded-lg bg-zinc-900 ring-1 ring-zinc-800">
|
||||
<Video className="h-5 w-5" />
|
||||
</div>
|
||||
<div className="leading-tight">
|
||||
<div className="text-sm font-semibold">IPCam Dashboard</div>
|
||||
<div className="text-xs text-zinc-400">MediaMTX + Orange Pi</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav className="flex items-center gap-1">
|
||||
<NavItem to="/live" label="Live" icon={<Video className="h-4 w-4" />} />
|
||||
<NavItem to="/playback" label="Playback" icon={<Film className="h-4 w-4" />} />
|
||||
<NavItem to="/settings" label="Settings" icon={<Settings2 className="h-4 w-4" />} />
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,40 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { apiJson } from "@/utils/api";
|
||||
import type { MediaMtxPathsListResponse } from "@/types/api";
|
||||
|
||||
export function usePathsStatus(pollMs: number) {
|
||||
const [data, setData] = useState<MediaMtxPathsListResponse | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
let isMounted = true;
|
||||
let t: number | undefined;
|
||||
|
||||
const tick = async () => {
|
||||
try {
|
||||
const res = await apiJson<MediaMtxPathsListResponse>("/paths", { method: "GET" });
|
||||
if (isMounted) setData(res);
|
||||
} catch {
|
||||
if (isMounted) setData(null);
|
||||
} finally {
|
||||
t = window.setTimeout(tick, pollMs);
|
||||
}
|
||||
};
|
||||
|
||||
tick();
|
||||
return () => {
|
||||
isMounted = false;
|
||||
if (t) window.clearTimeout(t);
|
||||
};
|
||||
}, [pollMs]);
|
||||
|
||||
const readyByName = useMemo(() => {
|
||||
const map = new Map<string, boolean>();
|
||||
for (const it of data?.items ?? []) {
|
||||
map.set(it.name, Boolean(it.ready));
|
||||
}
|
||||
return map;
|
||||
}, [data]);
|
||||
|
||||
return { raw: data, readyByName };
|
||||
}
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
type Theme = 'light' | 'dark';
|
||||
|
||||
export function useTheme() {
|
||||
const [theme, setTheme] = useState<Theme>(() => {
|
||||
const savedTheme = localStorage.getItem('theme') as Theme;
|
||||
if (savedTheme) {
|
||||
return savedTheme;
|
||||
}
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
document.documentElement.classList.remove('light', 'dark');
|
||||
document.documentElement.classList.add(theme);
|
||||
localStorage.setItem('theme', theme);
|
||||
}, [theme]);
|
||||
|
||||
const toggleTheme = () => {
|
||||
setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
|
||||
};
|
||||
|
||||
return {
|
||||
theme,
|
||||
toggleTheme,
|
||||
isDark: theme === 'dark'
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,177 @@
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
|
||||
type PlayerStatus = "idle" | "connecting" | "playing" | "error";
|
||||
|
||||
function withNoTrailingSlash(url: string) {
|
||||
return url.endsWith("/") ? url.slice(0, -1) : url;
|
||||
}
|
||||
|
||||
async function waitForIceGatheringComplete(pc: RTCPeerConnection) {
|
||||
if (pc.iceGatheringState === "complete") return;
|
||||
await new Promise<void>((resolve) => {
|
||||
const onState = () => {
|
||||
if (pc.iceGatheringState === "complete") {
|
||||
pc.removeEventListener("icegatheringstatechange", onState);
|
||||
resolve();
|
||||
}
|
||||
};
|
||||
pc.addEventListener("icegatheringstatechange", onState);
|
||||
});
|
||||
}
|
||||
|
||||
export function useWhepPlayer({
|
||||
enabled,
|
||||
webrtcBaseUrl,
|
||||
streamName,
|
||||
}: {
|
||||
enabled: boolean;
|
||||
webrtcBaseUrl: string;
|
||||
streamName: string;
|
||||
}) {
|
||||
const videoRef = useRef<HTMLVideoElement | null>(null);
|
||||
const pcRef = useRef<RTCPeerConnection | null>(null);
|
||||
const sessionUrlRef = useRef<string | null>(null);
|
||||
const abortRef = useRef<AbortController | null>(null);
|
||||
const [status, setStatus] = useState<PlayerStatus>("idle");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [restartNonce, setRestartNonce] = useState(0);
|
||||
|
||||
const whepUrl = useMemo(() => {
|
||||
return `${withNoTrailingSlash(webrtcBaseUrl)}/${encodeURIComponent(streamName)}/whep`;
|
||||
}, [webrtcBaseUrl, streamName]);
|
||||
|
||||
const stop = useCallback(async () => {
|
||||
abortRef.current?.abort();
|
||||
abortRef.current = null;
|
||||
|
||||
const sessionUrl = sessionUrlRef.current;
|
||||
sessionUrlRef.current = null;
|
||||
|
||||
const pc = pcRef.current;
|
||||
pcRef.current = null;
|
||||
|
||||
if (pc) {
|
||||
try {
|
||||
pc.ontrack = null;
|
||||
pc.onconnectionstatechange = null;
|
||||
pc.oniceconnectionstatechange = null;
|
||||
pc.close();
|
||||
} catch {
|
||||
}
|
||||
}
|
||||
|
||||
const v = videoRef.current;
|
||||
if (v) {
|
||||
try {
|
||||
v.srcObject = null;
|
||||
v.removeAttribute("src");
|
||||
} catch {
|
||||
}
|
||||
}
|
||||
|
||||
if (sessionUrl) {
|
||||
try {
|
||||
await fetch(sessionUrl, { method: "DELETE" });
|
||||
} catch {
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
const restart = useCallback(() => {
|
||||
setRestartNonce((n) => n + 1);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
let disposed = false;
|
||||
|
||||
const run = async () => {
|
||||
await stop();
|
||||
if (!enabled) {
|
||||
setStatus("idle");
|
||||
setError(null);
|
||||
return;
|
||||
}
|
||||
|
||||
setStatus("connecting");
|
||||
setError(null);
|
||||
|
||||
const abort = new AbortController();
|
||||
abortRef.current = abort;
|
||||
|
||||
try {
|
||||
const videoEl = videoRef.current;
|
||||
if (!videoEl) throw new Error("no_video");
|
||||
|
||||
const pc = new RTCPeerConnection();
|
||||
pcRef.current = pc;
|
||||
|
||||
pc.addTransceiver("video", { direction: "recvonly" });
|
||||
pc.addTransceiver("audio", { direction: "recvonly" });
|
||||
|
||||
pc.ontrack = (ev) => {
|
||||
const stream = ev.streams?.[0];
|
||||
if (!stream) return;
|
||||
if (videoEl.srcObject !== stream) {
|
||||
videoEl.srcObject = stream;
|
||||
void videoEl.play().catch(() => undefined);
|
||||
}
|
||||
};
|
||||
|
||||
pc.onconnectionstatechange = () => {
|
||||
if (pc.connectionState === "failed") {
|
||||
restart();
|
||||
}
|
||||
};
|
||||
|
||||
const offer = await pc.createOffer();
|
||||
await pc.setLocalDescription(offer);
|
||||
await waitForIceGatheringComplete(pc);
|
||||
|
||||
const sdpOffer = pc.localDescription?.sdp;
|
||||
if (!sdpOffer) throw new Error("no_offer");
|
||||
|
||||
const res = await fetch(whepUrl, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/sdp",
|
||||
Accept: "application/sdp",
|
||||
},
|
||||
body: sdpOffer,
|
||||
signal: abort.signal,
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const t = await res.text().catch(() => "");
|
||||
throw new Error(`whep_http_${res.status}${t ? `: ${t}` : ""}`);
|
||||
}
|
||||
|
||||
const answerSdp = await res.text();
|
||||
const location = res.headers.get("location") || res.headers.get("Location");
|
||||
if (location) sessionUrlRef.current = location;
|
||||
|
||||
await pc.setRemoteDescription({ type: "answer", sdp: answerSdp });
|
||||
if (!disposed) setStatus("playing");
|
||||
} catch (e) {
|
||||
if (!disposed) {
|
||||
setStatus("error");
|
||||
setError(e instanceof Error ? e.message : "unknown_error");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
run();
|
||||
return () => {
|
||||
disposed = true;
|
||||
void stop();
|
||||
};
|
||||
}, [enabled, restartNonce, stop, whepUrl, restart]);
|
||||
|
||||
return {
|
||||
videoRef,
|
||||
status,
|
||||
error,
|
||||
restart,
|
||||
stop,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
import { clsx, type ClassValue } from "clsx"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs))
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import App from './App'
|
||||
import './index.css'
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
)
|
||||
@@ -0,0 +1,5 @@
|
||||
import { Navigate } from "react-router-dom";
|
||||
|
||||
export default function Home() {
|
||||
return <Navigate to="/live" replace />;
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import CameraTile from "@/components/CameraTile";
|
||||
import { usePathsStatus } from "@/hooks/usePathsStatus";
|
||||
import { useConfigStore } from "@/stores/configStore";
|
||||
import { getMediamtxWebrtcBaseUrl } from "@/utils/api";
|
||||
|
||||
type Grid = 1 | 4 | 9;
|
||||
|
||||
export default function Live() {
|
||||
const { config, isLoading, error, load } = useConfigStore();
|
||||
const { readyByName } = usePathsStatus(5000);
|
||||
const [grid, setGrid] = useState<Grid>(4);
|
||||
|
||||
useEffect(() => {
|
||||
if (!config) void load();
|
||||
}, [config, load]);
|
||||
|
||||
const cams = useMemo(() => {
|
||||
const list = config?.cameras ?? [];
|
||||
return list.slice(0, grid);
|
||||
}, [config, grid]);
|
||||
|
||||
const webrtcBaseUrl = useMemo(() => {
|
||||
return getMediamtxWebrtcBaseUrl(config?.mediamtx_webrtc_url);
|
||||
}, [config?.mediamtx_webrtc_url]);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
|
||||
<div>
|
||||
<div className="text-sm font-semibold">Live View</div>
|
||||
<div className="text-xs text-zinc-400">WebRTC grid (auto reconnect + lazy load)</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="text-xs text-zinc-400">Grid</label>
|
||||
<select
|
||||
value={grid}
|
||||
onChange={(e) => setGrid(Number(e.target.value) as Grid)}
|
||||
className="h-9 rounded-md border border-zinc-800 bg-zinc-950 px-3 text-sm text-zinc-100"
|
||||
>
|
||||
<option value={1}>1</option>
|
||||
<option value={4}>4</option>
|
||||
<option value={9}>9</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error ? (
|
||||
<div className="rounded-lg border border-rose-900/60 bg-rose-950/30 px-4 py-3 text-sm text-rose-200">
|
||||
{error}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{isLoading && !config ? (
|
||||
<div className="rounded-lg border border-zinc-800 bg-zinc-900/30 px-4 py-3 text-sm text-zinc-300">
|
||||
Đang tải cấu hình...
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{config && config.cameras.length === 0 ? (
|
||||
<div className="rounded-lg border border-zinc-800 bg-zinc-900/30 px-4 py-3 text-sm text-zinc-300">
|
||||
Chưa có camera. Thêm camera trong Settings.
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div
|
||||
className={[
|
||||
"grid gap-3",
|
||||
grid === 1 ? "grid-cols-1" : "grid-cols-1 md:grid-cols-2",
|
||||
grid === 9 ? "lg:grid-cols-3" : "",
|
||||
].join(" ")}
|
||||
>
|
||||
{cams.map((c) => (
|
||||
<CameraTile
|
||||
key={c.name}
|
||||
name={c.name}
|
||||
webrtcBaseUrl={webrtcBaseUrl}
|
||||
isOnline={readyByName.get(c.name) ?? false}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,198 @@
|
||||
import { Download, Play } from "lucide-react";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useConfigStore } from "@/stores/configStore";
|
||||
import { apiJson } from "@/utils/api";
|
||||
import type { RecordingItem } from "@/types/api";
|
||||
|
||||
function toLocalDateInputValue(d: Date) {
|
||||
const yyyy = d.getFullYear();
|
||||
const mm = String(d.getMonth() + 1).padStart(2, "0");
|
||||
const dd = String(d.getDate()).padStart(2, "0");
|
||||
return `${yyyy}-${mm}-${dd}`;
|
||||
}
|
||||
|
||||
export default function Playback() {
|
||||
const { config, isLoading, error, load } = useConfigStore();
|
||||
const [camera, setCamera] = useState<string>("");
|
||||
const [date, setDate] = useState<string>(() => toLocalDateInputValue(new Date()));
|
||||
const [items, setItems] = useState<RecordingItem[]>([]);
|
||||
const [selected, setSelected] = useState<RecordingItem | null>(null);
|
||||
const [listError, setListError] = useState<string | null>(null);
|
||||
const [listLoading, setListLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!config) void load();
|
||||
}, [config, load]);
|
||||
|
||||
useEffect(() => {
|
||||
const first = config?.cameras?.[0]?.name;
|
||||
if (first && !camera) setCamera(first);
|
||||
}, [config?.cameras, camera]);
|
||||
|
||||
const canQuery = useMemo(() => Boolean(camera), [camera]);
|
||||
|
||||
useEffect(() => {
|
||||
let alive = true;
|
||||
const run = async () => {
|
||||
if (!canQuery) return;
|
||||
setListLoading(true);
|
||||
setListError(null);
|
||||
try {
|
||||
const q = new URLSearchParams();
|
||||
q.set("camera", camera);
|
||||
if (date) q.set("date", date);
|
||||
const res = await apiJson<RecordingItem[]>(`/recordings?${q.toString()}`, {
|
||||
method: "GET",
|
||||
});
|
||||
if (!alive) return;
|
||||
setItems(res);
|
||||
setSelected((prev) => {
|
||||
if (prev && res.some((x) => x.filename === prev.filename)) return prev;
|
||||
return res[0] ?? null;
|
||||
});
|
||||
} catch (e) {
|
||||
if (!alive) return;
|
||||
setItems([]);
|
||||
setSelected(null);
|
||||
if (typeof e === "object" && e && "status" in e) {
|
||||
setListError(`http_${(e as { status: number }).status}`);
|
||||
} else {
|
||||
setListError("failed_to_load_recordings");
|
||||
}
|
||||
} finally {
|
||||
if (alive) setListLoading(false);
|
||||
}
|
||||
};
|
||||
void run();
|
||||
return () => {
|
||||
alive = false;
|
||||
};
|
||||
}, [camera, date, canQuery]);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<div className="text-sm font-semibold">Playback</div>
|
||||
<div className="text-xs text-zinc-400">Chọn camera + ngày, phát file fMP4</div>
|
||||
</div>
|
||||
|
||||
{error ? (
|
||||
<div className="rounded-lg border border-rose-900/60 bg-rose-950/30 px-4 py-3 text-sm text-rose-200">
|
||||
{error}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="grid gap-3 lg:grid-cols-[320px_1fr]">
|
||||
<div className="rounded-lg border border-zinc-800 bg-zinc-900/20 p-3">
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<label className="text-xs text-zinc-400">Camera</label>
|
||||
<select
|
||||
value={camera}
|
||||
onChange={(e) => setCamera(e.target.value)}
|
||||
disabled={isLoading && !config}
|
||||
className="mt-1 h-9 w-full rounded-md border border-zinc-800 bg-zinc-950 px-3 text-sm text-zinc-100"
|
||||
>
|
||||
{(config?.cameras ?? []).map((c) => (
|
||||
<option key={c.name} value={c.name}>
|
||||
{c.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="text-xs text-zinc-400">Date</label>
|
||||
<input
|
||||
type="date"
|
||||
value={date}
|
||||
onChange={(e) => setDate(e.target.value)}
|
||||
className="mt-1 h-9 w-full rounded-md border border-zinc-800 bg-zinc-950 px-3 text-sm text-zinc-100"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 border-t border-zinc-800 pt-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="text-xs font-medium text-zinc-200">Files</div>
|
||||
<div className="text-xs text-zinc-400">
|
||||
{listLoading ? "loading" : `${items.length}`}
|
||||
</div>
|
||||
</div>
|
||||
{listError ? (
|
||||
<div className="mt-2 text-xs text-rose-300">{listError}</div>
|
||||
) : null}
|
||||
|
||||
<div className="mt-2 max-h-[420px] space-y-1 overflow-auto pr-1">
|
||||
{items.map((it) => {
|
||||
const dt = new Date(it.timestamp);
|
||||
const t = dt.toLocaleTimeString();
|
||||
const active = selected?.filename === it.filename;
|
||||
return (
|
||||
<div
|
||||
key={it.filename}
|
||||
className={[
|
||||
"flex items-center justify-between gap-2 rounded-md border px-2 py-2",
|
||||
active
|
||||
? "border-zinc-700 bg-zinc-950/40"
|
||||
: "border-zinc-800 bg-zinc-950/10 hover:bg-zinc-950/30",
|
||||
].join(" ")}
|
||||
>
|
||||
<div className="min-w-0">
|
||||
<div className="truncate text-xs text-zinc-100">{t}</div>
|
||||
<div className="truncate text-[11px] text-zinc-500">{it.filename}</div>
|
||||
</div>
|
||||
|
||||
<div className="flex shrink-0 items-center gap-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSelected(it)}
|
||||
className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-zinc-700 bg-zinc-950/40 text-zinc-200 transition hover:bg-zinc-900"
|
||||
title="Play"
|
||||
>
|
||||
<Play className="h-4 w-4" />
|
||||
</button>
|
||||
<a
|
||||
href={it.url}
|
||||
download
|
||||
className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-zinc-700 bg-zinc-950/40 text-zinc-200 transition hover:bg-zinc-900"
|
||||
title="Download"
|
||||
>
|
||||
<Download className="h-4 w-4" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{!listLoading && items.length === 0 ? (
|
||||
<div className="rounded-md border border-zinc-800 bg-zinc-950/10 px-3 py-2 text-xs text-zinc-400">
|
||||
Không có file.
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border border-zinc-800 bg-zinc-900/20 p-3">
|
||||
<div className="text-xs font-medium text-zinc-200">Player</div>
|
||||
<div className="mt-2 aspect-video w-full overflow-hidden rounded-md border border-zinc-800 bg-black">
|
||||
{selected ? (
|
||||
<video
|
||||
key={selected.filename}
|
||||
className="h-full w-full"
|
||||
controls
|
||||
playsInline
|
||||
src={selected.url}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-full w-full items-center justify-center text-sm text-zinc-400">
|
||||
Chọn 1 file để phát
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,204 @@
|
||||
import { Plus, Trash2 } from "lucide-react";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import type { FormEvent } from "react";
|
||||
import { useConfigStore } from "@/stores/configStore";
|
||||
|
||||
export default function Settings() {
|
||||
const {
|
||||
config,
|
||||
isLoading,
|
||||
error,
|
||||
load,
|
||||
addCamera,
|
||||
deleteCamera,
|
||||
setSchedulerEnabled,
|
||||
updateSchedule,
|
||||
} = useConfigStore();
|
||||
|
||||
const [name, setName] = useState("");
|
||||
const [rtspUrl, setRtspUrl] = useState("");
|
||||
const schedule = config?.schedule;
|
||||
const [weekdaysFrom, setWeekdaysFrom] = useState("18:00");
|
||||
const [weekdaysTo, setWeekdaysTo] = useState("08:00");
|
||||
const [weekendAllDay, setWeekendAllDay] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
if (!config) void load();
|
||||
}, [config, load]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!schedule) return;
|
||||
setWeekdaysFrom(schedule.weekdays_from);
|
||||
setWeekdaysTo(schedule.weekdays_to);
|
||||
setWeekendAllDay(schedule.weekend_all_day);
|
||||
}, [schedule]);
|
||||
|
||||
const canAdd = useMemo(
|
||||
() => name.trim().length > 0 && rtspUrl.trim().length > 0,
|
||||
[name, rtspUrl]
|
||||
);
|
||||
|
||||
const onAdd = async (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!canAdd) return;
|
||||
await addCamera({ name: name.trim(), rtsp_url: rtspUrl.trim() });
|
||||
setName("");
|
||||
setRtspUrl("");
|
||||
};
|
||||
|
||||
const onSaveSchedule = async () => {
|
||||
await updateSchedule({
|
||||
weekdays_from: weekdaysFrom,
|
||||
weekdays_to: weekdaysTo,
|
||||
weekend_all_day: weekendAllDay,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<div className="text-sm font-semibold">Settings</div>
|
||||
<div className="text-xs text-zinc-400">Camera management + recording schedule</div>
|
||||
</div>
|
||||
|
||||
{error ? (
|
||||
<div className="rounded-lg border border-rose-900/60 bg-rose-950/30 px-4 py-3 text-sm text-rose-200">
|
||||
{error}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="grid gap-3 lg:grid-cols-2">
|
||||
<div className="rounded-lg border border-zinc-800 bg-zinc-900/20 p-4">
|
||||
<div className="text-xs font-semibold text-zinc-200">Cameras</div>
|
||||
<div className="mt-1 text-xs text-zinc-400">
|
||||
Đồng bộ paths lên MediaMTX thông qua Control API
|
||||
</div>
|
||||
|
||||
<div className="mt-3 space-y-2">
|
||||
{(config?.cameras ?? []).map((c) => (
|
||||
<div
|
||||
key={c.name}
|
||||
className="flex items-center justify-between gap-3 rounded-md border border-zinc-800 bg-zinc-950/10 px-3 py-2"
|
||||
>
|
||||
<div className="min-w-0">
|
||||
<div className="truncate text-sm text-zinc-100">{c.name}</div>
|
||||
<div className="truncate text-xs text-zinc-500">{c.rtsp_url}</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void deleteCamera(c.name)}
|
||||
className="inline-flex h-9 w-9 items-center justify-center rounded-md border border-zinc-700 bg-zinc-950/40 text-zinc-200 transition hover:bg-zinc-900"
|
||||
title="Remove"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
{(config?.cameras ?? []).length === 0 ? (
|
||||
<div className="rounded-md border border-zinc-800 bg-zinc-950/10 px-3 py-2 text-xs text-zinc-400">
|
||||
Chưa có camera.
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<form onSubmit={(e) => void onAdd(e)} className="mt-4 space-y-2">
|
||||
<div className="grid gap-2 md:grid-cols-2">
|
||||
<div>
|
||||
<label className="text-xs text-zinc-400">Name</label>
|
||||
<input
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="cam1"
|
||||
className="mt-1 h-9 w-full rounded-md border border-zinc-800 bg-zinc-950 px-3 text-sm text-zinc-100"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-zinc-400">RTSP URL</label>
|
||||
<input
|
||||
value={rtspUrl}
|
||||
onChange={(e) => setRtspUrl(e.target.value)}
|
||||
placeholder="rtsp://user:pass@ip:554/stream"
|
||||
className="mt-1 h-9 w-full rounded-md border border-zinc-800 bg-zinc-950 px-3 text-sm text-zinc-100"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!canAdd || isLoading}
|
||||
className="inline-flex items-center gap-2 rounded-md border border-zinc-700 bg-zinc-950/40 px-3 py-2 text-sm text-zinc-200 transition hover:bg-zinc-900 disabled:cursor-not-allowed disabled:opacity-60"
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
Add Camera
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border border-zinc-800 bg-zinc-900/20 p-4">
|
||||
<div className="text-xs font-semibold text-zinc-200">Recording Schedule</div>
|
||||
<div className="mt-1 text-xs text-zinc-400">Backend sẽ bật/tắt record mỗi 60 giây</div>
|
||||
|
||||
<div className="mt-4 space-y-3">
|
||||
<label className="flex items-center gap-2 text-sm text-zinc-200">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={Boolean(schedule?.enabled)}
|
||||
onChange={(e) => void setSchedulerEnabled(e.target.checked)}
|
||||
className="h-4 w-4 rounded border-zinc-700 bg-zinc-950"
|
||||
/>
|
||||
Enable scheduler
|
||||
</label>
|
||||
|
||||
<div className="grid gap-2 md:grid-cols-2">
|
||||
<div>
|
||||
<label className="text-xs text-zinc-400">Weekdays from</label>
|
||||
<input
|
||||
type="time"
|
||||
value={weekdaysFrom}
|
||||
onChange={(e) => setWeekdaysFrom(e.target.value)}
|
||||
className="mt-1 h-9 w-full rounded-md border border-zinc-800 bg-zinc-950 px-3 text-sm text-zinc-100"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-xs text-zinc-400">Weekdays to</label>
|
||||
<input
|
||||
type="time"
|
||||
value={weekdaysTo}
|
||||
onChange={(e) => setWeekdaysTo(e.target.value)}
|
||||
className="mt-1 h-9 w-full rounded-md border border-zinc-800 bg-zinc-950 px-3 text-sm text-zinc-100"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label className="flex items-center gap-2 text-sm text-zinc-200">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={weekendAllDay}
|
||||
onChange={(e) => setWeekendAllDay(e.target.checked)}
|
||||
className="h-4 w-4 rounded border-zinc-700 bg-zinc-950"
|
||||
/>
|
||||
Weekend: record all day
|
||||
</label>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void onSaveSchedule()}
|
||||
disabled={isLoading}
|
||||
className="inline-flex items-center gap-2 rounded-md border border-zinc-700 bg-zinc-950/40 px-3 py-2 text-sm text-zinc-200 transition hover:bg-zinc-900 disabled:cursor-not-allowed disabled:opacity-60"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
|
||||
<div className="rounded-md border border-zinc-800 bg-zinc-950/10 px-3 py-2 text-xs text-zinc-400">
|
||||
MediaMTX API: <span className="text-zinc-200">{config?.mediamtx_api_url ?? "-"}</span>
|
||||
<br />
|
||||
WebRTC: <span className="text-zinc-200">{config?.mediamtx_webrtc_url ?? "-"}</span>
|
||||
<br />
|
||||
Recordings dir: <span className="text-zinc-200">{config?.recordings_dir ?? "-"}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,89 @@
|
||||
import { create } from "zustand";
|
||||
import { apiJson } from "@/utils/api";
|
||||
import type { AppConfig, Camera, Schedule } from "@/types/api";
|
||||
|
||||
type ConfigState = {
|
||||
config: AppConfig | null;
|
||||
isLoading: boolean;
|
||||
error: string | null;
|
||||
load: () => Promise<void>;
|
||||
addCamera: (camera: Camera) => Promise<void>;
|
||||
deleteCamera: (name: string) => Promise<void>;
|
||||
setSchedulerEnabled: (enabled: boolean) => Promise<void>;
|
||||
updateSchedule: (schedule: Omit<Schedule, "enabled">) => Promise<void>;
|
||||
};
|
||||
|
||||
function errToMessage(err: unknown) {
|
||||
if (!err) return "unknown_error";
|
||||
if (typeof err === "string") return err;
|
||||
if (typeof err === "object" && err && "status" in err) {
|
||||
const e = err as { status: number; bodyText?: string };
|
||||
return `http_${e.status}${e.bodyText ? `: ${e.bodyText}` : ""}`;
|
||||
}
|
||||
return "unknown_error";
|
||||
}
|
||||
|
||||
export const useConfigStore = create<ConfigState>((set, get) => ({
|
||||
config: null,
|
||||
isLoading: false,
|
||||
error: null,
|
||||
load: async () => {
|
||||
set({ isLoading: true, error: null });
|
||||
try {
|
||||
const cfg = await apiJson<AppConfig>("/config", { method: "GET" });
|
||||
set({ config: cfg, isLoading: false });
|
||||
} catch (e) {
|
||||
set({ isLoading: false, error: errToMessage(e) });
|
||||
}
|
||||
},
|
||||
addCamera: async (camera) => {
|
||||
set({ isLoading: true, error: null });
|
||||
try {
|
||||
const cfg = await apiJson<AppConfig>("/cameras", {
|
||||
method: "POST",
|
||||
body: JSON.stringify(camera),
|
||||
});
|
||||
set({ config: cfg, isLoading: false });
|
||||
} catch (e) {
|
||||
set({ isLoading: false, error: errToMessage(e) });
|
||||
}
|
||||
},
|
||||
deleteCamera: async (name) => {
|
||||
set({ isLoading: true, error: null });
|
||||
try {
|
||||
const cfg = await apiJson<AppConfig>(`/cameras/${encodeURIComponent(name)}`, {
|
||||
method: "DELETE",
|
||||
});
|
||||
set({ config: cfg, isLoading: false });
|
||||
} catch (e) {
|
||||
set({ isLoading: false, error: errToMessage(e) });
|
||||
}
|
||||
},
|
||||
setSchedulerEnabled: async (enabled) => {
|
||||
set({ isLoading: true, error: null });
|
||||
try {
|
||||
const cfg = await apiJson<AppConfig>("/scheduler/enabled", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ enabled }),
|
||||
});
|
||||
set({ config: cfg, isLoading: false });
|
||||
} catch (e) {
|
||||
set({ isLoading: false, error: errToMessage(e) });
|
||||
}
|
||||
},
|
||||
updateSchedule: async (schedule) => {
|
||||
const cfg = get().config;
|
||||
const enabled = cfg?.schedule.enabled ?? true;
|
||||
set({ isLoading: true, error: null });
|
||||
try {
|
||||
const next = await apiJson<AppConfig>("/scheduler/schedule", {
|
||||
method: "POST",
|
||||
body: JSON.stringify(schedule),
|
||||
});
|
||||
set({ config: { ...next, schedule: { ...next.schedule, enabled } }, isLoading: false });
|
||||
} catch (e) {
|
||||
set({ isLoading: false, error: errToMessage(e) });
|
||||
}
|
||||
},
|
||||
}));
|
||||
|
||||
@@ -0,0 +1,2 @@
|
||||
import "@testing-library/jest-dom";
|
||||
|
||||
@@ -0,0 +1,38 @@
|
||||
export type Camera = {
|
||||
name: string;
|
||||
rtsp_url: string;
|
||||
};
|
||||
|
||||
export type Schedule = {
|
||||
enabled: boolean;
|
||||
weekdays_from: string;
|
||||
weekdays_to: string;
|
||||
weekend_all_day: boolean;
|
||||
};
|
||||
|
||||
export type AppConfig = {
|
||||
mediamtx_api_url: string;
|
||||
mediamtx_webrtc_url: string;
|
||||
recordings_dir: string;
|
||||
cameras: Camera[];
|
||||
schedule: Schedule;
|
||||
};
|
||||
|
||||
export type RecordingItem = {
|
||||
camera: string;
|
||||
filename: string;
|
||||
timestamp: string;
|
||||
url: string;
|
||||
};
|
||||
|
||||
export type MediaMtxPathsListItem = {
|
||||
name: string;
|
||||
ready?: boolean;
|
||||
};
|
||||
|
||||
export type MediaMtxPathsListResponse = {
|
||||
items?: MediaMtxPathsListItem[];
|
||||
itemCount?: number;
|
||||
pageCount?: number;
|
||||
};
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
type ApiError = {
|
||||
status: number;
|
||||
bodyText: string;
|
||||
};
|
||||
|
||||
function buildUrl(path: string) {
|
||||
const base = (import.meta.env.VITE_API_BASE_URL as string | undefined) ?? "/api";
|
||||
if (path.startsWith("http://") || path.startsWith("https://")) return path;
|
||||
if (path.startsWith("/")) return `${base}${path}`;
|
||||
return `${base}/${path}`;
|
||||
}
|
||||
|
||||
export async function apiJson<T>(path: string, init?: RequestInit): Promise<T> {
|
||||
const url = buildUrl(path);
|
||||
const res = await fetch(url, {
|
||||
...init,
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
...(init?.headers ?? {}),
|
||||
},
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const bodyText = await res.text().catch(() => "");
|
||||
const err: ApiError = { status: res.status, bodyText };
|
||||
throw err;
|
||||
}
|
||||
|
||||
return (await res.json()) as T;
|
||||
}
|
||||
|
||||
export function getMediamtxWebrtcBaseUrl(configUrl?: string) {
|
||||
const env = import.meta.env.VITE_MEDIAMTX_WEBRTC_URL as string | undefined;
|
||||
return env ?? configUrl ?? "http://localhost:8889";
|
||||
}
|
||||
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
Reference in New Issue
Block a user