Merge branch 'develop' of ssh://github.com/element-hq/element-web into t3chguy/consolidate-build-test-ci

# Conflicts:
#	pnpm-lock.yaml

Author: t3chguy

apps/web/playwright/e2e/crypto/device-verification.spec.ts

@@ -270,17 +270,27 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
         await checkDeviceIsConnectedKeyBackup(app, expectedBackupVersion, true);
     }
 
-    test("Handle incoming verification request with SAS", async ({ page, credentials, homeserver, toasts }) => {
+    test("Handle incoming verification request with SAS", async ({ page, credentials, homeserver, toasts, app }) => {
+        /* Log in but don't verify the device */
         await logIntoElement(page, credentials);
-
-        /* Dismiss "Verify this device" */
         const authPage = page.locator(".mx_AuthPage");
         await authPage.getByRole("button", { name: "Skip verification for now" }).click();
         await authPage.getByRole("button", { name: "I'll verify later" }).click();
 
         await page.waitForSelector(".mx_MatrixChat");
         const elementDeviceId = await page.evaluate(() => window.mxMatrixClientPeg.get().getDeviceId());
 
+        /* Create an encrypted room so the "Verify this device" toast appears */
+        await app.client.createRoom({
+            initial_state: [
+                {
+                    type: "m.room.encryption",
+                    state_key: "",
+                    content: { algorithm: "m.megolm.v1.aes-sha2" },
+                },
+            ],
+        });
+
         /* Now initiate a verification request from the *bot* device. */
         const botVerificationRequest = await aliceBotClient.evaluateHandle(
             async (client, { userId, deviceId }) => {

apps/web/playwright/e2e/voip/element-call.spec.ts

@@ -37,7 +37,6 @@ function assertCommonCallParameters(
     expect(hash.get("userId")).toEqual(user.userId);
     expect(hash.get("deviceId")).toEqual(user.deviceId);
     expect(hash.get("roomId")).toEqual(room.roomId);
-    expect(hash.get("preload")).toEqual("false");
 }
 
 async function sendRTCState(bot: Bot, roomId: string, notification?: "ring" | "notification", intent?: string) {

apps/web/src/PosthogAnalytics.ts

@@ -164,7 +164,9 @@ export class PosthogAnalytics {
         dis.register(this.onAction);
         SettingsStore.monitorSetting("layout", null);
         SettingsStore.monitorSetting("useCompactLayout", null);
+        SettingsStore.monitorSetting("urlPreviewsEnabled", null);
         this.onLayoutUpdated();
+        this.onUrlPreviewSettingUpdated(SettingsStore.getValue("urlPreviewsEnabled"));
         this.updateCryptoSuperProperty();
     }
 
@@ -188,11 +190,17 @@ export class PosthogAnalytics {
         this.setProperty("WebLayout", layout);
     };
 
+    private readonly onUrlPreviewSettingUpdated = (value: boolean): void => {
+        this.setProperty("URLPreviewsEnabled", value);
+    };
+
     private onAction = (payload: ActionPayload): void => {
         if (payload.action !== Action.SettingUpdated) return;
         const settingsPayload = payload as SettingUpdatedPayload;
         if (["layout", "useCompactLayout"].includes(settingsPayload.settingName)) {
             this.onLayoutUpdated();
+        } else if (settingsPayload.settingName === "urlPreviewsEnabled" && !settingsPayload.roomId) {
+            this.onUrlPreviewSettingUpdated(settingsPayload.newValue as boolean);
         }
     };
 

apps/web/src/PosthogTrackers.ts

@@ -1,4 +1,5 @@
 /*
+Copyright 2026 Element Creations Ltd.
 Copyright 2024 New Vector Ltd.
 Copyright 2022 The Matrix.org Foundation C.I.C.
 
@@ -11,11 +12,14 @@ import { type WebScreen as ScreenEvent } from "@matrix-org/analytics-events/type
 import { type Interaction as InteractionEvent } from "@matrix-org/analytics-events/types/typescript/Interaction";
 import { type PinUnpinAction } from "@matrix-org/analytics-events/types/typescript/PinUnpinAction";
 import { type RoomListSortingAlgorithmChanged } from "@matrix-org/analytics-events/types/typescript/RoomListSortingAlgorithmChanged";
+import { type UrlPreviewRendered } from "@matrix-org/analytics-events/types/typescript/UrlPreviewRendered";
+import { type UrlPreview } from "@element-hq/web-shared-components";
 
 import PageType from "./PageTypes";
 import Views from "./Views";
 import { PosthogAnalytics } from "./PosthogAnalytics";
 import { SortingAlgorithm } from "./stores/room-list-v3/skip-list/sorters";
+import { LruCache } from "./utils/LruCache";
 
 export type ScreenName = ScreenEvent["$current_url"];
 export type InteractionName = InteractionEvent["name"];
@@ -49,6 +53,8 @@ const SortingAlgorithmMap: Record<SortingAlgorithm, RoomListSortingAlgorithmChan
 export default class PosthogTrackers {
     private static internalInstance: PosthogTrackers;
 
+    private readonly previewedEventIds = new LruCache<string, true>(1000);
+
     public static get instance(): PosthogTrackers {
         if (!PosthogTrackers.internalInstance) {
             PosthogTrackers.internalInstance = new PosthogTrackers();
@@ -136,6 +142,29 @@ export default class PosthogTrackers {
             newAlgorithm: SortingAlgorithmMap[newAlgorithm],
         });
     }
+
+    /**
+     * Track if an event has had a previewed rendered in the client.
+     * This function makes a best-effort attempt to prevent double counting.
+     *
+     * @param eventId EventID for deduplication.
+     * @param isEncrypted Whether the event (and effectively the room) was encrypted.
+     * @param previews The previews generated from the event.
+     */
+    public trackUrlPreview(eventId: string, isEncrypted: boolean, previews: UrlPreview[]): void {
+        // Discount any previews that we have already tracked.
+        if (this.previewedEventIds.get(eventId)) {
+            return;
+        }
+        PosthogAnalytics.instance.trackEvent<UrlPreviewRendered>({
+            eventName: "UrlPreviewRendered",
+            previewKind: "LegacyCard",
+            hasThumbnail: previews.some((p) => !!p.image),
+            previewCount: previews.length,
+            encryptedRoom: isEncrypted,
+        });
+        this.previewedEventIds.set(eventId, true);
+    }
 }
 
 export class PosthogScreenTracker extends PureComponent<{ screenName: ScreenName }> {

apps/web/src/components/views/messages/TextualBody.tsx

@@ -14,6 +14,7 @@ import {
     useCreateAutoDisposedViewModel,
     EventContentBodyView,
     LINKIFIED_DATA_ATTRIBUTE,
+    useViewModel,
 } from "@element-hq/web-shared-components";
 import { logger as rootLogger } from "matrix-js-sdk/src/logger";
 
@@ -39,6 +40,7 @@ import { UrlPreviewGroupViewModel } from "../../../viewmodels/message-body/UrlPr
 import { useMediaVisible } from "../../../hooks/useMediaVisible.ts";
 import ImageView from "../elements/ImageView.tsx";
 import { useMatrixClientContext } from "../../../contexts/MatrixClientContext.tsx";
+import PosthogTrackers from "../../../PosthogTrackers.ts";
 
 const logger = rootLogger.getChild("TextualBody");
 
@@ -427,5 +429,14 @@ export default function TextualBody(props: IBodyProps): React.ReactElement {
         })();
     }, [vm, props.showUrlPreview, mediaVisible]);
 
+    const { previews } = useViewModel(vm);
+
+    useEffect(() => {
+        if (previews.length === 0) {
+            return;
+        }
+        PosthogTrackers.instance.trackUrlPreview(props.mxEvent.getId()!, props.mxEvent.isEncrypted(), previews);
+    }, [props.mxEvent, previews]);
+
     return <InnerTextualBody urlPreviewViewModel={vm} {...props} />;
 }

apps/web/src/device-listener/DeviceListenerCurrentDevice.ts

@@ -153,7 +153,6 @@ export class DeviceListenerCurrentDevice {
             return;
         }
 
-        const crossSigningReady = await crypto.isCrossSigningReady();
         const secretStorageStatus = await crypto.getSecretStorageStatus();
         const crossSigningStatus = await crypto.getCrossSigningStatus();
         const allCrossSigningSecretsCached =
@@ -238,7 +237,6 @@ export class DeviceListenerCurrentDevice {
                 // missing locally, that is handled by the
                 // `!allCrossSigningSecretsCached` branch above.
                 logSpan.warn("4S is missing secrets or backup key not cached", {
-                    crossSigningReady,
                     secretStorageStatus,
                     allCrossSigningSecretsCached,
                     isCurrentDeviceTrusted,

apps/web/src/models/Call.ts

@@ -660,7 +660,7 @@ export class ElementCall extends Call {
     ): void {
         const room = client.getRoom(roomId);
         if (!room) {
-            // If the room isn't known, or the room is a video room then skip setting an intent.
+            // If the room isn't known then skip setting an intent.
             return;
         } else if (isVideoRoom(room)) {
             // Video rooms already exist, so just treat as if we're joining a group call.
@@ -669,35 +669,27 @@ export class ElementCall extends Call {
             params.append("returnToLobby", "true");
             // Never skip the lobby, we always want to give the caller a chance to explicitly join.
             params.append("skipLobby", "false");
-            // Never preload, as per below warning.
-            params.append("preload", "false");
             return;
         }
+
         const isDM = !!DMRoomMap.shared().getUserIdForRoomId(room.roomId);
         const oldestCallMember = client.matrixRTC.getRoomSession(room).getOldestMembership();
         const hasCallStarted = !!oldestCallMember && oldestCallMember.sender !== client.getSafeUserId();
-        // XXX: @element-hq/element-call-embedded <= 0.15.0 sets the wrong parameter for
-        // preload by default so we override here. This can be removed when that package
-        // is released and upgraded.
         if (isDM) {
             if (hasCallStarted) {
                 params.append(
                     "intent",
                     voiceOnly ? ElementCallIntent.JoinExistingDMVoice : ElementCallIntent.JoinExistingDM,
                 );
-                params.append("preload", "false");
             } else {
                 params.append("intent", voiceOnly ? ElementCallIntent.StartCallDMVoice : ElementCallIntent.StartCallDM);
-                params.append("preload", "false");
             }
         } else {
             // Group chats do not have a voice option.
             if (hasCallStarted) {
                 params.append("intent", ElementCallIntent.JoinExisting);
-                params.append("preload", "false");
             } else {
                 params.append("intent", ElementCallIntent.StartCall);
-                params.append("preload", "false");
             }
         }
     }
@@ -836,58 +828,18 @@ export class ElementCall extends Call {
         );
     }
 
-    /**
-     * Get the correct intent for a widget, so that Element Call presents the correct
-     * default config.
-     * @param client The matrix client.
-     * @param roomId
-     * @param voiceOnly Should the call be voice-only, or video (default).
-     */
-    public static getWidgetIntent(client: MatrixClient, roomId: string, voiceOnly?: boolean): ElementCallIntent {
-        const room = client.getRoom(roomId);
-        if (room !== null && !isVideoRoom(room)) {
-            const isDM = !!DMRoomMap.shared().getUserIdForRoomId(room.roomId);
-            const oldestCallMember = client.matrixRTC.getRoomSession(room).getOldestMembership();
-            const hasCallStarted = !!oldestCallMember && oldestCallMember.sender !== client.getSafeUserId();
-            if (isDM) {
-                if (hasCallStarted) {
-                    return voiceOnly ? ElementCallIntent.JoinExistingDMVoice : ElementCallIntent.JoinExistingDM;
-                } else {
-                    return voiceOnly ? ElementCallIntent.StartCallDMVoice : ElementCallIntent.StartCallDM;
-                }
-            } else {
-                if (hasCallStarted) {
-                    return ElementCallIntent.JoinExisting;
-                } else {
-                    return ElementCallIntent.StartCall;
-                }
-            }
-        }
-        // If unknown, default to joining an existing call.
-        return ElementCallIntent.JoinExisting;
-    }
-
     private static getWidgetData(
         client: MatrixClient,
         roomId: string,
         currentData: IWidgetData,
         overwriteData: IWidgetData,
-        voiceOnly?: boolean,
     ): IWidgetData {
-        let perParticipantE2EE = false;
-        if (
-            client.getRoom(roomId)?.hasEncryptionStateEvent() &&
-            !SettingsStore.getValue("feature_disable_call_per_sender_encryption")
-        )
-            perParticipantE2EE = true;
-
-        const intent = ElementCall.getWidgetIntent(client, roomId, voiceOnly);
-
         return {
             ...currentData,
             ...overwriteData,
-            intent,
-            perParticipantE2EE,
+            perParticipantE2EE:
+                client.getRoom(roomId)?.hasEncryptionStateEvent() &&
+                !SettingsStore.getValue("feature_disable_call_per_sender_encryption"),
         };
     }
 

apps/web/src/toasts/SetupEncryptionToast.tsx

@@ -365,7 +365,12 @@ export const showToast = (state: DeviceStateForToast): void => {
             overrideWidth: state === "key_storage_out_of_sync" ? "366px" : undefined,
         },
         component: GenericToast,
-        priority: state === "verify_this_session" ? 95 : 40,
+        // verify_this_session is more important than most toasts, but
+        // needs to appear below an incoming verification request, so we can fix
+        // the problem by accepting it.
+        //
+        // Other states are less urgent.
+        priority: state === "verify_this_session" ? 85 : 40,
     });
 };
 

apps/web/src/viewmodels/message-body/UrlPreviewGroupViewModel.ts

@@ -14,12 +14,14 @@ import {
 import { logger as rootLogger } from "matrix-js-sdk/src/logger";
 import { type IPreviewUrlResponse, type MatrixClient, MatrixError, type MatrixEvent } from "matrix-js-sdk/src/matrix";
 import { decode } from "html-entities";
+import { type UrlPreviewVisibilityChanged } from "@matrix-org/analytics-events/types/typescript/UrlPreviewVisibilityChanged";
 
 import { isPermalinkHost } from "../../utils/permalinks/Permalinks";
 import { mediaFromMxc } from "../../customisations/Media";
 import PlatformPeg from "../../PlatformPeg";
 import { thumbHeight } from "../../ImageUtils";
 import SettingsStore from "../../settings/SettingsStore";
+import { PosthogAnalytics } from "../../PosthogAnalytics";
 
 const logger = rootLogger.getChild("UrlPreviewGroupViewModel");
 
@@ -404,6 +406,13 @@ export class UrlPreviewGroupViewModel
         // FIXME: persist this somewhere smarter than local storage
         globalThis.localStorage?.setItem(this.storageKey, "1");
         this.urlPreviewEnabledByUser = false;
+        PosthogAnalytics.instance.trackEvent<UrlPreviewVisibilityChanged>({
+            eventName: "UrlPreviewVisibilityChanged",
+            previewKind: "LegacyCard",
+            hasThumbnail: this.snapshot.current.previews.some((p) => !!p.image),
+            previewCount: this.snapshot.current.previews.length,
+            visible: this.urlPreviewEnabledByUser,
+        });
         return this.computeSnapshot();
     };