Refactor element call lobby + skip lobby (#12057)

* Refactor ElementCall to use the widget lobby. - expose skip lobby - use the widget.data to build the widget url Signed-off-by: Timo K <[email protected]> * Use shiftKey click to skip the lobby Signed-off-by: Timo K <[email protected]> * remove Lobby component Signed-off-by: Timo K <[email protected]> * update tests + remove EW lobby related tests Signed-off-by: Timo K <[email protected]> * remove lobby device button tests Signed-off-by: Timo K <[email protected]> * i18n Signed-off-by: Timo K <[email protected]> * use voip participant label Signed-off-by: Timo K <[email protected]> * update tests Signed-off-by: Timo K <[email protected]> * fix rounded corners in pip Signed-off-by: Timo K <[email protected]> * allow joining call in legacy room header (without banner) Signed-off-by: Timo K <[email protected]> * Introduce new connection states for calls. And use them for integrated lobby. Signed-off-by: Timo K <[email protected]> * New room header call join Fix broken top container element call. Signed-off-by: Timo K <[email protected]> * i18n Signed-off-by: Timo K <[email protected]> * Fix closing element call in lobby view. (should destroy call if there the user never managed to connect (not clicked join in lobby) Signed-off-by: Timo K <[email protected]> * all cases for connection state Signed-off-by: Timo K <[email protected]> * add correct LiveContentSummary labels Signed-off-by: Timo K <[email protected]> * Theme widget loading (no rounded corner) destroy call when switching room while a call is loading. Signed-off-by: Timo K <[email protected]> * temp Signed-off-by: Timo K <[email protected]> * usei view room dispatcher instead of emitter Signed-off-by: Timo K <[email protected]> * tidy up Signed-off-by: Timo K <[email protected]> * returnToLobby + remove StartCallView Signed-off-by: Timo K <[email protected]> * comment cleanup Signed-off-by: Timo K <[email protected]> * disconnect ongoing calls before making widget sticky. Signed-off-by: Timo K <[email protected]> * linter + jitsi as videoChannel Signed-off-by: Timo K <[email protected]> * stickyPromise type Signed-off-by: Timo K <[email protected]> * fix legacy call (jistsi, cisco, bbb) reopen when clicking call button Signed-off-by: Timo K <[email protected]> * fix tests and connect resolves Signed-off-by: Timo K <[email protected]> * fix "waits for messaging when connecting" test Signed-off-by: Timo K <[email protected]> * Allow to skip awaiting Call session events. This option is used in tests to spare mocking the events emitted when EC updates the room state Signed-off-by: Timo K <[email protected]> * add sticky test Signed-off-by: Timo K <[email protected]> * add test for looby tile rendering Signed-off-by: Timo K <[email protected]> * fix flaky test Signed-off-by: Timo K <[email protected]> * add reconnect after disconnect test (video room) Signed-off-by: Timo K <[email protected]> * add shift click test to call toast Signed-off-by: Timo K <[email protected]> * test for allowVoipWithNoMedia in widget url Signed-off-by: Timo K <[email protected]> * fix e2e tests to search for the right element Signed-off-by: Timo K <[email protected]> * destroy call after test so next test does not fail Signed-off-by: Timo K <[email protected]> * new call test (connection failed) Signed-off-by: Timo K <[email protected]> * reset to real timers Signed-off-by: Timo K <[email protected]> * dont use skipSessionAwait for tests Signed-off-by: Timo K <[email protected]> * code quality (sonar) Signed-off-by: Timo K <[email protected]> * refactor call.disconnect tests (dont use skipSessionAwait) Signed-off-by: Timo K <[email protected]> * miscellaneous cleanup Signed-off-by: Timo K <[email protected]> * only send call notify after the call has been joined (not when just opening the lobby) Signed-off-by: Timo K <[email protected]> * update call notify tests to expect notify on connect. Not on widget creation. Signed-off-by: Timo K <[email protected]> * Update playwright/e2e/room/room-header.spec.ts Co-authored-by: Robin <[email protected]> * Update src/components/views/voip/CallView.tsx Co-authored-by: Robin <[email protected]> * review rename connect -> start isVideoRoom not dependant on feature flags rename allOtherCallsDisconnected -> disconnectAllOtherCalls Signed-off-by: Timo K <[email protected]> * check for EC widget Signed-off-by: Timo K <[email protected]> * dep array Signed-off-by: Timo K <[email protected]> * rename in spyOn Signed-off-by: Timo K <[email protected]> --------- Signed-off-by: Timo K <[email protected]> Co-authored-by: Robin <[email protected]>
matrix-org · Jan 29, 2024 · a370a5c · a370a5c
1 parent 3f7e21e
commit a370a5c
Show file tree

Hide file tree

Showing 28 changed files with 693 additions and 767 deletions.
diff --git a/playwright/e2e/room/room-header.spec.ts b/playwright/e2e/room/room-header.spec.ts
@@ -178,8 +178,8 @@ test.describe("Room Header", () => {
 
             await page.locator(".mx_LegacyRoomHeader").getByRole("button", { name: "Chat" }).click();
 
-            // Assert that the video is rendered
-            await expect(page.locator(".mx_CallView video")).toBeVisible();
+            // Assert that the call view is still visible
+            await expect(page.locator(".mx_CallView")).toBeVisible();
 
             // Assert that GELS is visible
             await expect(

diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
@@ -2564,6 +2564,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                             room={this.state.room}
                             resizing={this.state.resizing}
                             waitForCall={isVideoRoom(this.state.room)}
+                            skipLobby={this.context.roomViewStore.skipCallLobby() ?? false}
                             role="main"
                         />
                         {previewBar}

diff --git a/src/components/views/beacon/RoomCallBanner.tsx b/src/components/views/beacon/RoomCallBanner.tsx
@@ -43,6 +43,7 @@ const RoomCallBannerInner: React.FC<RoomCallBannerProps> = ({ roomId, call }) =>
                 action: Action.ViewRoom,
                 room_id: roomId,
                 view_call: true,
+                skipLobby: "shiftKey" in ev ? ev.shiftKey : false,
                 metricsTrigger: undefined,
             });
         },

diff --git a/src/components/views/elements/AppTile.tsx b/src/components/views/elements/AppTile.tsx
@@ -95,6 +95,11 @@ interface IProps {
     movePersistedElement?: MutableRefObject<(() => void) | undefined>;
     // An element to render after the iframe as an overlay
     overlay?: ReactNode;
+    // If defined this async method will be called when the widget requests to become sticky.
+    // It will only become sticky once the returned promise resolves.
+    // This is useful because: Widget B is sticky. Making widget A sticky will kill widget B immediately.
+    // This promise allows to do Widget B related cleanup before Widget A becomes sticky. (e.g. hangup a Voip call)
+    stickyPromise?: () => Promise<void>;
 }
 
 interface IState {
@@ -610,11 +615,11 @@ export default class AppTile extends React.Component<IProps, IState> {
             "microphone; camera; encrypted-media; autoplay; display-capture; clipboard-write; " + "clipboard-read;";
 
         const appTileBodyClass = classNames({
-            // We don't want mx_AppTileBody (rounded corners) for call widgets
             "mx_AppTileBody": true,
             "mx_AppTileBody--large": !this.props.miniMode,
             "mx_AppTileBody--mini": this.props.miniMode,
             "mx_AppTileBody--loading": this.state.loading,
+            // We don't want mx_AppTileBody (rounded corners) for call widgets
             "mx_AppTileBody--call": this.props.app.type === WidgetType.CALL.preferred,
         });
         const appTileBodyStyles: CSSProperties = {};

diff --git a/src/components/views/messages/CallEvent.tsx b/src/components/views/messages/CallEvent.tsx
@@ -131,12 +131,14 @@ const ActiveLoadedCallEvent = forwardRef<any, ActiveLoadedCallEventProps>(({ mxE
         switch (connectionState) {
             case ConnectionState.Disconnected:
                 return [_t("action|join"), "primary", connect];
-            case ConnectionState.Connecting:
-                return [_t("action|join"), "primary", null];
             case ConnectionState.Connected:
                 return [_t("action|leave"), "danger", disconnect];
             case ConnectionState.Disconnecting:
                 return [_t("action|leave"), "danger", null];
+            case ConnectionState.Connecting:
+            case ConnectionState.Lobby:
+            case ConnectionState.WidgetLoading:
+                return [_t("action|join"), "primary", null];
         }
     }, [connectionState, connect, disconnect]);
 

diff --git a/src/components/views/rooms/LegacyRoomHeader.tsx b/src/components/views/rooms/LegacyRoomHeader.tsx
@@ -143,16 +143,20 @@ const VideoCallButton: FC<VideoCallButtonProps> = ({ room, busy, setBusy, behavi
         setBusy(false);
     }, [setBusy, room]);
 
-    const startElementCall = useCallback(() => {
-        setBusy(true);
-        defaultDispatcher.dispatch<ViewRoomPayload>({
-            action: Action.ViewRoom,
-            room_id: room.roomId,
-            view_call: true,
-            metricsTrigger: undefined,
-        });
-        setBusy(false);
-    }, [setBusy, room]);
+    const startElementCall = useCallback(
+        (skipLobby: boolean) => {
+            setBusy(true);
+            defaultDispatcher.dispatch<ViewRoomPayload>({
+                action: Action.ViewRoom,
+                room_id: room.roomId,
+                view_call: true,
+                skipLobby: skipLobby,
+                metricsTrigger: undefined,
+            });
+            setBusy(false);
+        },
+        [setBusy, room],
+    );
 
     const { onClick, tooltip, disabled } = useMemo(() => {
         if (behavior instanceof DisabledWithReason) {
@@ -173,7 +177,7 @@ const VideoCallButton: FC<VideoCallButtonProps> = ({ room, busy, setBusy, behavi
             return {
                 onClick: async (ev: ButtonEvent): Promise<void> => {
                     ev.preventDefault();
-                    startElementCall();
+                    startElementCall("shiftKey" in ev ? ev.shiftKey : false);
                 },
                 disabled: false,
             };
@@ -202,7 +206,7 @@ const VideoCallButton: FC<VideoCallButtonProps> = ({ room, busy, setBusy, behavi
         (ev: ButtonEvent) => {
             ev.preventDefault();
             closeMenu();
-            startElementCall();
+            startElementCall("shiftKey" in ev ? ev.shiftKey : false);
         },
         [closeMenu, startElementCall],
     );
@@ -305,7 +309,7 @@ const CallButtons: FC<CallButtonsProps> = ({ room }) => {
             } else {
                 return makeVideoCallButton(new DisabledWithReason(_t("voip|disabled_no_perms_start_video_call")));
             }
-        } else if (hasLegacyCall || hasJitsiWidget || hasGroupCall) {
+        } else if (hasLegacyCall || hasJitsiWidget) {
             return (
                 <>
                     {makeVoiceCallButton(new DisabledWithReason(_t("voip|disabled_ongoing_call")))}

diff --git a/src/components/views/rooms/LiveContentSummary.tsx b/src/components/views/rooms/LiveContentSummary.tsx
@@ -51,7 +51,7 @@ export const LiveContentSummary: FC<Props> = ({ type, text, active, participantC
                 {" • "}
                 <span
                     className="mx_LiveContentSummary_participants"
-                    aria-label={_t("common|n_participants", { count: participantCount })}
+                    aria-label={_t("voip|n_people_joined", { count: participantCount })}
                 >
                     {participantCount}
                 </span>

diff --git a/src/components/views/rooms/RoomTileCallSummary.tsx b/src/components/views/rooms/RoomTileCallSummary.tsx
@@ -35,6 +35,14 @@ export const RoomTileCallSummary: FC<Props> = ({ call }) => {
             text = _t("common|video");
             active = false;
             break;
+        case ConnectionState.WidgetLoading:
+            text = _t("common|loading");
+            active = false;
+            break;
+        case ConnectionState.Lobby:
+            text = _t("common|lobby");
+            active = false;
+            break;
         case ConnectionState.Connecting:
             text = _t("room|joining");
             active = true;