diff --git a/res/css/views/settings/_Notifications.scss b/res/css/views/settings/_Notifications.scss index b21e7a5113..773ea055df 100644 --- a/res/css/views/settings/_Notifications.scss +++ b/res/css/views/settings/_Notifications.scss @@ -76,6 +76,21 @@ limitations under the License. display: none; } -.mx_NotificationSound_resetSound { +.mx_NotificationSound_browse { + color: $accent-color; + border: 1px solid $accent-color; + background-color: transparent; +} + +.mx_NotificationSound_save { margin-left: 5px; + color: white; + background-color: $accent-color; +} + +.mx_NotificationSound_resetSound { + margin-top: 5px; + color: white; + border: $warning-color; + background-color: $warning-color; } \ No newline at end of file diff --git a/src/components/views/settings/tabs/room/NotificationSettingsTab.js b/src/components/views/settings/tabs/room/NotificationSettingsTab.js index 9d0848baf4..6df5b2e469 100644 --- a/src/components/views/settings/tabs/room/NotificationSettingsTab.js +++ b/src/components/views/settings/tabs/room/NotificationSettingsTab.js @@ -20,7 +20,7 @@ import {_t} from "../../../../../languageHandler"; import MatrixClientPeg from "../../../../../MatrixClientPeg"; import AccessibleButton from "../../../elements/AccessibleButton"; import Notifier from "../../../../../Notifier"; -import SettingsStore from '../../../../../settings/SettingsStore'; +import SettingsStore from '../../../../../settings/SettingsStore'; import { SettingLevel } from '../../../../../settings/SettingsStore'; export default class NotificationsSettingsTab extends React.Component { @@ -65,14 +65,19 @@ export default class NotificationsSettingsTab extends React.Component { this.setState({ uploadedFile: file, }); + } + + async _onClickSaveSound(e) { + e.stopPropagation(); + e.preventDefault(); try { await this._saveSound(); } catch (ex) { console.error( `Unable to save notification sound for ${this.props.roomId}`, - ex, ); + console.error(ex); } } @@ -80,6 +85,7 @@ export default class NotificationsSettingsTab extends React.Component { if (!this.state.uploadedFile) { return; } + let type = this.state.uploadedFile.type; if (type === "video/ogg") { // XXX: I've observed browsers allowing users to pick a audio/ogg files, @@ -87,6 +93,7 @@ export default class NotificationsSettingsTab extends React.Component { // suck at detecting mimetypes. type = "audio/ogg"; } + const url = await MatrixClientPeg.get().uploadContent( this.state.uploadedFile, { type, @@ -96,7 +103,6 @@ export default class NotificationsSettingsTab extends React.Component { await SettingsStore.setValue( "notificationSound", this.props.roomId, - SettingsStore. SettingLevel.ROOM_ACCOUNT, { name: this.state.uploadedFile.name, @@ -108,7 +114,6 @@ export default class NotificationsSettingsTab extends React.Component { this.setState({ uploadedFile: null, - uploadedFileUrl: null, currentSound: this.state.uploadedFile.name, }); } @@ -129,13 +134,25 @@ export default class NotificationsSettingsTab extends React.Component { } render() { + let currentUploadedFile = null; + if (this.state.uploadedFile) { + currentUploadedFile = ( +
{this.state.uploadedFile.name}
+ {this.state.currentSound}
+ {_t("Notification sound")}: {this.state.currentSound}