OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Update voice broadcast header to new design (#9415)

pull/28217/head
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
res/css/voice-broadcast/atoms/_PlaybackControlButton.pcss
View File

@ -21,5 +21,6 @@ limitations under the License.
display: flex;
height: 32px;
justify-content: center;
margin-bottom: $spacing-8;
width: 32px;
}

11
res/css/voice-broadcast/atoms/_VoiceBroadcastHeader.pcss
View File

@ -16,20 +16,13 @@ limitations under the License.
display: flex;
gap: $spacing-8;
line-height: 20px;
margin-bottom: $spacing-8;
margin-bottom: $spacing-16;
width: 266px;
}
.mx_VoiceBroadcastHeader_sender {
font-size: $font-12px;
font-weight: $font-semi-bold;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mx_VoiceBroadcastHeader_room {
font-size: $font-12px;
font-weight: $font-semi-bold;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

3
src/components/atoms/Icon.tsx
View File

@ -17,17 +17,20 @@ limitations under the License.
import React from "react";
import liveIcon from "../../../res/img/element-icons/live.svg";
import microphoneIcon from "../../../res/img/voip/call-view/mic-on.svg";
import pauseIcon from "../../../res/img/element-icons/pause.svg";
import playIcon from "../../../res/img/element-icons/play.svg";
export enum IconType {
Live,
Microphone,
Pause,
Play,
}
const iconTypeMap = new Map([
[IconType.Live, liveIcon],
[IconType.Microphone, microphoneIcon],
[IconType.Pause, pauseIcon],
[IconType.Play, playIcon],
]);

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>

4
src/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody.tsx
View File

@ -31,7 +31,7 @@ export const VoiceBroadcastPlaybackBody: React.FC<VoiceBroadcastPlaybackBodyProp
playback,
}) => {
const {
roomName,
room,
sender,
toggle,
playbackState,
@ -42,7 +42,7 @@ export const VoiceBroadcastPlaybackBody: React.FC<VoiceBroadcastPlaybackBodyProp
<VoiceBroadcastHeader
live={false}
sender={sender}
roomName={roomName}
room={room}
showBroadcast={true}
/>
<div className="mx_VoiceBroadcastPlaybackBody_controls">

4
src/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody.tsx
View File

@ -22,7 +22,7 @@ interface VoiceBroadcastRecordingBodyProps {
export const VoiceBroadcastRecordingBody: React.FC<VoiceBroadcastRecordingBodyProps> = ({ recording }) => {
const {
live,
roomName,
room,
sender,
stopRecording,
} = useVoiceBroadcastRecording(recording);
@ -35,7 +35,7 @@ export const VoiceBroadcastRecordingBody: React.FC<VoiceBroadcastRecordingBodyPr
<VoiceBroadcastHeader
live={live}
sender={sender}
roomName={roomName}
room={room}
/>
</div>
);

2
src/voice-broadcast/hooks/useVoiceBroadcastPlayback.ts
View File

@ -41,7 +41,7 @@ export const useVoiceBroadcastPlayback = (playback: VoiceBroadcastPlayback) => {
);
return {
roomName: room.name,
room: room,
sender: playback.infoEvent.sender,
toggle: playbackToggle,
playbackState,

2
src/voice-broadcast/hooks/useVoiceBroadcastRecording.ts
View File

@ -44,7 +44,7 @@ export const useVoiceBroadcastRecording = (recording: VoiceBroadcastRecording) =
return {
live,
roomName: room.name,
room,
sender: recording.infoEvent.sender,
stopRecording,
};

2
src/voice-broadcast/models/VoiceBroadcastPlayback.ts
View File

@ -70,7 +70,7 @@ export class VoiceBroadcastPlayback
this.emit(VoiceBroadcastPlaybackEvent.StateChanged, state);
}
public destroy(): void {
destroy(): void {
this.removeAllListeners();
}
}

18
test/voice-broadcast/components/atoms/VoiceBroadcastHeader-test.tsx
View File

@ -13,15 +13,25 @@ limitations under the License.
import React from "react";
import { Container } from "react-dom";
import { RoomMember } from "matrix-js-sdk/src/matrix";
import { MatrixClient, Room, RoomMember } from "matrix-js-sdk/src/matrix";
import { render, RenderResult } from "@testing-library/react";
import { VoiceBroadcastHeader } from "../../../../src/voice-broadcast";
import { mkRoom, stubClient } from "../../../test-utils";
// mock RoomAvatar, because it is doing too much fancy stuff
jest.mock("../../../../src/components/views/avatars/RoomAvatar", () => ({
__esModule: true,
default: jest.fn().mockImplementation(({ room }) => {
return <div data-testid="room-avatar">room avatar: { room.name }</div>;
}),
}));
describe("VoiceBroadcastHeader", () => {
const userId = "@user:example.com";
const roomId = "!room:example.com";
const roomName = "test room";
let client: MatrixClient;
let room: Room;
const sender = new RoomMember(roomId, userId);
let container: Container;
@ -29,12 +39,14 @@ describe("VoiceBroadcastHeader", () => {
return render(<VoiceBroadcastHeader
live={live}
sender={sender}
roomName={roomName}
room={room}
showBroadcast={showBroadcast}
/>);
};
beforeAll(() => {
client = stubClient();
room = mkRoom(client, roomId);
sender.name = "test user";
});

84
test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastHeader-test.tsx.snap
View File

@ -5,38 +5,30 @@ exports[`VoiceBroadcastHeader when rendering a live broadcast header with broadc
<div
class="mx_VoiceBroadcastHeader"
>
<span
class="mx_BaseAvatar"
role="presentation"
<div
data-testid="room-avatar"
>
<span
aria-hidden="true"
class="mx_BaseAvatar_initial"
style="font-size: 26px; width: 40px; line-height: 40px;"
>
T
</span>
<img
alt=""
aria-hidden="true"
class="mx_BaseAvatar_image"
src="data:image/png;base64,00"
style="width: 40px; height: 40px;"
title="@user:example.com"
/>
</span>
room avatar:
!room:example.com
</div>
<div
class="mx_VoiceBroadcastHeader_content"
>
<div
class="mx_VoiceBroadcastHeader_sender"
>
test user
</div>
<div
class="mx_VoiceBroadcastHeader_room"
>
test room
!room:example.com
</div>
<div
class="mx_VoiceBroadcastHeader_line"
>
<i
aria-hidden="true"
class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
role="presentation"
style="mask-image: url(\\"image-file-stub\\");"
/>
test user
</div>
<div
class="mx_VoiceBroadcastHeader_line"
@ -70,38 +62,30 @@ exports[`VoiceBroadcastHeader when rendering a non-live broadcast header should
<div
class="mx_VoiceBroadcastHeader"
>
<span
class="mx_BaseAvatar"
role="presentation"
<div
data-testid="room-avatar"
>
<span
aria-hidden="true"
class="mx_BaseAvatar_initial"
style="font-size: 26px; width: 40px; line-height: 40px;"
>
T
</span>
<img
alt=""
aria-hidden="true"
class="mx_BaseAvatar_image"
src="data:image/png;base64,00"
style="width: 40px; height: 40px;"
title="@user:example.com"
/>
</span>
room avatar:
!room:example.com
</div>
<div
class="mx_VoiceBroadcastHeader_content"
>
<div
class="mx_VoiceBroadcastHeader_sender"
>
test user
</div>
<div
class="mx_VoiceBroadcastHeader_room"
>
test room
!room:example.com
</div>
<div
class="mx_VoiceBroadcastHeader_line"
>
<i
aria-hidden="true"
class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
role="presentation"
style="mask-image: url(\\"image-file-stub\\");"
/>
test user
</div>
</div>
</div>

8
test/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody-test.tsx
View File

@ -27,6 +27,14 @@ import {
} from "../../../../src/voice-broadcast";
import { mkEvent, stubClient } from "../../../test-utils";
// mock RoomAvatar, because it is doing too much fancy stuff
jest.mock("../../../../src/components/views/avatars/RoomAvatar", () => ({
__esModule: true,
default: jest.fn().mockImplementation(({ room }) => {
return <div data-testid="room-avatar">room avatar: { room.name }</div>;
}),
}));
describe("VoiceBroadcastPlaybackBody", () => {
const userId = "@user:example.com";
const roomId = "!room:example.com";

8
test/voice-broadcast/components/molecules/VoiceBroadcastRecordingBody-test.tsx
View File

@ -27,6 +27,14 @@ import {
} from "../../../../src/voice-broadcast";
import { mkEvent, stubClient } from "../../../test-utils";
// mock RoomAvatar, because it is doing too much fancy stuff
jest.mock("../../../../src/components/views/avatars/RoomAvatar", () => ({
__esModule: true,
default: jest.fn().mockImplementation(({ room }) => {
return <div data-testid="room-avatar">room avatar: { room.name }</div>;
}),
}));
describe("VoiceBroadcastRecordingBody", () => {
const userId = "@user:example.com";
const roomId = "!room:example.com";

40
test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap
View File

@ -8,39 +8,31 @@ exports[`VoiceBroadcastPlaybackBody when rendering a broadcast should render as
<div
class="mx_VoiceBroadcastHeader"
>
<span
class="mx_BaseAvatar"
role="presentation"
<div
data-testid="room-avatar"
>
<span
aria-hidden="true"
class="mx_BaseAvatar_initial"
style="font-size: 26px; width: 40px; line-height: 40px;"
>
U
</span>
<img
alt=""
aria-hidden="true"
class="mx_BaseAvatar_image"
src="data:image/png;base64,00"
style="width: 40px; height: 40px;"
title="@user:example.com"
/>
</span>
room avatar:
My room
</div>
<div
class="mx_VoiceBroadcastHeader_content"
>
<div
class="mx_VoiceBroadcastHeader_sender"
>
@user:example.com
</div>
<div
class="mx_VoiceBroadcastHeader_room"
>
My room
</div>
<div
class="mx_VoiceBroadcastHeader_line"
>
<i
aria-hidden="true"
class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
role="presentation"
style="mask-image: url(\\"image-file-stub\\");"
/>
@user:example.com
</div>
<div
class="mx_VoiceBroadcastHeader_line"
>

40
test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingBody-test.tsx.snap
View File

@ -8,39 +8,31 @@ exports[`VoiceBroadcastRecordingBody when rendering a live broadcast should rend
<div
class="mx_VoiceBroadcastHeader"
>
<span
class="mx_BaseAvatar"
role="presentation"
<div
data-testid="room-avatar"
>
<span
aria-hidden="true"
class="mx_BaseAvatar_initial"
style="font-size: 26px; width: 40px; line-height: 40px;"
>
U
</span>
<img
alt=""
aria-hidden="true"
class="mx_BaseAvatar_image"
src="data:image/png;base64,00"
style="width: 40px; height: 40px;"
title="@user:example.com"
/>
</span>
room avatar:
My room
</div>
<div
class="mx_VoiceBroadcastHeader_content"
>
<div
class="mx_VoiceBroadcastHeader_sender"
>
@user:example.com
</div>
<div
class="mx_VoiceBroadcastHeader_room"
>
My room
</div>
<div
class="mx_VoiceBroadcastHeader_line"
>
<i
aria-hidden="true"
class="mx_Icon mx_Icon_16 mx_Icon_compound-secondary-content"
role="presentation"
style="mask-image: url(\\"image-file-stub\\");"
/>
@user:example.com
</div>
</div>
<div
class="mx_LiveBadge"