Merge pull request #2578 from robintown/spotlight-buttons

Fix spotlight tile regressions

.github/workflows/docker.yaml

@@ -51,7 +51,7 @@ jobs:
         uses: docker/setup-buildx-action@988b5a0280414f521da01fcc63a27aeeb4b104db # v3.6.1
 
       - name: Build and push Docker image
-        uses: docker/build-push-action@5176d81f87c23d6fc96624dfdbcd9f3830bbe445 # v6.5.0
+        uses: docker/build-push-action@5cd11c3a4ced054e52742c5fd54dca954e0edd85 # v6.7.0
         with:
           context: .
           platforms: linux/amd64,linux/arm64

.github/workflows/element-call.yaml

@@ -39,7 +39,7 @@ jobs:
           VITE_APP_VERSION: ${{ inputs.vite_app_version }}
           NODE_OPTIONS: "--max-old-space-size=4096"
       - name: Upload Artifact
-        uses: actions/upload-artifact@0b2256b8c012f0828dc542b3febcab082c67f72b # v4
+        uses: actions/upload-artifact@834a144ee995460fba8ed112a2fc961b36a5ec5a # v4
         with:
           name: build-output
           path: dist

.github/workflows/publish.yaml

@@ -51,7 +51,7 @@ jobs:
         run: |
           tar --numeric-owner --transform "s/dist/element-call-${TARBALL_VERSION}/" -cvzf element-call-${TARBALL_VERSION}.tar.gz dist
       - name: Upload
-        uses: actions/upload-artifact@0b2256b8c012f0828dc542b3febcab082c67f72b # v4.3.4
+        uses: actions/upload-artifact@834a144ee995460fba8ed112a2fc961b36a5ec5a # v4.3.6
         env:
           GITHUB_TOKEN: ${{ github.token }}
         with:

README.md

