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

Add voice broadcast device selection tooltip (#9726)

Browse source
This commit is contained in:
Michael Weimann 2022-12-08 15:27:32 +01:00 committed by GitHub
parent 95ac957fa4
commit 1b6d753cfe
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 56 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -26,6 +26,7 @@ import { Icon as XIcon } from "../../../../res/img/element-icons/cancel-rounded.
import Clock from "../../../components/views/audio_messages/Clock";
import { formatTimeLeft } from "../../../DateUtils";
import Spinner from "../../../components/views/elements/Spinner";
import AccessibleTooltipButton from "../../../components/views/elements/AccessibleTooltipButton";
interface VoiceBroadcastHeaderProps {
live?: VoiceBroadcastLiveness;
@ -87,13 +88,14 @@ export const VoiceBroadcastHeader: React.FC<VoiceBroadcastHeaderProps> = ({
});
const microphoneLine = microphoneLabel && (
<div
<AccessibleTooltipButton
className={microphoneLineClasses}
onClick={onMicrophoneLineClick}
title={_t("Change input device")}
>
<MicrophoneIcon className="mx_Icon mx_Icon_16" />
<span>{ microphoneLabel }</span>
</div>
</AccessibleTooltipButton>
);
return <div className="mx_VoiceBroadcastHeader">

8
src/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip.tsx
View file

@ -28,9 +28,9 @@ import { Icon as PauseIcon } from "../../../../res/img/element-icons/pause.svg";
import { Icon as RecordIcon } from "../../../../res/img/element-icons/Record.svg";
import { Icon as MicrophoneIcon } from "../../../../res/img/element-icons/Mic.svg";
import { _t } from "../../../languageHandler";
import AccessibleButton from "../../../components/views/elements/AccessibleButton";
import { useAudioDeviceSelection } from "../../../hooks/useAudioDeviceSelection";
import { DevicesContextMenu } from "../../../components/views/audio_messages/DevicesContextMenu";
import AccessibleTooltipButton from "../../../components/views/elements/AccessibleTooltipButton";
interface VoiceBroadcastRecordingPipProps {
recording: VoiceBroadcastRecording;
@ -91,12 +91,12 @@ export const VoiceBroadcastRecordingPip: React.FC<VoiceBroadcastRecordingPipProp
<hr className="mx_VoiceBroadcastBody_divider" />
<div className="mx_VoiceBroadcastBody_controls">
{ toggleControl }
<AccessibleButton
aria-label={_t("Change input device")}
<AccessibleTooltipButton
onClick={() => setShowDeviceSelect(true)}
title={_t("Change input device")}
>
<MicrophoneIcon className="mx_Icon mx_Icon_16 mx_Icon_alert" />
</AccessibleButton>
</AccessibleTooltipButton>
<VoiceBroadcastControl
icon={StopIcon}
label="Stop Recording"

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

@ -20,7 +20,10 @@ exports[`VoiceBroadcastHeader when rendering a buffering live broadcast header w
!room:example.com
</div>
<div
class="mx_VoiceBroadcastHeader_line"
aria-label="Change input device"
class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
role="button"
tabindex="0"
>
<div
class="mx_Icon mx_Icon_16"
@ -70,7 +73,10 @@ exports[`VoiceBroadcastHeader when rendering a live (grey) broadcast header with
!room:example.com
</div>
<div
class="mx_VoiceBroadcastHeader_line"
aria-label="Change input device"
class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
role="button"
tabindex="0"
>
<div
class="mx_Icon mx_Icon_16"
@ -120,7 +126,10 @@ exports[`VoiceBroadcastHeader when rendering a live broadcast header with broadc
!room:example.com
</div>
<div
class="mx_VoiceBroadcastHeader_line"
aria-label="Change input device"
class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
role="button"
tabindex="0"
>
<div
class="mx_Icon mx_Icon_16"
@ -186,7 +195,10 @@ exports[`VoiceBroadcastHeader when rendering a non-live broadcast header should
!room:example.com
</div>
<div
class="mx_VoiceBroadcastHeader_line"
aria-label="Change input device"
class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
role="button"
tabindex="0"
>
<div
class="mx_Icon mx_Icon_16"

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

@ -23,7 +23,10 @@ exports[`VoiceBroadcastPlaybackBody when rendering a 0/not-live broadcast should
My room
</div>
<div
class="mx_VoiceBroadcastHeader_line"
aria-label="Change input device"
class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
role="button"
tabindex="0"
>
<div
class="mx_Icon mx_Icon_16"
@ -127,7 +130,10 @@ exports[`VoiceBroadcastPlaybackBody when rendering a 1/live broadcast should ren
My room
</div>
<div
class="mx_VoiceBroadcastHeader_line"
aria-label="Change input device"
class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
role="button"
tabindex="0"
>
<div
class="mx_Icon mx_Icon_16"
@ -239,7 +245,10 @@ exports[`VoiceBroadcastPlaybackBody when rendering a buffering voice broadcast s
My room
</div>
<div
class="mx_VoiceBroadcastHeader_line"
aria-label="Change input device"
class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
role="button"
tabindex="0"
>
<div
class="mx_Icon mx_Icon_16"
@ -359,7 +368,10 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing broadcast should re
My room
</div>
<div
class="mx_VoiceBroadcastHeader_line"
aria-label="Change input device"
class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
role="button"
tabindex="0"
>
<div
class="mx_Icon mx_Icon_16"
@ -463,7 +475,10 @@ exports[`VoiceBroadcastPlaybackBody when rendering a stopped broadcast should re
My room
</div>
<div
class="mx_VoiceBroadcastHeader_line"
aria-label="Change input device"
class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
role="button"
tabindex="0"
>
<div
class="mx_Icon mx_Icon_16"

5
test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPreRecordingPip-test.tsx.snap
View file

@ -23,7 +23,10 @@ exports[`VoiceBroadcastPreRecordingPip when rendered should match the snapshot 1
!room@example.com
</div>
<div
class="mx_VoiceBroadcastHeader_line mx_VoiceBroadcastHeader_mic--clickable"
aria-label="Change input device"
class="mx_AccessibleButton mx_VoiceBroadcastHeader_line mx_VoiceBroadcastHeader_mic--clickable"
role="button"
tabindex="0"
>
<div
class="mx_Icon mx_Icon_16"

10
test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingBody-test.tsx.snap
View file

@ -23,7 +23,10 @@ exports[`VoiceBroadcastRecordingBody when rendering a live broadcast should rend
My room
</div>
<div
class="mx_VoiceBroadcastHeader_line"
aria-label="Change input device"
class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
role="button"
tabindex="0"
>
<div
class="mx_Icon mx_Icon_16"
@ -69,7 +72,10 @@ exports[`VoiceBroadcastRecordingBody when rendering a paused broadcast should re
My room
</div>
<div
class="mx_VoiceBroadcastHeader_line"
aria-label="Change input device"
class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
role="button"
tabindex="0"
>
<div
class="mx_Icon mx_Icon_16"