ref: move all prop type declaration to flow

For the most part the changes are taking the "static propTypes" declaration off
of components and declaring them as Flow types. Sometimes to support flow some
method signatures had to be added. There are some exceptions in which more had
to be done to tame the beast:
- AbstractVideoTrack: put in additional truthy checks for videoTrack.
- Video: add truthy checks for the _videoElement ref.
- shouldRenderVideoTrack function: Some component could pass null for the
  videoTrack argument and Flow wanted that called out explicitly.
- DisplayName: Add a truthy check for the input ref before acting on it.
- NumbersList: Move array checks inline for Flow to comprehend array methods
  could be called. Add type checks in the Object.entries loop as the value is
  assumed to be a mixed type by Flow.
- AbstractToolbarButton: add additional truthy check for passed in type.

react/features/audio-level-indicator/components/AudioLevelIndicator.js

@@ -1,4 +1,5 @@
-import PropTypes from 'prop-types';
+/* @flow */
+
 import React, { Component } from 'react';
 
 /**
@@ -14,26 +15,23 @@ const AUDIO_LEVEL_DOTS = 5;
 const CENTER_DOT_INDEX = Math.floor(AUDIO_LEVEL_DOTS / 2);
 
 /**
- * Creates a ReactElement responsible for drawing audio levels.
- *
- * @extends {Component}
+ * The type of the React {@code Component} props of {@link AudioLevelIndicator}.
  */
