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

react/features/base/media/components/AbstractAudio.ts

@@ -1,5 +1,3 @@
-// @flow
-
 import { Component } from 'react';
 
 import logger from '../logger';
@@ -9,11 +7,11 @@ import logger from '../logger';
  * playback.
  */
 export type AudioElement = {
-    currentTime: number,
-    pause: () => void,
-    play: () => void,
-    setSinkId?: string => Function,
-    stop: () => void
+    currentTime: number;
+    pause: () => void;
+    play: () => void;
+    setSinkId?: (id: string) => Promise<any>;
+    stop: () => void;
 };
 
 /**
@@ -21,11 +19,13 @@ export type AudioElement = {
  */
 type Props = {
 
+    loop?: boolean;
+
     /**
      * A callback which will be called with {@code AbstractAudio} instance once
      * the audio element is loaded.
      */
-    setRef?: ?AudioElement => void,
+    setRef?: (ref?: any) => void;
 
     /**
      * The URL of a media resource to use in the element.
@@ -35,10 +35,9 @@ type Props = {
      *
      * @type {Object | string}
      */
-    src: Object | string,
-    stream?: Object,
-    loop?: ?boolean
-}
+    src: Object | string;
+    stream?: Object;
+};
 
 /**
  * The React {@link Component} which is similar to Web's
@@ -49,7 +48,7 @@ export default class AbstractAudio extends Component<Props> {
      * The {@link AudioElement} instance which implements the audio playback
      * functionality.
      */
-    _audioElementImpl: ?AudioElement;
+    _audioElementImpl: AudioElement | undefined;
 
     /**
      * Initializes a new {@code AbstractAudio} instance.
@@ -71,7 +70,7 @@ export default class AbstractAudio extends Component<Props> {
      * @returns {void}
      */
     pause(): void {
-        this._audioElementImpl && this._audioElementImpl.pause();
+        this._audioElementImpl?.pause();
     }
 
     /**
@@ -81,11 +80,9 @@ export default class AbstractAudio extends Component<Props> {
      * @returns {void}
      */
     play(): void {
-        this._audioElementImpl && this._audioElementImpl.play();
+        this._audioElementImpl?.play();
     }
 
-    setAudioElementImpl: ?AudioElement => void;
-
     /**
      * Set the (reference to the) {@link AudioElement} object which implements
      * the audio playback functionality.
@@ -95,13 +92,12 @@ export default class AbstractAudio extends Component<Props> {
      * @protected
      * @returns {void}
      */
-    setAudioElementImpl(element: ?AudioElement): void {
+    setAudioElementImpl(element?: AudioElement): void {
         this._audioElementImpl = element;
 
         // setRef
         const { setRef } = this.props;
 
-        // $FlowFixMe
         typeof setRef === 'function' && setRef(element ? this : null);
     }
 
@@ -126,6 +122,6 @@ export default class AbstractAudio extends Component<Props> {
      * @returns {void}
      */
     stop(): void {
-        this._audioElementImpl && this._audioElementImpl.stop();
+        this._audioElementImpl?.stop();
     }
 }

react/features/base/media/components/AbstractVideoTrack.tsx

@@ -1,11 +1,10 @@
-/* @flow */
-
 import React, { Component } from 'react';
-import type { Dispatch } from 'redux';
 
-import { trackVideoStarted } from '../../tracks';
+import { IStore } from '../../../app/types';
+import { trackVideoStarted } from '../../tracks/actions';
 import { shouldRenderVideoTrack } from '../functions';
 
+// @ts-ignore
 import { Video } from './_';
 
 /**
@@ -16,36 +15,36 @@ export type Props = {
     /**
      * The Redux dispatch function.
      */
-    dispatch: Dispatch<any>,
+    dispatch: IStore['dispatch'];
 
     /**
      * Callback to invoke when the {@link Video} of {@code AbstractVideoTrack}
      * is clicked/pressed.
      */
-    onPress?: Function,
+    onPress?: Function;
 
     /**
      * The Redux representation of the participant's video track.
      */
-    videoTrack?: Object,
+    videoTrack?: any;
 
     /**
      * Whether or not video should be rendered after knowing video playback has
      * started.
      */
-    waitForVideoStarted?: boolean,
+    waitForVideoStarted?: boolean;
 
     /**
      * The z-order of the Video of AbstractVideoTrack in the stacking space of
      * all Videos. For more details, refer to the zOrder property of the Video
      * class for React Native.
      */
-    zOrder?: number,
+    zOrder?: number;
 
     /**
      * Indicates whether zooming (pinch to zoom and/or drag) is enabled.
      */
-    zoomEnabled?: boolean
+    zoomEnabled?: boolean;
 };
 
 /**
@@ -54,7 +53,7 @@ export type Props = {
  *
  * @abstract
  */
