From 6fdaf186a80fd42252ac9828a07c409e93825a3b Mon Sep 17 00:00:00 2001
From: Jeff Emmett <46964190+Jeff-Emmett@users.noreply.github.com>
Date: Fri, 18 Oct 2024 21:04:53 -0400
Subject: [PATCH] it works!

---
 src/shapes/VideoChatShapeUtil.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/shapes/VideoChatShapeUtil.tsx b/src/shapes/VideoChatShapeUtil.tsx
index 8f8b5b8..67e1d1a 100644
--- a/src/shapes/VideoChatShapeUtil.tsx
+++ b/src/shapes/VideoChatShapeUtil.tsx
@@ -1,6 +1,5 @@
 import { BaseBoxShapeUtil, TLBaseShape } from "tldraw";
 import { useEffect, useState } from "react";
-import "@whereby.com/browser-sdk/embed";
 
 const CORS_PROXY = 'https://cors-anywhere.herokuapp.com/';
 
@@ -91,13 +90,20 @@ export class VideoChatShape extends BaseBoxShapeUtil<IVideoChatShape> {
 	}
 
 	component(shape: IVideoChatShape) {
-		// const [roomUrl, setRoomUrl] = useState(""); // Added roomUrl state
 		const [isInRoom, setIsInRoom] = useState(false);
 		const [error, setError] = useState("");
 		const [isLoading, setIsLoading] = useState(false);
 
 		useEffect(() => {
-			joinRoom();
+			// Load the Whereby SDK only in the browser
+			if (typeof window !== 'undefined') {
+				import("@whereby.com/browser-sdk/embed").then(() => {
+					joinRoom();
+				}).catch(err => {
+					console.error("Error loading Whereby SDK:", err);
+					setError("Failed to load video chat component.");
+				});
+			}
 		}, []);
 
 		const joinRoom = async () => {
@@ -123,7 +129,7 @@ export class VideoChatShape extends BaseBoxShapeUtil<IVideoChatShape> {
 			<div className="p-4" style={{ pointerEvents: 'all', width: '100%', height: '100%' }}>
 				{isLoading ? (
 					<p>Joining room...</p>
-				) : isInRoom && shape.props.roomUrl ? (
+				) : isInRoom && shape.props.roomUrl && typeof window !== 'undefined' ? (
 					<div className="mb-4">
 						<button onClick={leaveRoom} className="bg-red-500 text-white px-4 py-2 rounded mb-4">
 							Leave Room