[RealtimeKit] Add how-to page explaining participant management in a session

src/content/docs/realtime/realtimekit/core/end-a-session.mdx

@@ -3,7 +3,7 @@ pcx_content_type: how-to
 title: End a session
 slug: realtime/realtimekit/core/end-a-session
 sidebar:
-  order: 6
+  order: 7
 ---
 
 import { Render } from "~/components";

src/content/docs/realtime/realtimekit/core/manage-other-participants-in-a-session.mdx

@@ -0,0 +1,245 @@
+---
+title: Manage other participants in a session
+pcx_content_type: how-to
+slug: realtime/realtimekit/core/manage-other-participants-in-a-session
+sidebar:
+  order: 6
+---
+
+import { Render } from "~/components";
+import RTKSDKSelector from "~/components/realtimekit/RTKSDKSelector/RTKSDKSelector.astro";
+import RTKCodeSnippet from "~/components/realtimekit/RTKCodeSnippet/RTKCodeSnippet.astro";
+
+Use RealtimeKit host controls to manage other participants in a live session. You can mute audio or video, pin a participant, or remove participants from the session.
+These actions require specific host control permissions enabled in the local participant's [Preset](/realtime/realtimekit/concepts/preset/).
+Before you show UI controls or call these methods, verify that the local participant has the necessary permissions.
+In this guide, the **local participant** refers to the user performing the actions.
+
+<RTKSDKSelector />
+
+## Before you start
+
+### Prerequisites
+
+- The local participant (for example, a host or moderator) must have the required **Host Controls** permissions enabled in their preset. For details, refer to [Preset](/realtime/realtimekit/concepts/preset/).
+
+### Select a remote participant
+
+<RTKCodeSnippet id="web-react">
+	<Render
+		file="realtimekit/web/select-a-remote-participant"
+		product="realtime"
+	/>
+</RTKCodeSnippet>
+
+<RTKCodeSnippet id="web-web-components">
+	<Render
+		file="realtimekit/web/select-a-remote-participant"
+		product="realtime"
+	/>
+</RTKCodeSnippet>
+
+<RTKCodeSnippet id="web-angular">
+	<Render
+		file="realtimekit/web/select-a-remote-participant"
+		product="realtime"
+	/>
+</RTKCodeSnippet>
+
+## Mute audio
+
+Mute audio of participants when you need to manage background noise, moderate a classroom or webinar, or prevent interruptions during a session.
+This action requires the **Mute Audio** (`disable_participant_audio`) host control permission enabled in the local participant's preset.
+
+### Mute a participant
+
+To mute a specific participant's audio:
+
+<RTKCodeSnippet id="web-react">
+	<Render file="realtimekit/web/mute-participant-steps" product="realtime" />
+</RTKCodeSnippet>
+
+<RTKCodeSnippet id="web-web-components">
+	<Render file="realtimekit/web/mute-participant-steps" product="realtime" />
+</RTKCodeSnippet>
+
+<RTKCodeSnippet id="web-angular">
+	<Render file="realtimekit/web/mute-participant-steps" product="realtime" />
+</RTKCodeSnippet>
+
+### Mute all participants
+
+This affects all participants, including the local participant. To mute audio for all participants in the session:
+
+<RTKCodeSnippet id="web-react">
+	<Render
+		file="realtimekit/web/mute-all-participants-steps"
+		product="realtime"
+	/>
+</RTKCodeSnippet>
+
+<RTKCodeSnippet id="web-web-components">
+	<Render
+		file="realtimekit/web/mute-all-participants-steps"
+		product="realtime"
+	/>
+</RTKCodeSnippet>
+
+<RTKCodeSnippet id="web-angular">
+	<Render
+		file="realtimekit/web/mute-all-participants-steps"
+		product="realtime"
+	/>
+</RTKCodeSnippet>
+
+## Disable video
+
+Disable video of participants when you need to moderate a session, enforce privacy, or prevent unwanted video during a classroom or webinar.
+This action requires the **Mute Video** (`disable_participant_video`) host control permission enabled in the local participant's preset.
+
+### Disable video for a participant
+
+To disable a specific participant's video:
+
+<RTKCodeSnippet id="web-react">
+	<Render
+		file="realtimekit/web/disable-participant-video-steps"
+		product="realtime"
+	/>
+</RTKCodeSnippet>
+
+<RTKCodeSnippet id="web-web-components">
+	<Render
+		file="realtimekit/web/disable-participant-video-steps"
+		product="realtime"
+	/>
+</RTKCodeSnippet>
+
+<RTKCodeSnippet id="web-angular">
+	<Render
+		file="realtimekit/web/disable-participant-video-steps"
+		product="realtime"
+	/>
+</RTKCodeSnippet>
+
+### Disable video for all participants
+
+This affects all participants, including the local participant. To disable video for all participants in the session:
+
+<RTKCodeSnippet id="web-react">
+	<Render
+		file="realtimekit/web/disable-all-participants-video-steps"
+		product="realtime"
+	/>
+</RTKCodeSnippet>
+
+<RTKCodeSnippet id="web-web-components">
+	<Render
+		file="realtimekit/web/disable-all-participants-video-steps"
+		product="realtime"
+	/>
+</RTKCodeSnippet>
+
+<RTKCodeSnippet id="web-angular">
+	<Render
+		file="realtimekit/web/disable-all-participants-video-steps"
+		product="realtime"
+	/>
+</RTKCodeSnippet>
+
+## Pin participants
+
+Pin a participant to highlight them, such as a webinar presenter or classroom teacher. This is a session-wide action. All participants will see the pinned participant as the focus.
+This action requires the **Pin Participant** (`pin_participant`) host control permission enabled in the local participant's preset.
+
+:::note
+Only one participant can be pinned at a time. Pinning a new participant automatically unpins the previous one.
+:::
+
+### Pin a participant
+
+To pin a participant in a session:
+
+<RTKCodeSnippet id="web-react">
+	<Render file="realtimekit/web/pin-participant-steps" product="realtime" />
+</RTKCodeSnippet>
+
+<RTKCodeSnippet id="web-web-components">
+	<Render file="realtimekit/web/pin-participant-steps" product="realtime" />
+</RTKCodeSnippet>
+
+<RTKCodeSnippet id="web-angular">
+	<Render file="realtimekit/web/pin-participant-steps" product="realtime" />
+</RTKCodeSnippet>
+
+### Unpin a participant
+
+Unpin a participant when you need to undo the highlight and return the session to a standard grid or active speaker view.
+To unpin a pinned participant in a session:
+
+<RTKCodeSnippet id="web-react">
+	<Render file="realtimekit/web/unpin-participant-steps" product="realtime" />
+</RTKCodeSnippet>
+
+<RTKCodeSnippet id="web-web-components">
+	<Render file="realtimekit/web/unpin-participant-steps" product="realtime" />
+</RTKCodeSnippet>
+
+<RTKCodeSnippet id="web-angular">
+	<Render file="realtimekit/web/unpin-participant-steps" product="realtime" />
+</RTKCodeSnippet>
+
+## Remove participants
+
+Remove participants from the session when you need to moderate disruptive behavior or enforce session rules.
+This action requires the **Kick Participants** (`kick_participant`) host control permission enabled in the local participant's preset.
+
+### Remove a participant
+
+To remove a specific participant from the session:
+
+<RTKCodeSnippet id="web-react">
+	<Render file="realtimekit/web/remove-participant-steps" product="realtime" />
+</RTKCodeSnippet>
+
+<RTKCodeSnippet id="web-web-components">
+	<Render file="realtimekit/web/remove-participant-steps" product="realtime" />
+</RTKCodeSnippet>
+
+<RTKCodeSnippet id="web-angular">
+	<Render file="realtimekit/web/remove-participant-steps" product="realtime" />
+</RTKCodeSnippet>
+
+### Remove all participants
+
+This removes everyone from the session, including the local participant. This ends the session for everyone.
+
+For a complete end-a-session flow, refer to [End a session](/realtime/realtimekit/core/end-a-session/).
+
+To remove all participants from the session:
+
+<RTKCodeSnippet id="web-react">
+	<Render
+		file="realtimekit/web/remove-all-participants-steps"
+		product="realtime"
+	/>
+</RTKCodeSnippet>
+
+<RTKCodeSnippet id="web-web-components">
+	<Render
+		file="realtimekit/web/remove-all-participants-steps"
+		product="realtime"
+	/>
+</RTKCodeSnippet>
+
+<RTKCodeSnippet id="web-angular">
+	<Render
+		file="realtimekit/web/remove-all-participants-steps"
+		product="realtime"
+	/>
+</RTKCodeSnippet>
+
+## Next steps
+
+- Review how presets control permissions in [Preset](/realtime/realtimekit/concepts/preset/).
+- Review error handling details in [Error Codes](/realtime/realtimekit/core/error-codes/).

