50 lines
2.1 KiB
TypeScript
50 lines
2.1 KiB
TypeScript
import React, { useState, useEffect } from 'react'
|
|
import VideoContainer from '../components/VideoContainer'
|
|
import cn from 'classnames'
|
|
import Counter from 'App/components/shared/SessionItem/Counter'
|
|
import stl from './chatWindow.module.css'
|
|
import ChatControls from '../ChatControls/ChatControls'
|
|
import Draggable from 'react-draggable';
|
|
import type { LocalStream } from 'Player/MessageDistributor/managers/LocalStream';
|
|
|
|
export interface Props {
|
|
incomeStream: MediaStream[] | null,
|
|
localStream: LocalStream | null,
|
|
userId: string,
|
|
isPrestart?: boolean;
|
|
endCall: () => void
|
|
}
|
|
|
|
function ChatWindow({ userId, incomeStream, localStream, endCall, isPrestart }: Props) {
|
|
const [localVideoEnabled, setLocalVideoEnabled] = 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 border-b">
|
|
<div className={stl.headerTitle}>
|
|
<b>Talking to </b> {userId ? userId : 'Anonymous User'}
|
|
<br />
|
|
{incomeStream && incomeStream.length > 2 ? ' (+ other agents in the call)' : ''}
|
|
</div>
|
|
<Counter startTime={new Date().getTime() } className="text-sm ml-auto" />
|
|
</div>
|
|
<div className={cn(stl.videoWrapper, 'relative')} style={{ minHeight: localVideoEnabled ? 52 : undefined}}>
|
|
{incomeStream
|
|
? incomeStream.map(stream => <React.Fragment key={stream.id}><VideoContainer stream={ stream } /></React.Fragment>) : (
|
|
<div className={stl.noVideo}>Error obtaining incoming streams</div>
|
|
)}
|
|
<div className={cn("absolute bottom-0 right-0 z-50", localVideoEnabled ? "" : "!hidden")}>
|
|
<VideoContainer stream={ localStream ? localStream.stream : null } muted height={50} />
|
|
</div>
|
|
</div>
|
|
<ChatControls videoEnabled={localVideoEnabled} setVideoEnabled={setLocalVideoEnabled} stream={localStream} endCall={endCall} isPrestart={isPrestart} />
|
|
</div>
|
|
</Draggable>
|
|
)
|
|
}
|
|
|
|
export default ChatWindow
|