Add remote video overlay
Fix remote audio not working when viewing another conversation.
Add a remote video overlay when in a call, but viewing a different page.
New components:
- VideoOverlay
- RemoteVideoOverlay: Video overlay for the remote stream when in a
different page. Clicking it will redirect to the current call page.
- VideoStream: renders a video from a MediaStream and can
output audio to the device with id `audioOutDeviceId`
Misc changes:
- Can click local video to make bigger
Change-Id: If1bb0b10c137944c405d540f041ebfe8005f9251
diff --git a/client/src/contexts/CallManagerProvider.tsx b/client/src/contexts/CallManagerProvider.tsx
index 4261f07..9bde186 100644
--- a/client/src/contexts/CallManagerProvider.tsx
+++ b/client/src/contexts/CallManagerProvider.tsx
@@ -19,7 +19,10 @@
import { createContext, useCallback, useContext, useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
+import { RemoteVideoOverlay } from '../components/VideoOverlay';
+import { useUrlParams } from '../hooks/useUrlParams';
import { Conversation } from '../models/conversation';
+import { ConversationRouteParams } from '../router';
import { useConversationQuery } from '../services/conversationQueries';
import { SetState, WithChildren } from '../utils/utils';
import CallProvider, { CallRole } from './CallProvider';
@@ -103,6 +106,8 @@
const CallManagerProvider = ({ children }: WithChildren) => {
const { callData } = useContext(CallManagerContext);
+ const { urlParams } = useUrlParams<ConversationRouteParams>();
+ const conversationId = urlParams.conversationId;
if (!callData) {
return <>{children}</>;
@@ -110,7 +115,12 @@
return (
<WebRtcProvider>
- <CallProvider>{children}</CallProvider>
+ <CallProvider>
+ {callData.conversationId !== conversationId && (
+ <RemoteVideoOverlay callConversationId={callData.conversationId} />
+ )}
+ {children}
+ </CallProvider>
</WebRtcProvider>
);
};