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

turt2live · web-flow · commit 8587ec888b02 · 2021-03-24T09:56:34.000-06:00
Labs feature: Early implementation of voice messages
diff --git a/package.json b/package.json
@@ -83,6 +83,7 @@
     "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
     "matrix-widget-api": "^0.1.0-beta.13",
     "minimist": "^1.2.5",
+    "opus-recorder": "^8.0.3",
     "pako": "^2.0.3",
     "parse5": "^6.0.1",
     "png-chunks-extract": "^1.0.0",
diff --git a/res/css/_components.scss b/res/css/_components.scss
@@ -111,8 +111,8 @@
 @import "./views/elements/_AddressSelector.scss";
 @import "./views/elements/_AddressTile.scss";
 @import "./views/elements/_DesktopBuildsNotice.scss";
-@import "./views/elements/_DirectorySearchBox.scss";
 @import "./views/elements/_DesktopCapturerSourcePicker.scss";
+@import "./views/elements/_DirectorySearchBox.scss";
 @import "./views/elements/_Dropdown.scss";
 @import "./views/elements/_EditableItemList.scss";
 @import "./views/elements/_ErrorBoundary.scss";
@@ -211,20 +211,21 @@
 @import "./views/rooms/_SendMessageComposer.scss";
 @import "./views/rooms/_Stickers.scss";
 @import "./views/rooms/_TopUnreadMessagesBar.scss";
+@import "./views/rooms/_VoiceRecordComposerTile.scss";
 @import "./views/rooms/_WhoIsTypingTile.scss";
 @import "./views/settings/_AvatarSetting.scss";
 @import "./views/settings/_CrossSigningPanel.scss";
 @import "./views/settings/_DevicesPanel.scss";
 @import "./views/settings/_E2eAdvancedPanel.scss";
 @import "./views/settings/_EmailAddresses.scss";
-@import "./views/settings/_SpellCheckLanguages.scss";
 @import "./views/settings/_IntegrationManager.scss";
 @import "./views/settings/_Notifications.scss";
 @import "./views/settings/_PhoneNumbers.scss";
 @import "./views/settings/_ProfileSettings.scss";
 @import "./views/settings/_SecureBackupPanel.scss";
 @import "./views/settings/_SetIdServer.scss";
 @import "./views/settings/_SetIntegrationManager.scss";
+@import "./views/settings/_SpellCheckLanguages.scss";
 @import "./views/settings/_UpdateCheckButton.scss";
 @import "./views/settings/tabs/_SettingsTab.scss";
 @import "./views/settings/tabs/room/_GeneralRoomSettingsTab.scss";
diff --git a/res/css/views/rooms/_BasicMessageComposer.scss b/res/css/views/rooms/_BasicMessageComposer.scss
@@ -66,6 +66,11 @@ limitations under the License.
                 }
             }
         }
+
+        &.mx_BasicMessageComposer_input_disabled {
+            pointer-events: none;
+            cursor: not-allowed;
+        }
     }
 
     .mx_BasicMessageComposer_AutoCompleteWrapper {
diff --git a/res/css/views/rooms/_MessageComposer.scss b/res/css/views/rooms/_MessageComposer.scss
@@ -227,6 +227,10 @@ limitations under the License.
     mask-image: url('$(res)/img/element-icons/room/composer/attach.svg');
 }
 
+.mx_MessageComposer_voiceMessage::before {
+    mask-image: url('$(res)/img/voip/mic-on-mask.svg');
+}
+
 .mx_MessageComposer_emoji::before {
     mask-image: url('$(res)/img/element-icons/room/composer/emoji.svg');
 }
