File size: 1,514 Bytes
d092f57 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
"use client"
import { FC, useEffect, useState } from "react"
import Player from "./player/Player"
import {
ClientToServerEvents,
createClientSocket,
ServerToClientEvents,
} from "../lib/socket"
import { Socket } from "socket.io-client"
import ConnectingAlert from "./alert/ConnectingAlert"
interface Props {
id: string
}
let connecting = false
const Embed: FC<Props> = ({ id }) => {
const [connected, setConnected] = useState(false)
const [socket, setSocket] = useState<Socket<
ServerToClientEvents,
ClientToServerEvents
> | null>(null)
useEffect(() => {
fetch("/api/socketio").finally(() => {
if (socket !== null) {
setConnected(socket.connected)
} else {
const newSocket = createClientSocket(id)
newSocket.on("connect", () => {
setConnected(true)
})
setSocket(newSocket)
}
})
return () => {
if (socket !== null) {
socket.disconnect()
}
}
}, [id, socket])
const connectionCheck = () => {
if (socket !== null && socket.connected) {
connecting = false
setConnected(true)
return
}
setTimeout(connectionCheck, 100)
}
if (!connected || socket === null) {
if (!connecting) {
connecting = true
connectionCheck()
}
return (
<div className={"flex justify-center"}>
<ConnectingAlert />
</div>
)
}
return (
<Player roomId={id} socket={socket} fullHeight={true}/>
)
}
export default Embed
|