From 770730ba6cbde04ba4f8667ae161ba9223555ec5 Mon Sep 17 00:00:00 2001 From: Robin Date: Tue, 19 Nov 2024 13:17:24 -0500 Subject: [PATCH 01/15] Don't fall back as eagerly to unselected devices Somewhere around version 131 or 132, Firefox has started being more paranoid about media device fingerprinting, and will not even give you the IDs of available devices until you've requested a media stream. Instead you only get a single audio input and video input each with the empty string as their device ID, representing the system's default device. We can recognize this case and avoid resetting the device selection. --- src/livekit/MediaDevicesContext.tsx | 61 ++++++++++++----------------- 1 file changed, 26 insertions(+), 35 deletions(-) diff --git a/src/livekit/MediaDevicesContext.tsx b/src/livekit/MediaDevicesContext.tsx index 3d85b165..a26cf722 100644 --- a/src/livekit/MediaDevicesContext.tsx +++ b/src/livekit/MediaDevicesContext.tsx @@ -24,6 +24,7 @@ import { audioInput as audioInputSetting, audioOutput as audioOutputSetting, videoInput as videoInputSetting, + Setting, } from "../settings/settings"; import { isFirefox } from "../Platform"; @@ -58,7 +59,7 @@ function useObservableState( function useMediaDevice( kind: MediaDeviceKind, - fallbackDevice: string | undefined, + setting: Setting, usingNames: boolean, alwaysDefault: boolean = false, ): MediaDevice { @@ -84,15 +85,19 @@ function useMediaDevice( [kind, requestPermissions], ); const available = useObservableState(deviceObserver, []); - const [selectedId, select] = useState(fallbackDevice); + const [selectedId, select] = useSetting(setting); return useMemo(() => { - let devId; - if (available) { - devId = available.some((d) => d.deviceId === selectedId) - ? selectedId - : available.some((d) => d.deviceId === fallbackDevice) - ? fallbackDevice + let devId: string | undefined = undefined; + if (!alwaysDefault && available) { + // If the selected device is available, use it. Or if every available + // device ID is falsy, the browser is probably just being paranoid about + // fingerprinting and we should still try using the selected device. + // Otherwise, fall back to the first available device. + devId = + available.some((d) => d.deviceId === selectedId) || + available.every((d) => d.deviceId === "") + ? selectedId : available.at(0)?.deviceId; } @@ -102,10 +107,10 @@ function useMediaDevice( // device entries for the exact same device ID; deduplicate them [...new Map(available.map((d) => [d.deviceId, d])).values()] : [], - selectedId: alwaysDefault ? undefined : devId, + selectedId: devId, select, }; - }, [available, selectedId, fallbackDevice, select, alwaysDefault]); + }, [available, selectedId, select, alwaysDefault]); } const deviceStub: MediaDevice = { @@ -141,36 +146,22 @@ export const MediaDevicesProvider: FC = ({ children }) => { // for ouput devices because the selector wont be shown on FF. const useOutputNames = usingNames && !isFirefox(); - const [storedAudioInput, setStoredAudioInput] = useSetting(audioInputSetting); - const [storedAudioOutput, setStoredAudioOutput] = - useSetting(audioOutputSetting); - const [storedVideoInput, setStoredVideoInput] = useSetting(videoInputSetting); - - const audioInput = useMediaDevice("audioinput", storedAudioInput, usingNames); + const audioInput = useMediaDevice( + "audioinput", + audioInputSetting, + usingNames, + ); const audioOutput = useMediaDevice( "audiooutput", - storedAudioOutput, + audioOutputSetting, useOutputNames, alwaysUseDefaultAudio, ); - const videoInput = useMediaDevice("videoinput", storedVideoInput, usingNames); - - useEffect(() => { - if (audioInput.selectedId !== undefined) - setStoredAudioInput(audioInput.selectedId); - }, [setStoredAudioInput, audioInput.selectedId]); - - useEffect(() => { - // Skip setting state for ff output. Redundent since it is set to always return 'undefined' - // but makes it clear while debugging that this is not happening on FF. + perf ;) - if (audioOutput.selectedId !== undefined && !isFirefox()) - setStoredAudioOutput(audioOutput.selectedId); - }, [setStoredAudioOutput, audioOutput.selectedId]); - - useEffect(() => { - if (videoInput.selectedId !== undefined) - setStoredVideoInput(videoInput.selectedId); - }, [setStoredVideoInput, videoInput.selectedId]); + const videoInput = useMediaDevice( + "videoinput", + videoInputSetting, + usingNames, + ); const startUsingDeviceNames = useCallback( () => setNumCallersUsingNames((n) => n + 1), From 38085baab87e5d57d7cf1fbd4b0566f58e633240 Mon Sep 17 00:00:00 2001 From: Robin Date: Tue, 19 Nov 2024 17:18:36 -0500 Subject: [PATCH 02/15] Replace device dropdowns with radio buttons This is closer to what the designs actually want device settings to look like, and it avoids the visual glitch in which the dropdown would render underneath the slider. --- src/settings/DeviceSelection.module.css | 18 +++++ src/settings/DeviceSelection.tsx | 71 +++++++++++++++++++ src/settings/SettingsModal.tsx | 90 ++++++++++--------------- 3 files changed, 123 insertions(+), 56 deletions(-) create mode 100644 src/settings/DeviceSelection.module.css create mode 100644 src/settings/DeviceSelection.tsx diff --git a/src/settings/DeviceSelection.module.css b/src/settings/DeviceSelection.module.css new file mode 100644 index 00000000..daa4510e --- /dev/null +++ b/src/settings/DeviceSelection.module.css @@ -0,0 +1,18 @@ +.selection { + gap: 0; +} + +.title { + color: var(--cpd-color-text-secondary); + margin-block: var(--cpd-space-3x) 0; +} + +.separator { + margin-block: 6px var(--cpd-space-4x); +} + +.options { + display: flex; + flex-direction: column; + gap: var(--cpd-space-4x); +} diff --git a/src/settings/DeviceSelection.tsx b/src/settings/DeviceSelection.tsx new file mode 100644 index 00000000..005973a0 --- /dev/null +++ b/src/settings/DeviceSelection.tsx @@ -0,0 +1,71 @@ +/* +Copyright 2024 New Vector Ltd. + +SPDX-License-Identifier: AGPL-3.0-only +Please see LICENSE in the repository root for full details. +*/ + +import { ChangeEvent, FC, useCallback, useId } from "react"; +import { + Heading, + InlineField, + Label, + RadioControl, + Separator, +} from "@vector-im/compound-web"; + +import { MediaDevice } from "../livekit/MediaDevicesContext"; +import styles from "./DeviceSelection.module.css"; + +interface Props { + devices: MediaDevice; + caption: string; +} + +export const DeviceSelection: FC = ({ devices, caption }) => { + const groupId = useId(); + const onChange = useCallback( + (e: ChangeEvent) => { + devices.select(e.target.value); + }, + [devices], + ); + + if (devices.available.length == 0) return null; + + return ( +
+ + {caption} + + +
+ {devices.available.map(({ deviceId, label }, index) => ( + + } + > + + + ))} +
+
+ ); +}; diff --git a/src/settings/SettingsModal.tsx b/src/settings/SettingsModal.tsx index 07ca5753..78afc2c5 100644 --- a/src/settings/SettingsModal.tsx +++ b/src/settings/SettingsModal.tsx @@ -5,10 +5,10 @@ SPDX-License-Identifier: AGPL-3.0-only Please see LICENSE in the repository root for full details. */ -import { ChangeEvent, FC, ReactNode, useCallback } from "react"; +import { ChangeEvent, FC, useCallback } from "react"; import { Trans, useTranslation } from "react-i18next"; import { MatrixClient } from "matrix-js-sdk/src/matrix"; -import { Dropdown, Separator, Text } from "@vector-im/compound-web"; +import { Root as Form, Text } from "@vector-im/compound-web"; import { Modal } from "../Modal"; import styles from "./SettingsModal.module.css"; @@ -19,7 +19,6 @@ import { ProfileSettingsTab } from "./ProfileSettingsTab"; import { FeedbackSettingsTab } from "./FeedbackSettingsTab"; import { useMediaDevices, - MediaDevice, useMediaDeviceNames, } from "../livekit/MediaDevicesContext"; import { widget } from "../widget"; @@ -33,6 +32,7 @@ import { import { isFirefox } from "../Platform"; import { PreferencesSettingsTab } from "./PreferencesSettingsTab"; import { Slider } from "../Slider"; +import { DeviceSelection } from "./DeviceSelection"; type SettingsTab = | "audio" @@ -70,40 +70,6 @@ export const SettingsModal: FC = ({ ); const [duplicateTiles, setDuplicateTiles] = useSetting(duplicateTilesSetting); - // Generate a `SelectInput` with a list of devices for a given device kind. - const generateDeviceSelection = ( - devices: MediaDevice, - caption: string, - ): ReactNode => { - if (devices.available.length == 0) return null; - - const values = devices.available.map( - ({ deviceId, label }, index) => - [ - deviceId, - !!label && label.trim().length > 0 - ? label - : `${caption} ${index + 1}`, - ] as [string, string], - ); - - return ( - devices.select(id)} - values={values} - // XXX This is unused because we set a defaultValue. The component - // shouldn't require this prop. - placeholder="" - /> - ); - }; - const optInDescription = ( @@ -125,25 +91,30 @@ export const SettingsModal: FC = ({ name: t("common.audio"), content: ( <> - {generateDeviceSelection(devices.audioInput, t("common.microphone"))} - {!isFirefox() && - generateDeviceSelection( - devices.audioOutput, - t("settings.speaker_device_selection_label"), - )} - -
- -

{t("settings.audio_tab.effect_volume_description")}

- + -
+ {!isFirefox() && ( + + )} +
+ +

{t("settings.audio_tab.effect_volume_description")}

+ +
+ ), }; @@ -151,7 +122,14 @@ export const SettingsModal: FC = ({ const videoTab: Tab = { key: "video", name: t("common.video"), - content: generateDeviceSelection(devices.videoInput, t("common.camera")), + content: ( +
+ + + ), }; const preferencesTab: Tab = { From a2b452c1d86dde9ca18bb878a9762521441984d0 Mon Sep 17 00:00:00 2001 From: Robin Date: Thu, 21 Nov 2024 11:24:45 -0500 Subject: [PATCH 03/15] Don't override the camera without pressing "switch camera" --- src/room/useSwitchCamera.ts | 19 +++++++------------ 1 file changed, 7 insertions(+), 12 deletions(-) diff --git a/src/room/useSwitchCamera.ts b/src/room/useSwitchCamera.ts index e0434566..c1b4f092 100644 --- a/src/room/useSwitchCamera.ts +++ b/src/room/useSwitchCamera.ts @@ -20,7 +20,6 @@ import { TrackEvent, } from "livekit-client"; import { useObservable, useObservableEagerState } from "observable-hooks"; -import { useEffect } from "react"; import { logger } from "matrix-js-sdk/src/logger"; import { useMediaDevices } from "../livekit/MediaDevicesContext"; @@ -35,6 +34,7 @@ export function useSwitchCamera( video: Observable, ): (() => void) | null { const mediaDevices = useMediaDevices(); + const setVideoInput = useLatest(mediaDevices.videoInput.select); // Produce an observable like the input 'video' observable, except make it // emit whenever the track is muted or the device changes @@ -75,6 +75,12 @@ export function useSwitchCamera( .restartTrack({ facingMode: facingMode === "user" ? "environment" : "user", }) + .then(() => { + // Inform the MediaDeviceContext which camera was chosen + const deviceId = + track.mediaStreamTrack.getSettings().deviceId; + if (deviceId !== undefined) setVideoInput.current(deviceId); + }) .catch((e) => logger.error("Failed to switch camera", facingMode, e), ); @@ -83,16 +89,5 @@ export function useSwitchCamera( [videoTrack], ); - const setVideoInput = useLatest(mediaDevices.videoInput.select); - useEffect(() => { - // Watch for device changes due to switching the camera and feed them back - // into the MediaDeviceContext - const subscription = videoTrack.subscribe((track) => { - const deviceId = track?.mediaStreamTrack.getSettings().deviceId; - if (deviceId !== undefined) setVideoInput.current(deviceId); - }); - return (): void => subscription.unsubscribe(); - }, [videoTrack, setVideoInput]); - return useObservableEagerState(switchCamera); } From 0718774cef344e2a39e910b4647b1a70deffc7f2 Mon Sep 17 00:00:00 2001 From: Robin Date: Thu, 21 Nov 2024 11:32:15 -0500 Subject: [PATCH 04/15] Clarify how preferred devices work --- src/livekit/MediaDevicesContext.tsx | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/src/livekit/MediaDevicesContext.tsx b/src/livekit/MediaDevicesContext.tsx index a26cf722..d405eec0 100644 --- a/src/livekit/MediaDevicesContext.tsx +++ b/src/livekit/MediaDevicesContext.tsx @@ -85,19 +85,21 @@ function useMediaDevice( [kind, requestPermissions], ); const available = useObservableState(deviceObserver, []); - const [selectedId, select] = useSetting(setting); + const [preferredId, select] = useSetting(setting); return useMemo(() => { - let devId: string | undefined = undefined; + let selectedId: string | undefined = undefined; if (!alwaysDefault && available) { - // If the selected device is available, use it. Or if every available + // If the preferred device is available, use it. Or if every available // device ID is falsy, the browser is probably just being paranoid about - // fingerprinting and we should still try using the selected device. - // Otherwise, fall back to the first available device. - devId = - available.some((d) => d.deviceId === selectedId) || + // fingerprinting and we should still try using the preferred device. + // Worst case it is not available and the browser will gracefully fall + // back to some other device for us when requesting the media stream. + // Otherwise, select the first available device. + selectedId = + available.some((d) => d.deviceId === preferredId) || available.every((d) => d.deviceId === "") - ? selectedId + ? preferredId : available.at(0)?.deviceId; } @@ -107,10 +109,10 @@ function useMediaDevice( // device entries for the exact same device ID; deduplicate them [...new Map(available.map((d) => [d.deviceId, d])).values()] : [], - selectedId: devId, + selectedId, select, }; - }, [available, selectedId, select, alwaysDefault]); + }, [available, preferredId, select, alwaysDefault]); } const deviceStub: MediaDevice = { From 94e5d032a113010747dc7700d89272137850b8d0 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Fri, 22 Nov 2024 02:01:23 +0000 Subject: [PATCH 05/15] Update dependency @vector-im/compound-web to v7.4.0 --- yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/yarn.lock b/yarn.lock index 7c883a6c..5c248165 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3320,9 +3320,9 @@ prettier "^3.3.3" "@vector-im/compound-web@^7.2.0": - version "7.3.0" - resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-7.3.0.tgz#9594113ac50bff4794715104a30a60c52d15517d" - integrity sha512-gDppQUtpk5LvNHUg+Zlv9qzo1iBAag0s3g8Ec0qS5q4zGBKG6ruXXrNUKg1aK8rpbo2hYQsGaHM6dD8NqLoq3Q== + version "7.4.0" + resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-7.4.0.tgz#a5af8af6346f8ff6c14c70f5d4eb2eab7357a7cc" + integrity sha512-ZRBUeEGNmj/fTkIRa8zGnyVN7ytowpfOtHChqNm+m/+OTJN3o/lOMuQHDV8jeSEW2YwPJqGvPuG/dRr89IcQkA== dependencies: "@floating-ui/react" "^0.26.24" "@radix-ui/react-context-menu" "^2.2.1" From 279912d9513f400b0484732bafce2317cc0866b8 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Fri, 22 Nov 2024 09:14:56 +0000 Subject: [PATCH 06/15] Update dependency livekit-client to v2.6.3 --- yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/yarn.lock b/yarn.lock index 7c883a6c..4406d416 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6067,9 +6067,9 @@ lines-and-columns@^1.1.6: integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg== livekit-client@^2.5.7: - version "2.6.2" - resolved "https://registry.yarnpkg.com/livekit-client/-/livekit-client-2.6.2.tgz#7821cac8d293b7685a4272b8aa269685f0ae75a8" - integrity sha512-SqXNHLgk2ZZOZyeHLXFAVAl+FVdSI+NK39LvIYstqS5X6IE5aCPlK4FqXY4l3aHpSft/BC/TR1CFGOq20ONkMA== + version "2.6.3" + resolved "https://registry.yarnpkg.com/livekit-client/-/livekit-client-2.6.3.tgz#0c7e16bcd8b30f61e867ba287257b60db69c7801" + integrity sha512-sUFjdERYdazGmYUCkxV46qKrL8Pg4Aw+9fs/DxV0EC/YtVd7zQh2QObip7IkyT8Ipj4gXhH8CkSinisZ1KpsJQ== dependencies: "@livekit/mutex" "1.0.0" "@livekit/protocol" "1.24.0" From d146bedf059fb32ca9240a0669cb9016c4654ba2 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Fri, 22 Nov 2024 11:08:25 +0000 Subject: [PATCH 07/15] Update dependency @livekit/components-react to v2.6.9 --- yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/yarn.lock b/yarn.lock index 4406d416..a9eea810 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1801,9 +1801,9 @@ rxjs "7.8.1" "@livekit/components-react@^2.0.0": - version "2.6.8" - resolved "https://registry.yarnpkg.com/@livekit/components-react/-/components-react-2.6.8.tgz#faa60410aef0f5d426afcc6f9b577686983c6b7b" - integrity sha512-G6P+mrOyBiAnHjbmBTG28CxA6AT7wXT6/5dqu7M7uZAlvOCDKhPjhOs65awDQvaFlTxd/JlND75fa9d+oSbvIA== + version "2.6.9" + resolved "https://registry.yarnpkg.com/@livekit/components-react/-/components-react-2.6.9.tgz#2ff4691dc2cae6ed4c4b2e586a255d00e494bf9c" + integrity sha512-j43i/Dm8dlI2jxv5wv0s+69QPVqVEjg0y2tyznfs/7RDcaIZsIIzNijPu1kLditerzvzQdRsOgFQ3UWONcTkGA== dependencies: "@livekit/components-core" "0.11.10" clsx "2.1.1" From 8da38d173add53cef20aae45bd90cc619fdb9745 Mon Sep 17 00:00:00 2001 From: Hugh Nimmo-Smith Date: Fri, 22 Nov 2024 18:12:29 +0000 Subject: [PATCH 08/15] Remove .well-known files from build process (#2830) These don't get included in the docker images anyhow (due to them being excluded by defautl by https://github.com/actions/upload-artifact#uploading-hidden-files). We need to inject the right values into our managed deployments elsewhere. --- public/.well-known/apple-app-site-association | 26 --------------- public/.well-known/assetlinks.json | 32 ------------------- 2 files changed, 58 deletions(-) delete mode 100644 public/.well-known/apple-app-site-association delete mode 100644 public/.well-known/assetlinks.json diff --git a/public/.well-known/apple-app-site-association b/public/.well-known/apple-app-site-association deleted file mode 100644 index 088a1a04..00000000 --- a/public/.well-known/apple-app-site-association +++ /dev/null @@ -1,26 +0,0 @@ -{ - "applinks": { - "details": [ - { - "appIDs": [ - "7J4U792NQT.io.element.elementx", - "7J4U792NQT.io.element.elementx.nightly", - "7J4U792NQT.io.element.elementx.pr" - ], - "components": [ - { - "?": { - "no_universal_links": "?*" - }, - "exclude": true, - "comment": "Opt out of universal links" - }, - { - "/": "/*", - "comment": "Matches any URL" - } - ] - } - ] - } -} diff --git a/public/.well-known/assetlinks.json b/public/.well-known/assetlinks.json deleted file mode 100644 index 6f64bcc5..00000000 --- a/public/.well-known/assetlinks.json +++ /dev/null @@ -1,32 +0,0 @@ -[ - { - "relation": ["delegate_permission/common.handle_all_urls"], - "target": { - "namespace": "android_app", - "package_name": "io.element.android.x.debug", - "sha256_cert_fingerprints": [ - "B0:B0:51:DC:56:5C:81:2F:E1:7F:6F:3E:94:5B:4D:79:04:71:23:AB:0D:A6:12:86:76:9E:B2:94:91:97:13:0E" - ] - } - }, - { - "relation": ["delegate_permission/common.handle_all_urls"], - "target": { - "namespace": "android_app", - "package_name": "io.element.android.x.nightly", - "sha256_cert_fingerprints": [ - "CA:D3:85:16:84:3A:05:CC:EB:00:AB:7B:D3:80:0F:01:BA:8F:E0:4B:38:86:F3:97:D8:F7:9A:1B:C4:54:E4:0F" - ] - } - }, - { - "relation": ["delegate_permission/common.handle_all_urls"], - "target": { - "namespace": "android_app", - "package_name": "io.element.android.x", - "sha256_cert_fingerprints": [ - "C6:DB:9B:9C:8C:BD:D6:5D:16:E8:EC:8C:8B:91:C8:31:B9:EF:C9:5C:BF:98:AE:41:F6:A9:D8:35:15:1A:7E:16" - ] - } - } -] From 51e4a3b14bf0cce77071d459caf2dda3161ac0b3 Mon Sep 17 00:00:00 2001 From: Robin Date: Fri, 22 Nov 2024 13:17:05 -0500 Subject: [PATCH 09/15] Don't trigger keyboard shortcuts if modifiers are held None of these keyboard shortcuts expect modifier keys, so they should in fact expect the absence of modifiers. --- src/useCallViewKeyboardShortcuts.test.tsx | 10 ++++++++++ src/useCallViewKeyboardShortcuts.ts | 2 ++ 2 files changed, 12 insertions(+) diff --git a/src/useCallViewKeyboardShortcuts.test.tsx b/src/useCallViewKeyboardShortcuts.test.tsx index 9b8d45e7..fdf7ed85 100644 --- a/src/useCallViewKeyboardShortcuts.test.tsx +++ b/src/useCallViewKeyboardShortcuts.test.tsx @@ -93,6 +93,16 @@ test("reactions can be sent via keyboard presses", async () => { } }); +test("reaction is not sent when modifier key is held", async () => { + const user = userEvent.setup(); + + const sendReaction = vi.fn(); + render(); + + await user.keyboard("{Meta>}1{/Meta}"); + expect(sendReaction).not.toHaveBeenCalled(); +}); + test("raised hand can be sent via keyboard presses", async () => { const user = userEvent.setup(); diff --git a/src/useCallViewKeyboardShortcuts.ts b/src/useCallViewKeyboardShortcuts.ts index 7c27e1e2..77028a27 100644 --- a/src/useCallViewKeyboardShortcuts.ts +++ b/src/useCallViewKeyboardShortcuts.ts @@ -43,6 +43,8 @@ export function useCallViewKeyboardShortcuts( (event: KeyboardEvent) => { if (focusElement.current === null) return; if (!mayReceiveKeyEvents(focusElement.current)) return; + if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) + return; if (event.key === "m") { event.preventDefault(); From 44e1c136dfd3336c2b75ca35cc651ffef4afa484 Mon Sep 17 00:00:00 2001 From: Robin Date: Fri, 22 Nov 2024 13:45:39 -0500 Subject: [PATCH 10/15] Fix a singular string using the plural form --- locales/en-GB/app.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/locales/en-GB/app.json b/locales/en-GB/app.json index 0b9142d2..6340d160 100644 --- a/locales/en-GB/app.json +++ b/locales/en-GB/app.json @@ -171,7 +171,7 @@ "preferences_tab_show_hand_raised_timer_label": "Show hand raise duration", "speaker_device_selection_label": "Speaker" }, - "star_rating_input_label_one": "{{count}} stars", + "star_rating_input_label_one": "{{count}} star", "star_rating_input_label_other": "{{count}} stars", "start_new_call": "Start new call", "start_video_button_label": "Start video", From 9ce16b68e9900b2a5c92e524aacc266d6df0415f Mon Sep 17 00:00:00 2001 From: Hugh Nimmo-Smith Date: Sat, 23 Nov 2024 08:51:27 +0000 Subject: [PATCH 11/15] Refactor URL parameters into table (#2827) * Refactor URL parameters into table This is for readability and ahead of some possible changes * Whitespace * Lint * Cleanup and correct fontScale --- docs/url-params.md | 254 ++++++--------------------------------------- 1 file changed, 31 insertions(+), 223 deletions(-) diff --git a/docs/url-params.md b/docs/url-params.md index c45c2610..267c65f6 100644 --- a/docs/url-params.md +++ b/docs/url-params.md @@ -25,230 +25,38 @@ There are two formats for Element Call urls. ``` With this format the livekit alias that will be used is the ``. - All ppl connecting to this url will end up in the same unencrypted room. + All people connecting to this URL will end up in the same unencrypted room. This does not scale, is super unsecure - (ppl could end up in the same room by accident) and it also is not really + (people could end up in the same room by accident) and it also is not really possible to support encryption. - The url parameters are spit into two categories: **general** and **widget related**. -## Widget related params +## Parameters -**widgetId** -The id used by the widget. The presence of this parameter implies that element -call will not connect to a homeserver directly and instead tries to establish -postMessage communication via the `parentUrl`. - -```ts -widgetId: string | null; -``` - -**parentUrl** -The url used to send widget action postMessages. This should be the domain of -the client or the webview the widget is hosted in. (in case the widget is not -in an Iframe but in a dedicated webview we send the postMessages same webview -the widget lives in. Filtering is done in the widget so it ignores the messages -it receives from itself) - -```ts -parentUrl: string | null; -``` - -**userId** -The user's ID (only used in matryoshka mode). - -```ts -userId: string | null; -``` - -**deviceId** -The device's ID (only used in matryoshka mode). - -```ts -deviceId: string | null; -``` - -**baseUrl** -The base URL of the homeserver to use for media lookups in matryoshka mode. - -```ts -baseUrl: string | null; -``` - -### General url parameters - -**roomId** -Anything about what room we're pointed to should be from useRoomIdentifier which -parses the path and resolves alias with respect to the default server name, however -roomId is an exception as we need the room ID in embedded (matroyska) mode, and not -the room alias (or even the via params because we are not trying to join it). This -is also not validated, where it is in useRoomIdentifier(). - -```ts -roomId: string | null; -``` - -**confineToRoom** -Whether the app should keep the user confined to the current call/room. - -```ts -confineToRoom: boolean; (default: false) -``` - -**appPrompt** -Whether upon entering a room, the user should be prompted to launch the -native mobile app. (Affects only Android and iOS.) - -The app prompt must also be enabled in the config for this to take effect. - -```ts -appPrompt: boolean; (default: true) -``` - -**preload** -Whether the app should pause before joining the call until it sees an -io.element.join widget action, allowing it to be preloaded. - -```ts -preload: boolean; (default: false) -``` - -**hideHeader** -Whether to hide the room header when in a call. - -```ts -hideHeader: boolean; (default: false) -``` - -**showControls** -Whether to show the buttons to mute, screen-share, invite, hangup are shown -when in a call. - -```ts -showControls: boolean; (default: true) -``` - -**hideScreensharing** -Whether to hide the screen-sharing button. - -```ts -hideScreensharing: boolean; (default: false) -``` - -**enableE2EE** (Deprecated) -Whether to use end-to-end encryption. This is a legacy flag for the full mesh branch. -It is not used on the livekit branch and has no impact there! - -```ts -enableE2EE: boolean; (default: true) -``` - -**perParticipantE2EE** -Whether to use per participant encryption. -Keys will be exchanged over encrypted matrix room messages. - -```ts -perParticipantE2EE: boolean; (default: false) -``` - -**password** -E2EE password when using a shared secret. -(For individual sender keys in embedded mode this is not required.) - -```ts -password: string | null; -``` - -**displayName** -The display name to use for auto-registration. - -```ts -displayName: string | null; -``` - -**lang** -The BCP 47 code of the language the app should use. - -```ts -lang: string | null; -``` - -**fonts** -The font/fonts which the interface should use. -There can be multiple font url parameters: `?font=font-one&font=font-two...` - -```ts -font: string; -font: string; -... -``` - -**fontScale** -The factor by which to scale the interface's font size. - -```ts -fontScale: number | null; -``` - -**analyticsID** -The Posthog analytics ID. It is only available if the user has given consent for -sharing telemetry in element web. - -```ts -analyticsID: string | null; -``` - -**allowIceFallback** -Whether the app is allowed to use fallback STUN servers for ICE in case the -user's homeserver doesn't provide any. - -```ts -allowIceFallback: boolean; (default: false) -``` - -**skipLobby** -Setting this flag skips the lobby and brings you in the call directly. -In the widget this can be combined with preload to pass the device settings -with the join widget action. - -```ts -skipLobby: boolean; (default: false) -``` - -**returnToLobby** -Setting this flag makes element call show the lobby in widget mode after leaving -a call. -This is useful for video rooms. -If set to false, the widget will show a blank page after leaving the call. - -```ts -returnToLobby: boolean; (default: false) -``` - -**theme** -The theme to use for element call. -can be "light", "dark", "light-high-contrast" or "dark-high-contrast". -If not set element call will use the dark theme. - -```ts -theme: string | null; -``` - -**viaServers** -This defines the homeserver that is going to be used when joining a room. -It has to be set to a non default value for links to rooms -that are not on the default homeserver, -that is in use for the current user. - -```ts -viaServers: string; (default: undefined) -``` - -**homeserver** -This defines the homeserver that is going to be used when registering -a new (guest) user. -This can be user to configure a non default guest user server when -creating a spa link. - -```ts -homeserver: string; (default: undefined) -``` +| Name | Values | Required for widget | Required for SPA | Description | +| ------------------------- | ---------------------------------------------------------------------------------------------------- | ----------------------- | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `allowIceFallback` | `true` or `false` | No, defaults to `false` | No, defaults to `false` | Allows use of fallback STUN servers for ICE if the user's homeserver doesn’t provide any. | +| `analyticsID` | Posthog analytics ID | No | No | Available only with user's consent for sharing telemetry in Element Web. | +| `appPrompt` | `true` or `false` | No, defaults to `true` | No, defaults to `true` | Prompts the user to launch the native mobile app upon entering a room, applicable only on Android and iOS, and must be enabled in config. | +| `baseUrl` | | Yes | Not applicable | The base URL of the homeserver to use for media lookups. | +| `confineToRoom` | `true` or `false` | No, defaults to `false` | No, defaults to `false` | Keeps the user confined to the current call/room. | +| `deviceId` | Matrix device ID | Yes | Not applicable | The Matrix device ID for the widget host. | +| `displayName` | | No | No | Display name used for auto-registration. | +| `enableE2EE` (deprecated) | `true` or `false` | No, defaults to `true` | No, defaults to `true` | Legacy flag to enable end-to-end encryption, not used in the `livekit` branch. | +| `fontScale` | A decimal number such as `0.9` | No | No | Factor by which to scale the interface's font size. | +| `fonts` | | No | No | Defines the font(s) used by the interface. Multiple font parameters can be specified: `?font=font-one&font=font-two...`. | +| `hideHeader` | `true` or `false` | No, defaults to `false` | No, defaults to `false` | Hides the room header when in a call. | +| `hideScreensharing` | `true` or `false` | No, defaults to `false` | No, defaults to `false` | Hides the screen-sharing button. | +| `homeserver` | | Not applicable | No | Homeserver for registering a new (guest) user, configures non-default guest user server when creating a spa link. | +| `lang` | [BCP 47](https://www.rfc-editor.org/info/bcp47) code | No | No | The language the app should use. | +| `parentUrl` | | Yes | Not applicable | The url used to send widget action postMessages. This should be the domain of the client or the webview the widget is hosted in. (in case the widget is not in an Iframe but in a dedicated webview we send the postMessages same WebView the widget lives in. Filtering is done in the widget so it ignores the messages it receives from itself) | +| `password` | | No | No | E2EE password when using a shared secret. (For individual sender keys in embedded mode this is not required.) | +| `perParticipantE2EE` | `true` or `false` | No, defaults to `false` | No, defaults to `false` | Enables per participant encryption with Keys exchanged over encrypted matrix room messages. | +| `preload` | `true` or `false` | No, defaults to `false` | Not applicable | Pauses app before joining a call until an `io.element.join` widget action is seen, allowing preloading. | +| `returnToLobby` | `true` or `false` | No, defaults to `false` | Not applicable | Displays the lobby in widget mode after leaving a call; shows a blank page if set to `false`. Useful for video rooms. | +| `roomId` | [Matrix Room ID](https://spec.matrix.org/v1.12/appendices/#room-ids) | Yes | No | Anything about what room we're pointed to should be from useRoomIdentifier which parses the path and resolves alias with respect to the default server name, however roomId is an exception as we need the room ID in embedded widget mode, and not the room alias (or even the via params because we are not trying to join it). This is also not validated, where it is in `useRoomIdentifier()`. | +| `showControls` | `true` or `false` | No, defaults to `true` | No, defaults to `true` | Displays controls like mute, screen-share, invite, and hangup buttons during a call. | +| `skipLobby` | `true` or `false` | No, defaults to `false` | No, defaults to `false` | Skips the lobby to join a call directly, can be combined with preload in widget. | +| `theme` | One of: `light`, `dark`, `light-high-contrast`, `dark-high-contrast` | No, defaults to `dark` | No, defaults to `dark` | UI theme to use. | +| `userId` | [Matrix User Identifier](https://spec.matrix.org/v1.12/appendices/#user-identifiers) | Yes | Not applicable | The Matrix user ID. | +| `viaServers` | Comma separated list of [Matrix Server Names](https://spec.matrix.org/v1.12/appendices/#server-name) | Not applicable | No | Homeserver for joining a room, non-empty value required for rooms not on the user’s default homeserver. | +| `widgetId` | [MSC2774](https://github.com/matrix-org/matrix-spec-proposals/pull/2774) format widget ID | Yes | Not applicable | The id used by the widget. The presence of this parameter implies that element call will not connect to a homeserver directly and instead tries to establish postMessage communication via the `parentUrl`. | From 5c18868aa46861519ebffead338b32f44ea09d85 Mon Sep 17 00:00:00 2001 From: Hugh Nimmo-Smith Date: Sat, 23 Nov 2024 08:55:03 +0000 Subject: [PATCH 12/15] The preload URL param shouldn't be used in SPA mode, so ignore it if not in widget (#2832) * Refactor URL parameters into table This is for readability and ahead of some possible changes * Whitespace * Lint * The preload URL param shouldn't be used in SPA mode, so ignore it --- src/UrlParams.test.ts | 16 +++++++++++++++- src/UrlParams.ts | 7 +++++-- 2 files changed, 20 insertions(+), 3 deletions(-) diff --git a/src/UrlParams.test.ts b/src/UrlParams.test.ts index 2bf12a6b..47428ac6 100644 --- a/src/UrlParams.test.ts +++ b/src/UrlParams.test.ts @@ -7,7 +7,7 @@ Please see LICENSE in the repository root for full details. import { describe, expect, it } from "vitest"; -import { getRoomIdentifierFromUrl } from "../src/UrlParams"; +import { getRoomIdentifierFromUrl, getUrlParams } from "../src/UrlParams"; const ROOM_NAME = "roomNameHere"; const ROOM_ID = "!d45f138fsd"; @@ -86,4 +86,18 @@ describe("UrlParams", () => { .roomAlias, ).toBeFalsy(); }); + + describe("preload", () => { + it("defaults to false", () => { + expect(getUrlParams().preload).toBe(false); + }); + + it("ignored in SPA mode", () => { + expect(getUrlParams("?preload=true").preload).toBe(false); + }); + + it("respected in widget mode", () => { + expect(getUrlParams("?preload=true&widgetId=12345").preload).toBe(true); + }); + }); }); diff --git a/src/UrlParams.ts b/src/UrlParams.ts index b4f6ca28..c87b79cc 100644 --- a/src/UrlParams.ts +++ b/src/UrlParams.ts @@ -211,8 +211,11 @@ export const getUrlParams = ( const fontScale = parseFloat(parser.getParam("fontScale") ?? ""); + const widgetId = parser.getParam("widgetId"); + const isWidget = !!widgetId; + return { - widgetId: parser.getParam("widgetId"), + widgetId, parentUrl: parser.getParam("parentUrl"), // NB. we don't validate roomId here as we do in getRoomIdentifierFromUrl: @@ -224,7 +227,7 @@ export const getUrlParams = ( confineToRoom: parser.getFlagParam("confineToRoom") || parser.getFlagParam("embed"), appPrompt: parser.getFlagParam("appPrompt", true), - preload: parser.getFlagParam("preload"), + preload: isWidget ? parser.getFlagParam("preload") : false, hideHeader: parser.getFlagParam("hideHeader"), showControls: parser.getFlagParam("showControls", true), hideScreensharing: parser.getFlagParam("hideScreensharing"), From 4e1b4fae19b5dacbcb0ba366bd87ff063f51c547 Mon Sep 17 00:00:00 2001 From: Hugh Nimmo-Smith Date: Sat, 23 Nov 2024 08:59:15 +0000 Subject: [PATCH 13/15] Refactor the speaker detection logic into observeSpeaker and add tests (#2814) * Refactor the speaker detection logic into observeSpeaker and add tests @robintown the tests pass, but some of the values were off by 1ms from what I was expecting. Please can you sanity check them? * Extra test cases and clean up * Make distinctUntilChanged part of the observable itself * More suggestions from code review --- src/state/CallViewModel.ts | 19 +---- src/state/observeSpeaker.test.ts | 119 +++++++++++++++++++++++++++++++ src/state/observeSpeaker.ts | 36 ++++++++++ 3 files changed, 157 insertions(+), 17 deletions(-) create mode 100644 src/state/observeSpeaker.test.ts create mode 100644 src/state/observeSpeaker.ts diff --git a/src/state/CallViewModel.ts b/src/state/CallViewModel.ts index 8999dc89..83ccd48c 100644 --- a/src/state/CallViewModel.ts +++ b/src/state/CallViewModel.ts @@ -27,7 +27,6 @@ import { EMPTY, Observable, Subject, - audit, combineLatest, concat, distinctUntilChanged, @@ -76,6 +75,7 @@ import { spotlightExpandedLayout } from "./SpotlightExpandedLayout"; import { oneOnOneLayout } from "./OneOnOneLayout"; import { pipLayout } from "./PipLayout"; import { EncryptionSystem } from "../e2ee/sharedKeyManagement"; +import { observeSpeaker } from "./observeSpeaker"; // How long we wait after a focus switch before showing the real participant // list again @@ -248,22 +248,7 @@ class UserMedia { livekitRoom, ); - this.speaker = this.vm.speaking.pipe( - // Require 1 s of continuous speaking to become a speaker, and 60 s of - // continuous silence to stop being considered a speaker - audit((s) => - merge( - timer(s ? 1000 : 60000), - // If the speaking flag resets to its original value during this time, - // end the silencing window to stick with that original value - this.vm.speaking.pipe(filter((s1) => s1 !== s)), - ), - ), - startWith(false), - // Make this Observable hot so that the timers don't reset when you - // resubscribe - this.scope.state(), - ); + this.speaker = observeSpeaker(this.vm.speaking).pipe(this.scope.state()); this.presenter = observeParticipantEvents( participant, diff --git a/src/state/observeSpeaker.test.ts b/src/state/observeSpeaker.test.ts new file mode 100644 index 00000000..daa5f033 --- /dev/null +++ b/src/state/observeSpeaker.test.ts @@ -0,0 +1,119 @@ +/* +Copyright 2024 New Vector Ltd. + +SPDX-License-Identifier: AGPL-3.0-only +Please see LICENSE in the repository root for full details. +*/ + +import { describe, test } from "vitest"; + +import { withTestScheduler } from "../utils/test"; +import { observeSpeaker } from "./observeSpeaker"; + +const yesNo = { + y: true, + n: false, +}; + +describe("observeSpeaker", () => { + describe("does not activate", () => { + const expectedOutputMarbles = "n"; + test("starts correctly", () => { + // should default to false when no input is given + const speakingInputMarbles = ""; + withTestScheduler(({ hot, expectObservable }) => { + expectObservable(observeSpeaker(hot(speakingInputMarbles, yesNo))).toBe( + expectedOutputMarbles, + yesNo, + ); + }); + }); + + test("after no speaking", () => { + const speakingInputMarbles = "n"; + withTestScheduler(({ hot, expectObservable }) => { + expectObservable(observeSpeaker(hot(speakingInputMarbles, yesNo))).toBe( + expectedOutputMarbles, + yesNo, + ); + }); + }); + + test("with speaking for 1ms", () => { + const speakingInputMarbles = "y n"; + withTestScheduler(({ hot, expectObservable }) => { + expectObservable(observeSpeaker(hot(speakingInputMarbles, yesNo))).toBe( + expectedOutputMarbles, + yesNo, + ); + }); + }); + + test("with speaking for 999ms", () => { + const speakingInputMarbles = "y 999ms n"; + withTestScheduler(({ hot, expectObservable }) => { + expectObservable(observeSpeaker(hot(speakingInputMarbles, yesNo))).toBe( + expectedOutputMarbles, + yesNo, + ); + }); + }); + + test("with speaking intermittently", () => { + const speakingInputMarbles = + "y 199ms n 199ms y 199ms n 199ms y 199ms n 199ms y 199ms n 199ms y 199ms n 199ms y 199ms n 199ms y 199ms n 199ms y 199ms n"; + withTestScheduler(({ hot, expectObservable }) => { + expectObservable(observeSpeaker(hot(speakingInputMarbles, yesNo))).toBe( + expectedOutputMarbles, + yesNo, + ); + }); + }); + + test("with consecutive speaking then stops speaking", () => { + const speakingInputMarbles = "y y y y y y y y y y n"; + withTestScheduler(({ hot, expectObservable }) => { + expectObservable(observeSpeaker(hot(speakingInputMarbles, yesNo))).toBe( + expectedOutputMarbles, + yesNo, + ); + }); + }); + }); + + describe("activates", () => { + test("after 1s", () => { + // this will active after 1s as no `n` follows it: + const speakingInputMarbles = " y"; + const expectedOutputMarbles = "n 999ms y"; + withTestScheduler(({ hot, expectObservable }) => { + expectObservable(observeSpeaker(hot(speakingInputMarbles, yesNo))).toBe( + expectedOutputMarbles, + yesNo, + ); + }); + }); + + test("speaking for 1001ms activates for 60s", () => { + const speakingInputMarbles = " y 1s n "; + const expectedOutputMarbles = "n 999ms y 60s n"; + withTestScheduler(({ hot, expectObservable }) => { + expectObservable(observeSpeaker(hot(speakingInputMarbles, yesNo))).toBe( + expectedOutputMarbles, + yesNo, + ); + }); + }); + + test("speaking for 5s activates for 64s", () => { + const speakingInputMarbles = " y 5s n "; + const expectedOutputMarbles = "n 999ms y 64s n"; + withTestScheduler(({ hot, expectObservable }) => { + expectObservable(observeSpeaker(hot(speakingInputMarbles, yesNo))).toBe( + expectedOutputMarbles, + yesNo, + ); + }); + }); + }); +}); diff --git a/src/state/observeSpeaker.ts b/src/state/observeSpeaker.ts new file mode 100644 index 00000000..d32fbdaa --- /dev/null +++ b/src/state/observeSpeaker.ts @@ -0,0 +1,36 @@ +/* +Copyright 2024 New Vector Ltd. + +SPDX-License-Identifier: AGPL-3.0-only +Please see LICENSE in the repository root for full details. +*/ +import { + Observable, + audit, + merge, + timer, + filter, + startWith, + distinctUntilChanged, +} from "rxjs"; + +/** + * Require 1 second of continuous speaking to become a speaker, and 60 second of + * continuous silence to stop being considered a speaker + */ +export function observeSpeaker( + isSpeakingObservable: Observable, +): Observable { + const distinct = isSpeakingObservable.pipe(distinctUntilChanged()); + + return distinct.pipe( + // Either change to the new value after the timer or re-emit the same value if it toggles back + // (audit will return the latest (toggled back) value) before the timeout. + audit((s) => + merge(timer(s ? 1000 : 60000), distinct.pipe(filter((s1) => s1 !== s))), + ), + // Filter the re-emissions (marked as: | ) that happen if we toggle quickly (<1s) from false->true->false|->.. + startWith(false), + distinctUntilChanged(), + ); +} From fc8da6ef5844a0dd6dc01b1f36ca6fba86586641 Mon Sep 17 00:00:00 2001 From: Hugh Nimmo-Smith Date: Sat, 23 Nov 2024 08:59:33 +0000 Subject: [PATCH 14/15] Use hot marbles for speaker tests (#2815) * Refactor the speaker detection logic into observeSpeaker and add tests @robintown the tests pass, but some of the values were off by 1ms from what I was expecting. Please can you sanity check them? * Extra test cases and clean up * Make distinctUntilChanged part of the observable itself * More suggestions from code review * Use hot marbles for speaker tests This was originally part of https://github.com/element-hq/element-call/pull/2810 * Only feed speaking mocks to observables that ask for IsSpeakingChanged --- src/state/CallViewModel.test.ts | 23 ++++++++++++++--------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/src/state/CallViewModel.test.ts b/src/state/CallViewModel.test.ts index aa49f048..9b2e5ee7 100644 --- a/src/state/CallViewModel.test.ts +++ b/src/state/CallViewModel.test.ts @@ -20,6 +20,7 @@ import { ConnectionState, LocalParticipant, Participant, + ParticipantEvent, RemoteParticipant, } from "livekit-client"; import * as ComponentsCore from "@livekit/components-core"; @@ -188,11 +189,15 @@ function withCallViewModel( ); const eventsSpy = vi .spyOn(ComponentsCore, "observeParticipantEvents") - .mockImplementation((p) => - (speaking.get(p) ?? of(false)).pipe( - map((s) => ({ ...p, isSpeaking: s }) as Participant), - ), - ); + .mockImplementation((p, ...eventTypes) => { + if (eventTypes.includes(ParticipantEvent.IsSpeakingChanged)) { + return (speaking.get(p) ?? of(false)).pipe( + map((s) => ({ ...p, isSpeaking: s }) as Participant), + ); + } else { + return of(p); + } + }); const roomEventSelectorSpy = vi .spyOn(ComponentsCore, "roomEventSelector") @@ -407,7 +412,7 @@ test("participants stay in the same order unless to appear/disappear", () => { }); test("spotlight speakers swap places", () => { - withTestScheduler(({ cold, schedule, expectObservable }) => { + withTestScheduler(({ hot, schedule, expectObservable }) => { // Go immediately into spotlight mode for the test const modeInputMarbles = " s"; // First Bob speaks, then Dave, then Alice @@ -424,9 +429,9 @@ test("spotlight speakers swap places", () => { of([aliceParticipant, bobParticipant, daveParticipant]), of(ConnectionState.Connected), new Map([ - [aliceParticipant, cold(aSpeakingInputMarbles, { y: true, n: false })], - [bobParticipant, cold(bSpeakingInputMarbles, { y: true, n: false })], - [daveParticipant, cold(dSpeakingInputMarbles, { y: true, n: false })], + [aliceParticipant, hot(aSpeakingInputMarbles, { y: true, n: false })], + [bobParticipant, hot(bSpeakingInputMarbles, { y: true, n: false })], + [daveParticipant, hot(dSpeakingInputMarbles, { y: true, n: false })], ]), (vm) => { schedule(modeInputMarbles, { s: () => vm.setGridMode("spotlight") }); From 0469d8ef568a8c543d05af54dfcb6d997b65ec66 Mon Sep 17 00:00:00 2001 From: Hugh Nimmo-Smith Date: Sat, 23 Nov 2024 09:00:43 +0000 Subject: [PATCH 15/15] Add explicit code split on matrix-sdk-crypto-wasm to allow caching between deploys (#2823) * Add explicit code split on matrix-sdk-crypto-wasm to allow caching between deploys * Comment on removing once https://github.com/matrix-org/matrix-rust-sdk-crypto-wasm/pull/167 lands --- vite.config.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/vite.config.js b/vite.config.js index b8072577..1feb7d66 100644 --- a/vite.config.js +++ b/vite.config.js @@ -82,6 +82,10 @@ export default defineConfig(({ mode }) => { // Default naming fallback return "assets/[name]-[hash][extname]"; }, + manualChunks: { + // we should be able to remove this one https://github.com/matrix-org/matrix-rust-sdk-crypto-wasm/pull/167 lands + "matrix-sdk-crypto-wasm": ["@matrix-org/matrix-sdk-crypto-wasm"], + }, }, }, },