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

Implement small broadcast PiP (#9755)

Browse source
This commit is contained in:
Michael Weimann 2022-12-15 12:43:01 +01:00 • committed by GitHub
parent 9f795a4c5f
commit ab560bba40
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
21 changed files with 938 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -34,12 +34,14 @@ import AccessibleTooltipButton from "../../../components/views/elements/Accessib
interface VoiceBroadcastHeaderProps {
linkToRoom?: boolean;
live?: VoiceBroadcastLiveness;
liveBadgePosition?: "middle" | "right";
onCloseClick?: () => void;
onMicrophoneLineClick?: ((e: ButtonEvent) => void | Promise<void>) | null;
room: Room;
microphoneLabel?: string;
showBroadcast?: boolean;
showBuffering?: boolean;
bufferingPosition?: "line" | "title";
timeLeft?: number;
showClose?: boolean;
}
@ -47,12 +49,14 @@ interface VoiceBroadcastHeaderProps {
export const VoiceBroadcastHeader: React.FC<VoiceBroadcastHeaderProps> = ({
linkToRoom = false,
live = "not-live",
liveBadgePosition = "right",
onCloseClick = () => {},
onMicrophoneLineClick = null,
room,
microphoneLabel,
showBroadcast = false,
showBuffering = false,
bufferingPosition = "line",
showClose = false,
timeLeft,
}) => {
@ -78,7 +82,7 @@ export const VoiceBroadcastHeader: React.FC<VoiceBroadcastHeaderProps> = ({
</div>
);
const buffering = showBuffering && (
const bufferingLine = showBuffering && bufferingPosition === "line" && (
<div className="mx_VoiceBroadcastHeader_line">
<Spinner w={14} h={14} />
{_t("Buffering…")}
@ -110,7 +114,12 @@ export const VoiceBroadcastHeader: React.FC<VoiceBroadcastHeaderProps> = ({
};
let roomAvatar = <RoomAvatar room={room} width={32} height={32} />;
let roomName = <div className="mx_VoiceBroadcastHeader_room">{room.name}</div>;
let roomName = (
<div className="mx_VoiceBroadcastHeader_room_wrapper">
<div className="mx_VoiceBroadcastHeader_room">{room.name}</div>
{showBuffering && bufferingPosition === "title" && <Spinner w={12} h={12} />}
</div>
);
if (linkToRoom) {
roomAvatar = <AccessibleButton onClick={onRoomAvatarOrNameClick}>{roomAvatar}</AccessibleButton>;
@ -126,9 +135,10 @@ export const VoiceBroadcastHeader: React.FC<VoiceBroadcastHeaderProps> = ({
{microphoneLine}
{timeLeftLine}
{broadcast}
{buffering}
{bufferingLine}
{liveBadgePosition === "middle" && liveBadge}
</div>
{liveBadge}
{liveBadgePosition === "right" && liveBadge}
{closeButton}
</div>
);