@cometchat/skills 4.0.0 → 4.2.0

package/skills/cometchat-angular-calls/references/call-layouts.md

@@ -0,0 +1,106 @@
+# Call layouts on Angular
+
+Same SDK API as web. Angular wraps layout state in a service so multiple components (toolbar, sidebar, header) can stay in sync.
+
+**Canonical docs:** https://www.cometchat.com/docs/calls/javascript/call-layouts
+**Read first:** `cometchat-react-calls/references/call-layouts.md` — layout matrix + when to lock.
+
+---
+
+## Layout service
+
+```ts
+import { Injectable, NgZone } from "@angular/core";
+import { BehaviorSubject } from "rxjs";
+import { CometChatCalls } from "@cometchat/calls-sdk-javascript";
+
+export type CallLayout = "TILE" | "SIDEBAR" | "SPOTLIGHT";
+
+@Injectable({ providedIn: "root" })
+export class CallLayoutService {
+  readonly layout$ = new BehaviorSubject<CallLayout>("TILE");
+
+  constructor(private zone: NgZone) {
+    CometChatCalls.addEventListener("onCallLayoutChanged", (next: string) => {
+      this.zone.run(() => this.layout$.next(next as CallLayout));
+    });
+  }
+
+  set(layout: CallLayout): void {
+    CometChatCalls.setLayout(layout);
+    this.layout$.next(layout);
+  }
+}
+```
+
+---
+
+## Switcher component (mat-button-toggle-group)
+
+```ts
+@Component({
+  selector: "app-layout-switcher",
+  template: `
+    <mat-button-toggle-group
+      [value]="layout$ | async"
+      (change)="onChange($event.value)"
+      aria-label="Call layout"
+    >
+      <mat-button-toggle value="TILE" aria-label="Tile layout">Tile</mat-button-toggle>
+      <mat-button-toggle value="SIDEBAR" aria-label="Sidebar layout">Sidebar</mat-button-toggle>
+      <mat-button-toggle value="SPOTLIGHT" aria-label="Spotlight layout">Spotlight</mat-button-toggle>
+    </mat-button-toggle-group>
+  `,
+})
+export class LayoutSwitcherComponent {
+  layout$ = this.svc.layout$;
+  constructor(private svc: CallLayoutService) {}
+  onChange(layout: CallLayout) {
+    this.svc.set(layout);
+  }
+}
+```
+
+`mat-button-toggle-group` already wires up `role="radiogroup"` semantics — no extra ARIA needed.
+
+---
+
+## Pass initial via call settings
+
+```ts
+const callSettings = new CallSettingsBuilder()
+  .setLayout("SPOTLIGHT")
+  .setHideChangeLayoutButton(true)  // if you ship LayoutSwitcherComponent
+  .build();
+
+await CometChatCalls.joinSession(callToken, callSettings, container.nativeElement);
+```
+
+---
+
+## Anti-patterns
+
+Web sister rules apply, plus Angular-specific:
+
+1. **No `NgZone.run` wrap on the SDK callback.** Layout changes via the kit's switcher don't update the toggle group in OnPush components.
+2. **Service provided in a feature module instead of root.** Layout state resets when navigating away and back.
+3. **`(click)` on each toggle setting layout individually.** `mat-button-toggle-group`'s `(change)` is the right hook — single source of truth.
+
+---
+
+## Verification checklist
+
+- [ ] `CallLayoutService` provided in root
+- [ ] `NgZone.run` wraps the SDK callback
+- [ ] `mat-button-toggle-group` `(change)` calls `svc.set`
+- [ ] Initial layout via `CallSettingsBuilder.setLayout`
+- [ ] Browser smoke: 3 tabs, each picks a different layout, no cross-talk
+
+---
+
+## Pointers
+
+- `cometchat-react-calls/references/call-layouts.md` — sister
+- `cometchat-angular-calls` SKILL.md
+- `references/ngzone-and-async-callbacks.md`
+- Canonical docs: https://www.cometchat.com/docs/calls/javascript/call-layouts

package/skills/cometchat-angular-calls/references/call-session.md