@@ -22,7 +22,7 @@ yarn
 yarn build
 ```
 
-If all went well, you can now find the build output under `dist` as a series of static files. These can be hosted using any web server of your choice.
+If all went well, you can now find the build output under `dist` as a series of static files. These can be hosted using any web server that can be configured with custom routes (see below).
 
 You may also wish to add a configuration file (Element Call uses the domain it's hosted on as a Homeserver URL by default,
 but you can change this in the config file). This goes in `public/config.json` - you can use the sample as a starting point:

package.json

@@ -22,7 +22,6 @@
     "@juggle/resize-observer": "^3.3.1",
     "@livekit/components-core": "^0.11.0",
     "@livekit/components-react": "^2.0.0",
-    "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.14.tgz",
     "@opentelemetry/api": "^1.4.0",
     "@opentelemetry/context-zone": "^1.9.1",
     "@opentelemetry/exporter-jaeger": "^1.9.1",
@@ -62,7 +61,7 @@
     "i18next-http-backend": "^2.0.0",
     "livekit-client": "^2.0.2",
     "lodash": "^4.17.21",
-    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#9176d3a671114be97ee7a42155a6d40a233384f1",
+    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#467908703bc67fa3e23d978f5549e2709d4acf74",
     "matrix-widget-api": "^1.8.2",
     "normalize.css": "^8.0.1",
     "observable-hooks": "^4.2.3",

public/locales/en-GB/app.json

@@ -59,6 +59,8 @@
     "username": "Username",
     "video": "Video"
   },
+  "crypto_version": "Crypto version: {{version}}",
+  "device_id": "Device ID: {{id}}",
   "disconnected_banner": "Connectivity to the server has been lost.",
   "full_screen_view_description": "<0>Submitting debug logs will help us track down the problem.</0>",
   "full_screen_view_h1": "<0>Oops, something's gone wrong.</0>",
@@ -99,6 +101,7 @@
   "login_auth_links_prompt": "Not registered yet?",
   "login_subheading": "To continue to Element",
   "login_title": "Login",
+  "matrix_id": "Matrix ID: {{id}}",
   "microphone_off": "Microphone off",
   "microphone_on": "Microphone on",
   "mute_microphone_button_label": "Mute microphone",
@@ -154,7 +157,7 @@
   "unauthenticated_view_eula_caption": "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)</2>",
   "unauthenticated_view_login_button": "Login to your account",
   "unmute_microphone_button_label": "Unmute microphone",
-  "version": "Version: {{version}}",
+  "version": "{{productName}} version: {{version}}",
   "video_tile": {
     "always_show": "Always show",
     "change_fit_contain": "Fit to frame",

src/@types/global.d.ts

@@ -23,11 +23,6 @@ declare global {
     webkitFullscreenElement: HTMLElement | null;
   }
 
-  interface Window {
-    // TODO: https://gitlab.matrix.org/matrix-org/olm/-/issues/10
-    OLM_OPTIONS: Record<string, string>;
-  }
-
   interface HTMLElement {
     // Safari only supports this prefixed, so tell the type system about it
     webkitRequestFullscreen: () => void;

src/Header.module.css

@@ -90,6 +90,7 @@ limitations under the License.
 .nameLine {
   grid-area: name;
   flex-grow: 1;
+  min-width: 0;
   display: flex;
   align-items: center;
   gap: var(--cpd-space-1x);
@@ -97,8 +98,6 @@ limitations under the License.
 
 .nameLine > h1 {
   margin: 0;
-  /* XXX I can't actually get this ellipsis overflow to trigger, because
-  constraint propagation in a nested flexbox layout is a massive pain */
   overflow: hidden;
   text-overflow: ellipsis;
 }

src/initializer.tsx

@@ -32,8 +32,6 @@ enum LoadState {
 }
 
 class DependencyLoadStates {
-  // TODO: decide where olm should be initialized (see TODO comment below)
-  // olm: LoadState = LoadState.None;
   public config: LoadState = LoadState.None;
   public sentry: LoadState = LoadState.None;
   public openTelemetry: LoadState = LoadState.None;
@@ -128,18 +126,6 @@ export class Initializer {
   private loadStates = new DependencyLoadStates();
 
   private initStep(resolve: (value: void | PromiseLike<void>) => void): void {
-    // TODO: Olm is initialized with the client currently (see `initClient()` and `olm.ts`)
-    // we need to decide if we want to init it here or keep it in initClient
-    // if (this.loadStates.olm === LoadState.None) {
-    //   this.loadStates.olm = LoadState.Loading;
-    //   // TODO: https://gitlab.matrix.org/matrix-org/olm/-/issues/10
-    //   window.OLM_OPTIONS = {};
-    //   Olm.init({ locateFile: () => olmWasmPath }).then(() => {
-    //     this.loadStates.olm = LoadState.Loaded;
-    //     this.initStep(resolve);
-    //   });
-    // }
-
     // config
     if (this.loadStates.config === LoadState.None) {
       this.loadStates.config = LoadState.Loading;

src/matrix-utils.ts

@@ -34,7 +34,6 @@ import type { MatrixClient } from "matrix-js-sdk/src/client";
 import type { Room } from "matrix-js-sdk/src/models/room";
 import IndexedDBWorker from "./IndexedDBWorker?worker";
 import { generateUrlSearchParams, getUrlParams } from "./UrlParams";
-import { loadOlm } from "./olm";
 import { Config } from "./config/Config";
 import { E2eeType } from "./e2ee/e2eeType";
 import { EncryptionSystem, saveKeyForRoom } from "./e2ee/sharedKeyManagement";
@@ -97,8 +96,6 @@ export async function initClient(
   clientOptions: ICreateClientOpts,
   restore: boolean,
 ): Promise<MatrixClient> {
-  await loadOlm();
-
   let indexedDB: IDBFactory | undefined;
   try {
     indexedDB = window.indexedDB;
@@ -198,7 +195,7 @@ export async function initClient(
     await client.store.startup();
   }
 
-  await client.initCrypto();
+  await client.initRustCrypto();
   client.setGlobalErrorOnUnknownDevices(false);
   // Once startClient is called, syncs are run asynchronously.
   // Also, sync completion is communicated only via events.

src/olm.ts

@@ -1,29 +0,0 @@
-/*
-Copyright 2022 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import Olm from "@matrix-org/olm";
-import olmWasmPath from "@matrix-org/olm/olm.wasm?url";
-
-// https://gitlab.matrix.org/matrix-org/olm/-/issues/10
-window.OLM_OPTIONS = {};
-
-let olmLoaded: Promise<void> | null = null;
-
-/**
- * Loads Olm, if not already loaded.
- */
-export const loadOlm = (): Promise<void> =>
-  (olmLoaded ??= Olm.init({ locateFile: () => olmWasmPath }));

src/room/InCallView.module.css

@@ -19,6 +19,7 @@ limitations under the License.
   flex-direction: column;
   height: 100%;
   width: 100%;
+  overflow-x: hidden;
   overflow-y: auto;
 }
 

src/settings/SettingsModal.tsx

@@ -30,7 +30,7 @@ import UserIcon from "../icons/User.svg?react";
 import FeedbackIcon from "../icons/Feedback.svg?react";
 import { SelectInput } from "../input/SelectInput";
 import { FieldRow, InputField } from "../input/Input";
-import { Body, Caption } from "../typography/Typography";
+import { Caption } from "../typography/Typography";
 import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
 import { ProfileSettingsTab } from "./ProfileSettingsTab";
 import { FeedbackSettingsTab } from "./FeedbackSettingsTab";
@@ -239,13 +239,27 @@ export const SettingsModal: FC<Props> = ({
         </>
       }
     >
-      <FieldRow>
-        <Body className={styles.fieldRowText}>
-          {t("version", {
-            version: import.meta.env.VITE_APP_VERSION || "dev",
-          })}
-        </Body>
-      </FieldRow>
+      <p>
+        {t("version", {
+          productName: import.meta.env.VITE_PRODUCT_NAME || "Element Call",
+          version: import.meta.env.VITE_APP_VERSION || "dev",
+        })}
+      </p>
+      <p>
+        {t("crypto_version", {
+          version: client.getCrypto()?.getVersion() || "unknown",
+        })}
+      </p>
+      <p>
+        {t("matrix_id", {
+          id: client.getUserId() || "unknown",
+        })}
+      </p>
+      <p>
+        {t("device_id", {
+          id: client.getDeviceId() || "unknown",
+        })}
+      </p>
       <FieldRow>
         <InputField
           id="duplicateTiles"

src/tile/SpotlightTile.module.css

@@ -14,7 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.tile {
+.contents {
+  block-size: 100%;
+  inline-size: 100%;
   display: flex;
   border-radius: var(--cpd-space-6x);
   contain: strict;
@@ -29,7 +31,7 @@ limitations under the License.
   scroll-behavior: smooth; */
 }
 
-.tile.maximised {
+.tile.maximised .contents {
   border-radius: 0;
 }
 
@@ -153,7 +155,7 @@ limitations under the License.
 }
 
 .indicators > .item {
-  inline-size: 32px;
+  flex-basis: 32px;
   block-size: 2px;
   transition: background-color ease 0.15s;
 }

src/tile/SpotlightTile.tsx

@@ -272,16 +272,18 @@ export const SpotlightTile = forwardRef<HTMLDivElement, Props>(
             <ChevronLeftIcon aria-hidden width={24} height={24} />
           </button>
         )}
-        {vms.map((vm) => (
-          <SpotlightItem
-            key={vm.id}
-            vm={vm}
-            targetWidth={targetWidth}
-            targetHeight={targetHeight}
-            intersectionObserver={intersectionObserver}
-            snap={scrollToId === null || scrollToId === vm.id}
-          />
-        ))}
+        <div className={styles.contents}>
+          {vms.map((vm) => (
+            <SpotlightItem
+              key={vm.id}
+              vm={vm}
+              targetWidth={targetWidth}
+              targetHeight={targetHeight}
+              intersectionObserver={intersectionObserver}
+              snap={scrollToId === null || scrollToId === vm.id}
+            />
+          ))}
+        </div>
         {onToggleExpanded && (
           <button
             className={classNames(styles.expand)}
@@ -311,7 +313,11 @@ export const SpotlightTile = forwardRef<HTMLDivElement, Props>(
             })}
           >
             {vms.map((vm) => (
-              <div className={styles.item} data-visible={vm.id === visibleId} />
+              <div
+                key={vm.id}
+                className={styles.item}
+                data-visible={vm.id === visibleId}
+              />
             ))}
           </div>
         )}