From 9d9b77d5e1c5cb4dfb0e05c93001431c3fda03df Mon Sep 17 00:00:00 2001 From: Timo <16718859+toger5@users.noreply.github.com> Date: Mon, 24 Jan 2022 10:24:30 -0500 Subject: [PATCH] Make widgets not reload (persistent) between center and top container (#7575) --- src/components/views/elements/AppTile.tsx | 60 ++++++++++++++--------- src/components/views/rooms/AppsDrawer.tsx | 4 +- src/components/views/voip/PipView.tsx | 18 ++----- src/stores/right-panel/RightPanelStore.ts | 57 ++++++++++----------- src/stores/widgets/StopGapWidget.ts | 14 ++++-- src/stores/widgets/WidgetLayoutStore.ts | 36 +++++++++++--- 6 files changed, 108 insertions(+), 81 deletions(-) diff --git a/src/components/views/elements/AppTile.tsx b/src/components/views/elements/AppTile.tsx index a24fa6477a..fbe092c7b5 100644 --- a/src/components/views/elements/AppTile.tsx +++ b/src/components/views/elements/AppTile.tsx @@ -23,6 +23,7 @@ import classNames from 'classnames'; import { MatrixCapabilities } from "matrix-widget-api"; import { Room } from "matrix-js-sdk/src/models/room"; import { logger } from "matrix-js-sdk/src/logger"; +import { EventSubscription } from 'fbemitter'; import { MatrixClientPeg } from '../../../MatrixClientPeg'; import AccessibleButton from './AccessibleButton'; @@ -46,6 +47,7 @@ import { IApp } from "../../../stores/WidgetStore"; import { WidgetLayoutStore, Container } from "../../../stores/widgets/WidgetLayoutStore"; import { OwnProfileStore } from '../../../stores/OwnProfileStore'; import { UPDATE_EVENT } from '../../../stores/AsyncStore'; +import RoomViewStore from '../../../stores/RoomViewStore'; import WidgetUtils from '../../../utils/WidgetUtils'; interface IProps { @@ -117,6 +119,7 @@ export default class AppTile extends React.Component { private persistKey: string; private sgWidget: StopGapWidget; private dispatcherRef: string; + private roomStoreToken: EventSubscription; constructor(props: IProps) { super(props); @@ -135,9 +138,6 @@ export default class AppTile extends React.Component { } this.state = this.getNewState(props); - this.watchUserReady(); - - this.allowedWidgetsWatchRef = SettingsStore.watchSetting("allowedWidgets", null, this.onAllowedWidgetsChange); } private watchUserReady = () => { @@ -163,6 +163,29 @@ export default class AppTile extends React.Component { return !!currentlyAllowedWidgets[props.app.eventId]; }; + private onWidgetLayoutChange = () => { + const room = MatrixClientPeg.get().getRoom(this.props.room.roomId); + const app = this.props.app; + const isActiveWidget = ActiveWidgetStore.instance.getWidgetPersistence(app.id); + const isVisibleOnScreen = WidgetLayoutStore.instance.isVisibleOnScreen(room, app.id); + if (!isVisibleOnScreen && !isActiveWidget) { + ActiveWidgetStore.instance.destroyPersistentWidget(app.id); + PersistedElement.destroyElement(this.persistKey); + this.sgWidget?.stopMessaging(); + } + }; + + private onRoomViewStoreUpdate = () => { + if (this.props.room.roomId == RoomViewStore.getRoomId()) return; + const app = this.props.app; + const isActiveWidget = ActiveWidgetStore.instance.getWidgetPersistence(app.id); + if (!isActiveWidget) { + ActiveWidgetStore.instance.destroyPersistentWidget(app.id); + PersistedElement.destroyElement(this.persistKey); + this.sgWidget?.stopMessaging(); + } + }; + /** * Set initial component state when the App wUrl (widget URL) is being updated. * Component props *must* be passed (rather than relying on this.props). @@ -195,7 +218,7 @@ export default class AppTile extends React.Component { // Force the widget to be non-persistent (able to be deleted/forgotten) ActiveWidgetStore.instance.destroyPersistentWidget(this.props.app.id); PersistedElement.destroyElement(this.persistKey); - if (this.sgWidget) this.sgWidget.stop(); + this.sgWidget?.stopMessaging(); } this.setState({ hasPermissionToLoad }); @@ -218,7 +241,11 @@ export default class AppTile extends React.Component { if (this.sgWidget && this.state.hasPermissionToLoad) { this.startWidget(); } + this.watchUserReady(); + WidgetLayoutStore.instance.on(WidgetLayoutStore.emissionForRoom(this.props.room), this.onWidgetLayoutChange); + this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate); + this.allowedWidgetsWatchRef = SettingsStore.watchSetting("allowedWidgets", null, this.onAllowedWidgetsChange); // Widget action listeners this.dispatcherRef = dis.register(this.onAction); } @@ -227,24 +254,14 @@ export default class AppTile extends React.Component { // Widget action listeners if (this.dispatcherRef) dis.unregister(this.dispatcherRef); - // if it's not remaining on screen, get rid of the PersistedElement container - if (!ActiveWidgetStore.instance.getWidgetPersistence(this.props.app.id)) { - ActiveWidgetStore.instance.destroyPersistentWidget(this.props.app.id); - PersistedElement.destroyElement(this.persistKey); - } - - if (this.sgWidget) { - this.sgWidget.stop(); - } - + WidgetLayoutStore.instance.off(WidgetLayoutStore.emissionForRoom(this.props.room), this.onWidgetLayoutChange); + this.roomStoreToken?.remove(); SettingsStore.unwatchSetting(this.allowedWidgetsWatchRef); OwnProfileStore.instance.removeListener(UPDATE_EVENT, this.onUserReady); } private resetWidget(newProps: IProps): void { - if (this.sgWidget) { - this.sgWidget.stop(); - } + this.sgWidget?.stopMessaging(); try { this.sgWidget = new StopGapWidget(newProps); this.sgWidget.on("preparing", this.onWidgetPreparing); @@ -266,9 +283,7 @@ export default class AppTile extends React.Component { this.iframe = ref; if (ref) { try { - if (this.sgWidget) { - this.sgWidget.start(ref); - } + this.sgWidget?.startMessaging(ref); } catch (e) { logger.error("Failed to start widget", e); } @@ -321,7 +336,7 @@ export default class AppTile extends React.Component { PersistedElement.destroyElement(this.persistKey); ActiveWidgetStore.instance.destroyPersistentWidget(this.props.app.id); - if (this.sgWidget) this.sgWidget.stop({ forceDestroy: true }); + this.sgWidget?.stopMessaging({ forceDestroy: true }); } private onWidgetPreparing = (): void => { @@ -532,7 +547,7 @@ export default class AppTile extends React.Component { // Also wrap the PersistedElement in a div to fix the height, otherwise // AppTile's border is in the wrong place - // For persistent apps in PiP we want the zIndex to be higher then for other persistent apps (100) + // For persisted apps in PiP we want the zIndex to be higher then for other persisted apps (100) // otherwise there are issues that the PiP view is drawn UNDER another widget (Persistent app) when dragged around. const zIndexAboveOtherPersistentElements = 101; @@ -569,6 +584,7 @@ export default class AppTile extends React.Component { /> ); } + let maxMinButton; if (!this.props.hideMaximiseButton) { const widgetIsMaximised = WidgetLayoutStore.instance. diff --git a/src/components/views/rooms/AppsDrawer.tsx b/src/components/views/rooms/AppsDrawer.tsx index e6d2157f97..eebba4f67c 100644 --- a/src/components/views/rooms/AppsDrawer.tsx +++ b/src/components/views/rooms/AppsDrawer.tsx @@ -189,7 +189,7 @@ export default class AppsDrawer extends React.Component { private onAction = (action: ActionPayload): void => { const hideWidgetKey = this.props.room.roomId + '_hide_widget_drawer'; switch (action.action) { - case 'appsDrawer': + case "appsDrawer": // Note: these booleans are awkward because localstorage is fundamentally // string-based. We also do exact equality on the strings later on. if (action.show) { @@ -279,7 +279,7 @@ export default class AppsDrawer extends React.Component { drawer = { let userIsPartOfTheRoom = false; let fromAnotherRoom = false; - let notInRightPanel = false; - let notInCenterContainer = false; - let notInTopContainer = false; + let notVisible = false; if (wId) { const persistentWidgetInRoomId = ActiveWidgetStore.instance.getRoomId(wId); const persistentWidgetInRoom = MatrixClientPeg.get().getRoom(persistentWidgetInRoomId); @@ -254,24 +252,16 @@ export default class PipView extends React.Component { if (!persistentWidgetInRoom) return null; const wls = WidgetLayoutStore.instance; - + notVisible = !wls.isVisibleOnScreen(persistentWidgetInRoom, wId); userIsPartOfTheRoom = persistentWidgetInRoom.getMyMembership() == "join"; fromAnotherRoom = this.state.viewedRoomId !== persistentWidgetInRoomId; - - notInRightPanel = - !(RightPanelStore.instance.currentCard.phase == RightPanelPhases.Widget && - wId == RightPanelStore.instance.currentCard.state?.widgetId); - notInCenterContainer = - !wls.getContainerWidgets(persistentWidgetInRoom, Container.Center).some((app) => app.id == wId); - notInTopContainer = - !wls.getContainerWidgets(persistentWidgetInRoom, Container.Top).some(app => app.id == wId); } // The widget should only be shown as a persistent app (in a floating pip container) if it is not visible on screen // either, because we are viewing a different room OR because it is in none of the possible containers of the room view. const showWidgetInPip = (fromAnotherRoom && userIsPartOfTheRoom) || - (notInRightPanel && notInCenterContainer && notInTopContainer && userIsPartOfTheRoom); + (notVisible && userIsPartOfTheRoom); this.setState({ showWidgetInPip }); } diff --git a/src/stores/right-panel/RightPanelStore.ts b/src/stores/right-panel/RightPanelStore.ts index 9f6903d357..3f76cbb7bb 100644 --- a/src/stores/right-panel/RightPanelStore.ts +++ b/src/stores/right-panel/RightPanelStore.ts @@ -14,6 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ +import { EventSubscription } from 'fbemitter'; import { logger } from "matrix-js-sdk/src/logger"; import defaultDispatcher from '../../dispatcher/dispatcher'; @@ -21,7 +22,6 @@ import { pendingVerificationRequestForUser } from '../../verification'; import SettingsStore from "../../settings/SettingsStore"; import { RightPanelPhases } from "./RightPanelStorePhases"; import { ActionPayload } from "../../dispatcher/payloads"; -import { Action } from '../../dispatcher/actions'; import { SettingLevel } from "../../settings/SettingLevel"; import { UPDATE_EVENT } from '../AsyncStore'; import { ReadyWatchingStore } from '../ReadyWatchingStore'; @@ -32,7 +32,7 @@ import { IRightPanelForRoom, } from './RightPanelStoreIPanelState'; import { MatrixClientPeg } from "../../MatrixClientPeg"; -// import RoomViewStore from '../RoomViewStore'; +import RoomViewStore from '../RoomViewStore'; const GROUP_PHASES = [ RightPanelPhases.GroupMemberList, @@ -41,12 +41,6 @@ const GROUP_PHASES = [ RightPanelPhases.GroupMemberInfo, ]; -const MEMBER_INFO_PHASES = [ - RightPanelPhases.RoomMemberInfo, - RightPanelPhases.Room3pidMemberInfo, - RightPanelPhases.EncryptionPanel, -]; - /** * A class for tracking the state of the right panel between layouts and * sessions. This state includes a history for each room. Each history element @@ -68,6 +62,8 @@ export default class RightPanelStore extends ReadyWatchingStore { [roomId: string]: IRightPanelForRoom; } = {}; + private roomStoreToken: EventSubscription; + private constructor() { super(defaultDispatcher); this.dispatcherRefRightPanelStore = defaultDispatcher.register(this.onDispatch); @@ -75,9 +71,9 @@ export default class RightPanelStore extends ReadyWatchingStore { protected async onReady(): Promise { this.isReady = true; - // TODO RightPanelStore (will be addressed when dropping groups): This should be used instead of the onDispatch callback when groups are removed. - // RoomViewStore.on(UPDATE_EVENT, this.onRoomViewStoreUpdate); + this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate); MatrixClientPeg.get().on("crypto.verification.request", this.onVerificationRequestUpdate); + this.viewedRoomId = RoomViewStore.getRoomId(); this.loadCacheFromSettings(); this.emitAndUpdateSettings(); } @@ -91,8 +87,7 @@ export default class RightPanelStore extends ReadyWatchingStore { protected async onNotReady(): Promise { this.isReady = false; MatrixClientPeg.get().off("crypto.verification.request", this.onVerificationRequestUpdate); - // TODO RightPanelStore (will be addressed when dropping groups): User this instead of the dispatcher. - // RoomViewStore.off(UPDATE_EVENT, this.onRoomViewStoreUpdate); + this.roomStoreToken.remove(); } // Getters @@ -373,45 +368,43 @@ export default class RightPanelStore extends ReadyWatchingStore { }; onRoomViewStoreUpdate = () => { - // TODO: use this function instead of the onDispatch (the whole onDispatch can get removed!) as soon groups are removed - // this.viewedRoomId = RoomViewStore.getRoomId(); - // this.isViewingRoom = true; // Is viewing room will of course be removed when removing groups - // // load values from byRoomCache with the viewedRoomId. - // this.loadCacheFromSettings(); + // TODO: only use this function instead of the onDispatch (the whole onDispatch can get removed!) as soon groups are removed + this.viewedRoomId = RoomViewStore.getRoomId(); + this.isViewingRoom = true; // Is viewing room will of course be removed when removing groups + // load values from byRoomCache with the viewedRoomId. + this.loadCacheFromSettings(); + this.emitAndUpdateSettings(); }; onDispatch = (payload: ActionPayload) => { switch (payload.action) { - case 'view_group': - case Action.ViewRoom: { + case 'view_group': { if (payload.room_id === this.viewedRoomId) break; // skip this transition, probably a permalink // Put group in the same/similar view to what was open from the previously viewed room // Is contradictory to the new "per room" philosophy but it is the legacy behavior for groups. - if ((this.isViewingRoom ? Action.ViewRoom : "view_group") != payload.action) { - if (payload.action == Action.ViewRoom && MEMBER_INFO_PHASES.includes(this.currentCard?.phase)) { - // switch from group to room - this.setRightPanelCache({ phase: RightPanelPhases.RoomMemberList, state: {} }); - } else if ( - payload.action == "view_group" && - this.currentCard?.phase === RightPanelPhases.GroupMemberInfo - ) { - // switch from room to group - this.setRightPanelCache({ phase: RightPanelPhases.GroupMemberList, state: {} }); - } + + if ( + this.currentCard?.phase === RightPanelPhases.GroupMemberInfo + ) { + // switch from room to group + this.setRightPanelCache({ phase: RightPanelPhases.GroupMemberList, state: {} }); } // Update the current room here, so that all the other functions dont need to be room dependant. // The right panel store always will return the state for the current room. this.viewedRoomId = payload.room_id; - this.isViewingRoom = payload.action == Action.ViewRoom; + this.isViewingRoom = false; // load values from byRoomCache with the viewedRoomId. if (this.isReady) { // we need the client to be ready to get the events form the ids of the settings // the loading will be done in the onReady function (to catch up with the changes done here before it was ready) // all the logic in this case is not necessary anymore as soon as groups are dropped and we use: onRoomViewStoreUpdate this.loadCacheFromSettings(); - this.emitAndUpdateSettings(); + + // DO NOT EMIT. Emitting breaks iframe refs by triggering a render + // for the room view and calling the iframe ref changed function + // this.emitAndUpdateSettings(); } break; } diff --git a/src/stores/widgets/StopGapWidget.ts b/src/stores/widgets/StopGapWidget.ts index 369cafab5b..5d1f141218 100644 --- a/src/stores/widgets/StopGapWidget.ts +++ b/src/stores/widgets/StopGapWidget.ts @@ -255,8 +255,11 @@ export class StopGapWidget extends EventEmitter { }); } }; - - public start(iframe: HTMLIFrameElement) { + /** + * This starts the messaging for the widget if it is not in the state `started` yet. + * @param iframe the iframe the widget should use + */ + public startMessaging(iframe: HTMLIFrameElement): any { if (this.started) return; const allowedCapabilities = this.appTileProps.whitelistCapabilities || []; const driver = new StopGapWidgetDriver(allowedCapabilities, this.mockWidget, this.kind, this.roomId); @@ -407,7 +410,12 @@ export class StopGapWidget extends EventEmitter { } } - public stop(opts = { forceDestroy: false }) { + /** + * Stops the widget messaging for if it is started. Skips stopping if it is an active + * widget. + * @param opts + */ + public stopMessaging(opts = { forceDestroy: false }) { if (!opts?.forceDestroy && ActiveWidgetStore.instance.getPersistentWidgetId() === this.mockWidget.id) { logger.log("Skipping destroy - persistent widget"); return; diff --git a/src/stores/widgets/WidgetLayoutStore.ts b/src/stores/widgets/WidgetLayoutStore.ts index ba98d48feb..71c0fccbb0 100644 --- a/src/stores/widgets/WidgetLayoutStore.ts +++ b/src/stores/widgets/WidgetLayoutStore.ts @@ -27,6 +27,8 @@ import { SettingLevel } from "../../settings/SettingLevel"; import { arrayFastClone } from "../../utils/arrays"; import { UPDATE_EVENT } from "../AsyncStore"; import { compare } from "../../utils/strings"; +import RightPanelStore from "../right-panel/RightPanelStore"; +import { RightPanelPhases } from "../right-panel/RightPanelStorePhases"; export const WIDGET_LAYOUT_EVENT_TYPE = "io.element.widgets.layout"; @@ -351,6 +353,22 @@ export class WidgetLayoutStore extends ReadyWatchingStore { return this.getContainerWidgets(room, container).some(w => w.id === widget.id); } + public isVisibleOnScreen(room: Room, widgetId: string) { + const wId = widgetId; + const inRightPanel = + (RightPanelStore.instance.currentCard.phase == RightPanelPhases.Widget && + wId == RightPanelStore.instance.currentCard.state?.widgetId); + const inCenterContainer = + this.getContainerWidgets(room, Container.Center).some((app) => app.id == wId); + const inTopContainer = + this.getContainerWidgets(room, Container.Top).some(app => app.id == wId); + + // The widget should only be shown as a persistent app (in a floating pip container) if it is not visible on screen + // either, because we are viewing a different room OR because it is in none of the possible containers of the room view. + const isVisibleOnScreen = (inRightPanel || inCenterContainer || inTopContainer); + return isVisibleOnScreen; + } + public canAddToContainer(room: Room, container: Container): boolean { switch (container) { case Container.Top: return this.getContainerWidgets(room, container).length < MAX_PINNED; @@ -440,7 +458,8 @@ export class WidgetLayoutStore extends ReadyWatchingStore { public moveToContainer(room: Room, widget: IApp, toContainer: Container) { const allWidgets = this.getAllWidgets(room); if (!allWidgets.some(([w]) => w.id === widget.id)) return; // invalid - // Prepare other containers (potentially move widgets to obay the following rules) + // Prepare other containers (potentially move widgets to obey the following rules) + const newLayout = {}; switch (toContainer) { case Container.Right: // new "right" widget @@ -448,24 +467,25 @@ export class WidgetLayoutStore extends ReadyWatchingStore { case Container.Center: // new "center" widget => all other widgets go into "right" for (const w of this.getContainerWidgets(room, Container.Top)) { - this.moveToContainer(room, w, Container.Right); + newLayout[w.id] = { container: Container.Right }; } for (const w of this.getContainerWidgets(room, Container.Center)) { - this.moveToContainer(room, w, Container.Right); + newLayout[w.id] = { container: Container.Right }; } break; case Container.Top: // new "top" widget => the center widget moves into "right" if (this.hasMaximisedWidget(room)) { - this.moveToContainer(room, this.getContainerWidgets(room, Container.Center)[0], Container.Right); + const centerWidget = this.getContainerWidgets(room, Container.Center)[0]; + newLayout[centerWidget.id] = { container: Container.Right }; } break; } - // move widgets into requested container. - this.updateUserLayout(room, { - [widget.id]: { container: toContainer }, - }); + newLayout[widget.id] = { container: toContainer }; + + // move widgets into requested containers. + this.updateUserLayout(room, newLayout); } public hasMaximisedWidget(room: Room) {