@@ -0,0 +1,167 @@
+# Call session — joinSession with no ringing (Angular)
+
+Same SDK API as web. This file mirrors the upstream Angular sample at `~/Downloads/calls-sdk/calls-sdk-javascript-5/sample-apps/cometchat-calls-sample-app-angular/src/app/pages/join-session/`. Customer-validated against the v5 SDK as the known-good shape.
+
+**Read first:** `cometchat-react-calls/references/call-session.md` — full architecture (sessionId strategies, server-side authorization, token generation), then come back here for Angular specialization.
+
+---
+
+## Hard rules (Angular-specific overrides on top of the React-side rules)
+
+1. **Use a signal for `inMeeting` state, `@if` to render the container, `viewChild` to read it.** This is the upstream sample's exact shape and avoids stale-template traps under OnPush change detection.
+2. **Container CSS:** `position: fixed; top: 0; left: 0; width: 100vw; height: 100vh`. Matches the sample. Flex-derived sizing inside nested route outlets has produced "iframe renders at 0×0 → no video" in customer integrations.
+3. **Pass an empty `{}` settings object.** Explicit `{ sessionType: "VIDEO", layout: "TILE" }` is type-valid but the sample app uses `{}` — that's the empirically-validated combination.
+4. **`onConnectionClosed`** is the cleanup event, not `onSessionLeft`. Fires on ANY termination (peer left, network died, in-iframe Leave button).
+5. **NgZone.run around router navigation in the event listener.** SDK events fire outside Angular's zone; raw router calls won't trigger change detection.
+6. **For standalone session-only integrations, the Chat SDK is OPTIONAL.** Use `CometChatCalls.init({appId, region, authKey})` + `CometChatCalls.login(uid)` alone. The upstream sample never imports `@cometchat/chat-sdk-javascript`. Keep dual-SDK only for additive (chat + calls) integrations.
+
+---
+
+## Component (signals + @if + viewChild)
+
+```ts
+import {
+  Component, OnInit, OnDestroy,
+  signal, viewChild, ElementRef, inject, NgZone,
+} from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { CometChatCalls } from '@cometchat/calls-sdk-javascript';
+
+@Component({
+  selector: 'app-call-room',
+  standalone: true,
+  template: `
+    @if (inMeeting()) {
+      <div class="meeting-container" #meetingContainer></div>
+    }
+  `,
+  styles: [`
+    .meeting-container {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+    }
+  `],
+})
+export class CallRoomComponent implements OnInit, OnDestroy {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private zone = inject(NgZone);
+
+  sessionId = '';
+  inMeeting = signal(false);
+
+  // Signal-based viewChild — populated after the @if block renders.
+  meetingContainer = viewChild<ElementRef<HTMLDivElement>>('meetingContainer');
+
+  private cleanupEventListener?: () => void;
+
+  ngOnInit(): void {
+    this.sessionId = this.route.snapshot.paramMap.get('sessionId') ?? '';
+
+    // Cleanup listener fires on ANY session termination (peer left,
+    // network dropped, in-iframe Leave clicked). Reset state via NgZone
+    // so OnPush change detection picks it up.
+    this.cleanupEventListener = CometChatCalls.addEventListener(
+      'onConnectionClosed',
+      () => this.zone.run(() => {
+        this.inMeeting.set(false);
+        this.router.navigate(['/']);
+      }),
+    );
+
+    if (this.sessionId) {
+      this.startMeeting();
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.cleanupEventListener?.();
+    try {
+      CometChatCalls.leaveSession();
+    } catch {
+      // ignore — not joined or already left
+    }
+  }
+
+  private startMeeting(): void {
+    this.inMeeting.set(true);
+
+    // setTimeout(0) gives Angular one tick to render the @if block
+    // so meetingContainer() is populated before joinSession measures it.
+    setTimeout(() => {
+      CometChatCalls.generateToken(this.sessionId).then(({ token }) => {
+        const container = this.meetingContainer();
+        if (container) {
+          // Empty {} settings = SDK defaults (matches sample app).
+          CometChatCalls.joinSession(token, {}, container.nativeElement);
+        }
+      });
+    }, 0);
+  }
+}
+```
+
+**Why this shape (not the obvious alternatives):**
+
+- **`@if (inMeeting())` + `viewChild`** instead of always-rendered container + `@ViewChild({ static: true })` — matches the upstream sample. The signal-based pattern works under OnPush change detection without `markForCheck()` ceremonies.
+- **`position: fixed; 100vw × 100vh`** instead of `width: 100%; height: 100vh` — gives the SDK a deterministic viewport-anchored container. Flex-derived sizing inside route outlets has caused 0×0 iframe rendering.
+- **Empty `{}` settings** — the sample's validated combination. Explicit `{ sessionType: "VIDEO", layout: "TILE" }` is type-valid but has produced unexplained rendering issues.
+- **`onConnectionClosed`** — fires on ANY termination, not just user-initiated leave. More reliable for cleanup than `onSessionLeft`.
+- **`setTimeout(0)` after `inMeeting.set(true)`** — gives Angular one change-detection tick to render the `@if` block, so `meetingContainer()` is populated when `joinSession` measures it. The upstream sample uses the same trick (see `startInstantMeeting`).
+- **`NgZone.run` around router navigation in the listener** — SDK events fire outside Angular's zone; raw `router.navigate` won't trigger change detection. UI freezes despite URL changing.
+
+---
+
+## Route configuration
+
+```ts
+const routes: Routes = [
+  { path: 'meet/:sessionId', component: CallRoomComponent, data: { reuseRoute: false } },
+];
+```
+
+Read `sessionId` via `ActivatedRoute.snapshot.paramMap.get('sessionId')` in `ngOnInit`.
+
+---
+
+## Anti-patterns
+
+1. **Always-rendered container with `@ViewChild({ static: true })`.** Works but doesn't match the sample app pattern and forces you to handle "not yet joined" rendering inside the SDK's iframe area. Use `@if` + `viewChild` signal instead.
+2. **`@ViewChild({ static: false })` without compensating logic.** Container ref is undefined in `ngOnInit` — `joinSession` throws or no-ops.
+3. **`width: 100%; height: 100vh` container.** Works in flat layouts; fails in nested route outlets or flex parents. Use `position: fixed` instead.
+4. **Explicit `{ sessionType, layout, ... }` settings.** Type-valid but has caused unexplained black-tile-on-local-preview behaviour in customer integrations. Use `{}` and let the SDK pick defaults.
+5. **`onSessionLeft` only.** Fires on graceful user leave but NOT on network drops or peer disconnects. Use `onConnectionClosed` for the cleanup path.
+6. **Calling `startMeeting()` synchronously after `inMeeting.set(true)`.** The `@if` block hasn't rendered yet — `meetingContainer()` returns undefined. Wrap the `generateToken` + `joinSession` call in `setTimeout(0)` (or `afterNextRender` in Angular 16+).
+7. **No `NgZone.run` around router navigation in event listeners.** SDK fires outside Angular's zone — change detection doesn't run, UI freezes.
+8. **Component reused via `RouteReuseStrategy`.** Stale signal state → second navigation skips `joinSession`. Disable reuse for the call route.
+9. **Initializing Chat SDK for a session-only integration.** Wastes time and adds two extra failure modes (Chat init, Chat login race). Drop `CometChat.init` / `CometChat.login` entirely for standalone session apps.
+
+---
+
+## Verification checklist
+
+- [ ] Container uses `position: fixed; width: 100vw; height: 100vh` (sample-app pattern)
+- [ ] Container rendered via `@if (inMeeting())`, read via `viewChild`
+- [ ] Settings passed as empty `{}`, not explicit `{ sessionType, layout, ... }`
+- [ ] `onConnectionClosed` listener handles session end (not just `onSessionLeft`)
+- [ ] `NgZone.run` wraps router navigation in the event handler
+- [ ] `setTimeout(0)` (or `afterNextRender`) gates `joinSession` until the `@if` block renders
+- [ ] `leaveSession` called in `ngOnDestroy`
+- [ ] Listener cleanup function called in `ngOnDestroy`
+- [ ] Route has `data: { reuseRoute: false }` to prevent stale-component reuse
+- [ ] **Standalone session-only:** no `CometChat.init` / `CometChat.login` — Calls SDK alone
+- [ ] **Additive (chat + calls):** dual-SDK contract preserved (Chat first, then Calls)
+- [ ] Browser smoke: 2 tabs, both navigate to `/meet/${sessionId}`, both join, media flows, either leaves → other sees onConnectionClosed
+
+---
+
+## Pointers
+
+- `cometchat-react-calls/references/call-session.md` — full architecture (sessionId strategies, server-side authorization)
+- `cometchat-angular-calls/SKILL.md` — Angular-specific dual-SDK init pattern
+- `references/ngzone-and-async-callbacks.md` — why NgZone.run matters for SDK events
+- Upstream Angular sample — `~/Downloads/calls-sdk/calls-sdk-javascript-5/sample-apps/cometchat-calls-sample-app-angular/src/app/pages/join-session/`
+- Canonical docs: https://www.cometchat.com/docs/calls/javascript/join-session

