Merge pull request #5769 from matrix-org/travis/voice-messages/exp

Labs feature: Early implementation of voice messages

src/components/views/messages/MessageEvent.js

@@ -71,6 +71,10 @@ export default class MessageEvent extends React.Component {
             'm.file': sdk.getComponent('messages.MFileBody'),
             'm.audio': sdk.getComponent('messages.MAudioBody'),
             'm.video': sdk.getComponent('messages.MVideoBody'),
+
+            // TODO: @@ TravisR: Use labs flag determination.
+            // MSC: https://github.com/matrix-org/matrix-doc/pull/2516
+            'org.matrix.msc2516.voice': sdk.getComponent('messages.MAudioBody'),
         };
         const evTypes = {
             'm.sticker': sdk.getComponent('messages.MStickerBody'),

src/components/views/rooms/BasicMessageComposer.tsx

@@ -93,6 +93,7 @@ interface IProps {
     placeholder?: string;
     label?: string;
     initialCaret?: DocumentOffset;
+    disabled?: boolean;
 
     onChange?();
     onPaste?(event: ClipboardEvent<HTMLDivElement>, model: EditorModel): boolean;
@@ -672,6 +673,9 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         });
         const classes = classNames("mx_BasicMessageComposer_input", {
             "mx_BasicMessageComposer_input_shouldShowPillAvatar": this.state.showPillAvatar,
+
+            // TODO: @@ TravisR: This doesn't work properly. The composer resets in a strange way.
+            "mx_BasicMessageComposer_input_disabled": this.props.disabled,
         });
 
         const shortcuts = {
@@ -704,6 +708,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
                 aria-expanded={Boolean(this.state.autoComplete)}
                 aria-activedescendant={completionIndex >= 0 ? generateCompletionDomId(completionIndex) : undefined}
                 dir="auto"
+                aria-disabled={this.props.disabled}
             />
         </div>);
     }

src/components/views/rooms/MessageComposer.js

@@ -33,6 +33,7 @@ import WidgetStore from "../../../stores/WidgetStore";
 import {UPDATE_EVENT} from "../../../stores/AsyncStore";
 import ActiveWidgetStore from "../../../stores/ActiveWidgetStore";
 import {replaceableComponent} from "../../../utils/replaceableComponent";
+import VoiceRecordComposerTile from "./VoiceRecordComposerTile";
 
 function ComposerAvatar(props) {
     const MemberStatusMessageAvatar = sdk.getComponent('avatars.MemberStatusMessageAvatar');
@@ -187,6 +188,7 @@ export default class MessageComposer extends React.Component {
             hasConference: WidgetStore.instance.doesRoomHaveConference(this.props.room),
             joinedConference: WidgetStore.instance.isJoinedToConferenceIn(this.props.room),
             isComposerEmpty: true,
+            haveRecording: false,
         };
     }
 
@@ -325,6 +327,10 @@ export default class MessageComposer extends React.Component {
         });
     }
 
