@matter-server/dashboard 0.7.0-alpha.0-20260512-b404bea → 0.7.0

package/src/pages/camera-overlay.ts

@@ -0,0 +1,562 @@
+/**
+ * @license
+ * Copyright 2025-2026 Open Home Foundation
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { consume } from "@lit/context";
+import "@material/web/button/filled-button.js";
+import "@material/web/button/text-button.js";
+import "@material/web/iconbutton/icon-button.js";
+import "@material/web/select/outlined-select.js";
+import "@material/web/select/select-option.js";
+import type { MatterClient } from "@matter-server/ws-client";
+import { mdiCamera, mdiClose, mdiVolumeHigh, mdiVolumeOff } from "@mdi/js";
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { createRef, ref } from "lit/directives/ref.js";
+import { clientContext } from "../client/client-context.js";
+import {
+    AVSM_FEAT_OSD,
+    AVSM_FEAT_WMARK,
+    AVSM_FEATURE_MAP_ATTR_ID,
+    CAMERA_AV_STREAM_MANAGEMENT_CLUSTER_ID,
+} from "../components/webrtc-stream-view.js";
+import "../components/avsum-ptz-strip.js";
+import "../components/ha-svg-icon.js";
+import "../components/webrtc-stream-view.js";
+import type { WebRtcStreamView } from "../components/webrtc-stream-view.js";
+import { asObject, pickNumber } from "../util/attribute-shapes.js";
+import { hasAvsumOnEndpoint } from "../util/avsum.js";
+
+type StreamState = "idle" | "connecting" | "streaming" | "error";
+
+interface Resolution {
+    width: number;
+    height: number;
+}
+
+const HA_DEFAULT_RESOLUTIONS: Resolution[] = [
+    { width: 1920, height: 1080 },
+    { width: 1280, height: 720 },
+    { width: 640, height: 480 },
+];
+
+@customElement("camera-overlay")
+export class CameraOverlay extends LitElement {
+    @consume({ context: clientContext, subscribe: true })
+    @property({ attribute: false })
+    client?: MatterClient;
+
+    @property({ attribute: false }) nodeId!: number | bigint;
+    @property({ type: Number }) endpointId!: number;
+
+    @state() private _state: StreamState = "idle";
+    @state() private _errorMessage: string | null = null;
+    @state() private _snapshotDataUri: string | null = null;
+    @state() private _snapshotResolution: Resolution | null = null;
+    @state() private _snapshotBusy = false;
+    @state() private _snapshotError: string | null = null;
+    @state() private _resolutions: Resolution[] = [];
+    @state() private _selectedResolution: Resolution | null = null;
+    @state() private _resolutionsLoading = true;
+    @state() private _closing = false;
+    @state() private _activeVideoStreamId: number | null = null;
+    @state() private _muted = true;
+    @state() private _watermarkEnabled = false;
+    @state() private _osdEnabled = false;
+    @state() private _snapshotResolutions: Resolution[] = [];
+    @state() private _selectedSnapshotResolution: Resolution | null = null;
+
+    private get _snapshotSupported(): boolean {
+        const node = this.client?.nodes[String(this.nodeId)];
+        // CaptureSnapshot (cmd 12) must appear in AcceptedCommandList (attr 0xfff9 = 65529).
+        const accepted = node?.attributes[`${this.endpointId}/1361/65529`];
+        if (!Array.isArray(accepted) || !accepted.includes(12)) return false;
+        // FeatureMap (attr 0xfffc = 65532) bit 2 (SNP) advertises snapshot support — some cameras
+        // set the bit but leave SnapshotCapabilities empty, so the feature bit is the authoritative
+        // signal and SnapshotCapabilities a hint we fall back from.
+        const featureMap = node?.attributes[`${this.endpointId}/1361/65532`];
+        if (typeof featureMap === "number" && (featureMap & 0x04) !== 0) return true;
+        const caps = node?.attributes[`${this.endpointId}/1361/10`];
+        return Array.isArray(caps) && caps.length > 0;
+    }
+
+    private _streamViewRef = createRef<WebRtcStreamView>();
+
+    override firstUpdated(): void {
+        this._initResolutions();
+    }
+
+    private _initResolutions(): void {
+        this._resolutions = this._loadResolutions();
+        this._selectedResolution = this._resolutions[0] ?? null;
+        this._snapshotResolutions = this._loadSnapshotResolutions();
+        this._selectedSnapshotResolution = this._snapshotResolutions[0] ?? null;
+        this._resolutionsLoading = false;
+    }
+
+    private _loadSnapshotResolutions(): Resolution[] {
+        const raw = this._readCachedAvsmAttribute(10);
+        if (!Array.isArray(raw)) return [];
+        const seen = new Map<string, Resolution>();
+        for (const item of raw) {
+            const obj = asObject(item);
+            if (!obj) continue;
+            const res = asObject(obj["resolution"] ?? obj["0"]);
+            if (!res) continue;
+            const w = pickNumber(res, "width", "0");
+            const h = pickNumber(res, "height", "1");
+            if (w !== null && h !== null) {
+                const key = `${w}x${h}`;
+                if (!seen.has(key)) seen.set(key, { width: w, height: h });
+            }
+        }
+        return [...seen.values()].sort((a, b) => b.width * b.height - a.width * a.height);
+    }
+
+    private _onSnapshotResolutionChange(ev: Event): void {
+        const value = (ev.target as HTMLSelectElement).value;
+        const [w, h] = value.split("x").map(Number);
+        if (!Number.isFinite(w) || !Number.isFinite(h)) return;
+        this._selectedSnapshotResolution = { width: w, height: h };
+    }
+
+    private _readCachedAvsmAttribute(attributeId: number): unknown {
+        const node = this.client?.nodes[String(this.nodeId)];
+        if (!node) return undefined;
+        return node.attributes[`${this.endpointId}/${CAMERA_AV_STREAM_MANAGEMENT_CLUSTER_ID}/${attributeId}`];
+    }
+
+    private _loadResolutions(): Resolution[] {
+        // 1. RateDistortionTradeOffPoints (attr id 5) — richest capability source
+        const rdtRaw = this._readCachedAvsmAttribute(5);
+        if (Array.isArray(rdtRaw) && rdtRaw.length > 0) {
+            const seen = new Map<string, Resolution>();
+            for (const item of rdtRaw) {
+                const resObj = asObject(item)?.["resolution"];
+                const res = asObject(resObj);
+                if (!res) continue;
+                const w = pickNumber(res, "width");
+                const h = pickNumber(res, "height");
+                if (w !== null && h !== null) {
+                    const key = `${w}x${h}`;
+                    if (!seen.has(key)) seen.set(key, { width: w, height: h });
+                }
+            }
+            const results = [...seen.values()].sort((a, b) => b.width * b.height - a.width * a.height);
+            if (results.length > 0) return results;
+        }
+
+        // 2. MinViewportResolution (attr id 4) — single VideoResolution struct {width, height}
+        const minVpRaw = this._readCachedAvsmAttribute(4);
+        const minVp = asObject(minVpRaw);
+        if (minVp) {
+            const w = pickNumber(minVp, "width");
+            const h = pickNumber(minVp, "height");
+            if (w !== null && h !== null && w > 0 && h > 0) return [{ width: w, height: h }];
+        }
+
+        return HA_DEFAULT_RESOLUTIONS;
+    }
+
+    private _getSensorSize(): { width: number; height: number } | null {
+        const node = this.client?.nodes[String(this.nodeId)];
+        if (!node) return null;
+        const raw = node.attributes[`${this.endpointId}/1361/7`];
+        const obj = asObject(raw);
+        if (!obj) return null;
+        const w = pickNumber(obj, "sensorWidth", "0");
+        const h = pickNumber(obj, "sensorHeight", "1");
+        if (w === null || h === null) return null;
+        return { width: w, height: h };
+    }
+
+    private _avsmFeatures(): { wmark: boolean; osd: boolean } {
+        const node = this.client?.nodes[String(this.nodeId)];
+        const raw =
+            node?.attributes[
+                `${this.endpointId}/${CAMERA_AV_STREAM_MANAGEMENT_CLUSTER_ID}/${AVSM_FEATURE_MAP_ATTR_ID}`
+            ];
+        const bits = typeof raw === "number" ? raw : 0;
+        return {
+            wmark: (bits & AVSM_FEAT_WMARK) !== 0,
+            osd: (bits & AVSM_FEAT_OSD) !== 0,
+        };
+    }
+
+    private _avsumPresent(): boolean {
+        const node = this.client?.nodes[String(this.nodeId)];
+        if (!node) return false;
+        return hasAvsumOnEndpoint(node, this.endpointId);
+    }
+
+    private async _close(): Promise<void> {
+        const view = this._streamViewRef.value;
+        if (view) {
+            this._closing = true;
+            try {
+                await view.stop();
+                await view.deallocateSnapshot();
+            } finally {
+                this._closing = false;
+            }
+        }
+        this.remove();
+    }
+
+    private _onStreamState(ev: CustomEvent<{ state: StreamState; errorMessage: string | null }>): void {
+        this._state = ev.detail.state;
+        this._errorMessage = ev.detail.errorMessage;
+        // Only expose the underlying VideoStreamID to the AVSUM strip while actively
+        // streaming. Other states would surface a stale id (during error/idle the
+        // stream is being torn down) or a not-yet-allocated null (during connecting).
+        this._activeVideoStreamId =
+            ev.detail.state === "streaming" ? (this._streamViewRef.value?.videoStreamId ?? null) : null;
+    }
+
+    private _start(): void {
+        const view = this._streamViewRef.value;
+        if (view) {
+            void view.start();
+        }
+    }
+
+    private _stop(): void {
+        const view = this._streamViewRef.value;
+        if (view) {
+            void view.stop();
+        }
+    }
+
+    private _toggleMute(): void {
+        const view = this._streamViewRef.value;
+        if (!view) return;
+        const next = !this._muted;
+        view.setMuted(next);
+        this._muted = next;
+    }
+
+    private async _onSnapshot(): Promise<void> {
+        const view = this._streamViewRef.value;
+        if (!view) return;
+        this._snapshotBusy = true;
+        this._snapshotError = null;
+        try {
+            const { dataUri, resolution } = await view.takeSnapshot();
+            this._snapshotDataUri = dataUri;
+            this._snapshotResolution = resolution;
+        } catch (e) {
+            this._snapshotError = e instanceof Error ? e.message : String(e);
+        } finally {
+            this._snapshotBusy = false;
+        }
+    }
+
+    private _downloadSnapshot(): void {
+        if (!this._snapshotDataUri) return;
+        const a = document.createElement("a");
+        a.href = this._snapshotDataUri;
+        a.download = `snapshot-node${this.nodeId}-ep${this.endpointId}-${Date.now()}.jpg`;
+        a.click();
+    }
+
+    private _onResolutionChange(ev: Event): void {
+        const value = (ev.target as HTMLSelectElement).value;
+        const [w, h] = value.split("x").map(Number);
+        if (!Number.isFinite(w) || !Number.isFinite(h)) return;
+        this._selectedResolution = { width: w, height: h };
+    }
+
+    override render() {
+        const canStart = this._state === "idle" || this._state === "error";
+
+        return html`
+            <div class="backdrop" @click=${this._closing ? undefined : this._close}></div>
+            <div class="frame" @click=${(e: Event) => e.stopPropagation()}>
+                <header>
+                    <md-icon-button @click=${this._close} ?disabled=${this._closing} aria-label="Close">
+                        <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+                    </md-icon-button>
+                    <span>Node ${this.nodeId} • Endpoint ${this.endpointId}</span>
+                </header>
+                ${this._avsumPresent()
+                    ? html`<avsum-ptz-strip
+                          .nodeId=${this.nodeId}
+                          .endpointId=${this.endpointId}
+                          .activeVideoStreamId=${this._activeVideoStreamId}
+                          .sensorSize=${this._getSensorSize()}
+                      ></avsum-ptz-strip>`
+                    : nothing}
+                <main>
+                    ${this.client
+                        ? html`<webrtc-stream-view
+                              ${ref(this._streamViewRef)}
+                              .nodeId=${this.nodeId}
+                              .endpointId=${this.endpointId}
+                              .resolution=${this._selectedResolution}
+                              .watermarkEnabled=${this._watermarkEnabled}
+                              .osdEnabled=${this._osdEnabled}
+                              .snapshotResolution=${this._selectedSnapshotResolution}
+                              @streamstate=${this._onStreamState}
+                          ></webrtc-stream-view>`
+                        : html`<div class="status error">No Matter client available.</div>`}
+                    ${this._snapshotDataUri
+                        ? html`
+                              <div class="snapshot-preview">
+                                  <img
+                                      src=${this._snapshotDataUri}
+                                      @click=${this._downloadSnapshot}
+                                      title="Click to download${this._snapshotResolution
+                                          ? ` (${this._snapshotResolution.width}×${this._snapshotResolution.height})`
+                                          : ""}"
+                                      alt="Snapshot"
+                                  />
+                                  <md-icon-button
+                                      @click=${() => {
+                                          this._snapshotDataUri = null;
+                                      }}
+                                      aria-label="Close snapshot"
+                                  >
+                                      <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+                                  </md-icon-button>
+                              </div>
+                          `
+                        : nothing}
+                    ${this._snapshotError ? html`<div class="snapshot-error">${this._snapshotError}</div>` : nothing}
+                </main>
+                <footer>
+                    ${this._closing ? html`<span class="footer-status">Closing…</span>` : nothing}
+                    ${!this._closing && this._state === "connecting"
+                        ? html`<span class="footer-status">Waiting for camera response…</span>`
+                        : nothing}
+                    ${!this._closing && this._state === "error" && this._errorMessage
+                        ? html`<span class="footer-status error">${this._errorMessage}</span>`
+                        : nothing}
+                    ${canStart && this._resolutions.length > 0
+                        ? html`
+                              <md-outlined-select
+                                  label="Resolution"
+                                  .value=${this._selectedResolution
+                                      ? `${this._selectedResolution.width}x${this._selectedResolution.height}`
+                                      : ""}
+                                  @change=${this._onResolutionChange}
+                              >
+                                  ${this._resolutions.map(
+                                      r => html`
+                                          <md-select-option value=${`${r.width}x${r.height}`}>
+                                              <div slot="headline">${r.width}×${r.height}</div>
+                                          </md-select-option>
+                                      `,
+                                  )}
+                              </md-outlined-select>
+                          `
+                        : nothing}
+                    ${canStart && this._snapshotSupported && this._snapshotResolutions.length > 0
+                        ? html`
+                              <md-outlined-select
+                                  label="Snapshot"
+                                  .value=${this._selectedSnapshotResolution
+                                      ? `${this._selectedSnapshotResolution.width}x${this._selectedSnapshotResolution.height}`
+                                      : ""}
+                                  @change=${this._onSnapshotResolutionChange}
+                              >
+                                  ${this._snapshotResolutions.map(
+                                      r => html`
+                                          <md-select-option value=${`${r.width}x${r.height}`}>
+                                              <div slot="headline">${r.width}×${r.height}</div>
+                                          </md-select-option>
+                                      `,
+                                  )}
+                              </md-outlined-select>
+                          `
+                        : nothing}
+                    ${canStart && this._avsmFeatures().wmark
+                        ? html`<label class="overlay-toggle">
+                              <input
+                                  type="checkbox"
+                                  ?checked=${this._watermarkEnabled}
+                                  @change=${(e: Event) =>
+                                      (this._watermarkEnabled = (e.target as HTMLInputElement).checked)}
+                              />
+                              Watermark
+                          </label>`
+                        : nothing}
+                    ${canStart && this._avsmFeatures().osd
+                        ? html`<label class="overlay-toggle">
+                              <input
+                                  type="checkbox"
+                                  ?checked=${this._osdEnabled}
+                                  @change=${(e: Event) => (this._osdEnabled = (e.target as HTMLInputElement).checked)}
+                              />
+                              OSD
+                          </label>`
+                        : nothing}
+                    ${canStart
+                        ? html`<md-filled-button
+                              @click=${this._start}
+                              ?disabled=${!this.client || this._resolutionsLoading}
+                          >
+                              ${this._state === "error" ? "Retry" : "Start"}
+                          </md-filled-button>`
+                        : nothing}
+                    ${this._state === "streaming"
+                        ? html`<md-filled-button @click=${this._stop}>End</md-filled-button>
+                              <md-text-button @click=${this._toggleMute} aria-label=${this._muted ? "Unmute" : "Mute"}>
+                                  <ha-svg-icon
+                                      slot="icon"
+                                      .path=${this._muted ? mdiVolumeOff : mdiVolumeHigh}
+                                  ></ha-svg-icon>
+                                  ${this._muted ? "Unmute" : "Mute"}
+                              </md-text-button>`
+                        : nothing}
+                    ${this._snapshotSupported
+                        ? html`<md-text-button
+                              @click=${this._onSnapshot}
+                              ?disabled=${this._snapshotBusy || !this.client}
+                              aria-label="Take snapshot"
+                          >
+                              <ha-svg-icon .path=${mdiCamera} slot="icon"></ha-svg-icon>
+                              ${this._snapshotBusy ? "Capturing…" : "Snapshot"}
+                          </md-text-button>`
+                        : nothing}
+                    <md-text-button @click=${this._close} ?disabled=${this._closing}>Close</md-text-button>
+                </footer>
+            </div>
+        `;
+    }
+
+    static override styles = css`
+        :host {
+            position: fixed;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            z-index: 9999;
+        }
+        .backdrop {
+            position: fixed;
+            inset: 0;
+            background: rgba(0, 0, 0, 0.8);
+        }
+        .frame {
+            position: relative;
+            width: min(80vw, 1200px);
+            height: min(80vh, 800px);
+            background: var(--md-sys-color-surface);
+            color: var(--md-sys-color-on-surface);
+            display: grid;
+            grid-template-rows: auto auto 1fr auto;
+            grid-template-areas: "header" "strip" "main" "footer";
+            border-radius: 8px;
+            overflow: hidden;
+        }
+        header {
+            grid-area: header;
+        }
+        avsum-ptz-strip {
+            grid-area: strip;
+        }
+        main {
+            grid-area: main;
+        }
+        footer {
+            grid-area: footer;
+        }
+        header {
+            display: flex;
+            align-items: center;
+            padding: 8px 16px;
+            gap: 12px;
+            border-bottom: 1px solid var(--md-sys-color-outline-variant);
+        }
+        main {
+            display: flex;
+            flex-direction: column;
+            background: black;
+            position: relative;
+            overflow: hidden;
+            min-height: 0;
+        }
+        webrtc-stream-view {
+            flex: 1 1 0;
+            min-height: 0;
+            width: 100%;
+        }
+        .status.error {
+            color: var(--danger-color);
+            text-align: center;
+            padding: 16px;
+        }
+        .overlay-toggle {
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            font-size: 0.85rem;
+            color: var(--md-sys-color-on-surface-variant);
+            user-select: none;
+            cursor: pointer;
+        }
+        .overlay-toggle input[type="checkbox"] {
+            accent-color: var(--md-sys-color-primary);
+            margin: 0;
+        }
+        .snapshot-preview {
+            position: absolute;
+            top: 8px;
+            right: 8px;
+            max-width: 200px;
+            background: var(--md-sys-color-surface-container);
+            border: 1px solid var(--md-sys-color-outline-variant);
+            border-radius: 4px;
+            padding: 4px;
+            display: grid;
+            grid-template-columns: 1fr auto;
+            align-items: start;
+            gap: 4px;
+            z-index: 10;
+        }
+        .snapshot-preview img {
+            max-width: 100%;
+            cursor: pointer;
+            display: block;
+            border-radius: 2px;
+        }
+        .snapshot-error {
+            position: absolute;
+            bottom: 8px;
+            left: 50%;
+            transform: translateX(-50%);
+            color: var(--danger-color);
+            background: var(--md-sys-color-surface-container);
+            border-radius: 4px;
+            padding: 6px 12px;
+            font-size: 0.875rem;
+            z-index: 10;
+            white-space: nowrap;
+        }
+        footer {
+            padding: 8px 16px;
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+            gap: 12px;
+            border-top: 1px solid var(--md-sys-color-outline-variant);
+        }
+        .footer-status {
+            margin-right: auto;
+            color: var(--md-sys-color-on-surface-variant);
+            font-style: italic;
+        }
+        .footer-status.error {
+            color: var(--danger-color);
+            font-style: normal;
+        }
+    `;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "camera-overlay": CameraOverlay;
+    }
+}

package/src/pages/cluster-commands/base-cluster-commands.ts

@@ -4,9 +4,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { consume } from "@lit/context";
 import { MatterClient, MatterNode } from "@matter-server/ws-client";
 import { LitElement, css, type CSSResultGroup } from "lit";
 import { property } from "lit/decorators.js";
+import { clientContext, tickContext } from "../../client/client-context.js";
 import { reducedMotionStyles } from "../../util/shared-styles.js";
 
 /**
@@ -14,9 +16,12 @@ import { reducedMotionStyles } from "../../util/shared-styles.js";
  * Provides shared properties, styling, and helper methods for sending commands.
  */
 export abstract class BaseClusterCommands extends LitElement {
-    @property({ attribute: false })
+    @consume({ context: clientContext })
     public client!: MatterClient;
 
+    @consume({ context: tickContext, subscribe: true })
+    protected _tick = 0;
+
     @property({ attribute: false })
     public node!: MatterNode;
 
@@ -45,6 +50,7 @@ export abstract class BaseClusterCommands extends LitElement {
         css`
             :host {
                 display: block;
+                color: var(--md-sys-color-on-surface);
             }
 
             details.command-panel {