Merge branch 'livekit' into new-call-layouts

README.md

@@ -131,7 +131,7 @@ advertises one in the client well-known, this will not be used.)
 
 ```json
 "livekit": {
-  "livekit_service_url": "http://localhost:8881"
+  "livekit_service_url": "http://localhost:7881"
 },
 ```
 

config/config.sample.json

@@ -5,5 +5,8 @@
       "server_name": "call.ems.host"
     }
   },
+  "livekit": {
+    "livekit_service_url": "http://localhost:7881"
+  },
   "eula": "https://static.element.io/legal/online-EULA.pdf"
 }

package.json

@@ -71,13 +71,13 @@
     "posthog-js": "^1.29.0",
     "react": "18",
     "react-dom": "18",
-    "react-i18next": "^14.0.0",
+    "react-i18next": "^15.0.0",
     "react-router-dom": "^5.2.0",
     "react-use-clipboard": "^1.0.7",
     "react-use-measure": "^2.1.1",
     "rxjs": "^7.8.1",
     "sdp-transform": "^2.14.1",
-    "tinyqueue": "^2.0.3",
+    "tinyqueue": "^3.0.0",
     "unique-names-generator": "^4.6.0",
     "uuid": "10",
     "vaul": "^0.9.0"
@@ -126,6 +126,6 @@
     "vite": "^5.0.0",
     "vite-plugin-html-template": "^1.1.0",
     "vite-plugin-svgr": "^4.0.0",
-    "vitest": "^1.2.2"
+    "vitest": "^2.0.0"
   }
 }

src/config/ConfigOptions.ts

@@ -65,11 +65,21 @@ export interface ConfigOptions {
   };
 
   /**
-   * Allow to join a group calls without audio and video.
+   * TEMPORARY experimental features.
-   * TEMPORARY: Is a feature that's not proved and experimental
    */
   features?: {
-    feature_group_calls_without_video_and_audio: boolean;
+    /**
+     * Allow to join group calls without audio and video.
+     */
+    feature_group_calls_without_video_and_audio?: boolean;
+    /**
+     * Send device-specific call session membership state events instead of
+     * legacy user-specific call membership state events.
+     * This setting has no effect when the user joins an active call with
+     * legacy state events. For compatibility, Element Call will always join
+     * active legacy calls with legacy state events.
+     */
+    feature_use_device_session_member_events?: boolean;
   };
 
   /**

src/profile/useProfile.ts

@@ -118,7 +118,7 @@ export function useProfile(client: MatrixClient | undefined): UseProfile {
             displayName,
             avatarUrl: removeAvatar
               ? undefined
-              : mxcAvatarUrl ?? prev.avatarUrl,
+              : (mxcAvatarUrl ?? prev.avatarUrl),
             loading: false,
             success: true,
           }));

src/room/MuteStates.ts

@@ -53,7 +53,7 @@ function useMuteState(
 ): MuteState {
   const [enabled, setEnabled] = useReactiveState<boolean | undefined>(
     (prev) =>
-      device.available.length > 0 ? prev ?? enabledByDefault() : undefined,
+      device.available.length > 0 ? (prev ?? enabledByDefault()) : undefined,
     [device],
   );
   return useMemo(

src/room/useFullscreen.ts

@@ -63,7 +63,7 @@ export function useFullscreen(items: string[]): {
 } {
   const [fullscreenItem, setFullscreenItem] = useReactiveState<string | null>(
     (prevItem) =>
-      prevItem == null ? null : items.find((i) => i === prevItem) ?? null,
+      prevItem == null ? null : (items.find((i) => i === prevItem) ?? null),
     [items],
   );
 
@@ -77,7 +77,7 @@ export function useFullscreen(items: string[]): {
     (itemId: string) => {
       setFullscreenItem(
         latestFullscreenItem.current === null
-          ? latestItems.current.find((i) => i === itemId) ?? null
+          ? (latestItems.current.find((i) => i === itemId) ?? null)
           : null,
       );
     },

src/rtcSessionHelpers.ts

@@ -108,10 +108,17 @@ export async function enterRTCSession(
 
   // right now we assume everything is a room-scoped call
   const livekitAlias = rtcSession.room.roomId;
+  const useDeviceSessionMemberEvents =
+    Config.get().features?.feature_use_device_session_member_events;
   rtcSession.joinRoomSession(
     await makePreferredLivekitFoci(rtcSession, livekitAlias),
     makeActiveFocus(),
-    { manageMediaKeys: encryptMedia },
+    {
+      manageMediaKeys: encryptMedia,
+      ...(useDeviceSessionMemberEvents !== undefined && {
+        useLegacyMemberEvents: !useDeviceSessionMemberEvents,
+      }),
+    },
   );
 }
 

src/settings/ProfileSettingsTab.tsx

@@ -54,11 +54,11 @@ export const ProfileSettingsTab: FC<Props> = ({ client }) => {
         const avatar = data.get("avatar");
 
         const avatarSize =
-          typeof avatar == "string" ? avatar.length : avatar?.size ?? 0;
+          typeof avatar == "string" ? avatar.length : (avatar?.size ?? 0);
         const displayName =
           typeof displayNameDataEntry == "string"
             ? displayNameDataEntry
-            : displayNameDataEntry?.name ?? null;
+            : (displayNameDataEntry?.name ?? null);
 
         if (!displayName) {
           return;

src/widget.ts

@@ -118,13 +118,17 @@ export const widget = ((): WidgetHelpers | null => {
         "org.matrix.rageshake_request",
         EventType.CallEncryptionKeysPrefix,
       ];
+
       const sendState = [
-        {
+        userId, // legacy call membership events
+        `_${userId}_${deviceId}`, // session membership events
+        `${userId}_${deviceId}`, // MSC3779 session membership events
+      ].map((stateKey) => ({
         eventType: EventType.GroupCallMemberPrefix,
-          stateKey: userId, // TODO: based on if we use the new format we want the key to be: `_${userId}_${deviceId}`
+        stateKey,
-        },
+      }));
-      ];
       const receiveState = [
+        { eventType: EventType.RoomCreate },
         { eventType: EventType.RoomMember },
         { eventType: EventType.RoomEncryption },
         { eventType: EventType.GroupCallMemberPrefix },