Import PropTypes from prop-types

Prepare for React 16.

react/features/app/components/App.native.js

@@ -1,6 +1,6 @@
 /* global __DEV__ */
 
-import React from 'react';
+import PropTypes from 'prop-types';
 import { Linking } from 'react-native';
 
 import '../../analytics';
@@ -35,7 +35,7 @@ export class App extends AbstractApp {
          * page is rendered when the {@link App} is not at a location (URL)
          * identifying a Jitsi Meet conference/room.
          */
-        welcomePageEnabled: React.PropTypes.bool
+        welcomePageEnabled: PropTypes.bool
     };
 
     /**

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

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 /**
@@ -30,7 +31,7 @@ class AudioLevelIndicator extends Component {
          *
          * @type {number}
          */
-        audioLevel: React.PropTypes.number
+        audioLevel: PropTypes.number
     };
 
     /**

react/features/base/dialog/actionTypes.js

@@ -13,7 +13,7 @@ export const HIDE_DIALOG = Symbol('HIDE_DIALOG');
  * {
  *     type: OPEN_DIALOG,
  *     component: React.Component,
- *     props: React.PropTypes.object
+ *     props: PropTypes
  * }
  *
  */

react/features/base/dialog/components/StatelessDialog.web.js

@@ -1,6 +1,7 @@
 import AKButton from '@atlaskit/button';
 import AKButtonGroup from '@atlaskit/button-group';
 import ModalDialog from '@atlaskit/modal-dialog';
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import { translate } from '../../i18n';
@@ -34,24 +35,24 @@ class StatelessDialog extends Component {
         /**
          * This is the body of the dialog, the component children.
          */
-        children: React.PropTypes.node,
+        children: PropTypes.node,
 
         /**
          * Disables dismissing the dialog when the blanket is clicked. Enabled
          * by default.
          */
-        disableBlanketClickDismiss: React.PropTypes.bool,
+        disableBlanketClickDismiss: PropTypes.bool,
 
         /**
          * Whether the dialog is modal. This means clicking on the blanket will
          * leave the dialog open. No cancel button.
          */
-        isModal: React.PropTypes.bool,
+        isModal: PropTypes.bool,
 
         /**
          * Disables rendering of the submit button.
          */
-        submitDisabled: React.PropTypes.bool,
+        submitDisabled: PropTypes.bool,
 
         /**
          * Width of the dialog, can be:
@@ -60,7 +61,7 @@ class StatelessDialog extends Component {
          * - integer value for pixel width
          * - string value for percentage
          */
-        width: React.PropTypes.string
+        width: PropTypes.string
     };
 
     /**

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

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 /**
@@ -22,8 +23,8 @@ export default class AbstractAudio extends Component {
          *
          * @type {string}
          */
-        src: React.PropTypes.string,
-        stream: React.PropTypes.object
+        src: PropTypes.string,
+        stream: PropTypes.object
     };
 
     /**

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

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import { trackVideoStarted } from '../../tracks';
@@ -18,18 +19,18 @@ export default class AbstractVideoTrack extends Component {
      * @static
      */
     static propTypes = {
-        dispatch: React.PropTypes.func,
+        dispatch: PropTypes.func,
 
-        videoTrack: React.PropTypes.object,
+        videoTrack: PropTypes.object,
 
-        waitForVideoStarted: React.PropTypes.bool,
+        waitForVideoStarted: PropTypes.bool,
 
         /**
          * 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: React.PropTypes.number
+        zOrder: PropTypes.number
     };
 
     /**

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

@@ -1,5 +1,6 @@
 /* @flow */
 
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { RTCView } from 'react-native-webrtc';
 
@@ -17,9 +18,9 @@ export default class Video extends Component {
      * @static
      */
     static propTypes = {
-        mirror: React.PropTypes.bool,
-        onPlaying: React.PropTypes.func,
-        stream: React.PropTypes.object,
+        mirror: PropTypes.bool,
+        onPlaying: PropTypes.func,
+        stream: PropTypes.object,
 
         /**
          * Similarly to the CSS property z-index, specifies the z-order of this
@@ -44,7 +45,7 @@ export default class Video extends Component {
          * 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: React.PropTypes.number
+        zOrder: PropTypes.number
     };
 
     /**

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

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 /**
@@ -26,23 +27,23 @@ class Video extends Component {
         /**
          * CSS classes to add to the video element.
          */
-        className: React.PropTypes.string,
+        className: PropTypes.string,
 
         /**
          * The value of the id attribute of the video. Used by the torture tests
          * to locate video elements.
          */
-        id: React.PropTypes.string,
+        id: PropTypes.string,
 
         /**
          * Optional callback to invoke once the video starts playing.
          */
-        onVideoPlaying: React.PropTypes.func,
+        onVideoPlaying: PropTypes.func,
 
         /**
          * The JitsiLocalTrack to display.
          */
-        videoTrack: React.PropTypes.object
+        videoTrack: PropTypes.object
     };
 
     /**

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

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
 
@@ -36,13 +37,13 @@ class VideoTrack extends AbstractVideoTrack {
         /**
          * CSS classes to add to the video element.
          */
-        className: React.PropTypes.string,
+        className: PropTypes.string,
 
         /**
          * The value of the id attribute of the video. Used by the torture tests
          * to locate video elements.
          */
-        id: React.PropTypes.string
+        id: PropTypes.string
     };
 
     /**

react/features/base/participants/components/Avatar.native.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { View } from 'react-native';
 
@@ -34,14 +35,14 @@ export default class Avatar extends Component {
          * The optional style to add to the {@link Avatar} in order to customize
          * its base look (and feel).
          */
-        style: React.PropTypes.object,
+        style: PropTypes.object,
 
         /**
          * The URI of the {@link Avatar}.
          *
          * @type {string}
          */
-        uri: React.PropTypes.string
+        uri: PropTypes.string
     };
 
     /**

react/features/base/participants/components/Avatar.web.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 /**
@@ -15,7 +16,7 @@ export default class Avatar extends Component {
          *
          * @type {string}
          */
-        uri: React.PropTypes.string
+        uri: PropTypes.string
     };
 
     /**

react/features/base/participants/components/ParticipantView.native.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -34,7 +35,7 @@ class ParticipantView extends Component {
          *
          * @private
          */
-        _audioOnly: React.PropTypes.bool,
+        _audioOnly: PropTypes.bool,
 
         /**
          * The source (e.g. URI, URL) of the avatar image of the participant
@@ -42,7 +43,7 @@ class ParticipantView extends Component {
          *
          * @private
          */
-        _avatar: React.PropTypes.string,
+        _avatar: PropTypes.string,
 
         /**
          * The connection status of the participant. Her video will only be
@@ -51,50 +52,50 @@ class ParticipantView extends Component {
          *
          * @private
          */
-        _connectionStatus: React.PropTypes.string,
+        _connectionStatus: PropTypes.string,
 
         /**
          * The video Track of the participant with {@link #participantId}.
          */
-        _videoTrack: React.PropTypes.object,
+        _videoTrack: PropTypes.object,
 
         /**
          * The style, if any, of the avatar in addition to the default style.
          */
-        avatarStyle: React.PropTypes.object,
+        avatarStyle: PropTypes.object,
 
         /**
          * The ID of the participant (to be) depicted by ParticipantView.
          *
          * @public
          */
-        participantId: React.PropTypes.string,
+        participantId: PropTypes.string,
 
         /**
          * True if the avatar of the depicted participant is to be shown should
          * the avatar be available and the video of the participant is not to be
          * shown; otherwise, false. If undefined, defaults to true.
          */
-        showAvatar: React.PropTypes.bool,
+        showAvatar: PropTypes.bool,
 
         /**
          * True if the video of the depicted participant is to be shown should
          * the video be available. If undefined, defaults to true.
          */
-        showVideo: React.PropTypes.bool,
+        showVideo: PropTypes.bool,
 
         /**
          * The style, if any, to apply to ParticipantView in addition to its
          * default style.
          */
-        style: React.PropTypes.object,
+        style: PropTypes.object,
 
         /**
          * The z-order of the Video of ParticipantView in the stacking space of
          * all Videos. For more details, refer to the zOrder property of the
          * Video class for React Native.
          */
-        zOrder: React.PropTypes.number
+        zOrder: PropTypes.number
     };
 
     /**

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

@@ -1,4 +1,5 @@
 import InlineDialog from '@atlaskit/inline-dialog';
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 /**
@@ -52,35 +53,35 @@ class Popover extends Component {
         /**
          * A child React Element to use as the trigger for showing the dialog.
          */
-        children: React.PropTypes.object,
+        children: PropTypes.object,
 
         /**
          * Additional CSS classnames to apply to the root of the {@code Popover}
          * component.
          */
-        className: React.PropTypes.string,
+        className: PropTypes.string,
 
         /**
          * The ReactElement to display within the dialog.
          */
-        content: React.PropTypes.object,
+        content: PropTypes.object,
 
         /**
          * An id attribute to apply to the root of the {@code Popover}
          * component.
          */
-        id: React.PropTypes.string,
+        id: PropTypes.string,
 
         /**
          * Callback to invoke when the popover has opened.
          */
-        onPopoverOpen: React.PropTypes.func,
+        onPopoverOpen: PropTypes.func,
 
         /**
          * From which side of the dialog trigger the dialog should display. The
          * value will be passed to {@code InlineDialog}.
          */
-        position: React.PropTypes.string
+        position: PropTypes.string
     };
 
     /**

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

@@ -1,5 +1,6 @@
 /* @flow */
 
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 /**
@@ -15,7 +16,7 @@ export default class AbstractContainer extends Component {
      * @static
      */
     static propTypes = {
-        children: React.PropTypes.node,
+        children: PropTypes.node,
 
         /**
          * The event handler/listener to be invoked when this
@@ -24,13 +25,13 @@ export default class AbstractContainer extends Component {
          * undefined, {@code touchFeedback} is considered defined as
          * {@code true}.
          */
-        onClick: React.PropTypes.func,
+        onClick: PropTypes.func,
 
         /**
          * The style (as in stylesheet) to be applied to this
          * {@code AbstractContainer}.
          */
-        style: React.PropTypes.object,
+        style: PropTypes.object,
 
         /**
          * If this instance is to provide visual feedback when touched, then
@@ -38,14 +39,14 @@ export default class AbstractContainer extends Component {
          * undefined and {@link onClick} is defined, {@code touchFeedback} is
          * considered defined as {@code true}.
          */
-        touchFeedback: React.PropTypes.bool,
+        touchFeedback: PropTypes.bool,
 
         /**
          * If this {@code AbstractContainer} is to be visible, then {@code true}
          * or {@code false} if this instance is to be hidden or not rendered at
          * all.
          */
-        visible: React.PropTypes.bool
+        visible: PropTypes.bool
     };
 
     /**

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

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { Linking } from 'react-native';
 
@@ -17,22 +18,22 @@ export default class Link extends Component {
         /**
          * The children to be displayed within this Link.
          */