package/skills/cometchat-angular-calls/references/custom-ui.md

@@ -0,0 +1,231 @@
+# Custom call UI in Angular
+
+Same architecture as React + RN custom UI; Angular-specific because of NgZone, ContentChild, and ng-template.
+
+---
+
+## Two paths
+
+1. **Style the kit's selectors** — pass Angular `[input]` props + content projection (`<ng-content select="...">`). Cheapest.
+2. **Build your own component on the SDK** — direct `CometChatCalls.joinSession(token, settings, container)` with your own `<video>` elements wrapped in Angular components. (`startSession` is a deprecated v4 shim — use `joinSession`.)
+
+This reference covers path 2.
+
+---
+
+## Component skeleton
+
+```ts
+// ongoing-call.component.ts
+import { Component, ElementRef, NgZone, OnDestroy, OnInit, ViewChild } from "@angular/core";
+import { CometChatCalls } from "@cometchat/calls-sdk-javascript";
+
+@Component({
+  selector: "app-ongoing-call",
+  template: `
+    <div class="call-container">
+      <video #remoteVideo autoplay playsinline class="remote-tile"></video>
+      <video #localVideo autoplay playsinline muted class="local-tile"></video>
+      <app-control-panel
+        [muted]="muted"
+        [cameraOff]="cameraOff"
+        (toggleMute)="onToggleMute()"
+        (toggleCamera)="onToggleCamera()"
+        (switchCamera)="onSwitchCamera()"
+        (end)="onEnd()"
+      ></app-control-panel>
+    </div>
+  `,
+  styles: [`
+    .call-container { position: fixed; inset: 0; background: #000; }
+    .remote-tile { width: 100%; height: 100%; object-fit: cover; }
+    .local-tile { position: absolute; top: 60px; right: 20px; width: 120px; height: 160px; border-radius: 8px; }
+  `],
+})
+export class OngoingCallComponent implements OnInit, OnDestroy {
+  @ViewChild("localVideo") localVideoRef!: ElementRef<HTMLVideoElement>;
+  @ViewChild("remoteVideo") remoteVideoRef!: ElementRef<HTMLVideoElement>;
+
+  muted = false;
+  cameraOff = false;
+
+  private listener: unknown;
+
+  constructor(private zone: NgZone) {}
+
+  async ngOnInit() {
+    this.listener = new CometChatCalls.OngoingCallListener({
+      onUserListUpdated: (users: unknown) => {
+        this.zone.run(() => { /* update roster */ });
+      },
+      onCallEnded: () => {
+        this.zone.run(() => this.cleanup());
+      },
+      onCallEndButtonPressed: () => CometChatCalls.leaveSession(),
+      onError: (err: unknown) => {
+        this.zone.run(() => console.error("Call error:", err));
+      },
+    });
+
+    const settings = new CometChatCalls.CallSettingsBuilder()
+      .setSessionID(this.sessionId)
+      .setIsAudioOnly(false)
+      .enableDefaultLayout(false)
+      .setCallEventListener(this.listener)
+      .build();
+
+    // v5 — generateToken takes ONLY sessionId. Auth is internal after CometChatCalls.login().
+    const tokenRes = await CometChatCalls.generateToken(this.sessionId);
+    // htmlElement is required — pass the call container ref.
+    // joinSession is the v5 canonical — startSession is a deprecated shim.
+    CometChatCalls.joinSession(tokenRes.token, settings, this.callContainerRef.nativeElement);
+  }
+
+  ngOnDestroy() {
+    this.cleanup();
+  }
+
+  onToggleMute() {
+    this.muted = !this.muted;
+    CometChatCalls.muteAudio(this.muted);
+  }
+
+  onToggleCamera() {
+    this.cameraOff = !this.cameraOff;
+    CometChatCalls.pauseVideo(this.cameraOff);
+  }
+
+  onSwitchCamera() {
+    CometChatCalls.switchCamera();
+  }
+
+  onEnd() {
+    CometChatCalls.leaveSession();
+    this.cleanup();
+  }
+
+  private cleanup() {
+    CometChatCalls.leaveSession();
+    if (this.localVideoRef?.nativeElement) this.localVideoRef.nativeElement.srcObject = null;
+    if (this.remoteVideoRef?.nativeElement) this.remoteVideoRef.nativeElement.srcObject = null;
+  }
+
+  // Inputs
+  sessionId!: string;       // bind from route param or parent
+}
+```
+
+NgZone.run wraps every SDK callback that mutates `this.*` (rule from `references/ngzone-and-async-callbacks.md`).
+
+---
+
+## Control panel as a child component
+
+```ts
+// control-panel.component.ts
+import { Component, EventEmitter, Input, Output } from "@angular/core";
+
+@Component({
+  selector: "app-control-panel",
+  template: `
+    <div class="row">
+      <button (click)="toggleMute.emit()">{{ muted ? "Unmute" : "Mute" }}</button>
+      <button (click)="toggleCamera.emit()">{{ cameraOff ? "Cam on" : "Cam off" }}</button>
+      <button (click)="switchCamera.emit()">Flip</button>
+      <button (click)="end.emit()" class="end">End</button>
+    </div>
+  `,
+  styles: [`
+    .row { position: absolute; bottom: 40px; left: 0; right: 0; display: flex; justify-content: space-around; }
+    button { padding: 16px; border-radius: 32px; }
+    .end { background: red; color: white; }
+  `],
+})
+export class ControlPanelComponent {
+  @Input() muted = false;
+  @Input() cameraOff = false;
+  @Output() toggleMute = new EventEmitter<void>();
+  @Output() toggleCamera = new EventEmitter<void>();
+  @Output() switchCamera = new EventEmitter<void>();
+  @Output() end = new EventEmitter<void>();
+}
+```
+
+---
+
+## Local preview before the call connects
+
+```ts
+async ngOnInit() {
+  // ... listener setup ...
+
+  // Preview stream
+  try {
+    const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
+    this.localStream = stream;
+    if (this.localVideoRef.nativeElement) {
+      this.localVideoRef.nativeElement.srcObject = stream;
+    }
+  } catch (err) {
+    if ((err as Error).name === "NotAllowedError") {
+      this.zone.run(() => this.errorMessage = "Camera/mic permission denied");
+    }
+  }
+
+  // Then start session — SDK takes over
+  // ...
+}
+
+ngOnDestroy() {
+  this.localStream?.getTracks().forEach(t => t.stop());   // CRITICAL — release tracks
+  this.cleanup();
+}
+```
+
+---
+
+## Lazy loading custom call modules
+
+If your project lazy-loads the calls feature (a `CallsModule` lazy-loaded at `/calls`), there's a gotcha:
+
+The `cometchat-angular-core` skill says `APP_INITIALIZER` must run at bootstrap, before lazy-loaded routes. If your `CallInitService` is provided in `CallsModule` (lazy), `APP_INITIALIZER` can't depend on it — Angular hasn't loaded the module yet.
+
+**Fix:** provide `CallInitService` in `AppModule` (eager), even if call components live in a lazy module. The service runs at boot; the components load on demand. This is documented further in `references/lazy-loading-pitfalls.md`.
+
+---
+
+## Route guard for active calls
+
+If the user navigates away from the ongoing-call component mid-call, the call should end:
+
+```ts
+// can-deactivate.guard.ts
+import { Injectable } from "@angular/core";
+import { CanDeactivate } from "@angular/router";
+import { CometChatCalls } from "@cometchat/calls-sdk-javascript";
+import { OngoingCallComponent } from "./ongoing-call.component";
+
+@Injectable({ providedIn: "root" })
+export class CallDeactivateGuard implements CanDeactivate<OngoingCallComponent> {
+  canDeactivate(component: OngoingCallComponent): boolean {
+    if (!component.callActive) return true;
+    const confirmed = window.confirm("End the active call?");
+    if (confirmed) {
+      CometChatCalls.leaveSession();
+    }
+    return confirmed;
+  }
+}
+```
+
+Register on the route:
+
+```ts
+{ path: "calls/ongoing/:id", component: OngoingCallComponent, canDeactivate: [CallDeactivateGuard] }
+```
+
+---
+
+## When NOT to go custom in Angular
+
+Same as React/RN — kit defaults cover 80%+. NgZone wrangling is real overhead; prefer styling props on `<cometchat-ongoing-call>` first. Custom is for design-system requirements that the kit's CSS variable overrides can't reach.

package/skills/cometchat-angular-calls/references/device-management.md

@@ -0,0 +1,135 @@
+# Device management on Angular
+
+Same JS SDK as web. Angular wraps device-list state in a service with RxJS observables.
+
+**Canonical docs:** https://www.cometchat.com/docs/calls/javascript/device-management
+**Read first:** `cometchat-react-calls/references/device-management.md` — pre-call picker + empty-label gotcha.
+
+---
+
+## Service-driven device lists
+
+```ts
+import { Injectable, NgZone } from "@angular/core";
+import { BehaviorSubject } from "rxjs";
+import { CometChatCalls } from "@cometchat/calls-sdk-javascript";
+
+interface MediaDevice { id: string; label: string; }
+
+@Injectable({ providedIn: "root" })
+export class CallDevicesService {
+  readonly mics$ = new BehaviorSubject<MediaDevice[]>([]);
+  readonly cameras$ = new BehaviorSubject<MediaDevice[]>([]);
+  readonly speakers$ = new BehaviorSubject<MediaDevice[]>([]);
+
+  constructor(private zone: NgZone) {
+    CometChatCalls.addEventListener("onAudioModesUpdated", () => {
+      this.zone.run(() => this.refresh());
+    });
+  }
+
+  async ensurePermission(): Promise<void> {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
+      stream.getTracks().forEach(t => t.stop());      // immediately release; we just wanted permission
+    } catch {
+      // permission denied
+    }
+  }
+
+  async refresh(): Promise<void> {
+    const [mics, cameras, speakers] = await Promise.all([
+      CometChatCalls.getAudioInputDevices(),
+      CometChatCalls.getVideoInputDevices(),
+      CometChatCalls.getAudioOutputDevices(),
+    ]);
+    this.mics$.next(mics);
+    this.cameras$.next(cameras);
+    this.speakers$.next(speakers);
+  }
+
+  async selectMic(id: string): Promise<void> {
+    await CometChatCalls.setAudioInputDevice(id);
+  }
+  async selectCamera(id: string): Promise<void> {
+    await CometChatCalls.setVideoInputDevice(id);
+  }
+  async selectSpeaker(id: string): Promise<void> {
+    await CometChatCalls.setAudioOutputDevice(id);
+  }
+}
+```
+
+---
+
+## Picker component
+
+```ts
+@Component({
+  selector: "app-device-picker",
+  template: `
+    <form (ngSubmit)="confirm()">
+      <label>Microphone
+        <select [(ngModel)]="selectedMic" name="mic">
+          <option *ngFor="let d of mics$ | async" [value]="d.id">
+            {{ d.label || ('Mic ' + d.id.substring(0, 6)) }}
+          </option>
+        </select>
+      </label>
+      <!-- camera + speaker selects same pattern -->
+      <button type="submit">Join call</button>
+    </form>
+  `,
+})
+export class DevicePickerComponent implements OnInit {
+  mics$ = this.devices.mics$;
+  cameras$ = this.devices.cameras$;
+  speakers$ = this.devices.speakers$;
+  selectedMic = "";
+  selectedCamera = "";
+  selectedSpeaker = "";
+
+  constructor(private devices: CallDevicesService) {}
+
+  async ngOnInit() {
+    await this.devices.ensurePermission();
+    await this.devices.refresh();
+  }
+
+  async confirm() {
+    if (this.selectedMic) await this.devices.selectMic(this.selectedMic);
+    if (this.selectedCamera) await this.devices.selectCamera(this.selectedCamera);
+    if (this.selectedSpeaker) await this.devices.selectSpeaker(this.selectedSpeaker);
+  }
+}
+```
+
+---
+
+## Anti-patterns
+
+Web sister rules apply, plus Angular-specific:
+
+1. **No `NgZone.run` wrap on `onAudioModesUpdated`.** BehaviorSubject emits but UI doesn't update with OnPush.
+2. **Service NOT provided in `root`.** Lazy-loaded → device events miss.
+3. **`async pipe` not used.** Manual `subscribe` without `unsubscribe` leaks.
+
+---
+
+## Verification checklist
+
+- [ ] `CallDevicesService` provided in root
+- [ ] `NgZone.run` wraps the device-update event
+- [ ] Picker uses `async` pipe (not manual subscribe)
+- [ ] `ensurePermission()` called before `refresh()` (empty-label fix)
+- [ ] Browser smoke: plug/unplug headphones during call → list updates
+- [ ] Safari smoke: speaker picker hidden (Safari limitation)
+
+---
+
+## Pointers
+
+- `cometchat-react-calls/references/device-management.md` — sister web reference
+- `cometchat-angular-calls` SKILL.md
+- `references/ngzone-and-async-callbacks.md` — NgZone primer
+- Canonical docs: https://www.cometchat.com/docs/calls/javascript/device-management