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

Update voice broadcast header to new design (#9415)

Browse source
This commit is contained in:
Michael Weimann 2022-10-14 10:09:38 +02:00 • committed by GitHub
parent 583d1b0318
commit bbb02c30d9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 120 additions and 126 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/voice-broadcast/components/atoms/VoiceBroadcastHeader.tsx
View file

@ -12,24 +12,24 @@ limitations under the License.
*/
import React from "react";
import { RoomMember } from "matrix-js-sdk/src/matrix";
import { Room, RoomMember } from "matrix-js-sdk/src/matrix";
import MemberAvatar from "../../../components/views/avatars/MemberAvatar";
import { LiveBadge } from "../..";
import { Icon, IconColour, IconType } from "../../../components/atoms/Icon";
import { _t } from "../../../languageHandler";
import RoomAvatar from "../../../components/views/avatars/RoomAvatar";
interface VoiceBroadcastHeaderProps {
live: boolean;
sender: RoomMember;
roomName: string;
room: Room;
showBroadcast?: boolean;
}
export const VoiceBroadcastHeader: React.FC<VoiceBroadcastHeaderProps> = ({
live,
sender,
roomName,
room,
showBroadcast = false,
}) => {
const broadcast = showBroadcast
@ -40,13 +40,14 @@ export const VoiceBroadcastHeader: React.FC<VoiceBroadcastHeaderProps> = ({
: null;
const liveBadge = live ? <LiveBadge /> : null;
return <div className="mx_VoiceBroadcastHeader">
<MemberAvatar member={sender} fallbackUserId={sender.userId} />
<RoomAvatar room={room} width={32} height={32} />
<div className="mx_VoiceBroadcastHeader_content">
<div className="mx_VoiceBroadcastHeader_sender">
{ sender.name }
</div>
<div className="mx_VoiceBroadcastHeader_room">
{ roomName }
{ room.name }
</div>
<div className="mx_VoiceBroadcastHeader_line">
<Icon type={IconType.Microphone} colour={IconColour.CompoundSecondaryContent} />
{ sender.name }
</div>
{ broadcast }
</div>