-        children: React.PropTypes.node,
+        children: PropTypes.node,
 
         /**
          * Notifies that this Link failed to open the URL associated with it.
          */
-        onLinkingOpenURLRejected: React.PropTypes.func,
+        onLinkingOpenURLRejected: PropTypes.func,
 
         /**
          * The CSS style to be applied to this Link for the purposes of display.
          */
-        style: React.PropTypes.object,
+        style: PropTypes.object,
 
         /**
          * The URL to be opened when this Link is clicked/pressed.
          */
-        url: React.PropTypes.string
+        url: PropTypes.string
     };
 
     /**

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

@@ -1,4 +1,5 @@
 import AKButton from '@atlaskit/button';
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import { translate } from '../../../i18n';
@@ -18,12 +19,12 @@ class InlineDialogFailure extends Component {
         /**
          * Allows to retry the call that previously didn't succeed.
          */
-        onRetry: React.PropTypes.func,
+        onRetry: PropTypes.func,
 
         /**
          * Invoked to obtain translated strings.
          */
-        t: React.PropTypes.func
+        t: PropTypes.func
     };
 
     /**

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

@@ -2,6 +2,7 @@ import { MultiSelectStateless } from '@atlaskit/multi-select';
 import AKInlineDialog from '@atlaskit/inline-dialog';
 import Spinner from '@atlaskit/spinner';
 import _debounce from 'lodash/debounce';
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import InlineDialogFailure from './InlineDialogFailure';
@@ -20,45 +21,45 @@ class MultiSelectAutocomplete extends Component {
         /**
          * The default value of the selected item.
          */
-        defaultValue: React.PropTypes.array,
+        defaultValue: PropTypes.array,
 
         /**
          * Indicates if the component is disabled.
          */
-        isDisabled: React.PropTypes.bool,
+        isDisabled: PropTypes.bool,
 
         /**
          * The text to show when no matches are found.
          */
-        noMatchesFound: React.PropTypes.string,
+        noMatchesFound: PropTypes.string,
 
         /**
          * The function called when the selection changes.
          */
-        onSelectionChange: React.PropTypes.func,
+        onSelectionChange: PropTypes.func,
 
         /**
          * The placeholder text of the input component.
          */
-        placeholder: React.PropTypes.string,
+        placeholder: PropTypes.string,
 
         /**
          * The service providing the search.
          */
-        resourceClient: React.PropTypes.shape({
-            makeQuery: React.PropTypes.func,
-            parseResults: React.PropTypes.func
+        resourceClient: PropTypes.shape({
+            makeQuery: PropTypes.func,
+            parseResults: PropTypes.func
         }).isRequired,
 
         /**
          * Indicates if the component should fit the container.
          */
-        shouldFitContainer: React.PropTypes.bool,
+        shouldFitContainer: PropTypes.bool,
 
         /**
          * Indicates if we should focus.
          */
-        shouldFocus: React.PropTypes.bool
+        shouldFocus: PropTypes.bool
     };
 
     /**

react/features/conference/components/Conference.web.js

@@ -1,5 +1,6 @@
 /* @flow */
 
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect as reactReduxConnect } from 'react-redux';
 
@@ -27,7 +28,7 @@ class Conference extends Component {
      * @static
      */
     static propTypes = {
-        dispatch: React.PropTypes.func
+        dispatch: PropTypes.func
     };
 
     /**

react/features/contact-list/components/ContactListItem.web.js

@@ -1,5 +1,6 @@
 /* global APP */
 
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import UIEvents from '../../../../service/UI/UIEvents';
@@ -22,18 +23,18 @@ class ContactListItem extends Component {
         /**
          * The link to the participant's avatar image.
          */
-        avatarURI: React.PropTypes.string,
+        avatarURI: PropTypes.string,
 
         /**
          * An id attribute to set on the root of {@code ContactListItem}. Used
          * by the torture tests.
          */
-        id: React.PropTypes.string,
+        id: PropTypes.string,
 
         /**
          * The participant's display name.
          */
-        name: React.PropTypes.string
+        name: PropTypes.string
     };
 
     /**

react/features/contact-list/components/ContactListPanel.web.js

@@ -1,4 +1,5 @@
 import Button from '@atlaskit/button';
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -8,8 +9,6 @@ import { openInviteDialog } from '../../invite';
 
 import ContactListItem from './ContactListItem';
 
-const { PropTypes } = React;
-
 declare var interfaceConfig: Object;
 
 /**

react/features/contact-list/components/ParticipantCounter.web.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -19,7 +20,7 @@ class ParticipantCounter extends Component {
         /**
          * The number of participants in the conference.
          */
-        _count: React.PropTypes.number
+        _count: PropTypes.number
     };
 
     /**

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

@@ -1,4 +1,5 @@
 import Tabs from '@atlaskit/tabs';
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -57,29 +58,29 @@ class DesktopPicker extends Component {
         /**
          * Used to request DesktopCapturerSources.
          */
-        dispatch: React.PropTypes.func,
+        dispatch: PropTypes.func,
 
         /**
          * The callback to be invoked when the component is closed or when
          * a DesktopCapturerSource has been chosen.
          */
-        onSourceChoose: React.PropTypes.func,
+        onSourceChoose: PropTypes.func,
 
         /**
          * An object with options related to desktop sharing.
          */
-        options: React.PropTypes.object,
+        options: PropTypes.object,
 
         /**
          * An object with arrays of DesktopCapturerSources. The key should be
          * the source type.
          */
-        sources: React.PropTypes.object,
+        sources: PropTypes.object,
 
         /**
          * Used to obtain translations.
          */
-        t: React.PropTypes.func
+        t: PropTypes.func
     };
 
     /**

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

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import DesktopSourcePreview from './DesktopSourcePreview';
@@ -17,28 +18,28 @@ class DesktopPickerPane extends Component {
         /**
          * The handler to be invoked when a DesktopSourcePreview is clicked.
          */
-        onClick: React.PropTypes.func,
+        onClick: PropTypes.func,
 
         /**
          * The handler to be invoked when a DesktopSourcePreview is double
          * clicked.
          */
-        onDoubleClick: React.PropTypes.func,
+        onDoubleClick: PropTypes.func,
 
         /**
          * The id of the DesktopCapturerSource that is currently selected.
          */
-        selectedSourceId: React.PropTypes.string,
+        selectedSourceId: PropTypes.string,
 
         /**
          * An array of DesktopCapturerSources.
          */
-        sources: React.PropTypes.array,
+        sources: PropTypes.array,
 
         /**
          * The source type of the DesktopCapturerSources to display.
          */
-        type: React.PropTypes.string
+        type: PropTypes.string
     };
 
     /**

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

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 /**
@@ -16,30 +17,30 @@ class DesktopSourcePreview extends Component {
          * The callback to invoke when the component is clicked. The id of
          * the DesktopCapturerSource will be passed in.
          */
-        onClick: React.PropTypes.func,
+        onClick: PropTypes.func,
 
         /**
          * The callback to invoke when the component is double clicked. The id
          * of the DesktopCapturerSource will be passed in.
          */
-        onDoubleClick: React.PropTypes.func,
+        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: React.PropTypes.bool,
+        selected: PropTypes.bool,
 
         /**
          * The DesktopCapturerSource to display.
          */
-        source: React.PropTypes.object,
+        source: PropTypes.object,
 
         /**
          * The source type of the DesktopCapturerSources to display.
          */
-        type: React.PropTypes.string
+        type: PropTypes.string
     };
 
     /**

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

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { PureComponent } from 'react';
 
 import { JitsiTrackEvents } from '../../base/lib-jitsi-meet';
@@ -15,7 +16,7 @@ class AudioInputPreview extends PureComponent {
         /*
          * The JitsiLocalTrack to show an audio level meter for.
          */
-        track: React.PropTypes.object
+        track: PropTypes.object
     };
 
     /**

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

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import { translate } from '../../base/i18n';
@@ -19,12 +20,12 @@ class AudioOutputPreview extends Component {
         /**
          * The device id of the audio output device to use.
          */
-        deviceId: React.PropTypes.string,
+        deviceId: PropTypes.string,
 
         /**
          * Invoked to obtain translated strings.
          */
-        t: React.PropTypes.func
+        t: PropTypes.func
     };
 
     /**

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

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -26,25 +27,25 @@ class DeviceSelectionDialog extends Component {
          * All known audio and video devices split by type. This prop comes from
          * the app state.
          */
-        _availableDevices: React.PropTypes.object,
+        _availableDevices: PropTypes.object,
 
         /**
          * Device id for the current audio input device. This device will be set
          * as the default audio input device to preview.
          */
-        currentAudioInputId: React.PropTypes.string,
+        currentAudioInputId: PropTypes.string,
 
         /**
          * Device id for the current audio output device. This device will be
          * set as the default audio output device to preview.
          */
-        currentAudioOutputId: React.PropTypes.string,
+        currentAudioOutputId: PropTypes.string,
 
         /**
          * Device id for the current video input device. This device will be set
          * as the default video input device to preview.
          */
-        currentVideoInputId: React.PropTypes.string,
+        currentVideoInputId: PropTypes.string,
 
         /**
          * Whether or not the audio selector can be interacted with. If true,
@@ -52,37 +53,37 @@ class DeviceSelectionDialog extends Component {
          * specifically used to prevent audio device changing in Firefox, which
          * currently does not work due to a browser-side regression.
          */
-        disableAudioInputChange: React.PropTypes.bool,
+        disableAudioInputChange: PropTypes.bool,
 
         /**
          * True if device changing is configured to be disallowed. Selectors
          * will display as disabled.
          */
-        disableDeviceChange: React.PropTypes.bool,
+        disableDeviceChange: PropTypes.bool,
 
         /**
          * Invoked to notify the store of app state changes.
          */
-        dispatch: React.PropTypes.func,
+        dispatch: PropTypes.func,
 
         /**
          * Function that checks whether or not a new audio input source can be
          * selected.
          */
-        hasAudioPermission: React.PropTypes.func,
+        hasAudioPermission: PropTypes.func,
 
         /**
          * Function that checks whether or not a new video input sources can be
          * selected.
          */
