Merge develop into psf-771-button-for-live-location-share (using imerge)

Author: andybalaam

CHANGELOG.md

@@ -1,6 +1,6 @@
 {
   "name": "matrix-react-sdk",
-  "version": "3.41.1",
+  "version": "3.42.0",
   "description": "SDK for matrix.org using React",
   "author": "matrix.org",
   "repository": {

package.json

@@ -1123,7 +1123,7 @@ export default class CallHandler extends EventEmitter {
 
         const jitsiWidgets = roomInfo.widgets.filter(w => WidgetType.JITSI.matches(w.type));
         jitsiWidgets.forEach(w => {
-            const messaging = WidgetMessagingStore.instance.getMessagingForId(w.id);
+            const messaging = WidgetMessagingStore.instance.getMessagingForUid(WidgetUtils.getWidgetUid(w));
             if (!messaging) return; // more "should never happen" words
 
             messaging.transport.send(ElementWidgetActions.HangupCall, {});

src/CallHandler.tsx

@@ -309,7 +309,7 @@ const ThreadPanel: React.FC<IProps> = ({ roomId, onClose, permalinkCreator }) =>
                         manageReadMarkers={false} // No RM support in thread's MVP
                         sendReadReceiptOnLoad={false} // No RR support in thread's MVP
                         timelineSet={timelineSet}
-                        showUrlPreview={true}
+                        showUrlPreview={false} // No URL previews at the threads list level
                         empty={<EmptyThread
                             filterOption={filterOption}
                             showAllThreadsCallback={() => setFilterOption(ThreadFilterType.All)}

src/components/structures/ThreadPanel.tsx

@@ -289,6 +289,7 @@ export default class ThreadView extends React.Component<IProps, IState> {
         return {
             "rel_type": THREAD_RELATION_TYPE.name,
             "event_id": this.state.thread?.id,
+            "is_falling_back": true,
             "m.in_reply_to": {
                 "event_id": this.state.lastThreadReply?.getId() ?? this.state.thread?.id,
             },
@@ -350,7 +351,7 @@ export default class ThreadView extends React.Component<IProps, IState> {
                             manageReadMarkers={true}
                             sendReadReceiptOnLoad={true}
                             timelineSet={this.state?.thread?.timelineSet}
-                            showUrlPreview={true}
+                            showUrlPreview={this.context.showUrlPreview}
                             // ThreadView doesn't support IRC layout at this time
                             layout={this.state.layout === Layout.Bubble ? Layout.Bubble : Layout.Group}
                             hideThreadedMessages={false}

src/components/structures/ThreadView.tsx

@@ -57,7 +57,7 @@ const WidgetContextMenu: React.FC<IProps> = ({
     const cli = useContext(MatrixClientContext);
     const { room, roomId } = useContext(RoomContext);
 
-    const widgetMessaging = WidgetMessagingStore.instance.getMessagingForId(app.id);
+    const widgetMessaging = WidgetMessagingStore.instance.getMessagingForUid(WidgetUtils.getWidgetUid(app));
     const canModify = userWidget || WidgetUtils.canUserModifyWidgets(roomId);
 
     let streamAudioStreamButton;

src/components/views/context_menus/WidgetContextMenu.tsx

@@ -118,24 +118,27 @@ export default class AppTile extends React.Component<IProps, IState> {
         showLayoutButtons: true,
     };
 
-    // We track a count of all "live" `AppTile`s for a given widget ID.
+    // We track a count of all "live" `AppTile`s for a given widget UID.
     // For this purpose, an `AppTile` is considered live from the time it is
     // constructed until it is unmounted. This is used to aid logic around when
     // to tear down the widget iframe. See `componentWillUnmount` for details.
-    private static liveTilesById: { [key: string]: number } = {};
+    private static liveTilesByUid = new Map<string, number>();
 
-    public static addLiveTile(widgetId: string): void {
-        const refs = this.liveTilesById[widgetId] || 0;
-        this.liveTilesById[widgetId] = refs + 1;
+    public static addLiveTile(widgetId: string, roomId: string): void {
+        const uid = WidgetUtils.calcWidgetUid(widgetId, roomId);
+        const refs = this.liveTilesByUid.get(uid) ?? 0;
+        this.liveTilesByUid.set(uid, refs + 1);
     }
 
-    public static removeLiveTile(widgetId: string): void {
-        const refs = this.liveTilesById[widgetId] || 0;
-        this.liveTilesById[widgetId] = refs - 1;
+    public static removeLiveTile(widgetId: string, roomId: string): void {
+        const uid = WidgetUtils.calcWidgetUid(widgetId, roomId);
+        const refs = this.liveTilesByUid.get(uid);
+        if (refs) this.liveTilesByUid.set(uid, refs - 1);
     }
 
-    public static isLive(widgetId: string): boolean {
-        const refs = this.liveTilesById[widgetId] || 0;
+    public static isLive(widgetId: string, roomId: string): boolean {
+        const uid = WidgetUtils.calcWidgetUid(widgetId, roomId);
+        const refs = this.liveTilesByUid.get(uid) ?? 0;
         return refs > 0;
     }
 
@@ -150,10 +153,10 @@ export default class AppTile extends React.Component<IProps, IState> {
     constructor(props: IProps) {
         super(props);
 
-        AppTile.addLiveTile(this.props.app.id);
+        AppTile.addLiveTile(this.props.app.id, this.props.app.roomId);
 
         // The key used for PersistedElement
-        this.persistKey = getPersistKey(this.props.app.id);
+        this.persistKey = getPersistKey(WidgetUtils.getWidgetUid(this.props.app));
         try {
             this.sgWidget = new StopGapWidget(this.props);
             this.setupSgListeners();
@@ -189,7 +192,9 @@ export default class AppTile extends React.Component<IProps, IState> {
     };
 
     private onUserLeftRoom() {
-        const isActiveWidget = ActiveWidgetStore.instance.getWidgetPersistence(this.props.app.id);
+        const isActiveWidget = ActiveWidgetStore.instance.getWidgetPersistence(
+            this.props.app.id, this.props.app.roomId,
+        );
         if (isActiveWidget) {
             // We just left the room that the active widget was from.
             if (this.props.room && RoomViewStore.getRoomId() !== this.props.room.roomId) {
@@ -200,7 +205,7 @@ export default class AppTile extends React.Component<IProps, IState> {
                 this.reload();
             } else {
                 // Otherwise just cancel its persistence.
-                ActiveWidgetStore.instance.destroyPersistentWidget(this.props.app.id);
+                ActiveWidgetStore.instance.destroyPersistentWidget(this.props.app.id, this.props.app.roomId);
             }
         }
     }
@@ -241,7 +246,7 @@ export default class AppTile extends React.Component<IProps, IState> {
 
         if (this.state.hasPermissionToLoad && !hasPermissionToLoad) {
             // Force the widget to be non-persistent (able to be deleted/forgotten)
-            ActiveWidgetStore.instance.destroyPersistentWidget(this.props.app.id);
+            ActiveWidgetStore.instance.destroyPersistentWidget(this.props.app.id, this.props.app.roomId);
             PersistedElement.destroyElement(this.persistKey);
             this.sgWidget?.stopMessaging();
         }
@@ -291,14 +296,16 @@ export default class AppTile extends React.Component<IProps, IState> {
         // container is constructed before the old one unmounts. By counting the
         // mounted `AppTile`s for each widget, we know to only tear down the
         // widget iframe when the last the `AppTile` unmounts.
-        AppTile.removeLiveTile(this.props.app.id);
+        AppTile.removeLiveTile(this.props.app.id, this.props.app.roomId);
 
         // We also support a separate "persistence" mode where a single widget
         // can request to be "sticky" and follow you across rooms in a PIP
         // container.
-        const isActiveWidget = ActiveWidgetStore.instance.getWidgetPersistence(this.props.app.id);
+        const isActiveWidget = ActiveWidgetStore.instance.getWidgetPersistence(
+            this.props.app.id, this.props.app.roomId,
+        );
 
-        if (!AppTile.isLive(this.props.app.id) && !isActiveWidget) {
+        if (!AppTile.isLive(this.props.app.id, this.props.app.roomId) && !isActiveWidget) {
             this.endWidgetActions();
         }
 
@@ -408,7 +415,7 @@ export default class AppTile extends React.Component<IProps, IState> {
 
         // Delete the widget from the persisted store for good measure.
         PersistedElement.destroyElement(this.persistKey);
-        ActiveWidgetStore.instance.destroyPersistentWidget(this.props.app.id);
+        ActiveWidgetStore.instance.destroyPersistentWidget(this.props.app.id, this.props.app.roomId);
 
         this.sgWidget?.stopMessaging({ forceDestroy: true });
     }

src/components/views/elements/AppTile.tsx

@@ -16,8 +16,8 @@ limitations under the License.
 */
 
 import React, { ContextType } from 'react';
+import { Room } from "matrix-js-sdk/src/models/room";
 
-import ActiveWidgetStore from '../../../stores/ActiveWidgetStore';
 import WidgetUtils from '../../../utils/WidgetUtils';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import AppTile from "./AppTile";
@@ -26,39 +26,40 @@ import MatrixClientContext from "../../../contexts/MatrixClientContext";
 
 interface IProps {
     persistentWidgetId: string;
+    persistentRoomId: string;
     pointerEvents?: string;
 }
 
 @replaceableComponent("views.elements.PersistentApp")
 export default class PersistentApp extends React.Component<IProps> {
     public static contextType = MatrixClientContext;
     context: ContextType<typeof MatrixClientContext>;
+    private room: Room;
 
-    private get app(): IApp {
-        const persistentWidgetInRoomId = ActiveWidgetStore.instance.getRoomId(this.props.persistentWidgetId);
-        const persistentWidgetInRoom = this.context.getRoom(persistentWidgetInRoomId);
+    constructor(props: IProps, context: ContextType<typeof MatrixClientContext>) {
+        super(props, context);
+        this.room = context.getRoom(this.props.persistentRoomId);
+    }
 
+    private get app(): IApp {
         // get the widget data
-        const appEvent = WidgetUtils.getRoomWidgets(persistentWidgetInRoom).find((ev) => {
-            return ev.getStateKey() === ActiveWidgetStore.instance.getPersistentWidgetId();
-        });
+        const appEvent = WidgetUtils.getRoomWidgets(this.room).find(ev =>
+            ev.getStateKey() === this.props.persistentWidgetId,
+        );
         return WidgetUtils.makeAppConfig(
             appEvent.getStateKey(), appEvent.getContent(), appEvent.getSender(),
-            persistentWidgetInRoomId, appEvent.getId(),
+            this.room.roomId, appEvent.getId(),
         );
     }
 
     public render(): JSX.Element {
         const app = this.app;
         if (app) {
-            const persistentWidgetInRoomId = ActiveWidgetStore.instance.getRoomId(this.props.persistentWidgetId);
-            const persistentWidgetInRoom = this.context.getRoom(persistentWidgetInRoomId);
-
             return <AppTile
                 key={app.id}
                 app={app}
                 fullWidth={true}
-                room={persistentWidgetInRoom}
+                room={this.room}
                 userId={this.context.credentials.userId}
                 creatorUserId={app.creatorUserId}
                 widgetPageTitle={WidgetUtils.getWidgetDataTitle(app)}

src/components/views/elements/PersistentApp.tsx

@@ -35,7 +35,7 @@ import ReplyTile from "../rooms/ReplyTile";
 import Pill from './Pill';
 import { ButtonEvent } from './AccessibleButton';
 import { getParentEventId, shouldDisplayReply } from '../../../utils/Reply';
-import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
+import RoomContext from "../../../contexts/RoomContext";
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 
 /**
@@ -205,16 +205,14 @@ export default class ReplyChain extends React.Component<IProps, IState> {
 
     render() {
         let header = null;
-
-        const inThread = this.context.timelineRenderingType === TimelineRenderingType.Thread;
         if (this.state.err) {
             header = <blockquote className="mx_ReplyChain mx_ReplyChain_error">
                 {
                     _t('Unable to load event that was replied to, ' +
                         'it either does not exist or you do not have permission to view it.')
                 }
             </blockquote>;
-        } else if (this.state.loadedEv && shouldDisplayReply(this.state.events[0], inThread)) {
+        } else if (this.state.loadedEv && shouldDisplayReply(this.state.events[0])) {
             const ev = this.state.loadedEv;
             const room = this.matrixClient.getRoom(ev.getRoomId());
             header = <blockquote className={`mx_ReplyChain ${this.getReplyChainColorClass(ev)}`}>

src/components/views/elements/ReplyChain.tsx

@@ -248,7 +248,7 @@ export default class TimelineCard extends React.Component<IProps, IState> {
                             manageReadMarkers={false} // No RM support in the TimelineCard
                             sendReadReceiptOnLoad={true}
                             timelineSet={this.props.timelineSet}
-                            showUrlPreview={true}
+                            showUrlPreview={this.context.showUrlPreview}
                             // The right panel timeline (and therefore threads) don't support IRC layout at this time
                             layout={this.state.layout === Layout.Bubble ? Layout.Bubble : Layout.Group}
                             hideThreadedMessages={false}