fixing video

package.json

@@ -21,6 +21,7 @@
 		"@tldraw/tlschema": "^2.4.6",
 		"@types/markdown-it": "^14.1.1",
 		"@vercel/analytics": "^1.2.2",
+		"@whereby.com/browser-sdk": "^3.9.2",
 		"cloudflare-workers-unfurl": "^0.0.7",
 		"gray-matter": "^4.0.3",
 		"itty-router": "^5.0.17",
@@ -54,4 +55,4 @@
 		"vite-plugin-wasm": "^3.2.2",
 		"wrangler": "^3.72.3"
 	}
-}
+}

src/shapes/VideoChatShapeUtil.tsx

@@ -1,5 +1,6 @@
 import { BaseBoxShapeUtil, TLBaseShape } from "tldraw";
 import { useEffect, useState } from "react";
+import "@whereby.com/browser-sdk/embed";
 
 const CORS_PROXY = 'https://cors-anywhere.herokuapp.com/';
 
@@ -22,8 +23,8 @@ export class VideoChatShape extends BaseBoxShapeUtil<IVideoChatShape> {
 	getDefaultProps(): IVideoChatShape['props'] {
 		return {
 			roomUrl: null,
-			w: 6400,
-			h: 4800,
+			w: 640,
+			h: 480,
 			userName: ''
 		};
 	}
@@ -90,45 +91,21 @@ export class VideoChatShape extends BaseBoxShapeUtil<IVideoChatShape> {
 	}
 
 	component(shape: IVideoChatShape) {
-		const [roomUrl, setRoomUrl] = useState(""); // Added roomUrl state
+		// const [roomUrl, setRoomUrl] = useState(""); // Added roomUrl state
 		const [isInRoom, setIsInRoom] = useState(false);
 		const [error, setError] = useState("");
 		const [isLoading, setIsLoading] = useState(false);
 
-		// Automatically show the button on load
 		useEffect(() => {
 			joinRoom();
 		}, []);
 
 		const joinRoom = async () => {
-			this.ensureRoomExists(shape);
+			// this.ensureRoomExists(shape);
 			setError("");
 			setIsLoading(true);
 			try {
-				const response = await fetch(`${CORS_PROXY}https://api.whereby.dev/v1/meetings`, {
-					method: 'POST',
-					headers: {
-						'Authorization': `Bearer ${WHEREBY_API_KEY}`,
-						'Content-Type': 'application/json',
-						'X-Requested-With': 'XMLHttpRequest', // Required by some CORS proxies
-					},
-					body: JSON.stringify({
-						isLocked: false,
-						// roomNamePrefix: ROOM_PREFIX,
-						roomMode: 'normal',
-						endDate: new Date(Date.now() + 1000 * 24 * 60 * 60 * 1000).toISOString(), // 7 days from now
-						fields: ['hostRoomUrl'],
-					}),
-				});
-
-				if (!response.ok) {
-					const errorData: { message?: string } = await response.json(); // Explicitly type errorData
-					console.error('Whereby API error:', errorData);
-					throw new Error(`Whereby API error: ${errorData.message || 'Unknown error'}`);
-				}
-
-				const data: { roomUrl: string } = await response.json(); // Explicitly type the response
-				setRoomUrl(data.roomUrl); // Set the room URL
+				await this.ensureRoomExists(shape);
 				setIsInRoom(true);
 			} catch (e) {
 				console.error("Error joining room:", e);
@@ -139,27 +116,28 @@ export class VideoChatShape extends BaseBoxShapeUtil<IVideoChatShape> {
 
 		const leaveRoom = () => {
 			setIsInRoom(false);
-			setRoomUrl(""); // Clear the room URL
+			// setRoomUrl(""); // Clear the room URL
 		};
 
-
-
 		return (
-			<div className="p-4" style={{ pointerEvents: 'all' }}>
-				<h1 className="text-2xl font-bold mb-4">Whereby Video Chat Room</h1>
+			<div className="p-4" style={{ pointerEvents: 'all', width: '100%', height: '100%' }}>
 				{isLoading ? (
 					<p>Joining room...</p>
-				) : isInRoom ? (
+				) : isInRoom && shape.props.roomUrl ? (
 					<div className="mb-4">
 						<button onClick={leaveRoom} className="bg-red-500 text-white px-4 py-2 rounded mb-4">
 							Leave Room
 						</button>
 						<div className="aspect-w-16 aspect-h-9">
-							<iframe
-								src={`${roomUrl}?embed&iframeSource=val.town&background=off&logo=off&chat=off&screenshare=on&people=on`}
-								allow="camera; microphone; fullscreen; speaker; display-capture"
-								className="w-full h-full"
-							></iframe>
+							<whereby-embed
+								room={shape.props.roomUrl}
+								background="off"
+								logo="off"
+								chat="off"
+								screenshare="on"
+								people="on"
+								style={{ width: '100%', height: '100%' }}
+							></whereby-embed>
 						</div>
 					</div>
 				) : (
@@ -170,9 +148,6 @@ export class VideoChatShape extends BaseBoxShapeUtil<IVideoChatShape> {
 						{error && <p className="text-red-500 mt-2">{error}</p>}
 					</div>
 				)}
-				<p className="mt-4 text-sm text-gray-600">
-					View source: <a href={import.meta.url.replace("esm.town", "val.town")} className="text-blue-500 hover:underline">Val Town</a>
-				</p>
 			</div>
 		);
 	}