xmj/element-call
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge remote-tracking branch 'upstream/main' into SimonBrandner/fix/audio

Browse source 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2022-08-12 20:54:04 +02:00
commit e82ed2cbcb
No known key found for this signature in database
GPG key ID: D1D45825D60C24D2
11 changed files with 338 additions and 171 deletions
Download patch file Download diff file Expand all files Collapse all files

44
src/room/InCallView.tsx
View file

@ -16,7 +16,7 @@ limitations under the License.
import React, { useCallback, useMemo, useRef } from "react";
import { usePreventScroll } from "@react-aria/overlays";
import { GroupCall, MatrixClient } from "matrix-js-sdk";
import { GroupCall, MatrixClient, RoomMember } from "matrix-js-sdk";
import { CallFeed } from "matrix-js-sdk/src/webrtc/callFeed";
import classNames from "classnames";
@ -79,10 +79,10 @@ interface Props {
export interface Participant {
id: string;
callFeed: CallFeed;
focused: boolean;
isLocal: boolean;
presenter: boolean;
callFeed?: CallFeed;
isLocal?: boolean;
}
export function InCallView({
@ -106,7 +106,7 @@ export function InCallView({
}: Props) {
usePreventScroll();
const elementRef = useRef<HTMLDivElement>();
const [layout, setLayout] = useVideoGridLayout(screenshareFeeds.length > 0);
const { layout, setLayout } = useVideoGridLayout(screenshareFeeds.length > 0);
const { toggleFullscreen, fullscreenParticipant } = useFullscreen(elementRef);
const [spatialAudio] = useSpatialAudio();
@ -157,20 +157,23 @@ export function InCallView({
return participants;
}, [userMediaFeeds, activeSpeaker, screenshareFeeds, layout]);
const renderAvatar = useCallback((roomMember, width, height) => {
const avatarUrl = roomMember.user?.avatarUrl;
const size = Math.round(Math.min(width, height) / 2);
const renderAvatar = useCallback(
(roomMember: RoomMember, width: number, height: number) => {
const avatarUrl = roomMember.user?.avatarUrl;
const size = Math.round(Math.min(width, height) / 2);
return (
<Avatar
key={roomMember.userId}
size={size}
src={avatarUrl}
fallback={roomMember.name.slice(0, 1).toUpperCase()}
className={styles.avatar}
/>
);
}, []);
return (
<Avatar
key={roomMember.userId}
size={size}
src={avatarUrl}
fallback={roomMember.name.slice(0, 1).toUpperCase()}
className={styles.avatar}
/>
);
},
[]
);
const renderContent = useCallback((): JSX.Element => {
if (items.length === 0) {
@ -189,7 +192,7 @@ export function InCallView({
audioContext={audioContext}
audioDestination={audioDestination}
disableSpeakingIndicator={true}
isFullscreen={fullscreenParticipant}
isFullscreen={!!fullscreenParticipant}
onFullscreen={toggleFullscreen}
/>
);
@ -202,11 +205,11 @@ export function InCallView({
key={item.id}
item={item}
getAvatar={renderAvatar}
showName={items.length > 2 || item.focused}
audioOutputDevice={audioOutput}
audioContext={audioContext}
audioDestination={audioDestination}
disableSpeakingIndicator={items.length < 3}
isFullscreen={fullscreenParticipant}
isFullscreen={!!fullscreenParticipant}
onFullscreen={toggleFullscreen}
{...rest}
/>
@ -221,6 +224,7 @@ export function InCallView({
layout,
renderAvatar,
toggleFullscreen,
audioOutput,
]);
const {