55 lines
1.4 KiB
TypeScript
55 lines
1.4 KiB
TypeScript
'use client'
|
|
|
|
import { useJoin } from 'agora-rtc-react';
|
|
import { useEffect, useState } from 'react';
|
|
import { MediaControl } from './view';
|
|
import { UsersGroupPanel } from './components';
|
|
|
|
type AgoraProps = {
|
|
roomId: number;
|
|
secret?: string;
|
|
stopCalling: () => void;
|
|
};
|
|
|
|
export const AgoraGroup = ({ roomId, secret, stopCalling }: AgoraProps) => {
|
|
const [calling, setCalling] = useState(false);
|
|
const [micOn, setMic] = useState(false);
|
|
const [cameraOn, setCamera] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setCalling(true);
|
|
}, []);
|
|
|
|
useJoin(
|
|
{
|
|
appid: process.env.NEXT_PUBLIC_AGORA_APPID,
|
|
channel: `${roomId}-${secret}`,
|
|
token: null,
|
|
},
|
|
calling,
|
|
);
|
|
|
|
const stop = () => {
|
|
stopCalling();
|
|
setCalling(false);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="b-agora__wrap">
|
|
<UsersGroupPanel calling={calling} micOn={micOn} cameraOn={cameraOn}/>
|
|
</div>
|
|
<div className="b-agora__panel_group">
|
|
<MediaControl
|
|
calling={calling}
|
|
cameraOn={cameraOn}
|
|
micOn={micOn}
|
|
setCalling={stop}
|
|
setCamera={() => setCamera(a => !a)}
|
|
setMic={() => setMic(a => !a)}
|
|
/>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|