init

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

@@ -0,0 +1,281 @@
+// @ts-expect-error
+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 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() {
+        // FIXME: We should dispatch action for this.
+        if (typeof APP !== 'undefined' && APP.conference?._room) {
+            APP.conference._room.sendApplicationLog(JSON.stringify({
+                name: 'page.reload',
+                label: 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
+    };
+}

react/features/overlay/components/web/AbstractSuspendedOverlay.ts

@@ -0,0 +1,22 @@
+import { Component } from 'react';
+import { WithTranslation } from 'react-i18next';
+
+import { IReduxState } from '../../../app/types';
+
+/**
+ * Implements a React {@link Component} for suspended overlay. Shown when a
+ * suspend is detected.
+ */
+export default class AbstractSuspendedOverlay extends Component<WithTranslation> {
+    /**
+     * 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) {
+        return state['features/power-monitor']?.suspendDetected;
+    }
+}

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

@@ -0,0 +1,59 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+
+import { IReduxState } from '../../../app/types';
+import { getOverlayToRender } from '../../functions.web';
+
+
+/**
+ * The type of the React {@link Component} props of {@code OverlayContainer}.
+ */
+interface IProps {
+
+    /**
+     * The React {@link Component} type of overlay to be rendered by the
+     * associated {@code OverlayContainer}.
+     */
+    overlay: any;
+}
+
+/**
+ * Implements a React {@link Component} that will display the correct overlay
+ * when needed.
+ */
+class OverlayContainer extends Component<IProps> {
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @public
+     * @returns {ReactElement|null}
+     */
+    override render() {
+        const { overlay } = this.props;
+
+        return overlay ? React.createElement(overlay, {}) : null;
+    }
+}
+
+/**
+ * Maps (parts of) the redux state to the associated {@code OverlayContainer}'s
+ * props.
+ *
+ * @param {Object} state - The redux state.
+ * @private
+ * @returns {{
+ *     overlay: ?Object
+ * }}
+ */
+function _mapStateToProps(state: IReduxState) {
+    return {
+        /**
+         * The React {@link Component} type of overlay to be rendered by the
+         * associated {@code OverlayContainer}.
+         */
+        overlay: getOverlayToRender(state)
+    };
+}
+
+export default connect(_mapStateToProps)(OverlayContainer);

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

@@ -0,0 +1,49 @@
+import React, { Component, ReactNode } from 'react';
+
+/**
+ * The type of the React {@code Component} props of {@link OverlayFrame}.
+ */
+interface IProps {
+
+    /**
+     * The children components to be displayed into the overlay frame.
+     */
+    children: ReactNode;
+
+    /**
+     * Indicates the css style of the overlay. If true, then lighter; darker,
+     * otherwise.
+     */
+    isLightOverlay?: boolean;
+
+    /**
+     * The style property.
+     */
+    style?: Object;
+}
+
+/**
+ * Implements a React {@link Component} for the frame of the overlays.
+ */
+export default class OverlayFrame extends Component<IProps> {
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement|null}
+     */
+    override render() {
+        return (
+            <div
+                className = { this.props.isLightOverlay ? 'overlay__container-light' : 'overlay__container' }
+                id = 'overlay'
+                style = { this.props.style }>
+                <div className = { 'overlay__content' }>
+                    {
+                        this.props.children
+                    }
+                </div>
+            </div>
+        );
+    }
+}

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+import { translate } from '../../../base/i18n/functions';
+
+import AbstractPageReloadOverlay, {
+    IProps,
+    abstractMapStateToProps
+} from './AbstractPageReloadOverlay';
+import OverlayFrame from './OverlayFrame';
+
+/**
+ * Implements a React Component for page reload overlay. Shown before the
+ * conference is reloaded. Shows a warning message and counts down towards the
+ * reload.
+ */
+class PageReloadOverlay extends AbstractPageReloadOverlay<IProps> {
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    override render() {
+        const { isNetworkFailure, t } = this.props;
+        const { message, timeLeft, title } = this.state;
+
+        return (
+            <OverlayFrame isLightOverlay = { isNetworkFailure }>
+                <div
+                    aria-describedby = 'reload_overlay_text'
+                    aria-labelledby = 'reload_overlay_title'
+                    className = 'inlay'
+                    role = 'dialog'>
+                    <span
+                        aria-level = { 1 }
+                        className = 'reload_overlay_title'
+                        id = 'reload_overlay_title'
+                        role = 'heading'>
+                        { t(title) }
+                    </span>
+                    <span
+                        className = 'reload_overlay_text'
+                        id = 'reload_overlay_text'>
+                        { t(message, { seconds: timeLeft }) }
+                    </span>
+                    { this._renderProgressBar() }
+                    { this._renderButton() }
+                </div>
+            </OverlayFrame>
+        );
+    }
+}
+
+export default translate(connect(abstractMapStateToProps)(PageReloadOverlay));

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

@@ -0,0 +1,43 @@
+import React, { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+import { makeStyles } from 'tss-react/mui';
+
+import { reloadNow } from '../../../app/actions.web';
+import Button from '../../../base/ui/components/web/Button';
+
+/**
+ * The type of the React {@code Component} props of {@link ReloadButton}.
+ */
+interface IProps {
+
+    /**
+     * The translation key for the text in the button.
+     */
+    textKey: string;
+}
+
+const useStyles = makeStyles()(theme => {
+    return {
+        button: {
+            margin: `${theme.spacing(2)} auto 0`
+        }
+    };
+});
+
+const ReloadButton = ({ textKey }: IProps) => {
+    const dispatch = useDispatch();
+    const { classes } = useStyles();
+
+    const onClick = useCallback(() => {
+        dispatch(reloadNow());
+    }, []);
+
+    return (
+        <Button
+            className = { classes.button }
+            labelKey = { textKey }
+            onClick = { onClick } />
+    );
+};
+
+export default ReloadButton;

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

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import { translate } from '../../../base/i18n/functions';
+
+import AbstractSuspendedOverlay from './AbstractSuspendedOverlay';
+import OverlayFrame from './OverlayFrame';
+import ReloadButton from './ReloadButton';
+
+/**
+ * Implements a React Component for suspended overlay. Shown when a suspend is
+ * detected.
+ */
+class SuspendedOverlay extends AbstractSuspendedOverlay {
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    override render() {
+        const { t } = this.props;
+
+        return (
+            <OverlayFrame>
+                <div className = 'inlay'>
+                    <span className = 'inlay__icon icon-microphone' />
+                    <span className = 'inlay__icon icon-camera' />
+                    <h3
+                        className = 'inlay__title'>
+                        { t('suspendedoverlay.title') }
+                    </h3>
+                    <ReloadButton textKey = 'suspendedoverlay.rejoinKeyTitle' />
+                </div>
+            </OverlayFrame>
+        );
+    }
+}
+
+export default translate(SuspendedOverlay);