Skip to content

Commit 9c288da

Browse files
ishita1805swapnilmadavi
ishita1805
and
swapnilmadavi
authored
fix: allow users to disable platforms in the sdk selector (#27488)
* fix: allow users to disable platforms * fix: types for props * fix: structure and content for core docs (#27516) * fix: remove tabs and add sdk selector * fix: add missing angular snippets * fix: add links * Update src/content/docs/realtime/realtimekit/core/error-codes.mdx Co-authored-by: Swapnil Madavi <30936566+swapnilmadavi@users.noreply.github.com> --------- Co-authored-by: Swapnil Madavi <30936566+swapnilmadavi@users.noreply.github.com> * fix: update links * fix: redirects --------- Co-authored-by: Swapnil Madavi <30936566+swapnilmadavi@users.noreply.github.com>
1 parent 0f65b01 commit 9c288da

32 files changed

+2691
-2047
lines changed

‎public/__redirects‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -339,7 +339,12 @@
339339
/realtime/pricing/ /realtime/sfu/pricing/ 302
340340
/realtime/changelog/ /realtime/sfu/changelog/ 302
341341
/realtime/realtimekit/get-started/ /realtime/realtimekit/quickstart/ 302
342+
/realtime/realtimekit/core/ai/ /realtime/realtimekit/ai/ 302
343+
/realtime/realtimekit/core/remote-participant/ /realtime/realtimekit/core/remote-participants/ 302
342344
/realtime/realtimekit/ui-kit/meeting-lifecycle/ realtime/realtimekit/ui-kit/state-management/ 302
345+
/realtime/realtimekit/core/video-background/ /realtime/realtimekit/core/video-effects/ 302
346+
/realtime/realtimekit/voice-meetings/ /realtime/realtimekit/audio-calls/ 302
347+
/realtime/realtimekit/core/manage-other-participants-in-a-session/ /realtime/realtimekit/core/manage-participants-in-a-session/ 302
343348
/realtime/realtimekit/getting-started/ /realtime/realtimekit/quickstart/ 302
344349
/realtime/introduction/ /realtime/realtimekit/introduction/ 302
345350
/realtime/concepts/ /realtime/realtimekit/concepts/ 302

‎src/components/realtimekit/RTKCodeSnippet/RTKCodeSnippet.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { z } from "astro:schema";
33
import CodeSnippet from "./RTKCodeSnippet";
44
55
const props = z.object({
6-
id: z.string(),
6+
id: z.union([z.string(), z.array(z.string())]),
77
});
88
99
const { id } = props.parse(Astro.props);

‎src/components/realtimekit/RTKCodeSnippet/RTKCodeSnippet.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import type { ReactNode } from "react";
22
import { useFramework } from "../hooks/useFramework";
33

44
interface RTKCodeSnippetProps {
5-
id: string; // e.g. "web-react"
5+
id: string | string[]; // e.g. "web-react" or ["web-react", "web-vue"]
66
children: ReactNode; // MDX content
77
}
88

@@ -12,6 +12,9 @@ export default function RTKCodeSnippet({ id, children }: RTKCodeSnippetProps) {
1212
if (!framework) return null;
1313

1414
const activeId = `${platform}-${framework.id}`;
15+
const ids = Array.isArray(id) ? id : [id];
1516

16-
return <div className={activeId === id ? "" : "hidden"}>{children}</div>;
17+
return (
18+
<div className={ids.includes(activeId) ? "" : "hidden"}>{children}</div>
19+
);
1720
}

‎src/components/realtimekit/RTKSDKSelector/RTKSDKSelector.astro‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,17 @@
11
---
2+
import { z } from "astro:schema";
23
import SDKSelector from "./RTKSDKSelector";
4+
5+
const platform = z.enum(["web", "mobile"]);
6+
7+
const props = z.object({
8+
disabledPlatforms: z
9+
.union([platform, z.array(platform)])
10+
.optional()
11+
.transform((value) => (typeof value === "string" ? [value] : value)),
12+
});
13+
14+
const { disabledPlatforms } = props.parse(Astro.props);
315
---
416

5-
<SDKSelector client:load />
17+
<SDKSelector client:load disabledPlatforms={disabledPlatforms} />

‎src/components/realtimekit/RTKSDKSelector/RTKSDKSelector.tsx‎

Lines changed: 64 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,11 @@ import {
66
mobileFrameworks,
77
} from "../hooks/useFramework";
88

9-
export default function SDKSelector() {
9+
interface SDKSelectorProps {
10+
disabledPlatforms?: Platform[];
11+
}
12+
13+
export default function SDKSelector({ disabledPlatforms }: SDKSelectorProps) {
1014
const { platform, framework, setSelection } = useFramework();
1115

1216
const platforms: {
@@ -28,52 +32,77 @@ export default function SDKSelector() {
2832
[platform],
2933
);
3034

35+
const isPlatformDisabled = (p: Platform) =>
36+
Boolean(disabledPlatforms?.includes(p));
37+
const activePlatformDisabled = isPlatformDisabled(platform);
38+
39+
const disabledPlatformsString = disabledPlatforms?.join(", ");
40+
3141
return (
3242
<>
33-
<div className="my-5 flex flex-col gap-0 rounded-sm bg-blue-50 p-2 dark:bg-neutral-800">
34-
<div className="flex w-full flex-row items-start justify-start gap-2">
35-
{platforms.map((p) => (
36-
<button
37-
type="button"
38-
className={`m-0 ${p.id === platform ? "rounded-t-md bg-white font-semibold text-blue-800 dark:bg-neutral-700 dark:text-blue-100" : "bg-blue-50 text-neutral-800 dark:bg-neutral-800 dark:text-neutral-300"} cursor-pointer px-2 py-1 font-medium`}
39-
onClick={() => {
40-
const nextPlatform = p.id;
41-
const nextFramework =
42-
nextPlatform === "web"
43-
? webFrameworks[0]
44-
: mobileFrameworks[0];
45-
46-
setSelection(nextPlatform, nextFramework);
47-
}}
48-
key={p.id}
49-
>
50-
{p.label}
51-
</button>
52-
))}
43+
{disabledPlatforms && (
44+
<div className="flex flex-row gap-1 rounded-md bg-blue-100 p-2 text-blue-900 dark:bg-neutral-800 dark:text-neutral-300">
45+
This page is not available for the <b>{disabledPlatformsString}</b>
46+
platform.
5347
</div>
54-
{frameworks.length < 1 && (
55-
<div className="m-0 w-full rounded-r-md rounded-b-md bg-white p-4 text-sm text-gray-500 italic dark:bg-neutral-700 dark:text-gray-400">
56-
No frameworks available.
57-
</div>
58-
)}
59-
<div className="m-0 flex w-full flex-row items-center gap-2 rounded-r-md rounded-b-md bg-white p-2 text-gray-500 dark:bg-neutral-700 dark:text-gray-400">
60-
{frameworks.map((fw) => {
61-
const handleClick = () => {
62-
setSelection(platform, fw);
63-
};
48+
)}
49+
<div className="my-5 flex flex-col gap-0 rounded-md bg-blue-100 p-2 dark:bg-neutral-800">
50+
<div className="flex w-full flex-row items-start justify-start gap-2">
51+
{platforms.map((p) => {
52+
const disabled = isPlatformDisabled(p.id);
6453

6554
return (
6655
<button
67-
key={fw.id}
56+
key={p.id}
6857
type="button"
69-
className={`m-0 flex ${framework?.id === fw.id ? "font-semibold text-blue-800 dark:text-blue-100" : ""} text-md cursor-pointer items-center rounded-md bg-white px-3 py-1 font-medium dark:bg-neutral-700`}
70-
onClick={handleClick}
58+
disabled={disabled}
59+
className={`m-0 ${p.id === platform ? "rounded-t-md bg-neutral-50 text-blue-500 dark:bg-neutral-700" : "bg-blue-100 text-neutral-700 dark:bg-neutral-800 dark:text-neutral-300"} ${disabled ? "cursor-not-allowed opacity-50" : ""} px-2 py-1 font-medium`}
60+
onClick={() => {
61+
if (disabled) return;
62+
const nextPlatform = p.id;
63+
const nextFramework =
64+
nextPlatform === "web"
65+
? webFrameworks[0]
66+
: mobileFrameworks[0];
67+
68+
setSelection(nextPlatform, nextFramework);
69+
}}
7170
>
72-
{fw.label}
71+
{p.label}
7372
</button>
7473
);
7574
})}
7675
</div>
76+
{activePlatformDisabled && (
77+
<div className="m-0 w-full rounded-r-md rounded-b-md bg-neutral-50 p-4 text-sm text-gray-700 dark:bg-neutral-700 dark:text-gray-300">
78+
This page is not available for the {platform} platform.
79+
</div>
80+
)}
81+
{!activePlatformDisabled && frameworks.length < 1 && (
82+
<div className="m-0 w-full rounded-r-md rounded-b-md bg-neutral-50 p-4 text-sm text-gray-500 italic dark:bg-neutral-700 dark:text-gray-400">
83+
No frameworks available.
84+
</div>
85+
)}
86+
{!activePlatformDisabled && (
87+
<div className="m-0 flex w-full flex-row items-center gap-2 rounded-r-md rounded-b-md bg-neutral-50 p-2 text-gray-500 dark:bg-neutral-700 dark:text-gray-400">
88+
{frameworks.map((fw) => {
89+
const handleClick = () => {
90+
setSelection(platform, fw);
91+
};
92+
93+
return (
94+
<button
95+
key={fw.id}
96+
type="button"
97+
className={`m-0 flex ${framework?.id === fw.id ? "text-blue-500 italic" : ""} text-md cursor-pointer items-center rounded-md bg-neutral-50 px-3 py-1 font-medium dark:bg-neutral-700`}
98+
onClick={handleClick}
99+
>
100+
{fw.label}
101+
</button>
102+
);
103+
})}
104+
</div>
105+
)}
77106
</div>
78107
</>
79108
);

src/content/docs/realtime/realtimekit/core/ai.mdx renamed to src/content/docs/realtime/realtimekit/ai.mdx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
---
22
pcx_content_type: how-to
33
title: AI (Transcription and Summary)
4-
slug: realtime/realtimekit/core/ai
54
sidebar:
6-
order: 11
5+
order: 10
76
---
87

98
RealtimeKit provides AI-powered features to enhance your meetings, including real-time transcription and automatic meeting summaries. These features help you capture important discussions and generate concise overviews of your meetings.

src/content/docs/realtime/realtimekit/voice-meetings.mdx renamed to src/content/docs/realtime/realtimekit/audio-calls.mdx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
---
2-
title: Voice meetings
2+
title: Audio Only Calls
33
pcx_content_type: concept
4-
slug: realtime/realtimekit/voice-meetings
54
sidebar:
65
order: 9
76
---
87

9-
RealtimeKit supports voice meetings, allowing you to build audio-only experiences such as audio rooms, support lines, or community hangouts.
8+
RealtimeKit supports voice calls, allowing you to build audio-only experiences such as audio rooms, support lines, or community hangouts.
109
In these meetings, participants use their microphones and hear others, but cannot use their camera. Voice meetings reduce bandwidth requirements and focus on audio communication.
1110

12-
## How voice meetings work
11+
## How Audio Calls Work
1312

1413
A participant’s meeting experience is determined by the **Preset** applied to that participant.
1514
To run a voice meeting, ensure all participants join with a Preset that has meeting type set to `Voice`.
@@ -22,7 +21,7 @@ When a participant joins with a `Voice` meeting type Preset, they are considered
2221

2322
For detailed pricing information, refer to [Pricing](/realtime/realtimekit/pricing/).
2423

25-
## Building voice experiences
24+
## Building Audio Experiences
2625

2726
You can build voice meeting experiences using either the UI Kit or the Core SDK.
2827

‎src/content/docs/realtime/realtimekit/core/breakout-rooms.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import RTKSDKSelector from "~/components/realtimekit/RTKSDKSelector/RTKSDKSelect
1010
import RTKCodeSnippet from "~/components/realtimekit/RTKCodeSnippet/RTKCodeSnippet.astro";
1111
import { Render } from "~/components";
1212

13+
<RTKSDKSelector />
14+
1315
<Render file="realtimekit/web/breakout-room-preface" product="realtime" />
1416

1517
### Validate permissions
@@ -39,8 +41,6 @@ Before creating breakout rooms, validate the permissions of the current particip
3941

4042
### Create breakout rooms
4143

42-
<RTKSDKSelector />
43-
4444
<RTKCodeSnippet id="web-web-components">
4545
<Render
4646
file="realtimekit/web/breakout-room-creation-sdk-api"

0 commit comments

Comments
 (0)