src/content/docs/realtime/realtimekit/core/stage-management.mdx

@@ -3,7 +3,7 @@ pcx_content_type: navigation
 title: Stage Management
 slug: realtime/realtimekit/core/stage-management
 sidebar:
-  order: 8
+  order: 9
 ---
 
 import { Tabs, TabItem } from "~/components";

src/content/docs/realtime/realtimekit/core/waiting-room.mdx

@@ -3,7 +3,7 @@ pcx_content_type: navigation
 title: Waiting Room
 slug: realtime/realtimekit/core/waiting-room
 sidebar:
-  order: 7
+  order: 8
 ---
 
 import { Tabs, TabItem } from "~/components";

src/content/partials/realtime/realtimekit/web/disable-all-participants-video-steps.mdx

@@ -0,0 +1,61 @@
+---
+{}
+---
+
+import { Steps } from "~/components";
+
+<Steps>
+
+1. Check that the local participant has permission to disable other participants' video.
+
+   ```ts
+   const canDisableVideo =
+   	meeting.self.permissions.canDisableParticipantVideo === true;
+   if (!canDisableVideo) {
+   	// Disable the control in your UI.
+   }
+   ```
+
+2. Call `disableAllVideo()`.
+
+   If the local participant does not have the required permission, `disableAllVideo()` throws a `ClientError` with code `1201`.
+
+   ```ts
+   try {
+   	await meeting.participants.disableAllVideo();
+   } catch (err: any) {
+   	if (err?.code === 1201) {
+   		// The local participant does not have permission to disable other participants’ video.
+   		return;
+   	}
+   	throw err;
+   }
+   ```
+
+3. Handle the result by listening for updates.
+
+   After the call succeeds, each participant’s `videoEnabled` becomes `false`, and the SDK emits a `videoUpdate` event.
+   The local participant also receives `videoUpdate` on `meeting.self`.
+
+   Listen to remote participant updates on the `joined` map:
+
+   ```ts
+   meeting.participants.joined.on(
+   	"videoUpdate",
+   	(participant, { videoEnabled, videoTrack }) => {
+   		// videoEnabled is false
+   		// Update UI for the participant
+   	},
+   );
+   ```
+
+   Listen to local participant update on `meeting.self`:
+
+   ```ts
+   meeting.self.on("videoUpdate", ({ videoEnabled, videoTrack }) => {
+   	// videoEnabled is false
+   	// Update UI for the local participant
+   });
+   ```
+
+</Steps>

