@@ -90,6 +66,7 @@ function Snapshot({
poppedOut,
intervalMs,
aspect,
+ status,
}: {
cam: CameraSummary;
frame?: Blob;
@@ -97,6 +74,7 @@ function Snapshot({
poppedOut: boolean;
intervalMs: number;
aspect?: number;
+ status: CameraStatus;
}) {
return (
@@ -108,6 +86,7 @@ function Snapshot({
/>
)}
+
{poppedOut ? (
@@ -148,116 +127,13 @@ function PopoutLink({ cam, intervalMs, aspect }: { cam: CameraSummary; intervalM
}}
aria-label={`Pop out ${name}`}
title={`Pop out ${name}`}
- className="absolute right-2 top-2 rounded bg-black/50 p-1.5 text-white opacity-80 hover:opacity-100 focus-visible:opacity-100"
+ className="absolute right-1 top-1 rounded bg-black/50 p-1 text-white opacity-80 hover:opacity-100 focus-visible:opacity-100"
>
-
+
);
}
-function CredentialsForm({
- cam,
- reason,
- onSaved,
- onCancel,
-}: {
- cam: CameraSummary;
- reason?: string;
- /** Called after a save or clear; the camera's queries have already been reset. */
- onSaved: () => void;
- onCancel?: () => void;
-}) {
- const status = useCredentialStatus(cam.id);
- const save = useSaveCredentials(cam.id);
- const clear = useClearCredentials(cam.id);
- // null until the user types, so the saved username (never the password) can prefill it.
- const [typedUsername, setTypedUsername] = useState
(null);
- const [password, setPassword] = useState("");
- const username = typedUsername ?? status.data?.username ?? DEFAULT_USERNAME;
-
- function submit(e: React.FormEvent) {
- e.preventDefault();
- save.mutate(
- { username, password },
- {
- onSuccess: () => {
- setPassword("");
- onSaved();
- },
- },
- );
- }
-
- const error = save.error ?? clear.error;
- const busy = save.isPending || clear.isPending;
-
- return (
-
- );
-}
-
export default function CameraCard({
cam,
intervalMs,
@@ -277,9 +153,6 @@ export default function CameraCard({
setEditingLogin(false);
resetCamera();
}
-
- const device = info.data ? deviceLine(info.data) : null;
- const summary = info.data ? streamSummary(info.data.profiles) : null;
const main = info.data?.profiles[0];
const aspect = main?.width && main.height ? main.width / main.height : undefined;
@@ -295,62 +168,15 @@ export default function CameraCard({
poppedOut={poppedOut}
intervalMs={intervalMs}
aspect={aspect}
+ status={cameraStatus({ problem: problem?.kind ?? null, hasFrame: snapshot.data !== undefined })}
/>
- {/* Everything below is detail: useful when asked for, noise on a wall of cameras. */}
-
-
-
- {cam.host}:{cam.port}
-
- {summary &&
{summary} }
- {cam.location &&
{cam.location} }
-
- Web page
- {!showLogin && !showSetup && (
- setEditingLogin(true)}
- className="inline-flex items-center gap-1 underline"
- >
-
- )}
-
- {info.data && info.data.profiles.length > 0 && (
-
-
-
- Profile
- Codec
- Resolution
- FPS
-
-
-
- {info.data.profiles.map((p) => (
-
- {p.name ?? p.token}
- {p.encoding ?? "?"}
- {p.width && p.height ? `${p.width}×${p.height}` : "?"}
- {p.fps ?? "?"}
-
- ))}
-
-
- )}
-
-
{showSetup &&
+ {children}
+
+ );
+}
+
+export function CredentialsForm({
+ cam,
+ reason,
+ onSaved,
+ onCancel,
+}: {
+ cam: CameraSummary;
+ reason?: string;
+ /** Called after a save or clear; the camera's queries have already been reset. */
+ onSaved: () => void;
+ onCancel?: () => void;
+}) {
+ const status = useCredentialStatus(cam.id);
+ const save = useSaveCredentials(cam.id);
+ const clear = useClearCredentials(cam.id);
+ // null until the user types, so the saved username (never the password) can prefill it.
+ const [typedUsername, setTypedUsername] = useState(null);
+ const [password, setPassword] = useState("");
+ const username = typedUsername ?? status.data?.username ?? DEFAULT_USERNAME;
+
+ function submit(e: React.FormEvent) {
+ e.preventDefault();
+ save.mutate(
+ { username, password },
+ {
+ onSuccess: () => {
+ setPassword("");
+ onSaved();
+ },
+ },
+ );
+ }
+
+ const error = save.error ?? clear.error;
+ const busy = save.isPending || clear.isPending;
+
+ return (
+
+ );
+}
+
diff --git a/src/app/camera-status.tsx b/src/app/camera-status.tsx
index 722c815..d70e190 100644
--- a/src/app/camera-status.tsx
+++ b/src/app/camera-status.tsx
@@ -53,14 +53,18 @@ const STATUS: Record
-
+ {(device || streams) && (
+
+ {device}
+ {device && streams ? " · " : ""}
+ {streams}
+
+ )}
+
+ Web page
+ {/* While the form is open it has its own Cancel; two would be one too many. */}
+ {!editing && (
+ setEditing(true)} className="inline-flex items-center gap-1 underline">
+
+ )}
+
+ {editing && (
+
+ setEditing(false)} onCancel={() => setEditing(false)} />
+
+ )}
+
{JSON.stringify(props.cam)}
+ ),
+}));
+
vi.mock("./live-panel", () => ({
default: (props: object) => {JSON.stringify(props)}
,
}));
@@ -67,6 +74,9 @@ describe("/cameras/[id]", () => {
expect(html).toContain('href="/"');
expect(html).toContain("All cameras");
expect(html).toContain(">Refresh");
+ // The camera's own web page and login moved here from the dashboard card (iss-t9twsxg).
+ expect(html.replace(/"/g, '"')).toContain(`"id":"${ID}"`);
+ expect(html).toContain("login-controls");
expect(html.replace(/"/g, '"')).toContain(JSON.stringify({ cameraId: ID, name: "I91ET" }));
expect(html).toContain(JSON.stringify({ id: ID, host: "192.168.17.129", port: 80 }).replace(/"/g, """));
for (const svg of html.match(/]*>/g)!) expect(svg).toContain('aria-hidden="true"');
diff --git a/src/app/cameras/[id]/page.tsx b/src/app/cameras/[id]/page.tsx
index 82dbab5..b30eece 100644
--- a/src/app/cameras/[id]/page.tsx
+++ b/src/app/cameras/[id]/page.tsx
@@ -6,6 +6,7 @@ import { requirePageAccess } from "@/lib/access";
import { isAllowedHost } from "@/lib/camera";
import { getCameraRecord, isValidCameraId } from "@/lib/camera-registry";
import { RefreshButton } from "./client-controls";
+import CameraLoginControls from "./camera-login-controls";
import LivePanel from "./live-panel";
import { CameraSettingsSections } from "./settings-sections";
@@ -39,15 +40,27 @@ export default async function CameraPage({ params }: PageProps<"/cameras/[id]">)
{record.location ? · {record.location} : null}
-
-
-
- Recordings
-
-
+
+
+
+
diff --git a/src/app/icons.test.tsx b/src/app/icons.test.tsx
index 13807db..408f158 100644
--- a/src/app/icons.test.tsx
+++ b/src/app/icons.test.tsx
@@ -65,19 +65,17 @@ beforeEach(() => {
});
describe("camera card", () => {
- it("marks Change login, the web page link, and the status badge", async () => {
+ it("marks the status badge and the pop-out icon, the only controls left on a card", async () => {
stubFetch({
[`GET ${base}/info`]: () => json(info),
[`GET ${base}/snapshot`]: () => new Response(new Blob(["x"])),
});
renderWithQuery(
);
- const change = await screen.findByRole("button", { name: "Change login" });
- expect(iconIn(change)).toContain("key-round");
- const web = screen.getByRole("link", { name: "Web page" });
- expect(iconIn(web)).toContain("external-link");
- expect(web.textContent).not.toContain("↗");
- allIconsDecorative();
+ // Icon-only, so its name has to say what it does and to which camera (pri-8ev5m89).
+ const popout = await screen.findByRole("link", { name: "Pop out Porch" });
+ expect(iconIn(popout)).toContain("external-link");
+ allIconsDecorative(popout);
});
it("marks the login form: title, Save, Forget, and errors", async () => {