[PB-5897] Fix participant count and zombies on reload

.env.template

@@ -4,4 +4,5 @@ MEET_API_URL=http://meet-server:3006
 CRYPTO_SECRET=6KYQBP847D4ATSFA
 MAGIC_IV=d139cb9a2cd17092e79e1861cf9d7023
 MAGIC_SALT=38dce0391b49efba88dbc8c39ebf868f0267eb110bb0012ab27dc52a528d61b1d1ed9d76f400ff58e3240028442b1eab9bb84e111d9dadd997982dbde9dbd25e
-JITSI_APP_ID=vpaas-magic-cookie-04a19c25aaab448c9cf74516ffb5ebf2
+JITSI_APP_ID=vpaas-magic-cookie-04a19c25aaab448c9cf74516ffb5ebf2
+WEBPACK_DEV_SERVER_PROXY_TARGET=https://meet.internxt.com

.gitignore

@@ -7,6 +7,7 @@ all.css
 .remote-sync.json
 .sync-config.cson
 .env
+.env.*
 .npmrc
 
 # Coverage

package.json

@@ -264,7 +264,7 @@
         "validate": "npm ls",
         "tsc-test:web": "tsc --project tsconfig.web.json --listFilesOnly | grep -v node_modules | grep native",
         "tsc-test:native": "tsc --project tsconfig.native.json --listFilesOnly | grep -v node_modules | grep web",
-        "start": "make dev",
+        "start": "WEBPACK_DEV_SERVER_PROXY_TARGET=https://meet.internxt.com make dev",
         "test": "vitest run",
         "test:ui": "vitest --ui",
         "test:coverage": "vitest run --coverage",

react/features/base/conference/actionTypes.ts

@@ -136,7 +136,7 @@ export const CONFERENCE_UNIQUE_ID_SET = 'CONFERENCE_UNIQUE_ID_SET';
  *     }
  * }
  */
-export const E2E_RTT_CHANGED = 'E2E_RTT_CHANGED'
+export const E2E_RTT_CHANGED = 'E2E_RTT_CHANGED';
 
 /**
  * The type of (redux) action which signals that a conference will be initialized.

react/features/base/conference/middleware.web.ts

@@ -138,9 +138,7 @@ MiddlewareRegistry.register(store => next => action => {
                     Object.values(TRIGGER_READY_TO_CLOSE_REASONS).indexOf(reason)
                 ];
             const roomId = room ?? "";
-            dispatch(hangup(true, roomId, i18next.t(titlekey) || reason));
-            // new jitsi change, test aht does notifyOnConferenceDestruction
-            // dispatch(hangup(true, i18next.t(titlekey) || reason, notifyOnConferenceDestruction));
+            dispatch(hangup(true, roomId, i18next.t(titlekey) || reason, notifyOnConferenceDestruction));
         }
 
         releaseScreenLock();

react/features/base/connection/actionTypes.ts

@@ -51,6 +51,16 @@ export const CONNECTION_PROPERTIES_UPDATED = 'CONNECTION_PROPERTIES_UPDATED';
  */
 export const CONNECTION_WILL_CONNECT = 'CONNECTION_WILL_CONNECT';
 