-        hasVideoPermission: React.PropTypes.func,
+        hasVideoPermission: PropTypes.func,
 
         /**
          * If true, the audio meter will not display. Necessary for browsers or
          * configurations that do not support local stats to prevent a
          * non-responsive mic preview from displaying.
          */
-        hideAudioInputPreview: React.PropTypes.bool,
+        hideAudioInputPreview: PropTypes.bool,
 
         /**
          * Whether or not the audio output source selector should display. If
@@ -90,7 +91,7 @@ class DeviceSelectionDialog extends Component {
          * rendered. This is specifically used for hiding audio output on
          * temasys browsers which do not support such change.
          */
-        hideAudioOutputSelect: React.PropTypes.bool
+        hideAudioOutputSelect: PropTypes.bool
     };
 
     /**

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

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import { StatelessDialog } from '../../base/dialog';
@@ -25,30 +26,30 @@ class DeviceSelectionDialogBase extends Component {
          * All known audio and video devices split by type. This prop comes from
          * the app state.
          */
-        availableDevices: React.PropTypes.object,
+        availableDevices: PropTypes.object,
 
         /**
          * Closes the dialog.
          */
-        closeModal: React.PropTypes.func,
+        closeModal: PropTypes.func,
 
         /**
          * Device id for the current audio input device. This device will be set
          * as the default audio input device to preview.
          */
-        currentAudioInputId: React.PropTypes.string,
+        currentAudioInputId: PropTypes.string,
 
         /**
          * Device id for the current audio output device. This device will be
          * set as the default audio output device to preview.
          */
-        currentAudioOutputId: React.PropTypes.string,
+        currentAudioOutputId: PropTypes.string,
 
         /**
          * Device id for the current video input device. This device will be set
          * as the default video input device to preview.
          */
-        currentVideoInputId: React.PropTypes.string,
+        currentVideoInputId: PropTypes.string,
 
         /**
          * Whether or not the audio selector can be interacted with. If true,
@@ -56,38 +57,38 @@ class DeviceSelectionDialogBase extends Component {
          * specifically used to prevent audio device changing in Firefox, which
          * currently does not work due to a browser-side regression.
          */
-        disableAudioInputChange: React.PropTypes.bool,
+        disableAudioInputChange: PropTypes.bool,
 
         /**
          * Disables dismissing the dialog when the blanket is clicked. Enabled
          * by default.
          */
-        disableBlanketClickDismiss: React.PropTypes.bool,
+        disableBlanketClickDismiss: PropTypes.bool,
 
         /**
          * True if device changing is configured to be disallowed. Selectors
          * will display as disabled.
          */
-        disableDeviceChange: React.PropTypes.bool,
+        disableDeviceChange: PropTypes.bool,
 
         /**
          * Function that checks whether or not a new audio input source can be
          * selected.
          */
-        hasAudioPermission: React.PropTypes.func,
+        hasAudioPermission: PropTypes.func,
 
         /**
          * Function that checks whether or not a new video input sources can be
          * selected.
          */
-        hasVideoPermission: React.PropTypes.func,
+        hasVideoPermission: PropTypes.func,
 
         /**
          * If true, the audio meter will not display. Necessary for browsers or
          * configurations that do not support local stats to prevent a
          * non-responsive mic preview from displaying.
          */
-        hideAudioInputPreview: React.PropTypes.bool,
+        hideAudioInputPreview: PropTypes.bool,
 
         /**
          * Whether or not the audio output source selector should display. If
@@ -95,27 +96,27 @@ class DeviceSelectionDialogBase extends Component {
          * rendered. This is specifically used for hiding audio output on
          * temasys browsers which do not support such change.
          */
-        hideAudioOutputSelect: React.PropTypes.bool,
+        hideAudioOutputSelect: PropTypes.bool,
 
         /**
          * Function that sets the audio input device.
          */
-        setAudioInputDevice: React.PropTypes.func,
+        setAudioInputDevice: PropTypes.func,
 
         /**
          * Function that sets the audio output device.
          */
-        setAudioOutputDevice: React.PropTypes.func,
+        setAudioOutputDevice: PropTypes.func,
 
         /**
          * Function that sets the video input device.
          */
-        setVideoInputDevice: React.PropTypes.func,
+        setVideoInputDevice: PropTypes.func,
 
         /**
          * Invoked to obtain translated strings.
          */
-        t: React.PropTypes.func
+        t: PropTypes.func
     };
 
     /**

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

@@ -1,5 +1,6 @@
 import AKDropdownMenu from '@atlaskit/dropdown-menu';
 import ExpandIcon from '@atlaskit/icon/glyph/expand';
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import { translate } from '../../base/i18n';
@@ -20,42 +21,42 @@ class DeviceSelector extends Component {
         /**
          * MediaDeviceInfos used for display in the select element.
          */
-        devices: React.PropTypes.array,
+        devices: PropTypes.array,
 
         /**
          * If false, will return a selector with no selection options.
          */
-        hasPermission: React.PropTypes.bool,
+        hasPermission: PropTypes.bool,
 
         /**
          * CSS class for the icon to the left of the dropdown trigger.
          */
-        icon: React.PropTypes.string,
+        icon: PropTypes.string,
 
         /**
          * If true, will render the selector disabled with a default selection.
          */
-        isDisabled: React.PropTypes.bool,
+        isDisabled: PropTypes.bool,
 
         /**
          * The translation key to display as a menu label.
          */
-        label: React.PropTypes.string,
+        label: PropTypes.string,
 
         /**
          * The callback to invoke when a selection is made.
          */
-        onSelect: React.PropTypes.func,
+        onSelect: PropTypes.func,
 
         /**
          * The default device to display as selected.
          */
-        selectedDeviceId: React.PropTypes.string,
+        selectedDeviceId: PropTypes.string,
 
         /**
          * Invoked to obtain translated strings.
          */
-        t: React.PropTypes.func
+        t: PropTypes.func
     };
 
     /**

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

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import { Video } from '../../base/media';
@@ -21,12 +22,12 @@ class VideoInputPreview extends Component {
          * An error message to display instead of a preview. Displaying an error
          * will take priority over displaying a video preview.
          */
-        error: React.PropTypes.string,
+        error: PropTypes.string,
 
         /**
          * The JitsiLocalTrack to display.
          */
-        track: React.PropTypes.object
+        track: PropTypes.object
     };
 
     /**

react/features/dial-out/components/CountryIcon.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 /**
@@ -13,12 +14,12 @@ export default class CountryIcon extends Component {
         /**
          * The css style class name.
          */
-        className: React.PropTypes.string,
+        className: PropTypes.string,
 
         /**
          * The 2-letter country code.
          */
-        countryCode: React.PropTypes.string
+        countryCode: PropTypes.string
     };
 
     /**

react/features/dial-out/components/DialOutDialog.web.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -21,32 +22,32 @@ class DialOutDialog extends Component {
         /**
          * The redux state representing the list of dial-out codes.
          */
-        _dialOutCodes: React.PropTypes.array,
+        _dialOutCodes: PropTypes.array,
 
         /**
          * Property indicating if a dial number is allowed.
          */
-        _isDialNumberAllowed: React.PropTypes.bool,
+        _isDialNumberAllowed: PropTypes.bool,
 
         /**
          * The function performing the cancel action.
          */
-        cancel: React.PropTypes.func,
+        cancel: PropTypes.func,
 
         /**
          * The function performing the phone number validity check.
          */
-        checkDialNumber: React.PropTypes.func,
+        checkDialNumber: PropTypes.func,
 
         /**
          * The function performing the dial action.
          */
-        dial: React.PropTypes.func,
+        dial: PropTypes.func,
 
         /**
          * Invoked to obtain translated strings.
          */
-        t: React.PropTypes.func
+        t: PropTypes.func
     };
 
     /**
@@ -214,7 +215,7 @@ class DialOutDialog extends Component {
  * @param {Object} state - The Redux state.
  * @private
  * @returns {{
- *     _isDialNumberAllowed: React.PropTypes.bool
+ *     _isDialNumberAllowed: boolean
  * }}
  */
 function _mapStateToProps(state) {

react/features/dial-out/components/DialOutNumbersForm.web.js

@@ -1,6 +1,7 @@
 import { StatelessDropdownMenu } from '@atlaskit/dropdown-menu';
 import AKFieldText, { FieldText } from '@atlaskit/field-text';
 import ExpandIcon from '@atlaskit/icon/glyph/expand';
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -40,22 +41,22 @@ class DialOutNumbersForm extends Component {
         /**
          * The redux state representing the list of dial-out codes.
          */
-        _dialOutCodes: React.PropTypes.array,
+        _dialOutCodes: PropTypes.array,
 
         /**
          * The function called on every dial input change.
          */
-        onChange: React.PropTypes.func,
+        onChange: PropTypes.func,
 
         /**
          * Invoked to obtain translated strings.
          */
-        t: React.PropTypes.func,
+        t: PropTypes.func,
 
         /**
          * Invoked to send an ajax request for dial-out codes.
          */
-        updateDialOutCodes: React.PropTypes.func
+        updateDialOutCodes: PropTypes.func
     };
 
     /**
@@ -353,7 +354,7 @@ class DialOutNumbersForm extends Component {
  * @param {Object} state - The Redux state.
  * @private
  * @returns {{
- *     _dialOutCodes: React.PropTypes.object
+ *     _dialOutCodes: Object
  * }}
  */
 function _mapStateToProps(state) {

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

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -19,38 +20,38 @@ class DisplayName extends Component {
         /**
          * Whether or not the display name should be editable on click.
          */
-        allowEditing: React.PropTypes.bool,
+        allowEditing: PropTypes.bool,
 
         /**
          * Invoked to update the participant's display name.
          */
-        dispatch: React.PropTypes.func,
+        dispatch: PropTypes.func,
 
         /**
          * The participant's current display name.
          */
-        displayName: React.PropTypes.string,
+        displayName: PropTypes.string,
 
         /**
          * A string to append to the displayName, if provided.
          */
-        displayNameSuffix: React.PropTypes.string,
+        displayNameSuffix: PropTypes.string,
 
         /**
          * The ID attribute to add to the component. Useful for global querying
          * for the component by legacy components and torture tests.
          */
-        elementID: React.PropTypes.string,
+        elementID: PropTypes.string,
 
         /**
          * The ID of the participant whose name is being displayed.
          */
-        participantID: React.PropTypes.string,
+        participantID: PropTypes.string,
 
         /**
          * Invoked to obtain translated strings.
          */
-        t: React.PropTypes.func
+        t: PropTypes.func
     };
 
     /**

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

@@ -1,4 +1,5 @@
 import AKFieldText from '@atlaskit/field-text';
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -26,17 +27,17 @@ class DisplayNamePrompt extends Component {
          * The current ID for the local participant. Used for setting the
          * display name on the associated participant.
          */
-        _localParticipantID: React.PropTypes.string,
+        _localParticipantID: PropTypes.string,
 
         /**
          * Invoked to update the local participant's display name.
          */
-        dispatch: React.PropTypes.func,
+        dispatch: PropTypes.func,
 
         /**
          * Invoked to obtain translated strings.
          */
-        t: React.PropTypes.func
+        t: PropTypes.func
     };
 
     /**

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

@@ -1,6 +1,7 @@
 /* @flow */
 
 import Tooltip from '@atlaskit/tooltip';
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -20,17 +21,17 @@ class FeedbackButton extends Component {
          *
          * @type {JitsiConference}
          */
-        _conference: React.PropTypes.object,
+        _conference: PropTypes.object,
 
         /**
          * Invoked to obtain translated strings.
          */
-        t: React.PropTypes.func,
+        t: PropTypes.func,
 
         /**
          * From which side of the button the tooltip should appear from.
          */
-        tooltipPosition: React.PropTypes.string
+        tooltipPosition: PropTypes.string
     };
 
     /**

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

@@ -1,5 +1,6 @@
 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';
 
@@ -46,13 +47,13 @@ class FeedbackDialog extends Component {
          * The cached feedback message, if any, that was set when closing a
          * previous instance of {@code FeedbackDialog}.
          */
-        _message: React.PropTypes.string,
+        _message: PropTypes.string,
 
         /**
          * The cached feedback score, if any, that was set when closing a
          * previous instance of {@code FeedbackDialog}.
          */
-        _score: React.PropTypes.number,
+        _score: PropTypes.number,
 
         /**
          * The JitsiConference that is being rated. The conference is passed in
@@ -61,22 +62,22 @@ class FeedbackDialog extends Component {
          *
          * @type {JitsiConference}
          */
-        conference: React.PropTypes.object,
+        conference: PropTypes.object,
 
         /**
          * Invoked to signal feedback submission or canceling.
          */
-        dispatch: React.PropTypes.func,
+        dispatch: PropTypes.func,
 
         /**
          * Callback invoked when {@code FeedbackDialog} is unmounted.
          */
-        onClose: React.PropTypes.func,
+        onClose: PropTypes.func,
 
         /**
          * Invoked to obtain translated strings.
          */
-        t: React.PropTypes.func
+        t: PropTypes.func
     };
 
     /**

react/features/filmstrip/components/Filmstrip.native.js

@@ -1,5 +1,6 @@
 /* @flow */
 
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { ScrollView } from 'react-native';
 import { connect } from 'react-redux';
