@cloudflare/realtimekit-react 0.0.0 → 2.5.0-staging.88

package/example/App.tsx

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

package/example/components/Chat.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { useDyteSelector } from '../../src';
+
+function Chat() {
+	const roomJoined = useDyteSelector((meeting) => meeting.self.roomJoined);
+	const chat = useDyteSelector((meeting) => meeting.chat);
+	if (!roomJoined) {
+		return null;
+	}
+
+	return (
+		<fieldset className="section">
+			<legend>Chat</legend>
+			<div>
+				<ul>
+					{chat?.messages.map((message) => (
+						<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 { useDyteMeeting, useDyteSelector } from '../../src';
+
+function Meeting() {
+	const { meeting } = useDyteMeeting();
+	const roomJoined = useDyteSelector((m) => m.self.roomJoined);
+	const participantCount = useDyteSelector(
+		(m) => m.participants.count,
+	);
+	const self = useDyteSelector((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,112 @@
+/* eslint-disable jsx-a11y/media-has-caption */
+import React, { FC, useEffect, useRef } from 'react';
+import { useDyteSelector } from '../../src';
+
+const PeerView: FC<{
+  peerId: string,
+}> = ({
+	peerId,
+}) => {
+	const {
+		audioEnabled, audioTrack, videoEnabled, videoTrack,
+	} = useDyteSelector(
+		(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 = useDyteSelector(
+		(meeting) => meeting.participants.active,
+	);
+
+	return (
+		<div>
+			{activeParticipants?.toArray().map((peer) => (
+				<PeerView
+					key={peer.id}
+					peerId={peer.id}
+				/>
+			))}
+		</div>
+	);
+}
+
+function Participants() {
+	const roomJoined = useDyteSelector((meeting) => meeting.self.roomJoined);
+	const joinedParticipants = useDyteSelector(
+		(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) => (
+						<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,5 +1,31 @@
 {
-  "name": "@cloudflare/realtimekit-react",
-  "version": "0.0.0",
-  "scripts": {}
-}
+    "name": "@cloudflare/realtimekit-react",
+    "version": "2.5.0-staging.88",
+    "description": "A real-time video and audio SDK for building custom, collaborative communication experiences.",
+    "main": "./dist/index.cjs.js",
+    "module": "./dist/index.es.js",
+    "exports": {
+        ".": {
+            "import": "./dist/index.es.js",
+            "require": "./dist/index.cjs.js",
+            "types": "./dist/index.d.ts"
+        }
+    },
+    "types": "./dist/index.d.ts",
+    "bugs": {
+        "url": "https://realtime.cloudflare.com/issues"
+    },
+    "private": false,
+    "dependencies": {
+        "@cloudflare/realtimekit": "2.5.0-staging.88"
+    },
+    "peerDependencies": {
+        "react": ">=16.8.6"
+    },
+    "publishConfig": {
+        "tag": "staging"
+    },
+    "scripts": {
+        "postpublish": "mv package.json.bak package.json"
+    }
+}

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 DyteClient from '@dytesdk/web-core';
+type Listener = () => void;
+declare class DyteUpdates {
+    private meeting;
+    private l;
+    constructor(meeting: DyteClient);
+    clean(): void;
+    addListener(listener: Listener): void;
+    removeListener(listener: Listener): void;
+    private onUpdate;
+}
+export declare const DyteContext: React.Context<{
+    meeting: DyteClient | undefined;
+    updates: DyteUpdates | undefined;
+}>;
+/**
+ * Provider component which makes the DyteClient object
+ * available to nested components
+ * @component
+ * @param value The DyteClient instance from `useDyteClient()`
+ * @param fallback Any fallback UI you want to render until the instance initialises.
+ */
+export declare function DyteProvider({ value, children, fallback, }: {
+    value: DyteClient | undefined;
+    children: ReactNode;
+    fallback?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook which returns the reference to the DyteClient object
+ * @returns meeting instance from `useDyteClient()`
+ */
+export declare const useDyteMeeting: () => {
+    meeting: DyteClient;
+};
+export {};

package/types/index.d.ts

@@ -0,0 +1,14 @@
+import DyteClient, { DyteConfigOptions } from '@dytesdk/web-core';
+interface DyteClientParams {
+    resetOnLeave?: boolean;
+}
+/**
+ * Hook which manages a DyteClient instance
+ */
+export declare const useDyteClient: (dyteClientParams?: DyteClientParams) => readonly [DyteClient | undefined, (options: DyteConfigOptions) => Promise<DyteClient | undefined>];
+type StateSelector<T extends object, U> = (state: T) => U;
+/**
+ * Hook which extracts data from the DyteClient object
+ */
+export declare const useDyteSelector: <StateSlice>(selector: StateSelector<DyteClient, StateSlice>) => StateSlice;
+export * from './context';