-export default class AbstractVideoTrack<P: Props> extends Component<P> {
+export default class AbstractVideoTrack<P extends Props> extends Component<P> {
     /**
      * Initializes a new AbstractVideoTrack instance.
      *
@@ -113,7 +112,7 @@ export default class AbstractVideoTrack<P: Props> extends Component<P> {
 
         return (
             <Video
-                mirror = { videoTrack && videoTrack.mirror }
+                mirror = { videoTrack?.mirror }
                 onPlaying = { this._onVideoPlaying }
                 onPress = { this.props.onPress }
                 stream = { stream }
@@ -122,8 +121,6 @@ export default class AbstractVideoTrack<P: Props> extends Component<P> {
         );
     }
 
-    _onVideoPlaying: () => void;
-
     /**
      * Handler for case when video starts to play.
      *
@@ -147,6 +144,6 @@ export default class AbstractVideoTrack<P: Props> extends Component<P> {
  * @returns {*} If the specified value is falsy, null; otherwise, the specified
  * value.
  */
-function _falsy2null(value) {
+function _falsy2null(value: any) {
     return value || null;
 }

react/features/base/react/components/AbstractPage.ts

@@ -1,5 +1,3 @@
-// @flow
-
 import { Component } from 'react';
 
 /**

react/features/base/testing/components/AbstractTestHint.ts

@@ -1,5 +1,4 @@
-/* @flow */
-
+import { IReduxState } from '../../../app/types';
 import { isTestModeEnabled } from '../functions';
 
 /**
@@ -17,25 +16,25 @@ export type TestHintProps = {
      * {@link TestHint} Components are rendered only if this flag is set to
      * {@code true}.
      */
-    _testModeEnabled: boolean,
+    _testModeEnabled: boolean;
 
     /**
      * The test hint's identifier string. Must be unique in the app instance
      * scope.
      */
-    id: string,
+    id: string;
 
     /**
      * The optional "on press" handler which can be used to bind a click handler
      * to a {@link TestHint}.
      */
-    onPress: ?Function,
+    onPress?: Function;
 
     /**
      * The test hint's (text) value which is to be consumed by the tests.
      */
-    value: string
-}
+    value: string;
+};
 
 /**
  * Maps (parts of) the redux state to {@link TestHint}'s React {@code Component}
@@ -47,7 +46,7 @@ export type TestHintProps = {
  *     _testModeEnabled: boolean
  * }}
  */
-export function _mapStateToProps(state: Object) {
+export function _mapStateToProps(state: IReduxState) {
     return {
 
         /**

react/features/conference/components/AbstractConference.ts

@@ -1,9 +1,8 @@
-// @flow
-
 import React, { Component } from 'react';
 
+import { IReduxState } from '../../app/types';
 import { NotificationsContainer } from '../../notifications/components';
-import { shouldDisplayTileView } from '../../video-layout';
+import { shouldDisplayTileView } from '../../video-layout/functions.any';
 import { shouldDisplayNotifications } from '../functions';
 
 /**
@@ -17,7 +16,7 @@ export type AbstractProps = {
      * @protected
      * @type {boolean}
      */
-    _notificationsVisible: boolean,
+    _notificationsVisible: boolean;
 
     /**
      * Conference room name.
@@ -25,7 +24,7 @@ export type AbstractProps = {
      * @protected
      * @type {string}
      */
-    _room: string,
+    _room: string;
 
     /**
      * Whether or not the layout should change to support tile view mode.
@@ -33,7 +32,7 @@ export type AbstractProps = {
      * @protected
      * @type {boolean}
      */
-    _shouldDisplayTileView: boolean
+    _shouldDisplayTileView: boolean;
 };
 
 /**
@@ -42,7 +41,7 @@ export type AbstractProps = {
  *
  * @augments Component
  */
-export class AbstractConference<P: AbstractProps, S>
+export class AbstractConference<P extends AbstractProps, S>
     extends Component<P, S> {
 
     /**
@@ -53,7 +52,7 @@ export class AbstractConference<P: AbstractProps, S>
      * @protected
      * @returns {React$Element}
      */
-    renderNotificationsContainer(props: ?Object) {
+    renderNotificationsContainer(props?: any) {
         if (this.props._notificationsVisible) {
             return (
                 React.createElement(NotificationsContainer, props)
@@ -72,7 +71,7 @@ export class AbstractConference<P: AbstractProps, S>
  * @private
  * @returns {AbstractProps}
  */
-export function abstractMapStateToProps(state: Object) {
+export function abstractMapStateToProps(state: IReduxState) {
     return {
         _notificationsVisible: shouldDisplayNotifications(state),
         _room: state['features/base/conference'].room,

react/features/lobby/components/AbstractLobbyScreen.tsx

@@ -1,13 +1,15 @@
-// @flow
-// eslint-disable-next-line no-unused-vars
 import React, { PureComponent } from 'react';
 
-import { conferenceWillJoin, getConferenceName } from '../../base/conference';
+import { IReduxState } from '../../app/types';
+import { conferenceWillJoin } from '../../base/conference/actions';
+import { getConferenceName } from '../../base/conference/functions';
+import { IJitsiConference } from '../../base/conference/reducer';
 import { getSecurityUiConfig } from '../../base/config/functions.any';
-import { INVITE_ENABLED, getFeatureFlag } from '../../base/flags';
-import { getLocalParticipant } from '../../base/participants';
-import { getFieldValue } from '../../base/react';
-import { updateSettings } from '../../base/settings';
+import { INVITE_ENABLED } from '../../base/flags/constants';
+import { getFeatureFlag } from '../../base/flags/functions';
+import { getLocalParticipant } from '../../base/participants/functions';
+import { getFieldValue } from '../../base/react/functions';
+import { updateSettings } from '../../base/settings/actions';
 import { isDeviceStatusVisible } from '../../prejoin/functions';
 import { cancelKnocking, joinWithPassword, onSendMessage, setPasswordJoinFailed, startKnocking } from '../actions';
 
@@ -22,47 +24,47 @@ export type Props = {
     /**
      * Indicates whether the device status should be visible.
      */
-    _deviceStatusVisible: boolean,
-
-    /**
-     * True if knocking is already happening, so we're waiting for a response.
-     */
-    _knocking: boolean,
-
-    /**
-    * Lobby messages between moderator and the participant.
-    */
-    _lobbyChatMessages: Object,
-
-    /**
-     * Name of the lobby chat recipient.
-     */
-    _lobbyMessageRecipient: string,
+    _deviceStatusVisible: boolean;
 
     /**
      * True if moderator initiated a chat session with the participant.
      */
-    _isLobbyChatActive: boolean,
+    _isLobbyChatActive: boolean;
+
+    /**
+     * True if knocking is already happening, so we're waiting for a response.
+     */
+    _knocking: boolean;
+
+    /**
+    * Lobby messages between moderator and the participant.
+    */
+    _lobbyChatMessages: Object;
+
+    /**
+     * Name of the lobby chat recipient.
+     */
+    _lobbyMessageRecipient: string;
 
     /**
      * The name of the meeting we're about to join.
      */
-    _meetingName: string,
+    _meetingName: string;
 
     /**
      * The members only conference if any,.
      */
-    _membersOnlyConference: Object,
+    _membersOnlyConference: IJitsiConference;
 
     /**
      * The email of the participant about to knock/join.
      */
-    _participantEmail: string,
+    _participantEmail: string;
 
     /**
      * The id of the participant about to knock/join. This is the participant ID in the lobby room, at this point.
      */
-    _participantId: string,
+    _participantId: string;
 
     /**
      * The name of the participant about to knock/join.
@@ -72,27 +74,27 @@ export type Props = {
     /**
      * True if a recent attempt to join with password failed.
      */
-    _passwordJoinFailed: boolean,
+    _passwordJoinFailed: boolean;
 
     /**
      * True if the password field should be available for lobby participants.
      */
-     _renderPassword: boolean,
+    _renderPassword: boolean;
 
     /**
      * The Redux dispatch function.
      */
-    dispatch: Function,
+    dispatch: Function;
 
     /**
      * Indicates whether the copy url button should be shown.
      */
-    showCopyUrlButton: boolean,
+    showCopyUrlButton: boolean;
 
     /**
      * Function to be used to translate i18n labels.
      */
-    t: Function
+    t: Function;
 };
 
 type State = {
@@ -100,38 +102,38 @@ type State = {
     /**
      * The display name value entered into the field.
      */
-    displayName: string,
+    displayName: string;
 
     /**
      * The email value entered into the field.
      */
-    email: string,
+    email: string;
 
     /**
      * True if lobby chat widget is open.
      */
-    isChatOpen: boolean,
+    isChatOpen: boolean;
 
     /**
      * The password value entered into the field.
      */
-    password: string,
+    password: string;
 
     /**
      * True if a recent attempt to join with password failed.
      */
-    passwordJoinFailed: boolean,
+    passwordJoinFailed: boolean;
 
     /**
      * The state of the screen. One of {@code SCREEN_STATES[*]}.
      */
-    screenState: number
-}
+    screenState: number;
+};
 
 /**
  * Abstract class to encapsulate the platform common code of the {@code LobbyScreen}.
  */
-export default class AbstractLobbyScreen<P: Props = Props> extends PureComponent<P, State> {
+export default class AbstractLobbyScreen<P extends Props = Props> extends PureComponent<P, State> {
     /**
      * Instantiates a new component.
      *
@@ -192,8 +194,6 @@ export default class AbstractLobbyScreen<P: Props = Props> extends PureComponent
             : passwordPrompt ? 'lobby.enterPasswordTitle' : 'lobby.joinTitle';
     }
 
-    _onAskToJoin: () => void;
-
     /**
      * Callback to be invoked when the user submits the joining request.
      *
@@ -209,8 +209,6 @@ export default class AbstractLobbyScreen<P: Props = Props> extends PureComponent
         return false;
     }
 
-    _onCancel: () => boolean;
-
     /**
      * Callback to be invoked when the user cancels the dialog.
      *
@@ -223,15 +221,13 @@ export default class AbstractLobbyScreen<P: Props = Props> extends PureComponent
         return true;
     }
 
-    _onChangeDisplayName: Object => void;
-
     /**
      * Callback to be invoked when the user changes its display name.
      *
      * @param {SyntheticEvent} event - The SyntheticEvent instance of the change.
      * @returns {void}
      */
-    _onChangeDisplayName(event) {
+    _onChangeDisplayName(event: { target: { value: string; }; } | string) {
         const displayName = getFieldValue(event);
 
         this.setState({
@@ -243,15 +239,13 @@ export default class AbstractLobbyScreen<P: Props = Props> extends PureComponent
         });
     }
 
-    _onChangeEmail: Object => void;
-
     /**
      * Callback to be invoked when the user changes its email.
      *
      * @param {SyntheticEvent} event - The SyntheticEvent instance of the change.
      * @returns {void}
      */
-    _onChangeEmail(event) {
+    _onChangeEmail(event: { target: { value: string; }; } | string) {
         const email = getFieldValue(event);
 
         this.setState({
@@ -263,22 +257,18 @@ export default class AbstractLobbyScreen<P: Props = Props> extends PureComponent
         });
     }
 
-    _onChangePassword: Object => void;
-
     /**
      * Callback to be invoked when the user changes the password.
      *
      * @param {SyntheticEvent} event - The SyntheticEvent instance of the change.
      * @returns {void}
      */
-    _onChangePassword(event) {
+    _onChangePassword(event: { target: { value: string; }; } | string) {
         this.setState({
             password: getFieldValue(event)
         });
     }
 
-    _onEnableEdit: () => void;
-
     /**
      * Callback to be invoked for the edit button.
      *
@@ -290,8 +280,6 @@ export default class AbstractLobbyScreen<P: Props = Props> extends PureComponent
         });
     }
 
-    _onJoinWithPassword: () => void;
-
     /**
      * Callback to be invoked when the user tries to join using a preset password.
      *
@@ -304,20 +292,16 @@ export default class AbstractLobbyScreen<P: Props = Props> extends PureComponent
         this.props.dispatch(joinWithPassword(this.state.password));
     }
 
-    _onSendMessage: () => void;
-
     /**
      * Callback to be invoked for sending lobby chat messages.
      *
      * @param {string} message - Message to be sent.
      * @returns {void}
      */
-    _onSendMessage(message) {
+    _onSendMessage(message: string) {
         this.props.dispatch(onSendMessage(message));
     }
 
-    _onSwitchToKnockMode: () => void;
-
     /**
      * Callback to be invoked for the enter (go back to) knocking mode button.
      *
@@ -334,8 +318,6 @@ export default class AbstractLobbyScreen<P: Props = Props> extends PureComponent
         this.props.dispatch(conferenceWillJoin(this.props._membersOnlyConference));
     }
 
-    _onSwitchToPasswordMode: () => void;
-
     /**
      * Callback to be invoked for the enter password button.
      *
@@ -347,8 +329,6 @@ export default class AbstractLobbyScreen<P: Props = Props> extends PureComponent
         });
     }
 
-    _onToggleChat: () => void;
-
     /**
      * Callback to be invoked for toggling lobby chat visibility.
      *
@@ -393,42 +373,42 @@ export default class AbstractLobbyScreen<P: Props = Props> extends PureComponent
      *
      * @returns {React$Element}
      */
-    _renderJoining: () => React$Element<*>;
+    _renderJoining: () => React.ReactElement;
 
     /**
      * Renders the participant form to let the knocking participant enter its details.
      *
      * @returns {React$Element}
      */
-    _renderParticipantForm: () => React$Element<*>;
+    _renderParticipantForm: () => React.ReactElement;
 
     /**
      * Renders the participant info fragment when we have all the required details of the user.
      *
      * @returns {React$Element}
      */
-    _renderParticipantInfo: () => React$Element<*>;
+    _renderParticipantInfo: () => React.ReactElement;
 
     /**
      * Renders the password form to let the participant join by using a password instead of knocking.
      *
      * @returns {React$Element}
      */
-    _renderPasswordForm: () => React$Element<*>;
+    _renderPasswordForm: () => React.ReactElement;
 
     /**
      * Renders the password join button (set).
      *
      * @returns {React$Element}
      */
-    _renderPasswordJoinButtons: () => React$Element<*>;
+    _renderPasswordJoinButtons: () => React.ReactElement;
 
     /**
      * Renders the standard (pre-knocking) button set.
      *
      * @returns {React$Element}
      */
-    _renderStandardButtons: () => React$Element<*>;
+    _renderStandardButtons: () => React.ReactElement;
 }
 
 /**
@@ -437,7 +417,7 @@ export default class AbstractLobbyScreen<P: Props = Props> extends PureComponent
  * @param {Object} state - The Redux state.
  * @returns {Props}
  */
-export function _mapStateToProps(state: Object) {
+export function _mapStateToProps(state: IReduxState) {
     const localParticipant = getLocalParticipant(state);
     const participantId = localParticipant?.id;
     const inviteEnabledFlag = getFeatureFlag(state, INVITE_ENABLED, true);

react/features/notifications/components/index.native.ts

@@ -1,3 +1 @@
-// @flow
-
 export * from './native';

react/features/notifications/components/index.web.ts

@@ -1,3 +1 @@
-// @flow
-
 export * from './web';

react/features/notifications/components/native/index.ts

@@ -1,4 +1,2 @@
-// @flow
-
 export { default as Notification } from './Notification';
 export { default as NotificationsContainer } from './NotificationsContainer';

react/features/notifications/components/web/index.ts

@@ -1,4 +1,2 @@
-// @flow
-
 export { default as Notification } from './Notification';
 export { default as NotificationsContainer } from './NotificationsContainer';

react/features/recent-list/components/AbstractRecentList.tsx

@@ -1,20 +1,18 @@
-// @flow
-
 import React from 'react';
-import type { Dispatch } from 'redux';
 
-import {
-    createRecentClickedEvent,
-    createRecentSelectedEvent,
-    sendAnalytics
-} from '../../analytics';
+import { createRecentClickedEvent, createRecentSelectedEvent } from '../../analytics/AnalyticsEvents';
+import { sendAnalytics } from '../../analytics/functions';
 import { appNavigate } from '../../app/actions';
+import { IStore } from '../../app/types';
 import {
-    AbstractPage,
     Container,
     Text
-} from '../../base/react';
 
+    // @ts-ignore
+} from '../../base/react';
+import AbstractPage from '../../base/react/components/AbstractPage';
+
+// @ts-ignore
 import styles from './styles';
 
 /**
@@ -25,19 +23,19 @@ type Props = {
     /**
      * The redux store's {@code dispatch} function.
      */
-    dispatch: Dispatch<any>,
+    dispatch: IStore['dispatch'];
 
     /**
      * The translate function.
      */
-    t: Function
+    t: Function;
 };
 
 /**
  * An abstract component for the recent list.
  *
  */
-export default class AbstractRecentList<P: Props> extends AbstractPage<P> {
+export default class AbstractRecentList<P extends Props> extends AbstractPage<P> {
     /**
      * Initializes a new {@code RecentList} instance.
      *
@@ -60,8 +58,6 @@ export default class AbstractRecentList<P: Props> extends AbstractPage<P> {
         sendAnalytics(createRecentSelectedEvent());
     }
 
-    _getRenderListEmptyComponent: () => React$Node;
-
     /**
      * Returns a list empty component if a custom one has to be rendered instead
      * of the default one in the {@link NavigateSectionList}.
@@ -90,8 +86,6 @@ export default class AbstractRecentList<P: Props> extends AbstractPage<P> {
         );
     }
 
-    _onPress: string => void;
-
     /**
      * Handles the list's navigate action.
      *
@@ -99,7 +93,7 @@ export default class AbstractRecentList<P: Props> extends AbstractPage<P> {
      * @param {string} url - The url string to navigate to.
      * @returns {void}
      */
-    _onPress(url) {
+    _onPress(url: string) {
         const { dispatch } = this.props;
 
         sendAnalytics(createRecentClickedEvent('meeting.tile'));

react/features/recording/components/Recording/AbstractHighlightButton.ts

@@ -1,57 +1,54 @@
-// @flow
-
 import { Component } from 'react';
+import { WithTranslation } from 'react-i18next';
 
-import { getActiveSession, isHighlightMeetingMomentDisabled } from '../..';
-import { openDialog } from '../../../base/dialog';
+import { IReduxState, IStore } from '../../../app/types';
+import { openDialog } from '../../../base/dialog/actions';
 import { MEET_FEATURES } from '../../../base/jwt/constants';
 import { JitsiRecordingConstants } from '../../../base/lib-jitsi-meet';
 import { maybeShowPremiumFeatureDialog } from '../../../jaas/actions';
-import {
-    NOTIFICATION_TIMEOUT_TYPE,
-    NOTIFICATION_TYPE,
-    hideNotification,
-    showNotification
-} from '../../../notifications';
+import { hideNotification, showNotification } from '../../../notifications/actions';
+import { NOTIFICATION_TIMEOUT_TYPE, NOTIFICATION_TYPE } from '../../../notifications/constants';
 import { highlightMeetingMoment } from '../../actions.any';
+// eslint-disable-next-line lines-around-comment
+// @ts-ignore
 import { StartRecordingDialog } from '../../components';
 import { PROMPT_RECORDING_NOTIFICATION_ID } from '../../constants';
-import { getRecordButtonProps } from '../../functions';
+import { getActiveSession, getRecordButtonProps, isHighlightMeetingMomentDisabled } from '../../functions';
 
-export type Props = {
+export interface IProps extends WithTranslation {
 
     /**
      * Indicates whether or not the button is disabled.
      */
-    _disabled: boolean,
+    _disabled: boolean;
 
     /**
      * Indicates whether or not a highlight request is in progress.
      */
-    _isHighlightInProgress: boolean,
+    _isHighlightInProgress: boolean;
 
     /**
      * Indicates whether or not the button should be visible.
      */
-    _visible: boolean,
+    _visible: boolean;
 
     /**
-     * Invoked to obtain translated strings.
+     * Redux dispatch function.
      */
-    t: Function
-};
+    dispatch: IStore['dispatch'];
+}
 
 /**
  * Abstract class for the {@code AbstractHighlightButton} component.
  */
-export default class AbstractHighlightButton<P: Props> extends Component<P> {
+export default class AbstractHighlightButton<P extends IProps, S={}> extends Component<P, S> {
     /**
      * Initializes a new AbstractHighlightButton instance.
      *
      * @param {Object} props - The read-only properties with which the new
      * instance is to be initialized.
      */
-    constructor(props: Props) {
+    constructor(props: P) {
         super(props);
 
         this._onClick = this._onClick.bind(this);
@@ -105,7 +102,7 @@ export default class AbstractHighlightButton<P: Props> extends Component<P> {
  *     _visible: boolean
  * }}
  */
-export function _abstractMapStateToProps(state: Object) {
+export function _abstractMapStateToProps(state: IReduxState) {
     const isRecordingRunning = getActiveSession(state, JitsiRecordingConstants.mode.FILE);
     const isButtonDisabled = isHighlightMeetingMomentDisabled(state);
     const { webhookProxyUrl } = state['features/base/config'];

react/features/recording/components/Recording/web/HighlightButton.tsx

@@ -14,7 +14,7 @@ import Tooltip from '../../../../base/tooltip/components/Tooltip';
 import BaseTheme from '../../../../base/ui/components/BaseTheme.web';
 import { maybeShowPremiumFeatureDialog } from '../../../../jaas/actions';
 import AbstractHighlightButton, {
-    type Props as AbstractProps,
+    type IProps as AbstractProps,
     _abstractMapStateToProps
 
     // @ts-ignore
@@ -32,6 +32,8 @@ type Props = AbstractProps & {
      * Flag controlling visibility of the component.
      */
     _visible: boolean;
+
+    classes: any;
 };
 
 /**

react/features/shared-video/components/native/AbstractVideoManager.ts

@@ -1,98 +1,98 @@
-/* @flow */
-/* eslint-disable no-invalid-this */
-
 import throttle from 'lodash/throttle';
 import { PureComponent } from 'react';
 
-import { getCurrentConference } from '../../../base/conference';
-import { getLocalParticipant } from '../../../base/participants';
+import { IReduxState } from '../../../app/types';
+import { getCurrentConference } from '../../../base/conference/functions';
+import { IJitsiConference } from '../../../base/conference/reducer';
+import { getLocalParticipant } from '../../../base/participants/functions';
 import { setSharedVideoStatus } from '../../actions.any';
 import { PLAYBACK_STATUSES } from '../../constants';
 
 /**
- * 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 Component} props of {@link AbstractVideoManager}.
  */
-export type Props = {
+export interface IProps {
 
     /**
-     * The current coference.
+     * The current conference.
      */
-    _conference: Object,
+    _conference: IJitsiConference;
 
     /**
      * Is the video shared by the local user.
      *
      * @private
      */
-    _isOwner: boolean,
+    _isOwner: boolean;
 
     /**
      * The shared video owner id.
      */
-    _ownerId: string,
+    _ownerId: string;
 
     /**
      * The shared video status.
      */
-     _status: string,
+    _status: string;
 
     /**
      * Seek time in seconds.
      *
      */
-    _time: number,
+    _time: number;
 
     /**
      * The video url.
      */
-     _videoUrl: string,
+    _videoUrl: string;
 
     /**
      * The Redux dispatch function.
      */
-     dispatch: Function,
+    dispatch: Function;
 
     /**
       * The player's height.
     */
-    height: number,
+    height: number;
 
     /**
       * The video id.
     */
-    videoId: string,
+    videoId: string;
 
     /**
       * The player's width.
     */
-    width: number
+    width: number;
 }
 
 /**
  * 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);
     }
@@ -215,7 +215,7 @@ class AbstractVideoManager extends PureComponent<Props> {
     /**
      * Indicates the playback state of the video.
      */
-    getPlaybackStatus: () => boolean;
+    getPlaybackStatus: () => string;
 
     /**
      * Plays video.
@@ -245,15 +245,15 @@ 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): $Shape<Props> {
+export function _mapStateToProps(state: IReduxState) {
     const { ownerId, status, time, videoUrl } = state['features/shared-video'];
     const localParticipant = getLocalParticipant(state);
 
     return {
         _conference: getCurrentConference(state),
-        _isOwner: ownerId === localParticipant.id,
+        _isOwner: ownerId === localParticipant?.id,
         _ownerId: ownerId,
         _status: status,
         _time: time,

react/features/subtitles/components/AbstractCaptions.ts

@@ -1,7 +1,7 @@
-// @flow
-
 import { Component } from 'react';
 
+import { IReduxState } from '../../app/types';
+
 /**
  * {@code AbstractCaptions} Properties.
  */
@@ -10,21 +10,21 @@ export type AbstractCaptionsProps = {
     /**
      * Whether local participant is requesting to see subtitles.
      */
-    _requestingSubtitles: boolean,
+    _requestingSubtitles: boolean;
 
     /**
      * Transcript texts formatted with participant's name and final content.
      * Mapped by id just to have the keys for convenience during the rendering
      * process.
      */
-    _transcripts: ?Map<string, string>
+    _transcripts: Map<string, string>;
 };
 
 /**
  * Abstract React {@code Component} which can display speech-to-text results
  * from Jigasi as subtitles.
  */
-export class AbstractCaptions<P: AbstractCaptionsProps>
+export class AbstractCaptions<P extends AbstractCaptionsProps>
     extends Component<P> {
 
     /**
@@ -60,7 +60,7 @@ export class AbstractCaptions<P: AbstractCaptionsProps>
      * @protected
      * @returns {React$Element} - The React element which displays the text.
      */
-    _renderParagraph: (id: string, text: string) => React$Element<*>;
+    _renderParagraph: (id: string, text: string) => React.ReactElement;
 
     /**
      * Renders the subtitles container.
@@ -71,7 +71,7 @@ export class AbstractCaptions<P: AbstractCaptionsProps>
      * @protected
      * @returns {React$Element} - The subtitles container.
      */
-    _renderSubtitlesContainer: (Array<React$Element<*>>) => React$Element<*>;
+    _renderSubtitlesContainer: (el: Array<React.ReactElement>) => React.ReactElement;
 }
 
 /**
@@ -83,7 +83,7 @@ export class AbstractCaptions<P: AbstractCaptionsProps>
  * @returns {Map<string, string>} - Formatted transcript subtitles mapped by
  * transcript message IDs.
  */
-function _constructTranscripts(state: Object): Map<string, string> {
+function _constructTranscripts(state: IReduxState): Map<string, string> {
     const { _transcriptMessages } = state['features/subtitles'];
     const transcripts = new Map();
 
@@ -118,7 +118,7 @@ function _constructTranscripts(state: Object): Map<string, string> {
  *     _transcripts: Map<string, string>
  * }}
  */
-export function _abstractMapStateToProps(state: Object) {
+export function _abstractMapStateToProps(state: IReduxState) {
     const { _requestingSubtitles } = state['features/subtitles'];
     const transcripts = _constructTranscripts(state);
 

react/features/subtitles/reducer.ts

@@ -14,10 +14,17 @@ const defaultState = {
     _language: 'transcribing.subtitlesOff'
 };
 
+interface ITranscriptMessage {
+    final: string;
+    participantName: string;
+    stable: string;
+    unstable: string;
+}
+
 export interface ISubtitlesState {
     _language: string;
     _requestingSubtitles: boolean;
-    _transcriptMessages: Map<string, Object>;
+    _transcriptMessages: Map<string, ITranscriptMessage>;
 }
 
 /**
@@ -77,7 +84,7 @@ function _removeTranscriptMessage(state: ISubtitlesState, { transcriptMessageID
  * reduction of the specified action.
  */
 function _updateTranscriptMessage(state: ISubtitlesState, { transcriptMessageID, newTranscriptMessage }:
-    { newTranscriptMessage: Object; transcriptMessageID: string; }) {
+    { newTranscriptMessage: ITranscriptMessage; transcriptMessageID: string; }) {
     const newTranscriptMessages = new Map(state._transcriptMessages);
 
     // Updates the new message for the given key in the Map.