PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Update Voice Broadcast buffering style (#9643)

Browse source
This commit is contained in:
Michael Weimann 2022-11-30 11:43:58 +01:00 committed by GitHub
parent 459df4583e
commit d0fd0cfea0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 163 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
res/css/voice-broadcast/atoms/_VoiceBroadcastHeader.pcss
View file

@ -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 {

1
src/i18n/strings/en_EN.json
View file

@ -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",

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

@ -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 }

61
src/voice-broadcast/components/molecules/VoiceBroadcastPlaybackBody.tsx
View file

@ -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 }

7
src/voice-broadcast/hooks/useVoiceBroadcastPlayback.ts
View file

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

17
test/voice-broadcast/components/atoms/VoiceBroadcastHeader-test.tsx
View file

@ -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(<VoiceBroadcastHeader
live={live}
microphoneLabel={sender.name}
room={room}
showBroadcast={showBroadcast}
showBuffering={buffering}
/>);
};
@ -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;
});

66
test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastHeader-test.tsx.snap
View file

@ -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`] = `
<div>
<div
class="mx_VoiceBroadcastHeader"
>
<div
data-testid="room-avatar"
>
room avatar:
!room:example.com
</div>
<div
class="mx_VoiceBroadcastHeader_content"
>
<div
class="mx_VoiceBroadcastHeader_room"
>
!room:example.com
</div>
<div
class="mx_VoiceBroadcastHeader_line"
>
<div
class="mx_Icon mx_Icon_16"
/>
<span>
test user
</span>
</div>
<div
class="mx_VoiceBroadcastHeader_line"
>
<div
class="mx_Icon mx_Icon_16"
/>
Voice broadcast
</div>
</div>
<div
class="mx_LiveBadge"
>
<div
class="mx_Icon mx_Icon_16"
/>
Live
</div>
</div>
</div>
`;
exports[`VoiceBroadcastHeader when rendering a live (grey) broadcast header with broadcast info should render the header with a grey live badge 1`] = `
<div>
<div
@ -87,6 +137,22 @@ exports[`VoiceBroadcastHeader when rendering a live broadcast header with broadc
/>
Voice broadcast
</div>
<div
class="mx_VoiceBroadcastHeader_line"
>
<div
class="mx_Spinner"
>
<div
aria-label="Loading..."
class="mx_Spinner_icon"
data-testid="spinner"
role="progressbar"
style="width: 14px; height: 14px;"
/>
</div>
Buffering…
</div>
</div>
<div
class="mx_LiveBadge"

25
test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap
View file

@ -252,9 +252,17 @@ exports[`VoiceBroadcastPlaybackBody when rendering a buffering voice broadcast s
class="mx_VoiceBroadcastHeader_line"
>
<div
class="mx_Icon mx_Icon_16"
/>
Voice broadcast
class="mx_Spinner"
>
<div
aria-label="Loading..."
class="mx_Spinner_icon"
data-testid="spinner"
role="progressbar"
style="width: 14px; height: 14px;"
/>
</div>
Buffering…
</div>
</div>
<div
@ -280,14 +288,13 @@ exports[`VoiceBroadcastPlaybackBody when rendering a buffering voice broadcast s
/>
</div>
<div
class="mx_Spinner"
aria-label="pause voice broadcast"
class="mx_AccessibleButton mx_VoiceBroadcastControl"
role="button"
tabindex="0"
>
<div
aria-label="Loading..."
class="mx_Spinner_icon"
data-testid="spinner"
role="progressbar"
style="width: 32px; height: 32px;"
class="mx_Icon mx_Icon_16"
/>
</div>
<div