src/content/partials/realtime/realtimekit/web/disable-participant-video-steps.mdx

@@ -0,0 +1,60 @@
+---
+{}
+---
+
+import { Steps } from "~/components";
+
+<Steps>
+
+1. Check that the local participant has permission to disable other participants' video.
+
+   ```ts
+   const canDisableVideo =
+   	meeting.self.permissions.canDisableParticipantVideo === true;
+   if (!canDisableVideo) {
+   	// Disable the control in your UI.
+   }
+   ```
+
+2. Call `disableVideo()` on the target participant.
+
+   If the local participant does not have the required permission, `disableVideo()` throws a `ClientError` with code `1201`.
+
+   ```ts
+   try {
+   	await participant.disableVideo();
+   } catch (err: any) {
+   	if (err?.code === 1201) {
+   		// The local participant does not have permission to disable other participants’ video.
+   		return;
+   	}
+   	throw err;
+   }
+   ```
+
+3. Handle the result by listening for updates.
+
+   After the call succeeds, the target participant's `videoEnabled` becomes `false`, and the SDK emits a `videoUpdate` event.
+
+   **Option A**: Listen on the participant object
+
+   ```ts
+   participant.on("videoUpdate", ({ videoEnabled, videoTrack }) => {
+   	// videoEnabled is false
+   	// Update UI for the participant
+   });
+   ```
+
+   **Option B**: Listen on the `joined` map
+
+   ```ts
+   meeting.participants.joined.on(
+   	"videoUpdate",
+   	(participant, { videoEnabled, videoTrack }) => {
+   		// videoEnabled is false
+   		// Update UI for the participant
+   	},
+   );
+   ```
+
+</Steps>