@cloudflare/realtimekit-react 1.2.0-staging.9 → 1.2.1-staging.1

package/example/App.tsx

@@ -0,0 +1,34 @@
+import React, { useEffect } from 'react';
+
+import { RealtimeKitProvider, useRealtimeKitClient } from '../src';
+import Meeting from './components/Meeting';
+import Participants from './components/Participants';
+import Chat from './components/Chat';
+
+function App() {
+    const [client, loadClient] = useRealtimeKitClient();
+
+    useEffect(() => {
+        fetch('https://api.cluster.dyte.in/auth/anonymous')
+            .then((res) => res.json())
+            .then((data) => {
+                const { authToken } = data;
+                loadClient({
+                    authToken,
+                    defaults: { video: false, audio: false },
+                });
+            });
+    }, []);
+
+    Object.assign(window, { client });
+
+    return (
+        <RealtimeKitProvider value={client}>
+            <Meeting />
+            <Participants />
+            <Chat />
+        </RealtimeKitProvider>
+    );
+}
+
+export default App;

package/example/components/Chat.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { useRealtimeKitSelector } from '../../src';
+
+function Chat() {
+    const roomJoined = useRealtimeKitSelector(
+        (meeting) => meeting.self.roomJoined,
+    );
+    const chat = useRealtimeKitSelector((meeting) => meeting.chat);
+    if (!roomJoined) {
+        return null;
+    }
+
+    return (
+        <fieldset className="section">
+            <legend>Chat</legend>
+            <div>
+                <ul>
+                    {chat?.messages.map(
+                        (message: any) => (
+                            <li key={message.id}>
+                                {message.type}
+                                -
+                                {message.type === 'text' && message.message}
+                            </li>
+                        ),
+                    )}
+                </ul>
+                <form
+                    onSubmit={(e) => {
+                        e.preventDefault();
+                        const messageInput = (e.target as any).elements
+                            .message as HTMLInputElement;
+                        const message = messageInput.value.trim();
+
+                        if (message !== '') {
+                            if (chat) {
+                                chat.sendTextMessage(message);
+                            }
+                            messageInput.value = '';
+                        }
+                    }}
+                >
+                    <input type="text" name="message" />
+                    <button type="submit">Send</button>
+                </form>
+            </div>
+        </fieldset>
+    );
+}
+
+export default Chat;

package/example/components/Meeting.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { useRealtimeKitMeeting, useRealtimeKitSelector } from '../../src';
+
+function Meeting() {
+    const { meeting } = useRealtimeKitMeeting();
+    const roomJoined = useRealtimeKitSelector((m) => m.self.roomJoined);
+    const participantCount = useRealtimeKitSelector((m) => m.participants.count);
+    const self = useRealtimeKitSelector((m) => m.self);
+
+    return (
+        <fieldset>
+            <legend>Meeting details</legend>
+            <div>
+                {!roomJoined && (
+                    <div>
+                        <div>
+                            Status:
+                            {' '}
+                            {roomJoined === undefined ? 'Connecting...' : 'Connected'}
+                        </div>
+                        {meeting && (
+                            <div>
+                                <button type="button" onClick={() => meeting.joinRoom()}>
+                                  Join
+                                </button>
+                            </div>
+                        )}
+                    </div>
+                )}
+                {roomJoined && (
+                    <div>
+                        <div>
+                            Name:
+                            {self?.name}
+                        </div>
+                        <div>
+                            audio:
+                            {' '}
+                            <span className="token">
+                                {JSON.stringify(self?.audioEnabled)}
+                            </span>
+                            , video:
+                            {' '}
+                            <span className="token">
+                                {JSON.stringify(self?.videoEnabled)}
+                            </span>
+                        </div>
+                        <div>
+                            Participant Count:
+                            {participantCount}
+                        </div>
+                        <button
+                            type="button"
+                            onClick={() => {
+                                if (self?.audioEnabled) {
+                                    self?.disableAudio();
+                                } else {
+                                    self?.enableAudio();
+                                }
+                            }}
+                        >
+                            {self?.audioEnabled ? 'Disable Audio' : 'Enable Audio'}
+                        </button>
+                        <button
+                            type="button"
+                            onClick={() => {
+                                if (self?.videoEnabled) {
+                                    self?.disableVideo();
+                                } else {
+                                    self?.enableVideo();
+                                }
+                            }}
+                        >
+                            {self?.videoEnabled ? 'Disable Video' : 'Enable Video'}
+                        </button>
+                    </div>
+                )}
+            </div>
+        </fieldset>
+    );
+}
+
+export default Meeting;

