jeffemmett
/
canvas-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

it works!

This commit is contained in:
Jeff Emmett 2024-10-18 21:04:53 -04:00
parent 0d7ee5889c
commit 49bca38b5f
1 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/shapes/VideoChatShapeUtil.tsx
View File

@ -1,6 +1,5 @@
import { BaseBoxShapeUtil, TLBaseShape } from "tldraw"; import { BaseBoxShapeUtil, TLBaseShape } from "tldraw";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import "@whereby.com/browser-sdk/embed";
const CORS_PROXY = 'https://cors-anywhere.herokuapp.com/'; const CORS_PROXY = 'https://cors-anywhere.herokuapp.com/';
@ -91,13 +90,20 @@ export class VideoChatShape extends BaseBoxShapeUtil<IVideoChatShape> {
} }
component(shape: IVideoChatShape) { component(shape: IVideoChatShape) {
// const [roomUrl, setRoomUrl] = useState(""); // Added roomUrl state
const [isInRoom, setIsInRoom] = useState(false); const [isInRoom, setIsInRoom] = useState(false);
const [error, setError] = useState(""); const [error, setError] = useState("");
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
useEffect(() => { 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 () => { const joinRoom = async () => {
@ -123,7 +129,7 @@ export class VideoChatShape extends BaseBoxShapeUtil<IVideoChatShape> {
<div className="p-4" style={{ pointerEvents: 'all', width: '100%', height: '100%' }}> <div className="p-4" style={{ pointerEvents: 'all', width: '100%', height: '100%' }}>
{isLoading ? ( {isLoading ? (
<p>Joining room...</p> <p>Joining room...</p>
) : isInRoom && shape.props.roomUrl ? ( ) : isInRoom && shape.props.roomUrl && typeof window !== 'undefined' ? (
<div className="mb-4"> <div className="mb-4">
<button onClick={leaveRoom} className="bg-red-500 text-white px-4 py-2 rounded mb-4"> <button onClick={leaveRoom} className="bg-red-500 text-white px-4 py-2 rounded mb-4">
Leave Room Leave Room