59 lines
1.8 KiB
Svelte
59 lines
1.8 KiB
Svelte
<script lang="ts">
|
|
import { onDestroy, onMount } from "svelte";
|
|
import { room } from "../../stores/roomStore";
|
|
import { error, handleMessage, peer } from "../../utils/webrtcUtil";
|
|
import { ws, webSocketConnected } from "../../stores/websocketStore";
|
|
import { WebSocketMessageType } from "../../types/websocket";
|
|
import RtcMessage from "../../components/RTCMessage.svelte";
|
|
import { ConnectionState } from "../../types/websocket";
|
|
export let data: { roomId: string };
|
|
const { roomId } = data;
|
|
|
|
onMount(async () => {
|
|
room.update((room) => ({ ...room, id: roomId }));
|
|
|
|
$ws.addEventListener("message", handleMessage);
|
|
|
|
webSocketConnected.subscribe((value) => {
|
|
if (value) {
|
|
room.update((room) => ({
|
|
...room,
|
|
connectionState: ConnectionState.CONNECTING,
|
|
}));
|
|
|
|
if ($room.id === null) {
|
|
throw new Error("Room ID not set");
|
|
}
|
|
|
|
$ws.send({
|
|
type: WebSocketMessageType.JOIN_ROOM,
|
|
roomId: $room.id,
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
onDestroy(() => {
|
|
if ($ws) {
|
|
room.update((room) => ({
|
|
...room,
|
|
connectionState: ConnectionState.DISCONNECTED,
|
|
}));
|
|
$ws.close();
|
|
}
|
|
if ($peer) {
|
|
$peer.close();
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<div class="p-4">
|
|
{#if $error}
|
|
<p>Whoops! That room doesn't exist.</p>
|
|
{:else if $room.connectionState !== ConnectionState.CONNECTED && $room.connectionState !== ConnectionState.RECONNECTING}
|
|
<p>Connecting to server...</p>
|
|
{:else}
|
|
<RtcMessage {room} />
|
|
{/if}
|
|
</div>
|