+/**
+ * The type of (redux) action which signals that the token for a connection is expired.
+ *
+ * {
+ *     type: CONNECTION_TOKEN_EXPIRED,
+ *     connection: JitsiConnection
+ * }
+ */
+export const CONNECTION_TOKEN_EXPIRED = 'CONNECTION_TOKEN_EXPIRED';
+
 /**
  * The type of (redux) action which sets the location URL of the application,
  * connection, conference, etc.

react/features/base/connection/actions.any.ts

@@ -17,20 +17,22 @@ import {
 import { setJoinRoomError } from "../meet/general/store/errors/actions";
 import { LocalStorageManager } from "../meet/LocalStorageManager";
 import MeetingService from "../meet/services/meeting.service";
-import { clearNewMeetingFlowSession, isNewMeetingFlow } from "../meet/services/sessionStorage.service";
+import { clearNewMeetingFlowSession } from "../meet/services/sessionStorage.service";
 import {
     CONNECTION_DISCONNECTED,
     CONNECTION_ESTABLISHED,
     CONNECTION_FAILED,
     CONNECTION_PROPERTIES_UPDATED,
     CONNECTION_WILL_CONNECT,
+    CONNECTION_TOKEN_EXPIRED,
     SET_LOCATION_URL,
     SET_PREFER_VISITOR,
 } from "./actionTypes";
 import { JITSI_CONNECTION_URL_KEY } from "./constants";
 import logger from "./logger";
 import { get8x8Options } from "./options8x8";
 import { ConnectionFailedError, IIceServers } from "./types";
+import { ConfigService } from '../meet/services/config.service';
 
 /**
  * The options that will be passed to the JitsiConnection instance.
@@ -155,7 +157,9 @@ export function constructOptions(state: IReduxState) {
             options.websocketKeepAliveUrl = appendURLParam(options.websocketKeepAliveUrl, "room", roomName ?? "");
         }
         if (options.conferenceRequestUrl) {
-            options.conferenceRequestUrl = appendURLParam(options.conferenceRequestUrl, "room", roomName ?? "");
+            options.conferenceRequestUrl = ConfigService.instance.isDevelopment()
+                ? undefined
+                : appendURLParam(options.conferenceRequestUrl, "room", roomName ?? "");
         }
     }
 
@@ -268,6 +272,7 @@ export function _connectInternal({
                     connection.addEventListener(JitsiConnectionEvents.CONNECTION_FAILED, _onConnectionFailed);
                     connection.addEventListener(JitsiConnectionEvents.CONNECTION_REDIRECTED, _onConnectionRedirected);
                     connection.addEventListener(JitsiConnectionEvents.PROPERTIES_UPDATED, _onPropertiesUpdate);
+                    connection.addEventListener(JitsiConnectionEvents.CONNECTION_TOKEN_EXPIRED, _onTokenExpired);
 
                     /**
                      * Unsubscribe the connection instance from
@@ -362,6 +367,16 @@ export function _connectInternal({
                         dispatch(redirect(vnode, focusJid, username));
                     }
 
+                    /**
+                     * Connection will resume.
+                     *
+                     * @private
+                     * @returns {void}
+                     */
+                    function _onTokenExpired(): void {
+                        dispatch(_connectionTokenExpired(connection));
+                    }
+
                     /**
                      * Connection properties were updated.
                      *
@@ -416,6 +431,23 @@ export function _connectInternal({
 function _connectionWillConnect(connection: Object) {
     return {
         type: CONNECTION_WILL_CONNECT,
+        connection,
+    };
+}
+
+/**
+ * Create an action for when a connection token is expired.
+ *
+ * @param {JitsiConnection} connection - The {@code JitsiConnection} token is expired.
+ * @private
+ * @returns {{
+ *     type: CONNECTION_TOKEN_EXPIRED,
+ *     connection: JitsiConnection
+ * }}
+ */
+function _connectionTokenExpired(connection: Object) {
+    return {
+        type: CONNECTION_TOKEN_EXPIRED,
         connection
     };
 }

react/features/base/connection/actions.web.ts

@@ -17,13 +17,17 @@ import logger from './logger';
 
 /**
  * Helper function to leave a call with proper user identification (authenticated or anonymous)
+ * If authenticated user - uuid is taken from the token, else - sent anonymous uuid from local storage
  * @param {string} roomId - The room ID to leave
  * @returns {Promise<void>}
  */
 async function leaveCallWithUserIdentification(roomId: string): Promise<void> {
     const user = LocalStorageManager.instance.getUser();
-    const anonymousUserId = user ? undefined : LocalStorageManager.instance.getAnonymousUUID();
-    return await MeetingService.instance.leaveCall(roomId, anonymousUserId ? { userId: anonymousUserId } : undefined);
+    let payload = undefined;
+    if (!user){
+        payload = { userId: LocalStorageManager.instance.getAnonymousUUID() || '' }; 
+    }
+    return await MeetingService.instance.leaveCall(roomId, payload);
 }
 
 export * from "./actions.any";
