backmerge: main to qa

CLAUDE.md

@@ -0,0 +1,224 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+This is the documentation site for 100ms.live, built as a Next.js application that renders MDX files into interactive documentation. The site runs on port 4000 by default and uses a file-based routing system where MDX files in the `/docs` directory automatically generate pages.
+
+**Base Path:** All routes are served under `/docs` prefix (configured in [next.config.js:10](next.config.js#L10))
+
+## Development Commands
+
+**Local Development:**
+```bash
+yarn dev          # Start dev server on port 4000
+yarn id           # Shortcut for yarn && yarn dev
+```
+
+**Building:**
+```bash
+yarn build        # Updates releases, builds Next.js, and generates search index
+yarn updatereleases  # Must run before viewing local release version changes
+```
+
+**Code Quality:**
+```bash
+yarn lint         # Lint components and lib files
+yarn format       # Format code with Prettier
+```
+
+**Documentation Linting (Vale):**
+```bash
+brew install vale
+vale sync
+vale docs/*
+```
+
+Add whitelisted tokens to [.github/workflows/styles/Vocab/HMSVocab/accept.txt](.github/workflows/styles/Vocab/HMSVocab/accept.txt)
+
+**Build Artifacts:**
+- Post-build generates sitemap via `next-sitemap` (configured in [next-sitemap.js](next-sitemap.js))
+- Search index is generated by [searchIndex.js](searchIndex.js) which calls `updateIndex()` from [lib/algolia/getRecords.ts](lib/algolia/getRecords.ts)
+
+## Architecture
+
+### Documentation Structure
+
+**File System Routing:**
+- All docs are MDX files in `/docs` directory, organized by platform:
+  - `/docs/android/` - Android SDK docs
+  - `/docs/ios/` - iOS SDK docs
+  - `/docs/javascript/` - JavaScript SDK docs
+  - `/docs/flutter/` - Flutter SDK docs
+  - `/docs/react-native/` - React Native SDK docs
+  - `/docs/server-side/` - Server-side API docs
+  - `/docs/prebuilt/` - Prebuilt UI docs
+  - `/docs/get-started/` - Getting started guides
+  - `/docs/api-reference/` - API reference docs
+
+**MDX Processing Pipeline:**
+The main routing is handled by [pages/[...slug].tsx](pages/[...slug].tsx):
+1. **Static Generation:** Uses `getStaticPaths()` to find all MDX files via [lib/mdxUtils.ts](lib/mdxUtils.ts)
+2. **Content Bundling:** Uses `mdx-bundler` to compile MDX with plugins
+3. **Rendering:** MDX components defined in [components/MDXComponents.tsx](components/MDXComponents.tsx)
+
+**Remark/Rehype Plugin Chain:**
+- `imagePlugin` - Custom image handling
+- `remarkGfm` - GitHub Flavored Markdown
+- `remarkA11yEmoji` - Accessible emoji
+- `remarkCodeHeader` - Code block headers
+- `withTableofContents` - TOC generation
+- `rehypeRaw` - Raw HTML support
+- `mdxPrism` - Syntax highlighting
+
+### FrontMatter Requirements
+
+Every MDX file must include:
+```yaml
+---
+title: Page Title          # Used for SEO and page heading
+nav: 14                    # Sidebar ordering (can be decimal for insertion)
+---
+```
+
+**Note:** If no `nav` value is specified, it defaults to `Infinity` (appears at the end)
+
+### Navigation System
+
+Navigation is auto-generated from the file system:
+- [lib/mdxUtils.ts](lib/mdxUtils.ts) scans all MDX files
+- `getAllDocs()` extracts frontmatter (title, nav, description)
+- `getNavfromDocs()` builds nested navigation structure using dot notation
+- Sidebar ordering controlled by `nav` frontmatter value
+
+### Custom Components
+
+MDX files have access to auto-imported components from [components/MDXComponents.tsx](components/MDXComponents.tsx):
+
+**Note Components:**
+```mdx
+> Default note (uses blockquote)
+
+<Note type='success'>Success message</Note>
+<Note type='error'>Error message</Note>
+<Note type='warning'>Warning message</Note>
+```
+
+**Tabs:**
+```mdx
+<Tabs id="quality-level" items={['Java', 'Kotlin']} />
+<Tab id='quality-level-0'>
+Java code here
+</Tab>
+<Tab id='quality-level-1'>
+Kotlin code here
+</Tab>
+```
+**Important:** Tab IDs must match the Tabs `id` with index suffix
+
+**Other Components:**
+- `<Codesandbox id="ue1k4" />` - Embed CodeSandbox
+- `<Code />` - Automatic code wrapper with copy button
+- API request components: `<BaseRequest>`, `<GetRequest>`, `<PostRequest>`, `<DeleteRequest>`, `<EndpointRequest>`
+- Layout components: `<FlexContainer>`, `<CollapsibleRoot>`, `<CollapsiblePreview>`, `<CollapsibleContent>`, `<StepsContainer>`, `<StepsToc>`
+
+### Content Reuse
+
+To avoid duplicating common content:
+1. Create a file in `/common` directory (`.md` or `.mdx`)
+   - Use `.md` for plain Markdown
+   - Use `.mdx` if embedding JSX (escape `<>{}` with backslash or use backticks)
+2. Import as PascalCase: `import Test from '@/common/test.md'`
+3. Use in MDX: `<Test />`
+
+### Version Management
+
+Release versions are tracked in [releases.js](releases.js) and automatically updated:
+- `yarn updatereleases` scans `/docs` for latest version numbers
+- Uses [lib/getNewReleases.js](lib/getNewReleases.js) to extract versions from release note files
+- Updates `releases.js` with platform versions and dates
+
+### Redirects
+
+Extensive redirect configuration in [next.config.js](next.config.js):
+- **Rewrites** (lines 33-56): URL normalization for case-sensitive paths
+- **Redirects** (lines 57-1550): Legacy URL redirects, doc reorganization redirects
+- Pattern: Old doc structure redirected to new `how-to-guides` organization
+
+**Key redirect patterns:**
+- `/concepts/` → `/get-started/`
+- Platform-specific `/:platform/v2/guides:path` → `/:platform/v2/get-started:path`
+- Feature docs reorganized under `how-to-guides` with categorization
+
+### Algolia Search
+
+Search powered by Algolia:
+- Index built during `yarn build` via [searchIndex.js](searchIndex.js)
+- Implementation in [lib/algolia/](lib/algolia/)
+- Search UI components in [components/](components/)
+
+## File Naming Conventions
+
+**DO:**
+- Use kebab-case for filenames: `my-feature.mdx`
+- Keep titles in frontmatter, not filename
+
+**DON'T:**
+- Use decimal numbers in filenames: ~~`v-1.3.2.mdx`~~ (use frontmatter `title` instead)
+- Use ampersands: ~~`tips-&-tricks.mdx`~~ (breaks sitemap generation)
+- Use bold in headers: ~~`## **Don't**~~
+- Use emojis in filenames (but DO use them in content!)
+
+## Adding New Documentation
+
+### To Existing Section
+1. Create MDX file in appropriate `/docs/[platform]/` subdirectory
+2. Add frontmatter with `title` and `nav` value
+3. Folder names become section headers (capitalized, hyphens → spaces)
+
+### New Documentation Version
+To add a new version (e.g., `v3`):
+1. Create `/docs/v3` folder
+2. Create `/pages/v3/index.tsx` with redirect:
+   ```tsx
+   import redirect from '@/lib/redirect';
+   export default redirect('/v3/100ms-v3/basics');
+   ```
+3. Add MDX files following existing structure
+
+## Build Configuration
+
+**Node Version:** `^22` (specified in [package.json:36](package.json#L36))
+
+**Key Dependencies:**
+- `next@12.3.4` - Next.js framework
+- `mdx-bundler@^9.2.1` - MDX compilation
+- `@100mslive/react-ui` & `@100mslive/react-icons` - 100ms UI library
+- `algoliasearch` - Search functionality
+- `shiki` - Syntax highlighting
+
+**Webpack Config:**
+- Raw loader for `.md` files (allows importing as strings)
+- ESM externals set to 'loose' for compatibility
+
+## Styling
+
+All styles use CSS variables (tokens) defined in [styles/theme.css](styles/theme.css):
+- Tokens prefixed with `token` control syntax highlighting
+- Fully customizable theme via CSS variables
+- No CSS-in-JS, plain CSS with variables
+
+## Content Guidelines
+
+From [README.md](README.md):
+
+**DO:**
+- Use emojis in content
+- Maintain header hierarchy (H1 → H2 → H3)
+- Add language attributes to code blocks for syntax highlighting
+- Use https://tableconvert.com/ for Markdown tables
+
+**DON'T:**
+- Use bold in headers
+- Use decimal numbers in filenames

docs/android/v2/how-to-guides/captions/live-captions.mdx

@@ -1,5 +1,5 @@
 ---
-title:  Live Transcription for Conferencing (Closed Captions - Beta)
+title: Live Transcription for Conferencing (Closed Captions)
 nav: 15.1
 ---
 
@@ -10,6 +10,7 @@ nav: 15.1
 -   Minimum 100ms SDK version required is `2.9.54`
 
 ## Checking if captions are enabled in a room.
+
 To check if WebRTC (not hls) captions are enabled in a room. Look for any transcriptions being in a started state in the room data.
 `val captionsEnabled = hmsSDK.getRoom()?.transcriptions?.find { it.state == TranscriptionState.STARTED } != null`
 
@@ -20,12 +21,13 @@ Implement `fun onTranscripts(transcripts: HmsTranscripts)` in the `HMSUpdateList
 For an example implementation look at [`TranscriptionUseCase.kt`](https://github.com/100mslive/100ms-android/blob/ac66fa76503ec990322c293f8ce6a504c0c3c444/room-kit/src/main/java/live/hms/roomkit/ui/meeting/TranscriptionUseCase.kt#L44) in the 100ms-android [sample app](https://github.com/100mslive/100ms-android/blob/ac66fa76503ec990322c293f8ce6a504c0c3c444/room-kit/src/main/java/live/hms/roomkit/ui/meeting/TranscriptionUseCase.kt#L44) repository.
 
 ## Toggling Live Transcripts
+
 To save on cost, live transcriptions can be disabled for everyone at runtime and toggled on again when required.
 
 ```kotlin
 // Start Real Time Transcription
 hmsSDK.startRealTimeTranscription(
-    
+
     TranscriptionsMode.CAPTION,
 
     object : HMSActionResultListener {
@@ -40,9 +42,9 @@ hmsSDK.startRealTimeTranscription(
 hmsSDK.stopRealTimeTranscription(
 
     TranscriptionsMode.CAPTION,
-    
+
     object : HMSActionResultListener {
         override fun onError(error: HMSException) {}
         override fun onSuccess() {}
 })
-```
+```

docs/android/v2/how-to-guides/interact-with-room/room/spotlight.mdx

@@ -0,0 +1,85 @@
+---
+title: Spotlight
+nav: 10.25
+---
+
+Spotlight lets you bring a particular peer's video to center stage for everyone in the room. It uses the [Session Store](/android/v2/how-to-guides/interact-with-room/room/session-store) — a shared key-value store synced across all peers.
+
+When a host spotlights someone, every participant in the room sees that peer in a focused/pinned view.
+
+## Prerequisites
+
+- User must be joined to the room
+- Session Store must be available (provided via `onSessionStoreAvailable` callback)
+
+## Setting a Spotlight
+
+Write the peer's video `trackId` to the `"spotlight"` key in Session Store:
+
+```kotlin
+// Save the session store reference when it becomes available
+var hmsSessionStore: HmsSessionStore? = null
+
+override fun onSessionStoreAvailable(sessionStore: HmsSessionStore) {
+    hmsSessionStore = sessionStore
+}
+
+// Spotlight a peer's video track for everyone
+fun spotlightTrack(trackId: String) {
+    hmsSessionStore?.set(trackId, "spotlight", object : HMSActionResultListener {
+        override fun onSuccess() { }
+        override fun onError(error: HMSException) { }
+    })
+}
+```
+
+## Removing a Spotlight
+
+Set the `"spotlight"` key to `null`:
+
+```kotlin
+fun removeSpotlight() {
+    hmsSessionStore?.set(null, "spotlight", object : HMSActionResultListener {
+        override fun onSuccess() { }
+        override fun onError(error: HMSException) { }
+    })
+}
+```
+
+## Listening for Spotlight Changes
+
+Register a key change listener for the `"spotlight"` key. This fires for all peers in the room, including the one who set the spotlight.
+
+```kotlin
+sessionStore.addKeyChangeListener(
+    listOf("spotlight"),
+    object : HMSKeyChangeListener {
+        override fun onKeyChanged(key: String, value: JsonElement?) {
+            if (key == "spotlight") {
+                val trackId = value?.asString
+                if (trackId != null) {
+                    // A track has been spotlighted — find and display it
+                    showSpotlightView(trackId)
+                } else {
+                    // Spotlight removed — return to default view
+                    showDefaultView()
+                }
+            }
+        }
+    },
+    object : HMSActionResultListener {
+        override fun onSuccess() { }
+        override fun onError(error: HMSException) { }
+    }
+)
+```
+
+## Role-Gating
+
+You may want to restrict spotlight to host/moderator roles only. Check an appropriate permission before showing the spotlight option:
+
+```kotlin
+fun isAllowedToSpotlight(): Boolean {
+    return hmsSDK.getLocalPeer()?.hmsRole?.permission?.changeRole == true
+}
+```