62 lines
2.1 KiB
TypeScript
62 lines
2.1 KiB
TypeScript
import React, { useState } from 'react';
|
|
import cn from 'classnames';
|
|
import { Icon } from 'UI';
|
|
import { Button } from 'antd';
|
|
import type { LocalStream } from 'Player';
|
|
import stl from './ChatControls.module.css';
|
|
|
|
interface Props {
|
|
stream: LocalStream | null,
|
|
endCall: () => void,
|
|
videoEnabled: boolean,
|
|
isPrestart?: boolean,
|
|
setVideoEnabled: (isEnabled: boolean) => void
|
|
}
|
|
function ChatControls({
|
|
stream, endCall, videoEnabled, setVideoEnabled, isPrestart,
|
|
} : Props) {
|
|
const [audioEnabled, setAudioEnabled] = useState(true);
|
|
|
|
const toggleAudio = () => {
|
|
if (!stream) { return; }
|
|
setAudioEnabled(stream.toggleAudio());
|
|
};
|
|
|
|
const toggleVideo = () => {
|
|
if (!stream) { return; }
|
|
stream.toggleVideo()
|
|
.then((v) => setVideoEnabled(v));
|
|
};
|
|
|
|
/** muting user if he is auto connected to the call */
|
|
React.useEffect(() => {
|
|
if (isPrestart) {
|
|
audioEnabled && toggleAudio();
|
|
}
|
|
}, []);
|
|
|
|
return (
|
|
<div className={cn(stl.controls, 'flex items-center w-full justify-start bottom-0 px-2')}>
|
|
<div className="flex items-center gap-2">
|
|
<div className={cn(stl.btnWrapper, { [stl.disabled]: audioEnabled })}>
|
|
<Button size="small" variant="text" onClick={toggleAudio} icon={<Icon name={audioEnabled ? 'mic' : 'mic-mute'} size="16" />}>
|
|
<span className={cn('ml-1 color-gray-medium text-sm', { 'color-red': audioEnabled })}>{audioEnabled ? 'Mute' : 'Unmute'}</span>
|
|
</Button>
|
|
</div>
|
|
|
|
<div className={cn(stl.btnWrapper, { [stl.disabled]: videoEnabled })}>
|
|
<Button size="small" variant="text" onClick={toggleVideo} icon={<Icon name={videoEnabled ? 'camera-video' : 'camera-video-off'} size="16" />}>
|
|
<span className={cn('ml-1 color-gray-medium text-sm', { 'color-red': videoEnabled })}>{videoEnabled ? 'Stop Video' : 'Start Video'}</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className="ml-auto">
|
|
<button className={stl.endButton} onClick={endCall}>
|
|
END
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ChatControls;
|