From 46597bd6e72913a4840fdd101fd5c55436e3b0a7 Mon Sep 17 00:00:00 2001 From: Robert Pintilii Date: Mon, 27 Mar 2023 11:34:33 +0300 Subject: [PATCH] ref(TS Convert some Abstract classes to TS (#13105) --- .../{AbstractAudio.js => AbstractAudio.ts} | 36 +++--- ...ctVideoTrack.js => AbstractVideoTrack.tsx} | 27 ++--- .../{AbstractPage.js => AbstractPage.ts} | 2 - ...bstractTestHint.js => AbstractTestHint.ts} | 15 ++- ...actConference.js => AbstractConference.ts} | 17 ++- ...LobbyScreen.js => AbstractLobbyScreen.tsx} | 112 +++++++----------- .../{index.native.js => index.native.ts} | 2 - .../components/{index.web.js => index.web.ts} | 2 - .../components/native/{index.js => index.ts} | 2 - .../components/web/{index.js => index.ts} | 2 - ...ctRecentList.js => AbstractRecentList.tsx} | 28 ++--- ...htButton.js => AbstractHighlightButton.ts} | 39 +++--- .../Recording/web/HighlightButton.tsx | 4 +- ...ideoManager.js => AbstractVideoManager.ts} | 52 ++++---- ...bstractCaptions.js => AbstractCaptions.ts} | 18 +-- react/features/subtitles/reducer.ts | 11 +- 16 files changed, 165 insertions(+), 204 deletions(-) rename react/features/base/media/components/{AbstractAudio.js => AbstractAudio.ts} (82%) rename react/features/base/media/components/{AbstractVideoTrack.js => AbstractVideoTrack.tsx} (89%) rename react/features/base/react/components/{AbstractPage.js => AbstractPage.ts} (98%) rename react/features/base/testing/components/{AbstractTestHint.js => AbstractTestHint.ts} (87%) rename react/features/conference/components/{AbstractConference.js => AbstractConference.ts} (81%) rename react/features/lobby/components/{AbstractLobbyScreen.js => AbstractLobbyScreen.tsx} (84%) rename react/features/notifications/components/{index.native.js => index.native.ts} (72%) rename react/features/notifications/components/{index.web.js => index.web.ts} (69%) rename react/features/notifications/components/native/{index.js => index.ts} (93%) rename react/features/notifications/components/web/{index.js => index.ts} (93%) rename react/features/recent-list/components/{AbstractRecentList.js => AbstractRecentList.tsx} (82%) rename react/features/recording/components/Recording/{AbstractHighlightButton.js => AbstractHighlightButton.ts} (77%) rename react/features/shared-video/components/native/{AbstractVideoManager.js => AbstractVideoManager.ts} (80%) rename react/features/subtitles/components/{AbstractCaptions.js => AbstractCaptions.ts} (87%) diff --git a/react/features/base/media/components/AbstractAudio.js b/react/features/base/media/components/AbstractAudio.ts similarity index 82% rename from react/features/base/media/components/AbstractAudio.js rename to react/features/base/media/components/AbstractAudio.ts index 26f395e6c8..61d8a8e020 100644 --- a/react/features/base/media/components/AbstractAudio.js +++ b/react/features/base/media/components/AbstractAudio.ts @@ -1,5 +1,3 @@ -// @flow - import { Component } from 'react'; import logger from '../logger'; @@ -9,11 +7,11 @@ import logger from '../logger'; * playback. */ export type AudioElement = { - currentTime: number, - pause: () => void, - play: () => void, - setSinkId?: string => Function, - stop: () => void + currentTime: number; + pause: () => void; + play: () => void; + setSinkId?: (id: string) => Promise; + stop: () => void; }; /** @@ -21,11 +19,13 @@ export type AudioElement = { */ type Props = { + loop?: boolean; + /** * A callback which will be called with {@code AbstractAudio} instance once * the audio element is loaded. */ - setRef?: ?AudioElement => void, + setRef?: (ref?: any) => void; /** * The URL of a media resource to use in the element. @@ -35,10 +35,9 @@ type Props = { * * @type {Object | string} */ - src: Object | string, - stream?: Object, - loop?: ?boolean -} + src: Object | string; + stream?: Object; +}; /** * The React {@link Component} which is similar to Web's @@ -49,7 +48,7 @@ export default class AbstractAudio extends Component { * The {@link AudioElement} instance which implements the audio playback * functionality. */ - _audioElementImpl: ?AudioElement; + _audioElementImpl: AudioElement | undefined; /** * Initializes a new {@code AbstractAudio} instance. @@ -71,7 +70,7 @@ export default class AbstractAudio extends Component { * @returns {void} */ pause(): void { - this._audioElementImpl && this._audioElementImpl.pause(); + this._audioElementImpl?.pause(); } /** @@ -81,11 +80,9 @@ export default class AbstractAudio extends Component { * @returns {void} */ play(): void { - this._audioElementImpl && this._audioElementImpl.play(); + this._audioElementImpl?.play(); } - setAudioElementImpl: ?AudioElement => void; - /** * Set the (reference to the) {@link AudioElement} object which implements * the audio playback functionality. @@ -95,13 +92,12 @@ export default class AbstractAudio extends Component { * @protected * @returns {void} */ - setAudioElementImpl(element: ?AudioElement): void { + setAudioElementImpl(element?: AudioElement): void { this._audioElementImpl = element; // setRef const { setRef } = this.props; - // $FlowFixMe typeof setRef === 'function' && setRef(element ? this : null); } @@ -126,6 +122,6 @@ export default class AbstractAudio extends Component { * @returns {void} */ stop(): void { - this._audioElementImpl && this._audioElementImpl.stop(); + this._audioElementImpl?.stop(); } } diff --git a/react/features/base/media/components/AbstractVideoTrack.js b/react/features/base/media/components/AbstractVideoTrack.tsx similarity index 89% rename from react/features/base/media/components/AbstractVideoTrack.js rename to react/features/base/media/components/AbstractVideoTrack.tsx index 1f3a99f15f..c5782839e3 100644 --- a/react/features/base/media/components/AbstractVideoTrack.js +++ b/react/features/base/media/components/AbstractVideoTrack.tsx @@ -1,11 +1,10 @@ -/* @flow */ - import React, { Component } from 'react'; -import type { Dispatch } from 'redux'; -import { trackVideoStarted } from '../../tracks'; +import { IStore } from '../../../app/types'; +import { trackVideoStarted } from '../../tracks/actions'; import { shouldRenderVideoTrack } from '../functions'; +// @ts-ignore import { Video } from './_'; /** @@ -16,36 +15,36 @@ export type Props = { /** * The Redux dispatch function. */ - dispatch: Dispatch, + dispatch: IStore['dispatch']; /** * Callback to invoke when the {@link Video} of {@code AbstractVideoTrack} * is clicked/pressed. */ - onPress?: Function, + onPress?: Function; /** * The Redux representation of the participant's video track. */ - videoTrack?: Object, + videoTrack?: any; /** * Whether or not video should be rendered after knowing video playback has * started. */ - waitForVideoStarted?: boolean, + waitForVideoStarted?: boolean; /** * The z-order of the Video of AbstractVideoTrack in the stacking space of * all Videos. For more details, refer to the zOrder property of the Video * class for React Native. */ - zOrder?: number, + zOrder?: number; /** * Indicates whether zooming (pinch to zoom and/or drag) is enabled. */ - zoomEnabled?: boolean + zoomEnabled?: boolean; }; /** @@ -54,7 +53,7 @@ export type Props = { * * @abstract */ -export default class AbstractVideoTrack extends Component

{ +export default class AbstractVideoTrack

extends Component

{ /** * Initializes a new AbstractVideoTrack instance. * @@ -113,7 +112,7 @@ export default class AbstractVideoTrack extends Component

{ return (

{ ); } - _onVideoPlaying: () => void; - /** * Handler for case when video starts to play. * @@ -147,6 +144,6 @@ export default class AbstractVideoTrack extends Component

{ * @returns {*} If the specified value is falsy, null; otherwise, the specified * value. */ -function _falsy2null(value) { +function _falsy2null(value: any) { return value || null; } diff --git a/react/features/base/react/components/AbstractPage.js b/react/features/base/react/components/AbstractPage.ts similarity index 98% rename from react/features/base/react/components/AbstractPage.js rename to react/features/base/react/components/AbstractPage.ts index 662c826826..279c968804 100644 --- a/react/features/base/react/components/AbstractPage.js +++ b/react/features/base/react/components/AbstractPage.ts @@ -1,5 +1,3 @@ -// @flow - import { Component } from 'react'; /** diff --git a/react/features/base/testing/components/AbstractTestHint.js b/react/features/base/testing/components/AbstractTestHint.ts similarity index 87% rename from react/features/base/testing/components/AbstractTestHint.js rename to react/features/base/testing/components/AbstractTestHint.ts index a5e23d8f43..6fffe2096b 100644 --- a/react/features/base/testing/components/AbstractTestHint.js +++ b/react/features/base/testing/components/AbstractTestHint.ts @@ -1,5 +1,4 @@ -/* @flow */ - +import { IReduxState } from '../../../app/types'; import { isTestModeEnabled } from '../functions'; /** @@ -17,25 +16,25 @@ export type TestHintProps = { * {@link TestHint} Components are rendered only if this flag is set to * {@code true}. */ - _testModeEnabled: boolean, + _testModeEnabled: boolean; /** * The test hint's identifier string. Must be unique in the app instance * scope. */ - id: string, + id: string; /** * The optional "on press" handler which can be used to bind a click handler * to a {@link TestHint}. */ - onPress: ?Function, + onPress?: Function; /** * The test hint's (text) value which is to be consumed by the tests. */ - value: string -} + value: string; +}; /** * Maps (parts of) the redux state to {@link TestHint}'s React {@code Component} @@ -47,7 +46,7 @@ export type TestHintProps = { * _testModeEnabled: boolean * }} */ -export function _mapStateToProps(state: Object) { +export function _mapStateToProps(state: IReduxState) { return { /** diff --git a/react/features/conference/components/AbstractConference.js b/react/features/conference/components/AbstractConference.ts similarity index 81% rename from react/features/conference/components/AbstractConference.js rename to react/features/conference/components/AbstractConference.ts index df4c04a472..60764c6ca8 100644 --- a/react/features/conference/components/AbstractConference.js +++ b/react/features/conference/components/AbstractConference.ts @@ -1,9 +1,8 @@ -// @flow - import React, { Component } from 'react'; +import { IReduxState } from '../../app/types'; import { NotificationsContainer } from '../../notifications/components'; -import { shouldDisplayTileView } from '../../video-layout'; +import { shouldDisplayTileView } from '../../video-layout/functions.any'; import { shouldDisplayNotifications } from '../functions'; /** @@ -17,7 +16,7 @@ export type AbstractProps = { * @protected * @type {boolean} */ - _notificationsVisible: boolean, + _notificationsVisible: boolean; /** * Conference room name. @@ -25,7 +24,7 @@ export type AbstractProps = { * @protected * @type {string} */ - _room: string, + _room: string; /** * Whether or not the layout should change to support tile view mode. @@ -33,7 +32,7 @@ export type AbstractProps = { * @protected * @type {boolean} */ - _shouldDisplayTileView: boolean + _shouldDisplayTileView: boolean; }; /** @@ -42,7 +41,7 @@ export type AbstractProps = { * * @augments Component */ -export class AbstractConference +export class AbstractConference

extends Component { /** @@ -53,7 +52,7 @@ export class AbstractConference * @protected * @returns {React$Element} */ - renderNotificationsContainer(props: ?Object) { + renderNotificationsContainer(props?: any) { if (this.props._notificationsVisible) { return ( React.createElement(NotificationsContainer, props) @@ -72,7 +71,7 @@ export class AbstractConference * @private * @returns {AbstractProps} */ -export function abstractMapStateToProps(state: Object) { +export function abstractMapStateToProps(state: IReduxState) { return { _notificationsVisible: shouldDisplayNotifications(state), _room: state['features/base/conference'].room, diff --git a/react/features/lobby/components/AbstractLobbyScreen.js b/react/features/lobby/components/AbstractLobbyScreen.tsx similarity index 84% rename from react/features/lobby/components/AbstractLobbyScreen.js rename to react/features/lobby/components/AbstractLobbyScreen.tsx index 1e4c46607a..e641e24180 100644 --- a/react/features/lobby/components/AbstractLobbyScreen.js +++ b/react/features/lobby/components/AbstractLobbyScreen.tsx @@ -1,13 +1,15 @@ -// @flow -// eslint-disable-next-line no-unused-vars import React, { PureComponent } from 'react'; -import { conferenceWillJoin, getConferenceName } from '../../base/conference'; +import { IReduxState } from '../../app/types'; +import { conferenceWillJoin } from '../../base/conference/actions'; +import { getConferenceName } from '../../base/conference/functions'; +import { IJitsiConference } from '../../base/conference/reducer'; import { getSecurityUiConfig } from '../../base/config/functions.any'; -import { INVITE_ENABLED, getFeatureFlag } from '../../base/flags'; -import { getLocalParticipant } from '../../base/participants'; -import { getFieldValue } from '../../base/react'; -import { updateSettings } from '../../base/settings'; +import { INVITE_ENABLED } from '../../base/flags/constants'; +import { getFeatureFlag } from '../../base/flags/functions'; +import { getLocalParticipant } from '../../base/participants/functions'; +import { getFieldValue } from '../../base/react/functions'; +import { updateSettings } from '../../base/settings/actions'; import { isDeviceStatusVisible } from '../../prejoin/functions'; import { cancelKnocking, joinWithPassword, onSendMessage, setPasswordJoinFailed, startKnocking } from '../actions'; @@ -22,47 +24,47 @@ export type Props = { /** * Indicates whether the device status should be visible. */ - _deviceStatusVisible: boolean, + _deviceStatusVisible: boolean; + + /** + * True if moderator initiated a chat session with the participant. + */ + _isLobbyChatActive: boolean; /** * True if knocking is already happening, so we're waiting for a response. */ - _knocking: boolean, + _knocking: boolean; /** * Lobby messages between moderator and the participant. */ - _lobbyChatMessages: Object, + _lobbyChatMessages: Object; /** * Name of the lobby chat recipient. */ - _lobbyMessageRecipient: string, - - /** - * True if moderator initiated a chat session with the participant. - */ - _isLobbyChatActive: boolean, + _lobbyMessageRecipient: string; /** * The name of the meeting we're about to join. */ - _meetingName: string, + _meetingName: string; /** * The members only conference if any,. */ - _membersOnlyConference: Object, + _membersOnlyConference: IJitsiConference; /** * The email of the participant about to knock/join. */ - _participantEmail: string, + _participantEmail: string; /** * The id of the participant about to knock/join. This is the participant ID in the lobby room, at this point. */ - _participantId: string, + _participantId: string; /** * The name of the participant about to knock/join. @@ -72,27 +74,27 @@ export type Props = { /** * True if a recent attempt to join with password failed. */ - _passwordJoinFailed: boolean, + _passwordJoinFailed: boolean; /** * True if the password field should be available for lobby participants. */ - _renderPassword: boolean, + _renderPassword: boolean; /** * The Redux dispatch function. */ - dispatch: Function, + dispatch: Function; /** * Indicates whether the copy url button should be shown. */ - showCopyUrlButton: boolean, + showCopyUrlButton: boolean; /** * Function to be used to translate i18n labels. */ - t: Function + t: Function; }; type State = { @@ -100,38 +102,38 @@ type State = { /** * The display name value entered into the field. */ - displayName: string, + displayName: string; /** * The email value entered into the field. */ - email: string, + email: string; /** * True if lobby chat widget is open. */ - isChatOpen: boolean, + isChatOpen: boolean; /** * The password value entered into the field. */ - password: string, + password: string; /** * True if a recent attempt to join with password failed. */ - passwordJoinFailed: boolean, + passwordJoinFailed: boolean; /** * The state of the screen. One of {@code SCREEN_STATES[*]}. */ - screenState: number -} + screenState: number; +}; /** * Abstract class to encapsulate the platform common code of the {@code LobbyScreen}. */ -export default class AbstractLobbyScreen extends PureComponent { +export default class AbstractLobbyScreen

extends PureComponent { /** * Instantiates a new component. * @@ -192,8 +194,6 @@ export default class AbstractLobbyScreen extends PureComponent : passwordPrompt ? 'lobby.enterPasswordTitle' : 'lobby.joinTitle'; } - _onAskToJoin: () => void; - /** * Callback to be invoked when the user submits the joining request. * @@ -209,8 +209,6 @@ export default class AbstractLobbyScreen extends PureComponent return false; } - _onCancel: () => boolean; - /** * Callback to be invoked when the user cancels the dialog. * @@ -223,15 +221,13 @@ export default class AbstractLobbyScreen extends PureComponent return true; } - _onChangeDisplayName: Object => void; - /** * Callback to be invoked when the user changes its display name. * * @param {SyntheticEvent} event - The SyntheticEvent instance of the change. * @returns {void} */ - _onChangeDisplayName(event) { + _onChangeDisplayName(event: { target: { value: string; }; } | string) { const displayName = getFieldValue(event); this.setState({ @@ -243,15 +239,13 @@ export default class AbstractLobbyScreen extends PureComponent }); } - _onChangeEmail: Object => void; - /** * Callback to be invoked when the user changes its email. * * @param {SyntheticEvent} event - The SyntheticEvent instance of the change. * @returns {void} */ - _onChangeEmail(event) { + _onChangeEmail(event: { target: { value: string; }; } | string) { const email = getFieldValue(event); this.setState({ @@ -263,22 +257,18 @@ export default class AbstractLobbyScreen extends PureComponent }); } - _onChangePassword: Object => void; - /** * Callback to be invoked when the user changes the password. * * @param {SyntheticEvent} event - The SyntheticEvent instance of the change. * @returns {void} */ - _onChangePassword(event) { + _onChangePassword(event: { target: { value: string; }; } | string) { this.setState({ password: getFieldValue(event) }); } - _onEnableEdit: () => void; - /** * Callback to be invoked for the edit button. * @@ -290,8 +280,6 @@ export default class AbstractLobbyScreen extends PureComponent }); } - _onJoinWithPassword: () => void; - /** * Callback to be invoked when the user tries to join using a preset password. * @@ -304,20 +292,16 @@ export default class AbstractLobbyScreen extends PureComponent this.props.dispatch(joinWithPassword(this.state.password)); } - _onSendMessage: () => void; - /** * Callback to be invoked for sending lobby chat messages. * * @param {string} message - Message to be sent. * @returns {void} */ - _onSendMessage(message) { + _onSendMessage(message: string) { this.props.dispatch(onSendMessage(message)); } - _onSwitchToKnockMode: () => void; - /** * Callback to be invoked for the enter (go back to) knocking mode button. * @@ -334,8 +318,6 @@ export default class AbstractLobbyScreen extends PureComponent this.props.dispatch(conferenceWillJoin(this.props._membersOnlyConference)); } - _onSwitchToPasswordMode: () => void; - /** * Callback to be invoked for the enter password button. * @@ -347,8 +329,6 @@ export default class AbstractLobbyScreen extends PureComponent }); } - _onToggleChat: () => void; - /** * Callback to be invoked for toggling lobby chat visibility. * @@ -393,42 +373,42 @@ export default class AbstractLobbyScreen extends PureComponent * * @returns {React$Element} */ - _renderJoining: () => React$Element<*>; + _renderJoining: () => React.ReactElement; /** * Renders the participant form to let the knocking participant enter its details. * * @returns {React$Element} */ - _renderParticipantForm: () => React$Element<*>; + _renderParticipantForm: () => React.ReactElement; /** * Renders the participant info fragment when we have all the required details of the user. * * @returns {React$Element} */ - _renderParticipantInfo: () => React$Element<*>; + _renderParticipantInfo: () => React.ReactElement; /** * Renders the password form to let the participant join by using a password instead of knocking. * * @returns {React$Element} */ - _renderPasswordForm: () => React$Element<*>; + _renderPasswordForm: () => React.ReactElement; /** * Renders the password join button (set). * * @returns {React$Element} */ - _renderPasswordJoinButtons: () => React$Element<*>; + _renderPasswordJoinButtons: () => React.ReactElement; /** * Renders the standard (pre-knocking) button set. * * @returns {React$Element} */ - _renderStandardButtons: () => React$Element<*>; + _renderStandardButtons: () => React.ReactElement; } /** @@ -437,7 +417,7 @@ export default class AbstractLobbyScreen extends PureComponent * @param {Object} state - The Redux state. * @returns {Props} */ -export function _mapStateToProps(state: Object) { +export function _mapStateToProps(state: IReduxState) { const localParticipant = getLocalParticipant(state); const participantId = localParticipant?.id; const inviteEnabledFlag = getFeatureFlag(state, INVITE_ENABLED, true); diff --git a/react/features/notifications/components/index.native.js b/react/features/notifications/components/index.native.ts similarity index 72% rename from react/features/notifications/components/index.native.js rename to react/features/notifications/components/index.native.ts index a32ec60612..738c4d2b8a 100644 --- a/react/features/notifications/components/index.native.js +++ b/react/features/notifications/components/index.native.ts @@ -1,3 +1 @@ -// @flow - export * from './native'; diff --git a/react/features/notifications/components/index.web.js b/react/features/notifications/components/index.web.ts similarity index 69% rename from react/features/notifications/components/index.web.js rename to react/features/notifications/components/index.web.ts index 40d5f46528..b80c83af34 100644 --- a/react/features/notifications/components/index.web.js +++ b/react/features/notifications/components/index.web.ts @@ -1,3 +1 @@ -// @flow - export * from './web'; diff --git a/react/features/notifications/components/native/index.js b/react/features/notifications/components/native/index.ts similarity index 93% rename from react/features/notifications/components/native/index.js rename to react/features/notifications/components/native/index.ts index 0f33b32643..642f2f2837 100644 --- a/react/features/notifications/components/native/index.js +++ b/react/features/notifications/components/native/index.ts @@ -1,4 +1,2 @@ -// @flow - export { default as Notification } from './Notification'; export { default as NotificationsContainer } from './NotificationsContainer'; diff --git a/react/features/notifications/components/web/index.js b/react/features/notifications/components/web/index.ts similarity index 93% rename from react/features/notifications/components/web/index.js rename to react/features/notifications/components/web/index.ts index 0f33b32643..642f2f2837 100644 --- a/react/features/notifications/components/web/index.js +++ b/react/features/notifications/components/web/index.ts @@ -1,4 +1,2 @@ -// @flow - export { default as Notification } from './Notification'; export { default as NotificationsContainer } from './NotificationsContainer'; diff --git a/react/features/recent-list/components/AbstractRecentList.js b/react/features/recent-list/components/AbstractRecentList.tsx similarity index 82% rename from react/features/recent-list/components/AbstractRecentList.js rename to react/features/recent-list/components/AbstractRecentList.tsx index f0a1f7af48..06234d358e 100644 --- a/react/features/recent-list/components/AbstractRecentList.js +++ b/react/features/recent-list/components/AbstractRecentList.tsx @@ -1,20 +1,18 @@ -// @flow - import React from 'react'; -import type { Dispatch } from 'redux'; -import { - createRecentClickedEvent, - createRecentSelectedEvent, - sendAnalytics -} from '../../analytics'; +import { createRecentClickedEvent, createRecentSelectedEvent } from '../../analytics/AnalyticsEvents'; +import { sendAnalytics } from '../../analytics/functions'; import { appNavigate } from '../../app/actions'; +import { IStore } from '../../app/types'; import { - AbstractPage, Container, Text + + // @ts-ignore } from '../../base/react'; +import AbstractPage from '../../base/react/components/AbstractPage'; +// @ts-ignore import styles from './styles'; /** @@ -25,19 +23,19 @@ type Props = { /** * The redux store's {@code dispatch} function. */ - dispatch: Dispatch, + dispatch: IStore['dispatch']; /** * The translate function. */ - t: Function + t: Function; }; /** * An abstract component for the recent list. * */ -export default class AbstractRecentList extends AbstractPage

{ +export default class AbstractRecentList

extends AbstractPage

{ /** * Initializes a new {@code RecentList} instance. * @@ -60,8 +58,6 @@ export default class AbstractRecentList extends AbstractPage

{ sendAnalytics(createRecentSelectedEvent()); } - _getRenderListEmptyComponent: () => React$Node; - /** * Returns a list empty component if a custom one has to be rendered instead * of the default one in the {@link NavigateSectionList}. @@ -90,8 +86,6 @@ export default class AbstractRecentList extends AbstractPage

{ ); } - _onPress: string => void; - /** * Handles the list's navigate action. * @@ -99,7 +93,7 @@ export default class AbstractRecentList extends AbstractPage

{ * @param {string} url - The url string to navigate to. * @returns {void} */ - _onPress(url) { + _onPress(url: string) { const { dispatch } = this.props; sendAnalytics(createRecentClickedEvent('meeting.tile')); diff --git a/react/features/recording/components/Recording/AbstractHighlightButton.js b/react/features/recording/components/Recording/AbstractHighlightButton.ts similarity index 77% rename from react/features/recording/components/Recording/AbstractHighlightButton.js rename to react/features/recording/components/Recording/AbstractHighlightButton.ts index 2759c8d4d7..0f0f4d2f4d 100644 --- a/react/features/recording/components/Recording/AbstractHighlightButton.js +++ b/react/features/recording/components/Recording/AbstractHighlightButton.ts @@ -1,57 +1,54 @@ -// @flow - import { Component } from 'react'; +import { WithTranslation } from 'react-i18next'; -import { getActiveSession, isHighlightMeetingMomentDisabled } from '../..'; -import { openDialog } from '../../../base/dialog'; +import { IReduxState, IStore } from '../../../app/types'; +import { openDialog } from '../../../base/dialog/actions'; import { MEET_FEATURES } from '../../../base/jwt/constants'; import { JitsiRecordingConstants } from '../../../base/lib-jitsi-meet'; import { maybeShowPremiumFeatureDialog } from '../../../jaas/actions'; -import { - NOTIFICATION_TIMEOUT_TYPE, - NOTIFICATION_TYPE, - hideNotification, - showNotification -} from '../../../notifications'; +import { hideNotification, showNotification } from '../../../notifications/actions'; +import { NOTIFICATION_TIMEOUT_TYPE, NOTIFICATION_TYPE } from '../../../notifications/constants'; import { highlightMeetingMoment } from '../../actions.any'; +// eslint-disable-next-line lines-around-comment +// @ts-ignore import { StartRecordingDialog } from '../../components'; import { PROMPT_RECORDING_NOTIFICATION_ID } from '../../constants'; -import { getRecordButtonProps } from '../../functions'; +import { getActiveSession, getRecordButtonProps, isHighlightMeetingMomentDisabled } from '../../functions'; -export type Props = { +export interface IProps extends WithTranslation { /** * Indicates whether or not the button is disabled. */ - _disabled: boolean, + _disabled: boolean; /** * Indicates whether or not a highlight request is in progress. */ - _isHighlightInProgress: boolean, + _isHighlightInProgress: boolean; /** * Indicates whether or not the button should be visible. */ - _visible: boolean, + _visible: boolean; /** - * Invoked to obtain translated strings. + * Redux dispatch function. */ - t: Function -}; + dispatch: IStore['dispatch']; +} /** * Abstract class for the {@code AbstractHighlightButton} component. */ -export default class AbstractHighlightButton extends Component

{ +export default class AbstractHighlightButton

extends Component { /** * Initializes a new AbstractHighlightButton instance. * * @param {Object} props - The read-only properties with which the new * instance is to be initialized. */ - constructor(props: Props) { + constructor(props: P) { super(props); this._onClick = this._onClick.bind(this); @@ -105,7 +102,7 @@ export default class AbstractHighlightButton extends Component

{ * _visible: boolean * }} */ -export function _abstractMapStateToProps(state: Object) { +export function _abstractMapStateToProps(state: IReduxState) { const isRecordingRunning = getActiveSession(state, JitsiRecordingConstants.mode.FILE); const isButtonDisabled = isHighlightMeetingMomentDisabled(state); const { webhookProxyUrl } = state['features/base/config']; diff --git a/react/features/recording/components/Recording/web/HighlightButton.tsx b/react/features/recording/components/Recording/web/HighlightButton.tsx index 7526811faf..5ee00291d2 100644 --- a/react/features/recording/components/Recording/web/HighlightButton.tsx +++ b/react/features/recording/components/Recording/web/HighlightButton.tsx @@ -14,7 +14,7 @@ import Tooltip from '../../../../base/tooltip/components/Tooltip'; import BaseTheme from '../../../../base/ui/components/BaseTheme.web'; import { maybeShowPremiumFeatureDialog } from '../../../../jaas/actions'; import AbstractHighlightButton, { - type Props as AbstractProps, + type IProps as AbstractProps, _abstractMapStateToProps // @ts-ignore @@ -32,6 +32,8 @@ type Props = AbstractProps & { * Flag controlling visibility of the component. */ _visible: boolean; + + classes: any; }; /** diff --git a/react/features/shared-video/components/native/AbstractVideoManager.js b/react/features/shared-video/components/native/AbstractVideoManager.ts similarity index 80% rename from react/features/shared-video/components/native/AbstractVideoManager.js rename to react/features/shared-video/components/native/AbstractVideoManager.ts index 3bd121e85c..19f12cee46 100644 --- a/react/features/shared-video/components/native/AbstractVideoManager.js +++ b/react/features/shared-video/components/native/AbstractVideoManager.ts @@ -1,98 +1,98 @@ -/* @flow */ -/* eslint-disable no-invalid-this */ - import throttle from 'lodash/throttle'; import { PureComponent } from 'react'; -import { getCurrentConference } from '../../../base/conference'; -import { getLocalParticipant } from '../../../base/participants'; +import { IReduxState } from '../../../app/types'; +import { getCurrentConference } from '../../../base/conference/functions'; +import { IJitsiConference } from '../../../base/conference/reducer'; +import { getLocalParticipant } from '../../../base/participants/functions'; import { setSharedVideoStatus } from '../../actions.any'; import { PLAYBACK_STATUSES } from '../../constants'; /** - * Return true if the diffenrece between the two timees is larger than 5. + * Return true if the difference between the two times is larger than 5. * * @param {number} newTime - The current time. * @param {number} previousTime - The previous time. * @private * @returns {boolean} */ -function shouldSeekToPosition(newTime, previousTime) { +function shouldSeekToPosition(newTime: number, previousTime: number) { return Math.abs(newTime - previousTime) > 5; } /** * The type of the React {@link Component} props of {@link AbstractVideoManager}. */ -export type Props = { +export interface IProps { /** - * The current coference. + * The current conference. */ - _conference: Object, + _conference: IJitsiConference; /** * Is the video shared by the local user. * * @private */ - _isOwner: boolean, + _isOwner: boolean; /** * The shared video owner id. */ - _ownerId: string, + _ownerId: string; /** * The shared video status. */ - _status: string, + _status: string; /** * Seek time in seconds. * */ - _time: number, + _time: number; /** * The video url. */ - _videoUrl: string, + _videoUrl: string; /** * The Redux dispatch function. */ - dispatch: Function, + dispatch: Function; /** * The player's height. */ - height: number, + height: number; /** * The video id. */ - videoId: string, + videoId: string; /** * The player's width. */ - width: number + width: number; } /** * Manager of shared video. */ -class AbstractVideoManager extends PureComponent { +class AbstractVideoManager extends PureComponent { throttledFireUpdateSharedVideoEvent: Function; /** * Initializes a new instance of AbstractVideoManager. * + * @param {IProps} props - Component props. * @returns {void} */ - constructor() { - super(); + constructor(props: IProps) { + super(props); this.throttledFireUpdateSharedVideoEvent = throttle(this.fireUpdateSharedVideoEvent.bind(this), 5000); } @@ -215,7 +215,7 @@ class AbstractVideoManager extends PureComponent { /** * Indicates the playback state of the video. */ - getPlaybackStatus: () => boolean; + getPlaybackStatus: () => string; /** * Plays video. @@ -245,15 +245,15 @@ export default AbstractVideoManager; * Maps part of the Redux store to the props of this component. * * @param {Object} state - The Redux state. - * @returns {Props} + * @returns {IProps} */ -export function _mapStateToProps(state: Object): $Shape { +export function _mapStateToProps(state: IReduxState) { const { ownerId, status, time, videoUrl } = state['features/shared-video']; const localParticipant = getLocalParticipant(state); return { _conference: getCurrentConference(state), - _isOwner: ownerId === localParticipant.id, + _isOwner: ownerId === localParticipant?.id, _ownerId: ownerId, _status: status, _time: time, diff --git a/react/features/subtitles/components/AbstractCaptions.js b/react/features/subtitles/components/AbstractCaptions.ts similarity index 87% rename from react/features/subtitles/components/AbstractCaptions.js rename to react/features/subtitles/components/AbstractCaptions.ts index 5b0516f0d4..24cb96738b 100644 --- a/react/features/subtitles/components/AbstractCaptions.js +++ b/react/features/subtitles/components/AbstractCaptions.ts @@ -1,7 +1,7 @@ -// @flow - import { Component } from 'react'; +import { IReduxState } from '../../app/types'; + /** * {@code AbstractCaptions} Properties. */ @@ -10,21 +10,21 @@ export type AbstractCaptionsProps = { /** * Whether local participant is requesting to see subtitles. */ - _requestingSubtitles: boolean, + _requestingSubtitles: boolean; /** * Transcript texts formatted with participant's name and final content. * Mapped by id just to have the keys for convenience during the rendering * process. */ - _transcripts: ?Map + _transcripts: Map; }; /** * Abstract React {@code Component} which can display speech-to-text results * from Jigasi as subtitles. */ -export class AbstractCaptions +export class AbstractCaptions

extends Component

{ /** @@ -60,7 +60,7 @@ export class AbstractCaptions * @protected * @returns {React$Element} - The React element which displays the text. */ - _renderParagraph: (id: string, text: string) => React$Element<*>; + _renderParagraph: (id: string, text: string) => React.ReactElement; /** * Renders the subtitles container. @@ -71,7 +71,7 @@ export class AbstractCaptions * @protected * @returns {React$Element} - The subtitles container. */ - _renderSubtitlesContainer: (Array>) => React$Element<*>; + _renderSubtitlesContainer: (el: Array) => React.ReactElement; } /** @@ -83,7 +83,7 @@ export class AbstractCaptions * @returns {Map} - Formatted transcript subtitles mapped by * transcript message IDs. */ -function _constructTranscripts(state: Object): Map { +function _constructTranscripts(state: IReduxState): Map { const { _transcriptMessages } = state['features/subtitles']; const transcripts = new Map(); @@ -118,7 +118,7 @@ function _constructTranscripts(state: Object): Map { * _transcripts: Map * }} */ -export function _abstractMapStateToProps(state: Object) { +export function _abstractMapStateToProps(state: IReduxState) { const { _requestingSubtitles } = state['features/subtitles']; const transcripts = _constructTranscripts(state); diff --git a/react/features/subtitles/reducer.ts b/react/features/subtitles/reducer.ts index d3bb8c401e..b7c93827e9 100644 --- a/react/features/subtitles/reducer.ts +++ b/react/features/subtitles/reducer.ts @@ -14,10 +14,17 @@ const defaultState = { _language: 'transcribing.subtitlesOff' }; +interface ITranscriptMessage { + final: string; + participantName: string; + stable: string; + unstable: string; +} + export interface ISubtitlesState { _language: string; _requestingSubtitles: boolean; - _transcriptMessages: Map; + _transcriptMessages: Map; } /** @@ -77,7 +84,7 @@ function _removeTranscriptMessage(state: ISubtitlesState, { transcriptMessageID * reduction of the specified action. */ function _updateTranscriptMessage(state: ISubtitlesState, { transcriptMessageID, newTranscriptMessage }: - { newTranscriptMessage: Object; transcriptMessageID: string; }) { + { newTranscriptMessage: ITranscriptMessage; transcriptMessageID: string; }) { const newTranscriptMessages = new Map(state._transcriptMessages); // Updates the new message for the given key in the Map.