diff --git a/res/css/views/rooms/_VoiceRecordComposerTile.scss b/res/css/views/rooms/_VoiceRecordComposerTile.scss
@@ -0,0 +1,36 @@
+/*
+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.
+*/
+
+.mx_VoiceRecordComposerTile_stop {
+    // 28px plus a 2px border makes this a 32px square (as intended)
+    width: 28px;
+    height: 28px;
+    border: 2px solid $voice-record-stop-border-color;
+    border-radius: 32px;
+    margin-right: 16px; // between us and the send button
+    position: relative;
+
+    &::after {
+        content: '';
+        width: 14px;
+        height: 14px;
+        position: absolute;
+        top: 7px;
+        left: 7px;
+        border-radius: 2px;
+        background-color: $voice-record-stop-symbol-color;
+    }
+}
diff --git a/res/img/voip/mic-on-mask.svg b/res/img/voip/mic-on-mask.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M6.09999 4.15C6.09999 1.99609 7.84608 0.25 9.99999 0.25C12.1539 0.25 13.9 1.99609 13.9 4.15V9.98254C13.9 12.1365 12.1539 13.8825 9.99999 13.8825C7.84608 13.8825 6.09999 12.1365 6.09999 9.98254V4.15ZM3.1748 8.73755C3.86516 8.73755 4.4248 9.29719 4.4248 9.98755C4.4248 13.0574 6.91483 15.5493 9.9915 15.5538C9.99433 15.5538 9.99717 15.5538 10 15.5538C10.0028 15.5538 10.0056 15.5538 10.0084 15.5538C13.085 15.5492 15.5748 13.0573 15.5748 9.98755C15.5748 9.29719 16.1344 8.73755 16.8248 8.73755C17.5152 8.73755 18.0748 9.29719 18.0748 9.98755C18.0748 14.0189 15.115 17.3576 11.25 17.9577V18.7513C11.25 19.4416 10.6904 20.0013 10 20.0013C9.30964 20.0013 8.75 19.4416 8.75 18.7513V17.9578C4.88483 17.3578 1.9248 14.0191 1.9248 9.98755C1.9248 9.29719 2.48445 8.73755 3.1748 8.73755Z" fill="#C1C6CD"/>
+</svg>
diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss
@@ -189,6 +189,9 @@ $roomsublist-skeleton-ui-bg: linear-gradient(180deg, #ffffff 0%, #ffffff00 100%)
 $groupFilterPanel-divider-color: $roomlist-header-color;
 $space-button-outline-color: #E3E8F0;
 
+$voice-record-stop-border-color: #E3E8F0;
+$voice-record-stop-symbol-color: $warning-color;
+
 $roomtile-preview-color: #9e9e9e;
 $roomtile-default-badge-bg-color: #61708b;
 $roomtile-selected-bg-color: #fff;
diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss
@@ -180,6 +180,9 @@ $roomsublist-skeleton-ui-bg: linear-gradient(180deg, #ffffff 0%, #ffffff00 100%)
 $groupFilterPanel-divider-color: $roomlist-header-color;
 $space-button-outline-color: #E3E8F0;
 
+$voice-record-stop-border-color: #E3E8F0;
+$voice-record-stop-symbol-color: $warning-color;
+
 $roomtile-preview-color: $secondary-fg-color;
 $roomtile-default-badge-bg-color: #61708b;
 $roomtile-selected-bg-color: #FFF;
diff --git a/src/@types/global.d.ts b/src/@types/global.d.ts
@@ -39,6 +39,7 @@ import {ModalWidgetStore} from "../stores/ModalWidgetStore";
 import { WidgetLayoutStore } from "../stores/widgets/WidgetLayoutStore";
 import VoipUserMapper from "../VoipUserMapper";
 import {SpaceStoreClass} from "../stores/SpaceStore";
+import {VoiceRecorder} from "../voice/VoiceRecorder";
 
 declare global {
     interface Window {
@@ -70,6 +71,7 @@ declare global {
         mxModalWidgetStore: ModalWidgetStore;
         mxVoipUserMapper: VoipUserMapper;
         mxSpaceStore: SpaceStoreClass;
+        mxVoiceRecorder: typeof VoiceRecorder;
     }
 
     interface Document {
diff --git a/src/components/views/messages/MessageEvent.js b/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'),
diff --git a/src/components/views/rooms/BasicMessageComposer.tsx b/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>);
     }
diff --git a/src/components/views/rooms/MessageComposer.js b/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} />,
                 );
diff --git a/src/components/views/rooms/SendMessageComposer.js b/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>
         );
diff --git a/src/components/views/rooms/VoiceRecordComposerTile.tsx b/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}
+            />
+        );
+    }
+}
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
@@ -783,6 +783,7 @@
     "%(senderName)s: %(stickerName)s": "%(senderName)s: %(stickerName)s",
     "Change notification settings": "Change notification settings",
     "Spaces prototype. Incompatible with Communities, Communities v2 and Custom Tags. Requires compatible homeserver for some features.": "Spaces prototype. Incompatible with Communities, Communities v2 and Custom Tags. Requires compatible homeserver for some features.",
+    "Send and receive voice messages (in development)": "Send and receive voice messages (in development)",
     "Render LaTeX maths in messages": "Render LaTeX maths in messages",
     "Communities v2 prototypes. Requires compatible homeserver. Highly experimental - use with caution.": "Communities v2 prototypes. Requires compatible homeserver. Highly experimental - use with caution.",
     "New spinner design": "New spinner design",
@@ -1636,6 +1637,8 @@
     "Invited by %(sender)s": "Invited by %(sender)s",
     "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.",
diff --git a/src/settings/Settings.ts b/src/settings/Settings.ts
@@ -128,6 +128,12 @@ export const SETTINGS: {[setting: string]: ISetting} = {
         default: false,
         controller: new ReloadOnChangeController(),
     },
+    "feature_voice_messages": {
+        isFeature: true,
+        displayName: _td("Send and receive voice messages (in development)"),
+        supportedLevels: LEVELS_FEATURE,
+        default: false,
+    },
     "feature_latex_maths": {
         isFeature: true,
         displayName: _td("Render LaTeX maths in messages"),
diff --git a/src/voice/VoiceRecorder.ts b/src/voice/VoiceRecorder.ts
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -66,6 +66,11 @@ limitations under the License.`
`66`	`66`	`}`
`67`	`67`	`}`
`68`	`68`	`}`
	`69`	`+`
	`70`	`+ &.mx_BasicMessageComposer_input_disabled {`
	`71`	`+ pointer-events: none;`
	`72`	`+ cursor: not-allowed;`
	`73`	`+ }`
`69`	`74`	`}`
`70`	`75`
`71`	`76`	`.mx_BasicMessageComposer_AutoCompleteWrapper {`
Original file line number	Diff line number	Diff line change
`@@ -227,6 +227,10 @@ limitations under the License.`
`227`	`227`	`mask-image: url('$(res)/img/element-icons/room/composer/attach.svg');`
`228`	`228`	`}`
`229`	`229`
	`230`	`+.mx_MessageComposer_voiceMessage::before {`
	`231`	`+ mask-image: url('$(res)/img/voip/mic-on-mask.svg');`
	`232`	`+}`
	`233`	`+`
`230`	`234`	`.mx_MessageComposer_emoji::before {`
`231`	`235`	`mask-image: url('$(res)/img/element-icons/room/composer/emoji.svg');`
`232`	`236`	`}`