-class AudioLevelIndicator extends Component {
+type Props = {
+
     /**
-     * {@code AudioLevelIndicator}'s property types.
-     *
-     * @static
+     * The current audio level to display. The value should be a number between
+     * 0 and 1.
      */
-    static propTypes = {
-        /**
-         * The current audio level to display. The value should be a number
-         * between 0 and 1.
-         *
-         * @type {number}
-         */
-        audioLevel: PropTypes.number
-    };
+    audioLevel: number
+};
 
+/**
+ * Creates a ReactElement responsible for drawing audio levels.
+ *
+ * @extends {Component}
+ */
+class AudioLevelIndicator extends Component<Props> {
     /**
      * Implements React's {@link Component#render()}.
      *

react/features/authentication/components/LoginDialog.native.js

@@ -1,4 +1,5 @@
-import PropTypes from 'prop-types';
+/* @flow */
+
 import React, { Component } from 'react';
 import { Text, TextInput, View } from 'react-native';
 import { connect as reduxConnect } from 'react-redux';
@@ -11,6 +12,65 @@ import { JitsiConnectionErrors } from '../../base/lib-jitsi-meet';
 import { authenticateAndUpgradeRole, cancelLogin } from '../actions';
 import styles from './styles';
 
+/**
+ * The type of the React {@link Component} props of {@link LoginDialog}.
+ */
+type Props = {
+
+    /**
+     * {@link JitsiConference} that needs authentication - will hold a valid
+     * value in XMPP login + guest access mode.
+     */
+    _conference: Object,
+
+    /**
+     * The server hosts specified in the global config.
+     */
+    _configHosts: Object,
+
+    /**
+     * Indicates if the dialog should display "connecting" status message.
+     */
+    _connecting: boolean,
+
+    /**
+     * The error which occurred during login/authentication.
+     */
+    _error: Object,
+
+    /**
+     * The progress in the floating range between 0 and 1 of the authenticating
+     * and upgrading the role of the local participant/user.
+     */
+    _progress: number,
+
+    /**
+     * Redux store dispatch method.
+     */
+    dispatch: Dispatch<*>,
+
+    /**
+     * Invoked to obtain translated strings.
+     */
+    t: Function
+};
+
+/**
+ * The type of the React {@link Component} state of {@link LoginDialog}.
+ */
+type State = {
+
+    /**
+     * The user entered password for the conference.
+     */
+    password: string,
+
+    /**
+     * The user entered local participant name.
+     */
+    username: string
+};
+
 /**
  * Dialog asks user for username and password.
  *
@@ -38,58 +98,14 @@ import styles from './styles';
  * See {@link https://github.com/jitsi/jicofo#secure-domain} for a description
  * of the configuration parameters.
  */
-class LoginDialog extends Component {
-    /**
-     * LoginDialog component's property types.
-     *
-     * @static
-     */
-    static propTypes = {
-        /**
-         * {@link JitsiConference} that needs authentication - will hold a valid
-         * value in XMPP login + guest access mode.
-         */
-        _conference: PropTypes.object,
-
-        /**
-         *
-         */
-        _configHosts: PropTypes.object,
-
-        /**
-         * Indicates if the dialog should display "connecting" status message.
-         */
-        _connecting: PropTypes.bool,
-
-        /**
-         * The error which occurred during login/authentication.
-         */
-        _error: PropTypes.object,
-
-        /**
-         * The progress in the floating range between 0 and 1 of the
-         * authenticating and upgrading the role of the local participant/user.
-         */
-        _progress: PropTypes.number,
-
-        /**
-         * Redux store dispatch method.
-         */
-        dispatch: PropTypes.func,
-
-        /**
-         * Invoked to obtain translated strings.
-         */
-        t: PropTypes.func
-    };
-
+class LoginDialog extends Component<Props, State> {
     /**
      * Initializes a new LoginDialog instance.
      *
      * @param {Object} props - The read-only properties with which the new
      * instance is to be initialized.
      */
-    constructor(props) {
+    constructor(props: Props) {
         super(props);
 
         this.state = {
@@ -119,7 +135,7 @@ class LoginDialog extends Component {
         } = this.props;
 
         let messageKey;
-        let messageOptions;
+        const messageOptions = {};
 
         if (progress && progress < 1) {
             messageKey = 'connection.FETCH_SESSION_ID';
@@ -142,7 +158,6 @@ class LoginDialog extends Component {
                 }
             } else if (name) {
                 messageKey = 'dialog.connectErrorWithMsg';
-                messageOptions || (messageOptions = {});
                 messageOptions.msg = `${name} ${error.message}`;
             }
         }
@@ -170,7 +185,7 @@ class LoginDialog extends Component {
                     <Text style = { styles.dialogText }>
                         {
                             messageKey
-                                ? t(messageKey, messageOptions || {})
+                                ? t(messageKey, messageOptions)
                                 : connecting
                                     ? t('connection.CONNECTING')
                                     : ''
@@ -181,6 +196,8 @@ class LoginDialog extends Component {
         );
     }
 
+    _onUsernameChange: (string) => void;
+
     /**
      * Called when user edits the username.
      *
@@ -194,6 +211,8 @@ class LoginDialog extends Component {
         });
     }
 
+    _onPasswordChange: (string) => void;
+
     /**
      * Called when user edits the password.
      *
@@ -207,6 +226,8 @@ class LoginDialog extends Component {
         });
     }
 
+    _onCancel: () => void;
+
     /**
      * Notifies this LoginDialog that it has been dismissed by cancel.
      *
@@ -217,6 +238,8 @@ class LoginDialog extends Component {
         this.props.dispatch(cancelLogin());
     }
 
+    _onLogin: () => void;
+
     /**
      * Notifies this LoginDialog that the login button (OK) has been pressed by
      * the user.

react/features/base/dialog/components/DialogContainer.js

@@ -1,35 +1,35 @@
-import PropTypes from 'prop-types';
+/* @flow */
+
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
 /**
- * Implements a DialogContainer responsible for showing all dialogs. We will
- * need a separate container so we can handle multiple dialogs by showing them
- * simultaneously or queuing them.
+ * The type of the React {@code Component} props of {@link DialogContainer}.
  */
-export class DialogContainer extends Component {
+type Props = {
+
     /**
-     * DialogContainer component's property types.
-     *
-     * @static
+     * The component to render.
      */
-    static propTypes = {
-        /**
-         * The component to render.
-         */
-        _component: PropTypes.func,
+    _component: Function,
 
-        /**
-         * The props to pass to the component that will be rendered.
-         */
-        _componentProps: PropTypes.object,
+    /**
+     * The props to pass to the component that will be rendered.
+     */
+    _componentProps: Object,
 
-        /**
-         * True if the UI is in a compact state where we don't show dialogs.
-         */
-        _reducedUI: PropTypes.bool
-    };
+    /**
+     * True if the UI is in a compact state where we don't show dialogs.
+     */
+    _reducedUI: boolean
+};
 
+/**
+ * Implements a DialogContainer responsible for showing all dialogs. We will
+ * need a separate container so we can handle multiple dialogs by showing them
+ * simultaneously or queuing them.
+ */
+export class DialogContainer extends Component<Props> {
     /**
      * Implements React's {@link Component#render()}.
      *

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

@@ -1,4 +1,5 @@
-import PropTypes from 'prop-types';
+/* @flow */
+
 import React, { Component } from 'react';
 
 import { trackVideoStarted } from '../../tracks';
@@ -7,50 +8,70 @@ import { shouldRenderVideoTrack } from '../functions';
 import { Video } from './_';
 
 /**
- * Implements a React {@link Component} that renders video element for a
- * specific video track.
- *
- * @abstract
+ * The type of the React {@code Component} props of {@link AbstractVideoTrack}.
  */
-export default class AbstractVideoTrack extends Component {
+export type Props = {
+
     /**
-     * AbstractVideoTrack component's property types.
-     *
-     * @static
+     * The Redux dispatch function.
      */
-    static propTypes = {
-        dispatch: PropTypes.func,
+    dispatch: Dispatch<*>,
 
-        /**
-         * Callback to invoke when the {@link Video} of
-         * {@code AbstractVideoTrack} is clicked/pressed.
-         */
-        onPress: PropTypes.func,
+    /**
+     * Callback to invoke when the {@link Video} of {@code AbstractVideoTrack}
+     * is clicked/pressed.
+     */
+    onPress?: Function,
+
+    /**
+     * The Redux representation of the participant's video track.
+     */
+    videoTrack?: Object,
+
+    /**
+     * Whether or not video should be rendered after knowing video playback has
+     * started.
+     */
+    waitForVideoStarted?: boolean,
 
-        videoTrack: PropTypes.object,
+    /**
+     * 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,
 
-        waitForVideoStarted: PropTypes.bool,
+    /**
+     * Indicates whether zooming (pinch to zoom and/or drag) is enabled.
+     */
+    zoomEnabled?: 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: PropTypes.number,
+/**
+ * The type of the React {@code Component} state of {@link AbstractVideoTrack}.
+ */
+type State = {
 
-        /**
-         * Indicates whether zooming (pinch to zoom and/or drag) is enabled.
-         */
-        zoomEnabled: PropTypes.bool
-    };
+    /**
+     * The Redux representation of the participant's video track.
+     */
+    videoTrack: Object | null
+};
 
+/**
+ * Implements a React {@link Component} that renders video element for a
+ * specific video track.
+ *
+ * @abstract
+ */
+export default class AbstractVideoTrack<P: Props> extends Component<P, State> {
     /**
      * Initializes a new AbstractVideoTrack instance.
      *
      * @param {Object} props - The read-only properties with which the new
      * instance is to be initialized.
      */
-    constructor(props) {
+    constructor(props: P) {
         super(props);
 
         this.state = {
@@ -69,7 +90,7 @@ export default class AbstractVideoTrack extends Component {
      * receive.
      * @returns {void}
      */
-    componentWillReceiveProps(nextProps) {
+    componentWillReceiveProps(nextProps: P) {
         const oldValue = this.state.videoTrack;
         const newValue = _falsy2null(nextProps.videoTrack);
 
@@ -88,7 +109,7 @@ export default class AbstractVideoTrack extends Component {
         const { videoTrack } = this.state;
         let render;
 
-        if (this.props.waitForVideoStarted) {
+        if (this.props.waitForVideoStarted && videoTrack) {
             // That's the complex case: we have to wait for onPlaying before we
             // render videoTrack. The complexity comes from the fact that
             // onPlaying will come after we render videoTrack.
@@ -110,14 +131,15 @@ export default class AbstractVideoTrack extends Component {
             render = shouldRenderVideoTrack(videoTrack, false);
         }
 
-        const stream
-            = render ? videoTrack.jitsiTrack.getOriginalStream() : null;
+        const stream = render && videoTrack
+            ? videoTrack.jitsiTrack.getOriginalStream() : null;
 
         // Actual zoom is currently only enabled if the stream is a desktop
         // stream.
         const zoomEnabled
             = this.props.zoomEnabled
                 && stream
+                && videoTrack
                 && videoTrack.videoType === 'desktop';
 
         return (
@@ -131,6 +153,8 @@ export default class AbstractVideoTrack extends Component {
         );
     }
 
+    _onVideoPlaying: () => void;
+
     /**
      * Handler for case when video starts to play.
      *

react/features/base/media/components/native/Video.js

@@ -1,6 +1,5 @@
 // @flow
 
-import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { RTCView } from 'react-native-webrtc';
 
@@ -10,59 +9,57 @@ import styles from './styles';
 import VideoTransform from './VideoTransform';
 
 /**
- * The React Native {@link Component} which is similar to Web's
- * {@code HTMLVideoElement} and wraps around react-native-webrtc's
- * {@link RTCView}.
+ * The type of the React {@code Component} props of {@link Video}.
  */
-export default class Video extends Component<*> {
+type Props = {
+    mirror: boolean,
+
+    onPlaying: Function,
+
+    /**
+     * Callback to invoke when the {@code Video} is clicked/pressed.
+     */
+    onPress: Function,
+
+    stream: Object,
+
     /**
-     * {@code Video} component's property types.
+     * Similarly to the CSS property z-index, specifies the z-order of this
+     * Video in the stacking space of all Videos. When Videos overlap,
+     * zOrder determines which one covers the other. A Video with a larger
+     * zOrder generally covers a Video with a lower one.
      *
-     * @static
+     * Non-overlapping Videos may safely share a z-order (because one does
+     * not have to cover the other).
+     *
+     * The support for zOrder is platform-dependent and/or
+     * implementation-specific. Thus, specifying a value for zOrder is to be
+     * thought of as giving a hint rather than as imposing a requirement.
+     * For example, video renderers such as Video are commonly implemented
+     * using OpenGL and OpenGL views may have different numbers of layers in
+     * their stacking space. Android has three: a layer bellow the window
+     * (aka default), a layer bellow the window again but above the previous
+     * layer (aka media overlay), and above the window. Consequently, it is
+     * advisable to limit the number of utilized layers in the stacking
+     * space to the minimum sufficient for the desired display. For example,
+     * a video call application usually needs a maximum of two zOrder
+     * values: 0 for the remote video(s) which appear in the background, and
+     * 1 for the local video(s) which appear above the remote video(s).
      */
-    static propTypes = {
-        mirror: PropTypes.bool,
-
-        onPlaying: PropTypes.func,
-
-        /**
-         * Callback to invoke when the {@code Video} is clicked/pressed.
-         */
-        onPress: PropTypes.func,
-
-        stream: PropTypes.object,
-
-        /**
-         * Similarly to the CSS property z-index, specifies the z-order of this
-         * Video in the stacking space of all Videos. When Videos overlap,
-         * zOrder determines which one covers the other. A Video with a larger
-         * zOrder generally covers a Video with a lower one.
-         *
-         * Non-overlapping Videos may safely share a z-order (because one does
-         * not have to cover the other).
-         *
-         * The support for zOrder is platform-dependent and/or
-         * implementation-specific. Thus, specifying a value for zOrder is to be
-         * thought of as giving a hint rather than as imposing a requirement.
-         * For example, video renderers such as Video are commonly implemented
-         * using OpenGL and OpenGL views may have different numbers of layers in
-         * their stacking space. Android has three: a layer bellow the window
-         * (aka default), a layer bellow the window again but above the previous
-         * layer (aka media overlay), and above the window. Consequently, it is
-         * advisable to limit the number of utilized layers in the stacking
-         * space to the minimum sufficient for the desired display. For example,
-         * a video call application usually needs a maximum of two zOrder
-         * values: 0 for the remote video(s) which appear in the background, and
-         * 1 for the local video(s) which appear above the remote video(s).
-         */
-        zOrder: PropTypes.number,
-
-        /**
-         * Indicates whether zooming (pinch to zoom and/or drag) is enabled.
-         */
-        zoomEnabled: PropTypes.bool
-    };
+    zOrder: number,
 
+    /**
+     * Indicates whether zooming (pinch to zoom and/or drag) is enabled.
+     */
+    zoomEnabled: boolean
+};
+
+/**
+ * The React Native {@link Component} which is similar to Web's
+ * {@code HTMLVideoElement} and wraps around react-native-webrtc's
+ * {@link RTCView}.
+ */
+export default class Video extends Component<Props> {
     /**
      * React Component method that executes once component is mounted.
      *

react/features/base/media/components/native/VideoTrack.js

@@ -1,8 +1,11 @@
+/* @flow */
+
 import React from 'react';
 import { View } from 'react-native';
 import { connect } from 'react-redux';
 
 import AbstractVideoTrack from '../AbstractVideoTrack';
+import type { Props } from '../AbstractVideoTrack';
 import styles from './styles';
 
 /**
@@ -10,14 +13,7 @@ import styles from './styles';
  *
  * @extends AbstractVideoTrack
  */
-class VideoTrack extends AbstractVideoTrack {
-    /**
-     * VideoTrack component's property types.
-     *
-     * @static
-     */
-    static propTypes = AbstractVideoTrack.propTypes
-
+class VideoTrack extends AbstractVideoTrack<Props> {
     /**
      * Renders the video element for the associated video track.
      *

react/features/base/media/components/web/Video.js

@@ -1,12 +1,42 @@
-import PropTypes from 'prop-types';
+/* @flow */
+
 import React, { Component } from 'react';
 
+/**
+ * The type of the React {@code Component} props of {@link Video}.
+ */
+type Props = {
+
+    /**
+     * CSS classes to add to the video element.
+     */
+    className: string,
+
+    /**
+     * The value of the id attribute of the video. Used by the torture tests to
+     * locate video elements.
+     */
+    id: string,
+
+    /**
+     * Optional callback to invoke once the video starts playing.
+     */
+    onVideoPlaying: Function,
+
+    /**
+     * The JitsiLocalTrack to display.
+     */
+    videoTrack: ?Object
+};
+
 /**
  * Component that renders a video element for a passed in video track.
  *
  * @extends Component
  */
-class Video extends Component {
+class Video extends Component<Props> {
+    _videoElement: ?Object;
+
     /**
      * Default values for {@code Video} component's properties.
      *
@@ -18,41 +48,13 @@ class Video extends Component {
         id: ''
     };
 
-    /**
-     * {@code Video} component's property types.
-     *
-     * @static
-     */
-    static propTypes = {
-        /**
-         * CSS classes to add to the video element.
-         */
-        className: PropTypes.string,
-
-        /**
-         * The value of the id attribute of the video. Used by the torture tests
-         * to locate video elements.
-         */
-        id: PropTypes.string,
-
-        /**
-         * Optional callback to invoke once the video starts playing.
-         */
-        onVideoPlaying: PropTypes.func,
-
-        /**
-         * The JitsiLocalTrack to display.
-         */
-        videoTrack: PropTypes.object
-    };
-
     /**
      * Initializes a new {@code Video} instance.
      *
      * @param {Object} props - The read-only properties with which the new
      * instance is to be initialized.
      */
-    constructor(props) {
+    constructor(props: Props) {
         super(props);
 
         /**
@@ -78,8 +80,10 @@ class Video extends Component {
      * @returns {void}
      */
     componentDidMount() {
-        this._videoElement.volume = 0;
-        this._videoElement.onplaying = this._onVideoPlaying;
+        if (this._videoElement) {
+            this._videoElement.volume = 0;
+            this._videoElement.onplaying = this._onVideoPlaying;
+        }
 
         this._attachTrack(this.props.videoTrack);
     }
@@ -104,7 +108,7 @@ class Video extends Component {
      * @returns {boolean} - False is always returned to blackbox this component.
      * from React.
      */
-    shouldComponentUpdate(nextProps) {
+    shouldComponentUpdate(nextProps: Props) {
         const currentJitsiTrack = this.props.videoTrack
             && this.props.videoTrack.jitsiTrack;
         const nextJitsiTrack = nextProps.videoTrack
@@ -167,6 +171,8 @@ class Video extends Component {
         }
     }
 
+    _onVideoPlaying: () => void;
+
     /**
      * Invokes the onvideoplaying callback if defined.
      *
@@ -179,6 +185,8 @@ class Video extends Component {
         }
     }
 
+    _setVideoElement: () => void;
+
     /**
      * Sets an instance variable for the component's video element so it can be
      * referenced later for attaching and detaching a JitsiLocalTrack.

react/features/base/media/components/web/VideoTrack.js

@@ -1,51 +1,49 @@
-import PropTypes from 'prop-types';
+/* @flow */
+
 import React from 'react';
 import { connect } from 'react-redux';
 
 import AbstractVideoTrack from '../AbstractVideoTrack';
+import type { Props as AbstractVideoTrackProps } from '../AbstractVideoTrack';
 
 import Video from './Video';
 
+/**
+ * The type of the React {@code Component} props of {@link VideoTrack}.
+ */
+type Props = {
+    ...AbstractVideoTrackProps,
+
+    /**
+     * CSS classes to add to the video element.
+     */
+    className: string,
+
+    /**
+     * The value of the id attribute of the video. Used by the torture tests
+     * to locate video elements.
+     */
+    id: string
+};
+
 /**
  * Component that renders a video element for a passed in video track and
  * notifies the store when the video has started playing.
  *
  * @extends AbstractVideoTrack
  */
-class VideoTrack extends AbstractVideoTrack {
+class VideoTrack extends AbstractVideoTrack<Props> {
     /**
      * Default values for {@code VideoTrack} component's properties.
      *
      * @static
      */
     static defaultProps = {
-        ...AbstractVideoTrack.defaultProps,
-
         className: '',
 
         id: ''
     };
 
-    /**
-     * {@code VideoTrack} component's property types.
-     *
-     * @static
-     */
-    static propTypes = {
-        ...AbstractVideoTrack.propTypes,
-
-        /**
-         * CSS classes to add to the video element.
-         */
-        className: PropTypes.string,
-
-        /**
-         * The value of the id attribute of the video. Used by the torture tests
-         * to locate video elements.
-         */
-        id: PropTypes.string
-    };
-
     /**
      * Renders the video element.
      *
@@ -62,6 +60,8 @@ class VideoTrack extends AbstractVideoTrack {
                 videoTrack = { this.props.videoTrack } />
         );
     }
+
+    _onVideoPlaying: () => void;
 }
 
 export default connect()(VideoTrack);

react/features/base/media/functions.js

@@ -58,7 +58,7 @@ export function isVideoMutedByUser(stateful: Function | Object) {
  * otherwise, false.
  */
 export function shouldRenderVideoTrack(
-        videoTrack: { muted: boolean, videoStarted: boolean },
+        videoTrack: ?{ muted: boolean, videoStarted: boolean },
         waitForVideoStarted: boolean) {
     return (
         videoTrack

react/features/base/popover/components/Popover.web.js

@@ -1,5 +1,6 @@
+/* @flow */
+
 import InlineDialog from '@atlaskit/inline-dialog';
-import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 /**
@@ -28,13 +29,68 @@ function _mapPositionToPaddingClass(position = 'left') {
     return DIALOG_TO_PADDING_POSITION[position.split(' ')[0]];
 }
 
+/**
+ * The type of the React {@code Component} props of {@link Popover}.
+ */
+type Props = {
+
+    /**
+     * A child React Element to use as the trigger for showing the dialog.
+     */
+    children: React$Node,
+
+    /**
+     * Additional CSS classnames to apply to the root of the {@code Popover}
+     * component.
+     */
+    className: string,
+
+    /**
+     * The ReactElement to display within the dialog.
+     */
+    content: Object,
+
+    /**
+     * Whether displaying of the popover should be prevented.
+     */
+    disablePopover: boolean,
+
+    /**
+     * An id attribute to apply to the root of the {@code Popover}
+     * component.
+     */
+    id: string,
+
+    /**
+     * Callback to invoke when the popover has opened.
+     */
+    onPopoverOpen: Function,
+
+    /**
+     * From which side of the dialog trigger the dialog should display. The
+     * value will be passed to {@code InlineDialog}.
+     */
+    position: string
+};
+
+/**
+ * The type of the React {@code Component} state of {@link Popover}.
+ */
+type State = {
+
+    /**
+     * Whether or not the {@code InlineDialog} should be displayed.
+     */
+    showDialog: boolean
+};
+
 /**
  * Implements a React {@code Component} for showing an {@code InlineDialog} on
  * mouseenter of the trigger and contents, and hiding the dialog on mouseleave.
  *
  * @extends Component
  */
-class Popover extends Component {
+class Popover extends Component<Props, State> {
     /**
      * Default values for {@code Popover} component's properties.
      *
@@ -45,66 +101,16 @@ class Popover extends Component {
         id: ''
     };
 
-    /**
-     * {@code Popover} component's property types.
-     *
-     * @static
-     */
-    static propTypes = {
-        /**
-         * A child React Element to use as the trigger for showing the dialog.
-         */
-        children: PropTypes.object,
-
-        /**
-         * Additional CSS classnames to apply to the root of the {@code Popover}
-         * component.
-         */
-        className: PropTypes.string,
-
-        /**
-         * The ReactElement to display within the dialog.
-         */
-        content: PropTypes.object,
-
-        /**
-         * Whether displaying of the popover should be prevented.
-         */
-        disablePopover: PropTypes.bool,
-
-        /**
-         * An id attribute to apply to the root of the {@code Popover}
-         * component.
-         */
-        id: PropTypes.string,
-
-        /**
-         * Callback to invoke when the popover has opened.
-         */
-        onPopoverOpen: PropTypes.func,
-
-        /**
-         * From which side of the dialog trigger the dialog should display. The
-         * value will be passed to {@code InlineDialog}.
-         */
-        position: PropTypes.string
-    };
-
     /**
      * Initializes a new {@code Popover} instance.
      *
      * @param {Object} props - The read-only properties with which the new
      * instance is to be initialized.
      */
-    constructor(props) {
+    constructor(props: Props) {
         super(props);
 
         this.state = {
-            /**
-             * Whether or not the {@code InlineDialog} should be displayed.
-             *
-             * @type {boolean}
-             */
             showDialog: false
         };
 
@@ -136,6 +142,8 @@ class Popover extends Component {
         );
     }
 
+    _onHideDialog: () => void;
+
     /**
      * Stops displaying the {@code InlineDialog}.
      *
@@ -146,6 +154,8 @@ class Popover extends Component {
         this.setState({ showDialog: false });
     }
 
+    _onShowDialog: () => void;
+
     /**
      * Displays the {@code InlineDialog} and calls any registered onPopoverOpen
      * callbacks.

react/features/base/react/components/AbstractContainer.js

@@ -58,7 +58,6 @@ export type Props = {
     visible?: ?boolean
 };
 
-
 /**
  * Abstract (base) class for container of React {@link Component} children with
  * a style.

react/features/base/react/components/native/Link.js

@@ -1,47 +1,47 @@
-import PropTypes from 'prop-types';
+/* @flow */
+
 import React, { Component } from 'react';
 import { Linking } from 'react-native';
 
 import Text from './Text';
 
 /**
- * Implements a (hyper)link to a URL in the fashion of the HTML anchor element
- * and its href attribute.
+ * The type of the React {@code Component} props of {@link Link}.
  */
-export default class Link extends Component {
+type Props = {
+
     /**
-     * {@code Link} component's property types.
-     *
-     * @static
+     * The children to be displayed within this Link.
      */
-    static propTypes = {
-        /**
-         * The children to be displayed within this Link.
-         */
-        children: PropTypes.node,
+    children: React$Node,
 
-        /**
-         * Notifies that this Link failed to open the URL associated with it.
-         */
-        onLinkingOpenURLRejected: PropTypes.func,
+    /**
+     * Notifies that this Link failed to open the URL associated with it.
+     */
+    onLinkingOpenURLRejected: Function,
 
-        /**
-         * The CSS style to be applied to this Link for the purposes of display.
-         */
-        style: PropTypes.object,
+    /**
+     * The CSS style to be applied to this Link for the purposes of display.
+     */
+    style: Object,
 
-        /**
-         * The URL to be opened when this Link is clicked/pressed.
-         */
-        url: PropTypes.string
-    };
+    /**
+     * The URL to be opened when this Link is clicked/pressed.
+     */
+    url: string
+};
 
+/**
+ * Implements a (hyper)link to a URL in the fashion of the HTML anchor element
+ * and its href attribute.
+ */
+export default class Link extends Component<Props> {
     /**
      * Initializes a new Link instance.
      *
      * @param {Object} props - Component properties.
      */
-    constructor(props) {
+    constructor(props: Props) {
         super(props);
 
         // Bind event handlers so they are only bound once for every instance.
@@ -77,6 +77,8 @@ export default class Link extends Component {
         onRejected && onRejected(reason);
     }
 
+    _onPress: () => void;
+
     /**
      * Handles press on this Link. Opens the URL associated with this Link.
      *

react/features/base/react/components/web/Container.js

@@ -9,13 +9,6 @@ import type { Props } from '../AbstractContainer';
  * @extends AbstractContainer
  */
 export default class Container<P: Props> extends AbstractContainer<P> {
-    /**
-     * {@code Container} component's property types.
-     *
-     * @static
-     */
-    static propTypes = AbstractContainer.propTypes;
-
     /**
      * Implements React's {@link Component#render()}.
      *

react/features/base/react/components/web/InlineDialogFailure.js

@@ -1,7 +1,6 @@
 /* @flow */
 
 import Button from '@atlaskit/button';
-import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import { translate } from '../../../i18n';
@@ -9,26 +8,25 @@ import { translate } from '../../../i18n';
 declare var interfaceConfig: Object;
 
 /**
- * Inline dialog that represents a failure and allows a retry.
+ * The type of the React {@code Component} props of {@link InlineDialogFailure}.
  */
-class InlineDialogFailure extends Component<*> {
+type Props = {
+
     /**
-     * {@code InlineDialogFailure}'s property types.
-     *
-     * @static
+     * Allows to retry the call that previously didn't succeed.
      */
-    static propTypes = {
-        /**
-         * Allows to retry the call that previously didn't succeed.
-         */
-        onRetry: PropTypes.func,
+    onRetry: Function,
 
-        /**
-         * Invoked to obtain translated strings.
-         */
-        t: PropTypes.func
-    };
+    /**
+     * Invoked to obtain translated strings.
+     */
+    t: Function
+};
 
+/**
+ * Inline dialog that represents a failure and allows a retry.
+ */
+class InlineDialogFailure extends Component<Props> {
     /**
      * Renders the content of this component.
      *

react/features/base/react/components/web/MultiSelectAutocomplete.js

@@ -1,7 +1,8 @@
+// @flow
+
 import { MultiSelectStateless } from '@atlaskit/multi-select';
 import AKInlineDialog from '@atlaskit/inline-dialog';
 import _debounce from 'lodash/debounce';
-import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import InlineDialogFailure from './InlineDialogFailure';
@@ -9,118 +10,127 @@ import InlineDialogFailure from './InlineDialogFailure';
 const logger = require('jitsi-meet-logger').getLogger(__filename);
 
 /**
- * A MultiSelect that is also auto-completing.
+ * The type of the React {@code Component} props of
+ * {@link MultiSelectAutocomplete}.
  */
-class MultiSelectAutocomplete extends Component {
+type Props = {
 
     /**
-     * {@code MultiSelectAutocomplete} component's property types.
-     *
-     * @static
+     * The default value of the selected item.
+     */
+    defaultValue: Array<Object>,
+
+    /**
+     * Optional footer to show as a last element in the results.
+     * Should be of type {content: <some content>}
+     */
+    footer: Object,
+
+    /**
+     * Indicates if the component is disabled.
+     */
+    isDisabled: boolean,
+
+    /**
+     * Text to display while a query is executing.
+     */
+    loadingMessage: string,
+
+    /**
+     * The text to show when no matches are found.
+     */
+    noMatchesFound: string,
+
+    /**
+     * The function called immediately before a selection has been actually
+     * selected. Provides an opportunity to do any formatting.
      */
-    static propTypes = {
-        /**
-         * The default value of the selected item.
-         */
-        defaultValue: PropTypes.array,
-
-        /**
-         * Optional footer to show as a last element in the results.
-         * Should be of type {content: <some content>}
-         */
-        footer: PropTypes.object,
-
-        /**
-         * Indicates if the component is disabled.
-         */
-        isDisabled: PropTypes.bool,
-
-        /**
-         * Text to display while a query is executing.
-         */
-        loadingMessage: PropTypes.string,
-
-        /**
-         * The text to show when no matches are found.
-         */
-        noMatchesFound: PropTypes.string,
-
-        /**
-         * The function called immediately before a selection has been actually
-         * selected. Provides an opportunity to do any formatting.
-         */
-        onItemSelected: PropTypes.func,
-
-        /**
-         * The function called when the selection changes.
-         */
-        onSelectionChange: PropTypes.func,
-
-        /**
-         * The placeholder text of the input component.
-         */
-        placeholder: PropTypes.string,
-
-        /**
-         * The service providing the search.
-         */
-        resourceClient: PropTypes.shape({
-            makeQuery: PropTypes.func,
-            parseResults: PropTypes.func
-        }).isRequired,
-
-        /**
-         * Indicates if the component should fit the container.
-         */
-        shouldFitContainer: PropTypes.bool,
-
-        /**
-         * Indicates if we should focus.
-         */
-        shouldFocus: PropTypes.bool
-    };
+    onItemSelected: Function,
 
+    /**
+     * The function called when the selection changes.
+     */
+    onSelectionChange: Function,
+
+    /**
+     * The placeholder text of the input component.
+     */
+    placeholder: string,
+
+    /**
+     * The service providing the search.
+     */
+    resourceClient: { makeQuery: Function, parseResults: Function },
+
+    /**
+     * Indicates if the component should fit the container.
+     */
+    shouldFitContainer: boolean,
+
+    /**
+     * Indicates if we should focus.
+     */
+    shouldFocus: boolean
+};
+
+/**
+ * The type of the React {@code Component} state of
+ * {@link MultiSelectAutocomplete}.
+ */
+type State = {
+
+    /**
+     * Indicates if the dropdown is open.
+     */
+    isOpen: boolean,
+
+    /**
+     * The text that filters the query result of the search.
+     */
+    filterValue: string,
+
+    /**
+     * Indicates if the component is currently loading results.
+     */
+    loading: boolean,
+
+    /**
+     * Indicates if there was an error.
+     */
+    error: boolean,
+
+    /**
+     * The list of result items.
+     */
+    items: Array<Object>,
+
+    /**
+     * The list of selected items.
+     */
+    selectedItems: Array<Object>
+};
+
+/**
+ * A MultiSelect that is also auto-completing.
+ */
+class MultiSelectAutocomplete extends Component<Props, State> {
     /**
      * Initializes a new {@code MultiSelectAutocomplete} instance.
      *
      * @param {Object} props - The read-only properties with which the new
      * instance is to be initialized.
      */
-    constructor(props) {
+    constructor(props: Props) {
         super(props);
 
         const defaultValue = this.props.defaultValue || [];
 
         this.state = {
-            /**
-             * Indicates if the dropdown is open.
-             */
             isOpen: false,
-
-            /**
-             * The text that filters the query result of the search.
-             */
             filterValue: '',
-
-            /**
-             * Indicates if the component is currently loading results.
-             */
             loading: false,
-
-
-            /**
-             * Indicates if there was an error.
-             */
             error: false,
-
-            /**
-             * The list of result items.
-             */
             items: [],
-
-            /**
-             * The list of selected items.
-             */
             selectedItems: [ ...defaultValue ]
         };
 
@@ -137,7 +147,7 @@ class MultiSelectAutocomplete extends Component {
      * having been selected.
      * @returns {void}
      */
-    setSelectedItems(selectedItems = []) {
+    setSelectedItems(selectedItems: Array<Object> = []) {
         this.setState({ selectedItems });
     }
 
@@ -177,6 +187,8 @@ class MultiSelectAutocomplete extends Component {
         );
     }
 
+    _onFilterChange: (string) => void;
+
     /**
      * Sets the state and sends a query on filter change.
      *
@@ -198,6 +210,8 @@ class MultiSelectAutocomplete extends Component {
         }
     }
 
+    _onRetry: () => void;
+
     /**
      * Retries the query on retry.
      *
@@ -208,6 +222,8 @@ class MultiSelectAutocomplete extends Component {
         this._sendQuery(this.state.filterValue);
     }
 
+    _onSelectionChange: (Object) => void;
+
     /**
      * Updates the selected items when a selection event occurs.
      *
@@ -258,6 +274,8 @@ class MultiSelectAutocomplete extends Component {
         );
     }
 
+    _sendQuery: (string) => void;
+
     /**
      * Sends a query to the resourceClient.
      *

react/features/base/react/components/web/Watermarks.js

@@ -1,6 +1,5 @@
 /* @flow */
 
-import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -18,31 +17,70 @@ const _RIGHT_WATERMARK_STYLE = {
 };
 
 /**
- * A Web Component which renders watermarks such as Jits, brand, powered by,
- * etc.
+ * The type of the React {@code Component} props of {@link Watermarks}.
  */
-class Watermarks extends Component<*, *> {
-    static propTypes = {
-        _isGuest: PropTypes.bool,
-        t: PropTypes.func
-    };
+type Props = {
 
-    state = {
-        brandWatermarkLink: String,
-        jitsiWatermarkLink: String,
-        showBrandWatermark: Boolean,
-        showJitsiWatermark: Boolean,
-        showJitsiWatermarkForGuests: Boolean,
-        showPoweredBy: Boolean
-    };
+    /**
+     * Whether or not the current user is logged in through a JWT.
+     */
+    _isGuest: boolean,
+
+    /**
+     * Invoked to obtain translated strings.
+     */
+    t: Function
+};
+
+/**
+ * The type of the React {@code Component} state of {@link Watermarks}.
+ */
+type State = {
+
+    /**
+     * The url to open when clicking the brand watermark.
+     */
+    brandWatermarkLink: string,
+
+    /**
+     * The url to open when clicking the Jitsi watermark.
+     */
+    jitsiWatermarkLink: string,
+
+    /**
+     * Whether or not the brand watermark should be displayed.
+     */
+    showBrandWatermark: boolean,
+
+    /**
+     * Whether or not the Jitsi watermark should be displayed.
+     */
+    showJitsiWatermark: boolean,
+
+    /**
+     * Whether or not the Jitsi watermark should be displayed for users not
+     * logged in through a JWT.
+     */
+    showJitsiWatermarkForGuests: boolean,
+
+    /**
+     * Whether or not the show the "powered by Jitsi.org" link.
+     */
+    showPoweredBy: boolean
+};
 
+/**
+ * A Web Component which renders watermarks such as Jits, brand, powered by,
+ * etc.
+ */
+class Watermarks extends Component<Props, State> {
     /**
      * Initializes a new Watermarks instance.
      *
      * @param {Object} props - The read-only properties with which the new
      * instance is to be initialized.
      */
-    constructor(props: Object) {
+    constructor(props: Props) {
         super(props);
 
         let showBrandWatermark;

react/features/base/responsive-ui/components/AspectRatioAware.js

@@ -1,11 +1,17 @@
 // @flow
 
-import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
 import { ASPECT_RATIO_NARROW, ASPECT_RATIO_WIDE } from '../constants';
 
+/**
+ * The type of the React {@code Component} props of {@link AspectRatioAware}.
+ */
+type Props = {
+    aspectRatio: ASPECT_RATIO_NARROW | ASPECT_RATIO_WIDE
+};
+
 /**
  * Determines whether a specific React {@code Component} decorated into an
  * {@link AspectRatioAware} has {@link ASPECT_RATIO_NARROW} as the value of its
@@ -34,20 +40,7 @@ export function makeAspectRatioAware(
     /**
      * Renders {@code WrappedComponent} with the React prop {@code aspectRatio}.
      */
-    class AspectRatioAware extends Component<*> {
-        /**
-         * Properties of the aspect ratio aware wrapper.
-         */
-        static propTypes = {
-            /**
-             * Either {@link ASPECT_RATIO_NARROW} or {@link ASPECT_RATIO_WIDE}.
-             */
-            aspectRatio: PropTypes.oneOf([
-                ASPECT_RATIO_NARROW,
-                ASPECT_RATIO_WIDE
-            ])
-        }
-
+    class AspectRatioAware extends Component<Props> {
         /**
          * Implement's React render method to wrap the nested component.
          *

react/features/connection-indicator/components/ConnectionIndicator.js

@@ -1,6 +1,5 @@
-/* global interfaceConfig */
+/* @flow */
 
-import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import { translate } from '../../base/i18n';
@@ -10,6 +9,8 @@ import { ConnectionStatsTable } from '../../connection-stats';
 
 import statsEmitter from '../statsEmitter';
 
+declare var interfaceConfig: Object;
+
 /**
  * The connection quality percentage that must be reached to be considered of
  * good quality and can result in the connection indicator being hidden.
@@ -25,7 +26,7 @@ const INDICATOR_DISPLAY_THRESHOLD = 30;
  *
  * @type {Object[]}
  */
-const QUALITY_TO_WIDTH = [
+const QUALITY_TO_WIDTH: Array<Object> = [
 
     // Full (3 bars)
     {
@@ -54,108 +55,107 @@ const QUALITY_TO_WIDTH = [
     // Note: we never show 0 bars as long as there is a connection.
 ];
 
+/**
+ * The type of the React {@code Component} props of {@link ConnectionIndicator}.
+ */
+type Props = {
+
+    /**
+     * Whether or not the component should ignore setting a visibility class for
+     * hiding the component when the connection quality is not strong.
+     */
+    alwaysVisible: boolean,
+
+    /**
+     * The current condition of the user's connection, matching one of the
+     * enumerated values in the library.
+     */
+    connectionStatus: string,
+
+    /**
+     * Whether or not clicking the indicator should display a popover for more
+     * details.
+     */
+    enableStatsDisplay: boolean,
+
+    /**
+     * The font-size for the icon.
+     */
+    iconSize: number,
+
+    /**
+     * Whether or not the displays stats are for local video.
+     */
+    isLocalVideo: boolean,
+
+    /**
+     * Relative to the icon from where the popover for more connection details
+     * should display.
+     */
+    statsPopoverPosition: string,
+
+    /**
+     * Invoked to obtain translated strings.
+     */
+    t: Function,
+
+    /**
+     * The user ID associated with the displayed connection indication and
+     * stats.
+     */
+    userID: string
+};
+
+/**
+ * The type of the React {@code Component} state of {@link ConnectionIndicator}.
+ */
+type State = {
+
+    /**
+     * The timeout for automatically hiding the indicator.
+     */
+    autoHideTimeout: TimeoutID | null,
+
+    /**
+     * Whether or not a CSS class should be applied to the root for hiding the
+     * connection indicator. By default the indicator should start out hidden
+     * because the current connection status is not known at mount.
+     */
+    showIndicator: boolean,
+
+    /**
+     * Whether or not the popover content should display additional statistics.
+     */
+    showMoreStats: boolean,
+
+    /**
+     * Cache of the stats received from subscribing to stats emitting. The keys
+     * should be the name of the stat. With each stat update, updates stats are
+     * mixed in with cached stats and a new stats object is set in state.
+     */
+    stats: Object
+};
+
 /**
  * Implements a React {@link Component} which displays the current connection
  * quality percentage and has a popover to show more detailed connection stats.
  *
  * @extends {Component}
  */
-class ConnectionIndicator extends Component {
-    /**
-     * {@code ConnectionIndicator} component's property types.
-     *
-     * @static
-     */
-    static propTypes = {
-        /**
-         * Whether or not the component should ignore setting a visibility class
-         * for hiding the component when the connection quality is not strong.
-         */
-        alwaysVisible: PropTypes.bool,
-
-        /**
-         * The current condition of the user's connection, matching one of the
-         * enumerated values in the library.
-         *
-         * @type {JitsiParticipantConnectionStatus}
-         */
-        connectionStatus: PropTypes.string,
-
-        /**
-         * Whether or not clicking the indicator should display a popover for
-         * more details.
-         */
-        enableStatsDisplay: PropTypes.bool,
-
-        /**
-         * The font-size for the icon.
-         */
-        iconSize: PropTypes.number,
-
-        /**
-         * Whether or not the displays stats are for local video.
-         */
-        isLocalVideo: PropTypes.bool,
-
-        /**
-         * Relative to the icon from where the popover for more connection
-         * details should display.
-         */
-        statsPopoverPosition: PropTypes.string,
-
-        /**
-         * Invoked to obtain translated strings.
-         */
-        t: PropTypes.func,
-
-        /**
-         * The user ID associated with the displayed connection indication and
-         * stats.
-         */
-        userID: PropTypes.string
-    };
-
+class ConnectionIndicator extends Component<Props, State> {
     /**
      * Initializes a new {@code ConnectionIndicator} instance.
      *
      * @param {Object} props - The read-only properties with which the new
      * instance is to be initialized.
      */
-    constructor(props) {
+    constructor(props: Props) {
         super(props);
 
         this.state = {
-            /**
-             * The timeout for automatically hiding the indicator.
-             *
-             * @type {timeoutID}
-             */
             autoHideTimeout: null,
-
-            /**
-             * Whether or not a CSS class should be applied to the root for
-             * hiding the connection indicator. By default the indicator should
-             * start out hidden because the current connection status is not
-             * known at mount.
-             *
-             * @type {boolean}
-             */
             showIndicator: false,
-
-            /**
-             * Whether or not the popover content should display additional
-             * statistics.
-             *
-             * @type {boolean}
-             */
             showMoreStats: false,
-
-            /**
-             * Cache of the stats received from subscribing to stats emitting.
-             * The keys should be the name of the stat. With each stat update,
-             * updates stats are mixed in with cached stats and a new stats
-             * object is set in state.
-             */
             stats: {}
         };
 
@@ -201,7 +201,9 @@ class ConnectionIndicator extends Component {
         statsEmitter.unsubscribeToClientStats(
             this.props.userID, this._onStatsUpdated);
 
-        clearTimeout(this.state.autoHideTimeout);
+        if (this.state.autoHideTimeout) {
+            clearTimeout(this.state.autoHideTimeout);
+        }
     }
 
     /**
@@ -257,7 +259,7 @@ class ConnectionIndicator extends Component {
             return 'status-high';
         }
 
-        return QUALITY_TO_WIDTH.find(x => percent >= x.percent).colorClass;
+        return this._getDisplayConfiguration(percent).colorClass;
     }
 
     /**
@@ -287,7 +289,7 @@ class ConnectionIndicator extends Component {
                 // established so far. Assume a strong connection to start.
                 tipKey = 'connectionindicator.quality.good';
             } else {
-                const config = QUALITY_TO_WIDTH.find(x => percent >= x.percent);
+                const config = this._getDisplayConfiguration(percent);
 
                 tipKey = config.tip;
             }
@@ -297,6 +299,21 @@ class ConnectionIndicator extends Component {
         return this.props.t(tipKey);
     }
 
+    /**
+     * Get the icon configuration from QUALITY_TO_WIDTH which has a percentage
+     * that matches or exceeds the passed in percentage. The implementation
+     * assumes QUALITY_TO_WIDTH is already sorted by highest to lowest
+     * percentage.
+     *
+     * @param {number} percent - The connection percentage, out of 100, to find
+     * the closest matching configuration for.
+     * @private
+     * @returns {Object}
+     */
+    _getDisplayConfiguration(percent: number): Object {
+        return QUALITY_TO_WIDTH.find(x => percent >= x.percent) || {};
+    }
+
     /**
      * Returns additional class names to add to the root of the component. The
      * class names are intended to be used for hiding or showing the indicator.
@@ -314,6 +331,8 @@ class ConnectionIndicator extends Component {
             ? 'show-connection-indicator' : 'hide-connection-indicator';
     }
 
+    _onStatsUpdated: (Object) => void;
+
     /**
      * Callback invoked when new connection stats associated with the passed in
      * user ID are available. Will update the component's display of current
@@ -341,6 +360,8 @@ class ConnectionIndicator extends Component {
         this._updateIndicatorAutoHide(newStats.percent);
     }
 
+    _onToggleShowMore: () => void;
+
     /**
      * Callback to invoke when the show more link in the popover content is
      * clicked. Sets the state which will determine if the popover should show
@@ -383,7 +404,7 @@ class ConnectionIndicator extends Component {
         } else {
             const { percent } = this.state.stats;
 
-            iconWidth = QUALITY_TO_WIDTH.find(x => percent >= x.percent).width;
+            iconWidth = this._getDisplayConfiguration(percent).width;
         }
 
         return [
@@ -449,7 +470,10 @@ class ConnectionIndicator extends Component {
      */
     _updateIndicatorAutoHide(percent) {
         if (percent < INDICATOR_DISPLAY_THRESHOLD) {
-            clearTimeout(this.state.autoHideTimeout);
+            if (this.state.autoHideTimeout) {
+                clearTimeout(this.state.autoHideTimeout);
+            }
+
             this.setState({
                 autoHideTimeout: null,
                 showIndicator: true

react/features/connection-stats/components/ConnectionStatsTable.js

@@ -1,119 +1,120 @@
-import PropTypes from 'prop-types';
+/* @flow */
+
 import React, { Component } from 'react';
 
 import { translate } from '../../base/i18n';
 
 /**
- * React {@code Component} for displaying connection statistics.
- *
- * @extends Component
+ * The type of the React {@code Component} props of
+ * {@link ConnectionStatsTable}.
  */
-class ConnectionStatsTable extends Component {
+type Props = {
+
     /**
-     * {@code ConnectionStatsTable} component's property types.
-     *
-     * @static
+     * Statistics related to bandwidth.
+     * {{
+     *     download: Number,
+     *     upload: Number
+     * }}
+     */
+    bandwidth: Object,
+
+    /**
+     * Statistics related to bitrate.
+     * {{
+     *     download: Number,
+     *     upload: Number
+     * }}
+     */
+    bitrate: Object,
+
+    /**
+     * The number of bridges (aka media servers) currently used in the
+     * conference.
+     */
+    bridgeCount: number,
+
+    /**
+     * A message describing the connection quality.
+     */
+    connectionSummary: string,
+
+    /**
+     * The end-to-end round-trip-time.
+     */
+    e2eRtt: number,
+
+    /**
+     * Statistics related to frame rates for each ssrc.
+     * {{
+     *     [ ssrc ]: Number
+     * }}
+     */
+    framerate: Object,
+
+    /**
+     * Whether or not the statistics are for local video.
+     */
+    isLocalVideo: boolean,
+
+    /**
+     * Callback to invoke when the show additional stats link is clicked.
      */
-    static propTypes = {
-        /**
-         * Statistics related to bandwidth.
-         * {{
-         *     download: Number,
-         *     upload: Number
-         * }}
-         */
-        bandwidth: PropTypes.object,
-
-        /**
-         * Statistics related to bitrate.
-         * {{
-         *     download: Number,
-         *     upload: Number
-         * }}
-         */
-        bitrate: PropTypes.object,
-
-        /**
-         * The number of bridges (aka media servers) currently used in the
-         * conference.
-         */
-        bridgeCount: PropTypes.number,
-
-        /**
-         * A message describing the connection quality.
-         */
-        connectionSummary: PropTypes.string,
-
-        /**
-         * The end-to-end round-trip-time.
-         */
-        e2eRtt: PropTypes.number,
-
-        /**
-         * Statistics related to frame rates for each ssrc.
-         * {{
-         *     [ ssrc ]: Number
-         * }}
-         */
-        framerate: PropTypes.object,
-
-        /**
-         * Whether or not the statistics are for local video.
-         */
-        isLocalVideo: PropTypes.bool,
-
-        /**
-         * Callback to invoke when the show additional stats link is clicked.
-         */
-        onShowMore: PropTypes.func,
-
-        /**
-         * Statistics related to packet loss.
-         * {{
-         *     download: Number,
-         *     upload: Number
-         * }}
-         */
-        packetLoss: PropTypes.object,
-
-        /**
-         * The region that we think the client is in.
-         */
-        region: PropTypes.string,
-
-        /**
-         * Statistics related to display resolutions for each ssrc.
-         * {{
-         *     [ ssrc ]: {
-         *         height: Number,
-         *         width: Number
-         *     }
-         * }}
-         */
-        resolution: PropTypes.object,
-
-        /**
-         * The region of the media server that we are connected to.
-         */
-        serverRegion: PropTypes.string,
-
-        /**
-         * Whether or not additional stats about bandwidth and transport should
-         * be displayed. Will not display even if true for remote participants.
-         */
-        shouldShowMore: PropTypes.bool,
-
-        /**
-         * Invoked to obtain translated strings.
-         */
-        t: PropTypes.func,
-
-        /**
-         * Statistics related to transports.
-         */
-        transport: PropTypes.array
-    };
+    onShowMore: Function,
 
+    /**
+     * Statistics related to packet loss.
+     * {{
+     *     download: Number,
+     *     upload: Number
+     * }}
+     */
+    packetLoss: Object,
+
+    /**
+     * The region that we think the client is in.
+     */
+    region: string,
+
+    /**
+     * Statistics related to display resolutions for each ssrc.
+     * {{
+     *     [ ssrc ]: {
+     *         height: Number,
+     *         width: Number
+     *     }
+     * }}
+     */
+    resolution: Object,
+
+    /**
+     * The region of the media server that we are connected to.
+     */
+    serverRegion: string,
+
+    /**
+     * Whether or not additional stats about bandwidth and transport should be
+     * displayed. Will not display even if true for remote participants.
+     */
+    shouldShowMore: boolean,
+
+    /**
+     * Invoked to obtain translated strings.
+     */
+    t: Function,
+
+    /**
+     * Statistics related to transports.
+     */
+    transport: Array<Object>
+};
+
+/**
+ * React {@code Component} for displaying connection statistics.
+ *
+ * @extends Component
+ */
+class ConnectionStatsTable extends Component<Props> {
     /**
      * Implements React's {@link Component#render()}.
      *
@@ -574,7 +575,7 @@ class ConnectionStatsTable extends Component {
      * @private
      * @returns {ReactElement}
      */
-    _renderTransportTableRow(config) {
+    _renderTransportTableRow(config: Object) {
         const { additionalData, data, key, label } = config;
 
         return (

react/features/deep-linking/components/DeepLinkingMobilePage.web.js

@@ -1,6 +1,5 @@
 // @flow
 
-import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -35,31 +34,42 @@ const _URLS = {
 };
 
 /**
- * React component representing mobile browser page.
- *
- * @class DeepLinkingMobilePage
+ * The type of the React {@code Component} props of
+ * {@link DeepLinkingMobilePage}.
  */
-class DeepLinkingMobilePage extends Component<*, *> {
-    state: Object;
+type Props = {
 
     /**
-     * DeepLinkingMobilePage component's property types.
-     *
-     * @static
+     * The name of the conference attempting to being joined.
      */
-    static propTypes = {
-        /**
-         * The name of the conference attempting to being joined.
-         */
-        _room: PropTypes.string,
-
-        /**
-         * The function to translate human-readable text.
-         *
-         * @public
-         * @type {Function}
-         */
-        t: PropTypes.func
+    _room: string,
+
+    /**
+     * The function to translate human-readable text.
+     */
+    t: Function
+};
+
+/**
+ * The type of the React {@code Component} state of
+ * {@link DeepLinkingMobilePage}.
+ */
+type State = {
+
+    /**
+     * The URL to link to on the button for opening the mobile app.
+     */
+    joinURL: string
+};
+
+/**
+ * React component representing mobile browser page.
+ *
+ * @class DeepLinkingMobilePage
+ */
+class DeepLinkingMobilePage extends Component<Props, State> {
+    state = {
+        joinURL: ''
     };
 
     /**
@@ -68,7 +78,7 @@ class DeepLinkingMobilePage extends Component<*, *> {
      * @param {Object} props - The read-only React {@code Component} props with
      * which the new instance is to be initialized.
      */
-    constructor(props) {
+    constructor(props: Props) {
         super(props);
 
         // Bind event handlers so they are only bound once per instance.

react/features/desktop-picker/components/DesktopPicker.js

@@ -1,7 +1,6 @@
 // @flow
 
 import Tabs from '@atlaskit/tabs';
-import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -43,40 +42,64 @@ const TAB_LABELS = {
 const VALID_TYPES = Object.keys(TAB_LABELS);
 
 /**
- * React component for DesktopPicker.
- *
- * @extends Component
+ * The type of the React {@code Component} props of {@link DesktopPicker}.
  */
-class DesktopPicker extends Component<*, *> {
+type Props = {
+
     /**
-     * DesktopPicker component's property types.
-     *
-     * @static
+     * An array with desktop sharing sources to be displayed.
      */
-    static propTypes = {
+    desktopSharingSources: Array<string>,
 
-        /**
-         * An array with desktop sharing sources to be displayed.
-         */
-        desktopSharingSources: PropTypes.arrayOf(PropTypes.string),
+    /**
+     * Used to request DesktopCapturerSources.
+     */
+    dispatch: Dispatch<*>,
 
-        /**
-         * Used to request DesktopCapturerSources.
-         */
-        dispatch: PropTypes.func,
+    /**
+     * The callback to be invoked when the component is closed or when a
+     * DesktopCapturerSource has been chosen.
+     */
+    onSourceChoose: Function,
 
-        /**
-         * The callback to be invoked when the component is closed or when
-         * a DesktopCapturerSource has been chosen.
-         */
-        onSourceChoose: PropTypes.func,
+    /**
+     * Used to obtain translations.
+     */
+    t: Function
+};
 
-        /**
-         * Used to obtain translations.
-         */
-        t: PropTypes.func
-    };
+/**
+ * The type of the React {@code Component} state of {@link DesktopPicker}.
+ */
+type State = {
+
+    /**
+     * The currently higlighted DesktopCapturerSource.
+     */
+    selectedSource: Object,
+
+    /**
+     * The desktop source type currently being displayed.
+     */
+    selectedTab: number,
+
+    /**
+     * An object containing all the DesktopCapturerSources.
+     */
+    sources: Object,
+
+    /**
+     * The desktop source types to fetch previews for.
+     */
+    types: Array<string>
+};
 
+/**
+ * React component for DesktopPicker.
+ *
+ * @extends Component
+ */
+class DesktopPicker extends Component<Props, State> {
     _poller = null;
 
     state = {
@@ -99,7 +122,7 @@ class DesktopPicker extends Component<*, *> {
      * @param {Object} props - The read-only properties with which the new
      * instance is to be initialized.
      */
-    constructor(props) {
+    constructor(props: Props) {
         super(props);
 
         // Bind event handlers so they are only bound once per instance.
@@ -132,7 +155,7 @@ class DesktopPicker extends Component<*, *> {
      * instance will receive.
      * @returns {void}
      */
-    componentWillReceiveProps(nextProps) {
+    componentWillReceiveProps(nextProps: Props) {
         const { desktopSharingSources } = nextProps;
 
         /**

react/features/desktop-picker/components/DesktopPickerPane.js

@@ -1,48 +1,47 @@
+/* @flow */
+
 import Spinner from '@atlaskit/spinner';
-import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import DesktopSourcePreview from './DesktopSourcePreview';
 
 /**
- * React component for showing a grid of DesktopSourcePreviews.
- *
- * @extends Component
+ * The type of the React {@code Component} props of {@link DesktopPickerPane}.
  */
-class DesktopPickerPane extends Component {
+type Props = {
+
     /**
-     * DesktopPickerPane component's property types.
-     *
-     * @static
+     * The handler to be invoked when a DesktopSourcePreview is clicked.
      */
-    static propTypes = {
-        /**
-         * The handler to be invoked when a DesktopSourcePreview is clicked.
-         */
-        onClick: PropTypes.func,
+    onClick: Function,
 
-        /**
-         * The handler to be invoked when a DesktopSourcePreview is double
-         * clicked.
-         */
-        onDoubleClick: PropTypes.func,
+    /**
+     * The handler to be invoked when a DesktopSourcePreview is double clicked.
+     */
+    onDoubleClick: Function,
 
-        /**
-         * The id of the DesktopCapturerSource that is currently selected.
-         */
-        selectedSourceId: PropTypes.string,
+    /**
+     * The id of the DesktopCapturerSource that is currently selected.
+     */
+    selectedSourceId: string,
 
-        /**
-         * An array of DesktopCapturerSources.
-         */
-        sources: PropTypes.array,
+    /**
+     * An array of DesktopCapturerSources.
+     */
+    sources: Array<Object>,
 
-        /**
-         * The source type of the DesktopCapturerSources to display.
-         */
-        type: PropTypes.string
-    };
+    /**
+     * The source type of the DesktopCapturerSources to display.
+     */
+    type: string
+};
 
+/**
+ * React component for showing a grid of DesktopSourcePreviews.
+ *
+ * @extends Component
+ */
+class DesktopPickerPane extends Component<Props> {
     /**
      * Implements React's {@link Component#render()}.
      *

react/features/desktop-picker/components/DesktopSourcePreview.js

@@ -1,55 +1,56 @@
-import PropTypes from 'prop-types';
+/* @flow */
+
 import React, { Component } from 'react';
 
 /**
- * React component for displaying a preview of a DesktopCapturerSource.
- *
- * @extends Component
+ * The type of the React {@code Component} props of
+ * {@link DesktopSourcePreview}.
  */
-class DesktopSourcePreview extends Component {
+type Props = {
+
     /**
-     * DesktopSourcePreview component's property types.
-     *
-     * @static
+     * The callback to invoke when the component is clicked. The id of the
+     * clicked on DesktopCapturerSource will be passed in.
      */
-    static propTypes = {
-        /**
-         * The callback to invoke when the component is clicked. The id of
-         * the DesktopCapturerSource will be passed in.
-         */
-        onClick: PropTypes.func,
-
-        /**
-         * The callback to invoke when the component is double clicked. The id
-         * of the DesktopCapturerSource will be passed in.
-         */
-        onDoubleClick: PropTypes.func,
-
-        /**
-         * The indicator which determines whether this DesktopSourcePreview is
-         * selected. If true, the 'is-selected' CSS class will be added to the
-         * Component.
-         */
-        selected: PropTypes.bool,
-
-        /**
-         * The DesktopCapturerSource to display.
-         */
-        source: PropTypes.object,
-
-        /**
-         * The source type of the DesktopCapturerSources to display.
-         */
-        type: PropTypes.string
-    };
+    onClick: Function,
 
+    /**
+     * The callback to invoke when the component is double clicked. The id of
+     * the DesktopCapturerSource will be passed in.
+     */
+    onDoubleClick: Function,
+
+    /**
+     * The indicator which determines whether this DesktopSourcePreview is
+     * selected. If true, the 'is-selected' CSS class will be added to the root
+     * of Component.
+     */
+    selected: boolean,
+
+    /**
+     * The DesktopCapturerSource to display.
+     */
+    source: Object,
+
+    /**
+     * The source type of the DesktopCapturerSources to display.
+     */
+    type: string
+};
+
+/**
+ * React component for displaying a preview of a DesktopCapturerSource.
+ *
+ * @extends Component
+ */
+class DesktopSourcePreview extends Component<Props> {
     /**
      * Initializes a new DesktopSourcePreview instance.
      *
      * @param {Object} props - The read-only properties with which the new
      * instance is to be initialized.
      */
-    constructor(props) {
+    constructor(props: Props) {
         super(props);
 
         this._onClick = this._onClick.bind(this);
@@ -83,6 +84,8 @@ class DesktopSourcePreview extends Component {
         );
     }
 
+    _onClick: () => void;
+
     /**
      * Invokes the passed in onClick callback.
      *
@@ -94,6 +97,8 @@ class DesktopSourcePreview extends Component {
         this.props.onClick(source.id, type);
     }
 
+    _onDoubleClick: () => void;
+
     /**
      * Invokes the passed in onDoubleClick callback.
      *

react/features/device-selection/components/AudioInputPreview.js

@@ -1,31 +1,42 @@
-import PropTypes from 'prop-types';
+/* @flow */
+
 import React, { Component } from 'react';
 
 import { JitsiTrackEvents } from '../../base/lib-jitsi-meet';
 
 /**
- * React component for displaying a audio level meter for a JitsiLocalTrack.
+ * The type of the React {@code Component} props of {@link AudioInputPreview}.
  */
-class AudioInputPreview extends Component {
+type Props = {
+
     /**
-     * AudioInputPreview component's property types.
-     *
-     * @static
+     * The JitsiLocalTrack to show an audio level meter for.
+     */
+    track: Object
+};
+
+/**
+ * The type of the React {@code Component} props of {@link AudioInputPreview}.
+ */
+type State = {
+
+    /**
+     * The current audio input level being received, from 0 to 1.
      */
-    static propTypes = {
-        /*
-         * The JitsiLocalTrack to show an audio level meter for.
-         */
-        track: PropTypes.object
-    };
+    audioLevel: number
+};
 
+/**
+ * React component for displaying a audio level meter for a JitsiLocalTrack.
+ */
+class AudioInputPreview extends Component<Props, State> {
     /**
      * Initializes a new AudioInputPreview instance.
      *
      * @param {Object} props - The read-only React Component props with which
      * the new instance is to be initialized.
      */
-    constructor(props) {
+    constructor(props: Props) {
         super(props);
 
         this.state = {
@@ -52,7 +63,7 @@ class AudioInputPreview extends Component {
      * @inheritdoc
      * @returns {void}
      */
-    componentWillReceiveProps(nextProps) {
+    componentWillReceiveProps(nextProps: Props) {
         if (nextProps.track !== this.props.track) {
             this._listenForAudioUpdates(nextProps.track);
             this._updateAudioLevel(0);
@@ -117,6 +128,8 @@ class AudioInputPreview extends Component {
             this._updateAudioLevel);
     }
 
+    _updateAudioLevel: (number) => void;
+
     /**
      * Updates the internal state of the last know audio level. The level should
      * be between 0 and 1, as the level will be used as a percentage out of 1.

react/features/device-selection/components/AudioOutputPreview.js

@@ -1,4 +1,5 @@
-import PropTypes from 'prop-types';
+/* @flow */
+
 import React, { Component } from 'react';
 
 import { translate } from '../../base/i18n';
@@ -6,28 +7,29 @@ import { Audio } from '../../base/media';
 
 const TEST_SOUND_PATH = 'sounds/ring.wav';
 
+/**
+ * The type of the React {@code Component} props of {@link AudioOutputPreview}.
+ */
+type Props = {
+
+    /**
+     * The device id of the audio output device to use.
+     */
+    deviceId: string,
+
+    /**
+     * Invoked to obtain translated strings.
+     */
+    t: Function
+};
+
 /**
  * React component for playing a test sound through a specified audio device.
  *
  * @extends Component
  */
-class AudioOutputPreview extends Component {
-    /**
-     * AudioOutputPreview component's property types.
-     *
-     * @static
-     */
-    static propTypes = {
-        /**
-         * The device id of the audio output device to use.
-         */
-        deviceId: PropTypes.string,
-
-        /**
-         * Invoked to obtain translated strings.
-         */
-        t: PropTypes.func
-    };
+class AudioOutputPreview extends Component<Props> {
+    _audioElement: ?Object;
 
     /**
      * Initializes a new AudioOutputPreview instance.
@@ -35,7 +37,7 @@ class AudioOutputPreview extends Component {
      * @param {Object} props - The read-only React Component props with which
      * the new instance is to be initialized.
      */
-    constructor(props) {
+    constructor(props: Props) {
         super(props);
 
         this._audioElement = null;
@@ -85,6 +87,8 @@ class AudioOutputPreview extends Component {
         );
     }
 
+    _onClick: () => void;
+
     /**
      * Plays a test sound.
      *
@@ -96,6 +100,8 @@ class AudioOutputPreview extends Component {
         && this._audioElement.play();
     }
 
+    _setAudioElement: (Object) => void;
+
     /**
      * Sets the instance variable for the component's audio element so it can be
      * accessed directly.
@@ -104,7 +110,7 @@ class AudioOutputPreview extends Component {
      * @private
      * @returns {void}
      */
-    _setAudioElement(element) {
+    _setAudioElement(element: Object) {
         this._audioElement = element;
     }
 

react/features/device-selection/components/DeviceSelector.web.js

@@ -1,64 +1,64 @@
+/* @flow */
+
 import AKDropdownMenu from '@atlaskit/dropdown-menu';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
-import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import { translate } from '../../base/i18n';
 
+/**
+ * The type of the React {@code Component} props of {@link DeviceSelector}.
+ */
+type Props = {
+
+    /**
+     * MediaDeviceInfos used for display in the select element.
+     */
+    devices: Array<Object>,
+
+    /**
+     * If false, will return a selector with no selection options.
+     */
+    hasPermission: boolean,
+
+    /**
+     * CSS class for the icon to the left of the dropdown trigger.
+     */
+    icon: string,
+
+    /**
+     * If true, will render the selector disabled with a default selection.
+     */
+    isDisabled: boolean,
+
+    /**
+     * The translation key to display as a menu label.
+     */
+    label: string,
+
+    /**
+     * The callback to invoke when a selection is made.
+     */
+    onSelect: Function,
+
+    /**
+     * The default device to display as selected.
+     */
+    selectedDeviceId: string,
+
+    /**
+     * Invoked to obtain translated strings.
+     */
+    t: Function
+};
+
 /**
  * React component for selecting a device from a select element. Wraps
  * AKDropdownMenu with device selection specific logic.
  *
  * @extends Component
  */
-class DeviceSelector extends Component {
-    /**
-     * DeviceSelector component's property types.
-     *
-     * @static
-     */
-    static propTypes = {
-        /**
-         * MediaDeviceInfos used for display in the select element.
-         */
-        devices: PropTypes.array,
-
-        /**
-         * If false, will return a selector with no selection options.
-         */
-        hasPermission: PropTypes.bool,
-
-        /**
-         * CSS class for the icon to the left of the dropdown trigger.
-         */
-        icon: PropTypes.string,
-
-        /**
-         * If true, will render the selector disabled with a default selection.
-         */
-        isDisabled: PropTypes.bool,
-
-        /**
-         * The translation key to display as a menu label.
-         */
-        label: PropTypes.string,
-
-        /**
-         * The callback to invoke when a selection is made.
-         */
-        onSelect: PropTypes.func,
-
-        /**
-         * The default device to display as selected.
-         */
-        selectedDeviceId: PropTypes.string,
-
-        /**
-         * Invoked to obtain translated strings.
-         */
-        t: PropTypes.func
-    };
-
+class DeviceSelector extends Component<Props> {
     /**
      * Initializes a new DeviceSelector instance.
      *
@@ -178,6 +178,8 @@ class DeviceSelector extends Component {
         );
     }
 
+    _onSelect: (Object) => void;
+
     /**
      * Invokes the passed in callback to notify of selection changes.
      *

react/features/device-selection/components/VideoInputPreview.js

@@ -1,35 +1,35 @@
-import PropTypes from 'prop-types';
+/* @flow */
+
 import React, { Component } from 'react';
 
 import { Video } from '../../base/media';
 
 const VIDEO_ERROR_CLASS = 'video-preview-has-error';
 
+/**
+ * The type of the React {@code Component} props of {@link VideoInputPreview}.
+ */
+type Props = {
+
+    /**
+     * An error message to display instead of a preview. Displaying an error
+     * will take priority over displaying a video preview.
+     */
+    error: string,
+
+    /**
+     * The JitsiLocalTrack to display.
+     */
+    track: Object
+};
+
 /**
  * React component for displaying video. This component defers to lib-jitsi-meet
  * logic for rendering the video.
  *
  * @extends Component
  */
-class VideoInputPreview extends Component {
-    /**
-     * VideoInputPreview component's property types.
-     *
-     * @static
-     */
-    static propTypes = {
-        /**
-         * An error message to display instead of a preview. Displaying an error
-         * will take priority over displaying a video preview.
-         */
-        error: PropTypes.string,
-
-        /**
-         * The JitsiLocalTrack to display.
-         */
-        track: PropTypes.object
-    };
-
+class VideoInputPreview extends Component<Props> {
     /**
      * Implements React's {@link Component#render()}.
      *

react/features/display-name/components/DisplayName.web.js

@@ -1,4 +1,5 @@
-import PropTypes from 'prop-types';
+/* @flow */
+
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -8,53 +9,70 @@ import { translate } from '../../base/i18n';
 import { participantDisplayNameChanged } from '../../base/participants';
 
 /**
- * React {@code Component} for displaying and editing a participant's name.
- *
- * @extends Component
+ * The type of the React {@code Component} props of {@link DisplayName}.
  */
-class DisplayName extends Component {
+type Props = {
+
     /**
-     * {@code DisplayName}'s property types.
-     *
-     * @static
+     * Whether or not the display name should be editable on click.
      */
-    static propTypes = {
-        /**
-         * Whether or not the display name should be editable on click.
-         */
-        allowEditing: PropTypes.bool,
+    allowEditing: boolean,
 
-        /**
-         * Invoked to update the participant's display name.
-         */
-        dispatch: PropTypes.func,
+    /**
+     * Invoked to update the participant's display name.
+     */
+    dispatch: Dispatch<*>,
 
-        /**
-         * The participant's current display name.
-         */
-        displayName: PropTypes.string,
+    /**
+     * The participant's current display name.
+     */
+    displayName: string,
 
-        /**
-         * A string to append to the displayName, if provided.
-         */
-        displayNameSuffix: PropTypes.string,
+    /**
+     * A string to append to the displayName, if provided.
+     */
+    displayNameSuffix: string,
 
-        /**
-         * The ID attribute to add to the component. Useful for global querying
-         * for the component by legacy components and torture tests.
-         */
-        elementID: PropTypes.string,
+    /**
+     * The ID attribute to add to the component. Useful for global querying for
+     * the component by legacy components and torture tests.
+     */
+    elementID: string,
 
-        /**
-         * The ID of the participant whose name is being displayed.
-         */
-        participantID: PropTypes.string,
+    /**
+     * The ID of the participant whose name is being displayed.
+     */
+    participantID: string,
 
-        /**
-         * Invoked to obtain translated strings.
-         */
-        t: PropTypes.func
-    };
+    /**
+     * Invoked to obtain translated strings.
+     */
+    t: Function
+};
+
+/**
+ * The type of the React {@code Component} state of {@link DisplayName}.
+ */
+type State = {
+
+    /**
+     * The current value of the display name in the edit field.
+     */
+    editDisplayNameValue: string,
+
+    /**
+     * Whether or not the component should be displaying an editable input.
+     */
+    isEditing: boolean
+};
+
+/**
+ * React {@code Component} for displaying and editing a participant's name.
+ *
+ * @extends Component
+ */
+class DisplayName extends Component<Props, State> {
+    _nameInput: ?HTMLInputElement;
 
     /**
      * Initializes a new {@code DisplayName} instance.
@@ -62,23 +80,11 @@ class DisplayName extends Component {
      * @param {Object} props - The read-only properties with which the new
      * instance is to be initialized.
      */
-    constructor(props) {
+    constructor(props: Props) {
         super(props);
 
         this.state = {
-            /**
-             * The current value of the display name in the edit field.
-             *
-             * @type {string}
-             */
             editDisplayNameValue: '',
-
-            /**
-             * Whether or not the component should be displaying an editable
-             * input.
-             *
-             * @type {boolean}
-             */
             isEditing: false
         };
 
@@ -109,7 +115,9 @@ class DisplayName extends Component {
      * @returns {void}
      */
     componentDidUpdate(previousProps, previousState) {
-        if (!previousState.isEditing && this.state.isEditing) {
+        if (!previousState.isEditing
+            && this.state.isEditing
+            && this._nameInput) {
             this._nameInput.select();
         }
     }
@@ -156,6 +164,8 @@ class DisplayName extends Component {
         );
     }
 
+    _onChange: () => void;
+
     /**
      * Updates the internal state of the display name entered into the edit
      * field.
@@ -170,6 +180,8 @@ class DisplayName extends Component {
         });
     }
 
+    _onKeyDown: () => void;
+
     /**
      * Submits the editted display name update if the enter key is pressed.
      *
@@ -183,6 +195,8 @@ class DisplayName extends Component {
         }
     }
 
+    _onStartEditing: () => void;
+
     /**
      * Updates the component to display an editable input field and sets the
      * initial value to the current display name.
@@ -199,6 +213,8 @@ class DisplayName extends Component {
         }
     }
 
+    _onSubmit: () => void;
+
     /**
      * Dispatches an action to update the display name if any change has
      * occurred after editing. Clears any temporary state used to keep track
@@ -223,6 +239,8 @@ class DisplayName extends Component {
         this._nameInput = null;
     }
 
+    _setNameInputRef: (HTMLInputElement | null) => void;
+
     /**
      * Sets the internal reference to the HTML element backing the React
      * {@code Component} input with id {@code editDisplayName}.

react/features/display-name/components/DisplayNamePrompt.web.js

@@ -1,4 +1,5 @@
-import PropTypes from 'prop-types';
+/* @flow */
+
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { FieldTextStateless as TextField } from '@atlaskit/field-text';
@@ -11,50 +12,55 @@ import {
 } from '../../base/participants';
 
 /**
- * Implements a React {@code Component} for displaying a dialog with an field
- * for setting the local participant's display name.
- *
- * @extends Component
+ * The type of the React {@code Component} props of {@link DisplayNamePrompt}.
  */
-class DisplayNamePrompt extends Component {
+type Props = {
+
     /**
-     * {@code DisplayNamePrompt} component's property types.
-     *
-     * @static
+     * The current ID for the local participant. Used for setting the display
+     * name on the associated participant.
      */
-    static propTypes = {
-        /**
-         * The current ID for the local participant. Used for setting the
-         * display name on the associated participant.
-         */
-        _localParticipantID: PropTypes.string,
+    _localParticipantID: string,
 
-        /**
-         * Invoked to update the local participant's display name.
-         */
-        dispatch: PropTypes.func,
+    /**
+     * Invoked to update the local participant's display name.
+     */
+    dispatch: Dispatch<*>,
 
-        /**
-         * Invoked to obtain translated strings.
-         */
-        t: PropTypes.func
-    };
+    /**
+     * Invoked to obtain translated strings.
+     */
+    t: Function
+};
+
+/**
+ * The type of the React {@code Component} props of {@link DisplayNamePrompt}.
+ */
+type State = {
 
+    /**
+     * The name to show in the display name text field.
+     */
+    displayName: string
+};
+
+/**
+ * Implements a React {@code Component} for displaying a dialog with an field
+ * for setting the local participant's display name.
+ *
+ * @extends Component
+ */
+class DisplayNamePrompt extends Component<Props, State> {
     /**
      * Initializes a new {@code DisplayNamePrompt} instance.
      *
      * @param {Object} props - The read-only properties with which the new
      * instance is to be initialized.
      */
-    constructor(props) {
+    constructor(props: Props) {
         super(props);
 
         this.state = {
-            /**
-             * The name to show in the display name text field.
-             *
-             * @type {string}
-             */
             displayName: ''
         };
 
@@ -88,6 +94,8 @@ class DisplayNamePrompt extends Component {
             </Dialog>);
     }
 
+    _onDisplayNameChange: (Object) => void;
+
     /**
      * Updates the entered display name.
      *
@@ -102,12 +110,14 @@ class DisplayNamePrompt extends Component {
         });
     }
 
+    _onSubmit: () => boolean;
+
     /**
      * Dispatches an action to update the local participant's display name. A
      * name must be entered for the action to dispatch.
      *
      * @private
-     * @returns {void}
+     * @returns {boolean}
      */
     _onSubmit() {
         const { displayName } = this.state;

react/features/feedback/components/FeedbackDialog.web.js

@@ -1,9 +1,8 @@
-/* global interfaceConfig */
+/* @flow */
 
 import { FieldTextAreaStateless } from '@atlaskit/field-text-area';
 import StarIcon from '@atlaskit/icon/glyph/star';
 import StarFilledIcon from '@atlaskit/icon/glyph/star-filled';
-import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -16,6 +15,8 @@ import { translate } from '../../base/i18n';
 
 import { cancelFeedback, submitFeedback } from '../actions';
 
+declare var interfaceConfig: Object;
+
 const scoreAnimationClass
     = interfaceConfig.ENABLE_FEEDBACK_ANIMATION ? 'shake-rotate' : '';
 
@@ -34,55 +35,83 @@ const SCORES = [
 ];
 
 /**
- * A React {@code Component} for displaying a dialog to rate the current
- * conference quality, write a message describing the experience, and submit
- * the feedback.
- *
- * @extends Component
+ * The type of the React {@code Component} props of {@link FeedbackDialog}.
  */
-class FeedbackDialog extends Component {
+type Props = {
+
     /**
-     * {@code FeedbackDialog} component's property types.
-     *
-     * @static
+     * The cached feedback message, if any, that was set when closing a previous
+     * instance of {@code FeedbackDialog}.
      */
-    static propTypes = {
-        /**
-         * The cached feedback message, if any, that was set when closing a
-         * previous instance of {@code FeedbackDialog}.
-         */
-        _message: PropTypes.string,
+    _message: string,
 
-        /**
-         * The cached feedback score, if any, that was set when closing a
-         * previous instance of {@code FeedbackDialog}.
-         */
-        _score: PropTypes.number,
+    /**
+     * The cached feedback score, if any, that was set when closing a previous
+     * instance of {@code FeedbackDialog}.
+     */
+    _score: number,
 
-        /**
-         * The JitsiConference that is being rated. The conference is passed in
-         * because feedback can occur after a conference has been left, so
-         * references to it may no longer exist in redux.
-         *
-         * @type {JitsiConference}
-         */
-        conference: PropTypes.object,
+    /**
+     * The JitsiConference that is being rated. The conference is passed in
+     * because feedback can occur after a conference has been left, so
+     * references to it may no longer exist in redux.
+     */
+    conference: Object,
 
-        /**
-         * Invoked to signal feedback submission or canceling.
-         */
-        dispatch: PropTypes.func,
+    /**
+     * Invoked to signal feedback submission or canceling.
+     */
+    dispatch: Dispatch<*>,
 
-        /**
-         * Callback invoked when {@code FeedbackDialog} is unmounted.
-         */
-        onClose: PropTypes.func,
+    /**
+     * Callback invoked when {@code FeedbackDialog} is unmounted.
+     */
+    onClose: Function,
 
-        /**
-         * Invoked to obtain translated strings.
-         */
-        t: PropTypes.func
-    };
+    /**
+     * Invoked to obtain translated strings.
+     */
+    t: Function
+};
+
+/**
+ * The type of the React {@code Component} state of {@link FeedbackDialog}.
+ */
+type State = {
+
+    /**
+     * The currently entered feedback message.
+     */
+    message: string,
+
+    /**
+     * The score selection index which is currently being hovered. The value -1
+     * is used as a sentinel value to match store behavior of using -1 for no
+     * score having been selected.
+     */
+    mousedOverScore: number,
+
+    /**
+     * The currently selected score selection index. The score will not be 0
+     * indexed so subtract one to map with SCORES.
+     */
+    score: number
+};
+
+/**
+ * A React {@code Component} for displaying a dialog to rate the current
+ * conference quality, write a message describing the experience, and submit
+ * the feedback.
+ *
+ * @extends Component
+ */
+class FeedbackDialog extends Component<Props, State> {
+    /**
+     * An array of objects with click handlers for each of the scores listed in
+     * the constant SCORES. This pattern is used for binding event handlers only
+     * once for each score selection icon.
+     */
+    _scoreClickConfigurations: Array<Object>;
 
     /**
      * Initializes a new {@code FeedbackDialog} instance.
@@ -90,7 +119,7 @@ class FeedbackDialog extends Component {
      * @param {Object} props - The read-only React {@code Component} props with
      * which the new instance is to be initialized.
      */
-    constructor(props) {
+    constructor(props: Props) {
         super(props);
 
         const { _message, _score } = this.props;
@@ -121,13 +150,6 @@ class FeedbackDialog extends Component {
             score: _score > -1 ? _score - 1 : _score
         };
 
-        /**
-         * An array of objects with click handlers for each of the scores listed
-         * in SCORES. This pattern is used for binding event handlers only once
-         * for each score selection icon.
-         *
-         * @type {Object[]}
-         */
         this._scoreClickConfigurations = SCORES.map((textKey, index) => {
             return {
                 _onClick: () => this._onScoreSelect(index),
@@ -234,6 +256,8 @@ class FeedbackDialog extends Component {
         );
     }
 
+    _onCancel: () => boolean;
+
     /**
      * Dispatches an action notifying feedback was not submitted. The submitted
      * score will have one added as the rest of the app does not expect 0
@@ -251,6 +275,8 @@ class FeedbackDialog extends Component {
         return true;
     }
 
+    _onMessageChange: (Object) => void;
+
     /**
      * Updates the known entered feedback message.
      *
@@ -274,6 +300,8 @@ class FeedbackDialog extends Component {
         this.setState({ score });
     }
 
+    _onScoreContainerMouseLeave: () => void;
+
     /**
      * Sets the currently hovered score to null to indicate no hover is
      * occurring.
@@ -297,6 +325,8 @@ class FeedbackDialog extends Component {
         this.setState({ mousedOverScore });
     }
 
+    _onSubmit: () => void;
+
     /**
      * Dispatches the entered feedback for submission. The submitted score will
      * have one added as the rest of the app does not expect 0 indexing.

react/features/filmstrip/components/web/AudioMutedIndicator.js

@@ -1,26 +1,26 @@
-import PropTypes from 'prop-types';
+/* @flow */
+
 import React, { Component } from 'react';
 
 import BaseIndicator from './BaseIndicator';
 
 /**
- * React {@code Component} for showing an audio muted icon with a tooltip.
- *
- * @extends Component
+ * The type of the React {@code Component} props of {@link AudioMutedIndicator}.
  */
-class AudioMutedIndicator extends Component {
+type Props = {
+
     /**
-     * {@code AudioMutedIndicator} component's property types.
-     *
-     * @static
+     * From which side of the indicator the tooltip should appear from.
      */
-    static propTypes = {
-        /**
-         * From which side of the indicator the tooltip should appear from.
-         */
-        tooltipPosition: PropTypes.string
-    };
+    tooltipPosition: string
+};
 
+/**
+ * React {@code Component} for showing an audio muted icon with a tooltip.
+ *
+ * @extends Component
+ */
+class AudioMutedIndicator extends Component<Props> {
     /**
      * Implements React's {@link Component#render()}.
      *

react/features/filmstrip/components/web/BaseIndicator.js

@@ -1,15 +1,59 @@
-import PropTypes from 'prop-types';
+/* @flow */
+
 import React, { Component } from 'react';
 import Tooltip from '@atlaskit/tooltip';
 
 import { translate } from '../../../base/i18n';
 
+/**
+ * The type of the React {@code Component} props of {@link BaseIndicator}.
+ */
+type Props = {
+
+    /**
+     * Additional CSS class names to set on the icon container.
+     */
+    className: string,
+
+    /**
+     * The CSS classnames to set on the icon element of the component.
+     */
+    iconClassName: string,
+
+    /**
+     * The font size for the icon.
+     */
+    iconSize: string,
+
+    /**
+     * The ID attribue to set on the root element of the component.
+     */
+    id: string,
+
+    /**
+     * Invoked to obtain translated strings.
+     */
+    t: Function,
+
+    /**
+     * The translation key to use for displaying a tooltip when hovering over
+     * the component.
+     */
+    tooltipKey: string,
+
+    /**
+     * From which side of the indicator the tooltip should appear from,
+     * defaulting to "top".
+     */
+    tooltipPosition: string
+};
+
 /**
  * React {@code Component} for showing an icon with a tooltip.
  *
  * @extends Component
  */
-class BaseIndicator extends Component {
+class BaseIndicator extends Component<Props> {
     /**
      * Default values for {@code BaseIndicator} component's properties.
      *
@@ -23,50 +67,6 @@ class BaseIndicator extends Component {
         tooltipPosition: 'top'
     };
 
-    /**
-     * {@code BaseIndicator} component's property types.
-     *
-     * @static
-     */
-    static propTypes = {
-        /**
-         * Additional CSS class names to set on the icon container.
-         */
-        className: PropTypes.string,
-
-        /**
-         * The CSS classnames to set on the icon element of the component.
-         */
-        iconClassName: PropTypes.string,
-
-        /**
-         * The font size for the icon.
-         */
-        iconSize: PropTypes.string,
-
-        /**
-         * The ID attribue to set on the root element of the component.
-         */
-        id: PropTypes.string,
-
-        /**
-         * Invoked to obtain translated strings.
-         */
-        t: PropTypes.func,
-
-        /**
-         * The translation key to use for displaying a tooltip when hovering
-         * over the component.
-         */
-        tooltipKey: PropTypes.string,
-
-        /**
-         * From which side of the indicator the tooltip should appear from.
-         * Defaults to "top".
-         */
-        tooltipPosition: PropTypes.string
-    };
-
     /**
      * Implements React's {@link Component#render()}.
      *

react/features/filmstrip/components/web/DominantSpeakerIndicator.js

@@ -1,34 +1,33 @@
-import PropTypes from 'prop-types';
+/* @flow */
+
 import React, { Component } from 'react';
 
 import BaseIndicator from './BaseIndicator';
 
 /**
- * Thumbnail badge showing that the participant is the dominant speaker in
- * the conference.
- *
- * @extends Component
+ * The type of the React {@code Component} props of
+ * {@link DominantSpeakerIndicator}.
  */
-class DominantSpeakerIndicator extends Component {
+type Props = {
+
     /**
-     * {@code DominantSpeakerIndicator} component's property types.
-     *
-     * @static
+     * The font-size for the icon.
      */
-    static propTypes = {
-        /**
-         * The font-size for the icon.
-         *
-         * @type {number}
-         */
-        iconSize: PropTypes.number,
+    iconSize: number,
 
-        /**
-         * From which side of the indicator the tooltip should appear from.
-         */
-        tooltipPosition: PropTypes.string
-    };
+    /**
+     * From which side of the indicator the tooltip should appear from.
+     */
+    tooltipPosition: string
+};
 
+/**
+ * Thumbnail badge showing that the participant is the dominant speaker in
+ * the conference.
+ *
+ * @extends Component
+ */
+class DominantSpeakerIndicator extends Component<Props> {
     /**
      * Implements React's {@link Component#render()}.
      *

react/features/filmstrip/components/web/ModeratorIndicator.js

@@ -1,26 +1,26 @@
-import PropTypes from 'prop-types';
+/* @flow */
+
 import React, { Component } from 'react';
 
 import BaseIndicator from './BaseIndicator';
 
 /**
- * React {@code Component} for showing a moderator icon with a tooltip.
- *
- * @extends Component
+ * The type of the React {@code Component} props of {@link ModeratorIndicator}.
  */
-class ModeratorIndicator extends Component {
+type Props = {
+
     /**
-     * {@code ModeratorIndicator} component's property types.
-     *
-     * @static
+     * From which side of the indicator the tooltip should appear from.
      */
-    static propTypes = {
-        /**
-         * From which side of the indicator the tooltip should appear from.
-         */
-        tooltipPosition: PropTypes.string
-    };
+    tooltipPosition: string
+};
 
+/**
+ * React {@code Component} for showing a moderator icon with a tooltip.
+ *
+ * @extends Component
+ */
+class ModeratorIndicator extends Component<Props> {
     /**
      * Implements React's {@link Component#render()}.
      *

react/features/filmstrip/components/web/RaisedHandIndicator.js

@@ -1,33 +1,31 @@
-import PropTypes from 'prop-types';
+/* @flow */
+
 import React, { Component } from 'react';
 
 import BaseIndicator from './BaseIndicator';
 
 /**
- * Thumbnail badge showing that the participant would like to speak.
- *
- * @extends Component
+ * The type of the React {@code Component} props of {@link RaisedHandIndicator}.
  */
-class RaisedHandIndicator extends Component {
+type Props = {
+
     /**
-     * {@code RaisedHandIndicator} component's property types.
-     *
-     * @static
+     * The font-size for the icon.
      */
-    static propTypes = {
-        /**
-         * The font-size for the icon.
-         *
-         * @type {number}
-         */
-        iconSize: PropTypes.number,
+    iconSize: number,
 
-        /**
-         * From which side of the indicator the tooltip should appear from.
-         */
-        tooltipPosition: PropTypes.string
-    };
+    /**
+     * From which side of the indicator the tooltip should appear from.
+     */
+    tooltipPosition: string
+};
 
+/**
+ * Thumbnail badge showing that the participant would like to speak.
+ *
+ * @extends Component
+ */
+class RaisedHandIndicator extends Component<Props> {
     /**
      * Implements React's {@link Component#render()}.
      *

react/features/filmstrip/components/web/VideoMutedIndicator.js

@@ -1,26 +1,26 @@
-import PropTypes from 'prop-types';
+/* @flow */
+
 import React, { Component } from 'react';
 
 import BaseIndicator from './BaseIndicator';
 
 /**
- * React {@code Component} for showing a video muted icon with a tooltip.
- *
- * @extends Component
+ * The type of the React {@code Component} props of {@link VideoMutedIndicator}.
  */
-class VideoMutedIndicator extends Component {
+type Props = {
+
     /**
-     * {@code VideoMutedIndicator} component's property types.
-     *
-     * @static
+     * From which side of the indicator the tooltip should appear from.
      */
-    static propTypes = {
-        /**
-         * From which side of the indicator the tooltip should appear from.
-         */
-        tooltipPosition: PropTypes.string
-    };
+    tooltipPosition: string
+};
 
+/**
+ * React {@code Component} for showing a video muted icon with a tooltip.
+ *
+ * @extends Component
+ */
+class VideoMutedIndicator extends Component<Props> {
     /**
      * Implements React's {@link Component#render()}.
      *

react/features/invite/components/AddPeopleDialog.web.js

@@ -2,7 +2,6 @@
 
 import Avatar from '@atlaskit/avatar';
 import InlineMessage from '@atlaskit/inline-message';
-import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -20,87 +19,95 @@ const logger = require('jitsi-meet-logger').getLogger(__filename);
 declare var interfaceConfig: Object;
 
 /**
- * The dialog that allows to invite people to the call.
+ * The type of the React {@code Component} props of {@link AddPeopleDialog}.
  */
-class AddPeopleDialog extends Component<*, *> {
+type Props = {
+
     /**
-     * {@code AddPeopleDialog}'s property types.
-     *
-     * @static
+     * The {@link JitsiMeetConference} which will be used to invite "room"
+     * participants through the SIP Jibri (Video SIP gateway).
      */
-    static propTypes = {
-        /**
-         * The {@link JitsiMeetConference} which will be used to invite "room"
-         * participants through the SIP Jibri (Video SIP gateway).
-         */
-        _conference: PropTypes.object,
+    _conference: Object,
 
-        /**
-         * The URL for validating if a phone number can be called.
-         */
-        _dialOutAuthUrl: PropTypes.string,
+    /**
+     * The URL for validating if a phone number can be called.
+     */
+    _dialOutAuthUrl: string,
 
-        /**
-         * Whether to show a footer text after the search results
-         * as a last element.
-         */
-        _footerTextEnabled: PropTypes.bool,
+    /**
+     * Whether to show a footer text after the search results as a last element.
+     */
+    _footerTextEnabled: boolean,
 
-        /**
-         * The JWT token.
-         */
-        _jwt: PropTypes.string,
+    /**
+     * The JWT token.
+     */
+    _jwt: string,
 
-        /**
-         * The query types used when searching people.
-         */
-        _peopleSearchQueryTypes: PropTypes.arrayOf(PropTypes.string),
+    /**
+     * The query types used when searching people.
+     */
+    _peopleSearchQueryTypes: Array<string>,
 
-        /**
-         * The URL pointing to the service allowing for people search.
-         */
-        _peopleSearchUrl: PropTypes.string,
+    /**
+     * The URL pointing to the service allowing for people search.
+     */
+    _peopleSearchUrl: string,
 
-        /**
-         * Whether or not to show Add People functionality.
-         */
-        addPeopleEnabled: PropTypes.bool,
+    /**
+     * Whether or not to show Add People functionality.
+     */
+    addPeopleEnabled: boolean,
 
-        /**
-         * Whether or not to show Dial Out functionality.
-         */
-        dialOutEnabled: PropTypes.bool,
+    /**
+     * Whether or not to show Dial Out functionality.
+     */
+    dialOutEnabled: boolean,
 
-        /**
-         * The redux {@code dispatch} function.
-         */
-        dispatch: PropTypes.func,
+    /**
+     * The redux {@code dispatch} function.
+     */
+    dispatch: Dispatch<*>,
 
-        /**
-         * Invoked to obtain translated strings.
-         */
-        t: PropTypes.func
-    };
+    /**
+     * Invoked to obtain translated strings.
+     */
+    t: Function,
+};
+
+/**
+ * The type of the React {@code Component} state of {@link AddPeopleDialog}.
+ */
+type State = {
+
+    /**
+     * Indicating that an error occurred when adding people to the call.
+     */
+    addToCallError: boolean,
+
+    /**
+     * Indicating that we're currently adding the new people to the
+     * call.
+     */
+    addToCallInProgress: boolean,
+
+    /**
+     * The list of invite items.
+     */
+    inviteItems: Array<Object>
+};
 
+/**
+ * The dialog that allows to invite people to the call.
+ */
+class AddPeopleDialog extends Component<Props, State> {
     _multiselect = null;
 
     _resourceClient: Object;
 
     state = {
-        /**
-         * Indicating that an error occurred when adding people to the call.
-         */
         addToCallError: false,
-
-        /**
-         * Indicating that we're currently adding the new people to the
-         * call.
-         */
         addToCallInProgress: false,
-
-        /**
-         * The list of invite items.
-         */
         inviteItems: []
     };
 
@@ -110,7 +117,7 @@ class AddPeopleDialog extends Component<*, *> {
      * @param {Object} props - The read-only properties with which the new
      * instance is to be initialized.
      */
-    constructor(props) {
+    constructor(props: Props) {
         super(props);
 
         // Bind event handlers so they are only bound once per instance.
@@ -142,10 +149,11 @@ class AddPeopleDialog extends Component<*, *> {
     /**
      * React Component method that executes once component is updated.
      *
+     * @param {Object} prevProps - The state object before the update.
      * @param {Object} prevState - The state object before the update.
      * @returns {void}
      */
-    componentDidUpdate(prevState) {
+    componentDidUpdate(prevProps, prevState) {
         /**
          * Clears selected items from the multi select component on successful
          * invite.

react/features/invite/components/dial-in-info-page/NoRoomError.web.js

@@ -1,32 +1,32 @@
-import PropTypes from 'prop-types';
+/* @flow */
+
 import React, { Component } from 'react';
 
 import { translate } from '../../../base/i18n';
 
+/**
+ * The type of the React {@code Component} props of {@link NoRoomError}.
+ */
+type Props = {
+
+    /**
+     * Additional CSS classnames to append to the root of the component.
+     */
+    className: string,
+
+    /**
+     * Invoked to obtain translated strings.
+     */
+    t: Function
+};
+
 /**
  * Displays an error message stating no room name was specified to fetch dial-in
  * numbers for.
  *
  * @extends Component
  */
-class NoRoomError extends Component {
-    /**
-     * {@code NoRoomError} component's property types.
-     *
-     * @static
-     */
-    static propTypes = {
-        /**
-         * Additional CSS classnames to append to the root of the component.
-         */
-        className: PropTypes.string,
-
-        /**
-         * Invoked to obtain translated strings.
-         */
-        t: PropTypes.func
-    };
-
+class NoRoomError extends Component<Props> {
     /**
      * Implements React's {@link Component#render()}.
      *

react/features/invite/components/dial-in-summary/ConferenceID.web.js

@@ -1,31 +1,31 @@
-import PropTypes from 'prop-types';
+/* @flow */
+
 import React, { Component } from 'react';
 
 import { translate } from '../../../base/i18n';
 
 /**
- * Displays a conference ID used as a pin for dialing into a conferene.
- *
- * @extends Component
+ * The type of the React {@code Component} props of {@link ConferenceID}.
  */
-class ConferenceID extends Component {
+type Props = {
+
     /**
-     * {@code ConferenceID} component's property types.
-     *
-     * @static
+     * The conference ID for dialing in.
+     */
+    conferenceID: number,
+
+    /**
+     * Invoked to obtain translated strings.
      */
-    static propTypes = {
-        /**
-         * The conference ID for dialing in.
-         */
-        conferenceID: PropTypes.number,
-
-        /**
-         * Invoked to obtain translated strings.
-         */
-        t: PropTypes.func
-    };
+    t: Function
+};
 
+/**
+ * Displays a conference ID used as a pin for dialing into a conference.
+ *
+ * @extends Component
+ */
+class ConferenceID extends Component<Props> {
     /**
      * Implements React's {@link Component#render()}.
      *

react/features/invite/components/dial-in-summary/DialInSummary.web.js

@@ -1,6 +1,5 @@
-/* global config */
+/* @flow */
 
-import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import { translate } from '../../../base/i18n';
@@ -8,53 +7,72 @@ import { translate } from '../../../base/i18n';
 import ConferenceID from './ConferenceID';
 import NumbersList from './NumbersList';
 
+declare var config: Object;
+
 /**
- * Displays a page listing numbers for dialing into a conference and pin to
- * the a specific conference.
- *
- * @extends Component
+ * The type of the React {@code Component} props of {@link DialInSummary}.
  */
-class DialInSummary extends Component {
+type Props = {
+
     /**
-     * {@code DialInSummary} component's property types.
-     *
-     * @static
-     */
-    static propTypes = {
-        /**
-         * Additional CSS classnames to append to the root of the component.
-         */
-        className: PropTypes.string,
-
-        /**
-         * Whether or not numbers should include links with the telephone
-         * protocol.
-         */
-        clickableNumbers: PropTypes.bool,
-
-        /**
-         * The name of the conference to show a conferenceID for.
-         */
-        room: PropTypes.string,
-
-        /**
-         * Invoked to obtain translated strings.
-         */
-        t: PropTypes.func
-    };
+     * Additional CSS classnames to append to the root of the component.
+     */
+    className: string,
 
     /**
-     * {@code DialInSummary} component's local state.
-     *
-     * @type {Object}
-     * @property {number} conferenceID - The numeric ID of the conference, used
-     * as a pin when dialing in.
-     * @property {string} error - An error message to display.
-     * @property {boolean} loading - Whether or not the app is fetching data.
-     * @property {Array|Object} numbers - The dial-in numbers.
-     * entered by the local participant.
-     * @property {boolean} numbersEnabled - Whether or not dial-in is allowed.
+     * Whether or not numbers should include links with the telephone protocol.
      */
+    clickableNumbers: boolean,
+
+    /**
+     * The name of the conference to show a conferenceID for.
+     */
+    room: string,
+
+    /**
+     * Invoked to obtain translated strings.
+     */
+    t: Function
+};
+
+/**
+ * The type of the React {@code Component} state of {@link DialInSummary}.
+ */
+type State = {
+
+    /**
+     * The numeric ID of the conference, used as a pin when dialing in.
+     */
+    conferenceID: ?string,
+
+    /**
+     * An error message to display.
+     */
+    error: string,
+
+    /**
+     * Whether or not the app is fetching data.
+     */
+    loading: boolean,
+
+    /**
+     * The dial-in numbers. entered by the local participant.
+     */
+    numbers: ?Array<Object>,
+
+    /**
+     * Whether or not dial-in is allowed.
+     */
+    numbersEnabled: ?boolean
+}
+
+/**
+ * Displays a page listing numbers for dialing into a conference and pin to
+ * the a specific conference.
+ *
+ * @extends Component
+ */
+class DialInSummary extends Component<Props, State> {
     state = {
         conferenceID: null,
         error: '',
@@ -69,7 +87,7 @@ class DialInSummary extends Component {
      * @param {Object} props - The read-only properties with which the new
      * instance is to be initialized.
      */
-    constructor(props) {
+    constructor(props: Props) {
         super(props);
 
         // Bind event handlers so they are only bound once for every instance.
@@ -183,6 +201,8 @@ class DialInSummary extends Component {
             .catch(() => Promise.reject(this.props.t('info.genericError')));
     }
 
+    _onGetConferenceIDSuccess: (Object) => void;
+
     /**
      * Callback invoked when fetching the conference ID succeeds.
      *
@@ -200,6 +220,8 @@ class DialInSummary extends Component {
         this.setState({ conferenceID: id });
     }
 
+    _onGetNumbersSuccess: (Object) => void;
+
     /**
      * Callback invoked when fetching dial-in numbers succeeds. Sets the
      * internal to show the numbers.
@@ -218,6 +240,8 @@ class DialInSummary extends Component {
         });
     }
 
+    _setErrorMessage: (string) => void;
+
     /**
      * Sets an error message to display on the page instead of content.
      *

react/features/invite/components/dial-in-summary/NumbersList.web.js

@@ -1,47 +1,39 @@
-import PropTypes from 'prop-types';
+/* @flow */
+
 import React, { Component } from 'react';
 
 import { translate } from '../../../base/i18n';
 
+type Props = {
+
+    /**
+     * Whether or not numbers should include links with the telephone protocol.
+     */
+    clickableNumbers: boolean,
+
+    /**
+     * The conference ID for dialing in.
+     */
+    conferenceID: number,
+
+    /**
+     * The phone numbers to display. Can be an array of numbers or an object
+     * with countries as keys and an array of numbers as values.
+     */
+    numbers: { [string]: Array<string> } | Array<string>,
+
+    /**
+     * Invoked to obtain translated strings.
+     */
+    t: Function
+}
+
 /**
  * Displays a table with phone numbers to dial in to a conference.
  *
  * @extends Component
  */
-class NumbersList extends Component {
-    /**
-     * {@code NumbersList} component's property types.
-     *
-     * @static
-     */
-    static propTypes = {
-        /**
-         * Whether or not numbers should include links with the telephone
-         * protocol.
-         */
-        clickableNumbers: PropTypes.bool,
-
-        /**
-         * The conference ID for dialing in.
-         */
-        conferenceID: PropTypes.number,
-
-        /**
-         * The phone numbers to display. Can be an array of numbers
-         * or an object with countries as keys and an array of numbers
-         * as values.
-         */
-        numbers: PropTypes.oneOfType([
-            PropTypes.array,
-            PropTypes.object
-        ]),
-
-        /**
-         * Invoked to obtain translated strings.
-         */
-        t: PropTypes.func
-    };
-
+class NumbersList extends Component<Props> {
     /**
      * Implements React's {@link Component#render()}.
      *
@@ -50,22 +42,21 @@ class NumbersList extends Component {
      */
     render() {
         const { numbers, t } = this.props;
-        const showWithoutCountries = Array.isArray(numbers);
 
         return (
             <table className = 'dial-in-numbers-list'>
                 <thead>
                     <tr>
-                        { showWithoutCountries
+                        { Array.isArray(numbers)
                             ? null
                             : <th>{ t('info.country') }</th> }
                         <th>{ t('info.numbers') }</th>
                     </tr>
                 </thead>
                 <tbody className = 'dial-in-numbers-body'>
-                    { showWithoutCountries
+                    { Array.isArray(numbers)
                         ? numbers.map(this._renderNumberRow)
-                        : this._renderWithCountries() }
+                        : this._renderWithCountries(numbers) }
                 </tbody>
             </table>);
     }
@@ -73,15 +64,25 @@ class NumbersList extends Component {
     /**
      * Renders rows of countries and associated phone numbers.
      *
+     * @param {Object} numbersMapping - Things yeah.
      * @private
      * @returns {ReactElement[]}
      */
-    _renderWithCountries() {
+    _renderWithCountries(numbersMapping: Object) {
         const rows = [];
 
-        for (const [ country, numbers ] of Object.entries(this.props.numbers)) {
-            const formattedNumbers = numbers.map(
-                number => this._renderNumberDiv(number));
+        for (const [ country, numbers ] of Object.entries(numbersMapping)) {
+            if (!Array.isArray(numbers)) {
+                return;
+            }
+
+            const formattedNumbers = numbers.map(number => {
+                if (typeof number === 'string') {
+                    return this._renderNumberDiv(number);
+                }
+
+                return null;
+            });
 
             rows.push(
                 <tr key = { country }>

react/features/invite/components/info-dialog/DialInNumber.web.js

@@ -1,39 +1,39 @@
+/* @flow */
+
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 
 import { translate } from '../../../base/i18n';
 
 /**
- * React {@code Component} responsible for displaying a telephone number and
- * conference ID for dialing into a conference.
- *
- * @extends Component
+ * The type of the React {@code Component} props of {@link DialInNumber}.
  */
-class DialInNumber extends Component {
+type Props = {
+
     /**
-     * {@code DialInNumber} component's property types.
-     *
-     * @static
+     * The numberic identifier for the current conference, used after dialing a
+     * the number to join the conference.
      */
-    static propTypes = {
-        /**
-         * The numberic identifier for the current conference, used after
-         * dialing a the number to join the conference.
-         */
-        conferenceID: PropTypes.number,
+    conferenceID: number,
 
-        /**
-         * The phone number to dial to begin the process of dialing into a
-         * conference.
-         */
-        phoneNumber: PropTypes.string,
+    /**
+     * The phone number to dial to begin the process of dialing into a
+     * conference.
+     */
+    phoneNumber: string,
 
-        /**
-         * Invoked to obtain translated strings.
-         */
-        t: PropTypes.func
-    };
+    /**
+     * Invoked to obtain translated strings.
+     */
+    t: Function
+};
 
+/**
+ * React {@code Component} responsible for displaying a telephone number and
+ * conference ID for dialing into a conference.
+ *
+ * @extends Component
+ */
+class DialInNumber extends Component<Props> {
     /**
      * Implements React's {@link Component#render()}.
      *

react/features/invite/components/info-dialog/InfoDialog.web.js

@@ -1,4 +1,5 @@
-import PropTypes from 'prop-types';
+/* @flow */
+
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -14,87 +15,102 @@ import PasswordForm from './PasswordForm';
 const logger = require('jitsi-meet-logger').getLogger(__filename);
 
 /**
- * A React Component with the contents for a dialog that shows information about
- * the current conference.
- *
- * @extends Component
+ * The type of the React {@code Component} props of {@link InfoDialog}.
  */
-class InfoDialog extends Component {
+type Props = {
+
     /**
-     * {@code InfoDialog} component's property types.
-     *
-     * @static
+     * Whether or not the current user can modify the current password.
      */
-    static propTypes = {
-        /**
-         * Whether or not the current user can modify the current password.
-         */
-        _canEditPassword: PropTypes.bool,
+    _canEditPassword: boolean,
 
-        /**
-         * The JitsiConference for which to display a lock state and change the
-         * password.
-         *
-         * @type {JitsiConference}
-         */
-        _conference: PropTypes.object,
+    /**
+     * The JitsiConference for which to display a lock state and change the
+     * password.
+     */
+    _conference: Object,
 
-        /**
-         * The name of the current conference. Used as part of inviting users.
-         */
-        _conferenceName: PropTypes.string,
+    /**
+     * The name of the current conference. Used as part of inviting users.
+     */
+    _conferenceName: string,
 
-        /**
-         * The current url of the conference to be copied onto the clipboard.
-         */
-        _inviteURL: PropTypes.string,
+    /**
+     * The current url of the conference to be copied onto the clipboard.
+     */
+    _inviteURL: string,
 
-        /**
-         * The current location url of the conference.
-         */
-        _locationURL: PropTypes.object,
+    /**
+     * The current location url of the conference.
+     */
+    _locationURL: Object,
 
-        /**
-         * The value for how the conference is locked (or undefined if not
-         * locked) as defined by room-lock constants.
-         */
-        _locked: PropTypes.string,
+    /**
+     * The value for how the conference is locked (or undefined if not locked)
+     * as defined by room-lock constants.
+     */
+    _locked: string,
 
-        /**
-         * The current known password for the JitsiConference.
-         */
-        _password: PropTypes.string,
+    /**
+     * The current known password for the JitsiConference.
+     */
+    _password: string,
 
-        /**
-         * The object representing the dialIn feature.
-         */
-        dialIn: PropTypes.object,
+    /**
+     * The object representing the dialIn feature.
+     */
+    dialIn: Object,
 
-        /**
-         * Invoked to open a dialog for adding participants to the conference.
-         */
-        dispatch: PropTypes.func,
+    /**
+     * Invoked to open a dialog for adding participants to the conference.
+     */
+    dispatch: Dispatch<*>,
 
-        /**
-         * The current known URL for a live stream in progress.
-         */
-        liveStreamViewURL: PropTypes.string,
+    /**
+     * The current known URL for a live stream in progress.
+     */
+    liveStreamViewURL: string,
 
-        /**
-         * Callback invoked when the dialog should be closed.
-         */
-        onClose: PropTypes.func,
+    /**
+     * Callback invoked when the dialog should be closed.
+     */
+    onClose: Function,
 
-        /**
-         * Callback invoked when a mouse-related event has been detected.
-         */
-        onMouseOver: PropTypes.func,
+    /**
+     * Callback invoked when a mouse-related event has been detected.
+     */
+    onMouseOver: Function,
 
-        /**
-         * Invoked to obtain translated strings.
-         */
-        t: PropTypes.func
-    };
+    /**
+     * Invoked to obtain translated strings.
+     */
+    t: Function
+};
+
+/**
+ * The type of the React {@code Component} state of {@link InfoDialog}.
+ */
+type State = {
+
+    /**
+     * Whether or not to show the password in editing mode.
+     */
+    passwordEditEnabled: boolean,
+
+    /**
+     * The conference dial-in number to display.
+     */
+    phoneNumber: ?string
+};
+
+/**
+ * A React Component with the contents for a dialog that shows information about
+ * the current conference.
+ *
+ * @extends Component
+ */
+class InfoDialog extends Component<Props, State> {
+    _copyElement: ?Object;
 
     /**
      * {@code InfoDialog} component's local state.
@@ -107,7 +123,7 @@ class InfoDialog extends Component {
      */
     state = {
         passwordEditEnabled: false,
-        phoneNumber: ''
+        phoneNumber: undefined
     };
 
     /**
@@ -116,7 +132,7 @@ class InfoDialog extends Component {
      * @param {Object} props - The read-only properties with which the new
      * instance is to be initialized.
      */
-    constructor(props) {
+    constructor(props: Props) {
         super(props);
 
         const { defaultCountry, numbers } = props.dialIn;
@@ -162,7 +178,8 @@ class InfoDialog extends Component {
             const { defaultCountry, numbers } = nextProps.dialIn;
 
             this.setState({
-                phoneNumber: _getDefaultPhoneNumber(numbers, defaultCountry)
+                phoneNumber:
+                    _getDefaultPhoneNumber(numbers, defaultCountry)
             });
         }
     }
@@ -293,6 +310,8 @@ class InfoDialog extends Component {
         return this.props._inviteURL.replace(/^https?:\/\//i, '');
     }
 
+    _onClickURLText: (Object) => void;
+
     /**
      * Callback invoked when a displayed URL link is clicked to prevent actual
      * navigation from happening. The URL links have an href to display the
@@ -307,6 +326,8 @@ class InfoDialog extends Component {
         event.preventDefault();
     }
 
+    _onCopyInviteURL: () => void;
+
     /**
      * Callback invoked to copy the contents of {@code this._copyElement} to the
      * clipboard.
@@ -316,14 +337,20 @@ class InfoDialog extends Component {
      */
     _onCopyInviteURL() {
         try {
-            this._copyElement.select();
+            if (!this._copyElement) {
+                throw new Error('No element to copy from.');
+            }
+
+            this._copyElement && this._copyElement.select();
             document.execCommand('copy');
-            this._copyElement.blur();
+            this._copyElement && this._copyElement.blur();
         } catch (err) {
             logger.error('error when copying the text', err);
         }
     }
 
+    _onPasswordRemove: () => void;
+
     /**
      * Callback invoked to unlock the current JitsiConference.
      *
@@ -334,6 +361,8 @@ class InfoDialog extends Component {
         this._onPasswordSubmit('');
     }
 
+    _onPasswordSubmit: (string) => void;
+
     /**
      * Callback invoked to set a password on the current JitsiConference.
      *
@@ -352,6 +381,8 @@ class InfoDialog extends Component {
         ));
     }
 
+    _onTogglePasswordEditState: () => void;
+
     /**
      * Toggles whether or not the password should currently be shown as being
      * edited locally.
@@ -476,6 +507,8 @@ class InfoDialog extends Component {
             && phoneNumber);
     }
 
+    _setCopyElement: () => void;
+
     /**
      * Sets the internal reference to the DOM/HTML element backing the React
      * {@code Component} input.
@@ -485,7 +518,7 @@ class InfoDialog extends Component {
      * @private
      * @returns {void}
      */
-    _setCopyElement(element) {
+    _setCopyElement(element: Object) {
         this._copyElement = element;
     }
 }

react/features/invite/components/info-dialog/PasswordForm.web.js

@@ -1,56 +1,60 @@
-import PropTypes from 'prop-types';
+/* @flow */
+
 import React, { Component } from 'react';
 
 import { translate } from '../../../base/i18n';
 import { LOCKED_LOCALLY } from '../../../room-lock';
 
 /**
- * React {@code Component} for displaying and editing the conference password.
- *
- * @extends Component
+ * The type of the React {@code Component} props of {@link PasswordForm}.
  */
-class PasswordForm extends Component {
+type Props = {
+
     /**
-     * {@code PasswordForm} component's property types.
-     *
-     * @static
+     * Whether or not to show the password editing field.
      */
-    static propTypes = {
-        /**
-         * Whether or not to show the password editing field.
-         */
-        editEnabled: PropTypes.bool,
-
-        /**
-         * The value for how the conference is locked (or undefined if not
-         * locked) as defined by room-lock constants.
-         */
-        locked: PropTypes.string,
-
-        /**
-         * Callback to invoke when the local participant is submitting a
-         * password set request.
-         */
-        onSubmit: PropTypes.func,
-
-        /**
-         * The current known password for the JitsiConference.
-         */
-        password: PropTypes.string,
-
-        /**
-         * Invoked to obtain translated strings.
-         */
-        t: PropTypes.func
-    };
+    editEnabled: boolean,
 
     /**
-     * {@code PasswordForm} component's local state.
-     *
-     * @type {Object}
-     * @property {string} enteredPassword - The value of the password being
-     * entered by the local participant.
+     * The value for how the conference is locked (or undefined if not locked)
+     * as defined by room-lock constants.
      */
+    locked: string,
+
+    /**
+     * Callback to invoke when the local participant is submitting a password
+     * set request.
+     */
+    onSubmit: Function,
+
+    /**
+     * The current known password for the JitsiConference.
+     */
+    password: string,
+
+    /**
+     * Invoked to obtain translated strings.
+     */
+    t: Function
+};
+
+/**
+ * The type of the React {@code Component} state of {@link PasswordForm}.
+ */
+type State = {
+
+    /**
+     * The value of the password being entered by the local participant.
+     */
+    enteredPassword: string
+};
+
+/**
+ * React {@code Component} for displaying and editing the conference password.
+ *
+ * @extends Component
+ */
+class PasswordForm extends Component<Props, State> {
     state = {
         enteredPassword: ''
     };
@@ -61,7 +65,7 @@ class PasswordForm extends Component {
      * @param {Props} props - The React {@code Component} props to initialize
      * the new {@code PasswordForm} instance with.
      */
-    constructor(props) {
+    constructor(props: Props) {
         super(props);
 
         // Bind event handlers so they are only bound once per instance.
@@ -77,7 +81,7 @@ class PasswordForm extends Component {
      * @inheritdoc
      * @param {Props} nextProps - New props component will receive.
      */
-    componentWillReceiveProps(nextProps) {
+    componentWillReceiveProps(nextProps: Props) {
         if (this.props.editEnabled && !nextProps.editEnabled) {
             this.setState({ enteredPassword: '' });
         }
@@ -148,6 +152,8 @@ class PasswordForm extends Component {
         );
     }
 
+    _onEnteredPasswordChange: (Object) => void;
+
     /**
      * Updates the internal state of entered password.
      *
@@ -159,6 +165,8 @@ class PasswordForm extends Component {
         this.setState({ enteredPassword: event.target.value });
     }
 
+    _onPasswordSubmit: (Object) => void;
+
     /**
      * Invokes the passed in onSubmit callback to notify the parent that a
      * password submission has been attempted.

react/features/invite/functions.js

@@ -532,7 +532,7 @@ export function getDialInfoPageURL(
  */
 export function _getDefaultPhoneNumber(
         dialInNumbers: Object,
-        defaultCountry: string = 'US') {
+        defaultCountry: string = 'US'): ?string {
     if (Array.isArray(dialInNumbers)) {
         // Dumbly return the first number if an array.
         return dialInNumbers[0];

react/features/keyboard-shortcuts/components/KeyboardShortcutsDialog.web.js

@@ -1,34 +1,35 @@
+/* @flow */
+
 import Lozenge from '@atlaskit/lozenge';
-import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import { Dialog } from '../../base/dialog';
 import { translate } from '../../base/i18n';
 
 /**
- * Implements a React {@link Component} which displays a dialog describing
- * registered keyboard shortcuts.
- *
- * @extends Component
+ * The type of the React {@code Component} props of
+ * {@link KeyboardShortcutsDialog}.
  */
-class KeyboardShortcutsDialog extends Component {
+type Props = {
+
     /**
-     * {@code KeyboardShortcutsDialog} component's property types.
-     *
-     * @static
+     * A Map with keyboard keys as keys and translation keys as values.
      */
-    static propTypes = {
-        /**
-         * A Map with keyboard keys as keys and translation keys as values.
-         */
-        shortcutDescriptions: PropTypes.object,
+    shortcutDescriptions: Object,
 
-        /**
-         * Invoked to obtain translated strings.
-         */
-        t: PropTypes.func
-    };
+    /**
+     * Invoked to obtain translated strings.
+     */
+    t: Function
+};
 
+/**
+ * Implements a React {@link Component} which displays a dialog describing
+ * registered keyboard shortcuts.
+ *
+ * @extends Component
+ */
+class KeyboardShortcutsDialog extends Component<Props> {
     /**
      * Implements React's {@link Component#render()}.
      *

react/features/mobile/network-activity/components/NetworkActivityIndicator.js

@@ -1,31 +1,28 @@
 /* @flow */
 
-import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
 import { LoadingIndicator } from '../../../base/react';
 
 /**
- * The React {@code Component} which renders a progress indicator when there
- * are ongoing network requests.
+ * The type of the React {@code Component} props of
+ * {@link NetworkActivityIndicator}.
  */
-class NetworkActivityIndicator extends Component<*> {
+type Props = {
+
     /**
-     * {@code NetworkActivityIndicator} React {@code Component}'s prop types.
-     *
-     * @static
+     * Indicates whether there is network activity i.e. ongoing network
+     * requests.
      */
-    static propTypes = {
-        /**
-         * Indicates whether there is network activity i.e. ongoing network
-         * requests.
-         *
-         * @private
-         */
-        _networkActivity: PropTypes.bool
-    };
+    _networkActivity: boolean
+};
 
+/**
+ * The React {@code Component} which renders a progress indicator when there
+ * are ongoing network requests.
+ */
+class NetworkActivityIndicator extends Component<Props> {
     /**
      * Implements React's {@link Component#render()}.
      *

react/features/overlay/components/AbstractPageReloadOverlay.js

@@ -1,6 +1,5 @@
 // @flow
 
-import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import {
@@ -21,53 +20,70 @@ declare var APP: Object;
 const logger = require('jitsi-meet-logger').getLogger(__filename);
 
 /**
- * Implements an abstract React {@link Component} for the page reload overlays.
+ * The type of the React {@code Component} props of
+ * {@link AbstractPageReloadOverlay}.
  */
-export default class AbstractPageReloadOverlay extends Component<*, *> {
+type Props = {
+
     /**
-     * {@code AbstractPageReloadOverlay} component's property types.
-     *
-     * @static
+     * The details is an object containing more information about the connection
+     * failed (shard changes, was the computer suspended, etc.)
      */
-    static propTypes = {
-        /**
-         * The details is an object containing more information about the
-         * connection failed (shard changes, was the computer suspended, etc.)
-         *
-         * @public
-         * @type {object}
-         */
-        details: PropTypes.object,
+    details: Object,
 
-        dispatch: PropTypes.func,
+    dispatch: Dispatch<*>,
 
-        /**
-         * The indicator which determines whether the reload was caused by
-         * network failure.
-         *
-         * @public
-         * @type {boolean}
-         */
-        isNetworkFailure: PropTypes.bool,
+    /**
+     * 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.
-         *
-         * @public
-         * @type {string}
-         */
-        reason: PropTypes.string,
+    /**
+     * The reason for the error that will cause the reload.
+     * NOTE: Used by PageReloadOverlay only.
+     */
+    reason: string,
 
-        /**
-         * The function to translate human-readable text.
-         *
-         * @public
-         * @type {Function}
-         */
-        t: PropTypes.func
-    };
+    /**
+     * The function to translate human-readable text.
+     */
+    t: Function
+};
+
+/**
+ * The type of the React {@code Component} state of
+ * {@link AbstractPageReloadOverlay}.
+ */
+type State = {
+
+    /**
+     * 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.
+ */
+export default class AbstractPageReloadOverlay
+    extends Component<Props, State> {
     /**
      * Determines whether this overlay needs to be rendered (according to a
      * specific redux state). Called by {@link OverlayContainer}.
@@ -109,38 +125,6 @@ export default class AbstractPageReloadOverlay extends Component<*, *> {
 
     _interval: ?IntervalID;
 
-    state: {
-
-        /**
-         * The translation key for the title of the overlay.
-         *
-         * @type {string}
-         */
-        message: string,
-
-        /**
-         * Current value(time) of the timer.
-         *
-         * @type {number}
-         */
-        timeLeft: number,
-
-        /**
-         * How long the overlay dialog will be displayed before the
-         * conference will be reloaded.
-         *
-         * @type {number}
-         */
-        timeoutSeconds: number,
-
-        /**
-         * The translation key for the title of the overlay.
-         *
-         * @type {string}
-         */
-        title: string
-    };
-
     /**
      * Initializes a new AbstractPageReloadOverlay instance.
      *

react/features/overlay/components/AbstractSuspendedOverlay.js

@@ -1,26 +1,24 @@
-import PropTypes from 'prop-types';
+/* @flow */
+
 import { Component } from 'react';
 
 /**
- * Implements a React {@link Component} for suspended overlay. Shown when a
- * suspend is detected.
+ * The type of the React {@code Component} props of
+ * {@link AbstractSuspendedOverlay}.
  */
-export default class AbstractSuspendedOverlay extends Component {
+type Props = {
+
     /**
-     * {@code AbstractSuspendedOverlay} component's property types.
-     *
-     * @static
+     * The function to translate human-readable text.
      */
-    static propTypes = {
-        /**
-         * The function to translate human-readable text.
-         *
-         * @public
-         * @type {Function}
-         */
-        t: PropTypes.func
-    };
+    t: Function
+};
 
+/**
+ * Implements a React {@link Component} for suspended overlay. Shown when a
+ * suspend is detected.
+ */
+export default class AbstractSuspendedOverlay extends Component<Props> {
     /**
      * Determines whether this overlay needs to be rendered (according to a
      * specific redux state). Called by {@link OverlayContainer}.
@@ -29,7 +27,7 @@ export default class AbstractSuspendedOverlay extends Component {
      * @returns {boolean} - If this overlay needs to be rendered, {@code true};
      * {@code false}, otherwise.
      */
-    static needsRender(state) {
+    static needsRender(state: Object) {
         return state['features/overlay'].suspendDetected;
     }
 }

react/features/overlay/components/AbstractUserMediaPermissionsOverlay.js

@@ -1,35 +1,31 @@
-import PropTypes from 'prop-types';
+/* @flow */
+
 import { Component } from 'react';
 
 /**
- * Implements a React {@link Component} for overlay with guidance how to proceed
- * with gUM prompt.
+ * The type of the React {@code Component} props of
+ * {@link AbstractUserMediaPermissionsOverlay}.
  */
-export default class AbstractUserMediaPermissionsOverlay extends Component {
+type Props = {
+
     /**
-     * {@code AbstractUserMediaPermissionsOverlay} component's property types.
-     *
-     * @static
+     * The browser which is used currently. The text is different for every
+     * browser.
      */
-    static propTypes = {
-        /**
-         * The browser which is used currently. The text is different for every
-         * browser.
-         *
-         * @public
-         * @type {string}
-         */
-        browser: PropTypes.string,
+    browser: string,
 
-        /**
-         * The function to translate human-readable text.
-         *
-         * @public
-         * @type {Function}
-         */
-        t: PropTypes.func
-    };
+    /**
+     * The function to translate human-readable text.
+     */
+    t: Function
+};
 
+/**
+ * Implements a React {@link Component} for overlay with guidance how to proceed
+ * with gUM prompt.
+ */
+export default class AbstractUserMediaPermissionsOverlay
+    extends Component<Props> {
     /**
      * Determines whether this overlay needs to be rendered (according to a
      * specific redux state). Called by {@link OverlayContainer}.
@@ -38,7 +34,7 @@ export default class AbstractUserMediaPermissionsOverlay extends Component {
      * @returns {boolean} - If this overlay needs to be rendered, {@code true};
      * {@code false}, otherwise.
      */
-    static needsRender(state) {
+    static needsRender(state: Object) {
         return state['features/overlay'].isMediaPermissionPromptVisible;
     }
 }
@@ -52,7 +48,7 @@ export default class AbstractUserMediaPermissionsOverlay extends Component {
  *     browser: string
  * }}
  */
-export function abstractMapStateToProps(state) {
+export function abstractMapStateToProps(state: Object) {
     const { browser } = state['features/overlay'];
 
     return {

react/features/overlay/components/FilmstripOnlyOverlayFrame.js

@@ -1,4 +1,5 @@
-import PropTypes from 'prop-types';
+/* @flow */
+
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -11,49 +12,39 @@ import {
 import OverlayFrame from './OverlayFrame';
 
 /**
- * Implements a React Component for the frame of the overlays in filmstrip only
- * mode.
+ * The type of the React {@code Component} props of
+ * {@link FilmstripOnlyOverlayFrame}.
  */
-class FilmstripOnlyOverlayFrame extends Component {
+type Props = {
+
     /**
-     * FilmstripOnlyOverlayFrame component's property types.
-     *
-     * @static
+     * The source (e.g. URI, URL) of the avatar image of the local participant.
      */
-    static propTypes = {
-        /**
-         * The source (e.g. URI, URL) of the avatar image of the local
-         * participant.
-         *
-         * @private
-         */
-        _avatar: PropTypes.string,
+    _avatar: string,
 
-        /**
-         * The children components to be displayed into the overlay frame for
-         * filmstrip only mode.
-         *
-         * @type {ReactElement}
-         */
-        children: PropTypes.node.isRequired,
+    /**
+     * The children components to be displayed into the overlay frame for
+     * filmstrip only mode.
+     */
+    children: React$Node,
 
-        /**
-         * The css class name for the icon that will be displayed over the
-         * avatar.
-         *
-         * @type {string}
-         */
-        icon: PropTypes.string,
+    /**
+     * The css class name for the icon that will be displayed over the avatar.
+     */
+    icon: string,
 
-        /**
-         * Indicates the css style of the overlay. If true, then lighter;
-         * darker, otherwise.
-         *
-         * @type {boolean}
-         */
-        isLightOverlay: PropTypes.bool
-    };
+    /**
+     * Indicates the css style of the overlay. If true, then lighter; darker,
+     * otherwise.
+     */
+    isLightOverlay: boolean
+};
 
+/**
+ * Implements a React Component for the frame of the overlays in filmstrip only
+ * mode.
+ */
+class FilmstripOnlyOverlayFrame extends Component<Props> {
     /**
      * Renders content related to the icon.
      *

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

@@ -1,32 +1,42 @@
-/* global interfaceConfig */
+/* @flow */
 
-import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
+declare var interfaceConfig: Object;
+
 /**
- * Implements a React {@link Component} for the frame of the overlays.
+ * The type of the React {@code Component} props of {@link OverlayFrame}.
  */
-export default class OverlayFrame extends Component {
+type Props = {
+
     /**
-     * OverlayFrame component's property types.
-     *
-     * @static
+     * The children components to be displayed into the overlay frame.
      */
-    static propTypes = {
-        /**
-         * The children components to be displayed into the overlay frame.
-         */
-        children: PropTypes.node.isRequired,
+    children: React$Node,
 
-        /**
-         * Indicates the css style of the overlay. If true, then lighter;
-         * darker, otherwise.
-         *
-         * @type {boolean}
-         */
-        isLightOverlay: PropTypes.bool
-    };
+    /**
+     * Indicates the css style of the overlay. If true, then lighter; darker,
+     * otherwise.
+     */
+    isLightOverlay: boolean
+};
 
+/**
+ * The type of the React {@code Component} state of {@link OverlayFrame}.
+ */
+type State = {
+
+    /**
+     * Whether or not the application is currently displaying in filmstrip only
+     * mode.
+     */
+    filmstripOnly: boolean
+};
+
+/**
+ * Implements a React {@link Component} for the frame of the overlays.
+ */
+export default class OverlayFrame extends Component<Props, State> {
     /**
      * Initializes a new AbstractOverlay instance.
      *
@@ -34,7 +44,7 @@ export default class OverlayFrame extends Component {
      * instance is to be initialized.
      * @public
      */
-    constructor(props) {
+    constructor(props: Props) {
         super(props);
 
         this.state = {

react/features/overlay/components/ReloadButton.js

@@ -1,6 +1,5 @@
 /* @flow */
 
-import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -8,39 +7,31 @@ import { reloadNow } from '../../app';
 import { translate } from '../../base/i18n';
 
 /**
- * Implements a React Component for button for the overlays that will reload
- * the page.
+ * The type of the React {@code Component} props of {@link ReloadButton}.
  */
-class ReloadButton extends Component<*> {
+type Props = {
+
     /**
-     * PageReloadOverlay component's property types.
-     *
-     * @static
+     * Reloads the page.
      */
-    static propTypes = {
-        /**
-         * Reloads the page.
-         *
-         * @type {Function}
-         */
-        _reloadNow: PropTypes.func,
+    _reloadNow: Function,
 
-        /**
-         * The function to translate human-readable text.
-         *
-         * @public
-         * @type {Function}
-         */
-        t: PropTypes.func,
+    /**
+     * The function to translate human-readable text.
+     */
+    t: Function,
 
-        /**
-         * The translation key for the text in the button.
-         *
-         * @type {string}
-         */
-        textKey: PropTypes.string.isRequired
-    };
+    /**
+     * The translation key for the text in the button.
+     */
+    textKey: string
+};
 
+/**
+ * Implements a React Component for button for the overlays that will reload
+ * the page.
+ */
+class ReloadButton extends Component<Props> {
     /**
      * Renders the button for relaod the page if necessary.
      *

react/features/presence-status/components/PresenceLabel.js

@@ -1,4 +1,5 @@
-import PropTypes from 'prop-types';
+/* @flow */
+
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -8,13 +9,51 @@ import { Text } from '../../base/react';
 
 import { STATUS_TO_I18N_KEY } from '../constants';
 
+/**
+ * The type of the React {@code Component} props of {@link PresenceLabel}.
+ */
+type Props = {
+
+    /**
+     * The current present status associated with the passed in participantID
+     * prop.
+     */
+    _presence: string,
+
+    /**
+     * Class name for the presence label.
+     */
+    className: string,
+
+    /**
+     * Default presence status that will be displayed if user's presence status
+     * is not available.
+     */
+    defaultPresence: string,
+
+    /**
+     * The ID of the participant whose presence status should display.
+     */
+    participantID: string,
+
+    /**
+     * Styles for the presence label.
+     */
+    style: Object,
+
+    /**
+     * Invoked to obtain translated strings.
+     */
+    t: Function
+};
+
 /**
  * React {@code Component} for displaying the current presence status of a
  * participant.
  *
  * @extends Component
  */
-class PresenceLabel extends Component {
+class PresenceLabel extends Component<Props> {
     /**
      * The default values for {@code PresenceLabel} component's property types.
      *
@@ -24,45 +63,6 @@ class PresenceLabel extends Component {
         _presence: ''
     };
 
-    /**
-     * {@code PresenceLabel} component's property types.
-     *
-     * @static
-     */
-    static propTypes = {
-        /**
-         * The current present status associated with the passed in
-         * participantID prop.
-         */
-        _presence: PropTypes.string,
-
-        /**
-         * Class name for the presence label.
-         */
-        className: PropTypes.string,
-
-        /**
-         * Default presence status that will be displayed if user's presence
-         * status is not available.
-         */
-        defaultPresence: PropTypes.string,
-
-        /**
-         * The ID of the participant whose presence status shoul display.
-         */
-        participantID: PropTypes.string,
-
-        /**
-         * Styles for the presence label.
-         */
-        style: PropTypes.object,
-
-        /**
-         * Invoked to obtain translated strings.
-         */
-        t: PropTypes.func
-    };
-
     /**
      * Implements React's {@link Component#render()}.
      *

react/features/recording/components/LiveStream/StreamKeyPicker.web.js

@@ -1,19 +1,61 @@
+/* @flow */
+
 import {
     DropdownItem,
     DropdownItemGroup,
     DropdownMenuStateless
 } from '@atlaskit/dropdown-menu';
 import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
 
 import { translate } from '../../../base/i18n';
 
+/**
+ * The type of the React {@code Component} props of {@link StreamKeyPicker}.
+ */
+type Props = {
+
+    /**
+     * Broadcasts available for selection. Each broadcast item should be an
+     * object with a title for display in the dropdown and a boundStreamID to
+     * return in the {@link onBroadcastSelected} callback.
+     */
+    broadcasts: Array<Object>,
+
+    /**
+     * Callback invoked when an item in the dropdown is selected. The selected
+     * broadcast's boundStreamID will be passed back.
+     */
+    onBroadcastSelected: Function,
+
+    /**
+     * The boundStreamID of the broadcast that should display as selected in the
+     * dropdown.
+     */
+    selectedBoundStreamID: string,
+
+    /**
+     * Invoked to obtain translated strings.
+     */
+    t: Function
+};
+
+/**
+ * The type of the React {@code Component} state of {@link StreamKeyPicker}.
+ */
+type State = {
+
+    /**
+     * Whether or not to display the dropdown menu to pick a YouTube broadcast.
+     */
+    isDropdownOpen: boolean
+};
+
 /**
  * A dropdown to select a YouTube broadcast.
  *
  * @extends Component
  */
-class StreamKeyPicker extends PureComponent {
+class StreamKeyPicker extends PureComponent<Props, State> {
     /**
      * Default values for {@code StreamKeyForm} component's properties.
      *
@@ -23,41 +65,8 @@ class StreamKeyPicker extends PureComponent {
         broadcasts: []
     };
 
-    /**
-     * {@code StreamKeyPicker} component's property types.
-     */
-    static propTypes = {
-        /**
-         * Broadcasts available for selection. Each broadcast item should be an
-         * object with a title for display in the dropdown and a boundStreamID
-         * to return in the {@link onBroadcastSelected} callback.
-         */
-        broadcasts: PropTypes.array,
-
-        /**
-         * Callback invoked when an item in the dropdown is selected. The
-         * selected broadcast's boundStreamID will be passed back.
-         */
-        onBroadcastSelected: PropTypes.func,
-
-        /**
-         * The boundStreamID of the broadcast that should display as selected in
-         * the dropdown.
-         */
-        selectedBoundStreamID: PropTypes.string,
-
-        /**
-         * Invoked to obtain translated strings.
-         */
-        t: PropTypes.func
-    };
-
     /**
      * The initial state of a {@code StreamKeyForm} instance.
-     *
-     * @type {{
-     *     isDropdownOpen: boolean
-     * }}
      */
     state = {
         isDropdownOpen: false
@@ -69,7 +78,7 @@ class StreamKeyPicker extends PureComponent {
      * @param {Props} props - The React {@code Component} props to initialize
      * the new {@code StreamKeyPicker} instance with.
      */
-    constructor(props) {
+    constructor(props: Props) {
         super(props);
 
         // Bind event handlers so they are only bound once per instance.
@@ -139,6 +148,8 @@ class StreamKeyPicker extends PureComponent {
         });
     }
 
+    _onDropdownOpenChange: (Object) => void;
+
     /**
      * Sets the dropdown to be displayed or not based on the passed in event.
      *
@@ -154,6 +165,8 @@ class StreamKeyPicker extends PureComponent {
         });
     }
 
+    _onSelect: (string) => void;
+
     /**
      * Callback invoked when an item has been clicked in the dropdown menu.
      *

react/features/remote-control/components/RemoteControlAuthorizationDialog.js

@@ -1,6 +1,5 @@
 // @flow
 
-import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -11,49 +10,45 @@ import { getParticipantById } from '../../base/participants';
 declare var APP: Object;
 
 /**
- * Implements a dialog for remote control authorization.
+ * The type of the React {@code Component} props of
+ * {@link RemoteControlAuthorizationDialog}.
  */
-class RemoteControlAuthorizationDialog extends Component<*> {
+type Props = {
+
     /**
-     * RemoteControlAuthorizationDialog component's property types.
-     *
-     * @static
+     * The display name of the participant who is requesting authorization for
+     * remote desktop control session.
      */
-    static propTypes = {
-        /**
-         * The display name of the participant who is requesting authorization
-         * for remote desktop control session.
-         *
-         * @private
-         */
-        _displayName: PropTypes.string,
-
-        /**
-         * Used to show/hide the dialog on cancel.
-         */
-        dispatch: PropTypes.func,
-
-        /**
-         * The ID of the participant who is requesting authorization for remote
-         * desktop control session.
-         *
-         * @public
-         */
-        participantId: PropTypes.string,
-
-        /**
-         * Invoked to obtain translated strings.
-         */
-        t: PropTypes.func
-    };
+    _displayName: string,
+
+    /**
+     * Used to show/hide the dialog on cancel.
+     */
+    dispatch: Function,
+
+    /**
+     * The ID of the participant who is requesting authorization for remote
+     * desktop control session.
+     */
+    participantId: string,
+
+    /**
+     * Invoked to obtain translated strings.
+     */
+    t: Function
+};
 
+/**
+ * Implements a dialog for remote control authorization.
+ */
+class RemoteControlAuthorizationDialog extends Component<Props> {
     /**
      * Initializes a new RemoteControlAuthorizationDialog instance.
      *
      * @param {Object} props - The read-only properties with which the new
      * instance is to be initialized.
      */
-    constructor(props) {
+    constructor(props: Props) {
         super(props);
 
         this._onCancel = this._onCancel.bind(this);

react/features/remote-video-menu/components/KickButton.js

@@ -1,4 +1,5 @@
-import PropTypes from 'prop-types';
+/* @flow */
+
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -11,41 +12,40 @@ import { kickParticipant } from '../../base/participants';
 
 import RemoteVideoMenuButton from './RemoteVideoMenuButton';
 
+/**
+ * The type of the React {@code Component} state of {@link KickButton}.
+ */
+type Props = {
+
+    /**
+     * Invoked to signal the participant with the passed in participantID
+     * should be removed from the conference.
+     */
+    dispatch: Dispatch<*>,
+
+    /**
+     * Callback to invoke when {@code KickButton} is clicked.
+     */
+    onClick: Function,
+
+    /**
+     * The ID of the participant linked to the onClick callback.
+     */
+    participantID: string,
+
+    /**
+     * Invoked to obtain translated strings.
+     */
+    t: Function,
+};
+
 /**
  * Implements a React {@link Component} which displays a button for kicking out
  * a participant from the conference.
  *
  * @extends Component
  */
-class KickButton extends Component {
-    /**
-     * {@code KickButton} component's property types.
-     *
-     * @static
-     */
-    static propTypes = {
-        /**
-         * Invoked to signal the participant with the passed in participantID
-         * should be removed from the conference.
-         */
-        dispatch: PropTypes.func,
-
-        /**
-         * Callback to invoke when {@code KickButton} is clicked.
-         */
-        onClick: PropTypes.func,
-
-        /**
-         * The ID of the participant linked to the onClick callback.
-         */
-        participantID: PropTypes.string,
-
-        /**
-         * Invoked to obtain translated strings.
-         */
-        t: PropTypes.func
-    };
-
+class KickButton extends Component<Props> {
     /**
      * Initializes a new {@code KickButton} instance.
      *
@@ -77,6 +77,8 @@ class KickButton extends Component {
         );
     }
 
+    _onClick: () => void;
+
     /**
      * Remove the participant with associated participantID from the conference.
      *

react/features/remote-video-menu/components/MuteButton.js

@@ -1,4 +1,5 @@
-import PropTypes from 'prop-types';
+/* @flow */
+
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -12,53 +13,52 @@ import { openDialog } from '../../base/dialog';
 import RemoteVideoMenuButton from './RemoteVideoMenuButton';
 import MuteRemoteParticipantDialog from './MuteRemoteParticipantDialog';
 
+/**
+ * The type of the React {@code Component} props of {@link MuteButton}.
+ */
+type Props = {
+
+    /**
+     * Invoked to send a request for muting the participant with the passed
+     * in participantID.
+     */
+    dispatch: Dispatch<*>,
+
+    /**
+     * Whether or not the participant is currently audio muted.
+     */
+    isAudioMuted: Function,
+
+    /**
+     * Callback to invoke when {@code MuteButton} is clicked.
+     */
+    onClick: Function,
+
+    /**
+     * The ID of the participant linked to the onClick callback.
+     */
+    participantID: string,
+
+    /**
+     * Invoked to obtain translated strings.
+     */
+    t: Function
+};
+
 /**
  * Implements a React {@link Component} which displays a button for audio muting
  * a participant in the conference.
  *
  * @extends Component
  */
-class MuteButton extends Component {
-    /**
-     * {@code MuteButton} component's property types.
-     *
-     * @static
-     */
-    static propTypes = {
-        /**
-         * Invoked to send a request for muting the participant with the passed
-         * in participantID.
-         */
-        dispatch: PropTypes.func,
-
-        /**
-         * Whether or not the participant is currently audio muted.
-         */
-        isAudioMuted: PropTypes.bool,
-
-        /**
-         * Callback to invoke when {@code MuteButton} is clicked.
-         */
-        onClick: PropTypes.func,
-
-        /**
-         * The ID of the participant linked to the onClick callback.
-         */
-        participantID: PropTypes.string,
-
-        /**
-         * Invoked to obtain translated strings.
-         */
-        t: PropTypes.func
-    };
-
+class MuteButton extends Component<Props> {
     /**
      * Initializes a new {@code MuteButton} instance.
      *
      * @param {Object} props - The read-only React Component props with which
      * the new instance is to be initialized.
      */
-    constructor(props) {
+    constructor(props: Props) {
         super(props);
 
         // Bind event handlers so they are only bound once for every instance.
@@ -91,6 +91,8 @@ class MuteButton extends Component {
         );
     }
 
+    _onClick: () => void;
+
     /**
      * Dispatches a request to mute the participant with the passed in
      * participantID.

react/features/remote-video-menu/components/MuteRemoteParticipantDialog.web.js

@@ -1,4 +1,5 @@
-import PropTypes from 'prop-types';
+/* @flow */
+
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -11,43 +12,43 @@ import {
 } from '../../analytics';
 import { muteRemoteParticipant } from '../../base/participants';
 
+/**
+ * The type of the React {@code Component} props of
+ * {@link MuteRemoteParticipantDialog}.
+ */
+type Props = {
+
+    /**
+     * Invoked to send a request for muting the participant with the passed
+     * in participantID.
+     */
+    dispatch: Dispatch<*>,
+
+    /**
+     * The ID of the participant linked to the onClick callback.
+     */
+    participantID: string,
+
+    /**
+     * Invoked to obtain translated strings.
+     */
+    t: Function
+};
+
 /**
  * A React Component with the contents for a dialog that asks for confirmation
  * from the user before muting a remote participant.
  *
  * @extends Component
  */
-class MuteRemoteParticipantDialog extends Component {
-    /**
-     * {@code MuteRemoteParticipantDialog} component's property types.
-     *
-     * @static
-     */
-    static propTypes = {
-        /**
-         * Invoked to send a request for muting the participant with the passed
-         * in participantID.
-         */
-        dispatch: PropTypes.func,
-
-        /**
-         * The ID of the participant linked to the onClick callback.
-         */
-        participantID: PropTypes.string,
-
-        /**
-         * Invoked to obtain translated strings.
-         */
-        t: PropTypes.func
-    };
-
+class MuteRemoteParticipantDialog extends Component<Props> {
     /**
      * Initializes a new {@code MuteRemoteParticipantDialog} instance.
      *
      * @param {Object} props - The read-only properties with which the new
      * instance is to be initialized.
      */
-    constructor(props) {
+    constructor(props: Props) {
         super(props);
 
         // Bind event handlers so they are only bound once per instance.
@@ -73,6 +74,8 @@ class MuteRemoteParticipantDialog extends Component {
         );
     }
 
+    _onSubmit: () => void;
+
     /**
      * Handles the submit button action.
      *
@@ -89,6 +92,8 @@ class MuteRemoteParticipantDialog extends Component {
         return true;
     }
 
+    _renderContent: () => React$Element<*>;
+
     /**
      * Renders the content of the dialog.
      *

react/features/remote-video-menu/components/RemoteControlButton.js

@@ -1,4 +1,5 @@
-import PropTypes from 'prop-types';
+/* @flow */
+
 import React, { Component } from 'react';
 
 import {
@@ -18,6 +19,33 @@ export const REMOTE_CONTROL_MENU_STATES = {
     STARTED: 3
 };
 
+/**
+ * The type of the React {@code Component} props of {@link RemoteControlButton}.
+ */
+type Props = {
+
+    /**
+     * The callback to invoke when the component is clicked.
+     */
+    onClick: Function,
+
+    /**
+     * The ID of the participant linked to the onClick callback.
+     */
+    participantID: string,
+
+    /**
+     * The current status of remote control. Should be a number listed in the
+     * enum REMOTE_CONTROL_MENU_STATES.
+     */
+    remoteControlState: number,
+
+    /**
+     * Invoked to obtain translated strings.
+     */
+    t: Function
+};
+
 /**
  * Implements a React {@link Component} which displays a button showing the
  * current state of remote control for a participant and can start or stop a
@@ -25,42 +53,14 @@ export const REMOTE_CONTROL_MENU_STATES = {
  *
  * @extends Component
  */
-class RemoteControlButton extends Component {
-    /**
-     * {@code RemoteControlButton} component's property types.
-     *
-     * @static
-     */
-    static propTypes = {
-        /**
-         * The callback to invoke when the component is clicked.
-         */
-        onClick: PropTypes.func,
-
-        /**
-         * The ID of the participant linked to the onClick callback.
-         */
-        participantID: PropTypes.string,
-
-        /**
-         * The current status of remote control. Should be a number listed in
-         * the enum REMOTE_CONTROL_MENU_STATES.
-         */
-        remoteControlState: PropTypes.number,
-
-        /**
-         * Invoked to obtain translated strings.
-         */
-        t: PropTypes.func
-    };
-
+class RemoteControlButton extends Component<Props> {
     /**
      * Initializes a new {@code RemoteControlButton} instance.
      *
      * @param {Object} props - The read-only React Component props with which
      * the new instance is to be initialized.
      */
-    constructor(props) {
+    constructor(props: Props) {
         super(props);
 
         // Bind event handlers so they are only bound once for every instance.
@@ -112,6 +112,8 @@ class RemoteControlButton extends Component {
         );
     }
 
+    _onClick: () => void;
+
     /**
      * Sends analytics event for pressing the button and executes the passed
      * onClick handler.

react/features/remote-video-menu/components/RemoteVideoMenu.js

@@ -1,31 +1,31 @@
-import PropTypes from 'prop-types';
+/* @flow */
+
 import React, { Component } from 'react';
 
 /**
- * React {@code Component} responsible for displaying other components as a menu
- * for manipulating remote participant state.
- *
- * @extends {Component}
+ * The type of the React {@code Component} props of {@link RemoteVideoMenu}.
  */
-export default class RemoteVideoMenu extends Component {
+type Props = {
+
     /**
-     * {@code RemoteVideoMenu}'s property types.
-     *
-     * @static
+     * The components to place as the body of the {@code RemoteVideoMenu}.
      */
-    static propTypes = {
-        /**
-         * The components to place as the body of the {@code RemoteVideoMenu}.
-         */
-        children: PropTypes.node,
+    children: React$Node,
 
-        /**
-         * The id attribute to be added to the component's DOM for retrieval
-         * when querying the DOM. Not used directly by the component.
-         */
-        id: PropTypes.string
-    };
+    /**
+     * The id attribute to be added to the component's DOM for retrieval when
+     * querying the DOM. Not used directly by the component.
+     */
+    id: string
+};
 
+/**
+ * React {@code Component} responsible for displaying other components as a menu
+ * for manipulating remote participant state.
+ *
+ * @extends {Component}
+ */
+export default class RemoteVideoMenu extends Component<Props> {
     /**
      * Implements React's {@link Component#render()}.
      *

react/features/remote-video-menu/components/RemoteVideoMenuButton.js

@@ -1,46 +1,46 @@
-import PropTypes from 'prop-types';
+/* @flow */
+
 import React, { Component } from 'react';
 
 /**
- * React {@code Component} for displaying an action in {@code RemoteVideoMenu}.
- *
- * @extends {Component}
+ * The type of the React {@code Component} props of
+ * {@link RemoteVideoMenuButton}.
  */
-export default class RemoteVideoMenuButton extends Component {
+type Props = {
+
     /**
-     * {@code RemoteVideoMenuButton}'s property types.
-     *
-     * @static
+     * Text to display within the component that describes the onClick action.
      */
-    static propTypes = {
-        /**
-         * Text to display within the component that describes the onClick
-         * action.
-         */
-        buttonText: PropTypes.string,
+    buttonText: string,
 
-        /**
-         * Additional CSS classes to add to the component.
-         */
-        displayClass: PropTypes.string,
+    /**
+     * Additional CSS classes to add to the component.
+     */
+    displayClass?: string,
 
-        /**
-         * The CSS classes for the icon that will display within the component.
-         */
-        iconClass: PropTypes.string,
+    /**
+     * The CSS classes for the icon that will display within the component.
+     */
+    iconClass: string,
 
-        /**
-         * The id attribute to be added to the component's DOM for retrieval
-         * when querying the DOM. Not used directly by the component.
-         */
-        id: PropTypes.string,
+    /**
+     * The id attribute to be added to the component's DOM for retrieval when
+     * querying the DOM. Not used directly by the component.
+     */
+    id: string,
 
-        /**
-         * Callback to invoke when the component is clicked.
-         */
-        onClick: PropTypes.func
-    };
+    /**
+     * Callback to invoke when the component is clicked.
+     */
+    onClick: Function,
+};
 
+/**
+ * React {@code Component} for displaying an action in {@code RemoteVideoMenu}.
+ *
+ * @extends {Component}
+ */
+export default class RemoteVideoMenuButton extends Component<Props> {
     /**
      * Implements React's {@link Component#render()}.
      *

react/features/remote-video-menu/components/VolumeSlider.js

@@ -1,4 +1,5 @@
-import PropTypes from 'prop-types';
+/* @flow */
+
 import React, { Component } from 'react';
 
 /**
@@ -9,47 +10,52 @@ import React, { Component } from 'react';
 const VOLUME_SLIDER_SCALE = 100;
 
 /**
- * Implements a React {@link Component} which displays an input slider for
- * adjusting the local volume of a remote participant.
- *
- * @extends Component
+ * The type of the React {@code Component} props of {@link VolumeSlider}.
  */
-class VolumeSlider extends Component {
+type Props = {
+
     /**
-     * {@code VolumeSlider} component's property types.
-     *
-     * @static
+     * The value of the audio slider should display at when the component first
+     * mounts. Changes will be stored in state. The value should be a number
+     * between 0 and 1.
      */
-    static propTypes = {
-        /**
-         * The value of the audio slider should display at when the component
-         * first mounts. Changes will be stored in state. The value should be a
-         * number between 0 and 1.
-         */
-        initialValue: PropTypes.number,
+    initialValue: number,
+
+    /**
+     * The callback to invoke when the audio slider value changes.
+     */
+    onChange: Function
+};
+
+/**
+ * The type of the React {@code Component} state of {@link VolumeSlider}.
+ */
+type State = {
 
-        /**
-         * The callback to invoke when the audio slider value changes.
-         */
-        onChange: PropTypes.func
-    };
+    /**
+     * The volume of the participant's audio element. The value will
+     * be represented by a slider.
+     */
+    volumeLevel: number
+};
 
+/**
+ * Implements a React {@link Component} which displays an input slider for
+ * adjusting the local volume of a remote participant.
+ *
+ * @extends Component
+ */
+class VolumeSlider extends Component<Props, State> {
     /**
      * Initializes a new {@code VolumeSlider} instance.
      *
      * @param {Object} props - The read-only properties with which the new
      * instance is to be initialized.
      */
-    constructor(props) {
+    constructor(props: Props) {
         super(props);
 
         this.state = {
-            /**
-             * The volume of the participant's audio element. The value will
-             * be represented by a slider.
-             *
-             * @type {Number}
-             */
             volumeLevel: (props.initialValue || 0) * VOLUME_SLIDER_SCALE
         };
 
@@ -84,6 +90,8 @@ class VolumeSlider extends Component {
         );
     }
 
+    _onVolumeChange: (Object) => void;
+
     /**
      * Sets the internal state of the volume level for the volume slider.
      * Invokes the prop onVolumeChange to notify of volume changes.

react/features/room-lock/components/PasswordRequiredPrompt.native.js

@@ -1,6 +1,5 @@
 // @flow
 
-import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -9,6 +8,15 @@ import { Dialog } from '../../base/dialog';
 
 import { _cancelPasswordRequiredPrompt } from '../actions';
 
+/**
+ * The style of the {@link TextInput} rendered by
+ * {@code PasswordRequiredPrompt}. As it requests the entry of a password, the
+ * entry should better be secure.
+ */
+const _TEXT_INPUT_PROPS = {
+    secureTextEntry: true
+};
+
 /**
  * {@code PasswordRequiredPrompt}'s React {@code Component} prop types.
  */
@@ -20,16 +28,11 @@ type Props = {
      * @type {JitsiConference}
      */
     conference: { join: Function },
-    dispatch: Dispatch<*>
-};
 
-/**
- * The style of the {@link TextInput} rendered by
- * {@code PasswordRequiredPrompt}. As it requests the entry of a password, the
- * entry should better be secure.
- */
-const _TEXT_INPUT_PROPS = {
-    secureTextEntry: true
+    /**
+     * The redux dispatch function.
+     */
+    dispatch: Dispatch<*>
 };
 
 /**
@@ -37,16 +40,6 @@ const _TEXT_INPUT_PROPS = {
  * is required to join a conference.
  */
 class PasswordRequiredPrompt extends Component<Props> {
-    /**
-     * {@code PasswordRequiredPrompt}'s React {@code Component} prop types.
-     *
-     * @static
-     */
-    static propTypes = {
-        conference: PropTypes.object,
-        dispatch: PropTypes.func
-    };
-
     /**
      * Initializes a new {@code PasswordRequiredPrompt} instance.
      *

react/features/room-lock/components/PasswordRequiredPrompt.web.js

@@ -1,5 +1,5 @@
 // @flow
-import PropTypes from 'prop-types';
+
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { FieldTextStateless as TextField } from '@atlaskit/field-text';
@@ -9,26 +9,44 @@ import { Dialog } from '../../base/dialog';
 import { translate } from '../../base/i18n';
 
 /**
- * Implements a React Component which prompts the user when a password is
- * required to join a conference.
+ * The type of the React {@code Component} props of
+ * {@link PasswordRequiredPrompt}.
  */
-class PasswordRequiredPrompt extends Component<*, *> {
+type Props = {
+
     /**
-     * PasswordRequiredPrompt component's property types.
-     *
-     * @static
+     * The JitsiConference which requires a password.
      */
-    static propTypes = {
-        /**
-         * The JitsiConference which requires a password.
-         *
-         * @type {JitsiConference}
-         */
-        conference: PropTypes.object,
-        dispatch: PropTypes.func,
-        t: PropTypes.func
-    };
+    conference: Object,
+
+    /**
+     * The redux store's {@code dispatch} function.
+     */
+    dispatch: Dispatch<*>,
+
+    /**
+     * The translate function.
+     */
+    t: Function
+};
 
+/**
+ * The type of the React {@code Component} state of
+ * {@link PasswordRequiredPrompt}.
+ */
+type State = {
+
+    /**
+     * The password entered by the local participant.
+     */
+    password: string
+}
+
+/**
+ * Implements a React Component which prompts the user when a password is
+ * required to join a conference.
+ */
+class PasswordRequiredPrompt extends Component<Props, State> {
     state = {
         password: ''
     };
@@ -39,7 +57,7 @@ class PasswordRequiredPrompt extends Component<*, *> {
      * @param {Object} props - The read-only properties with which the new
      * instance is to be initialized.
      */
-    constructor(props) {
+    constructor(props: Props) {
         super(props);
 
         // Bind event handlers so they are only bound once per instance.

react/features/room-lock/components/RoomLockPrompt.native.js

@@ -1,6 +1,5 @@
 // @flow
 
-import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -19,25 +18,26 @@ const _TEXT_INPUT_PROPS = {
 };
 
 /**
- * Implements a React Component which prompts the user for a password to lock  a
- * conference/room.
+ * The type of the React {@code Component} props of {@link RoomLockPrompt}.
  */
-class RoomLockPrompt extends Component<*> {
+type Props = {
+
     /**
-     * RoomLockPrompt component's property types.
-     *
-     * @static
+     * The JitsiConference which requires a password.
+     */
+    conference: Object,
+
+    /**
+     * Redux store dispatch function.
      */
-    static propTypes = {
-        /**
-         * The JitsiConference which requires a password.
-         *
-         * @type {JitsiConference}
-         */
-        conference: PropTypes.object,
-        dispatch: PropTypes.func
-    };
+    dispatch: Dispatch<*>,
+};
 
+/**
+ * Implements a React Component which prompts the user for a password to lock  a
+ * conference/room.
+ */
+class RoomLockPrompt extends Component<Props> {
     /**
      * Initializes a new RoomLockPrompt instance.
      *

react/features/speaker-stats/components/SpeakerStats.js

@@ -1,6 +1,5 @@
 // @flow
 
-import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -13,34 +12,43 @@ import SpeakerStatsLabels from './SpeakerStatsLabels';
 declare var interfaceConfig: Object;
 
 /**
- * React component for displaying a list of speaker stats.
- *
- * @extends Component
+ * The type of the React {@code Component} props of {@link SpeakerStats}
  */
-class SpeakerStats extends Component<*, *> {
+type Props = {
+
     /**
-     * SpeakerStats component's property types.
-     *
-     * @static
+     * The display name for the local participant obtained from the redux store.
      */
-    static propTypes = {
-        /**
-         * The display name for the local participant obtained from the redux
-         * store.
-         */
-        _localDisplayName: PropTypes.string,
+    _localDisplayName: string,
 
-        /**
-         * The JitsiConference from which stats will be pulled.
-         */
-        conference: PropTypes.object,
+    /**
+     * The JitsiConference from which stats will be pulled.
+     */
+    conference: Object,
 
-        /**
-         * The function to translate human-readable text.
-         */
-        t: PropTypes.func
-    };
+    /**
+     * The function to translate human-readable text.
+     */
+    t: Function
+};
 
+/**
+ * The type of the React {@code Component} state of {@link SpeakerStats}
+ */
+type State = {
+
+    /**
+     * The stats summary provided by the JitsiConference.
+     */
+    stats: Object
+};
+
+/**
+ * React component for displaying a list of speaker stats.
+ *
+ * @extends Component
+ */
+class SpeakerStats extends Component<Props, State> {
     state = {
         stats: {}
     };

react/features/speaker-stats/components/SpeakerStatsItem.js

@@ -1,41 +1,41 @@
-import PropTypes from 'prop-types';
+/* @flow */
+
 import React, { Component } from 'react';
 
 import TimeElapsed from './TimeElapsed';
 
 /**
- * React component for display an individual user's speaker stats.
- *
- * @extends Component
+ * The type of the React {@code Component} props of {@link SpeakerStatsItem}.
  */
-class SpeakerStatsItem extends Component {
+type Props = {
+
     /**
-     * SpeakerStatsItem component's property types.
-     *
-     * @static
+     * The name of the participant.
      */
-    static propTypes = {
-        /**
-         * The name of the participant.
-         */
-        displayName: PropTypes.string,
+    displayName: string,
 
-        /**
-         * The total milliseconds the participant has been dominant speaker.
-         */
-        dominantSpeakerTime: PropTypes.number,
+    /**
+     * The total milliseconds the participant has been dominant speaker.
+     */
+    dominantSpeakerTime: number,
 
-        /**
-         * True if the participant is no longer in the meeting.
-         */
-        hasLeft: PropTypes.bool,
+    /**
+     * True if the participant is no longer in the meeting.
+     */
+    hasLeft: boolean,
 
-        /**
-         * True if the participant is currently the dominant speaker.
-         */
-        isDominantSpeaker: PropTypes.bool
-    };
+    /**
+     * True if the participant is currently the dominant speaker.
+     */
+    isDominantSpeaker: boolean
+};
 
+/**
+ * React component for display an individual user's speaker stats.
+ *
+ * @extends Component
+ */
+class SpeakerStatsItem extends Component<Props> {
     /**
      * Implements React's {@link Component#render()}.
      *

react/features/speaker-stats/components/SpeakerStatsLabels.js

@@ -1,26 +1,26 @@
-import PropTypes from 'prop-types';
+/* @flow */
+
 import React, { Component } from 'react';
 
 import { translate } from '../../base/i18n';
 
 /**
- * React component for labeling speaker stats column items.
- *
- * @extends Component
+ * The type of the React {@code Component} props of {@link SpeakerStatsLabels}.
  */
-class SpeakerStatsLabels extends Component {
+type Props = {
+
     /**
-     * SpeakerStatsLabels component's property types.
-     *
-     * @static
+     * The function to translate human-readable text.
      */
-    static propTypes = {
-        /**
-         * The function to translate human-readable text.
-         */
-        t: PropTypes.func
-    };
+    t: Function
+};
 
+/**
+ * React component for labeling speaker stats column items.
+ *
+ * @extends Component
+ */
+class SpeakerStatsLabels extends Component<Props> {
     /**
      * Implements React's {@link Component#render()}.
      *

react/features/speaker-stats/components/TimeElapsed.js

@@ -1,8 +1,25 @@
-import PropTypes from 'prop-types';
+/* @flow */
+
 import React, { Component } from 'react';
 
 import { translate } from '../../base/i18n';
 
+/**
+ * The type of the React {@code Component} props of {@link TimeElapsed}.
+ */
+type Props = {
+
+    /**
+     * The function to translate human-readable text.
+     */
+    t: Function,
+
+    /**
+     * The milliseconds to be converted into a human-readable format.
+     */
+    time: number
+};
+
 /**
  * React component for displaying total time elapsed. Converts a total count of
  * milliseconds into a more humanized form: "# hours, # minutes, # seconds".
@@ -10,24 +27,7 @@ import { translate } from '../../base/i18n';
  *
  * @extends Component
  */
-class TimeElapsed extends Component {
-    /**
-     * TimeElapsed component's property types.
-     *
-     * @static
-     */
-    static propTypes = {
-        /**
-         * The function to translate human-readable text.
-         */
-        t: PropTypes.func,
-
-        /**
-         * The milliseconds to be converted into a human-readable format.
-         */
-        time: PropTypes.number
-    };
-
+class TimeElapsed extends Component<Props> {
     /**
      * Implements React's {@link Component#render()}.
      *

react/features/toolbox/components/AbstractToolbarButton.js

@@ -1,67 +1,66 @@
-import PropTypes from 'prop-types';
+/* @flow */
+
 import React, { Component } from 'react';
 
 /**
- * Abstract (base) class for a button in {@link Toolbar}.
- *
- * @abstract
+ * The type of the React {@code Component} props of
+ * {@link AbstractToolbarButton}.
  */
-export default class AbstractToolbarButton extends Component {
+export type Props = {
+
     /**
-     * AbstractToolbarButton component's property types.
-     *
-     * @static
+     * A succinct description of what the button does. Used by accessibility
+     * tools and torture tests.
+     */
+    accessibilityLabel: string,
+
+    /**
+     * The name of the Icon of this {@code AbstractToolbarButton}.
+     */
+    iconName: string,
+
+    /**
+     * The style of the Icon of this {@code AbstractToolbarButton}.
+     */
+    iconStyle?: Object,
+
+    /**
+     * On click handler.
      */
-    static propTypes = {
-        /**
-         * A succinct description of what the button does. Used by accessibility
-         * tools and torture tests.
-         */
-        accessibilityLabel: PropTypes.string,
-
-        /**
-         * The name of the Icon of this {@code AbstractToolbarButton}.
-         */
-        iconName: PropTypes.string,
-
-        /**
-         * The style of the Icon of this {@code AbstractToolbarButton}.
-         */
-        iconStyle: PropTypes.object,
-
-        /**
-         * On click handler.
-         */
-        onClick: PropTypes.func,
-
-        /**
-         * {@code AbstractToolbarButton} styles.
-         */
-        style:
-            PropTypes.oneOfType([
-                PropTypes.array,
-                PropTypes.object
-            ]),
-
-        /**
-         * The color underlaying the button.
-         */
-        underlayColor: PropTypes.any
-    };
+    onClick: Function,
 
+    /**
+     * {@code AbstractToolbarButton} styles.
+     */
+    style?: Array<string> | Object,
+
+    /**
+     * The color underlaying the button.
+     */
+    underlayColor?: any
+};
+
+/**
+ * Abstract (base) class for a button in {@link Toolbar}.
+ *
+ * @abstract
+ */
+export default class AbstractToolbarButton<P: Props> extends Component<P> {
     /**
      * Initializes a new {@code AbstractToolbarButton} instance.
      *
      * @param {Object} props - The React {@code Component} props to initialize
      * the new {@code AbstractToolbarButton} instance with.
      */
-    constructor(props) {
+    constructor(props: P) {
         super(props);
 
         // Bind event handlers so they are only bound once per instance.
         this._onClick = this._onClick.bind(this);
     }
 
+    _onClick: (any) => any;
+
     /**
      * Handles clicking/pressing this {@code AbstractToolbarButton} by
      * forwarding the event to the {@code onClick} prop of this instance if any.
@@ -86,15 +85,22 @@ export default class AbstractToolbarButton extends Component {
         return this._renderButton(this._renderIcon());
     }
 
+    _renderButton: (React$Element<*> | null) => React$Element<*>;
+
     /**
      * Renders the icon of this {@code AbstractToolbarButton}.
      *
      * @param {string|ReactClass} type - The React Component type of the icon to
      * be rendered.
      * @protected
-     * @returns {ReactElement} The icon of this {@code AbstractToolbarButton}.
+     * @returns {ReactElement|null} The icon of this
+     * {@code AbstractToolbarButton}.
      */
     _renderIcon(type) {
+        if (!type) {
+            return null;
+        }
+
         const props = {};
 
         'iconName' in this.props && (props.name = this.props.iconName);

react/features/toolbox/components/web/OverflowMenuButton.js

@@ -1,5 +1,6 @@
+/* @flow */
+
 import InlineDialog from '@atlaskit/inline-dialog';
-import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import { createToolbarEvent, sendAnalytics } from '../../../analytics';
@@ -8,45 +9,44 @@ import { translate } from '../../../base/i18n';
 import ToolbarButton from './ToolbarButton';
 
 /**
- * A React {@code Component} for opening or closing the {@code OverflowMenu}.
- *
- * @extends Component
+ * The type of the React {@code Component} props of {@link OverflowMenuButton}.
  */
-class OverflowMenuButton extends Component {
+type Props = {
+
     /**
-     * {@code OverflowMenuButton} component's property types.
-     *
-     * @static
+     * A child React Element to display within {@code InlineDialog}.
+     */
+    children: React$Node,
+
+    /**
+     * Whether or not the OverflowMenu popover should display.
+     */
+    isOpen: boolean,
+
+    /**
+     * Calback to change the visibility of the overflow menu.
      */
-    static propTypes = {
-        /**
-         * A child React Element to display within {@code InlineDialog}.
-         */
-        children: PropTypes.object,
-
-        /**
-         * Whether or not the OverflowMenu popover should display.
-         */
-        isOpen: PropTypes.bool,
-
-        /**
-         * Calback to change the visiblility of the overflow menu.
-         */
-        onVisibilityChange: PropTypes.func,
-
-        /**
-         * Invoked to obtain translated strings.
-         */
-        t: PropTypes.func
-    };
+    onVisibilityChange: Function,
 
+    /**
+     * Invoked to obtain translated strings.
+     */
+    t: Function
+};
+
+/**
+ * A React {@code Component} for opening or closing the {@code OverflowMenu}.
+ *
+ * @extends Component
+ */
+class OverflowMenuButton extends Component<Props> {
     /**
      * Initializes a new {@code OverflowMenuButton} instance.
      *
      * @param {Object} props - The read-only properties with which the new
      * instance is to be initialized.
      */
-    constructor(props) {
+    constructor(props: Props) {
         super(props);
 
         // Bind event handlers so they are only bound once per instance.
@@ -83,6 +83,8 @@ class OverflowMenuButton extends Component {
         );
     }
 
+    _onCloseDialog: () => void;
+
     /**
      * Callback invoked when {@code InlineDialog} signals that it should be
      * close.
@@ -94,6 +96,8 @@ class OverflowMenuButton extends Component {
         this.props.onVisibilityChange(false);
     }
 
+    _onToggleDialogVisibility: () => void;
+
     /**
      * Callback invoked to signal that an event has occurred that should change
      * the visibility of the {@code InlineDialog} component.

react/features/toolbox/components/web/OverflowMenuProfileItem.js

@@ -1,6 +1,5 @@
-/* globals interfaceConfig */
+/* @flow */
 
-import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -10,43 +9,45 @@ import {
     getLocalParticipant
 } from '../../../base/participants';
 
+declare var interfaceConfig: Object;
+
+/**
+ * The type of the React {@code Component} props of
+ * {@link OverflowMenuProfileItem}.
+ */
+type Props = {
+
+    /**
+     * The redux representation of the local participant.
+     */
+    _localParticipant: Object,
+
+    /**
+     * Whether the button support clicking or not.
+     */
+    _unclickable: boolean,
+
+    /**
+     * The callback to invoke when {@code OverflowMenuProfileItem} is
+     * clicked.
+     */
+    onClick: Function
+};
+
 /**
  * A React {@code Component} for displaying a link with a profile avatar as an
  * icon.
  *
  * @extends Component
  */
-class OverflowMenuProfileItem extends Component {
-    /**
-     * {@code OverflowMenuProfileItem}'s property types.
-     *
-     * @static
-     */
-    static propTypes = {
-        /**
-         * The redux representation of the local participant.
-         */
-        _localParticipant: PropTypes.object,
-
-        /**
-         * Whether the button support clicking or not.
-         */
-        _unclickable: PropTypes.bool,
-
-        /**
-         * The callback to invoke when {@code OverflowMenuProfileItem} is
-         * clicked.
-         */
-        onClick: PropTypes.func
-    };
-
+class OverflowMenuProfileItem extends Component<Props> {
     /**
      * Initializes a new {@code OverflowMenuProfileItem} instance.
      *
      * @param {Object} props - The read-only properties with which the new
      * instance is to be initialized.
      */
-    constructor(props) {
+    constructor(props: Props) {
         super(props);
 
         // Bind event handler so it is only bound once for every instance.
@@ -87,6 +88,8 @@ class OverflowMenuProfileItem extends Component {
         );
     }
 
+    _onClick: () => void;
+
     /**
      * Invokes an on click callback if clicking is allowed.
      *

react/features/toolbox/components/web/ToolbarButton.js

@@ -1,15 +1,35 @@
+/* @flow */
+
 import Tooltip from '@atlaskit/tooltip';
-import PropTypes from 'prop-types';
 import React from 'react';
 
 import AbstractToolbarButton from '../AbstractToolbarButton';
+import type { Props as AbstractToolbarButtonProps }
+    from '../AbstractToolbarButton';
+
+/**
+ * The type of the React {@code Component} props of {@link ToolbarButton}.
+ */
+type Props = AbstractToolbarButtonProps & {
+
+    /**
+     * The text to display in the tooltip.
+     */
+    tooltip: string,
+
+    /**
+     * From which direction the tooltip should appear, relative to the
+     * button.
+     */
+    tooltipPosition: string
+};
 
 /**
  * Represents a button in the toolbar.
  *
  * @extends AbstractToolbarButton
  */
-class ToolbarButton extends AbstractToolbarButton {
+class ToolbarButton extends AbstractToolbarButton<Props> {
     /**
      * Default values for {@code ToolbarButton} component's properties.
      *
@@ -19,26 +39,6 @@ class ToolbarButton extends AbstractToolbarButton {
         tooltipPosition: 'top'
     };
 
-    /**
-     * {@code ToolbarButton} component's property types.
-     *
-     * @static
-     */
-    static propTypes = {
-        ...AbstractToolbarButton.propTypes,
-
-        /**
-         * The text to display in the tooltip.
-         */
-        tooltip: PropTypes.string,
-
-        /**
-         * From which direction the tooltip should appear, relative to the
-         * button.
-         */
-        tooltipPosition: PropTypes.string
-    }
-
     /**
      * Renders the button of this {@code ToolbarButton}.
      *

react/features/unsupported-browser/components/UnsupportedDesktopBrowser.js

@@ -1,6 +1,5 @@
 /* @flow */
 
-import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import { translate } from '../../base/i18n';
@@ -17,26 +16,23 @@ import { CHROME, EDGE, FIREFOX, SAFARI } from './browserLinks';
 const _SNS = 'unsupported-desktop-browser';
 
 /**
- * React component representing unsupported browser page.
- *
- * @class UnsupportedDesktopBrowser
+ * The type of the React {@code Component} props of
+ * {@link UnsupportedDesktopBrowser}.
  */
-class UnsupportedDesktopBrowser extends Component<*> {
+type Props = {
+
     /**
-     * UnsupportedDesktopBrowser component's property types.
-     *
-     * @static
+     * The function to translate human-readable text.
      */
-    static propTypes = {
-        /**
-         * The function to translate human-readable text.
-         *
-         * @public
-         * @type {Function}
-         */
-        t: PropTypes.func
-    };
+    t: Function
+};
 
+/**
+ * React component representing unsupported browser page.
+ *
+ * @class UnsupportedDesktopBrowser
+ */
+class UnsupportedDesktopBrowser extends Component<Props> {
     /**
      * Renders the component.
      *

react/features/video-quality/components/VideoQualitySlider.web.js

@@ -1,5 +1,6 @@
+/* @flow */
+
 import InlineMessage from '@atlaskit/inline-message';
-import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -40,50 +41,51 @@ const createEvent = function(quality) {
 };
 
 /**
- * Implements a React {@link Component} which displays a slider for selecting a
- * new receive video quality.
- *
- * @extends Component
+ * The type of the React {@code Component} props of {@link VideoQualitySlider}.
  */
-class VideoQualitySlider extends Component {
+type Props = {
+
     /**
-     * {@code VideoQualitySlider}'s property types.
-     *
-     * @static
+     * Whether or not the conference is in audio only mode.
      */
-    static propTypes = {
-        /**
-         * Whether or not the conference is in audio only mode.
-         */
-        _audioOnly: PropTypes.bool,
+    _audioOnly: Boolean,
 
-        /**
-         * Whether or not the conference is in peer to peer mode.
-         */
-        _p2p: PropTypes.bool,
+    /**
+     * Whether or not the conference is in peer to peer mode.
+     */
+    _p2p: Boolean,
 
-        /**
-         * The currently configured maximum quality resolution to be received
-         * from remote participants.
-         */
-        _receiverVideoQuality: PropTypes.number,
+    /**
+     * The currently configured maximum quality resolution to be received
+     * from remote participants.
+     */
+    _receiverVideoQuality: Number,
 
-        /**
-         * Whether or not displaying video is supported in the current
-         * environment. If false, the slider will be disabled.
-         */
-        _videoSupported: PropTypes.bool,
+    /**
+     * Whether or not displaying video is supported in the current
+     * environment. If false, the slider will be disabled.
+     */
+    _videoSupported: Boolean,
 
-        /**
-         * Invoked to request toggling of audio only mode.
-         */
-        dispatch: PropTypes.func,
+    /**
+     * Invoked to request toggling of audio only mode.
+     */
+    dispatch: Dispatch<*>,
 
-        /**
-         * Invoked to obtain translated strings.
-         */
-        t: PropTypes.func
-    };
+    /**
+     * Invoked to obtain translated strings.
+     */
+    t: Function
+};
+
+/**
+ * Implements a React {@link Component} which displays a slider for selecting a
+ * new receive video quality.
+ *
+ * @extends Component
+ */
+class VideoQualitySlider extends Component<Props> {
+    _sliderOptions: Array<Object>;
 
     /**
      * Initializes a new {@code VideoQualitySlider} instance.
@@ -261,6 +263,8 @@ class VideoQualitySlider extends Component {
         });
     }
 
+    _enableAudioOnly: () => void;
+
     /**
      * Dispatches an action to enable audio only mode.
      *
@@ -273,6 +277,8 @@ class VideoQualitySlider extends Component {
         this.props.dispatch(setAudioOnly(true));
     }
 
+    _enableHighDefinition: () => void;
+
     /**
      * Handles the action of the high definition video being selected.
      * Dispatches an action to receive high quality video from remote
@@ -287,6 +293,8 @@ class VideoQualitySlider extends Component {
         this._setPreferredVideoQuality(HIGH);
     }
 
+    _enableLowDefinition: () => void;
+
     /**
      * Dispatches an action to receive low quality video from remote
      * participants.
@@ -300,6 +308,8 @@ class VideoQualitySlider extends Component {
         this._setPreferredVideoQuality(LOW);
     }
 
+    _enableStandardDefinition: () => void;
+
     /**
      * Dispatches an action to receive standard quality video from remote
      * participants.
@@ -337,6 +347,8 @@ class VideoQualitySlider extends Component {
         return _sliderOptions.indexOf(matchingOption);
     }
 
+    _onSliderChange: () => void;
+
     /**
      * Invokes a callback when the selected video quality changes.
      *

react/features/welcome/components/LocalVideoTrackUnderlay.native.js

@@ -1,6 +1,5 @@
 /* @flow */
 
-import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { View } from 'react-native';
 import { connect } from 'react-redux';
@@ -12,30 +11,46 @@ import { getLocalVideoTrack } from '../../base/tracks';
 import styles from './styles';
 
 /**
- * Implements a React {@code Component} which underlays the local video track,
- * if any, underneath its children.
+ * The type of the React {@code Component} props of
+ * {@link LocalVideoTrackUnderlay}.
  */
-class LocalVideoTrackUnderlay extends Component<*, *> {
-    state: {
-
-        /**
-         * The style of {@code LocalVideoTrackUnderlay} which is a combination
-         * of its default style and the consumer-specified style.
-         */
-        style: Object
-    };
+type Props = {
 
     /**
-     * {@code LocalVideoTrackUnderlay}'s React {@code Component} prop types.
-     *
-     * @static
+     * The redux representation of the local participant's video track.
      */
-    static propTypes = {
-        _localVideoTrack: PropTypes.object,
-        children: PropTypes.node,
-        style: PropTypes.object
-    };
+    _localVideoTrack: Object,
+
+    /**
+     * React Elements to display within the component.
+     */
+    children: React$Node,
+
+    /**
+     * The style, if any, to apply to {@link LocalVideoTrackUnderlay} in
+     * addition to its default style.
+     */
+    style: Object
+};
 
+/**
+ * The type of the React {@code Component} state of
+ * {@link LocalVideoTrackUnderlay}.
+ */
+type State = {
+
+    /**
+     * The style of {@code LocalVideoTrackUnderlay} which is a combination
+     * of its default style and the consumer-specified style.
+     */
+    style: Object
+};
+
+/**
+ * Implements a React {@code Component} which underlays the local video track,
+ * if any, underneath its children.
+ */
+class LocalVideoTrackUnderlay extends Component<Props, State> {
     /**
      * Initializes a new {@code LocalVideoTrackUnderlay} instance.
      *