From 0dc5200b0e858f9c922d67fe5323ab241c51513e Mon Sep 17 00:00:00 2001 From: Glandos Date: Thu, 3 Sep 2020 15:10:33 +0200 Subject: [PATCH 001/146] Push name to the end, near text, in IRC layout Currently, the name (and aux message) are align to the start, leaving a blank space between the end of the name and the message. In a lot of IRC themes, names (and actions) are aligned to the end, next to the message, for a better readability. Signed-off-by: Adrien CLERC --- res/css/views/rooms/_IRCLayout.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/res/css/views/rooms/_IRCLayout.scss b/res/css/views/rooms/_IRCLayout.scss index 958d718b11..ece547d02b 100644 --- a/res/css/views/rooms/_IRCLayout.scss +++ b/res/css/views/rooms/_IRCLayout.scss @@ -186,6 +186,7 @@ $irc-line-height: $font-18px; overflow: hidden; text-overflow: ellipsis; min-width: var(--name-width); + text-align: end; } } } From f36651f5380f1c119577495622365a015b34cdba Mon Sep 17 00:00:00 2001 From: Heiko Carrasco Date: Sat, 26 Sep 2020 23:21:16 +0200 Subject: [PATCH 002/146] Add keyboard shortcut to close current conversations Signed-off-by: Heiko Carrasco --- src/accessibility/KeyboardShortcuts.tsx | 6 ++++++ src/components/structures/LoggedInView.tsx | 12 +++++++++++- src/i18n/strings/en_EN.json | 1 + 3 files changed, 18 insertions(+), 1 deletion(-) diff --git a/src/accessibility/KeyboardShortcuts.tsx b/src/accessibility/KeyboardShortcuts.tsx index 58d8124122..48d0eb2ab1 100644 --- a/src/accessibility/KeyboardShortcuts.tsx +++ b/src/accessibility/KeyboardShortcuts.tsx @@ -257,6 +257,12 @@ const shortcuts: Record = { key: Key.SLASH, }], description: _td("Toggle this dialog"), + }, { + keybinds: [{ + modifiers: [CMD_OR_CTRL, Modifiers.ALT], + key: Key.H, + }], + description: _td("Go to Home View"), }, ], diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx index 79f2916200..e7256e4cd4 100644 --- a/src/components/structures/LoggedInView.tsx +++ b/src/components/structures/LoggedInView.tsx @@ -21,7 +21,7 @@ import * as PropTypes from 'prop-types'; import { MatrixClient } from 'matrix-js-sdk/src/client'; import { DragDropContext } from 'react-beautiful-dnd'; -import {Key, isOnlyCtrlOrCmdKeyEvent, isOnlyCtrlOrCmdIgnoreShiftKeyEvent} from '../../Keyboard'; +import {Key, isOnlyCtrlOrCmdKeyEvent, isOnlyCtrlOrCmdIgnoreShiftKeyEvent, isMac} from '../../Keyboard'; import PageTypes from '../../PageTypes'; import CallMediaHandler from '../../CallMediaHandler'; import { fixupColorFonts } from '../../utils/FontManager'; @@ -400,6 +400,7 @@ class LoggedInView extends React.Component { const ctrlCmdOnly = isOnlyCtrlOrCmdKeyEvent(ev); const hasModifier = ev.altKey || ev.ctrlKey || ev.metaKey || ev.shiftKey; const isModifier = ev.key === Key.ALT || ev.key === Key.CONTROL || ev.key === Key.META || ev.key === Key.SHIFT; + const modKey = isMac ? ev.metaKey : ev.ctrlKey; switch (ev.key) { case Key.PAGE_UP: @@ -444,6 +445,15 @@ class LoggedInView extends React.Component { } break; + case Key.H: + if (ev.altKey && modKey) { + dis.dispatch({ + action: 'view_home_page', + }); + handled = true; + } + break; + case Key.ARROW_UP: case Key.ARROW_DOWN: if (ev.altKey && !ev.ctrlKey && !ev.metaKey) { diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index eb8f9100ec..0bc430d87a 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -2350,6 +2350,7 @@ "Activate selected button": "Activate selected button", "Toggle right panel": "Toggle right panel", "Toggle this dialog": "Toggle this dialog", + "Go to Home View": "Go to Home View", "Move autocomplete selection up/down": "Move autocomplete selection up/down", "Cancel autocomplete": "Cancel autocomplete", "Page Up": "Page Up", From d7f15985f590232a72be980570d98d81b7efd45c Mon Sep 17 00:00:00 2001 From: Heiko Carrasco Date: Tue, 13 Oct 2020 18:26:48 +0200 Subject: [PATCH 003/146] Close all active modals when home shortcut is used Signed-off-by: Heiko Carrasco --- src/Modal.tsx | 9 +++++++++ src/components/structures/LoggedInView.tsx | 2 ++ 2 files changed, 11 insertions(+) diff --git a/src/Modal.tsx b/src/Modal.tsx index b0f6ef988e..b6074e4807 100644 --- a/src/Modal.tsx +++ b/src/Modal.tsx @@ -147,6 +147,15 @@ export class ModalManager { return this.appendDialogAsync(...rest); } + public closeCurrentModal(reason: string) { + const modal = this.getCurrentModal(); + if (!modal) { + return; + } + modal.closeReason = reason; + modal.close(); + } + private buildModal( prom: Promise, props?: IProps, diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx index e7256e4cd4..98921d03a1 100644 --- a/src/components/structures/LoggedInView.tsx +++ b/src/components/structures/LoggedInView.tsx @@ -52,6 +52,7 @@ import RoomListStore from "../../stores/room-list/RoomListStore"; import NonUrgentToastContainer from "./NonUrgentToastContainer"; import { ToggleRightPanelPayload } from "../../dispatcher/payloads/ToggleRightPanelPayload"; import { IThreepidInvite } from "../../stores/ThreepidInviteStore"; +import Modal from "../../Modal"; // We need to fetch each pinned message individually (if we don't already have it) // so each pinned message may trigger a request. Limit the number per room for sanity. @@ -450,6 +451,7 @@ class LoggedInView extends React.Component { dis.dispatch({ action: 'view_home_page', }); + Modal.closeCurrentModal("homeKeyboardShortcut"); handled = true; } break; From 7506e9a85de9a7a1cb4b5836dc3ca4b234dd17b2 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 15 Oct 2020 15:58:18 +0100 Subject: [PATCH 004/146] Disable notifications for the room you have recently been active in Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/Notifier.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/Notifier.ts b/src/Notifier.ts index 1899896f9b..6460be20ad 100644 --- a/src/Notifier.ts +++ b/src/Notifier.ts @@ -34,6 +34,8 @@ import SettingsStore from "./settings/SettingsStore"; import { hideToast as hideNotificationsToast } from "./toasts/DesktopNotificationsToast"; import {SettingLevel} from "./settings/SettingLevel"; import {isPushNotifyDisabled} from "./settings/controllers/NotificationControllers"; +import RoomViewStore from "./stores/RoomViewStore"; +import UserActivity from "./UserActivity"; /* * Dispatches: @@ -376,6 +378,11 @@ export const Notifier = { const room = MatrixClientPeg.get().getRoom(ev.getRoomId()); const actions = MatrixClientPeg.get().getPushActionsForEvent(ev); if (actions && actions.notify) { + if (RoomViewStore.getRoomId() === room.roomId && UserActivity.sharedInstance().userActiveRecently()) { + // don't bother notifying as user was recently active in this room + return; + } + if (this.isEnabled()) { this._displayPopupNotification(ev, room); } From 176c7c32da6c8e8314889f6b8bbaa632b03c4f2d Mon Sep 17 00:00:00 2001 From: Bryan Kok Date: Sat, 17 Oct 2020 14:35:11 +0800 Subject: [PATCH 005/146] Search through the list of unfiltered rooms rather than the rooms in the state which are already filtered by the search text --- src/components/views/rooms/RoomSublist.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/views/rooms/RoomSublist.tsx b/src/components/views/rooms/RoomSublist.tsx index 4056f2fbd4..111692786c 100644 --- a/src/components/views/rooms/RoomSublist.tsx +++ b/src/components/views/rooms/RoomSublist.tsx @@ -420,7 +420,7 @@ export default class RoomSublist extends React.Component { room = this.state.rooms && this.state.rooms[0]; } else { // find the first room with a count of the same colour as the badge count - room = this.state.rooms.find((r: Room) => { + room = RoomListStore.instance.unfilteredLists[this.props.tagId].find((r: Room) => { const notifState = this.notificationState.getForRoom(r); return notifState.count > 0 && notifState.color === this.notificationState.color; }); From 091143db525e9eb1a563bd097333b2a6e644af22 Mon Sep 17 00:00:00 2001 From: Resynth Date: Sun, 18 Oct 2020 22:40:19 +0100 Subject: [PATCH 006/146] Add border-radius for video Images have a rounded border, so we may as well add it to videos. Works fine in Chrome, and in other spec-compliant browsers. Signed-off-by: Resynth --- res/css/views/messages/_MVideoBody.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/res/css/views/messages/_MVideoBody.scss b/res/css/views/messages/_MVideoBody.scss index 3b05c53f34..ac3491bc8f 100644 --- a/res/css/views/messages/_MVideoBody.scss +++ b/res/css/views/messages/_MVideoBody.scss @@ -18,5 +18,6 @@ span.mx_MVideoBody { video.mx_MVideoBody { max-width: 100%; height: auto; + border-radius: 4px; } } From da60e4dba69d0475d837a55eb98293285fb116b0 Mon Sep 17 00:00:00 2001 From: Resynth Date: Sun, 25 Oct 2020 16:47:15 +0000 Subject: [PATCH 007/146] Lighten blockquote colour in dark mode Signed-off-by: Resynth --- res/themes/dark/css/_dark.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 6e0c9acdfe..df68bf0e2f 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -272,6 +272,10 @@ $composer-shadow-color: rgba(0, 0, 0, 0.28); background-color: #080808; } } + + blockquote { + + } } // diff highlight colors From dc28616a6f366af8cf34970ce363d2e31fe74555 Mon Sep 17 00:00:00 2001 From: Resynth Date: Mon, 26 Oct 2020 22:53:37 +0000 Subject: [PATCH 008/146] Remove empty CSS block Signed-off-by: Resynth --- res/themes/dark/css/_dark.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index df68bf0e2f..6e0c9acdfe 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -272,10 +272,6 @@ $composer-shadow-color: rgba(0, 0, 0, 0.28); background-color: #080808; } } - - blockquote { - - } } // diff highlight colors From 6dc709a045204862279629d1e69f799537e27305 Mon Sep 17 00:00:00 2001 From: Resynth Date: Tue, 27 Oct 2020 20:10:23 +0000 Subject: [PATCH 009/146] =?UTF-8?q?=F0=9F=98=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Resynth --- res/themes/dark/css/_dark.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 6e0c9acdfe..fdf64d52f8 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -272,6 +272,10 @@ $composer-shadow-color: rgba(0, 0, 0, 0.28); background-color: #080808; } } + + blockquote { + color: #919191; + } } // diff highlight colors From 24ba566877e5d9a897a3fe21a7b09cf860f0b5ab Mon Sep 17 00:00:00 2001 From: Matthew Kenigsberg Date: Wed, 28 Oct 2020 18:34:04 -0500 Subject: [PATCH 010/146] Specify community description img must be mxc urls Closes vector-im/element-web#7100 Signed-off-by: Matthew Kenigsberg --- src/components/structures/GroupView.js | 2 +- src/i18n/strings/en_EN.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js index 482b9f6da2..bbc4187298 100644 --- a/src/components/structures/GroupView.js +++ b/src/components/structures/GroupView.js @@ -47,7 +47,7 @@ const LONG_DESC_PLACEHOLDER = _td( some important links

- You can even use 'img' tags + You can even add images with Matrix URLs

`); diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 1548dd5c13..600319a874 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -2001,7 +2001,7 @@ "Attach files from chat or just drag and drop them anywhere in a room.": "Attach files from chat or just drag and drop them anywhere in a room.", "Communities": "Communities", "Create community": "Create community", - "

HTML for your community's page

\n

\n Use the long description to introduce new members to the community, or distribute\n some important links\n

\n

\n You can even use 'img' tags\n

\n": "

HTML for your community's page

\n

\n Use the long description to introduce new members to the community, or distribute\n some important links\n

\n

\n You can even use 'img' tags\n

\n", + "

HTML for your community's page

\n

\n Use the long description to introduce new members to the community, or distribute\n some important links\n

\n

\n You can even add images with Matrix URLs \n

\n": "

HTML for your community's page

\n

\n Use the long description to introduce new members to the community, or distribute\n some important links\n

\n

\n You can even add images with Matrix URLs \n

\n", "Add rooms to the community summary": "Add rooms to the community summary", "Which rooms would you like to add to this summary?": "Which rooms would you like to add to this summary?", "Add to summary": "Add to summary", From f828c6d49467bcb9f9efc5104637a94b1ef13a6a Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 29 Oct 2020 17:56:24 +0000 Subject: [PATCH 011/146] Implement call hold Currently just by adding /holdcall and /unholdcall slash commands The only place the hold status of the call is currently represented is when the call is a voice call and you're viewing a different room: it's not wired up when you're viewing the room because that currently uses the room status bar which it won't do with the new UI. Also convert VideoFeed to typescript, and remove videoview because it essentially just managed the fullscreen functionality, but we'll want and 'on hold' representation (and probably chrome for hagnup etc) in the fullscreen UI too, so let's just make CallView the thing that gets fullscreened. --- res/css/_components.scss | 4 +- res/css/views/voip/_CallContainer.scss | 4 +- res/css/views/voip/_CallView.scss | 7 + res/css/views/voip/_VideoView.scss | 49 ------ src/@types/global.d.ts | 14 ++ src/CallHandler.tsx | 25 ++- src/SlashCommands.tsx | 27 +++ src/components/structures/RoomView.tsx | 2 +- src/components/views/elements/AppTile.js | 2 +- src/components/views/voip/CallPreview.tsx | 2 +- src/components/views/voip/CallView.tsx | 196 ++++++++++++++-------- src/components/views/voip/VideoFeed.js | 58 ------- src/components/views/voip/VideoFeed.tsx | 82 +++++++++ src/components/views/voip/VideoView.js | 142 ---------------- src/i18n/strings/en_EN.json | 3 + 15 files changed, 287 insertions(+), 330 deletions(-) delete mode 100644 res/css/views/voip/_VideoView.scss delete mode 100644 src/components/views/voip/VideoFeed.js create mode 100644 src/components/views/voip/VideoFeed.tsx delete mode 100644 src/components/views/voip/VideoView.js diff --git a/res/css/_components.scss b/res/css/_components.scss index ad3cfbdcea..4a9301d085 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -9,6 +9,7 @@ @import "./structures/_CustomRoomTagPanel.scss"; @import "./structures/_FilePanel.scss"; @import "./structures/_GenericErrorPage.scss"; +@import "./structures/_GroupFilterPanel.scss"; @import "./structures/_GroupView.scss"; @import "./structures/_HeaderButtons.scss"; @import "./structures/_HomePage.scss"; @@ -27,7 +28,6 @@ @import "./structures/_ScrollPanel.scss"; @import "./structures/_SearchBox.scss"; @import "./structures/_TabbedView.scss"; -@import "./structures/_GroupFilterPanel.scss"; @import "./structures/_ToastContainer.scss"; @import "./structures/_UploadBar.scss"; @import "./structures/_UserMenu.scss"; @@ -227,4 +227,4 @@ @import "./views/verification/_VerificationShowSas.scss"; @import "./views/voip/_CallContainer.scss"; @import "./views/voip/_CallView.scss"; -@import "./views/voip/_VideoView.scss"; +@import "./views/voip/_VideoFeed.scss"; diff --git a/res/css/views/voip/_CallContainer.scss b/res/css/views/voip/_CallContainer.scss index 759797ae7b..eec8a1f188 100644 --- a/res/css/views/voip/_CallContainer.scss +++ b/res/css/views/voip/_CallContainer.scss @@ -33,11 +33,11 @@ limitations under the License. pointer-events: initial; // restore pointer events so the user can leave/interact cursor: pointer; - .mx_VideoView { + .mx_CallView_video { width: 350px; } - .mx_VideoView_localVideoFeed { + .mx_VideoFeed_local { border-radius: 8px; overflow: hidden; } diff --git a/res/css/views/voip/_CallView.scss b/res/css/views/voip/_CallView.scss index f6f3d40308..2aeaaa87dc 100644 --- a/res/css/views/voip/_CallView.scss +++ b/res/css/views/voip/_CallView.scss @@ -92,3 +92,10 @@ limitations under the License. background-color: $primary-fg-color; } } + +.mx_CallView_video { + width: 100%; + position: relative; + z-index: 30; +} + diff --git a/res/css/views/voip/_VideoView.scss b/res/css/views/voip/_VideoView.scss deleted file mode 100644 index feb60f4763..0000000000 --- a/res/css/views/voip/_VideoView.scss +++ /dev/null @@ -1,49 +0,0 @@ -/* -Copyright 2015, 2016 OpenMarket Ltd - -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_VideoView { - width: 100%; - position: relative; - z-index: 30; -} - -.mx_VideoView video { - width: 100%; -} - -.mx_VideoView_remoteVideoFeed { - width: 100%; - background-color: #000; - z-index: 50; -} - -.mx_VideoView_localVideoFeed { - width: 25%; - height: 25%; - position: absolute; - left: 10px; - bottom: 10px; - z-index: 100; -} - -.mx_VideoView_localVideoFeed video { - width: auto; - height: 100%; -} - -.mx_VideoView_localVideoFeed.mx_VideoView_localVideoFeed_flipped video { - transform: scale(-1, 1); -} diff --git a/src/@types/global.d.ts b/src/@types/global.d.ts index ed28a5c479..acb2c40031 100644 --- a/src/@types/global.d.ts +++ b/src/@types/global.d.ts @@ -65,6 +65,13 @@ declare global { interface Document { // https://developer.mozilla.org/en-US/docs/Web/API/Document/hasStorageAccess hasStorageAccess?: () => Promise; + + // Safari & IE11 only have this prefixed: we used prefixed versions + // previously so let's continue to support them for now + webkitExitFullscreen(): Promise; + msExitFullscreen(): Promise; + readonly webkitFullscreenElement: Element | null; + readonly msFullscreenElement: Element | null; } interface Navigator { @@ -94,4 +101,11 @@ declare global { interface HTMLAudioElement { type?: string; } + + interface Element { + // Safari & IE11 only have this prefixed: we used prefixed versions + // previously so let's continue to support them for now + webkitRequestFullScreen(options?: FullscreenOptions): Promise; + msRequestFullscreen(options?: FullscreenOptions): Promise; + } } diff --git a/src/CallHandler.tsx b/src/CallHandler.tsx index e303dd3819..17867536ed 100644 --- a/src/CallHandler.tsx +++ b/src/CallHandler.tsx @@ -59,8 +59,7 @@ import {MatrixClientPeg} from './MatrixClientPeg'; import PlatformPeg from './PlatformPeg'; import Modal from './Modal'; import { _t } from './languageHandler'; -// @ts-ignore - XXX: tsc doesn't like this: our js-sdk imports are complex so this isn't surprising -import Matrix from 'matrix-js-sdk'; +import Matrix from 'matrix-js-sdk/src/browser-index'; import dis from './dispatcher/dispatcher'; import WidgetUtils from './utils/WidgetUtils'; import WidgetEchoStore from './stores/WidgetEchoStore'; @@ -77,7 +76,7 @@ import ErrorDialog from "./components/views/dialogs/ErrorDialog"; import WidgetStore from "./stores/WidgetStore"; import { WidgetMessagingStore } from "./stores/widgets/WidgetMessagingStore"; import { ElementWidgetActions } from "./stores/widgets/ElementWidgetActions"; -import { MatrixCall, CallErrorCode, CallState, CallEvent, CallParty } from "matrix-js-sdk/lib/webrtc/call"; +import { MatrixCall, CallErrorCode, CallState, CallEvent, CallParty } from "matrix-js-sdk/src/webrtc/call"; import Analytics from './Analytics'; enum AudioID { @@ -97,6 +96,18 @@ export enum PlaceCallType { ScreenSharing = 'screensharing', } +function getRemoteAudioElement(): HTMLAudioElement { + // this needs to be somewhere at the top of the DOM which + // always exists to avoid audio interruptions. + // Might as well just use DOM. + const remoteAudioElement = document.getElementById("remoteAudio") as HTMLAudioElement; + if (!remoteAudioElement) { + console.error("Failed to find remoteAudio element - cannot play audio!" + + "You need to add an