42 lines
1.5 KiB
TypeScript
42 lines
1.5 KiB
TypeScript
import React, { useState, FC } from 'react'
|
|
import VideoContainer from '../components/VideoContainer'
|
|
import { Icon, Popup, Button } from 'UI'
|
|
import cn from 'classnames'
|
|
import Counter from 'App/components/shared/SessionItem/Counter'
|
|
import stl from './chatWindow.css'
|
|
import ChatControls from '../ChatControls/ChatControls'
|
|
import Draggable from 'react-draggable';
|
|
|
|
export interface Props {
|
|
incomeStream: MediaStream | null,
|
|
localStream: MediaStream | null,
|
|
userId: String,
|
|
endCall: () => void
|
|
}
|
|
|
|
const ChatWindow: FC<Props> = function ChatWindow({ userId, incomeStream, localStream, endCall }) {
|
|
const [minimize, setMinimize] = useState(false)
|
|
|
|
return (
|
|
<Draggable handle=".handle" bounds="body">
|
|
<div
|
|
className={cn(stl.wrapper, "fixed radius bg-white shadow-xl mt-16")}
|
|
style={{ width: '280px' }}
|
|
>
|
|
<div className="handle flex items-center p-2 cursor-move select-none">
|
|
<div className={stl.headerTitle}><b>Meeting</b> {userId}</div>
|
|
<Counter startTime={new Date().getTime() } className="text-sm ml-auto" />
|
|
</div>
|
|
<div className={cn(stl.videoWrapper, {'hidden' : minimize}, 'relative')}>
|
|
<VideoContainer stream={ incomeStream } />
|
|
<div className="absolute bottom-0 right-0 z-50">
|
|
<VideoContainer stream={ localStream } muted width={50} />
|
|
</div>
|
|
</div>
|
|
<ChatControls stream={localStream} endCall={endCall} />
|
|
</div>
|
|
</Draggable>
|
|
)
|
|
}
|
|
|
|
export default ChatWindow
|