imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use the room avatar as a placeholder in calls (#10231)

Browse source 
* Use the room avatar as a placeholder in calls

Rather than the image for the user we're in a call with. This makes
it work correctly with virtual rooms easily since we'll get the
avatar for the correct room.

* Prettier

* TS strict errors

* More TS strict fixes

* More strict TS

* Prettier

* Even more TS strict

* more stricter
This commit is contained in:
David Baker 2023-02-27 09:34:02 +00:00 • committed by GitHub
parent c22971e542
commit 62cd0f1beb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 102 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

32
src/components/views/voip/LegacyCallView.tsx
View file

@ -430,7 +430,8 @@ export default class LegacyCallView extends React.Component<IProps, IState> {
const { pipMode, call, onResize } = this.props;
const { isLocalOnHold, isRemoteOnHold, sidebarShown, primaryFeed, secondaryFeed, sidebarFeeds } = this.state;
const callRoom = MatrixClientPeg.get().getRoom(call.roomId) ?? undefined;
const callRoomId = LegacyCallHandler.instance.roomIdForCall(call);
const callRoom = (callRoomId ? MatrixClientPeg.get().getRoom(callRoomId) : undefined) ?? undefined;
const avatarSize = pipMode ? 76 : 160;
const transfereeCall = LegacyCallHandler.instance.getTransfereeForCallId(call.callId);
const isOnHold = isLocalOnHold || isRemoteOnHold;
@ -527,23 +528,44 @@ export default class LegacyCallView extends React.Component<IProps, IState> {
</div>
);
} else if (pipMode) {
// We've already checked that we have feeds so we cast away the optional when passing the feed
return (
<div className="mx_LegacyCallView_content" onMouseMove={this.onMouseMove}>
<VideoFeed feed={primaryFeed} call={call} pipMode={pipMode} onResize={onResize} primary={true} />
<VideoFeed
feed={primaryFeed as CallFeed}
call={call}
pipMode={pipMode}
onResize={onResize}
primary={true}
/>
</div>
);
} else if (secondaryFeed) {
return (
<div className="mx_LegacyCallView_content" onMouseMove={this.onMouseMove}>
<VideoFeed feed={primaryFeed} call={call} pipMode={pipMode} onResize={onResize} primary={true} />
<VideoFeed
feed={primaryFeed as CallFeed}
call={call}
pipMode={pipMode}
onResize={onResize}
primary={true}
/>
{secondaryFeedElement}
</div>
);
} else {
return (
<div className="mx_LegacyCallView_content" onMouseMove={this.onMouseMove}>
<VideoFeed feed={primaryFeed} call={call} pipMode={pipMode} onResize={onResize} primary={true} />
{sidebarShown && <LegacyCallViewSidebar feeds={sidebarFeeds} call={call} pipMode={pipMode} />}
<VideoFeed
feed={primaryFeed as CallFeed}
call={call}
pipMode={pipMode}
onResize={onResize}
primary={true}
/>
{sidebarShown && (
<LegacyCallViewSidebar feeds={sidebarFeeds} call={call} pipMode={Boolean(pipMode)} />
)}
</div>
);
}

9
src/components/views/voip/VideoFeed.tsx
View file

@ -23,7 +23,9 @@ import { logger } from "matrix-js-sdk/src/logger";
import { SDPStreamMetadataPurpose } from "matrix-js-sdk/src/webrtc/callEventTypes";
import SettingsStore from "../../../settings/SettingsStore";
import MemberAvatar from "../avatars/MemberAvatar";
import LegacyCallHandler from "../../../LegacyCallHandler";
import { MatrixClientPeg } from "../../../MatrixClientPeg";
import RoomAvatar from "../avatars/RoomAvatar";
interface IProps {
call: MatrixCall;
@ -197,7 +199,8 @@ export default class VideoFeed extends React.PureComponent<IProps, IState> {
let content;
if (this.state.videoMuted) {
const member = this.props.feed.getMember();
const callRoomId = LegacyCallHandler.instance.roomIdForCall(this.props.call);
const callRoom = (callRoomId ? MatrixClientPeg.get().getRoom(callRoomId) : undefined) ?? undefined;
let avatarSize;
if (pipMode && primary) avatarSize = 76;
@ -205,7 +208,7 @@ export default class VideoFeed extends React.PureComponent<IProps, IState> {
else if (!pipMode && primary) avatarSize = 160;
else; // TBD
content = <MemberAvatar member={member} height={avatarSize} width={avatarSize} />;
content = <RoomAvatar room={callRoom} height={avatarSize} width={avatarSize} />;
} else {
const videoClasses = classnames("mx_VideoFeed_video", {
mx_VideoFeed_video_mirror: