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

fixing video

This commit is contained in:
Jeff Emmett 2024-10-18 20:59:46 -04:00
parent a0bba93055
commit 0d7ee5889c
2 changed files with 20 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

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

61
src/shapes/VideoChatShapeUtil.tsx
View File

@ -1,5 +1,6 @@
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/';
@ -22,8 +23,8 @@ export class VideoChatShape extends BaseBoxShapeUtil<IVideoChatShape> {
getDefaultProps(): IVideoChatShape['props'] { getDefaultProps(): IVideoChatShape['props'] {
return { return {
roomUrl: null, roomUrl: null,
w: 6400, w: 640,
h: 4800, h: 480,
userName: '' userName: ''
}; };
} }
@ -90,45 +91,21 @@ export class VideoChatShape extends BaseBoxShapeUtil<IVideoChatShape> {
} }
component(shape: IVideoChatShape) { component(shape: IVideoChatShape) {
const [roomUrl, setRoomUrl] = useState(""); // Added roomUrl state // 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);
// Automatically show the button on load
useEffect(() => { useEffect(() => {
joinRoom(); joinRoom();
}, []); }, []);
const joinRoom = async () => { const joinRoom = async () => {
this.ensureRoomExists(shape); // this.ensureRoomExists(shape);
setError(""); setError("");
setIsLoading(true); setIsLoading(true);
try { try {
const response = await fetch(`${CORS_PROXY}https://api.whereby.dev/v1/meetings`, { await this.ensureRoomExists(shape);
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
setIsInRoom(true); setIsInRoom(true);
} catch (e) { } catch (e) {
console.error("Error joining room:", e); console.error("Error joining room:", e);
@ -139,27 +116,28 @@ export class VideoChatShape extends BaseBoxShapeUtil<IVideoChatShape> {
const leaveRoom = () => { const leaveRoom = () => {
setIsInRoom(false); setIsInRoom(false);
setRoomUrl(""); // Clear the room URL // setRoomUrl(""); // Clear the room URL
}; };
return ( return (
<div className="p-4" style={{ pointerEvents: 'all' }}> <div className="p-4" style={{ pointerEvents: 'all', width: '100%', height: '100%' }}>
<h1 className="text-2xl font-bold mb-4">Whereby Video Chat Room</h1>
{isLoading ? ( {isLoading ? (
<p>Joining room...</p> <p>Joining room...</p>
) : isInRoom ? ( ) : isInRoom && shape.props.roomUrl ? (
<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
</button> </button>
<div className="aspect-w-16 aspect-h-9"> <div className="aspect-w-16 aspect-h-9">
<iframe <whereby-embed
src={`${roomUrl}?embed&iframeSource=val.town&background=off&logo=off&chat=off&screenshare=on&people=on`} room={shape.props.roomUrl}
allow="camera; microphone; fullscreen; speaker; display-capture" background="off"
className="w-full h-full" logo="off"
></iframe> chat="off"
screenshare="on"
people="on"
style={{ width: '100%', height: '100%' }}
></whereby-embed>
</div> </div>
</div> </div>
) : ( ) : (
@ -170,9 +148,6 @@ export class VideoChatShape extends BaseBoxShapeUtil<IVideoChatShape> {
{error && <p className="text-red-500 mt-2">{error}</p>} {error && <p className="text-red-500 mt-2">{error}</p>}
</div> </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> </div>
); );
} }