From d0fd0cfea0810a7be6fdb63d6453085d58276e44 Mon Sep 17 00:00:00 2001 From: Michael Weimann Date: Wed, 30 Nov 2022 11:43:58 +0100 Subject: [PATCH] Update Voice Broadcast buffering style (#9643) --- .../atoms/_VoiceBroadcastHeader.pcss | 5 +- src/i18n/strings/en_EN.json | 1 + .../components/atoms/VoiceBroadcastHeader.tsx | 41 +++++++----- .../molecules/VoiceBroadcastPlaybackBody.tsx | 61 ++++++++--------- .../hooks/useVoiceBroadcastPlayback.ts | 7 ++ .../atoms/VoiceBroadcastHeader-test.tsx | 17 ++++- .../VoiceBroadcastHeader-test.tsx.snap | 66 +++++++++++++++++++ .../VoiceBroadcastPlaybackBody-test.tsx.snap | 25 ++++--- 8 files changed, 163 insertions(+), 60 deletions(-) diff --git a/res/css/voice-broadcast/atoms/_VoiceBroadcastHeader.pcss b/res/css/voice-broadcast/atoms/_VoiceBroadcastHeader.pcss index 1ff29bd985..90092a35ac 100644 --- a/res/css/voice-broadcast/atoms/_VoiceBroadcastHeader.pcss +++ b/res/css/voice-broadcast/atoms/_VoiceBroadcastHeader.pcss @@ -40,8 +40,9 @@ limitations under the License. display: flex; gap: $spacing-4; - i { - flex-shrink: 0; + .mx_Spinner { + flex: 0 0 14px; + padding: 1px; } span { diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index c2f34afca9..c93e1a9626 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -660,6 +660,7 @@ "Change input device": "Change input device", "Live": "Live", "Voice broadcast": "Voice broadcast", + "Buffering…": "Buffering…", "Cannot reach homeserver": "Cannot reach homeserver", "Ensure you have a stable internet connection, or get in touch with the server admin": "Ensure you have a stable internet connection, or get in touch with the server admin", "Your %(brand)s is misconfigured": "Your %(brand)s is misconfigured", diff --git a/src/voice-broadcast/components/atoms/VoiceBroadcastHeader.tsx b/src/voice-broadcast/components/atoms/VoiceBroadcastHeader.tsx index be31cd4efe..64640ca793 100644 --- a/src/voice-broadcast/components/atoms/VoiceBroadcastHeader.tsx +++ b/src/voice-broadcast/components/atoms/VoiceBroadcastHeader.tsx @@ -25,6 +25,7 @@ import AccessibleButton from "../../../components/views/elements/AccessibleButto import { Icon as XIcon } from "../../../../res/img/element-icons/cancel-rounded.svg"; import Clock from "../../../components/views/audio_messages/Clock"; import { formatTimeLeft } from "../../../DateUtils"; +import Spinner from "../../../components/views/elements/Spinner"; interface VoiceBroadcastHeaderProps { live?: VoiceBroadcastLiveness; @@ -33,6 +34,7 @@ interface VoiceBroadcastHeaderProps { room: Room; microphoneLabel?: string; showBroadcast?: boolean; + showBuffering?: boolean; timeLeft?: number; showClose?: boolean; } @@ -44,47 +46,55 @@ export const VoiceBroadcastHeader: React.FC = ({ room, microphoneLabel, showBroadcast = false, + showBuffering = false, showClose = false, timeLeft, }) => { - const broadcast = showBroadcast - ?
+ const broadcast = showBroadcast && ( +
{ _t("Voice broadcast") }
- : null; + ); - const liveBadge = live === "not-live" - ? null - : ; + const liveBadge = live !== "not-live" && ( + + ); - const closeButton = showClose - ? + const closeButton = showClose && ( + - : null; + ); - const timeLeftLine = timeLeft - ?
+ const timeLeftLine = timeLeft && ( +
- : null; + ); + + const buffering = showBuffering && ( +
+ + { _t("Buffering…") } +
+ ); const microphoneLineClasses = classNames({ mx_VoiceBroadcastHeader_line: true, ["mx_VoiceBroadcastHeader_mic--clickable"]: onMicrophoneLineClick, }); - const microphoneLine = microphoneLabel - ?
{ microphoneLabel }
- : null; + ); return
@@ -95,6 +105,7 @@ export const VoiceBroadcastHeader: React.FC = ({ { microphoneLine } { timeLeftLine } { broadcast } + { buffering }
{ liveBadge } { closeButton } diff --git a/src/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody.tsx b/src/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody.tsx index 7ba06a1501..cc86e3304d 100644 --- a/src/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody.tsx +++ b/src/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody.tsx @@ -23,7 +23,6 @@ import { VoiceBroadcastPlayback, VoiceBroadcastPlaybackState, } from "../.."; -import Spinner from "../../../components/views/elements/Spinner"; import { useVoiceBroadcastPlayback } from "../../hooks/useVoiceBroadcastPlayback"; import { Icon as PlayIcon } from "../../../../res/img/element-icons/play.svg"; import { Icon as PauseIcon } from "../../../../res/img/element-icons/pause.svg"; @@ -54,40 +53,35 @@ export const VoiceBroadcastPlaybackBody: React.FC>; + let controlLabel: string; + let className = ""; - if (playbackState === VoiceBroadcastPlaybackState.Buffering) { - control = ; - } else { - let controlIcon: React.FC>; - let controlLabel: string; - let className = ""; - - switch (playbackState) { - case VoiceBroadcastPlaybackState.Stopped: - controlIcon = PlayIcon; - className = "mx_VoiceBroadcastControl-play"; - controlLabel = _t("play voice broadcast"); - break; - case VoiceBroadcastPlaybackState.Paused: - controlIcon = PlayIcon; - className = "mx_VoiceBroadcastControl-play"; - controlLabel = _t("resume voice broadcast"); - break; - case VoiceBroadcastPlaybackState.Playing: - controlIcon = PauseIcon; - controlLabel = _t("pause voice broadcast"); - break; - } - - control = ; + switch (playbackState) { + case VoiceBroadcastPlaybackState.Stopped: + controlIcon = PlayIcon; + className = "mx_VoiceBroadcastControl-play"; + controlLabel = _t("play voice broadcast"); + break; + case VoiceBroadcastPlaybackState.Paused: + controlIcon = PlayIcon; + className = "mx_VoiceBroadcastControl-play"; + controlLabel = _t("resume voice broadcast"); + break; + case VoiceBroadcastPlaybackState.Buffering: + case VoiceBroadcastPlaybackState.Playing: + controlIcon = PauseIcon; + controlLabel = _t("pause voice broadcast"); + break; } + const control = ; + let seekBackwardButton: ReactElement | null = null; let seekForwardButton: ReactElement | null = null; @@ -124,7 +118,8 @@ export const VoiceBroadcastPlaybackBody: React.FC
{ seekBackwardButton } diff --git a/src/voice-broadcast/hooks/useVoiceBroadcastPlayback.ts b/src/voice-broadcast/hooks/useVoiceBroadcastPlayback.ts index 0b515c4437..adeb19c231 100644 --- a/src/voice-broadcast/hooks/useVoiceBroadcastPlayback.ts +++ b/src/voice-broadcast/hooks/useVoiceBroadcastPlayback.ts @@ -27,6 +27,13 @@ import { export const useVoiceBroadcastPlayback = (playback: VoiceBroadcastPlayback) => { const client = MatrixClientPeg.get(); const room = client.getRoom(playback.infoEvent.getRoomId()); + + if (!room) { + throw new Error( + `Voice Broadcast room not found (event ${playback.infoEvent.getId()})`, + ); + } + const playbackToggle = () => { playback.toggle(); }; diff --git a/test/voice-broadcast/components/atoms/VoiceBroadcastHeader-test.tsx b/test/voice-broadcast/components/atoms/VoiceBroadcastHeader-test.tsx index f056137813..e090841c82 100644 --- a/test/voice-broadcast/components/atoms/VoiceBroadcastHeader-test.tsx +++ b/test/voice-broadcast/components/atoms/VoiceBroadcastHeader-test.tsx @@ -35,12 +35,17 @@ describe("VoiceBroadcastHeader", () => { const sender = new RoomMember(roomId, userId); let container: Container; - const renderHeader = (live: VoiceBroadcastLiveness, showBroadcast: boolean = undefined): RenderResult => { + const renderHeader = ( + live: VoiceBroadcastLiveness, + showBroadcast?: boolean, + buffering?: boolean, + ): RenderResult => { return render(); }; @@ -51,6 +56,16 @@ describe("VoiceBroadcastHeader", () => { }); describe("when rendering a live broadcast header with broadcast info", () => { + beforeEach(() => { + container = renderHeader("live", true, true).container; + }); + + it("should render the header with a red live badge", () => { + expect(container).toMatchSnapshot(); + }); + }); + + describe("when rendering a buffering live broadcast header with broadcast info", () => { beforeEach(() => { container = renderHeader("live", true).container; }); diff --git a/test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastHeader-test.tsx.snap b/test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastHeader-test.tsx.snap index 1f4b657a22..c00d81e37d 100644 --- a/test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastHeader-test.tsx.snap +++ b/test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastHeader-test.tsx.snap @@ -1,5 +1,55 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`VoiceBroadcastHeader when rendering a buffering live broadcast header with broadcast info should render the header with a red live badge 1`] = ` +
+
+
+ room avatar: + !room:example.com +
+
+
+ !room:example.com +
+
+
+ + test user + +
+
+
+ Voice broadcast +
+
+
+
+ Live +
+
+
+`; + exports[`VoiceBroadcastHeader when rendering a live (grey) broadcast header with broadcast info should render the header with a grey live badge 1`] = `
Voice broadcast
+
+
+
+
+ Buffering… +
- Voice broadcast + class="mx_Spinner" + > +
+
+ Buffering…