@@ -28,7 +29,7 @@ class Filmstrip extends Component {
          * @private
          * @type {Participant[]}
          */
-        _participants: React.PropTypes.array,
+        _participants: PropTypes.array,
 
         /**
          * The indicator which determines whether the filmstrip is visible.
@@ -36,7 +37,7 @@ class Filmstrip extends Component {
          * @private
          * @type {boolean}
          */
-        _visible: React.PropTypes.bool.isRequired
+        _visible: PropTypes.bool.isRequired
     };
 
     /**

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

@@ -1,6 +1,7 @@
 /* @flow */
 
 import _ from 'lodash';
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -33,23 +34,23 @@ class Filmstrip extends Component {
         /**
          * Whether or not remote videos are currently being hovered over.
          */
-        _hovered: React.PropTypes.bool,
+        _hovered: PropTypes.bool,
 
         /**
          * Whether or not the remote videos should be visible. Will toggle
          * a class for hiding the videos.
          */
-        _remoteVideosVisible: React.PropTypes.bool,
+        _remoteVideosVisible: PropTypes.bool,
 
         /**
          * Updates the redux store with filmstrip hover changes.
          */
-        dispatch: React.PropTypes.func,
+        dispatch: PropTypes.func,
 
         /**
          * Whether or not the toolbox should be displayed within the filmstrip.
          */
-        displayToolbox: React.PropTypes.bool
+        displayToolbox: PropTypes.bool
     };
 
     /**

react/features/filmstrip/components/Thumbnail.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -29,11 +30,11 @@ class Thumbnail extends Component {
      * @static
      */
     static propTypes = {
-        _audioTrack: React.PropTypes.object,
-        _largeVideo: React.PropTypes.object,
-        _videoTrack: React.PropTypes.object,
-        dispatch: React.PropTypes.func,
-        participant: React.PropTypes.object
+        _audioTrack: PropTypes.object,
+        _largeVideo: PropTypes.object,
+        _videoTrack: PropTypes.object,
+        dispatch: PropTypes.func,
+        participant: PropTypes.object
     };
 
     /**

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

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import BaseIndicator from './BaseIndicator';
@@ -17,7 +18,7 @@ class AudioMutedIndicator extends Component {
         /**
          * From which side of the indicator the tooltip should appear from.
          */
-        tooltipPosition: React.PropTypes.string
+        tooltipPosition: PropTypes.string
     };
 
     /**

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

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import Tooltip from '@atlaskit/tooltip';
 
@@ -31,39 +32,39 @@ class BaseIndicator extends Component {
         /**
          * Additional CSS class names to set on the icon container.
          */
-        className: React.PropTypes.string,
+        className: PropTypes.string,
 
         /**
          * The CSS classnames to set on the icon element of the component.
          */
-        iconClassName: React.PropTypes.string,
+        iconClassName: PropTypes.string,
 
         /**
          * The font size for the icon.
          */
-        iconSize: React.PropTypes.string,
+        iconSize: PropTypes.string,
 
         /**
          * The ID attribue to set on the root element of the component.
          */
-        id: React.PropTypes.string,
+        id: PropTypes.string,
 
         /**
          * Invoked to obtain translated strings.
          */
-        t: React.PropTypes.func,
+        t: PropTypes.func,
 
         /**
          * The translation key to use for displaying a tooltip when hovering
          * over the component.
          */
-        tooltipKey: React.PropTypes.string,
+        tooltipKey: PropTypes.string,
 
         /**
          * From which side of the indicator the tooltip should appear from.
          * Defaults to "top".
          */
-        tooltipPosition: React.PropTypes.string
+        tooltipPosition: PropTypes.string
     };
 
     /**

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

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import BaseIndicator from './BaseIndicator';
@@ -20,12 +21,12 @@ class DominantSpeakerIndicator extends Component {
          *
          * @type {number}
          */
-        iconSize: React.PropTypes.number,
+        iconSize: PropTypes.number,
 
         /**
          * From which side of the indicator the tooltip should appear from.
          */
-        tooltipPosition: React.PropTypes.string
+        tooltipPosition: PropTypes.string
     };
 
     /**

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

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import BaseIndicator from './BaseIndicator';
@@ -17,7 +18,7 @@ class ModeratorIndicator extends Component {
         /**
          * From which side of the indicator the tooltip should appear from.
          */
-        tooltipPosition: React.PropTypes.string
+        tooltipPosition: PropTypes.string
     };
 
     /**

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

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import BaseIndicator from './BaseIndicator';
@@ -19,12 +20,12 @@ class RaisedHandIndicator extends Component {
          *
          * @type {number}
          */
-        iconSize: React.PropTypes.number,
+        iconSize: PropTypes.number,
 
         /**
          * From which side of the indicator the tooltip should appear from.
          */
-        tooltipPosition: React.PropTypes.string
+        tooltipPosition: PropTypes.string
     };
 
     /**

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

@@ -1,4 +1,6 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+
 import BaseIndicator from './BaseIndicator';
 
 /**
@@ -16,7 +18,7 @@ class VideoMutedIndicator extends Component {
         /**
          * From which side of the indicator the tooltip should appear from.
          */
-        tooltipPosition: React.PropTypes.string
+        tooltipPosition: PropTypes.string
     };
 
     /**

react/features/invite/components/AddPasswordForm.js

@@ -1,5 +1,6 @@
 import Button from '@atlaskit/button';
 import { FieldText } from '@atlaskit/field-text';
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -21,17 +22,17 @@ class AddPasswordForm extends Component {
          *
          * @type {JitsiConference}
          */
-        conference: React.PropTypes.object,
+        conference: PropTypes.object,
 
         /**
          * Invoked to set a password on the conference.
          */
-        dispatch: React.PropTypes.func,
+        dispatch: PropTypes.func,
 
         /**
          * Invoked to obtain translated strings.
          */
-        t: React.PropTypes.func
+        t: PropTypes.func
     };
 
     /**

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

@@ -1,8 +1,9 @@
-import React, { Component } from 'react';
-import { Immutable } from 'nuclear-js';
-import { connect } from 'react-redux';
 import Avatar from '@atlaskit/avatar';
 import InlineMessage from '@atlaskit/inline-message';
+import { Immutable } from 'nuclear-js';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
 
 import { getInviteURL } from '../../base/connection';
 import { Dialog, hideDialog } from '../../base/dialog';
@@ -14,8 +15,6 @@ import { invitePeople, inviteRooms, searchPeople } from '../functions';
 
 declare var interfaceConfig: Object;
 
-const { PropTypes } = React;
-
 /**
  * The dialog that allows to invite people to the call.
  */