+    onVoiceUpdate = (haveRecording: boolean) => {
+        this.setState({haveRecording});
+    };
+
     render() {
         const controls = [
             this.state.me ? <ComposerAvatar key="controls_avatar" me={this.state.me} /> : null,
@@ -346,17 +352,32 @@ export default class MessageComposer extends React.Component {
                     permalinkCreator={this.props.permalinkCreator}
                     replyToEvent={this.props.replyToEvent}
                     onChange={this.onChange}
+                    // TODO: @@ TravisR - Disabling the composer doesn't work
+                    disabled={this.state.haveRecording}
                 />,
-                <UploadButton key="controls_upload" roomId={this.props.room.roomId} />,
-                <EmojiButton key="emoji_button" addEmoji={this.addEmoji} />,
             );
 
+            if (!this.state.haveRecording) {
+                controls.push(
+                    <UploadButton key="controls_upload" roomId={this.props.room.roomId} />,
+                    <EmojiButton key="emoji_button" addEmoji={this.addEmoji} />,
+                );
+            }
+
             if (SettingsStore.getValue(UIFeature.Widgets) &&
-                SettingsStore.getValue("MessageComposerInput.showStickersButton")) {
+                SettingsStore.getValue("MessageComposerInput.showStickersButton") &&
+                !this.state.haveRecording) {
                 controls.push(<Stickerpicker key="stickerpicker_controls_button" room={this.props.room} />);
             }
 
-            if (!this.state.isComposerEmpty) {
+            if (SettingsStore.getValue("feature_voice_messages")) {
+                controls.push(<VoiceRecordComposerTile
+                    key="controls_voice_record"
+                    room={this.props.room}
+                    onRecording={this.onVoiceUpdate} />);
+            }
+
+            if (!this.state.isComposerEmpty || this.state.haveRecording) {
                 controls.push(
                     <SendButton key="controls_send" onClick={this.sendMessage} />,
                 );

src/components/views/rooms/SendMessageComposer.js

@@ -120,6 +120,7 @@ export default class SendMessageComposer extends React.Component {
         permalinkCreator: PropTypes.object.isRequired,
         replyToEvent: PropTypes.object,
         onChange: PropTypes.func,
+        disabled: PropTypes.bool,
     };
 
     static contextType = MatrixClientContext;
@@ -556,6 +557,7 @@ export default class SendMessageComposer extends React.Component {
                     label={this.props.placeholder}
                     placeholder={this.props.placeholder}
                     onPaste={this._onPaste}
+                    disabled={this.props.disabled}
                 />
             </div>
         );

src/components/views/rooms/VoiceRecordComposerTile.tsx

@@ -0,0 +1,88 @@
+/*
+Copyright 2021 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 AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
+import {_t} from "../../../languageHandler";
+import React from "react";
+import {VoiceRecorder} from "../../../voice/VoiceRecorder";
+import {Room} from "matrix-js-sdk/src/models/room";
+import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import classNames from "classnames";
+
+interface IProps {
+    room: Room;
+    onRecording: (haveRecording: boolean) => void;
+}
+
+interface IState {
+    recorder?: VoiceRecorder;
+}
+
+export default class VoiceRecordComposerTile extends React.PureComponent<IProps, IState> {
+    public constructor(props) {
+        super(props);
+
+        this.state = {
+            recorder: null, // not recording by default
+        };
+    }
+
+    private onStartStopVoiceMessage = async () => {
+        // TODO: @@ TravisR: We do not want to auto-send on stop.
+        if (this.state.recorder) {
+            await this.state.recorder.stop();
+            const mxc = await this.state.recorder.upload();
+            MatrixClientPeg.get().sendMessage(this.props.room.roomId, {
+                body: "Voice message",
+                msgtype: "org.matrix.msc2516.voice",
+                url: mxc,
+            });
+            this.setState({recorder: null});
+            this.props.onRecording(false);
+            return;
+        }
+        const recorder = new VoiceRecorder(MatrixClientPeg.get());
+        await recorder.start();
+        this.props.onRecording(true);
+        // TODO: @@ TravisR: Run through EQ component
+        // recorder.frequencyData.onUpdate((freq) => {
+        //     console.log('@@ UPDATE', freq);
+        // });
+        this.setState({recorder});
+    };
+
+    public render() {
+        const classes = classNames({
+            'mx_MessageComposer_button': !this.state.recorder,
+            'mx_MessageComposer_voiceMessage': !this.state.recorder,
+            'mx_VoiceRecordComposerTile_stop': !!this.state.recorder,
+        });
+
+        let tooltip = _t("Record a voice message");
+        if (!!this.state.recorder) {
+            // TODO: @@ TravisR: Change to match behaviour
+            tooltip = _t("Stop & send recording");
+        }
+
+        return (
+            <AccessibleTooltipButton
+                className={classes}
+                onClick={this.onStartStopVoiceMessage}
+                title={tooltip}
+            />
+        );
+    }
+}