fix wheplayer

src/components/AppShell.tsx

@@ -1,9 +1,12 @@
 import { ReactNode } from "react";
 import TopNav from "@/components/TopNav";
+import { useTheme } from "@/hooks/useTheme";
 
 export default function AppShell({ children }: { children: ReactNode }) {
+  const { isDark } = useTheme();
+
   return (
-    <div className="min-h-dvh bg-zinc-950 text-zinc-50">
+    <div className={["min-h-dvh", isDark ? "bg-zinc-950 text-zinc-50" : "bg-zinc-100 text-zinc-900"].join(" ")}>
       <TopNav />
       <main className="mx-auto w-full max-w-7xl px-4 py-4 md:px-6 md:py-6">
         {children}

src/components/TopNav.tsx

@@ -1,15 +1,18 @@
 import { NavLink } from "react-router-dom";
-import { Film, Settings2, Video } from "lucide-react";
+import { Film, Moon, Settings2, Sun, Video } from "lucide-react";
 import type { ReactNode } from "react";
+import { useTheme } from "@/hooks/useTheme";
 
 function NavItem({
   to,
   label,
   icon,
+  isDark,
 }: {
   to: string;
   label: string;
   icon: ReactNode;
+  isDark: boolean;
 }) {
   return (
     <NavLink
@@ -18,8 +21,8 @@ function NavItem({
         [
           "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",
+            ? (isDark ? "bg-zinc-800 text-zinc-50" : "bg-zinc-200 text-zinc-900")
+            : (isDark ? "text-zinc-300 hover:bg-zinc-900 hover:text-zinc-50" : "text-zinc-700 hover:bg-zinc-100"),
         ].join(" ")
       }
     >
@@ -30,23 +33,51 @@ function NavItem({
 }
 
 export default function TopNav() {
+  const { isDark, toggleTheme } = useTheme();
+
   return (
-    <header className="border-b border-zinc-800 bg-zinc-950/70 backdrop-blur">
+    <header
+      className={[
+        "border-b backdrop-blur",
+        isDark ? "border-zinc-800 bg-zinc-950/70" : "border-zinc-300 bg-white/90",
+      ].join(" ")}
+    >
       <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">
+          <div
+            className={[
+              "flex h-9 w-9 items-center justify-center rounded-lg ring-1",
+              isDark ? "bg-zinc-900 ring-zinc-800" : "bg-zinc-100 ring-zinc-300",
+            ].join(" ")}
+          >
             <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 className={["text-xs", isDark ? "text-zinc-400" : "text-zinc-500"].join(" ")}>
+              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" />} />
+          <NavItem to="/live" label="Live" icon={<Video className="h-4 w-4" />} isDark={isDark} />
+          <NavItem to="/playback" label="Playback" icon={<Film className="h-4 w-4" />} isDark={isDark} />
+          <NavItem to="/settings" label="Settings" icon={<Settings2 className="h-4 w-4" />} isDark={isDark} />
+          <button
+            type="button"
+            onClick={toggleTheme}
+            className={[
+              "ml-1 inline-flex h-9 items-center gap-2 rounded-md border px-3 text-sm font-medium transition",
+              isDark
+                ? "border-zinc-700 bg-zinc-900/70 text-zinc-100 hover:bg-zinc-800"
+                : "border-zinc-300 bg-white text-zinc-900 hover:bg-zinc-100",
+            ].join(" ")}
+            title={isDark ? "Chuyen sang light mode" : "Chuyen sang dark mode"}
+          >
+            {isDark ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+            {isDark ? "Light" : "Dark"}
+          </button>
         </nav>
       </div>
     </header>

src/hooks/useWhepPlayer.ts

@@ -145,6 +145,11 @@ export function useWhepPlayer({
 
         if (!res.ok) {
           const t = await res.text().catch(() => "");
+          if (res.status === 405) {
+            throw new Error(
+              "whep_http_405: endpoint WebRTC khong cho phep POST. Kiem tra mediamtx_webrtc_url (host/port) va nginx proxy."
+            );
+          }
           throw new Error(`whep_http_${res.status}${t ? `: ${t}` : ""}`);
         }
 

src/utils/api.ts

@@ -29,8 +29,21 @@ export async function apiJson<T>(path: string, init?: RequestInit): Promise<T> {
   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";
+function normalizeLoopbackHost(rawUrl: string): string {
+  try {
+    const url = new URL(rawUrl, window.location.origin);
+    const loopbacks = new Set(["127.0.0.1", "localhost", "::1"]);
+    if (loopbacks.has(url.hostname) && !loopbacks.has(window.location.hostname)) {
+      url.hostname = window.location.hostname;
+    }
+    return url.toString().replace(/\/+$/, "");
+  } catch {
+    return rawUrl.replace(/\/+$/, "");
+  }
+}
+
+export function getMediamtxWebrtcBaseUrl(configUrl?: string) {
+  const env = import.meta.env.VITE_MEDIAMTX_WEBRTC_URL as string | undefined;
+  return normalizeLoopbackHost(env ?? configUrl ?? "http://localhost:8889");
 }