Make the "Voice message" button in the message composer configurable

src/components/views/rooms/MessageComposer.tsx

@@ -104,6 +104,7 @@ interface IState {
     isStickerPickerOpen: boolean;
     showStickersButton: boolean;
     showPollsButton: boolean;
+    showVoiceRecordingButton: boolean;
     showVoiceBroadcastButton: boolean;
     isWysiwygLabEnabled: boolean;
     isRichTextEnabled: boolean;
@@ -142,6 +143,7 @@ export class MessageComposer extends React.Component<IProps, IState> {
             isStickerPickerOpen: false,
             showStickersButton: SettingsStore.getValue("MessageComposerInput.showStickersButton"),
             showPollsButton: SettingsStore.getValue("MessageComposerInput.showPollsButton"),
+            showVoiceRecordingButton: SettingsStore.getValue("MessageComposerInput.showVoiceRecordingButton"),
             showVoiceBroadcastButton: SettingsStore.getValue(Features.VoiceBroadcast),
             isWysiwygLabEnabled: SettingsStore.getValue<boolean>("feature_wysiwyg_composer"),
             isRichTextEnabled: true,
@@ -152,6 +154,7 @@ export class MessageComposer extends React.Component<IProps, IState> {
 
         SettingsStore.monitorSetting("MessageComposerInput.showStickersButton", null);
         SettingsStore.monitorSetting("MessageComposerInput.showPollsButton", null);
+        SettingsStore.monitorSetting("MessageComposerInput.showVoiceRecordingButton", null);
         SettingsStore.monitorSetting(Features.VoiceBroadcast, null);
         SettingsStore.monitorSetting("feature_wysiwyg_composer", null);
     }
@@ -228,6 +231,15 @@ export class MessageComposer extends React.Component<IProps, IState> {
                         }
                         break;
                     }
+                    case "MessageComposerInput.showVoiceRecordingButton": {
+                        const showVoiceRecordingButton = SettingsStore.getValue(
+                            "MessageComposerInput.showVoiceRecordingButton",
+                        );
+                        if (this.state.showVoiceRecordingButton !== showVoiceRecordingButton) {
+                            this.setState({ showVoiceRecordingButton });
+                        }
+                        break;
+                    }
                     case Features.VoiceBroadcast: {
                         if (this.state.showVoiceBroadcastButton !== settingUpdatedPayload.newValue) {
                             this.setState({ showVoiceBroadcastButton: !!settingUpdatedPayload.newValue });
@@ -632,6 +644,7 @@ export class MessageComposer extends React.Component<IProps, IState> {
                                     isRichTextEnabled={this.state.isRichTextEnabled}
                                     onComposerModeClick={this.onRichTextToggle}
                                     toggleButtonMenu={this.toggleButtonMenu}
+                                    showVoiceRecordingButton={this.state.showVoiceRecordingButton}
                                     showVoiceBroadcastButton={this.state.showVoiceBroadcastButton}
                                     onStartVoiceBroadcastClick={() => {
                                         setUpVoiceBroadcastPreRecording(

src/components/views/rooms/MessageComposerButtons.tsx

@@ -52,6 +52,7 @@ interface IProps {
     showPollsButton: boolean;
     showStickersButton: boolean;
     toggleButtonMenu: () => void;
+    showVoiceRecordingButton: boolean;
     showVoiceBroadcastButton: boolean;
     onStartVoiceBroadcastClick: () => void;
     isRichTextEnabled: boolean;
@@ -88,7 +89,7 @@ const MessageComposerButtons: React.FC<IProps> = (props: IProps) => {
         moreButtons = [
             uploadButton(), // props passed via UploadButtonContext
             showStickersButton(props),
-            voiceRecordingButton(props, narrow),
+            props.showVoiceRecordingButton ? voiceRecordingButton(props, narrow) : null,
             startVoiceBroadcastButton(props),
             props.showPollsButton ? pollButton(room, props.relation) : null,
             showLocationButton(props, room, matrixClient),
@@ -108,7 +109,7 @@ const MessageComposerButtons: React.FC<IProps> = (props: IProps) => {
         ];
         moreButtons = [
             showStickersButton(props),
-            voiceRecordingButton(props, narrow),
+            props.showVoiceRecordingButton ? voiceRecordingButton(props, narrow) : null,
             startVoiceBroadcastButton(props),
             props.showPollsButton ? pollButton(room, props.relation) : null,
             showLocationButton(props, room, matrixClient),

src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx

@@ -60,6 +60,7 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
         "MessageComposerInput.ctrlEnterToSend",
         "MessageComposerInput.surroundWith",
         "MessageComposerInput.showStickersButton",
+        "MessageComposerInput.showVoiceRecordingButton",
         "MessageComposerInput.insertTrailingColon",
     ];
 

src/i18n/strings/en_EN.json

@@ -1245,6 +1245,7 @@
     "Sometimes referred to as \"custom emojis\".": "Sometimes referred to as \"custom emojis\".",
     "Use custom size": "Use custom size",
     "Show polls button": "Show polls button",
+    "Show voice message button": "Show voice message button",
     "Use a more compact 'Modern' layout": "Use a more compact 'Modern' layout",
     "Show avatars in user, room and event mentions": "Show avatars in user, room and event mentions",
     "Surround selected text when typing special characters": "Surround selected text when typing special characters",

src/settings/Settings.tsx

@@ -514,6 +514,11 @@ export const SETTINGS: { [setting: string]: ISetting } = {
         displayName: _td("Show polls button"),
         default: true,
     },
+    "MessageComposerInput.showVoiceRecordingButton": {
+        supportedLevels: LEVELS_ACCOUNT_SETTINGS,
+        displayName: _td("Show voice message button"),
+        default: true,
+    },
     "MessageComposerInput.insertTrailingColon": {
         supportedLevels: LEVELS_ACCOUNT_SETTINGS,
         displayName: _td("settings|insert_trailing_colon_mentions"),

test/components/views/rooms/MessageComposerButtons-test.tsx

@@ -75,6 +75,7 @@ describe("MessageComposerButtons", () => {
                 showLocationButton={true}
                 showPollsButton={true}
                 showStickersButton={true}
+                showVoiceRecordingButton={true}
             />,
             false,
         );
@@ -90,6 +91,7 @@ describe("MessageComposerButtons", () => {
                 showLocationButton={true}
                 showPollsButton={true}
                 showStickersButton={true}
+                showVoiceRecordingButton={true}
             />,
             false,
         );
@@ -110,6 +112,7 @@ describe("MessageComposerButtons", () => {
                 showLocationButton={true}
                 showPollsButton={true}
                 showStickersButton={true}
+                showVoiceRecordingButton={true}
             />,
             true,
         );
@@ -125,6 +128,7 @@ describe("MessageComposerButtons", () => {
                 showLocationButton={true}
                 showPollsButton={true}
                 showStickersButton={true}
+                showVoiceRecordingButton={true}
             />,
             true,
         );
@@ -141,6 +145,7 @@ describe("MessageComposerButtons", () => {
                     showLocationButton={true}
                     showPollsButton={true}
                     showStickersButton={true}
+                    showVoiceRecordingButton={true}
                 />,
                 true,
             );
@@ -156,6 +161,7 @@ describe("MessageComposerButtons", () => {
                     showLocationButton={true}
                     showPollsButton={false} // !! the change from the alternate test
                     showStickersButton={true}
+                    showVoiceRecordingButton={true}
                 />,
                 true,
             );
@@ -182,6 +188,7 @@ describe("MessageComposerButtons", () => {
                     showLocationButton={true}
                     showPollsButton={true}
                     showStickersButton={true}
+                    showVoiceRecordingButton={true}
                     showVoiceBroadcastButton={true}
                 />,
                 false,
@@ -195,4 +202,28 @@ describe("MessageComposerButtons", () => {
             ]);
         });
     });
+
+    describe("with showVoiceRecordingButton = false", () => {
+        it("should not render the »Voice Message« button", () => {
+            wrapAndRender(
+                <MessageComposerButtons
+                    {...mockProps}
+                    isMenuOpen={true}
+                    showLocationButton={true}
+                    showPollsButton={true}
+                    showStickersButton={true}
+                    showVoiceRecordingButton={false}
+                    showVoiceBroadcastButton={false}
+                />,
+                false,
+            );
+
+            expect(getButtonLabels()).toEqual([
+                "Emoji",
+                "Attachment",
+                "More options",
+                ["Sticker", "Poll", "Location"],
+            ]);
+        });
+    });
 });