snapshot of https://github.com/jitsi/jitsi-meet.git @ fd1749dd28f4138aa80234fc7f311b19aaffa0e7 (2026-09-15)

react/features/overlay/components/web/AbstractPageReloadOverlay.tsx

@@ -0,0 +1,275 @@
+import { randomInt } from '@jitsi/js-utils/random';
+import React, { Component } from 'react';
+import { WithTranslation } from 'react-i18next';
+
+import { createPageReloadScheduledEvent } from '../../../analytics/AnalyticsEvents';
+import { sendAnalytics } from '../../../analytics/functions';
+import { reloadNow } from '../../../app/actions.web';
+import { IReduxState, IStore } from '../../../app/types';
+import {
+    isFatalJitsiConferenceError,
+    isFatalJitsiConnectionError
+} from '../../../base/lib-jitsi-meet/functions.web';
+import { sendPageReloadApplicationLog } from '../../actions.any';
+import logger from '../../logger';
+
+import ReloadButton from './ReloadButton';
+
+/**
+ * The type of the React {@code Component} props of
+ * {@link AbstractPageReloadOverlay}.
+ */
+export interface IProps extends WithTranslation {
+
+    /**
+     * The details is an object containing more information about the connection
+     * failed (shard changes, was the computer suspended, etc.).
+     */
+    details?: Object;
+
+    /**
+     * Redux dispatch function.
+     */
+    dispatch: IStore['dispatch'];
+
+    /**
+     * The error that caused the display of the overlay.
+     */
+    error?: any;
+
+    /**
+     * The indicator which determines whether the reload was caused by network
+     * failure.
+     */
+    isNetworkFailure: boolean;
+
+    /**
+     * The reason for the error that will cause the reload.
+     * NOTE: Used by PageReloadOverlay only.
+     */
+    reason?: string;
+}
+
+/**
+ * The type of the React {@code Component} state of
+ * {@link AbstractPageReloadOverlay}.
+ */
+interface IState {
+
+    /**
+     * The translation key for the title of the overlay.
+     */
+    message: string;
+
+    /**
+     * Current value(time) of the timer.
+     */
+    timeLeft: number;
+
+    /**
+     * How long the overlay dialog will be displayed before the conference will
+     * be reloaded.
+     */
+    timeoutSeconds: number;
+
+    /**
+     * The translation key for the title of the overlay.
+     */
+    title: string;
+}
+
+/**
+ * Implements an abstract React {@link Component} for the page reload overlays.
+ *
+ * FIXME: This is not really an abstract class as some components and functions are very web specific.
+ */
+export default class AbstractPageReloadOverlay<P extends IProps>
+    extends Component<P, IState> {
+
+    /**
+     * Determines whether this overlay needs to be rendered (according to a
+     * specific redux state). Called by {@link OverlayContainer}.
+     *
+     * @param {Object} state - The redux state.
+     * @returns {boolean} - If this overlay needs to be rendered, {@code true};
+     * {@code false}, otherwise.
+     */
+    static needsRender(state: IReduxState) {
+        const { error: conferenceError } = state['features/base/conference'];
+        const { error: configError } = state['features/base/config'];
+        const { error: connectionError } = state['features/base/connection'];
+
+        const jitsiConnectionError
+            = connectionError && isFatalJitsiConnectionError(connectionError);
+        const jitsiConferenceError
+            = conferenceError && isFatalJitsiConferenceError(conferenceError);
+
+        return jitsiConnectionError || jitsiConferenceError || configError;
+    }
+
+    _interval: number | undefined;
+
+    /**
+     * Initializes a new AbstractPageReloadOverlay instance.
+     *
+     * @param {Object} props - The read-only properties with which the new
+     * instance is to be initialized.
+     * @public
+     */
+    constructor(props: P) {
+        super(props);
+
+        /**
+         * How long the overlay dialog will be displayed, before the conference
+         * will be reloaded.
+         *
+         * @type {number}
+         */
+        const timeoutSeconds = 10 + randomInt(0, 20);
+
+        let message, title;
+
+        if (this.props.isNetworkFailure) {
+            title = 'dialog.conferenceDisconnectTitle';
+            message = 'dialog.conferenceDisconnectMsg';
+        } else {
+            title = 'dialog.conferenceReloadTitle';
+            message = 'dialog.conferenceReloadMsg';
+        }
+
+        this.state = {
+            message,
+            timeLeft: timeoutSeconds,
+            timeoutSeconds,
+            title
+        };
+    }
+
+    /**
+     * React Component method that executes once component is mounted.
+     *
+     * @inheritdoc
+     * @returns {void}
+     */
+    override componentDidMount() {
+        this.props.dispatch(sendPageReloadApplicationLog(this.props.reason));
+
+        sendAnalytics(createPageReloadScheduledEvent(
+            this.props.reason ?? '',
+            this.state.timeoutSeconds,
+            this.props.details));
+
+        logger.info(
+            `The conference will be reloaded after ${
+                this.state.timeoutSeconds} seconds.`);
+
+        this._interval
+            = window.setInterval(
+                () => {
+                    if (this.state.timeLeft === 0) {
+                        if (this._interval) {
+                            clearInterval(this._interval);
+                            this._interval = undefined;
+                        }
+
+                        this.props.dispatch(reloadNow());
+                    } else {
+                        this.setState(prevState => {
+                            return {
+                                timeLeft: prevState.timeLeft - 1
+                            };
+                        });
+                    }
+                },
+                1000);
+    }
+
+    /**
+     * Clears the timer interval.
+     *
+     * @inheritdoc
+     * @returns {void}
+     */
+    override componentWillUnmount() {
+        if (this._interval) {
+            clearInterval(this._interval);
+            this._interval = undefined;
+        }
+    }
+
+    /**
+     * Renders the button for reloading the page if necessary.
+     *
+     * @protected
+     * @returns {ReactElement|null}
+     */
+    _renderButton() {
+        if (this.props.isNetworkFailure) {
+            return (
+                <ReloadButton textKey = 'dialog.rejoinNow' />
+            );
+        }
+
+        return null;
+    }
+
+    /**
+     * Renders the progress bar.
+     *
+     * @protected
+     * @returns {ReactElement}
+     */
+    _renderProgressBar() {
+        const { timeLeft, timeoutSeconds } = this.state;
+        const timeRemaining = timeoutSeconds - timeLeft;
+        const percentageComplete
+            = Math.floor((timeRemaining / timeoutSeconds) * 100);
+
+        return (
+            <div
+                className = 'progress-indicator'
+                id = 'reloadProgressBar'>
+                <div
+                    className = 'progress-indicator-fill'
+                    style = {{ width: `${percentageComplete}%` }} />
+            </div>
+        );
+    }
+}
+
+/**
+ * Maps (parts of) the redux state to the associated component's props.
+ *
+ * @param {Object} state - The redux state.
+ * @protected
+ * @returns {{
+ *     details: Object,
+ *     error: ?Error,
+ *     isNetworkFailure: boolean,
+ *     reason: string
+ * }}
+ */
+export function abstractMapStateToProps(state: IReduxState) {
+    const { error: configError } = state['features/base/config'];
+    const { error: connectionError } = state['features/base/connection'];
+    const { error: conferenceError } = state['features/base/conference'];
+    const error = configError || connectionError || conferenceError;
+    let reason;
+
+    if (conferenceError) {
+        reason = `error.conference.${conferenceError.name}`;
+    } else if (configError) {
+        reason = `error.config.${configError.name}`;
+    } else if (connectionError) {
+        reason = `error.connection.${connectionError.name}`;
+    } else {
+        logger.error('No reload reason defined!');
+    }
+
+    return {
+        details: undefined, // TODO: revisit this.
+        error,
+        isNetworkFailure: Boolean(configError || connectionError),
+        reason
+    };
+}