@@ -40,35 +44,29 @@ export function connect(id?: string, password?: string) {
         const state = getState();
         const { jwt } = state["features/base/jwt"];
         const { iAmRecorder, iAmSipGateway } = state["features/base/config"];
-        // TODO: CHECK WHY USER REDUCER IS NULL IN THIS POINT, initializers are not executing as expected
-        // const { user } = state["features/user"];
+
         const user = LocalStorageManager.instance.getUser();
+
         if (!iAmRecorder && !iAmSipGateway && isVpaasMeeting(state)) {
             return dispatch(getCustomerDetails())
                 .then(() => {
                     if (!jwt) {
                         return getJaasJWT(state);
                     }
                 })
-                .then((j) => j && dispatch(setJWT(j)))
-                .then(() =>
-                    dispatch(
+                .then(j => {
+                    j && dispatch(setJWT(j));
+
+                    return dispatch(
                         _connectInternal({
                             id,
                             password,
                             name: user?.name,
                             lastname: user?.lastname,
                             isAnonymous: !user,
                         })
-                    )
-                )
-                // latest jitsi changes, test if not works current ones
-                // .then(j => {
-                //     j && dispatch(setJWT(j));
-
-                //     return dispatch(_connectInternal(id, password));
-                // })
-                .catch(e => {
+                    );
+                }).catch(e => {
                     logger.error('Connection error', e);
                 });
         }
@@ -139,14 +137,13 @@ export function hangup(requestFeedback = false, roomId?: string, feedbackTitle?:
 
 export async function cleanupAndReload(roomId: string) {
     try{
-        console.log('[RELOAD_PAGE]: Leaving the call');
+        console.log('[RELOAD] cleanupAndReload is called:', roomId);
         await leaveCallWithUserIdentification(roomId);
-        console.log('[RELOAD_PAGE]: Cleaning up the conference');
         await APP.conference.cleanup();
     } catch (error) {
-        console.error("[RELOAD_PAGE]: Error during cleanup and reload", error);
+        console.error("[RELOAD]: Error during cleanup and reload", error);
     } finally {
-        console.log("[RELOAD_PAGE]: Reloading the page");
+        console.log("[RELOAD]: Reloading the page");
         window.location.reload();
     }
 }

react/features/base/connection/middleware.web.ts

@@ -1,45 +1,30 @@
-import { redirectToStaticPage } from '../../app/actions.any';
-import { CONFERENCE_WILL_LEAVE } from "../conference/actionTypes";
-import { isLeavingConferenceManually, setLeaveConferenceManually } from "../meet/general/utils/conferenceState";
-import MiddlewareRegistry from "../redux/MiddlewareRegistry";
+import MiddlewareRegistry from '../redux/MiddlewareRegistry';
 
-import { CONNECTION_DISCONNECTED, CONNECTION_WILL_CONNECT } from "./actionTypes";
+import { CONNECTION_WILL_CONNECT } from './actionTypes';
 
 /**
  * The feature announced so we can distinguish jibri participants.
  *
  * @type {string}
  */
-export const DISCO_JIBRI_FEATURE = "http://jitsi.org/protocol/jibri";
+export const DISCO_JIBRI_FEATURE = 'http://jitsi.org/protocol/jibri';
 
-MiddlewareRegistry.register(({ getState, dispatch }) => (next) => (action) => {
+MiddlewareRegistry.register(({ getState }) => next => action => {
     switch (action.type) {
-        case CONNECTION_WILL_CONNECT: {
-            const { connection } = action;
-            const { iAmRecorder } = getState()["features/base/config"];
+    case CONNECTION_WILL_CONNECT: {
+        const { connection } = action;
+        const { iAmRecorder } = getState()['features/base/config'];
 
-            if (iAmRecorder) {
-                connection.addFeature(DISCO_JIBRI_FEATURE);
-            }
-
-            // @ts-ignore
-            APP.connection = connection;
-
-            setLeaveConferenceManually(false);
-            break;
-        }
-
-        case CONFERENCE_WILL_LEAVE: {
-            setLeaveConferenceManually(true);
-            break;
+        if (iAmRecorder) {
+            connection.addFeature(DISCO_JIBRI_FEATURE);
         }
 
-        case CONNECTION_DISCONNECTED: {
-            setLeaveConferenceManually(false);
+        // @ts-ignore
+        APP.connection = connection;
 
-            break;
-        }
+        break;
+    }
     }
 
     return next(action);
-});
+});

react/features/base/meet/views/Conference/Conference.tsx

@@ -20,6 +20,8 @@ import { init } from "../../../../conference/actions.web";
 import CreateConference from "./containers/CreateConference";
 import JoinConference from "./containers/JoinConference";
 import { appNavigate } from "../../../../app/actions.web";
+import { LocalStorageManager } from "../../LocalStorageManager";
+import { ConfigService } from "../../services/config.service";
 
 /**
  * DOM events for when full screen mode has changed. Different browsers need
@@ -137,13 +139,15 @@ class Conference extends AbstractConference<IProps, any> {
      * @returns {void}
      */
     _handlePopState = () => {
+        console.log("[RELOAD]: Popstate event triggered, handling back/forward navigation");
         const { t } = this.props;
 
         if (APP.conference.isJoined()) {
             const confirmLeave = window.confirm(
                 t('dialog.leaveMeetingConfirmation')
             );
             if (confirmLeave) {
+                window.removeEventListener("pagehide", this._handlePageHide, true);
                 this.props.dispatch(hangup(false, this.props.roomId));
                 window.history.pushState(null, '', '/');
             } else {
@@ -163,8 +167,8 @@ class Conference extends AbstractConference<IProps, any> {
         document.title = `${interfaceConfig.APP_NAME}`;
         this._start();
 
-        window.addEventListener("beforeunload", this._handleBeforeUnload, true);
         window.addEventListener("popstate", this._handlePopState);
+        window.addEventListener("pagehide", this._handlePageHide, true);
     }
 
     /**
@@ -193,33 +197,51 @@ class Conference extends AbstractConference<IProps, any> {
      * @inheritdoc
      */
     override componentWillUnmount() {
+        console.log('[RELOAD] Conference component will unmount, leaving the call and cleaning up');
         APP.UI.unbindEvents();
 
         FULL_SCREEN_EVENTS.forEach((name) => document.removeEventListener(name, this._onFullScreenChange));
 
-        window.removeEventListener("beforeunload", this._handleBeforeUnload, true);
         window.removeEventListener("popstate", this._handlePopState);
+        window.removeEventListener("pagehide", this._handlePageHide, true);
 
-        APP.conference.isJoined() && this.props.dispatch(hangup(true, this.props.roomId));
+        if (APP.conference.isJoined()) {
+            window.removeEventListener("pagehide", this._handlePageHide, true);
+            this.props.dispatch(hangup(true, this.props.roomId));
+        }
     }
 
     /**
-     * Handler for beforeunload event that shows a confirmation dialog
-     * when user tries to close the tab or browser during a meeting.
-     *
-     * @param {BeforeUnloadEvent} event - The beforeunload event.
+     * 
+     * Handler for pagehide event that sends a leave call request to the server when the page is being unloaded.
      * @private
      * @returns {string}
      */
-    _handleBeforeUnload = (event: BeforeUnloadEvent): string => {
-        if (APP.conference.isJoined()) {
-            event.preventDefault();
-            event.stopImmediatePropagation();
-
-            event.returnValue = '';
-            return '';
+    _handlePageHide = (): void => {
+        console.log("[RELOAD]: Page is being hidden, sending leave call request");
+
+        const callId = this.props.roomId;
+        const token =  LocalStorageManager.instance.getNewToken();
+        let body = '';
+        if(!token) {
+            const anonymousUserId = LocalStorageManager.instance.getAnonymousUUID();
+            body = JSON.stringify({ userId: anonymousUserId });
         }
-        return "";
+
+        const MEET_API_URL = ConfigService.instance.get("MEET_API_URL");
+
+        fetch(`${MEET_API_URL}/call/${callId}/users/leave`, {
+            method: "POST",
+            keepalive: true,
+            headers: {
+                "Content-Type": "application/json; charset=utf-8",
+                Accept: "application/json, text/plain, */*",
+                Authorization: `Bearer ${token}`,
+                "internxt-version": "0.0.1",
+                "internxt-client": "internxt-meet",
+            },
+            body,
+        });
     };
 
     /**
@@ -230,6 +252,7 @@ class Conference extends AbstractConference<IProps, any> {
      * @returns {void}
      */
     _leaveMeeting(): void {
+        window.removeEventListener("pagehide", this._handlePageHide, true);
         this.props.dispatch(hangup(true, this.props.roomId));
     }