ref(TS) Convert some Abstract classes to TS (#13095)

react/features/analytics/AnalyticsEvents.ts

@@ -887,7 +887,7 @@ export function createVpaasConferenceJoinedEvent(tenant: string) {
  * @returns {Object} The event in a format suitable for sending via
  * sendAnalytics.
  */
-export function createWelcomePageEvent(action: string, actionSubject: string, attributes = {}) {
+export function createWelcomePageEvent(action: string, actionSubject?: string, attributes = {}) {
     return {
         action,
         actionSubject,

react/features/base/conference/reducer.ts

@@ -93,7 +93,9 @@ export interface IJitsiConference {
     setReceiverConstraints: Function;
     setSenderVideoConstraint: Function;
     setSubject: Function;
+    startRecording: Function;
     startVerification: Function;
+    stopRecording: Function;
 }
 
 export interface IConferenceState {

react/features/chat/components/AbstractChat.js → react/features/chat/components/AbstractChat.ts

@@ -1,98 +1,92 @@
-// @flow
-
 import { Component } from 'react';
-import type { Dispatch } from 'redux';
+import { WithTranslation } from 'react-i18next';
 
-import { getLocalParticipant } from '../../base/participants';
+import { IReduxState, IStore } from '../../app/types';
+import { getLocalParticipant } from '../../base/participants/functions';
 import { sendMessage, setIsPollsTabFocused } from '../actions';
 import { SMALL_WIDTH_THRESHOLD } from '../constants';
 
 /**
  * The type of the React {@code Component} props of {@code AbstractChat}.
  */
-export type Props = {
+export interface IProps extends WithTranslation {
 
     /**
      * Whether the chat is opened in a modal or not (computed based on window width).
      */
-    _isModal: boolean,
+    _isModal: boolean;
 
     /**
      * True if the chat window should be rendered.
      */
-    _isOpen: boolean,
+    _isOpen: boolean;
 
     /**
      * True if the polls feature is enabled.
      */
-    _isPollsEnabled: boolean,
+    _isPollsEnabled: boolean;
 
     /**
      * Whether the poll tab is focused or not.
      */
-    _isPollsTabFocused: boolean,
+    _isPollsTabFocused: boolean;
 
     /**
      * All the chat messages in the conference.
      */
-    _messages: Array<Object>,
+    _messages: Array<Object>;
 
     /**
      * Number of unread chat messages.
      */
-    _nbUnreadMessages: number,
+    _nbUnreadMessages: number;
 
     /**
      * Number of unread poll messages.
      */
-    _nbUnreadPolls: number,
+    _nbUnreadPolls: number;
 
     /**
      * Function to send a text message.
      *
      * @protected
      */
-    _onSendMessage: Function,
+    _onSendMessage: Function;
+
+    /**
+     * Function to toggle the chat window.
+     */
+    _onToggleChat: Function;
 
     /**
      * Function to display the chat tab.
      *
      * @protected
      */
-    _onToggleChatTab: Function,
+    _onToggleChatTab: Function;
 
     /**
      * Function to display the polls tab.
      *
      * @protected
      */
-    _onTogglePollsTab: Function,
-
-    /**
-     * Function to toggle the chat window.
-     */
-    _onToggleChat: Function,
+    _onTogglePollsTab: Function;
 
     /**
      * Whether or not to block chat access with a nickname input form.
      */
-    _showNamePrompt: boolean,
+    _showNamePrompt: boolean;
 
     /**
      * The Redux dispatch function.
      */
-    dispatch: Dispatch<any>,
-
-    /**
-     * Function to be used to translate i18n labels.
-     */
-    t: Function,
-};
+    dispatch: IStore['dispatch'];
+}
 
 /**
  * Implements an abstract chat panel.
  */
-export default class AbstractChat<P: Props> extends Component<P> {
+export default class AbstractChat<P extends IProps> extends Component<P> {
 
     /**
      * Initializes a new {@code AbstractChat} instance.
@@ -109,8 +103,6 @@ export default class AbstractChat<P: Props> extends Component<P> {
         this._onTogglePollsTab = this._onTogglePollsTab.bind(this);
     }
 
-    _onSendMessage: (string) => void;
-
     /**
     * Sends a text message.
     *
@@ -123,8 +115,6 @@ export default class AbstractChat<P: Props> extends Component<P> {
         this.props.dispatch(sendMessage(text));
     }
 
-    _onToggleChatTab: () => void;
-
     /**
      * Display the Chat tab.
      *
@@ -135,8 +125,6 @@ export default class AbstractChat<P: Props> extends Component<P> {
         this.props.dispatch(setIsPollsTabFocused(false));
     }
 
-    _onTogglePollsTab: () => void;
-
     /**
      * Display the Polls tab.
      *
@@ -160,7 +148,7 @@ export default class AbstractChat<P: Props> extends Component<P> {
  *     _showNamePrompt: boolean
  * }}
  */
-export function _mapStateToProps(state: Object) {
+export function _mapStateToProps(state: IReduxState) {
     const { isOpen, isPollsTabFocused, messages, nbUnreadMessages } = state['features/chat'];
     const { nbUnreadPolls } = state['features/polls'];
     const _localParticipant = getLocalParticipant(state);

react/features/recording/components/AbstractRecordingLabel.js → react/features/recording/components/AbstractRecordingLabel.ts

@@ -1,7 +1,7 @@
-// @flow
-
-import { Component } from 'react';
+import React, { Component } from 'react';
+import { WithTranslation } from 'react-i18next';
 
+import { IReduxState } from '../../app/types';
 import { JitsiRecordingConstants } from '../../base/lib-jitsi-meet';
 import { getSessionStatusToShow } from '../functions';
 
@@ -13,44 +13,39 @@ import { getSessionStatusToShow } from '../functions';
  * running. These boolean are shared across the two components to make it
  * easier to align web's behaviour to mobile's later if necessary.
  */
-type Props = {
+interface IProps extends WithTranslation {
 
     /**
      * Whether this is the Jibri recorder participant.
      */
-    _iAmRecorder: boolean,
+    _iAmRecorder: boolean;
 
     /**
      * The status of the highermost priority session.
      */
-    _status: ?string,
+    _status?: string;
 
     /**
      * An object containing the CSS classes.
      */
-    classes: ?{[ key: string]: string},
+    classes?: { [ key: string]: string; };
 
     /**
      * The recording mode this indicator should display.
      */
-    mode: string,
-
-    /**
-     * Invoked to obtain translated strings.
-     */
-    t: Function
-};
+    mode: string;
+}
 
 /**
  * State of the component.
  */
-type State = {
+interface IState {
 
     /**
      * True if the label status is stale, so it needs to be removed.
      */
-    staleLabel: boolean
-};
+    staleLabel: boolean;
+}
 
 /**
  * The timeout after a label is considered stale. See {@code _updateStaleStatus}
@@ -62,13 +57,15 @@ const STALE_TIMEOUT = 10 * 1000;
  * Abstract class for the {@code RecordingLabel} component.
  */
 export default class AbstractRecordingLabel
-    extends Component<Props, State> {
+    extends Component<IProps, IState> {
+    _mounted: boolean;
+
     /**
      * Implements {@code Component#getDerivedStateFromProps}.
      *
      * @inheritdoc
      */
-    static getDerivedStateFromProps(props: Props, prevState: State) {
+    static getDerivedStateFromProps(props: IProps, prevState: IState) {
         return {
             staleLabel: props._status !== JitsiRecordingConstants.status.OFF
                 && prevState.staleLabel ? false : prevState.staleLabel
@@ -80,14 +77,14 @@ export default class AbstractRecordingLabel
      *
      * @inheritdoc
      */
-    constructor(props: Props) {
+    constructor(props: IProps) {
         super(props);
 
         this.state = {
             staleLabel: true
         };
 
-        this._updateStaleStatus({}, props);
+        this._updateStaleStatus(undefined, props);
     }
 
     /**
@@ -113,7 +110,7 @@ export default class AbstractRecordingLabel
      *
      * @inheritdoc
      */
-    componentDidUpdate(prevProps: Props) {
+    componentDidUpdate(prevProps: IProps) {
         this._updateStaleStatus(prevProps, this.props);
     }
 
@@ -127,8 +124,6 @@ export default class AbstractRecordingLabel
             ? this._renderLabel() : null;
     }
 
-    _getLabelKey: () => ?string;
-
     /**
      * Returns the label key that this indicator should render.
      *
@@ -153,19 +148,21 @@ export default class AbstractRecordingLabel
      * @protected
      * @returns {React$Element}
      */
-    _renderLabel: () => React$Element<*>;
+    _renderLabel(): React.ReactNode | null {
+        return null;
+    }
 
     /**
      * Updates the stale status of the label on a prop change. A label is stale
      * if it's in a {@code _status} that doesn't need to be rendered anymore.
      *
-     * @param {Props} oldProps - The previous props of the component.
-     * @param {Props} newProps - The new props of the component.
+     * @param {IProps} oldProps - The previous props of the component.
+     * @param {IProps} newProps - The new props of the component.
      * @returns {void}
      */
-    _updateStaleStatus(oldProps, newProps) {
+    _updateStaleStatus(oldProps: IProps | undefined, newProps: IProps) {
         if (newProps._status === JitsiRecordingConstants.status.OFF) {
-            if (oldProps._status !== JitsiRecordingConstants.status.OFF) {
+            if (oldProps?._status !== JitsiRecordingConstants.status.OFF) {
                 setTimeout(() => {
                     if (!this._mounted) {
                         return;
@@ -189,13 +186,13 @@ export default class AbstractRecordingLabel
  * {@code AbstractRecordingLabel}'s props.
  *
  * @param {Object} state - The Redux state.
- * @param {Props} ownProps - The component's own props.
+ * @param {IProps} ownProps - The component's own props.
  * @private
  * @returns {{
  *     _status: ?string
  * }}
  */
-export function _mapStateToProps(state: Object, ownProps: Props) {
+export function _mapStateToProps(state: IReduxState, ownProps: IProps) {
     const { mode } = ownProps;
 
     return {

react/features/recording/components/LiveStream/AbstractStartLiveStreamDialog.js → react/features/recording/components/LiveStream/AbstractStartLiveStreamDialog.ts

@@ -1,81 +1,79 @@
-// @flow
-
 import { Component } from 'react';
 
-import {
-    createLiveStreamingDialogEvent,
-    sendAnalytics
-} from '../../../analytics';
+import { createLiveStreamingDialogEvent } from '../../../analytics/AnalyticsEvents';
+import { sendAnalytics } from '../../../analytics/functions';
+import { IReduxState } from '../../../app/types';
+import { IJitsiConference } from '../../../base/conference/reducer';
 import { JitsiRecordingConstants } from '../../../base/lib-jitsi-meet';
 
 /**
  * The type of the React {@code Component} props of
  * {@link AbstractStartLiveStreamDialog}.
  */
-export type Props = {
+export interface IProps {
 
     /**
      * The {@code JitsiConference} for the current conference.
      */
-    _conference: Object,
+    _conference: IJitsiConference;
 
     /**
      * The current state of interactions with the Google API. Determines what
      * Google related UI should display.
      */
-    _googleAPIState: number,
+    _googleAPIState: number;
 
     /**
      * The email of the user currently logged in to the Google web client
      * application.
      */
-    _googleProfileEmail: string,
+    _googleProfileEmail: string;
 
     /**
      * The live stream key that was used before.
      */
-    _streamKey: string,
+    _streamKey: string;
 
     /**
      * The Redux dispatch function.
      */
-    dispatch: Function,
+    dispatch: Function;
 
     /**
      * Invoked to obtain translated strings.
      */
-    t: Function
+    t: Function;
 }
 
 /**
  * The type of the React {@code Component} state of
  * {@link AbstractStartLiveStreamDialog}.
  */
-export type State = {
+export interface IState {
 
     /**
      * Details about the broadcasts available for use for the logged in Google
      * user's YouTube account.
      */
-    broadcasts: ?Array<Object>,
+    broadcasts?: Array<any>;
 
     /**
      * The error type, as provided by Google, for the most recent error
      * encountered by the Google API.
      */
-    errorType: ?string,
+    errorType?: string;
 
     /**
      * The boundStreamID of the broadcast currently selected in the broadcast
      * dropdown.
      */
-    selectedBoundStreamID: ?string,
+    selectedBoundStreamID?: string;
 
     /**
      * The selected or entered stream key to use for YouTube live streaming.
      */
-    streamKey: string
-};
+    streamKey: string;
+}
 
 /**
  * Implements an abstract class for the StartLiveStreamDialog on both platforms.
@@ -84,8 +82,8 @@ export type State = {
  * but the abstraction of its properties are already present in this abstract
  * class.
  */
-export default class AbstractStartLiveStreamDialog<P: Props>
-    extends Component<P, State> {
+export default class AbstractStartLiveStreamDialog<P extends IProps>
+    extends Component<P, IState> {
     _isMounted: boolean;
 
     /**
@@ -139,8 +137,6 @@ export default class AbstractStartLiveStreamDialog<P: Props>
         this._isMounted = false;
     }
 
-    _onCancel: () => boolean;
-
     /**
      * Invokes the passed in {@link onCancel} callback and closes
      * {@code StartLiveStreamDialog}.
@@ -163,9 +159,7 @@ export default class AbstractStartLiveStreamDialog<P: Props>
      * @private
      * @returns {Promise}
      */
-    _onGetYouTubeBroadcasts: () => Promise<*>;
-
-    _onStreamKeyChange: string => void;
+    _onGetYouTubeBroadcasts: () => Promise<any>;
 
     /**
      * Callback invoked to update the {@code StartLiveStreamDialog} component's
@@ -175,15 +169,13 @@ export default class AbstractStartLiveStreamDialog<P: Props>
      * @private
      * @returns {void}
      */
-    _onStreamKeyChange(streamKey) {
+    _onStreamKeyChange(streamKey: string) {
         this._setStateIfMounted({
             streamKey,
             selectedBoundStreamID: undefined
         });
     }
 
-    _onSubmit: () => boolean;
-
     /**
      * Invokes the passed in {@link onSubmit} callback with the entered stream
      * key, and then closes {@code StartLiveStreamDialog}.
@@ -204,10 +196,10 @@ export default class AbstractStartLiveStreamDialog<P: Props>
         let selectedBroadcastID = null;
 
         if (selectedBoundStreamID) {
-            const selectedBroadcast = broadcasts && broadcasts.find(
+            const selectedBroadcast = broadcasts?.find(
                 broadcast => broadcast.boundStreamID === selectedBoundStreamID);
 
-            selectedBroadcastID = selectedBroadcast && selectedBroadcast.id;
+            selectedBroadcastID = selectedBroadcast?.id;
         }
 
         sendAnalytics(
@@ -231,7 +223,7 @@ export default class AbstractStartLiveStreamDialog<P: Props>
      * @private
      * @returns {void}
      */
-    _setStateIfMounted(newState) {
+    _setStateIfMounted(newState: IState) {
         if (this._isMounted) {
             this.setState(newState);
         }
@@ -249,7 +241,7 @@ export default class AbstractStartLiveStreamDialog<P: Props>
  *     _streamKey: string
  * }}
  */
-export function _mapStateToProps(state: Object) {
+export function _mapStateToProps(state: IReduxState) {
     return {
         _conference: state['features/base/conference'].conference,
         _googleAPIState: state['features/google-api'].googleAPIState,

react/features/recording/components/LiveStream/AbstractStopLiveStreamDialog.js → react/features/recording/components/LiveStream/AbstractStopLiveStreamDialog.ts

@@ -1,11 +1,10 @@
-// @flow
-
 import { Component } from 'react';
+import { WithTranslation } from 'react-i18next';
 
-import {
-    createLiveStreamingDialogEvent,
-    sendAnalytics
-} from '../../../analytics';
+import { createLiveStreamingDialogEvent } from '../../../analytics/AnalyticsEvents';
+import { sendAnalytics } from '../../../analytics/functions';
+import { IReduxState } from '../../../app/types';
+import { IJitsiConference } from '../../../base/conference/reducer';
 import { JitsiRecordingConstants } from '../../../base/lib-jitsi-meet';
 import { getActiveSession } from '../../functions';
 
@@ -13,23 +12,18 @@ import { getActiveSession } from '../../functions';
  * The type of the React {@code Component} props of
  * {@link StopLiveStreamDialog}.
  */
-type Props = {
+interface IProps extends WithTranslation {
 
     /**
      * The {@code JitsiConference} for the current conference.
      */
-    _conference: Object,
-
-    /**
-     * The redux representation of the live stremaing to be stopped.
-     */
-    _session: Object,
+    _conference: IJitsiConference;
 
     /**
-     * Invoked to obtain translated strings.
+     * The redux representation of the live streaming to be stopped.
      */
-    t: Function
-};
+    _session: { id: string; };
+}
 
 /**
  * A React Component for confirming the participant wishes to stop the currently
@@ -37,22 +31,20 @@ type Props = {
  *
  * @augments Component
  */
-export default class AbstractStopLiveStreamDialog extends Component<Props> {
+export default class AbstractStopLiveStreamDialog extends Component<IProps> {
     /**
      * Initializes a new {@code StopLiveStreamDialog} instance.
      *
      * @param {Object} props - The read-only properties with which the new
      * instance is to be initialized.
      */
-    constructor(props: Props) {
+    constructor(props: IProps) {
         super(props);
 
         // Bind event handler so it is only bound once for every instance.
         this._onSubmit = this._onSubmit.bind(this);
     }
 
-    _onSubmit: () => boolean;
-
     /**
      * Callback invoked when stopping of live streaming is confirmed.
      *
@@ -83,7 +75,7 @@ export default class AbstractStopLiveStreamDialog extends Component<Props> {
  *     _session: Object
  * }}
  */
-export function _mapStateToProps(state: Object) {
+export function _mapStateToProps(state: IReduxState) {
     return {
         _conference: state['features/base/conference'].conference,
         _session: getActiveSession(state, JitsiRecordingConstants.mode.STREAM)

react/features/recording/components/LiveStream/AbstractStreamKeyForm.js → react/features/recording/components/LiveStream/AbstractStreamKeyForm.ts

@@ -1,64 +1,65 @@
-// @flow
-
+import { DebouncedFunc } from 'lodash';
 import debounce from 'lodash/debounce';
 import { Component } from 'react';
+import { WithTranslation } from 'react-i18next';
+
+import { IReduxState } from '../../../app/types';
 
 import { getLiveStreaming } from './functions';
 
 
 export type LiveStreaming = {
-    enabled: boolean,
-    helpLink: string, // Documentation reference for the live streaming feature.
-    termsLink: string, // Terms link
-    dataPrivacyLink: string, // Data privacy link
-    validatorRegExpString: string // RegExp string that validates the stream key input field
-}
+
+    // Terms link
+    dataPrivacyLink: string;
+    enabled: boolean;
+    helpLink: string;
+
+    // Documentation reference for the live streaming feature.
+    termsLink: string; // Data privacy link
+    validatorRegExpString: string; // RegExp string that validates the stream key input field
+};
 
 export type LiveStreamingProps = {
-    enabled: boolean,
-    helpURL: string,
-    termsURL: string,
-    dataPrivacyURL: string,
-    streamLinkRegexp: RegExp
-}
+    dataPrivacyURL: string;
+    enabled: boolean;
+    helpURL: string;
+    streamLinkRegexp: RegExp;
+    termsURL: string;
+};
 
 /**
  * The props of the component.
  */
-export type Props = {
+export interface IProps extends WithTranslation {
 
     /**
      * The live streaming dialog properties.
      */
-    _liveStreaming: LiveStreamingProps,
+    _liveStreaming: LiveStreamingProps;
 
     /**
      * Callback invoked when the entered stream key has changed.
      */
-    onChange: Function,
-
-    /**
-     * Invoked to obtain translated strings.
-     */
-    t: Function,
+    onChange: Function;
 
     /**
      * The stream key value to display as having been entered so far.
      */
-    value: string
-};
+    value: string;
+}
 
 /**
  * The state of the component.
  */
-type State = {
+interface IState {
 
     /**
      * Whether or not to show the warnings that the passed in value seems like
      * an improperly formatted stream key.
      */
-    showValidationError: boolean
-};
+    showValidationError: boolean;
+}
 
 /**
  * An abstract React Component for entering a key for starting a YouTube live
@@ -66,10 +67,10 @@ type State = {
  *
  * @augments Component
  */
-export default class AbstractStreamKeyForm<P: Props>
-    extends Component<P, State> {
+export default class AbstractStreamKeyForm<P extends IProps>
+    extends Component<P, IState> {
 
-    _debouncedUpdateValidationErrorVisibility: Function;
+    _debouncedUpdateValidationErrorVisibility: DebouncedFunc<() => void>;
 
     /**
      * Constructor for the component.
@@ -114,8 +115,6 @@ export default class AbstractStreamKeyForm<P: Props>
         this._debouncedUpdateValidationErrorVisibility.cancel();
     }
 
-    _onInputChange: Object => void;
-
     /**
      * Callback invoked when the value of the input field has updated through
      * user input. This forwards the value (string only, even if it was a dom
@@ -126,7 +125,7 @@ export default class AbstractStreamKeyForm<P: Props>
      * @private
      * @returns {void}
      */
-    _onInputChange(change) {
+    _onInputChange(change: any) {
         const value = typeof change === 'object' ? change.target.value : change;
 
         this.props.onChange(value);
@@ -174,7 +173,7 @@ export default class AbstractStreamKeyForm<P: Props>
  *     _liveStreaming: LiveStreamingProps
  * }}
  */
-export function _mapStateToProps(state: Object) {
+export function _mapStateToProps(state: IReduxState) {
     return {
         _liveStreaming: getLiveStreaming(state)
     };

react/features/recording/components/LiveStream/functions.js → react/features/recording/components/LiveStream/functions.ts

@@ -1,3 +1,5 @@
+import { IReduxState } from '../../../app/types';
+
 import {
     FOUR_GROUPS_DASH_SEPARATED,
     GOOGLE_PRIVACY_POLICY,
@@ -11,7 +13,7 @@ import {
  * @param {Object} state - The global state.
  * @returns {LiveStreaming}
  */
-export function getLiveStreaming(state: Object) {
+export function getLiveStreaming(state: IReduxState) {
     const { liveStreaming = {} } = state['features/base/config'];
 
     const regexp = liveStreaming.validatorRegExpString

react/features/shared-video/components/web/AbstractVideoManager.js → react/features/shared-video/components/web/AbstractVideoManager.ts

@@ -1,17 +1,19 @@
-/* @flow */
 /* eslint-disable no-invalid-this */
+// @ts-ignore
 import Logger from '@jitsi/logger';
 import throttle from 'lodash/throttle';
 import { PureComponent } from 'react';
 
-import { createSharedVideoEvent as createEvent, sendAnalytics } from '../../../analytics';
-import { getCurrentConference } from '../../../base/conference';
-import { MEDIA_TYPE } from '../../../base/media';
-import { getLocalParticipant } from '../../../base/participants';
-import { isLocalTrackMuted } from '../../../base/tracks';
-import { NOTIFICATION_TIMEOUT_TYPE } from '../../../notifications';
+import { createSharedVideoEvent as createEvent } from '../../../analytics/AnalyticsEvents';
+import { sendAnalytics } from '../../../analytics/functions';
+import { IReduxState } from '../../../app/types';
+import { getCurrentConference } from '../../../base/conference/functions';
+import { MEDIA_TYPE } from '../../../base/media/constants';
+import { getLocalParticipant } from '../../../base/participants/functions';
+import { isLocalTrackMuted } from '../../../base/tracks/functions';
 import { showWarningNotification } from '../../../notifications/actions';
-import { dockToolbox } from '../../../toolbox/actions.web';
+import { NOTIFICATION_TIMEOUT_TYPE } from '../../../notifications/constants';
+import { dockToolbox } from '../../../toolbox/actions';
 import { muteLocal } from '../../../video-menu/actions.any';
 import { setSharedVideoStatus, stopSharedVideo } from '../../actions.any';
 import { PLAYBACK_STATUSES } from '../../constants';
@@ -19,113 +21,115 @@ import { PLAYBACK_STATUSES } from '../../constants';
 const logger = Logger.getLogger(__filename);
 
 /**
- * Return true if the diffenrece between the two timees is larger than 5.
+ * Return true if the difference between the two times is larger than 5.
  *
  * @param {number} newTime - The current time.
  * @param {number} previousTime - The previous time.
  * @private
  * @returns {boolean}
 */
-function shouldSeekToPosition(newTime, previousTime) {
+function shouldSeekToPosition(newTime: number, previousTime: number) {
     return Math.abs(newTime - previousTime) > 5;
 }
 
 /**
  * The type of the React {@link PureComponent} props of {@link AbstractVideoManager}.
  */
-export type Props = {
+export interface IProps {
 
     /**
-     * The current coference.
+     * The current conference.
      */
-    _conference: Object,
+    _conference: Object;
 
     /**
      * Warning that indicates an incorrect video url.
      */
-    _displayWarning: Function,
+    _displayWarning: Function;
 
     /**
      * Docks the toolbox.
      */
-    _dockToolbox: Function,
-
-    /**
-     * Action to stop video sharing.
-    */
-    _stopSharedVideo: Function,
+    _dockToolbox: Function;
 
     /**
      * Indicates whether the local audio is muted.
     */
-    _isLocalAudioMuted: boolean,
+    _isLocalAudioMuted: boolean;
 
     /**
      * Is the video shared by the local user.
      *
      * @private
      */
-    _isOwner: boolean,
+    _isOwner: boolean;
 
     /**
-     * Store flag for muted state.
+     * Mutes local audio track.
      */
-    _muted: boolean,
+    _muteLocal: Function;
 
     /**
-     * Mutes local audio track.
+     * Store flag for muted state.
      */
-    _muteLocal: Function,
+    _muted: boolean;
 
     /**
      * The shared video owner id.
      */
-    _ownerId: string,
+    _ownerId: string;
 
     /**
      * Updates the shared video status.
      */
-    _setSharedVideoStatus: Function,
+    _setSharedVideoStatus: Function;
 
     /**
      * The shared video status.
      */
-     _status: string,
+    _status: string;
+
+    /**
+     * Action to stop video sharing.
+    */
+    _stopSharedVideo: Function;
 
     /**
      * Seek time in seconds.
      *
      */
-    _time: number,
+    _time: number;
 
     /**
      * The video url.
      */
-     _videoUrl: string,
+    _videoUrl: string;
 
-     /**
+    /**
       * The video id.
       */
-     videoId: string
+    videoId: string;
 }
 
 /**
  * Manager of shared video.
  */
-class AbstractVideoManager extends PureComponent<Props> {
+class AbstractVideoManager extends PureComponent<IProps> {
     throttledFireUpdateSharedVideoEvent: Function;
 
     /**
      * Initializes a new instance of AbstractVideoManager.
      *
+     * @param {IProps} props - Component props.
      * @returns {void}
      */
-    constructor() {
-        super();
+    constructor(props: IProps) {
+        super(props);
 
         this.throttledFireUpdateSharedVideoEvent = throttle(this.fireUpdateSharedVideoEvent.bind(this), 5000);
 
         // selenium tests handler
+        // @ts-ignore
         window._sharedVideoPlayer = this;
     }
 
@@ -144,7 +148,7 @@ class AbstractVideoManager extends PureComponent<Props> {
      *
      * @inheritdoc
      */
-    componentDidUpdate(prevProps: Props) {
+    componentDidUpdate(prevProps: IProps) {
         const { _videoUrl } = this.props;
 
         if (prevProps._videoUrl !== _videoUrl) {
@@ -212,7 +216,7 @@ class AbstractVideoManager extends PureComponent<Props> {
      * @param {Object|undefined} e - The error returned by the API or none.
      * @returns {void}
      */
-    onError(e) {
+    onError(e: any) {
         logger.error('Error in the video player', e?.data,
             e?.data ? 'Check error code at https://developers.google.com/youtube/iframe_api_reference#onError' : '');
         this.props._stopSharedVideo();
@@ -347,7 +351,7 @@ class AbstractVideoManager extends PureComponent<Props> {
     /**
      * Indicates the playback state of the video.
      */
-    getPlaybackStatus: () => boolean;
+    getPlaybackStatus: () => string;
 
     /**
      * Indicates whether the video is muted.
@@ -397,9 +401,9 @@ export default AbstractVideoManager;
  * Maps part of the Redux store to the props of this component.
  *
  * @param {Object} state - The Redux state.
- * @returns {Props}
+ * @returns {IProps}
  */
-export function _mapStateToProps(state: Object) {
+export function _mapStateToProps(state: IReduxState) {
     const { ownerId, status, time, videoUrl, muted } = state['features/shared-video'];
     const localParticipant = getLocalParticipant(state);
     const _isLocalAudioMuted = isLocalTrackMuted(state['features/base/tracks'], MEDIA_TYPE.AUDIO);
@@ -407,7 +411,7 @@ export function _mapStateToProps(state: Object) {
     return {
         _conference: getCurrentConference(state),
         _isLocalAudioMuted,
-        _isOwner: ownerId === localParticipant.id,
+        _isOwner: ownerId === localParticipant?.id,
         _muted: muted,
         _ownerId: ownerId,
         _status: status,
@@ -420,25 +424,25 @@ export function _mapStateToProps(state: Object) {
  * Maps part of the props of this component to Redux actions.
  *
  * @param {Function} dispatch - The Redux dispatch function.
- * @returns {Props}
+ * @returns {IProps}
  */
-export function _mapDispatchToProps(dispatch: Function): $Shape<Props> {
+export function _mapDispatchToProps(dispatch: Function) {
     return {
         _displayWarning: () => {
             dispatch(showWarningNotification({
                 titleKey: 'dialog.shareVideoLinkError'
             }, NOTIFICATION_TIMEOUT_TYPE.LONG));
         },
-        _dockToolbox: value => {
+        _dockToolbox: (value: boolean) => {
             dispatch(dockToolbox(value));
         },
         _stopSharedVideo: () => {
             dispatch(stopSharedVideo());
         },
-        _muteLocal: value => {
+        _muteLocal: (value: boolean) => {
             dispatch(muteLocal(value, MEDIA_TYPE.AUDIO));
         },
-        _setSharedVideoStatus: ({ videoUrl, status, time, ownerId, muted }) => {
+        _setSharedVideoStatus: ({ videoUrl, status, time, ownerId, muted }: any) => {
             dispatch(setSharedVideoStatus({
                 videoUrl,
                 status,

react/features/welcome/components/AbstractWelcomePage.js → react/features/welcome/components/AbstractWelcomePage.ts

@@ -1,69 +1,69 @@
-// @flow
-
+// @ts-expect-error
 import { generateRoomWithoutSeparator } from '@jitsi/js-utils/random';
 import { Component } from 'react';
-import type { Dispatch } from 'redux';
 
-import { createWelcomePageEvent, sendAnalytics } from '../../analytics';
+import { createWelcomePageEvent } from '../../analytics/AnalyticsEvents';
+import { sendAnalytics } from '../../analytics/functions';
 import { appNavigate } from '../../app/actions';
+import { IReduxState, IStore } from '../../app/types';
 import { IDeeplinkingConfig } from '../../base/config/configType';
 import isInsecureRoomName from '../../base/util/isInsecureRoomName';
-import { isCalendarEnabled } from '../../calendar-sync';
+import { isCalendarEnabled } from '../../calendar-sync/functions';
 import { isRecentListEnabled } from '../../recent-list/functions';
 
 /**
  * {@code AbstractWelcomePage}'s React {@code Component} prop types.
  */
-export type Props = {
+export interface IProps {
 
     /**
      * Whether the calendar functionality is enabled or not.
      */
-    _calendarEnabled: boolean,
+    _calendarEnabled: boolean;
 
     /**
      * The deeplinking config.
      */
-    _deeplinkingCfg: IDeeplinkingConfig,
+    _deeplinkingCfg: IDeeplinkingConfig;
 
     /**
      * Whether the insecure room name functionality is enabled or not.
      */
-    _enableInsecureRoomNameWarning: boolean,
+    _enableInsecureRoomNameWarning: boolean;
 
     /**
      * URL for the moderated rooms microservice, if available.
      */
-    _moderatedRoomServiceUrl: ?string,
+    _moderatedRoomServiceUrl?: string;
 
     /**
      * Whether the recent list is enabled.
      */
-    _recentListEnabled: Boolean,
+    _recentListEnabled: Boolean;
 
     /**
      * Room name to join to.
      */
-    _room: string,
+    _room: string;
 
     /**
      * The current settings.
      */
-    _settings: Object,
+    _settings: Object;
 
     /**
      * The Redux dispatch Function.
      */
-    dispatch: Dispatch<any>
-};
+    dispatch: IStore['dispatch'];
+}
 
 /**
  * Base (abstract) class for container component rendering the welcome page.
  *
  * @abstract
  */
-export class AbstractWelcomePage<P: Props> extends Component<P, *> {
-    _mounted: ?boolean;
+export class AbstractWelcomePage<P extends IProps> extends Component<P> {
+    _mounted: boolean | undefined;
 
     /**
      * Save room name into component's local state.
@@ -71,7 +71,7 @@ export class AbstractWelcomePage<P: Props> extends Component<P, *> {
      * @type {Object}
      * @property {number|null} animateTimeoutId - Identifier of the letter
      * animation timeout.
-     * @property {string} generatedRoomname - Automatically generated room name.
+     * @property {string} generatedRoomName - Automatically generated room name.
      * @property {string} room - Room name.
      * @property {string} roomPlaceholder - Room placeholder that's used as a
      * placeholder for input.
@@ -80,7 +80,7 @@ export class AbstractWelcomePage<P: Props> extends Component<P, *> {
      */
     state = {
         animateTimeoutId: undefined,
-        generatedRoomname: '',
+        generatedRoomName: '',
         insecureRoomName: false,
         joining: false,
         room: '',
@@ -98,12 +98,12 @@ export class AbstractWelcomePage<P: Props> extends Component<P, *> {
         super(props);
 
         // Bind event handlers so they are only bound once per instance.
-        this._animateRoomnameChanging
-            = this._animateRoomnameChanging.bind(this);
+        this._animateRoomNameChanging
+            = this._animateRoomNameChanging.bind(this);
         this._onJoin = this._onJoin.bind(this);
         this._onRoomChange = this._onRoomChange.bind(this);
         this._renderInsecureRoomNameWarning = this._renderInsecureRoomNameWarning.bind(this);
-        this._updateRoomname = this._updateRoomname.bind(this);
+        this._updateRoomName = this._updateRoomName.bind(this);
     }
 
     /**
@@ -128,8 +128,6 @@ export class AbstractWelcomePage<P: Props> extends Component<P, *> {
         this._mounted = false;
     }
 
-    _animateRoomnameChanging: (string) => void;
-
     /**
      * Animates the changing of the room name.
      *
@@ -138,7 +136,7 @@ export class AbstractWelcomePage<P: Props> extends Component<P, *> {
      * @private
      * @returns {void}
      */
-    _animateRoomnameChanging(word: string) {
+    _animateRoomNameChanging(word: string) {
         let animateTimeoutId;
         const roomPlaceholder = this.state.roomPlaceholder + word.substr(0, 1);
 
@@ -146,7 +144,7 @@ export class AbstractWelcomePage<P: Props> extends Component<P, *> {
             animateTimeoutId
                 = setTimeout(
                     () => {
-                        this._animateRoomnameChanging(
+                        this._animateRoomNameChanging(
                             word.substring(1, word.length));
                     },
                     70);
@@ -164,8 +162,8 @@ export class AbstractWelcomePage<P: Props> extends Component<P, *> {
      * @returns {void}
      */
     _clearTimeouts() {
-        clearTimeout(this.state.animateTimeoutId);
-        clearTimeout(this.state.updateTimeoutId);
+        this.state.animateTimeoutId && clearTimeout(this.state.animateTimeoutId);
+        this.state.updateTimeoutId && clearTimeout(this.state.updateTimeoutId);
     }
 
     /**
@@ -173,9 +171,7 @@ export class AbstractWelcomePage<P: Props> extends Component<P, *> {
      *
      * @returns {ReactElement}
      */
-    _doRenderInsecureRoomNameWarning: () => React$Component<any>;
-
-    _onJoin: () => void;
+    _doRenderInsecureRoomNameWarning: () => React.Component<any>;
 
     /**
      * Handles joining. Either by clicking on 'Join' button
@@ -185,7 +181,7 @@ export class AbstractWelcomePage<P: Props> extends Component<P, *> {
      * @returns {void}
      */
     _onJoin() {
-        const room = this.state.room || this.state.generatedRoomname;
+        const room = this.state.room || this.state.generatedRoomName;
 
         sendAnalytics(
             createWelcomePageEvent('clicked', 'joinButton', {
@@ -206,8 +202,6 @@ export class AbstractWelcomePage<P: Props> extends Component<P, *> {
         }
     }
 
-    _onRoomChange: (string) => void;
-
     /**
      * Handles 'change' event for the room name text input field.
      *
@@ -223,8 +217,6 @@ export class AbstractWelcomePage<P: Props> extends Component<P, *> {
         });
     }
 
-    _renderInsecureRoomNameWarning: () => React$Component<any>;
-
     /**
      * Renders the insecure room name warning if needed.
      *
@@ -238,8 +230,6 @@ export class AbstractWelcomePage<P: Props> extends Component<P, *> {
         return null;
     }
 
-    _updateRoomname: () => void;
-
     /**
      * Triggers the generation of a new room name and initiates an animation of
      * its changing.
@@ -247,19 +237,19 @@ export class AbstractWelcomePage<P: Props> extends Component<P, *> {
      * @protected
      * @returns {void}
      */
-    _updateRoomname() {
-        const generatedRoomname = generateRoomWithoutSeparator();
+    _updateRoomName() {
+        const generatedRoomName = generateRoomWithoutSeparator();
         const roomPlaceholder = '';
-        const updateTimeoutId = setTimeout(this._updateRoomname, 10000);
+        const updateTimeoutId = setTimeout(this._updateRoomName, 10000);
 
         this._clearTimeouts();
         this.setState(
             {
-                generatedRoomname,
+                generatedRoomName,
                 roomPlaceholder,
                 updateTimeoutId
             },
-            () => this._animateRoomnameChanging(generatedRoomname));
+            () => this._animateRoomNameChanging(generatedRoomName));
     }
 }
 
@@ -269,9 +259,9 @@ export class AbstractWelcomePage<P: Props> extends Component<P, *> {
  *
  * @param {Object} state - The redux state.
  * @protected
- * @returns {Props}
+ * @returns {IProps}
  */
-export function _mapStateToProps(state: Object) {
+export function _mapStateToProps(state: IReduxState) {
     return {
         _calendarEnabled: isCalendarEnabled(state),
         _deeplinkingCfg: state['features/base/config'].deeplinking || {},