From 7413cea6eaeee68beadc8b46021a30ac159ec277 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Fri, 22 Jan 2021 16:58:47 -0700 Subject: [PATCH 1/4] Format imports because the IDE said so --- src/components/structures/RoomView.tsx | 36 +++++++++++++------------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index 027c6b3cc3..3edfef7f18 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -21,15 +21,15 @@ limitations under the License. // - Search results component // - Drag and drop -import React, {createRef} from 'react'; +import React, { createRef } from 'react'; import classNames from 'classnames'; -import {Room} from "matrix-js-sdk/src/models/room"; -import {MatrixEvent} from "matrix-js-sdk/src/models/event"; -import {EventSubscription} from "fbemitter"; +import { Room } from "matrix-js-sdk/src/models/room"; +import { MatrixEvent } from "matrix-js-sdk/src/models/event"; +import { EventSubscription } from "fbemitter"; import shouldHideEvent from '../../shouldHideEvent'; -import {_t} from '../../languageHandler'; -import {RoomPermalinkCreator} from '../../utils/permalinks/Permalinks'; +import { _t } from '../../languageHandler'; +import { RoomPermalinkCreator } from '../../utils/permalinks/Permalinks'; import ResizeNotifier from '../../utils/ResizeNotifier'; import ContentMessages from '../../ContentMessages'; import Modal from '../../Modal'; @@ -40,8 +40,8 @@ import Tinter from '../../Tinter'; import rateLimitedFunc from '../../ratelimitedfunc'; import * as ObjectUtils from '../../ObjectUtils'; import * as Rooms from '../../Rooms'; -import eventSearch, {searchPagination} from '../../Searching'; -import {isOnlyCtrlOrCmdIgnoreShiftKeyEvent, Key} from '../../Keyboard'; +import eventSearch, { searchPagination } from '../../Searching'; +import { isOnlyCtrlOrCmdIgnoreShiftKeyEvent, Key } from '../../Keyboard'; import MainSplit from './MainSplit'; import RightPanel from './RightPanel'; import RoomViewStore from '../../stores/RoomViewStore'; @@ -50,13 +50,13 @@ import WidgetEchoStore from '../../stores/WidgetEchoStore'; import SettingsStore from "../../settings/SettingsStore"; import AccessibleButton from "../views/elements/AccessibleButton"; import RightPanelStore from "../../stores/RightPanelStore"; -import {haveTileForEvent} from "../views/rooms/EventTile"; +import { haveTileForEvent } from "../views/rooms/EventTile"; import RoomContext from "../../contexts/RoomContext"; import MatrixClientContext from "../../contexts/MatrixClientContext"; -import {E2EStatus, shieldStatusForRoom} from '../../utils/ShieldUtils'; -import {Action} from "../../dispatcher/actions"; -import {SettingLevel} from "../../settings/SettingLevel"; -import {IMatrixClientCreds} from "../../MatrixClientPeg"; +import { E2EStatus, shieldStatusForRoom } from '../../utils/ShieldUtils'; +import { Action } from "../../dispatcher/actions"; +import { SettingLevel } from "../../settings/SettingLevel"; +import { IMatrixClientCreds } from "../../MatrixClientPeg"; import ScrollPanel from "./ScrollPanel"; import TimelinePanel from "./TimelinePanel"; import ErrorBoundary from "../views/elements/ErrorBoundary"; @@ -67,16 +67,16 @@ import RoomUpgradeWarningBar from "../views/rooms/RoomUpgradeWarningBar"; import PinnedEventsPanel from "../views/rooms/PinnedEventsPanel"; import AuxPanel from "../views/rooms/AuxPanel"; import RoomHeader from "../views/rooms/RoomHeader"; -import {XOR} from "../../@types/common"; +import { XOR } from "../../@types/common"; import { IThreepidInvite } from "../../stores/ThreepidInviteStore"; import EffectsOverlay from "../views/elements/EffectsOverlay"; -import {containsEmoji} from '../../effects/utils'; -import {CHAT_EFFECTS} from '../../effects'; +import { containsEmoji } from '../../effects/utils'; +import { CHAT_EFFECTS } from '../../effects'; import { CallState, MatrixCall } from "matrix-js-sdk/src/webrtc/call"; import WidgetStore from "../../stores/WidgetStore"; -import {UPDATE_EVENT} from "../../stores/AsyncStore"; +import { UPDATE_EVENT } from "../../stores/AsyncStore"; import Notifier from "../../Notifier"; -import {showToast as showNotificationsToast} from "../../toasts/DesktopNotificationsToast"; +import { showToast as showNotificationsToast } from "../../toasts/DesktopNotificationsToast"; import { RoomNotificationStateStore } from "../../stores/notifications/RoomNotificationStateStore"; import { Container, WidgetLayoutStore } from "../../stores/widgets/WidgetLayoutStore"; From 6ac8803191bf4e31df430285c824efe4e82bda78 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Fri, 22 Jan 2021 17:00:30 -0700 Subject: [PATCH 2/4] Update AuxPanel and related buttons when widgets change or on reload If we have widgets we're meant to be showing due to layout or because we reloaded the page (slightly different code paths) then we need to show those. This change fixes a bug in that where the layout wasn't being applied at the right moment in time so was never showing the widgets. Seems to only be an issue if the layout state event was sent by someone other than you. --- src/components/structures/RoomView.tsx | 29 ++++++++++++++++++++++++-- 1 file changed, 27 insertions(+), 2 deletions(-) diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index 3edfef7f18..c2236ddd14 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -282,6 +282,7 @@ export default class RoomView extends React.Component { private checkWidgets = (room) => { this.setState({ hasPinnedWidgets: WidgetLayoutStore.instance.getContainerWidgets(room, Container.Top).length > 0, + showApps: this.shouldShowApps(room), }); }; @@ -419,11 +420,17 @@ export default class RoomView extends React.Component { } private onWidgetEchoStoreUpdate = () => { + if (!this.state.room) return; this.setState({ + hasPinnedWidgets: WidgetLayoutStore.instance.getContainerWidgets(this.state.room, Container.Top).length > 0, showApps: this.shouldShowApps(this.state.room), }); }; + private onWidgetLayoutChange = () => { + this.onWidgetEchoStoreUpdate(); // we cheat here by calling the thing that matters + }; + private setupRoom(room: Room, roomId: string, joining: boolean, shouldPeek: boolean) { // if this is an unknown room then we're in one of three states: // - This is a room we can peek into (search engine) (we can /peek) @@ -489,7 +496,7 @@ export default class RoomView extends React.Component { } private shouldShowApps(room: Room) { - if (!BROWSER_SUPPORTS_SANDBOX) return false; + if (!BROWSER_SUPPORTS_SANDBOX || !room) return false; // Check if user has previously chosen to hide the app drawer for this // room. If so, do not show apps @@ -498,7 +505,11 @@ export default class RoomView extends React.Component { // This is confusing, but it means to say that we default to the tray being // hidden unless the user clicked to open it. - return hideWidgetDrawer === "false"; + const isManuallyShown = hideWidgetDrawer === "false"; + + const widgets = WidgetLayoutStore.instance.getContainerWidgets(room, Container.Top); + console.log('@@', {widgets, isManuallyShown}); + return widgets.length > 0 || isManuallyShown; } componentDidMount() { @@ -609,6 +620,10 @@ export default class RoomView extends React.Component { WidgetEchoStore.removeListener(UPDATE_EVENT, this.onWidgetEchoStoreUpdate); WidgetStore.instance.removeListener(UPDATE_EVENT, this.onWidgetStoreUpdate); + if (this.state.room) { + WidgetLayoutStore.instance.off(WidgetLayoutStore.emissionForRoom(this.state.room), this.onWidgetLayoutChange); + } + if (this.showReadReceiptsWatchRef) { SettingsStore.unwatchSetting(this.showReadReceiptsWatchRef); } @@ -836,6 +851,10 @@ export default class RoomView extends React.Component { // called when state.room is first initialised (either at initial load, // after a successful peek, or after we join the room). private onRoomLoaded = (room: Room) => { + // Attach a widget store listener only when we get a room + WidgetLayoutStore.instance.on(WidgetLayoutStore.emissionForRoom(room), this.onWidgetLayoutChange); + this.onWidgetLayoutChange(); // provoke an update + this.calculatePeekRules(room); this.updatePreviewUrlVisibility(room); this.loadMembersIfJoined(room); @@ -898,6 +917,12 @@ export default class RoomView extends React.Component { if (!room || room.roomId !== this.state.roomId) { return; } + + // Detach the listener if the room is changing for some reason + if (this.state.room) { + WidgetLayoutStore.instance.off(WidgetLayoutStore.emissionForRoom(this.state.room), this.onWidgetLayoutChange); + } + this.setState({ room: room, }, () => { From 807a8c41e300a60e58621af6abaac3274843c38a Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Fri, 22 Jan 2021 17:02:00 -0700 Subject: [PATCH 3/4] Remove debug --- src/components/structures/RoomView.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index c2236ddd14..faa10f5dcf 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -508,7 +508,6 @@ export default class RoomView extends React.Component { const isManuallyShown = hideWidgetDrawer === "false"; const widgets = WidgetLayoutStore.instance.getContainerWidgets(room, Container.Top); - console.log('@@', {widgets, isManuallyShown}); return widgets.length > 0 || isManuallyShown; } From 27dc4cb57493ca9ef194a59423edc1c0875dc1e3 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Fri, 22 Jan 2021 17:03:36 -0700 Subject: [PATCH 4/4] Appease the linter --- src/components/structures/RoomView.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index faa10f5dcf..4bfe34bd8f 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -620,7 +620,10 @@ export default class RoomView extends React.Component { WidgetStore.instance.removeListener(UPDATE_EVENT, this.onWidgetStoreUpdate); if (this.state.room) { - WidgetLayoutStore.instance.off(WidgetLayoutStore.emissionForRoom(this.state.room), this.onWidgetLayoutChange); + WidgetLayoutStore.instance.off( + WidgetLayoutStore.emissionForRoom(this.state.room), + this.onWidgetLayoutChange, + ); } if (this.showReadReceiptsWatchRef) { @@ -919,7 +922,10 @@ export default class RoomView extends React.Component { // Detach the listener if the room is changing for some reason if (this.state.room) { - WidgetLayoutStore.instance.off(WidgetLayoutStore.emissionForRoom(this.state.room), this.onWidgetLayoutChange); + WidgetLayoutStore.instance.off( + WidgetLayoutStore.emissionForRoom(this.state.room), + this.onWidgetLayoutChange, + ); } this.setState({