imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add input device selection during voice broadcast (#9620)

Browse source
This commit is contained in:
Michael Weimann 2022-11-28 15:16:44 +01:00 • committed by GitHub
parent 5b5c3ab33c
commit b302275289
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 486 additions and 87 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React from "react";
import React, { useRef, useState } from "react";
import {
VoiceBroadcastControl,
@ -26,13 +26,18 @@ import { VoiceBroadcastHeader } from "../atoms/VoiceBroadcastHeader";
import { Icon as StopIcon } from "../../../../res/img/element-icons/Stop.svg";
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";
interface VoiceBroadcastRecordingPipProps {
recording: VoiceBroadcastRecording;
}
export const VoiceBroadcastRecordingPip: React.FC<VoiceBroadcastRecordingPipProps> = ({ recording }) => {
const pipRef = useRef<HTMLDivElement | null>(null);
const {
live,
timeLeft,
@ -41,6 +46,29 @@ export const VoiceBroadcastRecordingPip: React.FC<VoiceBroadcastRecordingPipProp
stopRecording,
toggleRecording,
} = useVoiceBroadcastRecording(recording);
const { currentDevice, devices, setDevice } = useAudioDeviceSelection();
const onDeviceSelect = async (device: MediaDeviceInfo) => {
setShowDeviceSelect(false);
if (currentDevice.deviceId === device.deviceId) {
// device unchanged
return;
}
setDevice(device);
if ([VoiceBroadcastInfoState.Paused, VoiceBroadcastInfoState.Stopped].includes(recordingState)) {
// Nothing to do in these cases. Resume will use the selected device.
return;
}
// pause and resume to switch the input device
await recording.pause();
await recording.resume();
};
const [showDeviceSelect, setShowDeviceSelect] = useState<boolean>(false);
const toggleControl = recordingState === VoiceBroadcastInfoState.Paused
? <VoiceBroadcastControl
@ -53,6 +81,7 @@ export const VoiceBroadcastRecordingPip: React.FC<VoiceBroadcastRecordingPipProp
return <div
className="mx_VoiceBroadcastBody mx_VoiceBroadcastBody--pip"
ref={pipRef}
>
<VoiceBroadcastHeader
live={live ? "live" : "grey"}
@ -62,11 +91,25 @@ export const VoiceBroadcastRecordingPip: React.FC<VoiceBroadcastRecordingPipProp
<hr className="mx_VoiceBroadcastBody_divider" />
<div className="mx_VoiceBroadcastBody_controls">
{ toggleControl }
<AccessibleButton
aria-label={_t("Change input device")}
onClick={() => setShowDeviceSelect(true)}
>
<MicrophoneIcon className="mx_Icon mx_Icon_16 mx_Icon_alert" />
</AccessibleButton>
<VoiceBroadcastControl
icon={StopIcon}
label="Stop Recording"
onClick={stopRecording}
/>
</div>
{
showDeviceSelect && <DevicesContextMenu
containerRef={pipRef}
currentDevice={currentDevice}
devices={devices}
onDeviceSelect={onDeviceSelect}
/>
}
</div>;
};