jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): fix videofeed windows

Browse source
This commit is contained in:
sylenien 2022-09-22 12:33:54 +02:00 • committed by Delirium
parent 556c486698
commit 7b35bf7405
2 changed files with 12 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
frontend/app/components/Assist/ChatWindow/ChatWindow.tsx
View file

@ -17,7 +17,9 @@ export interface Props {
function ChatWindow({ userId, incomeStream, localStream, endCall, isPrestart }: Props) {
const [localVideoEnabled, setLocalVideoEnabled] = useState(false)
const [anyRemoteEnabled, setRemoteEnabled] = useState(false)
const onlyLocalEnabled = localVideoEnabled && !anyRemoteEnabled
return (
<Draggable handle=".handle" bounds="body">
<div
@ -32,13 +34,13 @@ function ChatWindow({ userId, incomeStream, localStream, endCall, isPrestart }:
</div>
<Counter startTime={new Date().getTime() } className="text-sm ml-auto" />
</div>
<div className={cn(stl.videoWrapper, 'relative')} style={{ minHeight: localVideoEnabled ? 52 : undefined}}>
<div className={cn(stl.videoWrapper, 'relative')} style={{ minHeight: onlyLocalEnabled ? 52 : undefined}}>
{incomeStream
? incomeStream.map(stream => <React.Fragment key={stream.id}><VideoContainer stream={ stream } /></React.Fragment>) : (
? incomeStream.map(stream => <React.Fragment key={stream.id}><VideoContainer stream={ stream } setRemoteEnabled={setRemoteEnabled} /></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} />
<VideoContainer stream={ localStream ? localStream.stream : null } muted height={anyRemoteEnabled ? 50 : 280} />
</div>
</div>
<ChatControls videoEnabled={localVideoEnabled} setVideoEnabled={setLocalVideoEnabled} stream={localStream} endCall={endCall} isPrestart={isPrestart} />

10
frontend/app/components/Assist/components/VideoContainer/VideoContainer.tsx
View file

@ -3,10 +3,11 @@ import React, { useEffect, useRef } from 'react'
interface Props {
stream: MediaStream | null
muted?: boolean,
height?: number
height?: number,
setRemoteEnabled?: (isEnabled: boolean) => void
}
function VideoContainer({ stream, muted = false, height = 280 }: Props) {
function VideoContainer({ stream, muted = false, height = 280, setRemoteEnabled }: Props) {
const ref = useRef<HTMLVideoElement>(null);
const [isEnabled, setEnabled] = React.useState(false);
@ -22,7 +23,10 @@ function VideoContainer({ stream, muted = false, height = 280 }: Props) {
const settings = stream.getVideoTracks()[0]?.getSettings()
const isDummyVideoTrack = settings ? (settings.width === 2 || settings.frameRate === 0 || !settings.frameRate && !settings.width) : true
const shouldBeEnabled = !isDummyVideoTrack
isEnabled !== shouldBeEnabled ? setEnabled(shouldBeEnabled) : null;
if (isEnabled !== shouldBeEnabled) {
setEnabled(shouldBeEnabled)
setRemoteEnabled?.(shouldBeEnabled)
}
}, 500)
return () => clearInterval(iid)
}, [ stream, isEnabled ])