From 9aa5348c7fd059ffc1e32f3821e04b5b0ea7345e Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Tue, 16 Mar 2021 23:43:59 -0600 Subject: [PATCH] Show a stop button to stop the recording --- res/css/_components.scss | 5 +-- .../views/rooms/_VoiceRecordComposerTile.scss | 36 +++++++++++++++++++ .../legacy-light/css/_legacy-light.scss | 3 ++ res/themes/light/css/_light.scss | 3 ++ .../views/rooms/VoiceRecordComposerTile.tsx | 20 +++++++++-- src/i18n/strings/en_EN.json | 1 + src/voice/VoiceRecorder.ts | 2 +- 7 files changed, 64 insertions(+), 6 deletions(-) create mode 100644 res/css/views/rooms/_VoiceRecordComposerTile.scss diff --git a/res/css/_components.scss b/res/css/_components.scss index d894688cac..9c895490b3 100644 --- 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,13 +211,13 @@ @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"; @@ -225,6 +225,7 @@ @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/_VoiceRecordComposerTile.scss b/res/css/views/rooms/_VoiceRecordComposerTile.scss new file mode 100644 index 0000000000..469a3de66a --- /dev/null +++ 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: 6px; + left: 6px; + border-radius: 2px; + background-color: $voice-record-stop-symbol-color; + } +} diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss index 9ad154dd93..d7ee496d80 100644 --- 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 index 25fbd0201b..577204ef0c 100644 --- 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/components/views/rooms/VoiceRecordComposerTile.tsx b/src/components/views/rooms/VoiceRecordComposerTile.tsx index d15328eb5a..3b31075de2 100644 --- a/src/components/views/rooms/VoiceRecordComposerTile.tsx +++ b/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 { + // 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 ); } diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 4654cb1f99..74100ed4b0 100644 --- a/src/i18n/strings/en_EN.json +++ b/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.", diff --git a/src/voice/VoiceRecorder.ts b/src/voice/VoiceRecorder.ts index e968627fe3..1e59e451bd 100644 --- a/src/voice/VoiceRecorder.ts +++ b/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, })); }