@@ -325,8 +324,8 @@ class AddPeopleDialog extends Component {
  * @param {Object} state - The Redux state.
  * @private
  * @returns {{
- *     _peopleSearchUrl: React.PropTypes.string,
- *     _jwt: React.PropTypes.string
+ *     _jwt: string,
+ *     _peopleSearchUrl: string
  * }}
  */
 function _mapStateToProps(state) {

react/features/invite/components/DialInNumbersForm.js

@@ -2,6 +2,7 @@ import Button from '@atlaskit/button';
 import { StatelessDropdownMenu } from '@atlaskit/dropdown-menu';
 import { FieldText } from '@atlaskit/field-text';
 import ExpandIcon from '@atlaskit/icon/glyph/expand';
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -29,28 +30,28 @@ class DialInNumbersForm extends Component {
         /**
          * The redux state representing the dial-in numbers feature.
          */
-        _dialIn: React.PropTypes.object,
+        _dialIn: PropTypes.object,
 
         /**
          * The display name of the local user.
          */
-        _localUserDisplayName: React.PropTypes.string,
+        _localUserDisplayName: PropTypes.string,
 
         /**
          * Invoked to send an ajax request for dial-in numbers.
          */
-        dispatch: React.PropTypes.func,
+        dispatch: PropTypes.func,
 
         /**
          * The URL of the conference into which this {@code DialInNumbersForm}
          * is inviting the local participant.
          */
-        inviteURL: React.PropTypes.string,
+        inviteURL: PropTypes.string,
 
         /**
          * Invoked to obtain translated strings.
          */
-        t: React.PropTypes.func
+        t: PropTypes.func
     };
 
     /**
@@ -420,8 +421,8 @@ class DialInNumbersForm extends Component {
  * @param {Object} state - The Redux state.
  * @private
  * @returns {{
- *     _localUserDisplayName: React.PropTypes.string,
- *     _dialIn: React.PropTypes.object
+ *     _dialIn: Object,
+ *     _localUserDisplayName: string
  * }}
  */
 function _mapStateToProps(state) {

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

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -26,22 +27,22 @@ class InviteDialog extends Component {
         /**
          * The redux store representation of the JitsiConference.
          */
-        _conference: React.PropTypes.object,
+        _conference: PropTypes.object,
 
         /**
          * The url for the JitsiConference.
          */
-        _inviteURL: React.PropTypes.string,
+        _inviteURL: PropTypes.string,
 
         /**
          * Whether or not the current user is a conference moderator.
          */
-        _isModerator: React.PropTypes.bool,
+        _isModerator: PropTypes.bool,
 
         /**
          * Invoked to obtain translated strings.
          */
-        t: React.PropTypes.func
+        t: PropTypes.func
     };
 
     /**

react/features/invite/components/LockStatePanel.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import { translate } from '../../base/i18n';
@@ -15,12 +16,12 @@ class LockStatePanel extends Component {
         /**
          * Whether or not the conference is currently locked.
          */
-        locked: React.PropTypes.bool,
+        locked: PropTypes.bool,
 
         /**
          * Invoked to obtain translated strings.
          */
-        t: React.PropTypes.func
+        t: PropTypes.func
     };
 
     /**

react/features/invite/components/PasswordContainer.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import { translate } from '../../base/i18n';
@@ -24,28 +25,28 @@ class PasswordContainer extends Component {
          *
          * @type {JitsiConference}
          */
-        conference: React.PropTypes.object,
+        conference: PropTypes.object,
 
         /**
          * The value for how the conference is locked (or undefined if not
          * locked) as defined by room-lock constants.
          */
-        locked: React.PropTypes.string,
+        locked: PropTypes.string,
 
         /**
          * The current known password for the JitsiConference.
          */
-        password: React.PropTypes.string,
+        password: PropTypes.string,
 
         /**
          * Whether or not the password editing components should be displayed.
          */
-        showPasswordEdit: React.PropTypes.bool,
+        showPasswordEdit: PropTypes.bool,
 
         /**
          * Invoked to obtain translated strings.
          */
-        t: React.PropTypes.func
+        t: PropTypes.func
     };
 
     /**

react/features/invite/components/RemovePasswordForm.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -19,27 +20,27 @@ class RemovePasswordForm extends Component {
          *
          * @type {JitsiConference}
          */
-        conference: React.PropTypes.object,
+        conference: PropTypes.object,
 
         /**
          * Invoked to send a password removal request.
          */
-        dispatch: React.PropTypes.func,
+        dispatch: PropTypes.func,
 
         /**
          * Whether or not the room lock, if any, was set by the local user.
          */
-        lockedLocally: React.PropTypes.bool,
+        lockedLocally: PropTypes.bool,
 
         /**
          * The current known password for the JitsiConference.
          */
-        password: React.PropTypes.string,
+        password: PropTypes.string,
 
         /**
          * Invoked to obtain translated strings.
          */
-        t: React.PropTypes.func
+        t: PropTypes.func
     };
 
     /**

react/features/invite/components/ShareLinkForm.js

@@ -1,5 +1,6 @@
 import Button from '@atlaskit/button';
 import { FieldText } from '@atlaskit/field-text';
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import { translate } from '../../base/i18n';
@@ -20,12 +21,12 @@ class ShareLinkForm extends Component {
         /**
          * Invoked to obtain translated strings.
          */
-        t: React.PropTypes.func,
+        t: PropTypes.func,
 
         /**
          * The value to be displayed and copied into the clipboard.
          */
-        toCopy: React.PropTypes.string
+        toCopy: PropTypes.string
     };
 
     /**

react/features/jwt/components/CallOverlay.js

@@ -1,5 +1,6 @@
 /* @flow */
 
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -73,7 +74,7 @@ class CallOverlay extends Component {
      * @static
      */
     static propTypes = {
-        _callee: React.PropTypes.object
+        _callee: PropTypes.object
     };
 
     /**

react/features/large-video/components/LargeVideo.native.js

@@ -1,5 +1,6 @@
 /* @flow */
 
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -25,7 +26,7 @@ class LargeVideo extends Component {
          *
          * @private
          */
-        _participantId: React.PropTypes.string
+        _participantId: PropTypes.string
     };
 
     /**

react/features/notifications/components/Notification.web.js

@@ -1,5 +1,6 @@
 import Flag from '@atlaskit/flag';
 import EditorInfoIcon from '@atlaskit/icon/glyph/editor/info';
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import { translate } from '../../base/i18n';
@@ -20,46 +21,46 @@ class Notification extends Component {
          * The translation key to display as the title of the notification if
          * no title is provided.
          */
-        defaultTitleKey: React.PropTypes.string,
+        defaultTitleKey: PropTypes.string,
 
         /**
          * The translation arguments that may be necessary for the description.
          */
-        descriptionArguments: React.PropTypes.object,
+        descriptionArguments: PropTypes.object,
 
         /**
          * The translation key to use as the body of the notification.
          */
-        descriptionKey: React.PropTypes.string,
+        descriptionKey: PropTypes.string,
 
         /**
          * Whether or not the dismiss button should be displayed. This is passed
          * in by {@code FlagGroup}.
          */
-        isDismissAllowed: React.PropTypes.bool,
+        isDismissAllowed: PropTypes.bool,
 
         /**
          * Callback invoked when the user clicks to dismiss the notification.
          * this is passed in by {@code FlagGroup}.
          */
-        onDismissed: React.PropTypes.func,
+        onDismissed: PropTypes.func,
 
         /**
          * Invoked to obtain translated strings.
          */
-        t: React.PropTypes.func,
+        t: PropTypes.func,
 
         /**
          * The text to display at the top of the notification. If not passed in,
          * the passed in defaultTitleKey will be used.
          */
-        title: React.PropTypes.string,
+        title: PropTypes.string,
 
         /**
          * The unique identifier for the notification. Passed back by the
          * {@code Flag} component in the onDismissed callback.
          */
-        uid: React.PropTypes.number
+        uid: PropTypes.number
     };
 
     /**

react/features/notifications/components/NotificationWithToggle.web.js

@@ -1,6 +1,7 @@
 import Flag from '@atlaskit/flag';
 import WarningIcon from '@atlaskit/icon/glyph/warning';
 import { ToggleStateless } from '@atlaskit/toggle';
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import { translate } from '../../base/i18n';
@@ -21,63 +22,63 @@ class NotificationWithToggle extends Component {
          * Any additional text to display at the end of the notification message
          * body.
          */
-        additionalMessage: React.PropTypes.string,
+        additionalMessage: PropTypes.string,
 
         /**
          * Whether or not the dismiss button should be displayed. This is passed
          * in by {@code FlagGroup}.
          */
-        isDismissAllowed: React.PropTypes.bool,
+        isDismissAllowed: PropTypes.bool,
 
         /**
          * The translation key to be used as the main body of the notification.
          */
-        messageKey: React.PropTypes.string,
+        messageKey: PropTypes.string,
 
         /**
          * Callback invoked when the user clicks to dismiss the notification.
          * This is passed in by {@code FlagGroup}.
          */
-        onDismissed: React.PropTypes.func,
+        onDismissed: PropTypes.func,
 
         /**
          * Optional callback to invoke when the notification is dismissed. The
          * current value of the toggle element will be passed in.
          */
-        onToggleSubmit: React.PropTypes.func,
+        onToggleSubmit: PropTypes.func,
 
         /**
          * Whether or not the toggle element should be displayed.
          */
-        showToggle: React.PropTypes.bool,
+        showToggle: PropTypes.bool,
 
         /**
          * Translation key for a message to display at the top of the
          * notification body.
          */
-        subtitleKey: React.PropTypes.string,
+        subtitleKey: PropTypes.string,
 
         /**
          * Invoked to obtain translated strings.
          */
-        t: React.PropTypes.func,
+        t: PropTypes.func,
 
         /**
          * The translation key to be used as the title of the notification.
          */
-        titleKey: React.PropTypes.string,
+        titleKey: PropTypes.string,
 
         /*
          * The translation key to be used as a label describing what setting the
          * toggle will change.
          */
-        toggleLabelKey: React.PropTypes.string,
+        toggleLabelKey: PropTypes.string,
 
         /**
          * The unique identifier for the notification. Passed back by the
          * {@code Flag} component in the onDismissed callback.
          */
-        uid: React.PropTypes.number
+        uid: PropTypes.number
     };
 
     /**

react/features/notifications/components/NotificationsContainer.web.js

@@ -1,4 +1,5 @@
 import { FlagGroup } from '@atlaskit/flag';
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -22,18 +23,18 @@ class NotificationsContainer extends Component {
          * The notifications to be displayed, with the first index being the
          * notification at the top and the rest shown below it in order.
          */
-        _notifications: React.PropTypes.array,
+        _notifications: PropTypes.array,
 
         /**
          * Whether or not notifications should be displayed at all. If not,
          * notifications will be dismissed immediately.
          */
-        _showNotifications: React.PropTypes.bool,
+        _showNotifications: PropTypes.bool,
 
         /**
          * Invoked to update the redux store in order to remove notifications.
          */
