47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
import React, { useState, FC } from 'react'
|
|
import VideoContainer from '../components/VideoContainer'
|
|
import { Icon, Popup } from 'UI'
|
|
import cn from 'classnames'
|
|
|
|
export interface Props {
|
|
incomeStream: MediaStream | null,
|
|
localStream: MediaStream | null
|
|
// call: (oStream: MediaStream, cb: (iStream: MediaStream)=>void)=>void
|
|
}
|
|
|
|
const ChatWindow: FC<Props> = function ChatWindow({ incomeStream, localStream }) {
|
|
const [minimize, setMinimize] = useState(false)
|
|
|
|
return (
|
|
<div
|
|
className="fixed border radius bg-white z-50 shadow-xl mt-16 p-2"
|
|
style={{ width: '220px' }}
|
|
>
|
|
<div className="flex items-center">
|
|
<div>
|
|
<button onClick={() => setMinimize(!minimize)}>
|
|
<Icon name={ minimize ? "plus" : "minus" } size="14" />
|
|
</button>
|
|
</div>
|
|
<Popup
|
|
trigger={
|
|
<button className="flex items-center ml-auto">
|
|
<Icon name="high-engagement" size="16" color="teal" />
|
|
</button>
|
|
}
|
|
content={ `Remote Control` }
|
|
size="tiny"
|
|
inverted
|
|
position="top center"
|
|
/>
|
|
</div>
|
|
<div className={cn({'hidden' : minimize}, 'mt-2')}>
|
|
<VideoContainer stream={ incomeStream } />
|
|
<div className="py-1" />
|
|
<VideoContainer stream={ localStream } muted/>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ChatWindow
|