Merge branch 'develop' into alunturner/add-bullet-list

res/css/views/dialogs/_CompoundDialog.pcss

@@ -27,6 +27,11 @@ limitations under the License.
 }
 
 .mx_CompoundDialog {
+    .mx_Dialog {
+        display: flex;
+        flex-direction: column;
+    }
+
     .mx_CompoundDialog_header {
         padding: 32px 32px 16px 32px;
 
@@ -49,6 +54,13 @@ limitations under the License.
         }
     }
 
+    .mx_CompoundDialog_form {
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+        max-height: 100%;
+    }
+
     .mx_CompoundDialog_content {
         overflow: auto;
         padding: 8px 32px;
@@ -57,10 +69,6 @@ limitations under the License.
     .mx_CompoundDialog_footer {
         padding: 20px 32px;
         text-align: right;
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
 
         .mx_AccessibleButton {
             margin-left: 24px;
@@ -69,14 +77,17 @@ limitations under the License.
 }
 
 .mx_ScrollableBaseDialog {
+    display: flex;
+    flex-direction: column;
+
     width: 544px; /* fixed */
     height: 516px; /* fixed */
-
-    .mx_CompoundDialog_content {
-        height: 349px; /* dialogHeight - header - footer */
-    }
+    max-width: 100%;
+    min-height: 0;
+    max-height: 80%;
 
     .mx_CompoundDialog_footer {
         box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.05); /* hardcoded colour for both themes */
+        z-index: 1; /* needed to make footer & shadow appear above dialog content */
     }
 }

src/components/views/dialogs/CantStartVoiceMessageBroadcastDialog.tsx

@@ -0,0 +1,36 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+
+import { _t } from "../../../languageHandler";
+import Modal from "../../../Modal";
+import InfoDialog from "./InfoDialog";
+
+export const createCantStartVoiceMessageBroadcastDialog = (): void => {
+    Modal.createDialog(InfoDialog, {
+        title: _t("Can't start voice message"),
+        description: (
+            <p>
+                {_t(
+                    "You can't start a voice message as you are currently recording a live broadcast. " +
+                        "Please end your live broadcast in order to start recording a voice message.",
+                )}
+            </p>
+        ),
+        hasCloseButton: true,
+    });
+};

src/components/views/dialogs/ScrollableBaseModal.tsx

@@ -96,7 +96,7 @@ export default abstract class ScrollableBaseModal<
                             aria-label={_t("Close dialog")}
                         />
                     </div>
-                    <form onSubmit={this.onSubmit}>
+                    <form onSubmit={this.onSubmit} className="mx_CompoundDialog_form">
                         <div className="mx_CompoundDialog_content">{this.renderContent()}</div>
                         <div className="mx_CompoundDialog_footer">
                             <AccessibleButton onClick={this.onCancel} kind="primary_outline">

src/components/views/rooms/MessageComposer.tsx

@@ -58,6 +58,8 @@ import { SendWysiwygComposer, sendMessage, getConversionFunctions } from "./wysi
 import { MatrixClientProps, withMatrixClientHOC } from "../../../contexts/MatrixClientContext";
 import { setUpVoiceBroadcastPreRecording } from "../../../voice-broadcast/utils/setUpVoiceBroadcastPreRecording";
 import { SdkContextClass } from "../../../contexts/SDKContext";
+import { VoiceBroadcastInfoState } from "../../../voice-broadcast";
+import { createCantStartVoiceMessageBroadcastDialog } from "../dialogs/CantStartVoiceMessageBroadcastDialog";
 
 let instanceCount = 0;
 
@@ -445,6 +447,20 @@ export class MessageComposer extends React.Component<IProps, IState> {
         }
     }
 
+    private onRecordStartEndClick = (): void => {
+        const currentBroadcastRecording = SdkContextClass.instance.voiceBroadcastRecordingsStore.getCurrent();
+
+        if (currentBroadcastRecording && currentBroadcastRecording.getState() !== VoiceBroadcastInfoState.Stopped) {
+            createCantStartVoiceMessageBroadcastDialog();
+        } else {
+            this.voiceRecordingButton.current?.onRecordStartEndClick();
+        }
+
+        if (this.context.narrow) {
+            this.toggleButtonMenu();
+        }
+    };
+
     public render() {
         const hasE2EIcon = Boolean(!this.state.isWysiwygLabEnabled && this.props.e2eStatus);
         const e2eIcon = hasE2EIcon && (
@@ -588,12 +604,7 @@ export class MessageComposer extends React.Component<IProps, IState> {
                                     isStickerPickerOpen={this.state.isStickerPickerOpen}
                                     menuPosition={menuPosition}
                                     relation={this.props.relation}
-                                    onRecordStartEndClick={() => {
-                                        this.voiceRecordingButton.current?.onRecordStartEndClick();
-                                        if (this.context.narrow) {
-                                            this.toggleButtonMenu();
-                                        }
-                                    }}
+                                    onRecordStartEndClick={this.onRecordStartEndClick}
                                     setStickerPickerOpen={this.setStickerPickerOpen}
                                     showLocationButton={!window.electron}
                                     showPollsButton={this.state.showPollsButton}

src/components/views/rooms/MessageComposerButtons.tsx

@@ -376,8 +376,8 @@ function ComposerModeButton({ isRichTextEnabled, onClick }: WysiwygToggleButtonP
         <CollapsibleButton
             className="mx_MessageComposer_button"
             iconClassName={classNames({
-                mx_MessageComposer_plain_text: isRichTextEnabled,
-                mx_MessageComposer_rich_text: !isRichTextEnabled,
+                mx_MessageComposer_plain_text: !isRichTextEnabled,
+                mx_MessageComposer_rich_text: isRichTextEnabled,
             })}
             onClick={onClick}
             title={title}

src/i18n/strings/en_EN.json

@@ -2690,6 +2690,8 @@
     "Uncheck if you also want to remove system messages on this user (e.g. membership change, profile change…)": "Uncheck if you also want to remove system messages on this user (e.g. membership change, profile change…)",
     "Remove %(count)s messages|other": "Remove %(count)s messages",
     "Remove %(count)s messages|one": "Remove 1 message",
+    "Can't start voice message": "Can't start voice message",
+    "You can't start a voice message as you are currently recording a live broadcast. Please end your live broadcast in order to start recording a voice message.": "You can't start a voice message as you are currently recording a live broadcast. Please end your live broadcast in order to start recording a voice message.",
     "Unable to load commit detail: %(msg)s": "Unable to load commit detail: %(msg)s",
     "Unavailable": "Unavailable",
     "Changelog": "Changelog",