-        dispatch: React.PropTypes.func
+        dispatch: PropTypes.func
     };
 
     /**
@@ -168,7 +169,7 @@ class NotificationsContainer extends Component {
  * @param {Object} state - The Redux state.
  * @private
  * @returns {{
- *     _notifications: React.PropTypes.array
+ *     _notifications: Array
  * }}
  */
 function _mapStateToProps(state) {

react/features/overlay/components/AbstractPageReloadOverlay.js

@@ -1,5 +1,6 @@
 /* @flow */
 
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import { randomInt } from '../../base/util';
@@ -22,7 +23,7 @@ export default class AbstractPageReloadOverlay extends Component {
      * @static
      */
     static propTypes = {
-        dispatch: React.PropTypes.func,
+        dispatch: PropTypes.func,
 
         /**
          * The indicator which determines whether the reload was caused by
@@ -31,7 +32,7 @@ export default class AbstractPageReloadOverlay extends Component {
          * @public
          * @type {boolean}
          */
-        isNetworkFailure: React.PropTypes.bool,
+        isNetworkFailure: PropTypes.bool,
 
         /**
          * The reason for the error that will cause the reload.
@@ -40,7 +41,7 @@ export default class AbstractPageReloadOverlay extends Component {
          * @public
          * @type {string}
          */
-        reason: React.PropTypes.string,
+        reason: PropTypes.string,
 
         /**
          * The function to translate human-readable text.
@@ -48,7 +49,7 @@ export default class AbstractPageReloadOverlay extends Component {
          * @public
          * @type {Function}
          */
-        t: React.PropTypes.func
+        t: PropTypes.func
     };
 
     _interval: ?number

react/features/overlay/components/FilmstripOnlyOverlayFrame.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -26,7 +27,7 @@ class FilmstripOnlyOverlayFrame extends Component {
          *
          * @private
          */
-        _avatar: React.PropTypes.string,
+        _avatar: PropTypes.string,
 
         /**
          * The children components to be displayed into the overlay frame for
@@ -34,7 +35,7 @@ class FilmstripOnlyOverlayFrame extends Component {
          *
          * @type {ReactElement}
          */
-        children: React.PropTypes.node.isRequired,
+        children: PropTypes.node.isRequired,
 
         /**
          * The css class name for the icon that will be displayed over the
@@ -42,7 +43,7 @@ class FilmstripOnlyOverlayFrame extends Component {
          *
          * @type {string}
          */
-        icon: React.PropTypes.string,
+        icon: PropTypes.string,
 
         /**
          * Indicates the css style of the overlay. If true, then lighter;
@@ -50,7 +51,7 @@ class FilmstripOnlyOverlayFrame extends Component {
          *
          * @type {boolean}
          */
-        isLightOverlay: React.PropTypes.bool
+        isLightOverlay: PropTypes.bool
     };
 
     /**

react/features/overlay/components/OverlayContainer.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -32,7 +33,7 @@ class OverlayContainer extends Component {
          * @private
          * @type {string}
          */
-        _browser: React.PropTypes.string,
+        _browser: PropTypes.string,
 
         /**
          * The indicator which determines whether the {@link CallOverlay} is
@@ -41,7 +42,7 @@ class OverlayContainer extends Component {
          * @private
          * @type {boolean}
          */
-        _callOverlayVisible: React.PropTypes.bool,
+        _callOverlayVisible: PropTypes.bool,
 
         /**
          * The indicator which determines whether the status of the
@@ -52,7 +53,7 @@ class OverlayContainer extends Component {
          * @private
          * @type {boolean}
          */
-        _connectionEstablished: React.PropTypes.bool,
+        _connectionEstablished: PropTypes.bool,
 
         /**
          * The indicator which determines whether a critical error for reload
@@ -63,7 +64,7 @@ class OverlayContainer extends Component {
          * @private
          * @type {boolean}
          */
-        _haveToReload: React.PropTypes.bool,
+        _haveToReload: PropTypes.bool,
 
         /**
          * The indicator which determines whether the GUM permissions prompt is
@@ -74,7 +75,7 @@ class OverlayContainer extends Component {
          * @private
          * @type {boolean}
          */
-        _isMediaPermissionPromptVisible: React.PropTypes.bool,
+        _isMediaPermissionPromptVisible: PropTypes.bool,
 
         /**
          * The indicator which determines whether the reload was caused by
@@ -85,7 +86,7 @@ class OverlayContainer extends Component {
          * @private
          * @type {boolean}
          */
-        _isNetworkFailure: React.PropTypes.bool,
+        _isNetworkFailure: PropTypes.bool,
 
         /**
          * The reason for the error that will cause the reload.
@@ -95,7 +96,7 @@ class OverlayContainer extends Component {
          * @private
          * @type {string}
          */
-        _reason: React.PropTypes.string,
+        _reason: PropTypes.string,
 
         /**
          * The indicator which determines whether the GUM permissions prompt is
@@ -106,7 +107,7 @@ class OverlayContainer extends Component {
          * @private
          * @type {string}
          */
-        _suspendDetected: React.PropTypes.bool
+        _suspendDetected: PropTypes.bool
     };
 
     /**

react/features/overlay/components/OverlayFrame.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 declare var interfaceConfig: Object;
@@ -15,7 +16,7 @@ export default class OverlayFrame extends Component {
         /**
          * The children components to be displayed into the overlay frame.
          */
-        children: React.PropTypes.node.isRequired,
+        children: PropTypes.node.isRequired,
 
         /**
          * Indicates the css style of the overlay. If true, then lighter;
@@ -23,7 +24,7 @@ export default class OverlayFrame extends Component {
          *
          * @type {boolean}
          */
-        isLightOverlay: React.PropTypes.bool
+        isLightOverlay: PropTypes.bool
     };
 
     /**

react/features/overlay/components/ReloadButton.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -21,7 +22,7 @@ class ReloadButton extends Component {
          *
          * @type {Function}
          */
-        _reloadNow: React.PropTypes.func,
+        _reloadNow: PropTypes.func,
 
         /**
          * The function to translate human-readable text.
@@ -29,14 +30,14 @@ class ReloadButton extends Component {
          * @public
          * @type {Function}
          */
-        t: React.PropTypes.func,
+        t: PropTypes.func,
 
         /**
          * The translation key for the text in the button.
          *
          * @type {string}
          */
-        textKey: React.PropTypes.string.isRequired
+        textKey: PropTypes.string.isRequired
     };
 
     /**

react/features/overlay/components/ReloadTimer.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import { translate } from '../../base/i18n';
@@ -24,7 +25,7 @@ class ReloadTimer extends Component {
          * @public
          * @type {number}
          */
-        end: React.PropTypes.number,
+        end: PropTypes.number,
 
         /**
          * The interval in sec for adding this.state.step to this.state.current.
@@ -32,13 +33,13 @@ class ReloadTimer extends Component {
          * @public
          * @type {number}
          */
-        interval: React.PropTypes.number,
+        interval: PropTypes.number,
 
         /**
          * The function that will be executed when timer finish (when
          * this.state.current === this.props.end)
          */
-        onFinish: React.PropTypes.func,
+        onFinish: PropTypes.func,
 
         /**
          * The start of the timer. The initial value for this.state.current.
@@ -46,7 +47,7 @@ class ReloadTimer extends Component {
          * @public
          * @type {number}
          */
-        start: React.PropTypes.number,
+        start: PropTypes.number,
 
         /**
          * The value which will be added to this.state.current on every step.
@@ -54,7 +55,7 @@ class ReloadTimer extends Component {
          * @public
          * @type {number}
          */
-        step: React.PropTypes.number,
+        step: PropTypes.number,
 
         /**
          * The function to translate human-readable text.
@@ -62,7 +63,7 @@ class ReloadTimer extends Component {
          * @public
          * @type {Function}
          */
-        t: React.PropTypes.func
+        t: PropTypes.func
     };
 
     /**

react/features/overlay/components/SuspendedFilmstripOnlyOverlay.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import { translate, translateToHTML } from '../../base/i18n';
@@ -22,7 +23,7 @@ class SuspendedFilmstripOnlyOverlay extends Component {
          * @public
          * @type {Function}
          */
-        t: React.PropTypes.func
+        t: PropTypes.func
     };
 
     /**

react/features/overlay/components/SuspendedOverlay.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import { translate, translateToHTML } from '../../base/i18n';
@@ -22,7 +23,7 @@ class SuspendedOverlay extends Component {
          * @public
          * @type {Function}
          */
-        t: React.PropTypes.func
+        t: PropTypes.func
     };
 
     /**

react/features/overlay/components/UserMediaPermissionsFilmstripOnlyOverlay.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import { translate, translateToHTML } from '../../base/i18n';
@@ -22,7 +23,7 @@ class UserMediaPermissionsFilmstripOnlyOverlay extends Component {
          * @public
          * @type {string}
          */
-        browser: React.PropTypes.string,
+        browser: PropTypes.string,
 
         /**
          * The function to translate human-readable text.
@@ -30,7 +31,7 @@ class UserMediaPermissionsFilmstripOnlyOverlay extends Component {
          * @public
          * @type {Function}
          */
-        t: React.PropTypes.func
+        t: PropTypes.func
     };
 
     /**

react/features/overlay/components/UserMediaPermissionsOverlay.js

@@ -1,5 +1,6 @@
 /* global interfaceConfig */
 
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import { translate, translateToHTML } from '../../base/i18n';
@@ -24,7 +25,7 @@ class UserMediaPermissionsOverlay extends Component {
          * @public
          * @type {string}
          */
-        browser: React.PropTypes.string,
+        browser: PropTypes.string,
 
         /**
          * The function to translate human-readable text.
@@ -32,7 +33,7 @@ class UserMediaPermissionsOverlay extends Component {
          * @public
          * @type {Function}
          */
-        t: React.PropTypes.func
+        t: PropTypes.func
     };
 
     /**

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

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -29,12 +30,12 @@ class PresenceLabel extends Component {
          * The current present status associated with the passed in
          * participantID prop.
          */
-        _presence: React.PropTypes.string,
+        _presence: PropTypes.string,
 
         /**
          * The ID of the participant whose presence status shoul display.
          */
-        participantID: React.PropTypes.string
+        participantID: PropTypes.string
     };
 
     /**

react/features/recording/components/RecordingLabel.web.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -23,7 +24,7 @@ class RecordingLabel extends Component {
          * hidden. Depending on the filmstrip state, different CSS classes will
          * be set to allow for adjusting of {@code RecordingLabel} positioning.
          */
-        _filmstripVisible: React.PropTypes.bool,
+        _filmstripVisible: PropTypes.bool,
 
         /**
          * An object to describe the {@code RecordingLabel} content. If no
@@ -35,7 +36,7 @@ class RecordingLabel extends Component {
          *     showSpinner: boolean
          * }}
          */
-        _labelDisplayConfiguration: React.PropTypes.object,
+        _labelDisplayConfiguration: PropTypes.object,
 
         /**
          * Whether or not remote videos within the filmstrip are currently
@@ -43,12 +44,12 @@ class RecordingLabel extends Component {
          * visibility, CSS classes will be set to allow for adjusting of
          * {@code RecordingLabel} positioning.
          */
-        _remoteVideosVisible: React.PropTypes.bool,
+        _remoteVideosVisible: PropTypes.bool,
 
         /**
          * Invoked to obtain translated string.
          */
-        t: React.PropTypes.func
+        t: PropTypes.func
     };
 
     /**

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

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -26,12 +27,12 @@ class RemoteControlAuthorizationDialog extends Component {
          *
          * @private
          */
