diff --git a/react/features/audio-level-indicator/components/AudioLevelIndicator.js b/react/features/audio-level-indicator/components/AudioLevelIndicator.js index 12ccc7ed4..c26e3a4d5 100644 --- a/react/features/audio-level-indicator/components/AudioLevelIndicator.js +++ b/react/features/audio-level-indicator/components/AudioLevelIndicator.js @@ -1,4 +1,5 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; /** @@ -13,27 +14,24 @@ const AUDIO_LEVEL_DOTS = 5; */ const CENTER_DOT_INDEX = Math.floor(AUDIO_LEVEL_DOTS / 2); +/** + * The type of the React {@code Component} props of {@link AudioLevelIndicator}. + */ +type Props = { + + /** + * The current audio level to display. The value should be a number between + * 0 and 1. + */ + audioLevel: number +}; + /** * Creates a ReactElement responsible for drawing audio levels. * * @extends {Component} */ -class AudioLevelIndicator extends Component { - /** - * {@code AudioLevelIndicator}'s property types. - * - * @static - */ - static propTypes = { - /** - * The current audio level to display. The value should be a number - * between 0 and 1. - * - * @type {number} - */ - audioLevel: PropTypes.number - }; - +class AudioLevelIndicator extends Component { /** * Implements React's {@link Component#render()}. * diff --git a/react/features/authentication/components/LoginDialog.native.js b/react/features/authentication/components/LoginDialog.native.js index cf14f815f..1520e070c 100644 --- a/react/features/authentication/components/LoginDialog.native.js +++ b/react/features/authentication/components/LoginDialog.native.js @@ -1,4 +1,5 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import { Text, TextInput, View } from 'react-native'; import { connect as reduxConnect } from 'react-redux'; @@ -11,6 +12,65 @@ import { JitsiConnectionErrors } from '../../base/lib-jitsi-meet'; import { authenticateAndUpgradeRole, cancelLogin } from '../actions'; import styles from './styles'; +/** + * The type of the React {@link Component} props of {@link LoginDialog}. + */ +type Props = { + + /** + * {@link JitsiConference} that needs authentication - will hold a valid + * value in XMPP login + guest access mode. + */ + _conference: Object, + + /** + * The server hosts specified in the global config. + */ + _configHosts: Object, + + /** + * Indicates if the dialog should display "connecting" status message. + */ + _connecting: boolean, + + /** + * The error which occurred during login/authentication. + */ + _error: Object, + + /** + * The progress in the floating range between 0 and 1 of the authenticating + * and upgrading the role of the local participant/user. + */ + _progress: number, + + /** + * Redux store dispatch method. + */ + dispatch: Dispatch<*>, + + /** + * Invoked to obtain translated strings. + */ + t: Function +}; + +/** + * The type of the React {@link Component} state of {@link LoginDialog}. + */ +type State = { + + /** + * The user entered password for the conference. + */ + password: string, + + /** + * The user entered local participant name. + */ + username: string +}; + /** * Dialog asks user for username and password. * @@ -38,58 +98,14 @@ import styles from './styles'; * See {@link https://github.com/jitsi/jicofo#secure-domain} for a description * of the configuration parameters. */ -class LoginDialog extends Component { - /** - * LoginDialog component's property types. - * - * @static - */ - static propTypes = { - /** - * {@link JitsiConference} that needs authentication - will hold a valid - * value in XMPP login + guest access mode. - */ - _conference: PropTypes.object, - - /** - * - */ - _configHosts: PropTypes.object, - - /** - * Indicates if the dialog should display "connecting" status message. - */ - _connecting: PropTypes.bool, - - /** - * The error which occurred during login/authentication. - */ - _error: PropTypes.object, - - /** - * The progress in the floating range between 0 and 1 of the - * authenticating and upgrading the role of the local participant/user. - */ - _progress: PropTypes.number, - - /** - * Redux store dispatch method. - */ - dispatch: PropTypes.func, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func - }; - +class LoginDialog extends Component { /** * Initializes a new LoginDialog instance. * * @param {Object} props - The read-only properties with which the new * instance is to be initialized. */ - constructor(props) { + constructor(props: Props) { super(props); this.state = { @@ -119,7 +135,7 @@ class LoginDialog extends Component { } = this.props; let messageKey; - let messageOptions; + const messageOptions = {}; if (progress && progress < 1) { messageKey = 'connection.FETCH_SESSION_ID'; @@ -142,7 +158,6 @@ class LoginDialog extends Component { } } else if (name) { messageKey = 'dialog.connectErrorWithMsg'; - messageOptions || (messageOptions = {}); messageOptions.msg = `${name} ${error.message}`; } } @@ -170,7 +185,7 @@ class LoginDialog extends Component { { messageKey - ? t(messageKey, messageOptions || {}) + ? t(messageKey, messageOptions) : connecting ? t('connection.CONNECTING') : '' @@ -181,6 +196,8 @@ class LoginDialog extends Component { ); } + _onUsernameChange: (string) => void; + /** * Called when user edits the username. * @@ -194,6 +211,8 @@ class LoginDialog extends Component { }); } + _onPasswordChange: (string) => void; + /** * Called when user edits the password. * @@ -207,6 +226,8 @@ class LoginDialog extends Component { }); } + _onCancel: () => void; + /** * Notifies this LoginDialog that it has been dismissed by cancel. * @@ -217,6 +238,8 @@ class LoginDialog extends Component { this.props.dispatch(cancelLogin()); } + _onLogin: () => void; + /** * Notifies this LoginDialog that the login button (OK) has been pressed by * the user. diff --git a/react/features/base/dialog/components/DialogContainer.js b/react/features/base/dialog/components/DialogContainer.js index 7648c3a6a..0aecf96b6 100644 --- a/react/features/base/dialog/components/DialogContainer.js +++ b/react/features/base/dialog/components/DialogContainer.js @@ -1,35 +1,35 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import { connect } from 'react-redux'; +/** + * The type of the React {@code Component} props of {@link DialogContainer}. + */ +type Props = { + + /** + * The component to render. + */ + _component: Function, + + /** + * The props to pass to the component that will be rendered. + */ + _componentProps: Object, + + /** + * True if the UI is in a compact state where we don't show dialogs. + */ + _reducedUI: boolean +}; + /** * Implements a DialogContainer responsible for showing all dialogs. We will * need a separate container so we can handle multiple dialogs by showing them * simultaneously or queuing them. */ -export class DialogContainer extends Component { - /** - * DialogContainer component's property types. - * - * @static - */ - static propTypes = { - /** - * The component to render. - */ - _component: PropTypes.func, - - /** - * The props to pass to the component that will be rendered. - */ - _componentProps: PropTypes.object, - - /** - * True if the UI is in a compact state where we don't show dialogs. - */ - _reducedUI: PropTypes.bool - }; - +export class DialogContainer extends Component { /** * Implements React's {@link Component#render()}. * diff --git a/react/features/base/media/components/AbstractVideoTrack.js b/react/features/base/media/components/AbstractVideoTrack.js index 5a2321965..4b5fda9cd 100644 --- a/react/features/base/media/components/AbstractVideoTrack.js +++ b/react/features/base/media/components/AbstractVideoTrack.js @@ -1,4 +1,5 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import { trackVideoStarted } from '../../tracks'; @@ -6,51 +7,71 @@ import { trackVideoStarted } from '../../tracks'; import { shouldRenderVideoTrack } from '../functions'; import { Video } from './_'; +/** + * The type of the React {@code Component} props of {@link AbstractVideoTrack}. + */ +export type Props = { + + /** + * The Redux dispatch function. + */ + dispatch: Dispatch<*>, + + /** + * Callback to invoke when the {@link Video} of {@code AbstractVideoTrack} + * is clicked/pressed. + */ + onPress?: Function, + + /** + * The Redux representation of the participant's video track. + */ + videoTrack?: Object, + + /** + * Whether or not video should be rendered after knowing video playback has + * started. + */ + waitForVideoStarted?: boolean, + + /** + * The z-order of the Video of AbstractVideoTrack in the stacking space of + * all Videos. For more details, refer to the zOrder property of the Video + * class for React Native. + */ + zOrder?: number, + + /** + * Indicates whether zooming (pinch to zoom and/or drag) is enabled. + */ + zoomEnabled?: boolean +}; + +/** + * The type of the React {@code Component} state of {@link AbstractVideoTrack}. + */ +type State = { + + /** + * The Redux representation of the participant's video track. + */ + videoTrack: Object | null +}; + /** * Implements a React {@link Component} that renders video element for a * specific video track. * * @abstract */ -export default class AbstractVideoTrack extends Component { - /** - * AbstractVideoTrack component's property types. - * - * @static - */ - static propTypes = { - dispatch: PropTypes.func, - - /** - * Callback to invoke when the {@link Video} of - * {@code AbstractVideoTrack} is clicked/pressed. - */ - onPress: PropTypes.func, - - videoTrack: PropTypes.object, - - 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: PropTypes.number, - - /** - * Indicates whether zooming (pinch to zoom and/or drag) is enabled. - */ - zoomEnabled: PropTypes.bool - }; - +export default class AbstractVideoTrack extends Component { /** * Initializes a new AbstractVideoTrack instance. * * @param {Object} props - The read-only properties with which the new * instance is to be initialized. */ - constructor(props) { + constructor(props: P) { super(props); this.state = { @@ -69,7 +90,7 @@ export default class AbstractVideoTrack extends Component { * receive. * @returns {void} */ - componentWillReceiveProps(nextProps) { + componentWillReceiveProps(nextProps: P) { const oldValue = this.state.videoTrack; const newValue = _falsy2null(nextProps.videoTrack); @@ -88,7 +109,7 @@ export default class AbstractVideoTrack extends Component { const { videoTrack } = this.state; let render; - if (this.props.waitForVideoStarted) { + if (this.props.waitForVideoStarted && videoTrack) { // That's the complex case: we have to wait for onPlaying before we // render videoTrack. The complexity comes from the fact that // onPlaying will come after we render videoTrack. @@ -110,14 +131,15 @@ export default class AbstractVideoTrack extends Component { render = shouldRenderVideoTrack(videoTrack, false); } - const stream - = render ? videoTrack.jitsiTrack.getOriginalStream() : null; + const stream = render && videoTrack + ? videoTrack.jitsiTrack.getOriginalStream() : null; // Actual zoom is currently only enabled if the stream is a desktop // stream. const zoomEnabled = this.props.zoomEnabled && stream + && videoTrack && videoTrack.videoType === 'desktop'; return ( @@ -131,6 +153,8 @@ export default class AbstractVideoTrack extends Component { ); } + _onVideoPlaying: () => void; + /** * Handler for case when video starts to play. * diff --git a/react/features/base/media/components/native/Video.js b/react/features/base/media/components/native/Video.js index 42dc4e83d..dd4967c83 100644 --- a/react/features/base/media/components/native/Video.js +++ b/react/features/base/media/components/native/Video.js @@ -1,6 +1,5 @@ // @flow -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { RTCView } from 'react-native-webrtc'; @@ -9,60 +8,58 @@ import { Pressable } from '../../../react'; import styles from './styles'; import VideoTransform from './VideoTransform'; +/** + * The type of the React {@code Component} props of {@link Video}. + */ +type Props = { + mirror: boolean, + + onPlaying: Function, + + /** + * Callback to invoke when the {@code Video} is clicked/pressed. + */ + onPress: Function, + + stream: Object, + + /** + * Similarly to the CSS property z-index, specifies the z-order of this + * Video in the stacking space of all Videos. When Videos overlap, + * zOrder determines which one covers the other. A Video with a larger + * zOrder generally covers a Video with a lower one. + * + * Non-overlapping Videos may safely share a z-order (because one does + * not have to cover the other). + * + * The support for zOrder is platform-dependent and/or + * implementation-specific. Thus, specifying a value for zOrder is to be + * thought of as giving a hint rather than as imposing a requirement. + * For example, video renderers such as Video are commonly implemented + * using OpenGL and OpenGL views may have different numbers of layers in + * their stacking space. Android has three: a layer bellow the window + * (aka default), a layer bellow the window again but above the previous + * layer (aka media overlay), and above the window. Consequently, it is + * advisable to limit the number of utilized layers in the stacking + * space to the minimum sufficient for the desired display. For example, + * a video call application usually needs a maximum of two zOrder + * values: 0 for the remote video(s) which appear in the background, and + * 1 for the local video(s) which appear above the remote video(s). + */ + zOrder: number, + + /** + * Indicates whether zooming (pinch to zoom and/or drag) is enabled. + */ + zoomEnabled: boolean +}; + /** * The React Native {@link Component} which is similar to Web's * {@code HTMLVideoElement} and wraps around react-native-webrtc's * {@link RTCView}. */ -export default class Video extends Component<*> { - /** - * {@code Video} component's property types. - * - * @static - */ - static propTypes = { - mirror: PropTypes.bool, - - onPlaying: PropTypes.func, - - /** - * Callback to invoke when the {@code Video} is clicked/pressed. - */ - onPress: PropTypes.func, - - stream: PropTypes.object, - - /** - * Similarly to the CSS property z-index, specifies the z-order of this - * Video in the stacking space of all Videos. When Videos overlap, - * zOrder determines which one covers the other. A Video with a larger - * zOrder generally covers a Video with a lower one. - * - * Non-overlapping Videos may safely share a z-order (because one does - * not have to cover the other). - * - * The support for zOrder is platform-dependent and/or - * implementation-specific. Thus, specifying a value for zOrder is to be - * thought of as giving a hint rather than as imposing a requirement. - * For example, video renderers such as Video are commonly implemented - * using OpenGL and OpenGL views may have different numbers of layers in - * their stacking space. Android has three: a layer bellow the window - * (aka default), a layer bellow the window again but above the previous - * layer (aka media overlay), and above the window. Consequently, it is - * advisable to limit the number of utilized layers in the stacking - * space to the minimum sufficient for the desired display. For example, - * a video call application usually needs a maximum of two zOrder - * values: 0 for the remote video(s) which appear in the background, and - * 1 for the local video(s) which appear above the remote video(s). - */ - zOrder: PropTypes.number, - - /** - * Indicates whether zooming (pinch to zoom and/or drag) is enabled. - */ - zoomEnabled: PropTypes.bool - }; - +export default class Video extends Component { /** * React Component method that executes once component is mounted. * diff --git a/react/features/base/media/components/native/VideoTrack.js b/react/features/base/media/components/native/VideoTrack.js index ea84c349e..3fc2ee443 100644 --- a/react/features/base/media/components/native/VideoTrack.js +++ b/react/features/base/media/components/native/VideoTrack.js @@ -1,8 +1,11 @@ +/* @flow */ + import React from 'react'; import { View } from 'react-native'; import { connect } from 'react-redux'; import AbstractVideoTrack from '../AbstractVideoTrack'; +import type { Props } from '../AbstractVideoTrack'; import styles from './styles'; /** @@ -10,14 +13,7 @@ import styles from './styles'; * * @extends AbstractVideoTrack */ -class VideoTrack extends AbstractVideoTrack { - /** - * VideoTrack component's property types. - * - * @static - */ - static propTypes = AbstractVideoTrack.propTypes - +class VideoTrack extends AbstractVideoTrack { /** * Renders the video element for the associated video track. * diff --git a/react/features/base/media/components/web/Video.js b/react/features/base/media/components/web/Video.js index e00d3d723..d107023c5 100644 --- a/react/features/base/media/components/web/Video.js +++ b/react/features/base/media/components/web/Video.js @@ -1,12 +1,42 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; +/** + * The type of the React {@code Component} props of {@link Video}. + */ +type Props = { + + /** + * CSS classes to add to the video element. + */ + className: string, + + /** + * The value of the id attribute of the video. Used by the torture tests to + * locate video elements. + */ + id: string, + + /** + * Optional callback to invoke once the video starts playing. + */ + onVideoPlaying: Function, + + /** + * The JitsiLocalTrack to display. + */ + videoTrack: ?Object +}; + /** * Component that renders a video element for a passed in video track. * * @extends Component */ -class Video extends Component { +class Video extends Component { + _videoElement: ?Object; + /** * Default values for {@code Video} component's properties. * @@ -18,41 +48,13 @@ class Video extends Component { id: '' }; - /** - * {@code Video} component's property types. - * - * @static - */ - static propTypes = { - /** - * CSS classes to add to the video element. - */ - className: PropTypes.string, - - /** - * The value of the id attribute of the video. Used by the torture tests - * to locate video elements. - */ - id: PropTypes.string, - - /** - * Optional callback to invoke once the video starts playing. - */ - onVideoPlaying: PropTypes.func, - - /** - * The JitsiLocalTrack to display. - */ - videoTrack: PropTypes.object - }; - /** * Initializes a new {@code Video} instance. * * @param {Object} props - The read-only properties with which the new * instance is to be initialized. */ - constructor(props) { + constructor(props: Props) { super(props); /** @@ -78,8 +80,10 @@ class Video extends Component { * @returns {void} */ componentDidMount() { - this._videoElement.volume = 0; - this._videoElement.onplaying = this._onVideoPlaying; + if (this._videoElement) { + this._videoElement.volume = 0; + this._videoElement.onplaying = this._onVideoPlaying; + } this._attachTrack(this.props.videoTrack); } @@ -104,7 +108,7 @@ class Video extends Component { * @returns {boolean} - False is always returned to blackbox this component. * from React. */ - shouldComponentUpdate(nextProps) { + shouldComponentUpdate(nextProps: Props) { const currentJitsiTrack = this.props.videoTrack && this.props.videoTrack.jitsiTrack; const nextJitsiTrack = nextProps.videoTrack @@ -167,6 +171,8 @@ class Video extends Component { } } + _onVideoPlaying: () => void; + /** * Invokes the onvideoplaying callback if defined. * @@ -179,6 +185,8 @@ class Video extends Component { } } + _setVideoElement: () => void; + /** * Sets an instance variable for the component's video element so it can be * referenced later for attaching and detaching a JitsiLocalTrack. diff --git a/react/features/base/media/components/web/VideoTrack.js b/react/features/base/media/components/web/VideoTrack.js index e2fd5fd80..e157ae378 100644 --- a/react/features/base/media/components/web/VideoTrack.js +++ b/react/features/base/media/components/web/VideoTrack.js @@ -1,51 +1,49 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React from 'react'; import { connect } from 'react-redux'; import AbstractVideoTrack from '../AbstractVideoTrack'; +import type { Props as AbstractVideoTrackProps } from '../AbstractVideoTrack'; import Video from './Video'; +/** + * The type of the React {@code Component} props of {@link VideoTrack}. + */ +type Props = { + ...AbstractVideoTrackProps, + + /** + * CSS classes to add to the video element. + */ + className: string, + + /** + * The value of the id attribute of the video. Used by the torture tests + * to locate video elements. + */ + id: string +}; + /** * Component that renders a video element for a passed in video track and * notifies the store when the video has started playing. * * @extends AbstractVideoTrack */ -class VideoTrack extends AbstractVideoTrack { +class VideoTrack extends AbstractVideoTrack { /** * Default values for {@code VideoTrack} component's properties. * * @static */ static defaultProps = { - ...AbstractVideoTrack.defaultProps, - className: '', id: '' }; - /** - * {@code VideoTrack} component's property types. - * - * @static - */ - static propTypes = { - ...AbstractVideoTrack.propTypes, - - /** - * CSS classes to add to the video element. - */ - className: PropTypes.string, - - /** - * The value of the id attribute of the video. Used by the torture tests - * to locate video elements. - */ - id: PropTypes.string - }; - /** * Renders the video element. * @@ -62,6 +60,8 @@ class VideoTrack extends AbstractVideoTrack { videoTrack = { this.props.videoTrack } /> ); } + + _onVideoPlaying: () => void; } export default connect()(VideoTrack); diff --git a/react/features/base/media/functions.js b/react/features/base/media/functions.js index 97da25338..e1e684768 100644 --- a/react/features/base/media/functions.js +++ b/react/features/base/media/functions.js @@ -58,7 +58,7 @@ export function isVideoMutedByUser(stateful: Function | Object) { * otherwise, false. */ export function shouldRenderVideoTrack( - videoTrack: { muted: boolean, videoStarted: boolean }, + videoTrack: ?{ muted: boolean, videoStarted: boolean }, waitForVideoStarted: boolean) { return ( videoTrack diff --git a/react/features/base/popover/components/Popover.web.js b/react/features/base/popover/components/Popover.web.js index 0d9458ae4..92f075c3f 100644 --- a/react/features/base/popover/components/Popover.web.js +++ b/react/features/base/popover/components/Popover.web.js @@ -1,5 +1,6 @@ +/* @flow */ + import InlineDialog from '@atlaskit/inline-dialog'; -import PropTypes from 'prop-types'; import React, { Component } from 'react'; /** @@ -28,13 +29,68 @@ function _mapPositionToPaddingClass(position = 'left') { return DIALOG_TO_PADDING_POSITION[position.split(' ')[0]]; } +/** + * The type of the React {@code Component} props of {@link Popover}. + */ +type Props = { + + /** + * A child React Element to use as the trigger for showing the dialog. + */ + children: React$Node, + + /** + * Additional CSS classnames to apply to the root of the {@code Popover} + * component. + */ + className: string, + + /** + * The ReactElement to display within the dialog. + */ + content: Object, + + /** + * Whether displaying of the popover should be prevented. + */ + disablePopover: boolean, + + /** + * An id attribute to apply to the root of the {@code Popover} + * component. + */ + id: string, + + /** + * Callback to invoke when the popover has opened. + */ + onPopoverOpen: Function, + + /** + * From which side of the dialog trigger the dialog should display. The + * value will be passed to {@code InlineDialog}. + */ + position: string +}; + +/** + * The type of the React {@code Component} state of {@link Popover}. + */ +type State = { + + /** + * Whether or not the {@code InlineDialog} should be displayed. + */ + showDialog: boolean +}; + /** * Implements a React {@code Component} for showing an {@code InlineDialog} on * mouseenter of the trigger and contents, and hiding the dialog on mouseleave. * * @extends Component */ -class Popover extends Component { +class Popover extends Component { /** * Default values for {@code Popover} component's properties. * @@ -45,66 +101,16 @@ class Popover extends Component { id: '' }; - /** - * {@code Popover} component's property types. - * - * @static - */ - static propTypes = { - /** - * A child React Element to use as the trigger for showing the dialog. - */ - children: PropTypes.object, - - /** - * Additional CSS classnames to apply to the root of the {@code Popover} - * component. - */ - className: PropTypes.string, - - /** - * The ReactElement to display within the dialog. - */ - content: PropTypes.object, - - /** - * Whether displaying of the popover should be prevented. - */ - disablePopover: PropTypes.bool, - - /** - * An id attribute to apply to the root of the {@code Popover} - * component. - */ - id: PropTypes.string, - - /** - * Callback to invoke when the popover has opened. - */ - onPopoverOpen: PropTypes.func, - - /** - * From which side of the dialog trigger the dialog should display. The - * value will be passed to {@code InlineDialog}. - */ - position: PropTypes.string - }; - /** * Initializes a new {@code Popover} instance. * * @param {Object} props - The read-only properties with which the new * instance is to be initialized. */ - constructor(props) { + constructor(props: Props) { super(props); this.state = { - /** - * Whether or not the {@code InlineDialog} should be displayed. - * - * @type {boolean} - */ showDialog: false }; @@ -136,6 +142,8 @@ class Popover extends Component { ); } + _onHideDialog: () => void; + /** * Stops displaying the {@code InlineDialog}. * @@ -146,6 +154,8 @@ class Popover extends Component { this.setState({ showDialog: false }); } + _onShowDialog: () => void; + /** * Displays the {@code InlineDialog} and calls any registered onPopoverOpen * callbacks. diff --git a/react/features/base/react/components/AbstractContainer.js b/react/features/base/react/components/AbstractContainer.js index 7d0bdade7..726a29a02 100644 --- a/react/features/base/react/components/AbstractContainer.js +++ b/react/features/base/react/components/AbstractContainer.js @@ -58,7 +58,6 @@ export type Props = { visible?: ?boolean }; - /** * Abstract (base) class for container of React {@link Component} children with * a style. diff --git a/react/features/base/react/components/native/Link.js b/react/features/base/react/components/native/Link.js index a53fceb3f..2297f8a2b 100644 --- a/react/features/base/react/components/native/Link.js +++ b/react/features/base/react/components/native/Link.js @@ -1,47 +1,47 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import { Linking } from 'react-native'; import Text from './Text'; +/** + * The type of the React {@code Component} props of {@link Link}. + */ +type Props = { + + /** + * The children to be displayed within this Link. + */ + children: React$Node, + + /** + * Notifies that this Link failed to open the URL associated with it. + */ + onLinkingOpenURLRejected: Function, + + /** + * The CSS style to be applied to this Link for the purposes of display. + */ + style: Object, + + /** + * The URL to be opened when this Link is clicked/pressed. + */ + url: string +}; + /** * Implements a (hyper)link to a URL in the fashion of the HTML anchor element * and its href attribute. */ -export default class Link extends Component { - /** - * {@code Link} component's property types. - * - * @static - */ - static propTypes = { - /** - * The children to be displayed within this Link. - */ - children: PropTypes.node, - - /** - * Notifies that this Link failed to open the URL associated with it. - */ - onLinkingOpenURLRejected: PropTypes.func, - - /** - * The CSS style to be applied to this Link for the purposes of display. - */ - style: PropTypes.object, - - /** - * The URL to be opened when this Link is clicked/pressed. - */ - url: PropTypes.string - }; - +export default class Link extends Component { /** * Initializes a new Link instance. * * @param {Object} props - Component properties. */ - constructor(props) { + constructor(props: Props) { super(props); // Bind event handlers so they are only bound once for every instance. @@ -77,6 +77,8 @@ export default class Link extends Component { onRejected && onRejected(reason); } + _onPress: () => void; + /** * Handles press on this Link. Opens the URL associated with this Link. * diff --git a/react/features/base/react/components/web/Container.js b/react/features/base/react/components/web/Container.js index 7aa5b14ad..0576736f4 100644 --- a/react/features/base/react/components/web/Container.js +++ b/react/features/base/react/components/web/Container.js @@ -9,13 +9,6 @@ import type { Props } from '../AbstractContainer'; * @extends AbstractContainer */ export default class Container extends AbstractContainer

{ - /** - * {@code Container} component's property types. - * - * @static - */ - static propTypes = AbstractContainer.propTypes; - /** * Implements React's {@link Component#render()}. * diff --git a/react/features/base/react/components/web/InlineDialogFailure.js b/react/features/base/react/components/web/InlineDialogFailure.js index ef8844698..b16cccece 100644 --- a/react/features/base/react/components/web/InlineDialogFailure.js +++ b/react/features/base/react/components/web/InlineDialogFailure.js @@ -1,34 +1,32 @@ /* @flow */ import Button from '@atlaskit/button'; -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { translate } from '../../../i18n'; declare var interfaceConfig: Object; +/** + * The type of the React {@code Component} props of {@link InlineDialogFailure}. + */ +type Props = { + + /** + * Allows to retry the call that previously didn't succeed. + */ + onRetry: Function, + + /** + * Invoked to obtain translated strings. + */ + t: Function +}; + /** * Inline dialog that represents a failure and allows a retry. */ -class InlineDialogFailure extends Component<*> { - /** - * {@code InlineDialogFailure}'s property types. - * - * @static - */ - static propTypes = { - /** - * Allows to retry the call that previously didn't succeed. - */ - onRetry: PropTypes.func, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func - }; - +class InlineDialogFailure extends Component { /** * Renders the content of this component. * diff --git a/react/features/base/react/components/web/MultiSelectAutocomplete.js b/react/features/base/react/components/web/MultiSelectAutocomplete.js index 254f7b8fc..5556a28b0 100644 --- a/react/features/base/react/components/web/MultiSelectAutocomplete.js +++ b/react/features/base/react/components/web/MultiSelectAutocomplete.js @@ -1,7 +1,8 @@ +// @flow + import { MultiSelectStateless } from '@atlaskit/multi-select'; import AKInlineDialog from '@atlaskit/inline-dialog'; import _debounce from 'lodash/debounce'; -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import InlineDialogFailure from './InlineDialogFailure'; @@ -9,118 +10,127 @@ import InlineDialogFailure from './InlineDialogFailure'; const logger = require('jitsi-meet-logger').getLogger(__filename); /** - * A MultiSelect that is also auto-completing. + * The type of the React {@code Component} props of + * {@link MultiSelectAutocomplete}. */ -class MultiSelectAutocomplete extends Component { +type Props = { /** - * {@code MultiSelectAutocomplete} component's property types. - * - * @static + * The default value of the selected item. */ - static propTypes = { - /** - * The default value of the selected item. - */ - defaultValue: PropTypes.array, + defaultValue: Array, - /** - * Optional footer to show as a last element in the results. - * Should be of type {content: } - */ - footer: PropTypes.object, + /** + * Optional footer to show as a last element in the results. + * Should be of type {content: } + */ + footer: Object, - /** - * Indicates if the component is disabled. - */ - isDisabled: PropTypes.bool, + /** + * Indicates if the component is disabled. + */ + isDisabled: boolean, - /** - * Text to display while a query is executing. - */ - loadingMessage: PropTypes.string, + /** + * Text to display while a query is executing. + */ + loadingMessage: string, - /** - * The text to show when no matches are found. - */ - noMatchesFound: PropTypes.string, + /** + * The text to show when no matches are found. + */ + noMatchesFound: string, - /** - * The function called immediately before a selection has been actually - * selected. Provides an opportunity to do any formatting. - */ - onItemSelected: PropTypes.func, + /** + * The function called immediately before a selection has been actually + * selected. Provides an opportunity to do any formatting. + */ + onItemSelected: Function, - /** - * The function called when the selection changes. - */ - onSelectionChange: PropTypes.func, + /** + * The function called when the selection changes. + */ + onSelectionChange: Function, - /** - * The placeholder text of the input component. - */ - placeholder: PropTypes.string, + /** + * The placeholder text of the input component. + */ + placeholder: string, - /** - * The service providing the search. - */ - resourceClient: PropTypes.shape({ - makeQuery: PropTypes.func, - parseResults: PropTypes.func - }).isRequired, + /** + * The service providing the search. + */ + resourceClient: { makeQuery: Function, parseResults: Function }, - /** - * Indicates if the component should fit the container. - */ - shouldFitContainer: PropTypes.bool, + /** + * Indicates if the component should fit the container. + */ + shouldFitContainer: boolean, - /** - * Indicates if we should focus. - */ - shouldFocus: PropTypes.bool - }; + /** + * Indicates if we should focus. + */ + shouldFocus: boolean +}; +/** + * The type of the React {@code Component} state of + * {@link MultiSelectAutocomplete}. + */ +type State = { + + /** + * Indicates if the dropdown is open. + */ + isOpen: boolean, + + /** + * The text that filters the query result of the search. + */ + filterValue: string, + + /** + * Indicates if the component is currently loading results. + */ + loading: boolean, + + /** + * Indicates if there was an error. + */ + error: boolean, + + /** + * The list of result items. + */ + items: Array, + + /** + * The list of selected items. + */ + selectedItems: Array +}; + +/** + * A MultiSelect that is also auto-completing. + */ +class MultiSelectAutocomplete extends Component { /** * Initializes a new {@code MultiSelectAutocomplete} instance. * * @param {Object} props - The read-only properties with which the new * instance is to be initialized. */ - constructor(props) { + constructor(props: Props) { super(props); const defaultValue = this.props.defaultValue || []; this.state = { - /** - * Indicates if the dropdown is open. - */ isOpen: false, - - /** - * The text that filters the query result of the search. - */ filterValue: '', - - /** - * Indicates if the component is currently loading results. - */ loading: false, - - - /** - * Indicates if there was an error. - */ error: false, - - /** - * The list of result items. - */ items: [], - - /** - * The list of selected items. - */ selectedItems: [ ...defaultValue ] }; @@ -137,7 +147,7 @@ class MultiSelectAutocomplete extends Component { * having been selected. * @returns {void} */ - setSelectedItems(selectedItems = []) { + setSelectedItems(selectedItems: Array = []) { this.setState({ selectedItems }); } @@ -177,6 +187,8 @@ class MultiSelectAutocomplete extends Component { ); } + _onFilterChange: (string) => void; + /** * Sets the state and sends a query on filter change. * @@ -198,6 +210,8 @@ class MultiSelectAutocomplete extends Component { } } + _onRetry: () => void; + /** * Retries the query on retry. * @@ -208,6 +222,8 @@ class MultiSelectAutocomplete extends Component { this._sendQuery(this.state.filterValue); } + _onSelectionChange: (Object) => void; + /** * Updates the selected items when a selection event occurs. * @@ -258,6 +274,8 @@ class MultiSelectAutocomplete extends Component { ); } + _sendQuery: (string) => void; + /** * Sends a query to the resourceClient. * diff --git a/react/features/base/react/components/web/Watermarks.js b/react/features/base/react/components/web/Watermarks.js index b2254e187..47e70f131 100644 --- a/react/features/base/react/components/web/Watermarks.js +++ b/react/features/base/react/components/web/Watermarks.js @@ -1,6 +1,5 @@ /* @flow */ -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { connect } from 'react-redux'; @@ -17,32 +16,71 @@ const _RIGHT_WATERMARK_STYLE = { backgroundImage: 'url(images/rightwatermark.png)' }; +/** + * The type of the React {@code Component} props of {@link Watermarks}. + */ +type Props = { + + /** + * Whether or not the current user is logged in through a JWT. + */ + _isGuest: boolean, + + /** + * Invoked to obtain translated strings. + */ + t: Function +}; + +/** + * The type of the React {@code Component} state of {@link Watermarks}. + */ +type State = { + + /** + * The url to open when clicking the brand watermark. + */ + brandWatermarkLink: string, + + /** + * The url to open when clicking the Jitsi watermark. + */ + jitsiWatermarkLink: string, + + /** + * Whether or not the brand watermark should be displayed. + */ + showBrandWatermark: boolean, + + /** + * Whether or not the Jitsi watermark should be displayed. + */ + showJitsiWatermark: boolean, + + /** + * Whether or not the Jitsi watermark should be displayed for users not + * logged in through a JWT. + */ + showJitsiWatermarkForGuests: boolean, + + /** + * Whether or not the show the "powered by Jitsi.org" link. + */ + showPoweredBy: boolean +}; + /** * A Web Component which renders watermarks such as Jits, brand, powered by, * etc. */ -class Watermarks extends Component<*, *> { - static propTypes = { - _isGuest: PropTypes.bool, - t: PropTypes.func - }; - - state = { - brandWatermarkLink: String, - jitsiWatermarkLink: String, - showBrandWatermark: Boolean, - showJitsiWatermark: Boolean, - showJitsiWatermarkForGuests: Boolean, - showPoweredBy: Boolean - }; - +class Watermarks extends Component { /** * Initializes a new Watermarks instance. * * @param {Object} props - The read-only properties with which the new * instance is to be initialized. */ - constructor(props: Object) { + constructor(props: Props) { super(props); let showBrandWatermark; diff --git a/react/features/base/responsive-ui/components/AspectRatioAware.js b/react/features/base/responsive-ui/components/AspectRatioAware.js index c9db74e1d..eb6d9a3cd 100644 --- a/react/features/base/responsive-ui/components/AspectRatioAware.js +++ b/react/features/base/responsive-ui/components/AspectRatioAware.js @@ -1,11 +1,17 @@ // @flow -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { connect } from 'react-redux'; import { ASPECT_RATIO_NARROW, ASPECT_RATIO_WIDE } from '../constants'; +/** + * The type of the React {@code Component} props of {@link AspectRatioAware}. + */ +type Props = { + aspectRatio: ASPECT_RATIO_NARROW | ASPECT_RATIO_WIDE +}; + /** * Determines whether a specific React {@code Component} decorated into an * {@link AspectRatioAware} has {@link ASPECT_RATIO_NARROW} as the value of its @@ -34,20 +40,7 @@ export function makeAspectRatioAware( /** * Renders {@code WrappedComponent} with the React prop {@code aspectRatio}. */ - class AspectRatioAware extends Component<*> { - /** - * Properties of the aspect ratio aware wrapper. - */ - static propTypes = { - /** - * Either {@link ASPECT_RATIO_NARROW} or {@link ASPECT_RATIO_WIDE}. - */ - aspectRatio: PropTypes.oneOf([ - ASPECT_RATIO_NARROW, - ASPECT_RATIO_WIDE - ]) - } - + class AspectRatioAware extends Component { /** * Implement's React render method to wrap the nested component. * diff --git a/react/features/connection-indicator/components/ConnectionIndicator.js b/react/features/connection-indicator/components/ConnectionIndicator.js index 8f4e02de3..52c6ba91f 100644 --- a/react/features/connection-indicator/components/ConnectionIndicator.js +++ b/react/features/connection-indicator/components/ConnectionIndicator.js @@ -1,6 +1,5 @@ -/* global interfaceConfig */ +/* @flow */ -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { translate } from '../../base/i18n'; @@ -10,6 +9,8 @@ import { ConnectionStatsTable } from '../../connection-stats'; import statsEmitter from '../statsEmitter'; +declare var interfaceConfig: Object; + /** * The connection quality percentage that must be reached to be considered of * good quality and can result in the connection indicator being hidden. @@ -25,7 +26,7 @@ const INDICATOR_DISPLAY_THRESHOLD = 30; * * @type {Object[]} */ -const QUALITY_TO_WIDTH = [ +const QUALITY_TO_WIDTH: Array = [ // Full (3 bars) { @@ -54,108 +55,107 @@ const QUALITY_TO_WIDTH = [ // Note: we never show 0 bars as long as there is a connection. ]; +/** + * The type of the React {@code Component} props of {@link ConnectionIndicator}. + */ +type Props = { + + /** + * Whether or not the component should ignore setting a visibility class for + * hiding the component when the connection quality is not strong. + */ + alwaysVisible: boolean, + + /** + * The current condition of the user's connection, matching one of the + * enumerated values in the library. + */ + connectionStatus: string, + + /** + * Whether or not clicking the indicator should display a popover for more + * details. + */ + enableStatsDisplay: boolean, + + /** + * The font-size for the icon. + */ + iconSize: number, + + /** + * Whether or not the displays stats are for local video. + */ + isLocalVideo: boolean, + + /** + * Relative to the icon from where the popover for more connection details + * should display. + */ + statsPopoverPosition: string, + + /** + * Invoked to obtain translated strings. + */ + t: Function, + + /** + * The user ID associated with the displayed connection indication and + * stats. + */ + userID: string +}; + +/** + * The type of the React {@code Component} state of {@link ConnectionIndicator}. + */ +type State = { + + /** + * The timeout for automatically hiding the indicator. + */ + autoHideTimeout: TimeoutID | null, + + /** + * Whether or not a CSS class should be applied to the root for hiding the + * connection indicator. By default the indicator should start out hidden + * because the current connection status is not known at mount. + */ + showIndicator: boolean, + + /** + * Whether or not the popover content should display additional statistics. + */ + showMoreStats: boolean, + + /** + * Cache of the stats received from subscribing to stats emitting. The keys + * should be the name of the stat. With each stat update, updates stats are + * mixed in with cached stats and a new stats object is set in state. + */ + stats: Object +}; + /** * Implements a React {@link Component} which displays the current connection * quality percentage and has a popover to show more detailed connection stats. * * @extends {Component} */ -class ConnectionIndicator extends Component { - /** - * {@code ConnectionIndicator} component's property types. - * - * @static - */ - static propTypes = { - /** - * Whether or not the component should ignore setting a visibility class - * for hiding the component when the connection quality is not strong. - */ - alwaysVisible: PropTypes.bool, - - /** - * The current condition of the user's connection, matching one of the - * enumerated values in the library. - * - * @type {JitsiParticipantConnectionStatus} - */ - connectionStatus: PropTypes.string, - - /** - * Whether or not clicking the indicator should display a popover for - * more details. - */ - enableStatsDisplay: PropTypes.bool, - - /** - * The font-size for the icon. - */ - iconSize: PropTypes.number, - - /** - * Whether or not the displays stats are for local video. - */ - isLocalVideo: PropTypes.bool, - - /** - * Relative to the icon from where the popover for more connection - * details should display. - */ - statsPopoverPosition: PropTypes.string, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func, - - /** - * The user ID associated with the displayed connection indication and - * stats. - */ - userID: PropTypes.string - }; - +class ConnectionIndicator extends Component { /** * Initializes a new {@code ConnectionIndicator} instance. * * @param {Object} props - The read-only properties with which the new * instance is to be initialized. */ - constructor(props) { + constructor(props: Props) { super(props); this.state = { - /** - * The timeout for automatically hiding the indicator. - * - * @type {timeoutID} - */ autoHideTimeout: null, - - /** - * Whether or not a CSS class should be applied to the root for - * hiding the connection indicator. By default the indicator should - * start out hidden because the current connection status is not - * known at mount. - * - * @type {boolean} - */ showIndicator: false, - - /** - * Whether or not the popover content should display additional - * statistics. - * - * @type {boolean} - */ showMoreStats: false, - - /** - * Cache of the stats received from subscribing to stats emitting. - * The keys should be the name of the stat. With each stat update, - * updates stats are mixed in with cached stats and a new stats - * object is set in state. - */ stats: {} }; @@ -201,7 +201,9 @@ class ConnectionIndicator extends Component { statsEmitter.unsubscribeToClientStats( this.props.userID, this._onStatsUpdated); - clearTimeout(this.state.autoHideTimeout); + if (this.state.autoHideTimeout) { + clearTimeout(this.state.autoHideTimeout); + } } /** @@ -257,7 +259,7 @@ class ConnectionIndicator extends Component { return 'status-high'; } - return QUALITY_TO_WIDTH.find(x => percent >= x.percent).colorClass; + return this._getDisplayConfiguration(percent).colorClass; } /** @@ -287,7 +289,7 @@ class ConnectionIndicator extends Component { // established so far. Assume a strong connection to start. tipKey = 'connectionindicator.quality.good'; } else { - const config = QUALITY_TO_WIDTH.find(x => percent >= x.percent); + const config = this._getDisplayConfiguration(percent); tipKey = config.tip; } @@ -297,6 +299,21 @@ class ConnectionIndicator extends Component { return this.props.t(tipKey); } + /** + * Get the icon configuration from QUALITY_TO_WIDTH which has a percentage + * that matches or exceeds the passed in percentage. The implementation + * assumes QUALITY_TO_WIDTH is already sorted by highest to lowest + * percentage. + * + * @param {number} percent - The connection percentage, out of 100, to find + * the closest matching configuration for. + * @private + * @returns {Object} + */ + _getDisplayConfiguration(percent: number): Object { + return QUALITY_TO_WIDTH.find(x => percent >= x.percent) || {}; + } + /** * Returns additional class names to add to the root of the component. The * class names are intended to be used for hiding or showing the indicator. @@ -314,6 +331,8 @@ class ConnectionIndicator extends Component { ? 'show-connection-indicator' : 'hide-connection-indicator'; } + _onStatsUpdated: (Object) => void; + /** * Callback invoked when new connection stats associated with the passed in * user ID are available. Will update the component's display of current @@ -341,6 +360,8 @@ class ConnectionIndicator extends Component { this._updateIndicatorAutoHide(newStats.percent); } + _onToggleShowMore: () => void; + /** * Callback to invoke when the show more link in the popover content is * clicked. Sets the state which will determine if the popover should show @@ -383,7 +404,7 @@ class ConnectionIndicator extends Component { } else { const { percent } = this.state.stats; - iconWidth = QUALITY_TO_WIDTH.find(x => percent >= x.percent).width; + iconWidth = this._getDisplayConfiguration(percent).width; } return [ @@ -449,7 +470,10 @@ class ConnectionIndicator extends Component { */ _updateIndicatorAutoHide(percent) { if (percent < INDICATOR_DISPLAY_THRESHOLD) { - clearTimeout(this.state.autoHideTimeout); + if (this.state.autoHideTimeout) { + clearTimeout(this.state.autoHideTimeout); + } + this.setState({ autoHideTimeout: null, showIndicator: true diff --git a/react/features/connection-stats/components/ConnectionStatsTable.js b/react/features/connection-stats/components/ConnectionStatsTable.js index bcc628614..bd135b76d 100644 --- a/react/features/connection-stats/components/ConnectionStatsTable.js +++ b/react/features/connection-stats/components/ConnectionStatsTable.js @@ -1,119 +1,120 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import { translate } from '../../base/i18n'; +/** + * The type of the React {@code Component} props of + * {@link ConnectionStatsTable}. + */ +type Props = { + + /** + * Statistics related to bandwidth. + * {{ + * download: Number, + * upload: Number + * }} + */ + bandwidth: Object, + + /** + * Statistics related to bitrate. + * {{ + * download: Number, + * upload: Number + * }} + */ + bitrate: Object, + + /** + * The number of bridges (aka media servers) currently used in the + * conference. + */ + bridgeCount: number, + + /** + * A message describing the connection quality. + */ + connectionSummary: string, + + /** + * The end-to-end round-trip-time. + */ + e2eRtt: number, + + /** + * Statistics related to frame rates for each ssrc. + * {{ + * [ ssrc ]: Number + * }} + */ + framerate: Object, + + /** + * Whether or not the statistics are for local video. + */ + isLocalVideo: boolean, + + /** + * Callback to invoke when the show additional stats link is clicked. + */ + onShowMore: Function, + + /** + * Statistics related to packet loss. + * {{ + * download: Number, + * upload: Number + * }} + */ + packetLoss: Object, + + /** + * The region that we think the client is in. + */ + region: string, + + /** + * Statistics related to display resolutions for each ssrc. + * {{ + * [ ssrc ]: { + * height: Number, + * width: Number + * } + * }} + */ + resolution: Object, + + /** + * The region of the media server that we are connected to. + */ + serverRegion: string, + + /** + * Whether or not additional stats about bandwidth and transport should be + * displayed. Will not display even if true for remote participants. + */ + shouldShowMore: boolean, + + /** + * Invoked to obtain translated strings. + */ + t: Function, + + /** + * Statistics related to transports. + */ + transport: Array +}; + /** * React {@code Component} for displaying connection statistics. * * @extends Component */ -class ConnectionStatsTable extends Component { - /** - * {@code ConnectionStatsTable} component's property types. - * - * @static - */ - static propTypes = { - /** - * Statistics related to bandwidth. - * {{ - * download: Number, - * upload: Number - * }} - */ - bandwidth: PropTypes.object, - - /** - * Statistics related to bitrate. - * {{ - * download: Number, - * upload: Number - * }} - */ - bitrate: PropTypes.object, - - /** - * The number of bridges (aka media servers) currently used in the - * conference. - */ - bridgeCount: PropTypes.number, - - /** - * A message describing the connection quality. - */ - connectionSummary: PropTypes.string, - - /** - * The end-to-end round-trip-time. - */ - e2eRtt: PropTypes.number, - - /** - * Statistics related to frame rates for each ssrc. - * {{ - * [ ssrc ]: Number - * }} - */ - framerate: PropTypes.object, - - /** - * Whether or not the statistics are for local video. - */ - isLocalVideo: PropTypes.bool, - - /** - * Callback to invoke when the show additional stats link is clicked. - */ - onShowMore: PropTypes.func, - - /** - * Statistics related to packet loss. - * {{ - * download: Number, - * upload: Number - * }} - */ - packetLoss: PropTypes.object, - - /** - * The region that we think the client is in. - */ - region: PropTypes.string, - - /** - * Statistics related to display resolutions for each ssrc. - * {{ - * [ ssrc ]: { - * height: Number, - * width: Number - * } - * }} - */ - resolution: PropTypes.object, - - /** - * The region of the media server that we are connected to. - */ - serverRegion: PropTypes.string, - - /** - * Whether or not additional stats about bandwidth and transport should - * be displayed. Will not display even if true for remote participants. - */ - shouldShowMore: PropTypes.bool, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func, - - /** - * Statistics related to transports. - */ - transport: PropTypes.array - }; - +class ConnectionStatsTable extends Component { /** * Implements React's {@link Component#render()}. * @@ -574,7 +575,7 @@ class ConnectionStatsTable extends Component { * @private * @returns {ReactElement} */ - _renderTransportTableRow(config) { + _renderTransportTableRow(config: Object) { const { additionalData, data, key, label } = config; return ( diff --git a/react/features/deep-linking/components/DeepLinkingMobilePage.web.js b/react/features/deep-linking/components/DeepLinkingMobilePage.web.js index 00f4e6977..230c0484a 100644 --- a/react/features/deep-linking/components/DeepLinkingMobilePage.web.js +++ b/react/features/deep-linking/components/DeepLinkingMobilePage.web.js @@ -1,6 +1,5 @@ // @flow -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { connect } from 'react-redux'; @@ -34,32 +33,43 @@ const _URLS = { ios: interfaceConfig.MOBILE_DOWNLOAD_LINK_IOS }; +/** + * The type of the React {@code Component} props of + * {@link DeepLinkingMobilePage}. + */ +type Props = { + + /** + * The name of the conference attempting to being joined. + */ + _room: string, + + /** + * The function to translate human-readable text. + */ + t: Function +}; + +/** + * The type of the React {@code Component} state of + * {@link DeepLinkingMobilePage}. + */ +type State = { + + /** + * The URL to link to on the button for opening the mobile app. + */ + joinURL: string +}; + /** * React component representing mobile browser page. * * @class DeepLinkingMobilePage */ -class DeepLinkingMobilePage extends Component<*, *> { - state: Object; - - /** - * DeepLinkingMobilePage component's property types. - * - * @static - */ - static propTypes = { - /** - * The name of the conference attempting to being joined. - */ - _room: PropTypes.string, - - /** - * The function to translate human-readable text. - * - * @public - * @type {Function} - */ - t: PropTypes.func +class DeepLinkingMobilePage extends Component { + state = { + joinURL: '' }; /** @@ -68,7 +78,7 @@ class DeepLinkingMobilePage extends Component<*, *> { * @param {Object} props - The read-only React {@code Component} props with * which the new instance is to be initialized. */ - constructor(props) { + constructor(props: Props) { super(props); // Bind event handlers so they are only bound once per instance. diff --git a/react/features/desktop-picker/components/DesktopPicker.js b/react/features/desktop-picker/components/DesktopPicker.js index 994ea59f0..bbb6e2225 100644 --- a/react/features/desktop-picker/components/DesktopPicker.js +++ b/react/features/desktop-picker/components/DesktopPicker.js @@ -1,7 +1,6 @@ // @flow import Tabs from '@atlaskit/tabs'; -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { connect } from 'react-redux'; @@ -42,41 +41,65 @@ const TAB_LABELS = { const VALID_TYPES = Object.keys(TAB_LABELS); +/** + * The type of the React {@code Component} props of {@link DesktopPicker}. + */ +type Props = { + + /** + * An array with desktop sharing sources to be displayed. + */ + desktopSharingSources: Array, + + /** + * Used to request DesktopCapturerSources. + */ + dispatch: Dispatch<*>, + + /** + * The callback to be invoked when the component is closed or when a + * DesktopCapturerSource has been chosen. + */ + onSourceChoose: Function, + + /** + * Used to obtain translations. + */ + t: Function +}; + +/** + * The type of the React {@code Component} state of {@link DesktopPicker}. + */ +type State = { + + /** + * The currently higlighted DesktopCapturerSource. + */ + selectedSource: Object, + + /** + * The desktop source type currently being displayed. + */ + selectedTab: number, + + /** + * An object containing all the DesktopCapturerSources. + */ + sources: Object, + + /** + * The desktop source types to fetch previews for. + */ + types: Array +}; + /** * React component for DesktopPicker. * * @extends Component */ -class DesktopPicker extends Component<*, *> { - /** - * DesktopPicker component's property types. - * - * @static - */ - static propTypes = { - - /** - * An array with desktop sharing sources to be displayed. - */ - desktopSharingSources: PropTypes.arrayOf(PropTypes.string), - - /** - * Used to request DesktopCapturerSources. - */ - dispatch: PropTypes.func, - - /** - * The callback to be invoked when the component is closed or when - * a DesktopCapturerSource has been chosen. - */ - onSourceChoose: PropTypes.func, - - /** - * Used to obtain translations. - */ - t: PropTypes.func - }; - +class DesktopPicker extends Component { _poller = null; state = { @@ -99,7 +122,7 @@ class DesktopPicker extends Component<*, *> { * @param {Object} props - The read-only properties with which the new * instance is to be initialized. */ - constructor(props) { + constructor(props: Props) { super(props); // Bind event handlers so they are only bound once per instance. @@ -132,7 +155,7 @@ class DesktopPicker extends Component<*, *> { * instance will receive. * @returns {void} */ - componentWillReceiveProps(nextProps) { + componentWillReceiveProps(nextProps: Props) { const { desktopSharingSources } = nextProps; /** diff --git a/react/features/desktop-picker/components/DesktopPickerPane.js b/react/features/desktop-picker/components/DesktopPickerPane.js index 89d3a7829..1efd50257 100644 --- a/react/features/desktop-picker/components/DesktopPickerPane.js +++ b/react/features/desktop-picker/components/DesktopPickerPane.js @@ -1,48 +1,47 @@ +/* @flow */ + import Spinner from '@atlaskit/spinner'; -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import DesktopSourcePreview from './DesktopSourcePreview'; +/** + * The type of the React {@code Component} props of {@link DesktopPickerPane}. + */ +type Props = { + + /** + * The handler to be invoked when a DesktopSourcePreview is clicked. + */ + onClick: Function, + + /** + * The handler to be invoked when a DesktopSourcePreview is double clicked. + */ + onDoubleClick: Function, + + /** + * The id of the DesktopCapturerSource that is currently selected. + */ + selectedSourceId: string, + + /** + * An array of DesktopCapturerSources. + */ + sources: Array, + + /** + * The source type of the DesktopCapturerSources to display. + */ + type: string +}; + /** * React component for showing a grid of DesktopSourcePreviews. * * @extends Component */ -class DesktopPickerPane extends Component { - /** - * DesktopPickerPane component's property types. - * - * @static - */ - static propTypes = { - /** - * The handler to be invoked when a DesktopSourcePreview is clicked. - */ - onClick: PropTypes.func, - - /** - * The handler to be invoked when a DesktopSourcePreview is double - * clicked. - */ - onDoubleClick: PropTypes.func, - - /** - * The id of the DesktopCapturerSource that is currently selected. - */ - selectedSourceId: PropTypes.string, - - /** - * An array of DesktopCapturerSources. - */ - sources: PropTypes.array, - - /** - * The source type of the DesktopCapturerSources to display. - */ - type: PropTypes.string - }; - +class DesktopPickerPane extends Component { /** * Implements React's {@link Component#render()}. * diff --git a/react/features/desktop-picker/components/DesktopSourcePreview.js b/react/features/desktop-picker/components/DesktopSourcePreview.js index 63449390e..cfc3890f8 100644 --- a/react/features/desktop-picker/components/DesktopSourcePreview.js +++ b/react/features/desktop-picker/components/DesktopSourcePreview.js @@ -1,55 +1,56 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; +/** + * The type of the React {@code Component} props of + * {@link DesktopSourcePreview}. + */ +type Props = { + + /** + * The callback to invoke when the component is clicked. The id of the + * clicked on DesktopCapturerSource will be passed in. + */ + onClick: Function, + + /** + * The callback to invoke when the component is double clicked. The id of + * the DesktopCapturerSource will be passed in. + */ + onDoubleClick: Function, + + /** + * The indicator which determines whether this DesktopSourcePreview is + * selected. If true, the 'is-selected' CSS class will be added to the root + * of Component. + */ + selected: boolean, + + /** + * The DesktopCapturerSource to display. + */ + source: Object, + + /** + * The source type of the DesktopCapturerSources to display. + */ + type: string +}; + /** * React component for displaying a preview of a DesktopCapturerSource. * * @extends Component */ -class DesktopSourcePreview extends Component { - /** - * DesktopSourcePreview component's property types. - * - * @static - */ - static propTypes = { - /** - * The callback to invoke when the component is clicked. The id of - * the DesktopCapturerSource will be passed in. - */ - onClick: PropTypes.func, - - /** - * The callback to invoke when the component is double clicked. The id - * of the DesktopCapturerSource will be passed in. - */ - onDoubleClick: PropTypes.func, - - /** - * The indicator which determines whether this DesktopSourcePreview is - * selected. If true, the 'is-selected' CSS class will be added to the - * Component. - */ - selected: PropTypes.bool, - - /** - * The DesktopCapturerSource to display. - */ - source: PropTypes.object, - - /** - * The source type of the DesktopCapturerSources to display. - */ - type: PropTypes.string - }; - +class DesktopSourcePreview extends Component { /** * Initializes a new DesktopSourcePreview instance. * * @param {Object} props - The read-only properties with which the new * instance is to be initialized. */ - constructor(props) { + constructor(props: Props) { super(props); this._onClick = this._onClick.bind(this); @@ -83,6 +84,8 @@ class DesktopSourcePreview extends Component { ); } + _onClick: () => void; + /** * Invokes the passed in onClick callback. * @@ -94,6 +97,8 @@ class DesktopSourcePreview extends Component { this.props.onClick(source.id, type); } + _onDoubleClick: () => void; + /** * Invokes the passed in onDoubleClick callback. * diff --git a/react/features/device-selection/components/AudioInputPreview.js b/react/features/device-selection/components/AudioInputPreview.js index 132225c0e..987d38995 100644 --- a/react/features/device-selection/components/AudioInputPreview.js +++ b/react/features/device-selection/components/AudioInputPreview.js @@ -1,31 +1,42 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import { JitsiTrackEvents } from '../../base/lib-jitsi-meet'; +/** + * The type of the React {@code Component} props of {@link AudioInputPreview}. + */ +type Props = { + + /** + * The JitsiLocalTrack to show an audio level meter for. + */ + track: Object +}; + +/** + * The type of the React {@code Component} props of {@link AudioInputPreview}. + */ +type State = { + + /** + * The current audio input level being received, from 0 to 1. + */ + audioLevel: number +}; + /** * React component for displaying a audio level meter for a JitsiLocalTrack. */ -class AudioInputPreview extends Component { - /** - * AudioInputPreview component's property types. - * - * @static - */ - static propTypes = { - /* - * The JitsiLocalTrack to show an audio level meter for. - */ - track: PropTypes.object - }; - +class AudioInputPreview extends Component { /** * Initializes a new AudioInputPreview instance. * * @param {Object} props - The read-only React Component props with which * the new instance is to be initialized. */ - constructor(props) { + constructor(props: Props) { super(props); this.state = { @@ -52,7 +63,7 @@ class AudioInputPreview extends Component { * @inheritdoc * @returns {void} */ - componentWillReceiveProps(nextProps) { + componentWillReceiveProps(nextProps: Props) { if (nextProps.track !== this.props.track) { this._listenForAudioUpdates(nextProps.track); this._updateAudioLevel(0); @@ -117,6 +128,8 @@ class AudioInputPreview extends Component { this._updateAudioLevel); } + _updateAudioLevel: (number) => void; + /** * Updates the internal state of the last know audio level. The level should * be between 0 and 1, as the level will be used as a percentage out of 1. diff --git a/react/features/device-selection/components/AudioOutputPreview.js b/react/features/device-selection/components/AudioOutputPreview.js index 469d2dc27..b744477c2 100644 --- a/react/features/device-selection/components/AudioOutputPreview.js +++ b/react/features/device-selection/components/AudioOutputPreview.js @@ -1,4 +1,5 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import { translate } from '../../base/i18n'; @@ -6,28 +7,29 @@ import { Audio } from '../../base/media'; const TEST_SOUND_PATH = 'sounds/ring.wav'; +/** + * The type of the React {@code Component} props of {@link AudioOutputPreview}. + */ +type Props = { + + /** + * The device id of the audio output device to use. + */ + deviceId: string, + + /** + * Invoked to obtain translated strings. + */ + t: Function +}; + /** * React component for playing a test sound through a specified audio device. * * @extends Component */ -class AudioOutputPreview extends Component { - /** - * AudioOutputPreview component's property types. - * - * @static - */ - static propTypes = { - /** - * The device id of the audio output device to use. - */ - deviceId: PropTypes.string, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func - }; +class AudioOutputPreview extends Component { + _audioElement: ?Object; /** * Initializes a new AudioOutputPreview instance. @@ -35,7 +37,7 @@ class AudioOutputPreview extends Component { * @param {Object} props - The read-only React Component props with which * the new instance is to be initialized. */ - constructor(props) { + constructor(props: Props) { super(props); this._audioElement = null; @@ -85,6 +87,8 @@ class AudioOutputPreview extends Component { ); } + _onClick: () => void; + /** * Plays a test sound. * @@ -96,6 +100,8 @@ class AudioOutputPreview extends Component { && this._audioElement.play(); } + _setAudioElement: (Object) => void; + /** * Sets the instance variable for the component's audio element so it can be * accessed directly. @@ -104,7 +110,7 @@ class AudioOutputPreview extends Component { * @private * @returns {void} */ - _setAudioElement(element) { + _setAudioElement(element: Object) { this._audioElement = element; } diff --git a/react/features/device-selection/components/DeviceSelector.web.js b/react/features/device-selection/components/DeviceSelector.web.js index 613f6952b..68db750a3 100644 --- a/react/features/device-selection/components/DeviceSelector.web.js +++ b/react/features/device-selection/components/DeviceSelector.web.js @@ -1,64 +1,64 @@ +/* @flow */ + import AKDropdownMenu from '@atlaskit/dropdown-menu'; import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down'; -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { translate } from '../../base/i18n'; +/** + * The type of the React {@code Component} props of {@link DeviceSelector}. + */ +type Props = { + + /** + * MediaDeviceInfos used for display in the select element. + */ + devices: Array, + + /** + * If false, will return a selector with no selection options. + */ + hasPermission: boolean, + + /** + * CSS class for the icon to the left of the dropdown trigger. + */ + icon: string, + + /** + * If true, will render the selector disabled with a default selection. + */ + isDisabled: boolean, + + /** + * The translation key to display as a menu label. + */ + label: string, + + /** + * The callback to invoke when a selection is made. + */ + onSelect: Function, + + /** + * The default device to display as selected. + */ + selectedDeviceId: string, + + /** + * Invoked to obtain translated strings. + */ + t: Function +}; + /** * React component for selecting a device from a select element. Wraps * AKDropdownMenu with device selection specific logic. * * @extends Component */ -class DeviceSelector extends Component { - /** - * DeviceSelector component's property types. - * - * @static - */ - static propTypes = { - /** - * MediaDeviceInfos used for display in the select element. - */ - devices: PropTypes.array, - - /** - * If false, will return a selector with no selection options. - */ - hasPermission: PropTypes.bool, - - /** - * CSS class for the icon to the left of the dropdown trigger. - */ - icon: PropTypes.string, - - /** - * If true, will render the selector disabled with a default selection. - */ - isDisabled: PropTypes.bool, - - /** - * The translation key to display as a menu label. - */ - label: PropTypes.string, - - /** - * The callback to invoke when a selection is made. - */ - onSelect: PropTypes.func, - - /** - * The default device to display as selected. - */ - selectedDeviceId: PropTypes.string, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func - }; - +class DeviceSelector extends Component { /** * Initializes a new DeviceSelector instance. * @@ -178,6 +178,8 @@ class DeviceSelector extends Component { ); } + _onSelect: (Object) => void; + /** * Invokes the passed in callback to notify of selection changes. * diff --git a/react/features/device-selection/components/VideoInputPreview.js b/react/features/device-selection/components/VideoInputPreview.js index 4a0bc43d4..984758af1 100644 --- a/react/features/device-selection/components/VideoInputPreview.js +++ b/react/features/device-selection/components/VideoInputPreview.js @@ -1,35 +1,35 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import { Video } from '../../base/media'; const VIDEO_ERROR_CLASS = 'video-preview-has-error'; +/** + * The type of the React {@code Component} props of {@link VideoInputPreview}. + */ +type Props = { + + /** + * An error message to display instead of a preview. Displaying an error + * will take priority over displaying a video preview. + */ + error: string, + + /** + * The JitsiLocalTrack to display. + */ + track: Object +}; + /** * React component for displaying video. This component defers to lib-jitsi-meet * logic for rendering the video. * * @extends Component */ -class VideoInputPreview extends Component { - /** - * VideoInputPreview component's property types. - * - * @static - */ - static propTypes = { - /** - * An error message to display instead of a preview. Displaying an error - * will take priority over displaying a video preview. - */ - error: PropTypes.string, - - /** - * The JitsiLocalTrack to display. - */ - track: PropTypes.object - }; - +class VideoInputPreview extends Component { /** * Implements React's {@link Component#render()}. * diff --git a/react/features/display-name/components/DisplayName.web.js b/react/features/display-name/components/DisplayName.web.js index 81b0a820d..1afb2bfd0 100644 --- a/react/features/display-name/components/DisplayName.web.js +++ b/react/features/display-name/components/DisplayName.web.js @@ -1,4 +1,5 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import { connect } from 'react-redux'; @@ -7,54 +8,71 @@ import { appendSuffix } from '../functions'; import { translate } from '../../base/i18n'; import { participantDisplayNameChanged } from '../../base/participants'; +/** + * The type of the React {@code Component} props of {@link DisplayName}. + */ +type Props = { + + /** + * Whether or not the display name should be editable on click. + */ + allowEditing: boolean, + + /** + * Invoked to update the participant's display name. + */ + dispatch: Dispatch<*>, + + /** + * The participant's current display name. + */ + displayName: string, + + /** + * A string to append to the displayName, if provided. + */ + displayNameSuffix: string, + + /** + * The ID attribute to add to the component. Useful for global querying for + * the component by legacy components and torture tests. + */ + elementID: string, + + /** + * The ID of the participant whose name is being displayed. + */ + participantID: string, + + /** + * Invoked to obtain translated strings. + */ + t: Function +}; + +/** + * The type of the React {@code Component} state of {@link DisplayName}. + */ +type State = { + + /** + * The current value of the display name in the edit field. + */ + editDisplayNameValue: string, + + /** + * Whether or not the component should be displaying an editable input. + */ + isEditing: boolean +}; + /** * React {@code Component} for displaying and editing a participant's name. * * @extends Component */ -class DisplayName extends Component { - /** - * {@code DisplayName}'s property types. - * - * @static - */ - static propTypes = { - /** - * Whether or not the display name should be editable on click. - */ - allowEditing: PropTypes.bool, - - /** - * Invoked to update the participant's display name. - */ - dispatch: PropTypes.func, - - /** - * The participant's current display name. - */ - displayName: PropTypes.string, - - /** - * A string to append to the displayName, if provided. - */ - 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: PropTypes.string, - - /** - * The ID of the participant whose name is being displayed. - */ - participantID: PropTypes.string, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func - }; +class DisplayName extends Component { + _nameInput: ?HTMLInputElement; /** * Initializes a new {@code DisplayName} instance. @@ -62,23 +80,11 @@ class DisplayName extends Component { * @param {Object} props - The read-only properties with which the new * instance is to be initialized. */ - constructor(props) { + constructor(props: Props) { super(props); this.state = { - /** - * The current value of the display name in the edit field. - * - * @type {string} - */ editDisplayNameValue: '', - - /** - * Whether or not the component should be displaying an editable - * input. - * - * @type {boolean} - */ isEditing: false }; @@ -109,7 +115,9 @@ class DisplayName extends Component { * @returns {void} */ componentDidUpdate(previousProps, previousState) { - if (!previousState.isEditing && this.state.isEditing) { + if (!previousState.isEditing + && this.state.isEditing + && this._nameInput) { this._nameInput.select(); } } @@ -156,6 +164,8 @@ class DisplayName extends Component { ); } + _onChange: () => void; + /** * Updates the internal state of the display name entered into the edit * field. @@ -170,6 +180,8 @@ class DisplayName extends Component { }); } + _onKeyDown: () => void; + /** * Submits the editted display name update if the enter key is pressed. * @@ -183,6 +195,8 @@ class DisplayName extends Component { } } + _onStartEditing: () => void; + /** * Updates the component to display an editable input field and sets the * initial value to the current display name. @@ -199,6 +213,8 @@ class DisplayName extends Component { } } + _onSubmit: () => void; + /** * Dispatches an action to update the display name if any change has * occurred after editing. Clears any temporary state used to keep track @@ -223,6 +239,8 @@ class DisplayName extends Component { this._nameInput = null; } + _setNameInputRef: (HTMLInputElement | null) => void; + /** * Sets the internal reference to the HTML element backing the React * {@code Component} input with id {@code editDisplayName}. diff --git a/react/features/display-name/components/DisplayNamePrompt.web.js b/react/features/display-name/components/DisplayNamePrompt.web.js index ea51b7c9d..b0b11cfa8 100644 --- a/react/features/display-name/components/DisplayNamePrompt.web.js +++ b/react/features/display-name/components/DisplayNamePrompt.web.js @@ -1,4 +1,5 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import { connect } from 'react-redux'; import { FieldTextStateless as TextField } from '@atlaskit/field-text'; @@ -10,51 +11,56 @@ import { participantDisplayNameChanged } from '../../base/participants'; +/** + * The type of the React {@code Component} props of {@link DisplayNamePrompt}. + */ +type Props = { + + /** + * The current ID for the local participant. Used for setting the display + * name on the associated participant. + */ + _localParticipantID: string, + + /** + * Invoked to update the local participant's display name. + */ + dispatch: Dispatch<*>, + + /** + * Invoked to obtain translated strings. + */ + t: Function +}; + +/** + * The type of the React {@code Component} props of {@link DisplayNamePrompt}. + */ +type State = { + + /** + * The name to show in the display name text field. + */ + displayName: string +}; + /** * Implements a React {@code Component} for displaying a dialog with an field * for setting the local participant's display name. * * @extends Component */ -class DisplayNamePrompt extends Component { - /** - * {@code DisplayNamePrompt} component's property types. - * - * @static - */ - static propTypes = { - /** - * The current ID for the local participant. Used for setting the - * display name on the associated participant. - */ - _localParticipantID: PropTypes.string, - - /** - * Invoked to update the local participant's display name. - */ - dispatch: PropTypes.func, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func - }; - +class DisplayNamePrompt extends Component { /** * Initializes a new {@code DisplayNamePrompt} instance. * * @param {Object} props - The read-only properties with which the new * instance is to be initialized. */ - constructor(props) { + constructor(props: Props) { super(props); this.state = { - /** - * The name to show in the display name text field. - * - * @type {string} - */ displayName: '' }; @@ -88,6 +94,8 @@ class DisplayNamePrompt extends Component { ); } + _onDisplayNameChange: (Object) => void; + /** * Updates the entered display name. * @@ -102,12 +110,14 @@ class DisplayNamePrompt extends Component { }); } + _onSubmit: () => boolean; + /** * Dispatches an action to update the local participant's display name. A * name must be entered for the action to dispatch. * * @private - * @returns {void} + * @returns {boolean} */ _onSubmit() { const { displayName } = this.state; diff --git a/react/features/feedback/components/FeedbackDialog.web.js b/react/features/feedback/components/FeedbackDialog.web.js index e8d413301..6cca2ff52 100644 --- a/react/features/feedback/components/FeedbackDialog.web.js +++ b/react/features/feedback/components/FeedbackDialog.web.js @@ -1,9 +1,8 @@ -/* global interfaceConfig */ +/* @flow */ import { FieldTextAreaStateless } from '@atlaskit/field-text-area'; import StarIcon from '@atlaskit/icon/glyph/star'; import StarFilledIcon from '@atlaskit/icon/glyph/star-filled'; -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { connect } from 'react-redux'; @@ -16,6 +15,8 @@ import { translate } from '../../base/i18n'; import { cancelFeedback, submitFeedback } from '../actions'; +declare var interfaceConfig: Object; + const scoreAnimationClass = interfaceConfig.ENABLE_FEEDBACK_ANIMATION ? 'shake-rotate' : ''; @@ -33,6 +34,70 @@ const SCORES = [ 'feedback.veryGood' ]; +/** + * The type of the React {@code Component} props of {@link FeedbackDialog}. + */ +type Props = { + + /** + * The cached feedback message, if any, that was set when closing a previous + * instance of {@code FeedbackDialog}. + */ + _message: string, + + /** + * The cached feedback score, if any, that was set when closing a previous + * instance of {@code FeedbackDialog}. + */ + _score: number, + + /** + * The JitsiConference that is being rated. The conference is passed in + * because feedback can occur after a conference has been left, so + * references to it may no longer exist in redux. + */ + conference: Object, + + /** + * Invoked to signal feedback submission or canceling. + */ + dispatch: Dispatch<*>, + + /** + * Callback invoked when {@code FeedbackDialog} is unmounted. + */ + onClose: Function, + + /** + * Invoked to obtain translated strings. + */ + t: Function +}; + +/** + * The type of the React {@code Component} state of {@link FeedbackDialog}. + */ +type State = { + + /** + * The currently entered feedback message. + */ + message: string, + + /** + * The score selection index which is currently being hovered. The value -1 + * is used as a sentinel value to match store behavior of using -1 for no + * score having been selected. + */ + mousedOverScore: number, + + /** + * The currently selected score selection index. The score will not be 0 + * indexed so subtract one to map with SCORES. + */ + score: number +}; + /** * A React {@code Component} for displaying a dialog to rate the current * conference quality, write a message describing the experience, and submit @@ -40,49 +105,13 @@ const SCORES = [ * * @extends Component */ -class FeedbackDialog extends Component { +class FeedbackDialog extends Component { /** - * {@code FeedbackDialog} component's property types. - * - * @static + * An array of objects with click handlers for each of the scores listed in + * the constant SCORES. This pattern is used for binding event handlers only + * once for each score selection icon. */ - static propTypes = { - /** - * The cached feedback message, if any, that was set when closing a - * previous instance of {@code FeedbackDialog}. - */ - _message: PropTypes.string, - - /** - * The cached feedback score, if any, that was set when closing a - * previous instance of {@code FeedbackDialog}. - */ - _score: PropTypes.number, - - /** - * The JitsiConference that is being rated. The conference is passed in - * because feedback can occur after a conference has been left, so - * references to it may no longer exist in redux. - * - * @type {JitsiConference} - */ - conference: PropTypes.object, - - /** - * Invoked to signal feedback submission or canceling. - */ - dispatch: PropTypes.func, - - /** - * Callback invoked when {@code FeedbackDialog} is unmounted. - */ - onClose: PropTypes.func, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func - }; + _scoreClickConfigurations: Array; /** * Initializes a new {@code FeedbackDialog} instance. @@ -90,7 +119,7 @@ class FeedbackDialog extends Component { * @param {Object} props - The read-only React {@code Component} props with * which the new instance is to be initialized. */ - constructor(props) { + constructor(props: Props) { super(props); const { _message, _score } = this.props; @@ -121,13 +150,6 @@ class FeedbackDialog extends Component { score: _score > -1 ? _score - 1 : _score }; - /** - * An array of objects with click handlers for each of the scores listed - * in SCORES. This pattern is used for binding event handlers only once - * for each score selection icon. - * - * @type {Object[]} - */ this._scoreClickConfigurations = SCORES.map((textKey, index) => { return { _onClick: () => this._onScoreSelect(index), @@ -234,6 +256,8 @@ class FeedbackDialog extends Component { ); } + _onCancel: () => boolean; + /** * Dispatches an action notifying feedback was not submitted. The submitted * score will have one added as the rest of the app does not expect 0 @@ -251,6 +275,8 @@ class FeedbackDialog extends Component { return true; } + _onMessageChange: (Object) => void; + /** * Updates the known entered feedback message. * @@ -274,6 +300,8 @@ class FeedbackDialog extends Component { this.setState({ score }); } + _onScoreContainerMouseLeave: () => void; + /** * Sets the currently hovered score to null to indicate no hover is * occurring. @@ -297,6 +325,8 @@ class FeedbackDialog extends Component { this.setState({ mousedOverScore }); } + _onSubmit: () => void; + /** * Dispatches the entered feedback for submission. The submitted score will * have one added as the rest of the app does not expect 0 indexing. diff --git a/react/features/filmstrip/components/web/AudioMutedIndicator.js b/react/features/filmstrip/components/web/AudioMutedIndicator.js index e5c009970..1b635fa60 100644 --- a/react/features/filmstrip/components/web/AudioMutedIndicator.js +++ b/react/features/filmstrip/components/web/AudioMutedIndicator.js @@ -1,26 +1,26 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import BaseIndicator from './BaseIndicator'; +/** + * The type of the React {@code Component} props of {@link AudioMutedIndicator}. + */ +type Props = { + + /** + * From which side of the indicator the tooltip should appear from. + */ + tooltipPosition: string +}; + /** * React {@code Component} for showing an audio muted icon with a tooltip. * * @extends Component */ -class AudioMutedIndicator extends Component { - /** - * {@code AudioMutedIndicator} component's property types. - * - * @static - */ - static propTypes = { - /** - * From which side of the indicator the tooltip should appear from. - */ - tooltipPosition: PropTypes.string - }; - +class AudioMutedIndicator extends Component { /** * Implements React's {@link Component#render()}. * diff --git a/react/features/filmstrip/components/web/BaseIndicator.js b/react/features/filmstrip/components/web/BaseIndicator.js index 30707b34d..fd9220b40 100644 --- a/react/features/filmstrip/components/web/BaseIndicator.js +++ b/react/features/filmstrip/components/web/BaseIndicator.js @@ -1,15 +1,59 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import Tooltip from '@atlaskit/tooltip'; import { translate } from '../../../base/i18n'; +/** + * The type of the React {@code Component} props of {@link BaseIndicator}. + */ +type Props = { + + /** + * Additional CSS class names to set on the icon container. + */ + className: string, + + /** + * The CSS classnames to set on the icon element of the component. + */ + iconClassName: string, + + /** + * The font size for the icon. + */ + iconSize: string, + + /** + * The ID attribue to set on the root element of the component. + */ + id: string, + + /** + * Invoked to obtain translated strings. + */ + t: Function, + + /** + * The translation key to use for displaying a tooltip when hovering over + * the component. + */ + tooltipKey: string, + + /** + * From which side of the indicator the tooltip should appear from, + * defaulting to "top". + */ + tooltipPosition: string +}; + /** * React {@code Component} for showing an icon with a tooltip. * * @extends Component */ -class BaseIndicator extends Component { +class BaseIndicator extends Component { /** * Default values for {@code BaseIndicator} component's properties. * @@ -23,50 +67,6 @@ class BaseIndicator extends Component { tooltipPosition: 'top' }; - /** - * {@code BaseIndicator} component's property types. - * - * @static - */ - static propTypes = { - /** - * Additional CSS class names to set on the icon container. - */ - className: PropTypes.string, - - /** - * The CSS classnames to set on the icon element of the component. - */ - iconClassName: PropTypes.string, - - /** - * The font size for the icon. - */ - iconSize: PropTypes.string, - - /** - * The ID attribue to set on the root element of the component. - */ - id: PropTypes.string, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func, - - /** - * The translation key to use for displaying a tooltip when hovering - * over the component. - */ - tooltipKey: PropTypes.string, - - /** - * From which side of the indicator the tooltip should appear from. - * Defaults to "top". - */ - tooltipPosition: PropTypes.string - }; - /** * Implements React's {@link Component#render()}. * diff --git a/react/features/filmstrip/components/web/DominantSpeakerIndicator.js b/react/features/filmstrip/components/web/DominantSpeakerIndicator.js index fa89e7b74..7aed2c5a7 100644 --- a/react/features/filmstrip/components/web/DominantSpeakerIndicator.js +++ b/react/features/filmstrip/components/web/DominantSpeakerIndicator.js @@ -1,34 +1,33 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import BaseIndicator from './BaseIndicator'; +/** + * The type of the React {@code Component} props of + * {@link DominantSpeakerIndicator}. + */ +type Props = { + + /** + * The font-size for the icon. + */ + iconSize: number, + + /** + * From which side of the indicator the tooltip should appear from. + */ + tooltipPosition: string +}; + /** * Thumbnail badge showing that the participant is the dominant speaker in * the conference. * * @extends Component */ -class DominantSpeakerIndicator extends Component { - /** - * {@code DominantSpeakerIndicator} component's property types. - * - * @static - */ - static propTypes = { - /** - * The font-size for the icon. - * - * @type {number} - */ - iconSize: PropTypes.number, - - /** - * From which side of the indicator the tooltip should appear from. - */ - tooltipPosition: PropTypes.string - }; - +class DominantSpeakerIndicator extends Component { /** * Implements React's {@link Component#render()}. * diff --git a/react/features/filmstrip/components/web/ModeratorIndicator.js b/react/features/filmstrip/components/web/ModeratorIndicator.js index 19cc66f5d..5e3fcf85b 100644 --- a/react/features/filmstrip/components/web/ModeratorIndicator.js +++ b/react/features/filmstrip/components/web/ModeratorIndicator.js @@ -1,26 +1,26 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import BaseIndicator from './BaseIndicator'; +/** + * The type of the React {@code Component} props of {@link ModeratorIndicator}. + */ +type Props = { + + /** + * From which side of the indicator the tooltip should appear from. + */ + tooltipPosition: string +}; + /** * React {@code Component} for showing a moderator icon with a tooltip. * * @extends Component */ -class ModeratorIndicator extends Component { - /** - * {@code ModeratorIndicator} component's property types. - * - * @static - */ - static propTypes = { - /** - * From which side of the indicator the tooltip should appear from. - */ - tooltipPosition: PropTypes.string - }; - +class ModeratorIndicator extends Component { /** * Implements React's {@link Component#render()}. * diff --git a/react/features/filmstrip/components/web/RaisedHandIndicator.js b/react/features/filmstrip/components/web/RaisedHandIndicator.js index e7a86e905..4e2bd5fac 100644 --- a/react/features/filmstrip/components/web/RaisedHandIndicator.js +++ b/react/features/filmstrip/components/web/RaisedHandIndicator.js @@ -1,33 +1,31 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import BaseIndicator from './BaseIndicator'; +/** + * The type of the React {@code Component} props of {@link RaisedHandIndicator}. + */ +type Props = { + + /** + * The font-size for the icon. + */ + iconSize: number, + + /** + * From which side of the indicator the tooltip should appear from. + */ + tooltipPosition: string +}; + /** * Thumbnail badge showing that the participant would like to speak. * * @extends Component */ -class RaisedHandIndicator extends Component { - /** - * {@code RaisedHandIndicator} component's property types. - * - * @static - */ - static propTypes = { - /** - * The font-size for the icon. - * - * @type {number} - */ - iconSize: PropTypes.number, - - /** - * From which side of the indicator the tooltip should appear from. - */ - tooltipPosition: PropTypes.string - }; - +class RaisedHandIndicator extends Component { /** * Implements React's {@link Component#render()}. * diff --git a/react/features/filmstrip/components/web/VideoMutedIndicator.js b/react/features/filmstrip/components/web/VideoMutedIndicator.js index 975b0edbf..f61b6db8f 100644 --- a/react/features/filmstrip/components/web/VideoMutedIndicator.js +++ b/react/features/filmstrip/components/web/VideoMutedIndicator.js @@ -1,26 +1,26 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import BaseIndicator from './BaseIndicator'; +/** + * The type of the React {@code Component} props of {@link VideoMutedIndicator}. + */ +type Props = { + + /** + * From which side of the indicator the tooltip should appear from. + */ + tooltipPosition: string +}; + /** * React {@code Component} for showing a video muted icon with a tooltip. * * @extends Component */ -class VideoMutedIndicator extends Component { - /** - * {@code VideoMutedIndicator} component's property types. - * - * @static - */ - static propTypes = { - /** - * From which side of the indicator the tooltip should appear from. - */ - tooltipPosition: PropTypes.string - }; - +class VideoMutedIndicator extends Component { /** * Implements React's {@link Component#render()}. * diff --git a/react/features/invite/components/AddPeopleDialog.web.js b/react/features/invite/components/AddPeopleDialog.web.js index 697cfde28..b6e506121 100644 --- a/react/features/invite/components/AddPeopleDialog.web.js +++ b/react/features/invite/components/AddPeopleDialog.web.js @@ -2,7 +2,6 @@ import Avatar from '@atlaskit/avatar'; import InlineMessage from '@atlaskit/inline-message'; -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { connect } from 'react-redux'; @@ -19,88 +18,96 @@ const logger = require('jitsi-meet-logger').getLogger(__filename); declare var interfaceConfig: Object; +/** + * The type of the React {@code Component} props of {@link AddPeopleDialog}. + */ +type Props = { + + /** + * The {@link JitsiMeetConference} which will be used to invite "room" + * participants through the SIP Jibri (Video SIP gateway). + */ + _conference: Object, + + /** + * The URL for validating if a phone number can be called. + */ + _dialOutAuthUrl: string, + + /** + * Whether to show a footer text after the search results as a last element. + */ + _footerTextEnabled: boolean, + + /** + * The JWT token. + */ + _jwt: string, + + /** + * The query types used when searching people. + */ + _peopleSearchQueryTypes: Array, + + /** + * The URL pointing to the service allowing for people search. + */ + _peopleSearchUrl: string, + + /** + * Whether or not to show Add People functionality. + */ + addPeopleEnabled: boolean, + + /** + * Whether or not to show Dial Out functionality. + */ + dialOutEnabled: boolean, + + /** + * The redux {@code dispatch} function. + */ + dispatch: Dispatch<*>, + + /** + * Invoked to obtain translated strings. + */ + t: Function, +}; + +/** + * The type of the React {@code Component} state of {@link AddPeopleDialog}. + */ +type State = { + + /** + * Indicating that an error occurred when adding people to the call. + */ + addToCallError: boolean, + + /** + * Indicating that we're currently adding the new people to the + * call. + */ + addToCallInProgress: boolean, + + /** + * The list of invite items. + */ + inviteItems: Array +}; + /** * The dialog that allows to invite people to the call. */ -class AddPeopleDialog extends Component<*, *> { - /** - * {@code AddPeopleDialog}'s property types. - * - * @static - */ - static propTypes = { - /** - * The {@link JitsiMeetConference} which will be used to invite "room" - * participants through the SIP Jibri (Video SIP gateway). - */ - _conference: PropTypes.object, - - /** - * The URL for validating if a phone number can be called. - */ - _dialOutAuthUrl: PropTypes.string, - - /** - * Whether to show a footer text after the search results - * as a last element. - */ - _footerTextEnabled: PropTypes.bool, - - /** - * The JWT token. - */ - _jwt: PropTypes.string, - - /** - * The query types used when searching people. - */ - _peopleSearchQueryTypes: PropTypes.arrayOf(PropTypes.string), - - /** - * The URL pointing to the service allowing for people search. - */ - _peopleSearchUrl: PropTypes.string, - - /** - * Whether or not to show Add People functionality. - */ - addPeopleEnabled: PropTypes.bool, - - /** - * Whether or not to show Dial Out functionality. - */ - dialOutEnabled: PropTypes.bool, - - /** - * The redux {@code dispatch} function. - */ - dispatch: PropTypes.func, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func - }; - +class AddPeopleDialog extends Component { _multiselect = null; _resourceClient: Object; state = { - /** - * Indicating that an error occurred when adding people to the call. - */ addToCallError: false, - - /** - * Indicating that we're currently adding the new people to the - * call. - */ addToCallInProgress: false, - - /** - * The list of invite items. - */ inviteItems: [] }; @@ -110,7 +117,7 @@ class AddPeopleDialog extends Component<*, *> { * @param {Object} props - The read-only properties with which the new * instance is to be initialized. */ - constructor(props) { + constructor(props: Props) { super(props); // Bind event handlers so they are only bound once per instance. @@ -142,10 +149,11 @@ class AddPeopleDialog extends Component<*, *> { /** * React Component method that executes once component is updated. * + * @param {Object} prevProps - The state object before the update. * @param {Object} prevState - The state object before the update. * @returns {void} */ - componentDidUpdate(prevState) { + componentDidUpdate(prevProps, prevState) { /** * Clears selected items from the multi select component on successful * invite. diff --git a/react/features/invite/components/dial-in-info-page/NoRoomError.web.js b/react/features/invite/components/dial-in-info-page/NoRoomError.web.js index 10fb9429a..e468c4567 100644 --- a/react/features/invite/components/dial-in-info-page/NoRoomError.web.js +++ b/react/features/invite/components/dial-in-info-page/NoRoomError.web.js @@ -1,32 +1,32 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import { translate } from '../../../base/i18n'; +/** + * The type of the React {@code Component} props of {@link NoRoomError}. + */ +type Props = { + + /** + * Additional CSS classnames to append to the root of the component. + */ + className: string, + + /** + * Invoked to obtain translated strings. + */ + t: Function +}; + /** * Displays an error message stating no room name was specified to fetch dial-in * numbers for. * * @extends Component */ -class NoRoomError extends Component { - /** - * {@code NoRoomError} component's property types. - * - * @static - */ - static propTypes = { - /** - * Additional CSS classnames to append to the root of the component. - */ - className: PropTypes.string, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func - }; - +class NoRoomError extends Component { /** * Implements React's {@link Component#render()}. * diff --git a/react/features/invite/components/dial-in-summary/ConferenceID.web.js b/react/features/invite/components/dial-in-summary/ConferenceID.web.js index b92170144..980e6cb7c 100644 --- a/react/features/invite/components/dial-in-summary/ConferenceID.web.js +++ b/react/features/invite/components/dial-in-summary/ConferenceID.web.js @@ -1,31 +1,31 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import { translate } from '../../../base/i18n'; /** - * Displays a conference ID used as a pin for dialing into a conferene. + * The type of the React {@code Component} props of {@link ConferenceID}. + */ +type Props = { + + /** + * The conference ID for dialing in. + */ + conferenceID: number, + + /** + * Invoked to obtain translated strings. + */ + t: Function +}; + +/** + * Displays a conference ID used as a pin for dialing into a conference. * * @extends Component */ -class ConferenceID extends Component { - /** - * {@code ConferenceID} component's property types. - * - * @static - */ - static propTypes = { - /** - * The conference ID for dialing in. - */ - conferenceID: PropTypes.number, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func - }; - +class ConferenceID extends Component { /** * Implements React's {@link Component#render()}. * diff --git a/react/features/invite/components/dial-in-summary/DialInSummary.web.js b/react/features/invite/components/dial-in-summary/DialInSummary.web.js index 4cb565496..0903488ae 100644 --- a/react/features/invite/components/dial-in-summary/DialInSummary.web.js +++ b/react/features/invite/components/dial-in-summary/DialInSummary.web.js @@ -1,6 +1,5 @@ -/* global config */ +/* @flow */ -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { translate } from '../../../base/i18n'; @@ -8,53 +7,72 @@ import { translate } from '../../../base/i18n'; import ConferenceID from './ConferenceID'; import NumbersList from './NumbersList'; +declare var config: Object; + +/** + * The type of the React {@code Component} props of {@link DialInSummary}. + */ +type Props = { + + /** + * Additional CSS classnames to append to the root of the component. + */ + className: string, + + /** + * Whether or not numbers should include links with the telephone protocol. + */ + clickableNumbers: boolean, + + /** + * The name of the conference to show a conferenceID for. + */ + room: string, + + /** + * Invoked to obtain translated strings. + */ + t: Function +}; + +/** + * The type of the React {@code Component} state of {@link DialInSummary}. + */ +type State = { + + /** + * The numeric ID of the conference, used as a pin when dialing in. + */ + conferenceID: ?string, + + /** + * An error message to display. + */ + error: string, + + /** + * Whether or not the app is fetching data. + */ + loading: boolean, + + /** + * The dial-in numbers. entered by the local participant. + */ + numbers: ?Array, + + /** + * Whether or not dial-in is allowed. + */ + numbersEnabled: ?boolean +} + /** * Displays a page listing numbers for dialing into a conference and pin to * the a specific conference. * * @extends Component */ -class DialInSummary extends Component { - /** - * {@code DialInSummary} component's property types. - * - * @static - */ - static propTypes = { - /** - * Additional CSS classnames to append to the root of the component. - */ - className: PropTypes.string, - - /** - * Whether or not numbers should include links with the telephone - * protocol. - */ - clickableNumbers: PropTypes.bool, - - /** - * The name of the conference to show a conferenceID for. - */ - room: PropTypes.string, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func - }; - - /** - * {@code DialInSummary} component's local state. - * - * @type {Object} - * @property {number} conferenceID - The numeric ID of the conference, used - * as a pin when dialing in. - * @property {string} error - An error message to display. - * @property {boolean} loading - Whether or not the app is fetching data. - * @property {Array|Object} numbers - The dial-in numbers. - * entered by the local participant. - * @property {boolean} numbersEnabled - Whether or not dial-in is allowed. - */ +class DialInSummary extends Component { state = { conferenceID: null, error: '', @@ -69,7 +87,7 @@ class DialInSummary extends Component { * @param {Object} props - The read-only properties with which the new * instance is to be initialized. */ - constructor(props) { + constructor(props: Props) { super(props); // Bind event handlers so they are only bound once for every instance. @@ -183,6 +201,8 @@ class DialInSummary extends Component { .catch(() => Promise.reject(this.props.t('info.genericError'))); } + _onGetConferenceIDSuccess: (Object) => void; + /** * Callback invoked when fetching the conference ID succeeds. * @@ -200,6 +220,8 @@ class DialInSummary extends Component { this.setState({ conferenceID: id }); } + _onGetNumbersSuccess: (Object) => void; + /** * Callback invoked when fetching dial-in numbers succeeds. Sets the * internal to show the numbers. @@ -218,6 +240,8 @@ class DialInSummary extends Component { }); } + _setErrorMessage: (string) => void; + /** * Sets an error message to display on the page instead of content. * diff --git a/react/features/invite/components/dial-in-summary/NumbersList.web.js b/react/features/invite/components/dial-in-summary/NumbersList.web.js index f8556c316..50d94d787 100644 --- a/react/features/invite/components/dial-in-summary/NumbersList.web.js +++ b/react/features/invite/components/dial-in-summary/NumbersList.web.js @@ -1,47 +1,39 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import { translate } from '../../../base/i18n'; +type Props = { + + /** + * Whether or not numbers should include links with the telephone protocol. + */ + clickableNumbers: boolean, + + /** + * The conference ID for dialing in. + */ + conferenceID: number, + + /** + * The phone numbers to display. Can be an array of numbers or an object + * with countries as keys and an array of numbers as values. + */ + numbers: { [string]: Array } | Array, + + /** + * Invoked to obtain translated strings. + */ + t: Function +} + /** * Displays a table with phone numbers to dial in to a conference. * * @extends Component */ -class NumbersList extends Component { - /** - * {@code NumbersList} component's property types. - * - * @static - */ - static propTypes = { - /** - * Whether or not numbers should include links with the telephone - * protocol. - */ - clickableNumbers: PropTypes.bool, - - /** - * The conference ID for dialing in. - */ - conferenceID: PropTypes.number, - - /** - * The phone numbers to display. Can be an array of numbers - * or an object with countries as keys and an array of numbers - * as values. - */ - numbers: PropTypes.oneOfType([ - PropTypes.array, - PropTypes.object - ]), - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func - }; - +class NumbersList extends Component { /** * Implements React's {@link Component#render()}. * @@ -50,22 +42,21 @@ class NumbersList extends Component { */ render() { const { numbers, t } = this.props; - const showWithoutCountries = Array.isArray(numbers); return ( - { showWithoutCountries + { Array.isArray(numbers) ? null : } - { showWithoutCountries + { Array.isArray(numbers) ? numbers.map(this._renderNumberRow) - : this._renderWithCountries() } + : this._renderWithCountries(numbers) }
{ t('info.country') }{ t('info.numbers') }
); } @@ -73,15 +64,25 @@ class NumbersList extends Component { /** * Renders rows of countries and associated phone numbers. * + * @param {Object} numbersMapping - Things yeah. * @private * @returns {ReactElement[]} */ - _renderWithCountries() { + _renderWithCountries(numbersMapping: Object) { const rows = []; - for (const [ country, numbers ] of Object.entries(this.props.numbers)) { - const formattedNumbers = numbers.map( - number => this._renderNumberDiv(number)); + for (const [ country, numbers ] of Object.entries(numbersMapping)) { + if (!Array.isArray(numbers)) { + return; + } + + const formattedNumbers = numbers.map(number => { + if (typeof number === 'string') { + return this._renderNumberDiv(number); + } + + return null; + }); rows.push( diff --git a/react/features/invite/components/info-dialog/DialInNumber.web.js b/react/features/invite/components/info-dialog/DialInNumber.web.js index 253bdaca4..8a2da804e 100644 --- a/react/features/invite/components/info-dialog/DialInNumber.web.js +++ b/react/features/invite/components/info-dialog/DialInNumber.web.js @@ -1,39 +1,39 @@ +/* @flow */ + import React, { Component } from 'react'; -import PropTypes from 'prop-types'; import { translate } from '../../../base/i18n'; +/** + * The type of the React {@code Component} props of {@link DialInNumber}. + */ +type Props = { + + /** + * The numberic identifier for the current conference, used after dialing a + * the number to join the conference. + */ + conferenceID: number, + + /** + * The phone number to dial to begin the process of dialing into a + * conference. + */ + phoneNumber: string, + + /** + * Invoked to obtain translated strings. + */ + t: Function +}; + /** * React {@code Component} responsible for displaying a telephone number and * conference ID for dialing into a conference. * * @extends Component */ -class DialInNumber extends Component { - /** - * {@code DialInNumber} component's property types. - * - * @static - */ - static propTypes = { - /** - * The numberic identifier for the current conference, used after - * dialing a the number to join the conference. - */ - conferenceID: PropTypes.number, - - /** - * The phone number to dial to begin the process of dialing into a - * conference. - */ - phoneNumber: PropTypes.string, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func - }; - +class DialInNumber extends Component { /** * Implements React's {@link Component#render()}. * diff --git a/react/features/invite/components/info-dialog/InfoDialog.web.js b/react/features/invite/components/info-dialog/InfoDialog.web.js index 4a7aec781..9ae652c46 100644 --- a/react/features/invite/components/info-dialog/InfoDialog.web.js +++ b/react/features/invite/components/info-dialog/InfoDialog.web.js @@ -1,4 +1,5 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import { connect } from 'react-redux'; @@ -13,88 +14,103 @@ import PasswordForm from './PasswordForm'; const logger = require('jitsi-meet-logger').getLogger(__filename); +/** + * The type of the React {@code Component} props of {@link InfoDialog}. + */ +type Props = { + + /** + * Whether or not the current user can modify the current password. + */ + _canEditPassword: boolean, + + /** + * The JitsiConference for which to display a lock state and change the + * password. + */ + _conference: Object, + + /** + * The name of the current conference. Used as part of inviting users. + */ + _conferenceName: string, + + /** + * The current url of the conference to be copied onto the clipboard. + */ + _inviteURL: string, + + /** + * The current location url of the conference. + */ + _locationURL: Object, + + /** + * The value for how the conference is locked (or undefined if not locked) + * as defined by room-lock constants. + */ + _locked: string, + + /** + * The current known password for the JitsiConference. + */ + _password: string, + + /** + * The object representing the dialIn feature. + */ + dialIn: Object, + + /** + * Invoked to open a dialog for adding participants to the conference. + */ + dispatch: Dispatch<*>, + + /** + * The current known URL for a live stream in progress. + */ + liveStreamViewURL: string, + + /** + * Callback invoked when the dialog should be closed. + */ + onClose: Function, + + /** + * Callback invoked when a mouse-related event has been detected. + */ + onMouseOver: Function, + + /** + * Invoked to obtain translated strings. + */ + t: Function +}; + +/** + * The type of the React {@code Component} state of {@link InfoDialog}. + */ +type State = { + + /** + * Whether or not to show the password in editing mode. + */ + passwordEditEnabled: boolean, + + /** + * The conference dial-in number to display. + */ + phoneNumber: ?string +}; + /** * A React Component with the contents for a dialog that shows information about * the current conference. * * @extends Component */ -class InfoDialog extends Component { - /** - * {@code InfoDialog} component's property types. - * - * @static - */ - static propTypes = { - /** - * Whether or not the current user can modify the current password. - */ - _canEditPassword: PropTypes.bool, - - /** - * The JitsiConference for which to display a lock state and change the - * password. - * - * @type {JitsiConference} - */ - _conference: PropTypes.object, - - /** - * The name of the current conference. Used as part of inviting users. - */ - _conferenceName: PropTypes.string, - - /** - * The current url of the conference to be copied onto the clipboard. - */ - _inviteURL: PropTypes.string, - - /** - * The current location url of the conference. - */ - _locationURL: PropTypes.object, - - /** - * The value for how the conference is locked (or undefined if not - * locked) as defined by room-lock constants. - */ - _locked: PropTypes.string, - - /** - * The current known password for the JitsiConference. - */ - _password: PropTypes.string, - - /** - * The object representing the dialIn feature. - */ - dialIn: PropTypes.object, - - /** - * Invoked to open a dialog for adding participants to the conference. - */ - dispatch: PropTypes.func, - - /** - * The current known URL for a live stream in progress. - */ - liveStreamViewURL: PropTypes.string, - - /** - * Callback invoked when the dialog should be closed. - */ - onClose: PropTypes.func, - - /** - * Callback invoked when a mouse-related event has been detected. - */ - onMouseOver: PropTypes.func, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func - }; +class InfoDialog extends Component { + _copyElement: ?Object; /** * {@code InfoDialog} component's local state. @@ -107,7 +123,7 @@ class InfoDialog extends Component { */ state = { passwordEditEnabled: false, - phoneNumber: '' + phoneNumber: undefined }; /** @@ -116,7 +132,7 @@ class InfoDialog extends Component { * @param {Object} props - The read-only properties with which the new * instance is to be initialized. */ - constructor(props) { + constructor(props: Props) { super(props); const { defaultCountry, numbers } = props.dialIn; @@ -162,7 +178,8 @@ class InfoDialog extends Component { const { defaultCountry, numbers } = nextProps.dialIn; this.setState({ - phoneNumber: _getDefaultPhoneNumber(numbers, defaultCountry) + phoneNumber: + _getDefaultPhoneNumber(numbers, defaultCountry) }); } } @@ -293,6 +310,8 @@ class InfoDialog extends Component { return this.props._inviteURL.replace(/^https?:\/\//i, ''); } + _onClickURLText: (Object) => void; + /** * Callback invoked when a displayed URL link is clicked to prevent actual * navigation from happening. The URL links have an href to display the @@ -307,6 +326,8 @@ class InfoDialog extends Component { event.preventDefault(); } + _onCopyInviteURL: () => void; + /** * Callback invoked to copy the contents of {@code this._copyElement} to the * clipboard. @@ -316,14 +337,20 @@ class InfoDialog extends Component { */ _onCopyInviteURL() { try { - this._copyElement.select(); + if (!this._copyElement) { + throw new Error('No element to copy from.'); + } + + this._copyElement && this._copyElement.select(); document.execCommand('copy'); - this._copyElement.blur(); + this._copyElement && this._copyElement.blur(); } catch (err) { logger.error('error when copying the text', err); } } + _onPasswordRemove: () => void; + /** * Callback invoked to unlock the current JitsiConference. * @@ -334,6 +361,8 @@ class InfoDialog extends Component { this._onPasswordSubmit(''); } + _onPasswordSubmit: (string) => void; + /** * Callback invoked to set a password on the current JitsiConference. * @@ -352,6 +381,8 @@ class InfoDialog extends Component { )); } + _onTogglePasswordEditState: () => void; + /** * Toggles whether or not the password should currently be shown as being * edited locally. @@ -476,6 +507,8 @@ class InfoDialog extends Component { && phoneNumber); } + _setCopyElement: () => void; + /** * Sets the internal reference to the DOM/HTML element backing the React * {@code Component} input. @@ -485,7 +518,7 @@ class InfoDialog extends Component { * @private * @returns {void} */ - _setCopyElement(element) { + _setCopyElement(element: Object) { this._copyElement = element; } } diff --git a/react/features/invite/components/info-dialog/PasswordForm.web.js b/react/features/invite/components/info-dialog/PasswordForm.web.js index 6a9f3ef12..e5115271d 100644 --- a/react/features/invite/components/info-dialog/PasswordForm.web.js +++ b/react/features/invite/components/info-dialog/PasswordForm.web.js @@ -1,56 +1,60 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import { translate } from '../../../base/i18n'; import { LOCKED_LOCALLY } from '../../../room-lock'; +/** + * The type of the React {@code Component} props of {@link PasswordForm}. + */ +type Props = { + + /** + * Whether or not to show the password editing field. + */ + editEnabled: boolean, + + /** + * The value for how the conference is locked (or undefined if not locked) + * as defined by room-lock constants. + */ + locked: string, + + /** + * Callback to invoke when the local participant is submitting a password + * set request. + */ + onSubmit: Function, + + /** + * The current known password for the JitsiConference. + */ + password: string, + + /** + * Invoked to obtain translated strings. + */ + t: Function +}; + +/** + * The type of the React {@code Component} state of {@link PasswordForm}. + */ +type State = { + + /** + * The value of the password being entered by the local participant. + */ + enteredPassword: string +}; + /** * React {@code Component} for displaying and editing the conference password. * * @extends Component */ -class PasswordForm extends Component { - /** - * {@code PasswordForm} component's property types. - * - * @static - */ - static propTypes = { - /** - * Whether or not to show the password editing field. - */ - editEnabled: PropTypes.bool, - - /** - * The value for how the conference is locked (or undefined if not - * locked) as defined by room-lock constants. - */ - locked: PropTypes.string, - - /** - * Callback to invoke when the local participant is submitting a - * password set request. - */ - onSubmit: PropTypes.func, - - /** - * The current known password for the JitsiConference. - */ - password: PropTypes.string, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func - }; - - /** - * {@code PasswordForm} component's local state. - * - * @type {Object} - * @property {string} enteredPassword - The value of the password being - * entered by the local participant. - */ +class PasswordForm extends Component { state = { enteredPassword: '' }; @@ -61,7 +65,7 @@ class PasswordForm extends Component { * @param {Props} props - The React {@code Component} props to initialize * the new {@code PasswordForm} instance with. */ - constructor(props) { + constructor(props: Props) { super(props); // Bind event handlers so they are only bound once per instance. @@ -77,7 +81,7 @@ class PasswordForm extends Component { * @inheritdoc * @param {Props} nextProps - New props component will receive. */ - componentWillReceiveProps(nextProps) { + componentWillReceiveProps(nextProps: Props) { if (this.props.editEnabled && !nextProps.editEnabled) { this.setState({ enteredPassword: '' }); } @@ -148,6 +152,8 @@ class PasswordForm extends Component { ); } + _onEnteredPasswordChange: (Object) => void; + /** * Updates the internal state of entered password. * @@ -159,6 +165,8 @@ class PasswordForm extends Component { this.setState({ enteredPassword: event.target.value }); } + _onPasswordSubmit: (Object) => void; + /** * Invokes the passed in onSubmit callback to notify the parent that a * password submission has been attempted. diff --git a/react/features/invite/functions.js b/react/features/invite/functions.js index 730282172..7df5946d9 100644 --- a/react/features/invite/functions.js +++ b/react/features/invite/functions.js @@ -532,7 +532,7 @@ export function getDialInfoPageURL( */ export function _getDefaultPhoneNumber( dialInNumbers: Object, - defaultCountry: string = 'US') { + defaultCountry: string = 'US'): ?string { if (Array.isArray(dialInNumbers)) { // Dumbly return the first number if an array. return dialInNumbers[0]; diff --git a/react/features/keyboard-shortcuts/components/KeyboardShortcutsDialog.web.js b/react/features/keyboard-shortcuts/components/KeyboardShortcutsDialog.web.js index dfd6414fd..25ab96ae4 100644 --- a/react/features/keyboard-shortcuts/components/KeyboardShortcutsDialog.web.js +++ b/react/features/keyboard-shortcuts/components/KeyboardShortcutsDialog.web.js @@ -1,34 +1,35 @@ +/* @flow */ + import Lozenge from '@atlaskit/lozenge'; -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { Dialog } from '../../base/dialog'; import { translate } from '../../base/i18n'; +/** + * The type of the React {@code Component} props of + * {@link KeyboardShortcutsDialog}. + */ +type Props = { + + /** + * A Map with keyboard keys as keys and translation keys as values. + */ + shortcutDescriptions: Object, + + /** + * Invoked to obtain translated strings. + */ + t: Function +}; + /** * Implements a React {@link Component} which displays a dialog describing * registered keyboard shortcuts. * * @extends Component */ -class KeyboardShortcutsDialog extends Component { - /** - * {@code KeyboardShortcutsDialog} component's property types. - * - * @static - */ - static propTypes = { - /** - * A Map with keyboard keys as keys and translation keys as values. - */ - shortcutDescriptions: PropTypes.object, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func - }; - +class KeyboardShortcutsDialog extends Component { /** * Implements React's {@link Component#render()}. * diff --git a/react/features/mobile/network-activity/components/NetworkActivityIndicator.js b/react/features/mobile/network-activity/components/NetworkActivityIndicator.js index 5358eabaa..ca51b9ffa 100644 --- a/react/features/mobile/network-activity/components/NetworkActivityIndicator.js +++ b/react/features/mobile/network-activity/components/NetworkActivityIndicator.js @@ -1,31 +1,28 @@ /* @flow */ -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { connect } from 'react-redux'; import { LoadingIndicator } from '../../../base/react'; +/** + * The type of the React {@code Component} props of + * {@link NetworkActivityIndicator}. + */ +type Props = { + + /** + * Indicates whether there is network activity i.e. ongoing network + * requests. + */ + _networkActivity: boolean +}; + /** * The React {@code Component} which renders a progress indicator when there * are ongoing network requests. */ -class NetworkActivityIndicator extends Component<*> { - /** - * {@code NetworkActivityIndicator} React {@code Component}'s prop types. - * - * @static - */ - static propTypes = { - /** - * Indicates whether there is network activity i.e. ongoing network - * requests. - * - * @private - */ - _networkActivity: PropTypes.bool - }; - +class NetworkActivityIndicator extends Component { /** * Implements React's {@link Component#render()}. * diff --git a/react/features/overlay/components/AbstractPageReloadOverlay.js b/react/features/overlay/components/AbstractPageReloadOverlay.js index d9bbfa94c..f267f1416 100644 --- a/react/features/overlay/components/AbstractPageReloadOverlay.js +++ b/react/features/overlay/components/AbstractPageReloadOverlay.js @@ -1,6 +1,5 @@ // @flow -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { @@ -20,54 +19,71 @@ declare var APP: Object; const logger = require('jitsi-meet-logger').getLogger(__filename); +/** + * The type of the React {@code Component} props of + * {@link AbstractPageReloadOverlay}. + */ +type Props = { + + /** + * The details is an object containing more information about the connection + * failed (shard changes, was the computer suspended, etc.) + */ + details: Object, + + dispatch: Dispatch<*>, + + /** + * The indicator which determines whether the reload was caused by network + * failure. + */ + isNetworkFailure: boolean, + + /** + * The reason for the error that will cause the reload. + * NOTE: Used by PageReloadOverlay only. + */ + reason: string, + + /** + * The function to translate human-readable text. + */ + t: Function +}; + +/** + * The type of the React {@code Component} state of + * {@link AbstractPageReloadOverlay}. + */ +type State = { + + /** + * The translation key for the title of the overlay. + */ + message: string, + + /** + * Current value(time) of the timer. + */ + timeLeft: number, + + /** + * How long the overlay dialog will be displayed before the conference will + * be reloaded. + */ + timeoutSeconds: number, + + /** + * The translation key for the title of the overlay. + */ + title: string +}; + /** * Implements an abstract React {@link Component} for the page reload overlays. */ -export default class AbstractPageReloadOverlay extends Component<*, *> { - /** - * {@code AbstractPageReloadOverlay} component's property types. - * - * @static - */ - static propTypes = { - /** - * The details is an object containing more information about the - * connection failed (shard changes, was the computer suspended, etc.) - * - * @public - * @type {object} - */ - details: PropTypes.object, - - dispatch: PropTypes.func, - - /** - * The indicator which determines whether the reload was caused by - * network failure. - * - * @public - * @type {boolean} - */ - isNetworkFailure: PropTypes.bool, - - /** - * The reason for the error that will cause the reload. - * NOTE: Used by PageReloadOverlay only. - * - * @public - * @type {string} - */ - reason: PropTypes.string, - - /** - * The function to translate human-readable text. - * - * @public - * @type {Function} - */ - t: PropTypes.func - }; - +export default class AbstractPageReloadOverlay + extends Component { /** * Determines whether this overlay needs to be rendered (according to a * specific redux state). Called by {@link OverlayContainer}. @@ -109,38 +125,6 @@ export default class AbstractPageReloadOverlay extends Component<*, *> { _interval: ?IntervalID; - state: { - - /** - * The translation key for the title of the overlay. - * - * @type {string} - */ - message: string, - - /** - * Current value(time) of the timer. - * - * @type {number} - */ - timeLeft: number, - - /** - * How long the overlay dialog will be displayed before the - * conference will be reloaded. - * - * @type {number} - */ - timeoutSeconds: number, - - /** - * The translation key for the title of the overlay. - * - * @type {string} - */ - title: string - }; - /** * Initializes a new AbstractPageReloadOverlay instance. * diff --git a/react/features/overlay/components/AbstractSuspendedOverlay.js b/react/features/overlay/components/AbstractSuspendedOverlay.js index 14f13afac..4b8911902 100644 --- a/react/features/overlay/components/AbstractSuspendedOverlay.js +++ b/react/features/overlay/components/AbstractSuspendedOverlay.js @@ -1,26 +1,24 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import { Component } from 'react'; +/** + * The type of the React {@code Component} props of + * {@link AbstractSuspendedOverlay}. + */ +type Props = { + + /** + * The function to translate human-readable text. + */ + t: Function +}; + /** * Implements a React {@link Component} for suspended overlay. Shown when a * suspend is detected. */ -export default class AbstractSuspendedOverlay extends Component { - /** - * {@code AbstractSuspendedOverlay} component's property types. - * - * @static - */ - static propTypes = { - /** - * The function to translate human-readable text. - * - * @public - * @type {Function} - */ - t: PropTypes.func - }; - +export default class AbstractSuspendedOverlay extends Component { /** * Determines whether this overlay needs to be rendered (according to a * specific redux state). Called by {@link OverlayContainer}. @@ -29,7 +27,7 @@ export default class AbstractSuspendedOverlay extends Component { * @returns {boolean} - If this overlay needs to be rendered, {@code true}; * {@code false}, otherwise. */ - static needsRender(state) { + static needsRender(state: Object) { return state['features/overlay'].suspendDetected; } } diff --git a/react/features/overlay/components/AbstractUserMediaPermissionsOverlay.js b/react/features/overlay/components/AbstractUserMediaPermissionsOverlay.js index 2de53e2d0..95242bf8f 100644 --- a/react/features/overlay/components/AbstractUserMediaPermissionsOverlay.js +++ b/react/features/overlay/components/AbstractUserMediaPermissionsOverlay.js @@ -1,35 +1,31 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import { Component } from 'react'; +/** + * The type of the React {@code Component} props of + * {@link AbstractUserMediaPermissionsOverlay}. + */ +type Props = { + + /** + * The browser which is used currently. The text is different for every + * browser. + */ + browser: string, + + /** + * The function to translate human-readable text. + */ + t: Function +}; + /** * Implements a React {@link Component} for overlay with guidance how to proceed * with gUM prompt. */ -export default class AbstractUserMediaPermissionsOverlay extends Component { - /** - * {@code AbstractUserMediaPermissionsOverlay} component's property types. - * - * @static - */ - static propTypes = { - /** - * The browser which is used currently. The text is different for every - * browser. - * - * @public - * @type {string} - */ - browser: PropTypes.string, - - /** - * The function to translate human-readable text. - * - * @public - * @type {Function} - */ - t: PropTypes.func - }; - +export default class AbstractUserMediaPermissionsOverlay + extends Component { /** * Determines whether this overlay needs to be rendered (according to a * specific redux state). Called by {@link OverlayContainer}. @@ -38,7 +34,7 @@ export default class AbstractUserMediaPermissionsOverlay extends Component { * @returns {boolean} - If this overlay needs to be rendered, {@code true}; * {@code false}, otherwise. */ - static needsRender(state) { + static needsRender(state: Object) { return state['features/overlay'].isMediaPermissionPromptVisible; } } @@ -52,7 +48,7 @@ export default class AbstractUserMediaPermissionsOverlay extends Component { * browser: string * }} */ -export function abstractMapStateToProps(state) { +export function abstractMapStateToProps(state: Object) { const { browser } = state['features/overlay']; return { diff --git a/react/features/overlay/components/FilmstripOnlyOverlayFrame.js b/react/features/overlay/components/FilmstripOnlyOverlayFrame.js index 9e3fbeadc..935acbc1a 100644 --- a/react/features/overlay/components/FilmstripOnlyOverlayFrame.js +++ b/react/features/overlay/components/FilmstripOnlyOverlayFrame.js @@ -1,4 +1,5 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import { connect } from 'react-redux'; @@ -10,50 +11,40 @@ import { import OverlayFrame from './OverlayFrame'; +/** + * The type of the React {@code Component} props of + * {@link FilmstripOnlyOverlayFrame}. + */ +type Props = { + + /** + * The source (e.g. URI, URL) of the avatar image of the local participant. + */ + _avatar: string, + + /** + * The children components to be displayed into the overlay frame for + * filmstrip only mode. + */ + children: React$Node, + + /** + * The css class name for the icon that will be displayed over the avatar. + */ + icon: string, + + /** + * Indicates the css style of the overlay. If true, then lighter; darker, + * otherwise. + */ + isLightOverlay: boolean +}; + /** * Implements a React Component for the frame of the overlays in filmstrip only * mode. */ -class FilmstripOnlyOverlayFrame extends Component { - /** - * FilmstripOnlyOverlayFrame component's property types. - * - * @static - */ - static propTypes = { - /** - * The source (e.g. URI, URL) of the avatar image of the local - * participant. - * - * @private - */ - _avatar: PropTypes.string, - - /** - * The children components to be displayed into the overlay frame for - * filmstrip only mode. - * - * @type {ReactElement} - */ - children: PropTypes.node.isRequired, - - /** - * The css class name for the icon that will be displayed over the - * avatar. - * - * @type {string} - */ - icon: PropTypes.string, - - /** - * Indicates the css style of the overlay. If true, then lighter; - * darker, otherwise. - * - * @type {boolean} - */ - isLightOverlay: PropTypes.bool - }; - +class FilmstripOnlyOverlayFrame extends Component { /** * Renders content related to the icon. * diff --git a/react/features/overlay/components/OverlayFrame.web.js b/react/features/overlay/components/OverlayFrame.web.js index 5d6d428fb..f0874cb9b 100644 --- a/react/features/overlay/components/OverlayFrame.web.js +++ b/react/features/overlay/components/OverlayFrame.web.js @@ -1,32 +1,42 @@ -/* global interfaceConfig */ +/* @flow */ -import PropTypes from 'prop-types'; import React, { Component } from 'react'; +declare var interfaceConfig: Object; + +/** + * The type of the React {@code Component} props of {@link OverlayFrame}. + */ +type Props = { + + /** + * The children components to be displayed into the overlay frame. + */ + children: React$Node, + + /** + * Indicates the css style of the overlay. If true, then lighter; darker, + * otherwise. + */ + isLightOverlay: boolean +}; + +/** + * The type of the React {@code Component} state of {@link OverlayFrame}. + */ +type State = { + + /** + * Whether or not the application is currently displaying in filmstrip only + * mode. + */ + filmstripOnly: boolean +}; + /** * Implements a React {@link Component} for the frame of the overlays. */ -export default class OverlayFrame extends Component { - /** - * OverlayFrame component's property types. - * - * @static - */ - static propTypes = { - /** - * The children components to be displayed into the overlay frame. - */ - children: PropTypes.node.isRequired, - - /** - * Indicates the css style of the overlay. If true, then lighter; - * darker, otherwise. - * - * @type {boolean} - */ - isLightOverlay: PropTypes.bool - }; - +export default class OverlayFrame extends Component { /** * Initializes a new AbstractOverlay instance. * @@ -34,7 +44,7 @@ export default class OverlayFrame extends Component { * instance is to be initialized. * @public */ - constructor(props) { + constructor(props: Props) { super(props); this.state = { diff --git a/react/features/overlay/components/ReloadButton.js b/react/features/overlay/components/ReloadButton.js index e7c64fc29..7fe1998c5 100644 --- a/react/features/overlay/components/ReloadButton.js +++ b/react/features/overlay/components/ReloadButton.js @@ -1,46 +1,37 @@ /* @flow */ -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { connect } from 'react-redux'; import { reloadNow } from '../../app'; import { translate } from '../../base/i18n'; +/** + * The type of the React {@code Component} props of {@link ReloadButton}. + */ +type Props = { + + /** + * Reloads the page. + */ + _reloadNow: Function, + + /** + * The function to translate human-readable text. + */ + t: Function, + + /** + * The translation key for the text in the button. + */ + textKey: string +}; + /** * Implements a React Component for button for the overlays that will reload * the page. */ -class ReloadButton extends Component<*> { - /** - * PageReloadOverlay component's property types. - * - * @static - */ - static propTypes = { - /** - * Reloads the page. - * - * @type {Function} - */ - _reloadNow: PropTypes.func, - - /** - * The function to translate human-readable text. - * - * @public - * @type {Function} - */ - t: PropTypes.func, - - /** - * The translation key for the text in the button. - * - * @type {string} - */ - textKey: PropTypes.string.isRequired - }; - +class ReloadButton extends Component { /** * Renders the button for relaod the page if necessary. * diff --git a/react/features/presence-status/components/PresenceLabel.js b/react/features/presence-status/components/PresenceLabel.js index 2b52cc203..0dc7a8b6e 100644 --- a/react/features/presence-status/components/PresenceLabel.js +++ b/react/features/presence-status/components/PresenceLabel.js @@ -1,4 +1,5 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import { connect } from 'react-redux'; @@ -8,13 +9,51 @@ import { Text } from '../../base/react'; import { STATUS_TO_I18N_KEY } from '../constants'; +/** + * The type of the React {@code Component} props of {@link PresenceLabel}. + */ +type Props = { + + /** + * The current present status associated with the passed in participantID + * prop. + */ + _presence: string, + + /** + * Class name for the presence label. + */ + className: string, + + /** + * Default presence status that will be displayed if user's presence status + * is not available. + */ + defaultPresence: string, + + /** + * The ID of the participant whose presence status should display. + */ + participantID: string, + + /** + * Styles for the presence label. + */ + style: Object, + + /** + * Invoked to obtain translated strings. + */ + t: Function +}; + /** * React {@code Component} for displaying the current presence status of a * participant. * * @extends Component */ -class PresenceLabel extends Component { +class PresenceLabel extends Component { /** * The default values for {@code PresenceLabel} component's property types. * @@ -24,45 +63,6 @@ class PresenceLabel extends Component { _presence: '' }; - /** - * {@code PresenceLabel} component's property types. - * - * @static - */ - static propTypes = { - /** - * The current present status associated with the passed in - * participantID prop. - */ - _presence: PropTypes.string, - - /** - * Class name for the presence label. - */ - className: PropTypes.string, - - /** - * Default presence status that will be displayed if user's presence - * status is not available. - */ - defaultPresence: PropTypes.string, - - /** - * The ID of the participant whose presence status shoul display. - */ - participantID: PropTypes.string, - - /** - * Styles for the presence label. - */ - style: PropTypes.object, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func - }; - /** * Implements React's {@link Component#render()}. * diff --git a/react/features/recording/components/LiveStream/StreamKeyPicker.web.js b/react/features/recording/components/LiveStream/StreamKeyPicker.web.js index e38e395d3..9b0be54cd 100644 --- a/react/features/recording/components/LiveStream/StreamKeyPicker.web.js +++ b/react/features/recording/components/LiveStream/StreamKeyPicker.web.js @@ -1,19 +1,61 @@ +/* @flow */ + import { DropdownItem, DropdownItemGroup, DropdownMenuStateless } from '@atlaskit/dropdown-menu'; import React, { PureComponent } from 'react'; -import PropTypes from 'prop-types'; import { translate } from '../../../base/i18n'; +/** + * The type of the React {@code Component} props of {@link StreamKeyPicker}. + */ +type Props = { + + /** + * Broadcasts available for selection. Each broadcast item should be an + * object with a title for display in the dropdown and a boundStreamID to + * return in the {@link onBroadcastSelected} callback. + */ + broadcasts: Array, + + /** + * Callback invoked when an item in the dropdown is selected. The selected + * broadcast's boundStreamID will be passed back. + */ + onBroadcastSelected: Function, + + /** + * The boundStreamID of the broadcast that should display as selected in the + * dropdown. + */ + selectedBoundStreamID: string, + + /** + * Invoked to obtain translated strings. + */ + t: Function +}; + +/** + * The type of the React {@code Component} state of {@link StreamKeyPicker}. + */ +type State = { + + /** + * Whether or not to display the dropdown menu to pick a YouTube broadcast. + */ + isDropdownOpen: boolean +}; + /** * A dropdown to select a YouTube broadcast. * * @extends Component */ -class StreamKeyPicker extends PureComponent { +class StreamKeyPicker extends PureComponent { /** * Default values for {@code StreamKeyForm} component's properties. * @@ -23,41 +65,8 @@ class StreamKeyPicker extends PureComponent { broadcasts: [] }; - /** - * {@code StreamKeyPicker} component's property types. - */ - static propTypes = { - /** - * Broadcasts available for selection. Each broadcast item should be an - * object with a title for display in the dropdown and a boundStreamID - * to return in the {@link onBroadcastSelected} callback. - */ - broadcasts: PropTypes.array, - - /** - * Callback invoked when an item in the dropdown is selected. The - * selected broadcast's boundStreamID will be passed back. - */ - onBroadcastSelected: PropTypes.func, - - /** - * The boundStreamID of the broadcast that should display as selected in - * the dropdown. - */ - selectedBoundStreamID: PropTypes.string, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func - }; - /** * The initial state of a {@code StreamKeyForm} instance. - * - * @type {{ - * isDropdownOpen: boolean - * }} */ state = { isDropdownOpen: false @@ -69,7 +78,7 @@ class StreamKeyPicker extends PureComponent { * @param {Props} props - The React {@code Component} props to initialize * the new {@code StreamKeyPicker} instance with. */ - constructor(props) { + constructor(props: Props) { super(props); // Bind event handlers so they are only bound once per instance. @@ -139,6 +148,8 @@ class StreamKeyPicker extends PureComponent { }); } + _onDropdownOpenChange: (Object) => void; + /** * Sets the dropdown to be displayed or not based on the passed in event. * @@ -154,6 +165,8 @@ class StreamKeyPicker extends PureComponent { }); } + _onSelect: (string) => void; + /** * Callback invoked when an item has been clicked in the dropdown menu. * diff --git a/react/features/remote-control/components/RemoteControlAuthorizationDialog.js b/react/features/remote-control/components/RemoteControlAuthorizationDialog.js index 77e5b39b7..494b4a38f 100644 --- a/react/features/remote-control/components/RemoteControlAuthorizationDialog.js +++ b/react/features/remote-control/components/RemoteControlAuthorizationDialog.js @@ -1,6 +1,5 @@ // @flow -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { connect } from 'react-redux'; @@ -10,50 +9,46 @@ import { getParticipantById } from '../../base/participants'; declare var APP: Object; +/** + * The type of the React {@code Component} props of + * {@link RemoteControlAuthorizationDialog}. + */ +type Props = { + + /** + * The display name of the participant who is requesting authorization for + * remote desktop control session. + */ + _displayName: string, + + /** + * Used to show/hide the dialog on cancel. + */ + dispatch: Function, + + /** + * The ID of the participant who is requesting authorization for remote + * desktop control session. + */ + participantId: string, + + /** + * Invoked to obtain translated strings. + */ + t: Function +}; + /** * Implements a dialog for remote control authorization. */ -class RemoteControlAuthorizationDialog extends Component<*> { - /** - * RemoteControlAuthorizationDialog component's property types. - * - * @static - */ - static propTypes = { - /** - * The display name of the participant who is requesting authorization - * for remote desktop control session. - * - * @private - */ - _displayName: PropTypes.string, - - /** - * Used to show/hide the dialog on cancel. - */ - dispatch: PropTypes.func, - - /** - * The ID of the participant who is requesting authorization for remote - * desktop control session. - * - * @public - */ - participantId: PropTypes.string, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func - }; - +class RemoteControlAuthorizationDialog extends Component { /** * Initializes a new RemoteControlAuthorizationDialog instance. * * @param {Object} props - The read-only properties with which the new * instance is to be initialized. */ - constructor(props) { + constructor(props: Props) { super(props); this._onCancel = this._onCancel.bind(this); diff --git a/react/features/remote-video-menu/components/KickButton.js b/react/features/remote-video-menu/components/KickButton.js index f9477ff81..a661cd2f4 100644 --- a/react/features/remote-video-menu/components/KickButton.js +++ b/react/features/remote-video-menu/components/KickButton.js @@ -1,4 +1,5 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import { connect } from 'react-redux'; @@ -11,41 +12,40 @@ import { kickParticipant } from '../../base/participants'; import RemoteVideoMenuButton from './RemoteVideoMenuButton'; +/** + * The type of the React {@code Component} state of {@link KickButton}. + */ +type Props = { + + /** + * Invoked to signal the participant with the passed in participantID + * should be removed from the conference. + */ + dispatch: Dispatch<*>, + + /** + * Callback to invoke when {@code KickButton} is clicked. + */ + onClick: Function, + + /** + * The ID of the participant linked to the onClick callback. + */ + participantID: string, + + /** + * Invoked to obtain translated strings. + */ + t: Function, +}; + /** * Implements a React {@link Component} which displays a button for kicking out * a participant from the conference. * * @extends Component */ -class KickButton extends Component { - /** - * {@code KickButton} component's property types. - * - * @static - */ - static propTypes = { - /** - * Invoked to signal the participant with the passed in participantID - * should be removed from the conference. - */ - dispatch: PropTypes.func, - - /** - * Callback to invoke when {@code KickButton} is clicked. - */ - onClick: PropTypes.func, - - /** - * The ID of the participant linked to the onClick callback. - */ - participantID: PropTypes.string, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func - }; - +class KickButton extends Component { /** * Initializes a new {@code KickButton} instance. * @@ -77,6 +77,8 @@ class KickButton extends Component { ); } + _onClick: () => void; + /** * Remove the participant with associated participantID from the conference. * diff --git a/react/features/remote-video-menu/components/MuteButton.js b/react/features/remote-video-menu/components/MuteButton.js index 431ada860..e574b1bf5 100644 --- a/react/features/remote-video-menu/components/MuteButton.js +++ b/react/features/remote-video-menu/components/MuteButton.js @@ -1,4 +1,5 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import { connect } from 'react-redux'; @@ -12,53 +13,52 @@ import { openDialog } from '../../base/dialog'; import RemoteVideoMenuButton from './RemoteVideoMenuButton'; import MuteRemoteParticipantDialog from './MuteRemoteParticipantDialog'; +/** + * The type of the React {@code Component} props of {@link MuteButton}. + */ +type Props = { + + /** + * Invoked to send a request for muting the participant with the passed + * in participantID. + */ + dispatch: Dispatch<*>, + + /** + * Whether or not the participant is currently audio muted. + */ + isAudioMuted: Function, + + /** + * Callback to invoke when {@code MuteButton} is clicked. + */ + onClick: Function, + + /** + * The ID of the participant linked to the onClick callback. + */ + participantID: string, + + /** + * Invoked to obtain translated strings. + */ + t: Function +}; + /** * Implements a React {@link Component} which displays a button for audio muting * a participant in the conference. * * @extends Component */ -class MuteButton extends Component { - /** - * {@code MuteButton} component's property types. - * - * @static - */ - static propTypes = { - /** - * Invoked to send a request for muting the participant with the passed - * in participantID. - */ - dispatch: PropTypes.func, - - /** - * Whether or not the participant is currently audio muted. - */ - isAudioMuted: PropTypes.bool, - - /** - * Callback to invoke when {@code MuteButton} is clicked. - */ - onClick: PropTypes.func, - - /** - * The ID of the participant linked to the onClick callback. - */ - participantID: PropTypes.string, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func - }; - +class MuteButton extends Component { /** * Initializes a new {@code MuteButton} instance. * * @param {Object} props - The read-only React Component props with which * the new instance is to be initialized. */ - constructor(props) { + constructor(props: Props) { super(props); // Bind event handlers so they are only bound once for every instance. @@ -91,6 +91,8 @@ class MuteButton extends Component { ); } + _onClick: () => void; + /** * Dispatches a request to mute the participant with the passed in * participantID. diff --git a/react/features/remote-video-menu/components/MuteRemoteParticipantDialog.web.js b/react/features/remote-video-menu/components/MuteRemoteParticipantDialog.web.js index a000bdcb3..4441634c1 100644 --- a/react/features/remote-video-menu/components/MuteRemoteParticipantDialog.web.js +++ b/react/features/remote-video-menu/components/MuteRemoteParticipantDialog.web.js @@ -1,4 +1,5 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import { connect } from 'react-redux'; @@ -11,43 +12,43 @@ import { } from '../../analytics'; import { muteRemoteParticipant } from '../../base/participants'; +/** + * The type of the React {@code Component} props of + * {@link MuteRemoteParticipantDialog}. + */ +type Props = { + + /** + * Invoked to send a request for muting the participant with the passed + * in participantID. + */ + dispatch: Dispatch<*>, + + /** + * The ID of the participant linked to the onClick callback. + */ + participantID: string, + + /** + * Invoked to obtain translated strings. + */ + t: Function +}; + /** * A React Component with the contents for a dialog that asks for confirmation * from the user before muting a remote participant. * * @extends Component */ -class MuteRemoteParticipantDialog extends Component { - /** - * {@code MuteRemoteParticipantDialog} component's property types. - * - * @static - */ - static propTypes = { - /** - * Invoked to send a request for muting the participant with the passed - * in participantID. - */ - dispatch: PropTypes.func, - - /** - * The ID of the participant linked to the onClick callback. - */ - participantID: PropTypes.string, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func - }; - +class MuteRemoteParticipantDialog extends Component { /** * Initializes a new {@code MuteRemoteParticipantDialog} instance. * * @param {Object} props - The read-only properties with which the new * instance is to be initialized. */ - constructor(props) { + constructor(props: Props) { super(props); // Bind event handlers so they are only bound once per instance. @@ -73,6 +74,8 @@ class MuteRemoteParticipantDialog extends Component { ); } + _onSubmit: () => void; + /** * Handles the submit button action. * @@ -89,6 +92,8 @@ class MuteRemoteParticipantDialog extends Component { return true; } + _renderContent: () => React$Element<*>; + /** * Renders the content of the dialog. * diff --git a/react/features/remote-video-menu/components/RemoteControlButton.js b/react/features/remote-video-menu/components/RemoteControlButton.js index c4c834c8e..860bad001 100644 --- a/react/features/remote-video-menu/components/RemoteControlButton.js +++ b/react/features/remote-video-menu/components/RemoteControlButton.js @@ -1,4 +1,5 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import { @@ -18,6 +19,33 @@ export const REMOTE_CONTROL_MENU_STATES = { STARTED: 3 }; +/** + * The type of the React {@code Component} props of {@link RemoteControlButton}. + */ +type Props = { + + /** + * The callback to invoke when the component is clicked. + */ + onClick: Function, + + /** + * The ID of the participant linked to the onClick callback. + */ + participantID: string, + + /** + * The current status of remote control. Should be a number listed in the + * enum REMOTE_CONTROL_MENU_STATES. + */ + remoteControlState: number, + + /** + * Invoked to obtain translated strings. + */ + t: Function +}; + /** * Implements a React {@link Component} which displays a button showing the * current state of remote control for a participant and can start or stop a @@ -25,42 +53,14 @@ export const REMOTE_CONTROL_MENU_STATES = { * * @extends Component */ -class RemoteControlButton extends Component { - /** - * {@code RemoteControlButton} component's property types. - * - * @static - */ - static propTypes = { - /** - * The callback to invoke when the component is clicked. - */ - onClick: PropTypes.func, - - /** - * The ID of the participant linked to the onClick callback. - */ - participantID: PropTypes.string, - - /** - * The current status of remote control. Should be a number listed in - * the enum REMOTE_CONTROL_MENU_STATES. - */ - remoteControlState: PropTypes.number, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func - }; - +class RemoteControlButton extends Component { /** * Initializes a new {@code RemoteControlButton} instance. * * @param {Object} props - The read-only React Component props with which * the new instance is to be initialized. */ - constructor(props) { + constructor(props: Props) { super(props); // Bind event handlers so they are only bound once for every instance. @@ -112,6 +112,8 @@ class RemoteControlButton extends Component { ); } + _onClick: () => void; + /** * Sends analytics event for pressing the button and executes the passed * onClick handler. diff --git a/react/features/remote-video-menu/components/RemoteVideoMenu.js b/react/features/remote-video-menu/components/RemoteVideoMenu.js index 236a50d8c..ff23183cc 100644 --- a/react/features/remote-video-menu/components/RemoteVideoMenu.js +++ b/react/features/remote-video-menu/components/RemoteVideoMenu.js @@ -1,31 +1,31 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; +/** + * The type of the React {@code Component} props of {@link RemoteVideoMenu}. + */ +type Props = { + + /** + * The components to place as the body of the {@code RemoteVideoMenu}. + */ + children: React$Node, + + /** + * The id attribute to be added to the component's DOM for retrieval when + * querying the DOM. Not used directly by the component. + */ + id: string +}; + /** * React {@code Component} responsible for displaying other components as a menu * for manipulating remote participant state. * * @extends {Component} */ -export default class RemoteVideoMenu extends Component { - /** - * {@code RemoteVideoMenu}'s property types. - * - * @static - */ - static propTypes = { - /** - * The components to place as the body of the {@code RemoteVideoMenu}. - */ - 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: PropTypes.string - }; - +export default class RemoteVideoMenu extends Component { /** * Implements React's {@link Component#render()}. * diff --git a/react/features/remote-video-menu/components/RemoteVideoMenuButton.js b/react/features/remote-video-menu/components/RemoteVideoMenuButton.js index c0ac21e61..d1b89a537 100644 --- a/react/features/remote-video-menu/components/RemoteVideoMenuButton.js +++ b/react/features/remote-video-menu/components/RemoteVideoMenuButton.js @@ -1,46 +1,46 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; +/** + * The type of the React {@code Component} props of + * {@link RemoteVideoMenuButton}. + */ +type Props = { + + /** + * Text to display within the component that describes the onClick action. + */ + buttonText: string, + + /** + * Additional CSS classes to add to the component. + */ + displayClass?: string, + + /** + * The CSS classes for the icon that will display within the component. + */ + iconClass: string, + + /** + * The id attribute to be added to the component's DOM for retrieval when + * querying the DOM. Not used directly by the component. + */ + id: string, + + /** + * Callback to invoke when the component is clicked. + */ + onClick: Function, +}; + /** * React {@code Component} for displaying an action in {@code RemoteVideoMenu}. * * @extends {Component} */ -export default class RemoteVideoMenuButton extends Component { - /** - * {@code RemoteVideoMenuButton}'s property types. - * - * @static - */ - static propTypes = { - /** - * Text to display within the component that describes the onClick - * action. - */ - buttonText: PropTypes.string, - - /** - * Additional CSS classes to add to the component. - */ - displayClass: PropTypes.string, - - /** - * The CSS classes for the icon that will display within the component. - */ - 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: PropTypes.string, - - /** - * Callback to invoke when the component is clicked. - */ - onClick: PropTypes.func - }; - +export default class RemoteVideoMenuButton extends Component { /** * Implements React's {@link Component#render()}. * diff --git a/react/features/remote-video-menu/components/VolumeSlider.js b/react/features/remote-video-menu/components/VolumeSlider.js index c03ce4cc1..75c562a83 100644 --- a/react/features/remote-video-menu/components/VolumeSlider.js +++ b/react/features/remote-video-menu/components/VolumeSlider.js @@ -1,4 +1,5 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; /** @@ -8,48 +9,53 @@ import React, { Component } from 'react'; */ const VOLUME_SLIDER_SCALE = 100; +/** + * The type of the React {@code Component} props of {@link VolumeSlider}. + */ +type Props = { + + /** + * The value of the audio slider should display at when the component first + * mounts. Changes will be stored in state. The value should be a number + * between 0 and 1. + */ + initialValue: number, + + /** + * The callback to invoke when the audio slider value changes. + */ + onChange: Function +}; + +/** + * The type of the React {@code Component} state of {@link VolumeSlider}. + */ +type State = { + + /** + * The volume of the participant's audio element. The value will + * be represented by a slider. + */ + volumeLevel: number +}; + /** * Implements a React {@link Component} which displays an input slider for * adjusting the local volume of a remote participant. * * @extends Component */ -class VolumeSlider extends Component { - /** - * {@code VolumeSlider} component's property types. - * - * @static - */ - static propTypes = { - /** - * The value of the audio slider should display at when the component - * first mounts. Changes will be stored in state. The value should be a - * number between 0 and 1. - */ - initialValue: PropTypes.number, - - /** - * The callback to invoke when the audio slider value changes. - */ - onChange: PropTypes.func - }; - +class VolumeSlider extends Component { /** * Initializes a new {@code VolumeSlider} instance. * * @param {Object} props - The read-only properties with which the new * instance is to be initialized. */ - constructor(props) { + constructor(props: Props) { super(props); this.state = { - /** - * The volume of the participant's audio element. The value will - * be represented by a slider. - * - * @type {Number} - */ volumeLevel: (props.initialValue || 0) * VOLUME_SLIDER_SCALE }; @@ -84,6 +90,8 @@ class VolumeSlider extends Component { ); } + _onVolumeChange: (Object) => void; + /** * Sets the internal state of the volume level for the volume slider. * Invokes the prop onVolumeChange to notify of volume changes. diff --git a/react/features/room-lock/components/PasswordRequiredPrompt.native.js b/react/features/room-lock/components/PasswordRequiredPrompt.native.js index ffe8df3fd..76f9d7334 100644 --- a/react/features/room-lock/components/PasswordRequiredPrompt.native.js +++ b/react/features/room-lock/components/PasswordRequiredPrompt.native.js @@ -1,6 +1,5 @@ // @flow -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { connect } from 'react-redux'; @@ -9,6 +8,15 @@ import { Dialog } from '../../base/dialog'; import { _cancelPasswordRequiredPrompt } from '../actions'; +/** + * The style of the {@link TextInput} rendered by + * {@code PasswordRequiredPrompt}. As it requests the entry of a password, the + * entry should better be secure. + */ +const _TEXT_INPUT_PROPS = { + secureTextEntry: true +}; + /** * {@code PasswordRequiredPrompt}'s React {@code Component} prop types. */ @@ -20,16 +28,11 @@ type Props = { * @type {JitsiConference} */ conference: { join: Function }, - dispatch: Dispatch<*> -}; -/** - * The style of the {@link TextInput} rendered by - * {@code PasswordRequiredPrompt}. As it requests the entry of a password, the - * entry should better be secure. - */ -const _TEXT_INPUT_PROPS = { - secureTextEntry: true + /** + * The redux dispatch function. + */ + dispatch: Dispatch<*> }; /** @@ -37,16 +40,6 @@ const _TEXT_INPUT_PROPS = { * is required to join a conference. */ class PasswordRequiredPrompt extends Component { - /** - * {@code PasswordRequiredPrompt}'s React {@code Component} prop types. - * - * @static - */ - static propTypes = { - conference: PropTypes.object, - dispatch: PropTypes.func - }; - /** * Initializes a new {@code PasswordRequiredPrompt} instance. * diff --git a/react/features/room-lock/components/PasswordRequiredPrompt.web.js b/react/features/room-lock/components/PasswordRequiredPrompt.web.js index 407b2a7cf..21aff4c1c 100644 --- a/react/features/room-lock/components/PasswordRequiredPrompt.web.js +++ b/react/features/room-lock/components/PasswordRequiredPrompt.web.js @@ -1,5 +1,5 @@ // @flow -import PropTypes from 'prop-types'; + import React, { Component } from 'react'; import { connect } from 'react-redux'; import { FieldTextStateless as TextField } from '@atlaskit/field-text'; @@ -8,27 +8,45 @@ import { setPassword } from '../../base/conference'; import { Dialog } from '../../base/dialog'; import { translate } from '../../base/i18n'; +/** + * The type of the React {@code Component} props of + * {@link PasswordRequiredPrompt}. + */ +type Props = { + + /** + * The JitsiConference which requires a password. + */ + conference: Object, + + /** + * The redux store's {@code dispatch} function. + */ + dispatch: Dispatch<*>, + + /** + * The translate function. + */ + t: Function +}; + +/** + * The type of the React {@code Component} state of + * {@link PasswordRequiredPrompt}. + */ +type State = { + + /** + * The password entered by the local participant. + */ + password: string +} + /** * Implements a React Component which prompts the user when a password is * required to join a conference. */ -class PasswordRequiredPrompt extends Component<*, *> { - /** - * PasswordRequiredPrompt component's property types. - * - * @static - */ - static propTypes = { - /** - * The JitsiConference which requires a password. - * - * @type {JitsiConference} - */ - conference: PropTypes.object, - dispatch: PropTypes.func, - t: PropTypes.func - }; - +class PasswordRequiredPrompt extends Component { state = { password: '' }; @@ -39,7 +57,7 @@ class PasswordRequiredPrompt extends Component<*, *> { * @param {Object} props - The read-only properties with which the new * instance is to be initialized. */ - constructor(props) { + constructor(props: Props) { super(props); // Bind event handlers so they are only bound once per instance. diff --git a/react/features/room-lock/components/RoomLockPrompt.native.js b/react/features/room-lock/components/RoomLockPrompt.native.js index 42bd7d051..7b54ffa50 100644 --- a/react/features/room-lock/components/RoomLockPrompt.native.js +++ b/react/features/room-lock/components/RoomLockPrompt.native.js @@ -1,6 +1,5 @@ // @flow -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { connect } from 'react-redux'; @@ -18,26 +17,27 @@ const _TEXT_INPUT_PROPS = { autoCorrect: false }; +/** + * The type of the React {@code Component} props of {@link RoomLockPrompt}. + */ +type Props = { + + /** + * The JitsiConference which requires a password. + */ + conference: Object, + + /** + * Redux store dispatch function. + */ + dispatch: Dispatch<*>, +}; + /** * Implements a React Component which prompts the user for a password to lock a * conference/room. */ -class RoomLockPrompt extends Component<*> { - /** - * RoomLockPrompt component's property types. - * - * @static - */ - static propTypes = { - /** - * The JitsiConference which requires a password. - * - * @type {JitsiConference} - */ - conference: PropTypes.object, - dispatch: PropTypes.func - }; - +class RoomLockPrompt extends Component { /** * Initializes a new RoomLockPrompt instance. * diff --git a/react/features/speaker-stats/components/SpeakerStats.js b/react/features/speaker-stats/components/SpeakerStats.js index e5a36d2a3..c191f56ce 100644 --- a/react/features/speaker-stats/components/SpeakerStats.js +++ b/react/features/speaker-stats/components/SpeakerStats.js @@ -1,6 +1,5 @@ // @flow -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { connect } from 'react-redux'; @@ -12,35 +11,44 @@ import SpeakerStatsLabels from './SpeakerStatsLabels'; declare var interfaceConfig: Object; +/** + * The type of the React {@code Component} props of {@link SpeakerStats} + */ +type Props = { + + /** + * The display name for the local participant obtained from the redux store. + */ + _localDisplayName: string, + + /** + * The JitsiConference from which stats will be pulled. + */ + conference: Object, + + /** + * The function to translate human-readable text. + */ + t: Function +}; + +/** + * The type of the React {@code Component} state of {@link SpeakerStats} + */ +type State = { + + /** + * The stats summary provided by the JitsiConference. + */ + stats: Object +}; + /** * React component for displaying a list of speaker stats. * * @extends Component */ -class SpeakerStats extends Component<*, *> { - /** - * SpeakerStats component's property types. - * - * @static - */ - static propTypes = { - /** - * The display name for the local participant obtained from the redux - * store. - */ - _localDisplayName: PropTypes.string, - - /** - * The JitsiConference from which stats will be pulled. - */ - conference: PropTypes.object, - - /** - * The function to translate human-readable text. - */ - t: PropTypes.func - }; - +class SpeakerStats extends Component { state = { stats: {} }; diff --git a/react/features/speaker-stats/components/SpeakerStatsItem.js b/react/features/speaker-stats/components/SpeakerStatsItem.js index 5f94ab87f..c00ae615a 100644 --- a/react/features/speaker-stats/components/SpeakerStatsItem.js +++ b/react/features/speaker-stats/components/SpeakerStatsItem.js @@ -1,41 +1,41 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import TimeElapsed from './TimeElapsed'; +/** + * The type of the React {@code Component} props of {@link SpeakerStatsItem}. + */ +type Props = { + + /** + * The name of the participant. + */ + displayName: string, + + /** + * The total milliseconds the participant has been dominant speaker. + */ + dominantSpeakerTime: number, + + /** + * True if the participant is no longer in the meeting. + */ + hasLeft: boolean, + + /** + * True if the participant is currently the dominant speaker. + */ + isDominantSpeaker: boolean +}; + /** * React component for display an individual user's speaker stats. * * @extends Component */ -class SpeakerStatsItem extends Component { - /** - * SpeakerStatsItem component's property types. - * - * @static - */ - static propTypes = { - /** - * The name of the participant. - */ - displayName: PropTypes.string, - - /** - * The total milliseconds the participant has been dominant speaker. - */ - dominantSpeakerTime: PropTypes.number, - - /** - * True if the participant is no longer in the meeting. - */ - hasLeft: PropTypes.bool, - - /** - * True if the participant is currently the dominant speaker. - */ - isDominantSpeaker: PropTypes.bool - }; - +class SpeakerStatsItem extends Component { /** * Implements React's {@link Component#render()}. * diff --git a/react/features/speaker-stats/components/SpeakerStatsLabels.js b/react/features/speaker-stats/components/SpeakerStatsLabels.js index b63b123c5..3e2e467b6 100644 --- a/react/features/speaker-stats/components/SpeakerStatsLabels.js +++ b/react/features/speaker-stats/components/SpeakerStatsLabels.js @@ -1,26 +1,26 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import { translate } from '../../base/i18n'; +/** + * The type of the React {@code Component} props of {@link SpeakerStatsLabels}. + */ +type Props = { + + /** + * The function to translate human-readable text. + */ + t: Function +}; + /** * React component for labeling speaker stats column items. * * @extends Component */ -class SpeakerStatsLabels extends Component { - /** - * SpeakerStatsLabels component's property types. - * - * @static - */ - static propTypes = { - /** - * The function to translate human-readable text. - */ - t: PropTypes.func - }; - +class SpeakerStatsLabels extends Component { /** * Implements React's {@link Component#render()}. * diff --git a/react/features/speaker-stats/components/TimeElapsed.js b/react/features/speaker-stats/components/TimeElapsed.js index 674a868f7..44a439a10 100644 --- a/react/features/speaker-stats/components/TimeElapsed.js +++ b/react/features/speaker-stats/components/TimeElapsed.js @@ -1,8 +1,25 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; import { translate } from '../../base/i18n'; +/** + * The type of the React {@code Component} props of {@link TimeElapsed}. + */ +type Props = { + + /** + * The function to translate human-readable text. + */ + t: Function, + + /** + * The milliseconds to be converted into a human-readable format. + */ + time: number +}; + /** * React component for displaying total time elapsed. Converts a total count of * milliseconds into a more humanized form: "# hours, # minutes, # seconds". @@ -10,24 +27,7 @@ import { translate } from '../../base/i18n'; * * @extends Component */ -class TimeElapsed extends Component { - /** - * TimeElapsed component's property types. - * - * @static - */ - static propTypes = { - /** - * The function to translate human-readable text. - */ - t: PropTypes.func, - - /** - * The milliseconds to be converted into a human-readable format. - */ - time: PropTypes.number - }; - +class TimeElapsed extends Component { /** * Implements React's {@link Component#render()}. * diff --git a/react/features/toolbox/components/AbstractToolbarButton.js b/react/features/toolbox/components/AbstractToolbarButton.js index 32e0bc834..9bad27975 100644 --- a/react/features/toolbox/components/AbstractToolbarButton.js +++ b/react/features/toolbox/components/AbstractToolbarButton.js @@ -1,67 +1,66 @@ -import PropTypes from 'prop-types'; +/* @flow */ + import React, { Component } from 'react'; +/** + * The type of the React {@code Component} props of + * {@link AbstractToolbarButton}. + */ +export type Props = { + + /** + * A succinct description of what the button does. Used by accessibility + * tools and torture tests. + */ + accessibilityLabel: string, + + /** + * The name of the Icon of this {@code AbstractToolbarButton}. + */ + iconName: string, + + /** + * The style of the Icon of this {@code AbstractToolbarButton}. + */ + iconStyle?: Object, + + /** + * On click handler. + */ + onClick: Function, + + /** + * {@code AbstractToolbarButton} styles. + */ + style?: Array | Object, + + /** + * The color underlaying the button. + */ + underlayColor?: any +}; + /** * Abstract (base) class for a button in {@link Toolbar}. * * @abstract */ -export default class AbstractToolbarButton extends Component { - /** - * AbstractToolbarButton component's property types. - * - * @static - */ - static propTypes = { - /** - * A succinct description of what the button does. Used by accessibility - * tools and torture tests. - */ - accessibilityLabel: PropTypes.string, - - /** - * The name of the Icon of this {@code AbstractToolbarButton}. - */ - iconName: PropTypes.string, - - /** - * The style of the Icon of this {@code AbstractToolbarButton}. - */ - iconStyle: PropTypes.object, - - /** - * On click handler. - */ - onClick: PropTypes.func, - - /** - * {@code AbstractToolbarButton} styles. - */ - style: - PropTypes.oneOfType([ - PropTypes.array, - PropTypes.object - ]), - - /** - * The color underlaying the button. - */ - underlayColor: PropTypes.any - }; - +export default class AbstractToolbarButton extends Component

{ /** * Initializes a new {@code AbstractToolbarButton} instance. * * @param {Object} props - The React {@code Component} props to initialize * the new {@code AbstractToolbarButton} instance with. */ - constructor(props) { + constructor(props: P) { super(props); // Bind event handlers so they are only bound once per instance. this._onClick = this._onClick.bind(this); } + _onClick: (any) => any; + /** * Handles clicking/pressing this {@code AbstractToolbarButton} by * forwarding the event to the {@code onClick} prop of this instance if any. @@ -86,15 +85,22 @@ export default class AbstractToolbarButton extends Component { return this._renderButton(this._renderIcon()); } + _renderButton: (React$Element<*> | null) => React$Element<*>; + /** * Renders the icon of this {@code AbstractToolbarButton}. * * @param {string|ReactClass} type - The React Component type of the icon to * be rendered. * @protected - * @returns {ReactElement} The icon of this {@code AbstractToolbarButton}. + * @returns {ReactElement|null} The icon of this + * {@code AbstractToolbarButton}. */ _renderIcon(type) { + if (!type) { + return null; + } + const props = {}; 'iconName' in this.props && (props.name = this.props.iconName); diff --git a/react/features/toolbox/components/web/OverflowMenuButton.js b/react/features/toolbox/components/web/OverflowMenuButton.js index 37759be0b..98401da93 100644 --- a/react/features/toolbox/components/web/OverflowMenuButton.js +++ b/react/features/toolbox/components/web/OverflowMenuButton.js @@ -1,5 +1,6 @@ +/* @flow */ + import InlineDialog from '@atlaskit/inline-dialog'; -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { createToolbarEvent, sendAnalytics } from '../../../analytics'; @@ -7,46 +8,45 @@ import { translate } from '../../../base/i18n'; import ToolbarButton from './ToolbarButton'; +/** + * The type of the React {@code Component} props of {@link OverflowMenuButton}. + */ +type Props = { + + /** + * A child React Element to display within {@code InlineDialog}. + */ + children: React$Node, + + /** + * Whether or not the OverflowMenu popover should display. + */ + isOpen: boolean, + + /** + * Calback to change the visibility of the overflow menu. + */ + onVisibilityChange: Function, + + /** + * Invoked to obtain translated strings. + */ + t: Function +}; + /** * A React {@code Component} for opening or closing the {@code OverflowMenu}. * * @extends Component */ -class OverflowMenuButton extends Component { - /** - * {@code OverflowMenuButton} component's property types. - * - * @static - */ - static propTypes = { - /** - * A child React Element to display within {@code InlineDialog}. - */ - children: PropTypes.object, - - /** - * Whether or not the OverflowMenu popover should display. - */ - isOpen: PropTypes.bool, - - /** - * Calback to change the visiblility of the overflow menu. - */ - onVisibilityChange: PropTypes.func, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func - }; - +class OverflowMenuButton extends Component { /** * Initializes a new {@code OverflowMenuButton} instance. * * @param {Object} props - The read-only properties with which the new * instance is to be initialized. */ - constructor(props) { + constructor(props: Props) { super(props); // Bind event handlers so they are only bound once per instance. @@ -83,6 +83,8 @@ class OverflowMenuButton extends Component { ); } + _onCloseDialog: () => void; + /** * Callback invoked when {@code InlineDialog} signals that it should be * close. @@ -94,6 +96,8 @@ class OverflowMenuButton extends Component { this.props.onVisibilityChange(false); } + _onToggleDialogVisibility: () => void; + /** * Callback invoked to signal that an event has occurred that should change * the visibility of the {@code InlineDialog} component. diff --git a/react/features/toolbox/components/web/OverflowMenuProfileItem.js b/react/features/toolbox/components/web/OverflowMenuProfileItem.js index 3d586108c..93e9b5f92 100644 --- a/react/features/toolbox/components/web/OverflowMenuProfileItem.js +++ b/react/features/toolbox/components/web/OverflowMenuProfileItem.js @@ -1,6 +1,5 @@ -/* globals interfaceConfig */ +/* @flow */ -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { connect } from 'react-redux'; @@ -10,43 +9,45 @@ import { getLocalParticipant } from '../../../base/participants'; +declare var interfaceConfig: Object; + +/** + * The type of the React {@code Component} props of + * {@link OverflowMenuProfileItem}. + */ +type Props = { + + /** + * The redux representation of the local participant. + */ + _localParticipant: Object, + + /** + * Whether the button support clicking or not. + */ + _unclickable: boolean, + + /** + * The callback to invoke when {@code OverflowMenuProfileItem} is + * clicked. + */ + onClick: Function +}; + /** * A React {@code Component} for displaying a link with a profile avatar as an * icon. * * @extends Component */ -class OverflowMenuProfileItem extends Component { - /** - * {@code OverflowMenuProfileItem}'s property types. - * - * @static - */ - static propTypes = { - /** - * The redux representation of the local participant. - */ - _localParticipant: PropTypes.object, - - /** - * Whether the button support clicking or not. - */ - _unclickable: PropTypes.bool, - - /** - * The callback to invoke when {@code OverflowMenuProfileItem} is - * clicked. - */ - onClick: PropTypes.func - }; - +class OverflowMenuProfileItem extends Component { /** * Initializes a new {@code OverflowMenuProfileItem} instance. * * @param {Object} props - The read-only properties with which the new * instance is to be initialized. */ - constructor(props) { + constructor(props: Props) { super(props); // Bind event handler so it is only bound once for every instance. @@ -87,6 +88,8 @@ class OverflowMenuProfileItem extends Component { ); } + _onClick: () => void; + /** * Invokes an on click callback if clicking is allowed. * diff --git a/react/features/toolbox/components/web/ToolbarButton.js b/react/features/toolbox/components/web/ToolbarButton.js index 9c4d8ee49..724cd5fd2 100644 --- a/react/features/toolbox/components/web/ToolbarButton.js +++ b/react/features/toolbox/components/web/ToolbarButton.js @@ -1,15 +1,35 @@ +/* @flow */ + import Tooltip from '@atlaskit/tooltip'; -import PropTypes from 'prop-types'; import React from 'react'; import AbstractToolbarButton from '../AbstractToolbarButton'; +import type { Props as AbstractToolbarButtonProps } + from '../AbstractToolbarButton'; + +/** + * The type of the React {@code Component} props of {@link ToolbarButton}. + */ +type Props = AbstractToolbarButtonProps & { + + /** + * The text to display in the tooltip. + */ + tooltip: string, + + /** + * From which direction the tooltip should appear, relative to the + * button. + */ + tooltipPosition: string +}; /** * Represents a button in the toolbar. * * @extends AbstractToolbarButton */ -class ToolbarButton extends AbstractToolbarButton { +class ToolbarButton extends AbstractToolbarButton { /** * Default values for {@code ToolbarButton} component's properties. * @@ -19,26 +39,6 @@ class ToolbarButton extends AbstractToolbarButton { tooltipPosition: 'top' }; - /** - * {@code ToolbarButton} component's property types. - * - * @static - */ - static propTypes = { - ...AbstractToolbarButton.propTypes, - - /** - * The text to display in the tooltip. - */ - tooltip: PropTypes.string, - - /** - * From which direction the tooltip should appear, relative to the - * button. - */ - tooltipPosition: PropTypes.string - } - /** * Renders the button of this {@code ToolbarButton}. * diff --git a/react/features/unsupported-browser/components/UnsupportedDesktopBrowser.js b/react/features/unsupported-browser/components/UnsupportedDesktopBrowser.js index c051c4ad4..af1e26022 100644 --- a/react/features/unsupported-browser/components/UnsupportedDesktopBrowser.js +++ b/react/features/unsupported-browser/components/UnsupportedDesktopBrowser.js @@ -1,6 +1,5 @@ /* @flow */ -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { translate } from '../../base/i18n'; @@ -16,27 +15,24 @@ import { CHROME, EDGE, FIREFOX, SAFARI } from './browserLinks'; */ const _SNS = 'unsupported-desktop-browser'; +/** + * The type of the React {@code Component} props of + * {@link UnsupportedDesktopBrowser}. + */ +type Props = { + + /** + * The function to translate human-readable text. + */ + t: Function +}; + /** * React component representing unsupported browser page. * * @class UnsupportedDesktopBrowser */ -class UnsupportedDesktopBrowser extends Component<*> { - /** - * UnsupportedDesktopBrowser component's property types. - * - * @static - */ - static propTypes = { - /** - * The function to translate human-readable text. - * - * @public - * @type {Function} - */ - t: PropTypes.func - }; - +class UnsupportedDesktopBrowser extends Component { /** * Renders the component. * diff --git a/react/features/video-quality/components/VideoQualitySlider.web.js b/react/features/video-quality/components/VideoQualitySlider.web.js index bec9cd84a..c3e180089 100644 --- a/react/features/video-quality/components/VideoQualitySlider.web.js +++ b/react/features/video-quality/components/VideoQualitySlider.web.js @@ -1,5 +1,6 @@ +/* @flow */ + import InlineMessage from '@atlaskit/inline-message'; -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { connect } from 'react-redux'; @@ -39,51 +40,52 @@ const createEvent = function(quality) { }); }; +/** + * The type of the React {@code Component} props of {@link VideoQualitySlider}. + */ +type Props = { + + /** + * Whether or not the conference is in audio only mode. + */ + _audioOnly: Boolean, + + /** + * Whether or not the conference is in peer to peer mode. + */ + _p2p: Boolean, + + /** + * The currently configured maximum quality resolution to be received + * from remote participants. + */ + _receiverVideoQuality: Number, + + /** + * Whether or not displaying video is supported in the current + * environment. If false, the slider will be disabled. + */ + _videoSupported: Boolean, + + /** + * Invoked to request toggling of audio only mode. + */ + dispatch: Dispatch<*>, + + /** + * Invoked to obtain translated strings. + */ + t: Function +}; + /** * Implements a React {@link Component} which displays a slider for selecting a * new receive video quality. * * @extends Component */ -class VideoQualitySlider extends Component { - /** - * {@code VideoQualitySlider}'s property types. - * - * @static - */ - static propTypes = { - /** - * Whether or not the conference is in audio only mode. - */ - _audioOnly: PropTypes.bool, - - /** - * Whether or not the conference is in peer to peer mode. - */ - _p2p: PropTypes.bool, - - /** - * The currently configured maximum quality resolution to be received - * from remote participants. - */ - _receiverVideoQuality: PropTypes.number, - - /** - * Whether or not displaying video is supported in the current - * environment. If false, the slider will be disabled. - */ - _videoSupported: PropTypes.bool, - - /** - * Invoked to request toggling of audio only mode. - */ - dispatch: PropTypes.func, - - /** - * Invoked to obtain translated strings. - */ - t: PropTypes.func - }; +class VideoQualitySlider extends Component { + _sliderOptions: Array; /** * Initializes a new {@code VideoQualitySlider} instance. @@ -261,6 +263,8 @@ class VideoQualitySlider extends Component { }); } + _enableAudioOnly: () => void; + /** * Dispatches an action to enable audio only mode. * @@ -273,6 +277,8 @@ class VideoQualitySlider extends Component { this.props.dispatch(setAudioOnly(true)); } + _enableHighDefinition: () => void; + /** * Handles the action of the high definition video being selected. * Dispatches an action to receive high quality video from remote @@ -287,6 +293,8 @@ class VideoQualitySlider extends Component { this._setPreferredVideoQuality(HIGH); } + _enableLowDefinition: () => void; + /** * Dispatches an action to receive low quality video from remote * participants. @@ -300,6 +308,8 @@ class VideoQualitySlider extends Component { this._setPreferredVideoQuality(LOW); } + _enableStandardDefinition: () => void; + /** * Dispatches an action to receive standard quality video from remote * participants. @@ -337,6 +347,8 @@ class VideoQualitySlider extends Component { return _sliderOptions.indexOf(matchingOption); } + _onSliderChange: () => void; + /** * Invokes a callback when the selected video quality changes. * diff --git a/react/features/welcome/components/LocalVideoTrackUnderlay.native.js b/react/features/welcome/components/LocalVideoTrackUnderlay.native.js index 84b54fe66..17471cd06 100644 --- a/react/features/welcome/components/LocalVideoTrackUnderlay.native.js +++ b/react/features/welcome/components/LocalVideoTrackUnderlay.native.js @@ -1,6 +1,5 @@ /* @flow */ -import PropTypes from 'prop-types'; import React, { Component } from 'react'; import { View } from 'react-native'; import { connect } from 'react-redux'; @@ -11,31 +10,47 @@ import { getLocalVideoTrack } from '../../base/tracks'; import styles from './styles'; +/** + * The type of the React {@code Component} props of + * {@link LocalVideoTrackUnderlay}. + */ +type Props = { + + /** + * The redux representation of the local participant's video track. + */ + _localVideoTrack: Object, + + /** + * React Elements to display within the component. + */ + children: React$Node, + + /** + * The style, if any, to apply to {@link LocalVideoTrackUnderlay} in + * addition to its default style. + */ + style: Object +}; + +/** + * The type of the React {@code Component} state of + * {@link LocalVideoTrackUnderlay}. + */ +type State = { + + /** + * The style of {@code LocalVideoTrackUnderlay} which is a combination + * of its default style and the consumer-specified style. + */ + style: Object +}; + /** * Implements a React {@code Component} which underlays the local video track, * if any, underneath its children. */ -class LocalVideoTrackUnderlay extends Component<*, *> { - state: { - - /** - * The style of {@code LocalVideoTrackUnderlay} which is a combination - * of its default style and the consumer-specified style. - */ - style: Object - }; - - /** - * {@code LocalVideoTrackUnderlay}'s React {@code Component} prop types. - * - * @static - */ - static propTypes = { - _localVideoTrack: PropTypes.object, - children: PropTypes.node, - style: PropTypes.object - }; - +class LocalVideoTrackUnderlay extends Component { /** * Initializes a new {@code LocalVideoTrackUnderlay} instance. *