@cometchat/skills 4.2.1 → 4.4.0

package/skills/cometchat-angular-calls/references/recording-screen-share.md

@@ -15,12 +15,14 @@ import { CometChatCalls } from "@cometchat/calls-sdk-javascript";
 @Injectable({ providedIn: "root" })
 export class CallService {
   buildSettings(sessionId: string, opts: { recording?: boolean; isAudioOnly?: boolean }) {
-    return new CometChatCalls.CallSettingsBuilder()
-      .setSessionID(sessionId)
-      .setIsAudioOnly(opts.isAudioOnly ?? false)
-      .enableRecording(opts.recording ?? false)
-      .setShowRecordingButton(opts.recording ?? false)
-      .build();
+    // SessionSettings OBJECT for joinSession(token, settings, container). These are
+    // object fields — NOT CallSettingsBuilder methods. On the v5 SDK there is no
+    // setSessionID / setIsAudioOnly / enableRecording / setShowRecordingButton.
+    return {
+      sessionType: (opts.isAudioOnly ?? false) ? "VOICE" : "VIDEO",
+      autoStartRecording: opts.recording ?? false,
+      hideRecordingButton: !(opts.recording ?? false),
+    };
   }
 }
 ```
@@ -59,20 +61,17 @@ In the parent component:
 
 ```ts
 ngOnInit() {
-  const listener = new CometChatCalls.OngoingCallListener({
-    onRecordingStarted: () => {
-      this.zone.run(() => { this.recording = true; this.cd.markForCheck(); });
-    },
-    onRecordingStopped: () => {
-      this.zone.run(() => { this.recording = false; this.cd.markForCheck(); });
-    },
-    onRecordingFailed: (error: { message: string }) => {
-      this.zone.run(() => {
-        this.snackBar.open(`Recording failed: ${error.message}`, "Dismiss", { duration: 5000 });
-      });
-    },
+  // v5 uses the static event bus; addEventListener returns an unsubscribe fn.
+  const offStarted = CometChatCalls.addEventListener("onRecordingStarted", () => {
+    this.zone.run(() => { this.recording = true; this.cd.markForCheck(); });
   });
-  // ... build settings, startSession ...
+  const offStopped = CometChatCalls.addEventListener("onRecordingStopped", () => {
+    this.zone.run(() => { this.recording = false; this.cd.markForCheck(); });
+  });
+  // Clean up in ngOnDestroy: offStarted(); offStopped();
+  // NOTE: there is no onRecordingFailed event/callback in v5 — surface plan/quota
+  // errors from the joinSession promise rejection instead.
+  // ... build settings, joinSession ...
 }
 ```
 
@@ -105,12 +104,12 @@ export class ScreenShareButtonComponent {
   async onClick() {
     if (!this.supported) return;
     if (this.sharing) {
-      await CometChatCalls.endScreenShare();
+      CometChatCalls.stopScreenSharing();   // sync, void — not awaitable
       this.sharing = false;
       this.shareEnded.emit();
     } else {
       try {
-        await CometChatCalls.startScreenShare();
+        CometChatCalls.startScreenSharing();  // sync, void
         this.sharing = true;
         this.shareStarted.emit();
       } catch (err) {
@@ -156,23 +155,17 @@ export class ScreenShareViewComponent implements AfterViewInit {
 Listen for screen-share events at the parent component level and pass the stream down:
 
 ```ts
+// ⚠️ v5 bus callbacks take NO arguments — they're notifications, not stream
+// handoffs. The SDK renders the presenter's screen as a tile in its own layout;
+// you don't receive a MediaStream to attach yourself (that was the v4 model).
 ngOnInit() {
-  const listener = new CometChatCalls.OngoingCallListener({
-    onScreenShareStarted: (presenterUid: string, stream: MediaStream) => {
-      this.zone.run(() => {
-        this.screenSharePresenterUid = presenterUid;
-        this.screenShareStream = stream;
-        this.cd.markForCheck();
-      });
-    },
-    onScreenShareEnded: () => {
-      this.zone.run(() => {
-        this.screenSharePresenterUid = null;
-        this.screenShareStream = null;
-        this.cd.markForCheck();
-      });
-    },
+  const offStart = CometChatCalls.addEventListener("onScreenShareStarted", () => {
+    this.zone.run(() => { this.someoneSharing = true; this.cd.markForCheck(); });
+  });
+  const offStop = CometChatCalls.addEventListener("onScreenShareStopped", () => {
+    this.zone.run(() => { this.someoneSharing = false; this.cd.markForCheck(); });
   });
+  // Clean up in ngOnDestroy: offStart(); offStop();
 }
 ```
 
@@ -236,7 +229,7 @@ The skill scaffolds this proxy layer for projects with a backend; for serverless
 
 ## Anti-patterns
 
-1. **Calling `startScreenShare()` from a non-click handler.** Browsers reject — must be in a user-gesture stack. `(click)` works; `ngOnInit` doesn't.
+1. **Calling `startScreenSharing()` from a non-click handler.** Browsers reject — must be in a user-gesture stack. `(click)` works; `ngOnInit` doesn't.
 2. **No NgZone wrap on `onRecordingStarted` / `onScreenShareStarted`.** UI doesn't update.
 3. **Hardcoding the dashboard bearer token in `environment.ts`** to fetch recordings. Wrong — bearer is server-only. Always proxy.
 4. **No "REC" indicator.** Compliance violation.
@@ -247,12 +240,12 @@ The skill scaffolds this proxy layer for projects with a backend; for serverless
 
 ## Verification checklist
 
-- [ ] `enableRecording(true)` opt-in via parent input (not always-on)
+- [ ] `autoStartRecording: true` (SessionSettings object field) opt-in via parent input (not always-on)
 - [ ] REC indicator visible to all participants when active
 - [ ] Recording lifecycle handlers wrapped in `NgZone.run` + `cd.markForCheck()`
 - [ ] Screen-share button feature-detects `getDisplayMedia`
 - [ ] Screen-share button triggered from `(click)`, not `ngOnInit`
-- [ ] `onScreenShareStarted` / `onScreenShareEnded` wrapped in NgZone
+- [ ] `onScreenShareStarted` / `onScreenShareStopped` wrapped in NgZone
 - [ ] Layout swap renders screen-share view + thumbnail strip
 - [ ] `trackBy` on `*ngFor` for participant tiles
 - [ ] Recordings retrieved via server-side proxy, NOT direct dashboard API call from Angular

package/skills/cometchat-angular-calls/references/ringing-integration.md

@@ -4,6 +4,8 @@ Same SDK API as web. Angular-specific deltas: NgZone-wrapped listener callbacks,
 
 **Read first:** `cometchat-react-calls/references/ringing-integration.md` — full architecture, hard rules, anti-patterns.
 
+> ⚠️ **Testing ringing needs TWO ISOLATED browser contexts — not two tabs.** The Chat SDK keeps **one session per origin** (login persists in IndexedDB/localStorage keyed by `appId`, one WebSocket shared across all tabs). Two tabs of the same browser can't hold two different logins — the second overwrites the shared session, so there's no independent callee and `onIncomingCallReceived` never fires (the classic "Accept never appears"). Use a normal window for the caller + an **Incognito/private window** (or a different browser, or a second device) for the callee. *(Session/meeting mode — both sides `joinSession` a shared id — works fine in two same-browser tabs; only ringing needs isolated contexts.)*
+
 ---
 
 ## CallSignalingService
@@ -119,7 +121,7 @@ Web sister rules apply, plus Angular-specific:
 - [ ] All callbacks wrapped in `NgZone.run`
 - [ ] `IncomingCallComponent` mounted in `app.component.html`, not a route
 - [ ] `removeCallListener` in `ngOnDestroy`
-- [ ] Smoke: 2 tabs, caller initiates, recipient sees alertdialog, accept opens session
+- [ ] Smoke: **two ISOLATED browser contexts** (normal + Incognito window, or two browsers/devices — NOT two tabs of one browser; the Chat SDK is a single shared session per origin), caller initiates, recipient sees alertdialog, accept opens session
 
 ---
 

package/skills/cometchat-angular-calls/references/share-invite.md

@@ -25,8 +25,8 @@ export class ShareInviteService {
 
   bind(sessionId: string): () => void {
     const handler = () => this.zone.run(() => this.share(sessionId));
-    CometChatCalls.addEventListener("onShareInviteButtonClicked", handler);
-    return () => CometChatCalls.removeEventListener("onShareInviteButtonClicked", handler);
+    // addEventListener returns its own unsubscribe fn — there is no removeEventListener.
+    return CometChatCalls.addEventListener("onShareInviteButtonClicked", handler);
   }
 
   async share(sessionId: string): Promise<void> {
@@ -80,10 +80,16 @@ export class CallComponent implements OnInit, OnDestroy {
 
 ## Pass the kit setting
 
+The share-invite button visibility is a **`SessionSettings` object field** (`hideShareInviteButton`)
+passed to `joinSession` — there is NO `setHideShareInviteButton` builder method.
+
 ```ts
-const callSettings = new CallSettingsBuilder()
-  .setHideShareInviteButton(false)
-  .build();
+const sessionSettings = {
+  sessionType: "VIDEO",
+  hideShareInviteButton: false,   // default false; set true to hide the kit's own button
+} as const;
+
+await CometChatCalls.joinSession(callToken, sessionSettings, container);
 ```
 
 ---

package/skills/cometchat-angular-calls/references/virtual-background.md

@@ -0,0 +1,29 @@
+# Virtual Background (Angular)
+
+Angular calls run on the same `@cometchat/calls-sdk-javascript@5` as React — reached via the kit's `CometChatUIKitCalls` alias (exported from `@cometchat/chat-uikit-angular`). Web supports virtual background; native iOS/Android do not.
+
+## A. Built-in setting (recommended)
+
+Turn on the kit's own Virtual Background control via the call settings builder — it renders the blur/image/clear picker inside the call UI:
+
+```ts
+import { CometChatUIKitCalls } from "@cometchat/chat-uikit-angular";
+
+const settings = new CometChatUIKitCalls.CallSettingsBuilder()
+  .enableDefaultLayout(true)
+  .showVirtualBackgroundSetting(true)   // built-in VB control
+  .build();
+// pass the UNBUILT builder to <cometchat-ongoing-call [callSettingsBuilder]="…"> per §3
+```
+
+## B. Apply programmatically (custom surface)
+
+```ts
+CometChatUIKitCalls.setVirtualBackgroundBlurLevel(50);             // blur 0–100
+CometChatUIKitCalls.setVirtualBackgroundImage("https://…/bg.jpg"); // custom image
+CometChatUIKitCalls.clearVirtualBackground();                       // remove
+```
+
+Run these from a method on your call component (e.g. a toolbar button handler); under OnPush, mutating component state in the handler is fine — use signals for any state you render (see §1.5).
+
+Verified: `CallSettingsBuilder.showVirtualBackgroundSetting(boolean)`, static `setVirtualBackgroundBlurLevel(number)` / `setVirtualBackgroundImage(string)` / `clearVirtualBackground()` (deprecated aliases: `setBackgroundBlur`/`setBackgroundImage`).