-        _displayName: React.PropTypes.string,
+        _displayName: PropTypes.string,
 
         /**
          * Used to show/hide the dialog on cancel.
          */
-        dispatch: React.PropTypes.func,
+        dispatch: PropTypes.func,
 
         /**
          * The ID of the participant who is requesting authorization for remote
@@ -39,12 +40,12 @@ class RemoteControlAuthorizationDialog extends Component {
          *
          * @public
          */
-        participantId: React.PropTypes.string,
+        participantId: PropTypes.string,
 
         /**
          * Invoked to obtain translated strings.
          */
-        t: React.PropTypes.func
+        t: PropTypes.func
     };
 
     /**

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

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -23,22 +24,22 @@ class KickButton extends Component {
          * Invoked to signal the participant with the passed in participantID
          * should be removed from the conference.
          */
-        dispatch: React.PropTypes.func,
+        dispatch: PropTypes.func,
 
         /**
          * Callback to invoke when {@code KickButton} is clicked.
          */
-        onClick: React.PropTypes.func,
+        onClick: PropTypes.func,
 
         /**
          * The ID of the participant linked to the onClick callback.
          */
-        participantID: React.PropTypes.string,
+        participantID: PropTypes.string,
 
         /**
          * Invoked to obtain translated strings.
          */
-        t: React.PropTypes.func
+        t: PropTypes.func
     };
 
     /**

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

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -23,27 +24,27 @@ class MuteButton extends Component {
          * Invoked to send a request for muting the participant with the passed
          * in participantID.
          */
-        dispatch: React.PropTypes.func,
+        dispatch: PropTypes.func,
 
         /**
          * Whether or not the participant is currently audio muted.
          */
-        isAudioMuted: React.PropTypes.bool,
+        isAudioMuted: PropTypes.bool,
 
         /**
          * Callback to invoke when {@code MuteButton} is clicked.
          */
-        onClick: React.PropTypes.func,
+        onClick: PropTypes.func,
 
         /**
          * The ID of the participant linked to the onClick callback.
          */
-        participantID: React.PropTypes.string,
+        participantID: PropTypes.string,
 
         /**
          * Invoked to obtain translated strings.
          */
-        t: React.PropTypes.func
+        t: PropTypes.func
     };
 
     /**

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

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import { translate } from '../../base/i18n';
@@ -30,23 +31,23 @@ class RemoteControlButton extends Component {
         /**
          * The callback to invoke when the component is clicked.
          */
-        onClick: React.PropTypes.func,
+        onClick: PropTypes.func,
 
         /**
          * The ID of the participant linked to the onClick callback.
          */
-        participantID: React.PropTypes.string,
+        participantID: PropTypes.string,
 
         /**
          * The current status of remote control. Should be a number listed in
          * the enum REMOTE_CONTROL_MENU_STATES.
          */
-        remoteControlState: React.PropTypes.number,
+        remoteControlState: PropTypes.number,
 
         /**
          * Invoked to obtain translated strings.
          */
-        t: React.PropTypes.func
+        t: PropTypes.func
     };
 
     /**

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

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 /**
@@ -16,13 +17,13 @@ export default class RemoteVideoMenu extends Component {
         /**
          * The components to place as the body of the {@code RemoteVideoMenu}.
          */
-        children: React.PropTypes.node,
+        children: PropTypes.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: React.PropTypes.string
+        id: PropTypes.string
     };
 
     /**

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

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 /**
@@ -16,28 +17,28 @@ export default class RemoteVideoMenuButton extends Component {
          * Text to display within the component that describes the onClick
          * action.
          */
-        buttonText: React.PropTypes.string,
+        buttonText: PropTypes.string,
 
         /**
          * Additional CSS classes to add to the component.
          */
-        displayClass: React.PropTypes.string,
+        displayClass: PropTypes.string,
 
         /**
          * The CSS classes for the icon that will display within the component.
          */
-        iconClass: React.PropTypes.string,
+        iconClass: 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: React.PropTypes.string,
+        id: PropTypes.string,
 
         /**
          * Callback to invoke when the component is clicked.
          */
-        onClick: React.PropTypes.func
+        onClick: PropTypes.func
     };
 
     /**

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

@@ -1,5 +1,8 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
+import { Popover } from '../../base/popover';
+
 import {
     MuteButton,
     KickButton,
@@ -8,8 +11,6 @@ import {
     VolumeSlider
 } from './';
 
-import { Popover } from '../../base/popover';
-
 declare var $: Object;
 declare var interfaceConfig: Object;
 
@@ -25,44 +26,44 @@ class RemoteVideoMenuTriggerButton extends Component {
          * A value between 0 and 1 indicating the volume of the participant's
          * audio element.
          */
-        initialVolumeValue: React.PropTypes.number,
+        initialVolumeValue: PropTypes.number,
 
         /**
          * Whether or not the participant is currently muted.
          */
-        isAudioMuted: React.PropTypes.bool,
+        isAudioMuted: PropTypes.bool,
 
         /**
          * Whether or not the participant is a conference moderator.
          */
-        isModerator: React.PropTypes.bool,
+        isModerator: PropTypes.bool,
 
         /**
          * Callback to invoke when the popover has been displayed.
          */
-        onMenuDisplay: React.PropTypes.func,
+        onMenuDisplay: PropTypes.func,
 
         /**
          * Callback to invoke choosing to start a remote control session with
          * the participant.
          */
-        onRemoteControlToggle: React.PropTypes.func,
+        onRemoteControlToggle: PropTypes.func,
 
         /**
          * Callback to invoke when changing the level of the participant's
          * audio element.
          */
-        onVolumeChange: React.PropTypes.func,
+        onVolumeChange: PropTypes.func,
 
         /**
          * The ID for the participant on which the remote video menu will act.
          */
-        participantID: React.PropTypes.string,
+        participantID: PropTypes.string,
 
         /**
          * The current state of the participant's remote control session.
          */
-        remoteControlState: React.PropTypes.number
+        remoteControlState: PropTypes.number
     };
 
     /**

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

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 /**
@@ -25,12 +26,12 @@ class VolumeSlider extends Component {
          * first mounts. Changes will be stored in state. The value should be a
          * number between 0 and 1.
          */
-        initialValue: React.PropTypes.number,
+        initialValue: PropTypes.number,
 
         /**
          * The callback to invoke when the audio slider value changes.
          */
-        onChange: React.PropTypes.func
+        onChange: PropTypes.func
     };
 
     /**

react/features/room-lock/actions.js

@@ -56,7 +56,7 @@ export function endRoomLockRequest(conference, password) {
  * @returns {{
  *     type: OPEN_DIALOG,
  *     component: Component,
- *     props: React.PropTypes
+ *     props: PropTypes
  * }}
  */
 export function _showPasswordDialog(conference) {

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

@@ -1,8 +1,9 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { Dialog } from '../../base/dialog';
 
 import { setPassword } from '../../base/conference';
+import { Dialog } from '../../base/dialog';
 
 /**
  * Implements a React Component which prompts the user when a password is
@@ -20,8 +21,8 @@ class PasswordRequiredPrompt extends Component {
          *
          * @type {JitsiConference}
          */
-        conference: React.PropTypes.object,
-        dispatch: React.PropTypes.func
+        conference: PropTypes.object,
+        dispatch: PropTypes.func
     };
 
     /**

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

@@ -1,4 +1,5 @@
 import AKFieldText from '@atlaskit/field-text';
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -22,9 +23,9 @@ class PasswordRequiredPrompt extends Component {
          *
          * @type {JitsiConference}
          */
-        conference: React.PropTypes.object,
-        dispatch: React.PropTypes.func,
-        t: React.PropTypes.func
+        conference: PropTypes.object,
+        dispatch: PropTypes.func,
+        t: PropTypes.func
     };
 
     /**

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

@@ -1,5 +1,7 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
+
 import { Dialog } from '../../base/dialog';
 
 import { endRoomLockRequest } from '../actions';
@@ -20,8 +22,8 @@ class RoomLockPrompt extends Component {
          *
          * @type {JitsiConference}
          */
-        conference: React.PropTypes.object,
-        dispatch: React.PropTypes.func
+        conference: PropTypes.object,
+        dispatch: PropTypes.func
     };
 
     /**

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

@@ -1,9 +1,11 @@
 /* global APP, interfaceConfig */
 
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import { Dialog } from '../../base/dialog';
 import { translate } from '../../base/i18n';
+
 import SpeakerStatsItem from './SpeakerStatsItem';
 import SpeakerStatsLabels from './SpeakerStatsLabels';
 
@@ -22,12 +24,12 @@ class SpeakerStats extends Component {
         /**
          * The JitsiConference from which stats will be pulled.
          */
-        conference: React.PropTypes.object,
+        conference: PropTypes.object,
 
         /**
          * The function to translate human-readable text.
          */
-        t: React.PropTypes.func
+        t: PropTypes.func
     };
 
     /**

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

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import TimeElapsed from './TimeElapsed';
@@ -17,22 +18,22 @@ class SpeakerStatsItem extends Component {
         /**
          * The name of the participant.
          */
-        displayName: React.PropTypes.string,
+        displayName: PropTypes.string,
 
         /**
          * The total milliseconds the participant has been dominant speaker.
          */
-        dominantSpeakerTime: React.PropTypes.number,
+        dominantSpeakerTime: PropTypes.number,
 
         /**
          * True if the participant is no longer in the meeting.
          */
-        hasLeft: React.PropTypes.bool,
+        hasLeft: PropTypes.bool,
 
         /**
          * True if the participant is currently the dominant speaker.
          */
-        isDominantSpeaker: React.PropTypes.bool
+        isDominantSpeaker: PropTypes.bool
     };
 
     /**

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

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import { translate } from '../../base/i18n';
@@ -17,7 +18,7 @@ class SpeakerStatsLabels extends Component {
         /**
          * The function to translate human-readable text.
          */
-        t: React.PropTypes.func
+        t: PropTypes.func
     };
 
     /**

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

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import { translate } from '../../base/i18n';
@@ -19,12 +20,12 @@ class TimeElapsed extends Component {
         /**
          * The function to translate human-readable text.
          */
-        t: React.PropTypes.func,
+        t: PropTypes.func,
 
         /**
          * The milliseconds to be converted into a human-readable format.
          */
-        time: React.PropTypes.number
+        time: PropTypes.number
     };
 
     /**

react/features/toolbox/components/AbstractToolbarButton.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 /**
@@ -15,31 +16,31 @@ export default class AbstractToolbarButton extends Component {
         /**
          * The name of the Icon of this {@code AbstractToolbarButton}.
          */
