Show a stop button to stop the recording

src/components/views/rooms/VoiceRecordComposerTile.tsx

@@ -20,6 +20,7 @@ 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;
@@ -40,12 +41,13 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
     }
 
     private onStartVoiceMessage = 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: "m.audio", // TODO
+                msgtype: "m.audio", // TODO @@
                 url: mxc,
             });
             this.setState({recorder: null});
@@ -63,11 +65,23 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
     };
 
     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="mx_MessageComposer_button mx_MessageComposer_voiceMessage"
+                className={classes}
                 onClick={this.onStartVoiceMessage}
-                title={_t('Record a voice message')}
+                title={tooltip}
             />
         );
     }

src/i18n/strings/en_EN.json

@@ -1637,6 +1637,7 @@
     "Jump to first unread message.": "Jump to first unread message.",
     "Mark all as read": "Mark all as read",
     "Record a voice message": "Record a voice message",
+    "Stop & send recording": "Stop & send recording",
     "Error updating main address": "Error updating main address",
     "There was an error updating the room's main address. It may not be allowed by the server or a temporary failure occurred.": "There was an error updating the room's main address. It may not be allowed by the server or a temporary failure occurred.",
     "There was an error updating the room's alternative addresses. It may not be allowed by the server or a temporary failure occurred.": "There was an error updating the room's alternative addresses. It may not be allowed by the server or a temporary failure occurred.",

src/voice/VoiceRecorder.ts

@@ -119,7 +119,7 @@ export class VoiceRecorder {
             .then(() => this.upload())
             .then(() => this.client.sendMessage("!HKjSnKDluFnCCnjayl:localhost", {
                 body: "Voice message",
-                msgtype: "m.audio", // TODO
+                msgtype: "m.audio", // TODO @@
                 url: this.mxc,
             }));
     }