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

Add voice broadcast device selection tooltip (#9726)

pull/28788/head^2
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 Clock from "../../../components/views/audio_messages/Clock";
import { formatTimeLeft } from "../../../DateUtils"; import { formatTimeLeft } from "../../../DateUtils";
import Spinner from "../../../components/views/elements/Spinner"; import Spinner from "../../../components/views/elements/Spinner";
import AccessibleTooltipButton from "../../../components/views/elements/AccessibleTooltipButton";
interface VoiceBroadcastHeaderProps { interface VoiceBroadcastHeaderProps {
live?: VoiceBroadcastLiveness; live?: VoiceBroadcastLiveness;
@ -87,13 +88,14 @@ export const VoiceBroadcastHeader: React.FC<VoiceBroadcastHeaderProps> = ({
}); });
const microphoneLine = microphoneLabel && ( const microphoneLine = microphoneLabel && (
<div <AccessibleTooltipButton
className={microphoneLineClasses} className={microphoneLineClasses}
onClick={onMicrophoneLineClick} onClick={onMicrophoneLineClick}
title={_t("Change input device")}
> >
<MicrophoneIcon className="mx_Icon mx_Icon_16" /> <MicrophoneIcon className="mx_Icon mx_Icon_16" />
<span>{ microphoneLabel }</span> <span>{ microphoneLabel }</span>
</div> </AccessibleTooltipButton>
); );
return <div className="mx_VoiceBroadcastHeader"> 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 RecordIcon } from "../../../../res/img/element-icons/Record.svg";
import { Icon as MicrophoneIcon } from "../../../../res/img/element-icons/Mic.svg"; import { Icon as MicrophoneIcon } from "../../../../res/img/element-icons/Mic.svg";
import { _t } from "../../../languageHandler"; import { _t } from "../../../languageHandler";
import AccessibleButton from "../../../components/views/elements/AccessibleButton";
import { useAudioDeviceSelection } from "../../../hooks/useAudioDeviceSelection"; import { useAudioDeviceSelection } from "../../../hooks/useAudioDeviceSelection";
import { DevicesContextMenu } from "../../../components/views/audio_messages/DevicesContextMenu"; import { DevicesContextMenu } from "../../../components/views/audio_messages/DevicesContextMenu";
import AccessibleTooltipButton from "../../../components/views/elements/AccessibleTooltipButton";
interface VoiceBroadcastRecordingPipProps { interface VoiceBroadcastRecordingPipProps {
recording: VoiceBroadcastRecording; recording: VoiceBroadcastRecording;
@ -91,12 +91,12 @@ export const VoiceBroadcastRecordingPip: React.FC<VoiceBroadcastRecordingPipProp
<hr className="mx_VoiceBroadcastBody_divider" /> <hr className="mx_VoiceBroadcastBody_divider" />
<div className="mx_VoiceBroadcastBody_controls"> <div className="mx_VoiceBroadcastBody_controls">
{ toggleControl } { toggleControl }
<AccessibleButton <AccessibleTooltipButton
aria-label={_t("Change input device")}
onClick={() => setShowDeviceSelect(true)} onClick={() => setShowDeviceSelect(true)}
title={_t("Change input device")}
> >
<MicrophoneIcon className="mx_Icon mx_Icon_16 mx_Icon_alert" /> <MicrophoneIcon className="mx_Icon mx_Icon_16 mx_Icon_alert" />
</AccessibleButton> </AccessibleTooltipButton>
<VoiceBroadcastControl <VoiceBroadcastControl
icon={StopIcon} icon={StopIcon}
label="Stop Recording" 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 !room:example.com
</div> </div>
<div <div
class="mx_VoiceBroadcastHeader_line" aria-label="Change input device"
class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
role="button"
tabindex="0"
> >
<div <div
class="mx_Icon mx_Icon_16" class="mx_Icon mx_Icon_16"
@ -70,7 +73,10 @@ exports[`VoiceBroadcastHeader when rendering a live (grey) broadcast header with
!room:example.com !room:example.com
</div> </div>
<div <div
class="mx_VoiceBroadcastHeader_line" aria-label="Change input device"
class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
role="button"
tabindex="0"
> >
<div <div
class="mx_Icon mx_Icon_16" class="mx_Icon mx_Icon_16"
@ -120,7 +126,10 @@ exports[`VoiceBroadcastHeader when rendering a live broadcast header with broadc
!room:example.com !room:example.com
</div> </div>
<div <div
class="mx_VoiceBroadcastHeader_line" aria-label="Change input device"
class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
role="button"
tabindex="0"
> >
<div <div
class="mx_Icon mx_Icon_16" class="mx_Icon mx_Icon_16"
@ -186,7 +195,10 @@ exports[`VoiceBroadcastHeader when rendering a non-live broadcast header should
!room:example.com !room:example.com
</div> </div>
<div <div
class="mx_VoiceBroadcastHeader_line" aria-label="Change input device"
class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
role="button"
tabindex="0"
> >
<div <div
class="mx_Icon mx_Icon_16" 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 My room
</div> </div>
<div <div
class="mx_VoiceBroadcastHeader_line" aria-label="Change input device"
class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
role="button"
tabindex="0"
> >
<div <div
class="mx_Icon mx_Icon_16" class="mx_Icon mx_Icon_16"
@ -127,7 +130,10 @@ exports[`VoiceBroadcastPlaybackBody when rendering a 1/live broadcast should ren
My room My room
</div> </div>
<div <div
class="mx_VoiceBroadcastHeader_line" aria-label="Change input device"
class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
role="button"
tabindex="0"
> >
<div <div
class="mx_Icon mx_Icon_16" class="mx_Icon mx_Icon_16"
@ -239,7 +245,10 @@ exports[`VoiceBroadcastPlaybackBody when rendering a buffering voice broadcast s
My room My room
</div> </div>
<div <div
class="mx_VoiceBroadcastHeader_line" aria-label="Change input device"
class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
role="button"
tabindex="0"
> >
<div <div
class="mx_Icon mx_Icon_16" class="mx_Icon mx_Icon_16"
@ -359,7 +368,10 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing broadcast should re
My room My room
</div> </div>
<div <div
class="mx_VoiceBroadcastHeader_line" aria-label="Change input device"
class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
role="button"
tabindex="0"
> >
<div <div
class="mx_Icon mx_Icon_16" class="mx_Icon mx_Icon_16"
@ -463,7 +475,10 @@ exports[`VoiceBroadcastPlaybackBody when rendering a stopped broadcast should re
My room My room
</div> </div>
<div <div
class="mx_VoiceBroadcastHeader_line" aria-label="Change input device"
class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
role="button"
tabindex="0"
> >
<div <div
class="mx_Icon mx_Icon_16" 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 !room@example.com
</div> </div>
<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 <div
class="mx_Icon mx_Icon_16" 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 My room
</div> </div>
<div <div
class="mx_VoiceBroadcastHeader_line" aria-label="Change input device"
class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
role="button"
tabindex="0"
> >
<div <div
class="mx_Icon mx_Icon_16" class="mx_Icon mx_Icon_16"
@ -69,7 +72,10 @@ exports[`VoiceBroadcastRecordingBody when rendering a paused broadcast should re
My room My room
</div> </div>
<div <div
class="mx_VoiceBroadcastHeader_line" aria-label="Change input device"
class="mx_AccessibleButton mx_VoiceBroadcastHeader_line"
role="button"
tabindex="0"
> >
<div <div
class="mx_Icon mx_Icon_16" class="mx_Icon mx_Icon_16"