Update Voice Broadcast buffering style (#9643)

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<VoiceBroadcastHeaderProps> = ({
     room,
     microphoneLabel,
     showBroadcast = false,
+    showBuffering = false,
     showClose = false,
     timeLeft,
 }) => {
-    const broadcast = showBroadcast
-        ? <div className="mx_VoiceBroadcastHeader_line">
+    const broadcast = showBroadcast && (
+        <div className="mx_VoiceBroadcastHeader_line">
             <LiveIcon className="mx_Icon mx_Icon_16" />
             { _t("Voice broadcast") }
         </div>
-        : null;
+    );
 
-    const liveBadge = live === "not-live"
-        ? null
-        : <LiveBadge grey={live === "grey"} />;
+    const liveBadge = live !== "not-live" && (
+        <LiveBadge grey={live === "grey"} />
+    );
 
-    const closeButton = showClose
-        ? <AccessibleButton onClick={onCloseClick}>
+    const closeButton = showClose && (
+        <AccessibleButton onClick={onCloseClick}>
             <XIcon className="mx_Icon mx_Icon_16" />
         </AccessibleButton>
-        : null;
+    );
 
-    const timeLeftLine = timeLeft
-        ? <div className="mx_VoiceBroadcastHeader_line">
+    const timeLeftLine = timeLeft && (
+        <div className="mx_VoiceBroadcastHeader_line">
             <TimerIcon className="mx_Icon mx_Icon_16" />
             <Clock formatFn={formatTimeLeft} seconds={timeLeft} />
         </div>
-        : null;
+    );
+
+    const buffering = showBuffering && (
+        <div className="mx_VoiceBroadcastHeader_line">
+            <Spinner w={14} h={14} />
+            { _t("Buffering…") }
+        </div>
+    );
 
     const microphoneLineClasses = classNames({
         mx_VoiceBroadcastHeader_line: true,
         ["mx_VoiceBroadcastHeader_mic--clickable"]: onMicrophoneLineClick,
     });
 
-    const microphoneLine = microphoneLabel
-        ? <div
+    const microphoneLine = microphoneLabel && (
+        <div
             className={microphoneLineClasses}
             onClick={onMicrophoneLineClick}
         >
             <MicrophoneIcon className="mx_Icon mx_Icon_16" />
             <span>{ microphoneLabel }</span>
         </div>
-        : null;
+    );
 
     return <div className="mx_VoiceBroadcastHeader">
         <RoomAvatar room={room} width={32} height={32} />
@@ -95,6 +105,7 @@ export const VoiceBroadcastHeader: React.FC<VoiceBroadcastHeaderProps> = ({
             { microphoneLine }
             { timeLeftLine }
             { broadcast }
+            { buffering }
         </div>
         { liveBadge }
         { closeButton }

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<VoiceBroadcastPlaybackBodyProp
         toggle,
     } = useVoiceBroadcastPlayback(playback);
 
-    let control: React.ReactNode;
+    let controlIcon: React.FC<React.SVGProps<SVGSVGElement>>;
+    let controlLabel: string;
+    let className = "";
 
-    if (playbackState === VoiceBroadcastPlaybackState.Buffering) {
-        control = <Spinner />;
-    } else {
-        let controlIcon: React.FC<React.SVGProps<SVGSVGElement>>;
-        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 = <VoiceBroadcastControl
-            className={className}
-            label={controlLabel}
-            icon={controlIcon}
-            onClick={toggle}
-        />;
+    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 = <VoiceBroadcastControl
+        className={className}
+        label={controlLabel}
+        icon={controlIcon}
+        onClick={toggle}
+    />;
+
     let seekBackwardButton: ReactElement | null = null;
     let seekForwardButton: ReactElement | null = null;
 
@@ -124,7 +118,8 @@ export const VoiceBroadcastPlaybackBody: React.FC<VoiceBroadcastPlaybackBodyProp
                 live={liveness}
                 microphoneLabel={sender?.name}
                 room={room}
-                showBroadcast={true}
+                showBroadcast={playbackState !== VoiceBroadcastPlaybackState.Buffering}
+                showBuffering={playbackState === VoiceBroadcastPlaybackState.Buffering}
             />
             <div className="mx_VoiceBroadcastBody_controls">
                 { seekBackwardButton }

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();
     };