-        iconName: React.PropTypes.string,
+        iconName: PropTypes.string,
 
         /**
          * The style of the Icon of this {@code AbstractToolbarButton}.
          */
-        iconStyle: React.PropTypes.object,
+        iconStyle: PropTypes.object,
 
         /**
          * On click handler.
          */
-        onClick: React.PropTypes.func,
+        onClick: PropTypes.func,
 
         /**
          * {@code AbstractToolbarButton} styles.
          */
         style:
-            React.PropTypes.oneOfType([
-                React.PropTypes.array,
-                React.PropTypes.object
+            PropTypes.oneOfType([
+                PropTypes.array,
+                PropTypes.object
             ]),
 
         /**
          * The color underlaying the button.
          */
-        underlayColor: React.PropTypes.any
+        underlayColor: PropTypes.any
     };
 
     /**

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

@@ -1,5 +1,6 @@
 /* @flow */
 
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -20,12 +21,12 @@ class PrimaryToolbar extends Component {
         /**
          * Contains toolbar buttons for primary toolbar.
          */
-        _primaryToolbarButtons: React.PropTypes.instanceOf(Map),
+        _primaryToolbarButtons: PropTypes.instanceOf(Map),
 
         /**
          * Shows whether toolbox is visible.
          */
-        _visible: React.PropTypes.bool
+        _visible: PropTypes.bool
     };
 
     state: Object;

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

@@ -1,5 +1,6 @@
 /* @flow */
 
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -41,18 +42,18 @@ class ProfileButton extends Component {
         /**
          * Whether the button support clicking or not.
          */
-        _unclickable: React.PropTypes.bool,
+        _unclickable: PropTypes.bool,
 
         /**
          * Whether the side panel is opened or not.
          */
-        toggled: React.PropTypes.bool,
+        toggled: PropTypes.bool,
 
         /**
          * From which side tooltips should display. Will be re-used for
          * displaying the inline dialog for video quality adjustment.
          */
-        tooltipPosition: React.PropTypes.string
+        tooltipPosition: PropTypes.string
     };
 
     /**

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

@@ -1,5 +1,6 @@
 /* @flow */
 
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -34,28 +35,28 @@ class SecondaryToolbar extends Component {
          * Application ID for callstats.io API. The {@code FeedbackButton} will
          * display if defined.
          */
-        _callStatsID: React.PropTypes.string,
+        _callStatsID: PropTypes.string,
 
         /**
          * The indicator which determines whether the local participant is a
          * guest in the conference.
          */
-        _isGuest: React.PropTypes.bool,
+        _isGuest: PropTypes.bool,
 
         /**
          * Handler dispatching toggle toolbar container.
          */
-        _onSideToolbarContainerToggled: React.PropTypes.func,
+        _onSideToolbarContainerToggled: PropTypes.func,
 
         /**
          * Contains map of secondary toolbar buttons.
          */
-        _secondaryToolbarButtons: React.PropTypes.instanceOf(Map),
+        _secondaryToolbarButtons: PropTypes.instanceOf(Map),
 
         /**
          * Shows whether toolbox is visible.
          */
-        _visible: React.PropTypes.bool
+        _visible: PropTypes.bool
     };
 
     /**

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

@@ -1,5 +1,6 @@
 /* @flow */
 
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 /**
@@ -19,22 +20,22 @@ export default class StatelessToolbar extends Component {
         /**
          * Children of current React component.
          */
-        children: React.PropTypes.node,
+        children: PropTypes.node,
 
         /**
          * Toolbar's class name.
          */
-        className: React.PropTypes.string,
+        className: PropTypes.string,
 
         /**
          *  Handler for mouse out event.
          */
-        onMouseOut: React.PropTypes.func,
+        onMouseOut: PropTypes.func,
 
         /**
          * Handler for mouse over event.
          */
-        onMouseOver: React.PropTypes.func
+        onMouseOver: PropTypes.func
     };
 
     /**

react/features/toolbox/components/StatelessToolbarButton.js

@@ -1,5 +1,6 @@
 /* @flow */
 
+import PropTypes from 'prop-types';
 import React from 'react';
 
 import AbstractToolbarButton from './AbstractToolbarButton';
@@ -68,7 +69,7 @@ export default class StatelessToolbarButton extends AbstractToolbarButton {
         /**
          * Object describing button.
          */
-        button: React.PropTypes.object.isRequired
+        button: PropTypes.object.isRequired
     };
 
     /**

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

@@ -1,5 +1,6 @@
 /* @flow */
 
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -30,29 +31,28 @@ class Toolbar extends Component {
         /**
          * Children of current React component.
          */
-        children: React.PropTypes.element,
+        children: PropTypes.element,
 
         /**
          * Toolbar's class name.
          */
-        className: React.PropTypes.string,
+        className: PropTypes.string,
 
         /**
          * Used to dispatch an action when a button is clicked or on mouse
          * out/in event.
          */
-        dispatch: React.PropTypes.func,
+        dispatch: PropTypes.func,
 
         /**
          * Map with toolbar buttons.
          */
-        toolbarButtons: React.PropTypes.instanceOf(Map),
+        toolbarButtons: PropTypes.instanceOf(Map),
 
         /**
          * Indicates the position of the tooltip.
          */
-        tooltipPosition:
-            React.PropTypes.oneOf([ 'bottom', 'left', 'right', 'top' ])
+        tooltipPosition: PropTypes.oneOf([ 'bottom', 'left', 'right', 'top' ])
     };
 
     /**

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

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import { TouchableHighlight } from 'react-native';
 import { connect } from 'react-redux';
@@ -23,7 +24,7 @@ class ToolbarButton extends AbstractToolbarButton {
         /**
          * Indicates whether this {@code ToolbarButton} is disabled.
          */
-        disabled: React.PropTypes.bool
+        disabled: PropTypes.bool
     };
 
     /**

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

@@ -2,12 +2,12 @@
 
 import AKInlineDialog from '@atlaskit/inline-dialog';
 import { Tooltip } from '@atlaskit/tooltip';
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import { translate } from '../../base/i18n';
 
 import { isButtonEnabled } from '../functions';
-
 import StatelessToolbarButton from './StatelessToolbarButton';
 
 declare var APP: Object;
@@ -60,28 +60,27 @@ class ToolbarButton extends Component {
         /**
          * Object describing button.
          */
-        button: React.PropTypes.object.isRequired,
+        button: PropTypes.object.isRequired,
 
         /**
          * Handler for component mount.
          */
-        onMount: React.PropTypes.func,
+        onMount: PropTypes.func,
 
         /**
          * Handler for component unmount.
          */
-        onUnmount: React.PropTypes.func,
+        onUnmount: PropTypes.func,
 
         /**
          * Translation helper function.
          */
-        t: React.PropTypes.func,
+        t: PropTypes.func,
 
         /**
          * Indicates the position of the tooltip.
          */
-        tooltipPosition:
-            React.PropTypes.oneOf([ 'bottom', 'left', 'right', 'top' ])
+        tooltipPosition: PropTypes.oneOf([ 'bottom', 'left', 'right', 'top' ])
     };
 
     /**

react/features/toolbox/components/Toolbox.native.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { View } from 'react-native';
 import { connect } from 'react-redux';
@@ -45,55 +46,55 @@ class Toolbox extends Component {
         /**
          * Flag showing that audio is muted.
          */
-        _audioMuted: React.PropTypes.bool,
+        _audioMuted: PropTypes.bool,
 
         /**
          * Flag showing whether the audio-only mode is in use.
          */
-        _audioOnly: React.PropTypes.bool,
+        _audioOnly: PropTypes.bool,
 
         /**
          * Flag showing whether room is locked.
          */
-        _locked: React.PropTypes.bool,
+        _locked: PropTypes.bool,
 
         /**
          * Handler for hangup.
          */
-        _onHangup: React.PropTypes.func,
+        _onHangup: PropTypes.func,
 
         /**
          * Sets the lock i.e. password protection of the conference/room.
          */
-        _onRoomLock: React.PropTypes.func,
+        _onRoomLock: PropTypes.func,
 
         /**
          * Begins the UI procedure to share the conference/room URL.
          */
-        _onShareRoom: React.PropTypes.func,
+        _onShareRoom: PropTypes.func,
 
         /**
          * Toggles the audio-only flag of the conference.
          */
-        _onToggleAudioOnly: React.PropTypes.func,
+        _onToggleAudioOnly: PropTypes.func,
 
         /**
          * Switches between the front/user-facing and back/environment-facing
          * cameras.
          */
-        _onToggleCameraFacingMode: React.PropTypes.func,
+        _onToggleCameraFacingMode: PropTypes.func,
 
         /**
          * Flag showing whether video is muted.
          */
-        _videoMuted: React.PropTypes.bool,
+        _videoMuted: PropTypes.bool,
 
         /**
          * Flag showing whether toolbar is visible.
          */
-        _visible: React.PropTypes.bool,
+        _visible: PropTypes.bool,
 
-        dispatch: React.PropTypes.func
+        dispatch: PropTypes.func
     };
 
     /**

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

@@ -1,5 +1,6 @@
 /* @flow */
 
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -31,32 +32,32 @@ class Toolbox extends Component {
         /**
          * Indicates if the toolbox should always be visible.
          */
-        _alwaysVisible: React.PropTypes.bool,
+        _alwaysVisible: PropTypes.bool,
 
         /**
          * Handler dispatching setting default buttons action.
          */
-        _setDefaultToolboxButtons: React.PropTypes.func,
+        _setDefaultToolboxButtons: PropTypes.func,
 
         /**
          * Handler dispatching reset always visible toolbox action.
          */
-        _setToolboxAlwaysVisible: React.PropTypes.func,
+        _setToolboxAlwaysVisible: PropTypes.func,
 
         /**
          * Represents conference subject.
          */
-        _subject: React.PropTypes.string,
+        _subject: PropTypes.string,
 
         /**
          * Flag showing whether to set subject slide in animation.
          */
-        _subjectSlideIn: React.PropTypes.bool,
+        _subjectSlideIn: PropTypes.bool,
 
         /**
          * Property containing toolbox timeout id.
          */
-        _timeoutID: React.PropTypes.number
+        _timeoutID: PropTypes.number
     };
 
     /**

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

@@ -1,5 +1,6 @@
 /* @flow */
 
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import { translate } from '../../base/i18n';
@@ -34,7 +35,7 @@ class UnsupportedDesktopBrowser extends Component {
          * @public
          * @type {Function}
          */
-        t: React.PropTypes.func
+        t: PropTypes.func
     };
 
     /**