64 lines
2 KiB
TypeScript
64 lines
2 KiB
TypeScript
import React, { useState, useEffect, FC } from 'react'
|
|
import VideoContainer from '../components/VideoContainer'
|
|
import { Icon, Popup } from 'UI'
|
|
import stl from './chatWindow.css'
|
|
import { callPeer } from 'App/player'
|
|
import cn from 'classnames'
|
|
|
|
export interface Props {
|
|
// call: (oStream: MediaStream, cb: (iStream: MediaStream)=>void)=>void
|
|
}
|
|
|
|
const ChatWindow: FC<Props> = function ChatWindow() {
|
|
const [minimize, setMinimize] = useState(false)
|
|
const [ inputStream, setInputStream ] = useState<MediaStream | null>(null);
|
|
const [ outputStream, setOutputStream ] = useState<MediaStream | null>(null);
|
|
|
|
useEffect(() => {
|
|
navigator.mediaDevices.getUserMedia({video:true, audio:true})
|
|
.then(oStream => {
|
|
setOutputStream(oStream);
|
|
const call = callPeer(oStream, setInputStream, () => {
|
|
console.log('endd')
|
|
outputStream?.getTracks().forEach(t => t.stop());
|
|
//inputStream?.
|
|
}); // Returns false when unable to connect.
|
|
// TODO: handle calling state
|
|
console.log(call)
|
|
})
|
|
.catch(console.log) // TODO: handle error in ui
|
|
}, [])
|
|
|
|
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"/>
|
|
</button>
|
|
}
|
|
content={ `Remote Control` }
|
|
size="tiny"
|
|
inverted
|
|
position="top center"
|
|
/>
|
|
</div>
|
|
<div className={cn({'hidden' : minimize}, 'mt-2')}>
|
|
<VideoContainer stream={ inputStream } />
|
|
<div className="py-1" />
|
|
<VideoContainer stream={ outputStream } muted/>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ChatWindow
|