package/example/components/Participants.tsx

@@ -0,0 +1,122 @@
+import React, { FC, useEffect, useRef } from 'react';
+import { useRealtimeKitSelector } from '../../src';
+
+const PeerView: FC<{
+  peerId: string;
+}> = ({ peerId }) => {
+    const {
+        audioEnabled, audioTrack, videoEnabled, videoTrack,
+    } = useRealtimeKitSelector((meeting) => meeting.participants.active.get(peerId))!;
+    const videoRef = useRef<HTMLVideoElement>(null);
+    const audioRef = useRef<HTMLAudioElement>(null);
+
+    useEffect(() => {
+        if (!audioRef.current) return;
+
+        if (audioEnabled && audioTrack) {
+            const stream = new MediaStream();
+            stream.addTrack(audioTrack);
+            audioRef.current.srcObject = stream;
+        } else {
+            audioRef.current.srcObject = null;
+        }
+    }, [audioEnabled, audioTrack]);
+
+    useEffect(() => {
+        if (!videoRef.current) return;
+
+        if (videoEnabled && videoTrack) {
+            const stream = new MediaStream();
+            stream.addTrack(videoTrack);
+            videoRef.current.srcObject = stream;
+        } else {
+            videoRef.current.srcObject = null;
+        }
+    }, [videoEnabled, videoTrack]);
+
+    return (
+        <div>
+            <video
+                width={100}
+                height={100}
+                ref={videoRef}
+                autoPlay
+                playsInline
+                style={{
+                    display: videoEnabled ? 'block' : 'none',
+                    background: 'wheat',
+                }}
+            />
+            <audio ref={audioRef} autoPlay />
+        </div>
+    );
+};
+
+function ActiveParticipants() {
+    const activeParticipants = useRealtimeKitSelector(
+        (meeting) => meeting.participants.active,
+    );
+
+    return (
+        <div>
+            {activeParticipants?.toArray().map((peer: { id: string }) => (
+                <PeerView key={peer.id} peerId={peer.id} />
+            ))}
+        </div>
+    );
+}
+
+function Participants() {
+    const roomJoined = useRealtimeKitSelector(
+        (meeting) => meeting.self.roomJoined,
+    );
+    const joinedParticipants = useRealtimeKitSelector(
+        (meeting) => meeting.participants.joined,
+    );
+
+    if (!joinedParticipants || !roomJoined) {
+        return null;
+    }
+
+    return (
+        <fieldset className="section">
+            <legend>Participants</legend>
+            <div>
+                <h2>Active Participants</h2>
+                <ActiveParticipants />
+            </div>
+            <div>
+                <h2>Joined Participants</h2>
+                <ul style={{ paddingLeft: '1.25rem' }}>
+                    {joinedParticipants
+                        ?.toArray()
+                        .map(
+                            (peer: {
+                id: string;
+                audioEnabled: boolean;
+                name: string;
+                videoEnabled: boolean;
+              }) => (
+                                <li key={peer.id}>
+                                    {peer.name}
+                                    {' '}
+- audio:
+                                    {' '}
+                                    <span className="token">
+                                        {JSON.stringify(peer.audioEnabled)}
+                                    </span>
+                  , video:
+                                    {' '}
+                                    <span className="token">
+                                        {JSON.stringify(peer.videoEnabled)}
+                                    </span>
+                                </li>
+                            ),
+                        )}
+                </ul>
+            </div>
+        </fieldset>
+    );
+}
+
+export default Participants;

package/example/index.css

@@ -0,0 +1,24 @@
+body {
+  font-family: sans-serif;
+  margin: 1rem;
+}
+
+span.token {
+  color: #2160fd;
+}
+
+.section {
+  margin-top: 1rem;
+}
+
+fieldset {
+  border: 2px solid #c7c7c7;
+  border-radius: 6px;
+}
+
+#root {
+  display: block;
+  width: 100%;
+  max-width: 768px;
+  margin: 0 auto;
+}

package/example/main.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+
+ReactDOM.render(
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>,
+    document.getElementById('root'),
+);

package/example/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cloudflare/realtimekit-react",
-    "version": "1.2.0-staging.9",
+    "version": "1.2.1-staging.1",
     "description": "A real-time video and audio SDK for building custom, collaborative communication experiences.",
     "main": "./dist/index.cjs.js",
     "module": "./dist/index.es.js",
@@ -12,15 +12,12 @@
         }
     },
     "types": "./dist/index.d.ts",
-    "files": [
-        "dist"
-    ],
     "bugs": {
-        "url": "https://realtime.cloudflare.com/issues"
+        "url": "https://community.cloudflare.com"
     },
     "private": false,
     "dependencies": {
-        "@cloudflare/realtimekit": "1.2.0-staging.9"
+        "@cloudflare/realtimekit": "1.2.1-staging.1"
     },
     "peerDependencies": {
         "react": ">=16.8.6"

package/tsconfig.node.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "esnext",
+    "moduleResolution": "node"
+  },
+  "include": ["vite.config.ts"]
+}

package/types/context.d.ts

@@ -0,0 +1,36 @@
+import React, { ReactNode } from 'react';
+import RTKClient from '@cloudflare/realtimekit';
+type Listener = () => void;
+declare class RTKUpdates {
+    private meeting;
+    private l;
+    constructor(meeting: RTKClient);
+    clean(): void;
+    addListener(listener: Listener): void;
+    removeListener(listener: Listener): void;
+    private onUpdate;
+}
+export declare const RealtimeKitContext: React.Context<{
+    meeting: RTKClient | undefined;
+    updates: RTKUpdates | undefined;
+}>;
+/**
+ * Provider component which makes the RealtimeKitClient object
+ * available to nested components
+ * @component
+ * @param value The RealtimeKitClient instance from `useRealtimeKitClient()`
+ * @param fallback Any fallback UI you want to render until the instance initialises.
+ */
+export declare function RealtimeKitProvider({ value, children, fallback, }: {
+    value: RTKClient | undefined;
+    children: ReactNode;
+    fallback?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook which returns the reference to the RealtimeKitClient object
+ * @returns meeting instance from `useRealtimeKitClient()`
+ */
+export declare const useRealtimeKitClient: () => {
+    meeting: RTKClient;
+};
+export {};

package/types/index.d.ts

@@ -0,0 +1,14 @@
+import RTKClient, { RTKConfigOptions } from '@cloudflare/realtimekit';
+interface RealtimeKitClientParams {
+    resetOnLeave?: boolean;
+}
+/**
+ * Hook which manages a RealtimeKitClient instance
+ */
+export declare const useRealtimeKitClient: (clientParams?: RealtimeKitClientParams) => readonly [RTKClient | undefined, (options: RTKConfigOptions) => Promise<RTKClient | undefined>];
+type StateSelector<T extends object, U> = (state: T) => U;
+/**
+ * Hook which extracts data from the RealtimeKitClient object
+ */
+export declare const useRealtimeKitSelector: <StateSlice>(selector: StateSelector<RTKClient, StateSlice>) => StateSlice;
+export * from './context';