ZF/jitsi-meet
1
0
Fork 0
mirror of https://gitcode.com/GitHub_Trending/ji/jitsi-meet.git synced 2025-12-30 11:22:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Robert Pintilii
2023-03-23 13:24:57 +02:00
committed by GitHub
parent 34b2577b97
commit e95b964b78
31 changed files with 244 additions and 381 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
react/features/base/dialog/components/AbstractDialog.js → react/features/base/dialog/components/native/AbstractDialog.ts
View File

@@ -1,10 +1,8 @@
// @flow
import { Component } from 'react';
import type { Dispatch } from 'redux';
import { hideDialog } from '../actions';
import type { DialogProps } from '../constants';
import { IStore } from '../../../../app/types';
import { hideDialog } from '../../actions';
import { DialogProps } from '../../constants';
/**
* The type of the React {@code Component} props of {@link AbstractDialog}.
@@ -14,20 +12,20 @@ export type Props = DialogProps & {
/**
* Used to show/hide the dialog on cancel.
*/
dispatch: Dispatch<any>
dispatch: IStore['dispatch'];
};
/**
* The type of the React {@code Component} state of {@link AbstractDialog}.
*/
export type State = {
submitting: ?boolean
submitting?: boolean;
};
/**
* An abstract implementation of a dialog on Web/React and mobile/react-native.
*/
export default class AbstractDialog<P : Props, S : State>
export default class AbstractDialog<P extends Props, S extends State>
extends Component<P, S> {
_mounted: boolean;
@@ -77,8 +75,6 @@ export default class AbstractDialog<P : Props, S : State>
return this.props.dispatch(hideDialog());
}
_onCancel: () => void;
/**
* Dispatches a redux action to hide this dialog when it's canceled.
*
@@ -93,8 +89,6 @@ export default class AbstractDialog<P : Props, S : State>
}
}
_onSubmit: (?string) => void;
/**
* Submits this {@code Dialog}. If the React {@code Component} prop
* {@code onSubmit} is defined, the function that is the value of the prop
@@ -107,7 +101,7 @@ export default class AbstractDialog<P : Props, S : State>
* @param {string} [value] - The submitted value if any.
* @returns {void}
*/
_onSubmit(value: ?string) {
_onSubmit(value?: string) {
const { okDisabled = false, onSubmit } = this.props;
if (!okDisabled) {
@@ -139,8 +133,6 @@ export default class AbstractDialog<P : Props, S : State>
}
}
_onSubmitFulfilled: () => void;
/**
* Notifies this {@code AbstractDialog} that it has been submitted
* successfully. Dispatches a redux action to hide this dialog after it has
@@ -155,8 +147,6 @@ export default class AbstractDialog<P : Props, S : State>
this._hide();
}
_onSubmitRejected: () => void;
/**
* Notifies this {@code AbstractDialog} that its submission has failed.
*

3
react/features/base/dialog/components/native/AlertDialog.js
View File

@@ -4,9 +4,10 @@ import { connect } from 'react-redux';
import { translate } from '../../../i18n';
import { _abstractMapStateToProps } from '../../functions';
import AbstractDialog, { type Props as AbstractProps } from '../AbstractDialog';
import { renderHTML } from '../functions.native';
import AbstractDialog, { type Props as AbstractProps } from './AbstractDialog';
type Props = AbstractProps & {

2
react/features/base/dialog/components/native/ConfirmDialog.js
View File

@@ -3,9 +3,9 @@ import Dialog from 'react-native-dialog';
import { connect } from 'react-redux';
import { translate } from '../../../i18n';
import AbstractDialog from '../AbstractDialog';
import { renderHTML } from '../functions.native';
import AbstractDialog from './AbstractDialog';
import styles from './styles';

4
react/features/base/dialog/components/native/InputDialog.js
View File

@@ -4,11 +4,11 @@ import { connect } from 'react-redux';
import { translate } from '../../../i18n';
import { _abstractMapStateToProps } from '../../functions';
import AbstractDialog, {
type Props as AbstractProps,
type State as AbstractState
} from '../AbstractDialog';
} from './AbstractDialog';
import { inputDialog as styles } from './styles';
type Props = AbstractProps & {

2
react/features/base/styles/functions.any.ts
View File

@@ -3,7 +3,7 @@ import Platform from '../react/Platform';
import { ColorPalette } from './components/styles/ColorPalette';
declare type StyleSheet = {
[key: string]: string;
[key: string]: string | number;
};
export type StyleType = StyleSheet | Array<StyleSheet>;

14
react/features/base/toolbox/components/AbstractAudioMuteButton.js → react/features/base/toolbox/components/AbstractAudioMuteButton.ts
View File

@@ -1,14 +1,11 @@
// @flow
import { IconMic, IconMicSlash } from '../../icons/svg';
import { IconMic, IconMicSlash } from '../../icons';
import AbstractButton from './AbstractButton';
import type { Props } from './AbstractButton';
import AbstractButton, { IProps } from './AbstractButton';
/**
* An abstract implementation of a button for toggling audio mute.
*/
export default class AbstractAudioMuteButton<P: Props, S: *>
export default class AbstractAudioMuteButton<P extends IProps, S>
extends AbstractButton<P, S> {
icon = IconMic;
@@ -35,6 +32,7 @@ export default class AbstractAudioMuteButton<P: Props, S: *>
*/
_isAudioMuted() {
// To be implemented by subclass.
return false;
}
/**
@@ -52,11 +50,11 @@ export default class AbstractAudioMuteButton<P: Props, S: *>
* Helper function to perform the actual setting of the audio mute / unmute
* action.
*
* @param {boolean} audioMuted - Whether audio should be muted or not.
* @param {boolean} _audioMuted - Whether audio should be muted or not.
* @protected
* @returns {void}
*/
_setAudioMuted(audioMuted: boolean) { // eslint-disable-line no-unused-vars
_setAudioMuted(_audioMuted: boolean) {
// To be implemented by subclass.
}
}

29
react/features/base/toolbox/components/AbstractButton.tsx
View File

@@ -1,13 +1,15 @@
import React, { Component, ReactNode } from 'react';
import { WithTranslation } from 'react-i18next';
import { GestureResponderEvent } from 'react-native';
import { IStore } from '../../../app/types';
import { NOTIFY_CLICK_MODE } from '../../../toolbox/constants';
import { combineStyles } from '../../styles/functions.any';
import { Styles } from './AbstractToolboxItem';
import ToolboxItem from './ToolboxItem';
export type Props = {
export interface IProps extends WithTranslation {
/**
* Function to be called after the click handler has been processed.
@@ -36,6 +38,11 @@ export type Props = {
*/
disabledStyles?: Styles;
/**
* Redux dispatch function.
*/
dispatch: IStore['dispatch'];
/**
* External handler for click action.
*/
@@ -50,7 +57,7 @@ export type Props = {
/**
* Whether to show the label or not.
*/
showLabel: boolean;
showLabel?: boolean;
/**
* Collection of styles for the button.
@@ -65,13 +72,13 @@ export type Props = {
/**
* From which direction the tooltip should appear, relative to the button.
*/
tooltipPosition: string;
tooltipPosition?: string;
/**
* Whether this button is visible or not.
*/
visible: boolean;
};
visible?: boolean;
}
/**
* Default style for disabled buttons.
@@ -90,7 +97,7 @@ export const defaultDisabledButtonStyles = {
/**
* An abstract implementation of a button.
*/
export default class AbstractButton<P extends Props, S> extends Component<P, S> {
export default class AbstractButton<P extends IProps, S=any> extends Component<P, S> {
static defaultProps = {
afterClick: undefined,
disabledStyles: defaultDisabledButtonStyles,
@@ -171,7 +178,7 @@ export default class AbstractButton<P extends Props, S> extends Component<P, S>
/**
* Initializes a new {@code AbstractButton} instance.
*
* @param {Props} props - The React {@code Component} props to initialize
* @param {IProps} props - The React {@code Component} props to initialize
* the new {@code AbstractButton} instance with.
*/
constructor(props: P) {
@@ -275,11 +282,11 @@ export default class AbstractButton<P extends Props, S> extends Component<P, S>
if (this._isDisabled() && buttonStyles && disabledStyles) {
return {
iconStyle: combineStyles(
buttonStyles.iconStyle, disabledStyles.iconStyle),
buttonStyles.iconStyle ?? {}, disabledStyles.iconStyle ?? {}),
labelStyle: combineStyles(
buttonStyles.labelStyle, disabledStyles.labelStyle),
buttonStyles.labelStyle ?? {}, disabledStyles.labelStyle ?? {}),
style: combineStyles(
buttonStyles.style, disabledStyles.style),
buttonStyles.style ?? {}, disabledStyles.style ?? {}),
underlayColor:
disabledStyles.underlayColor || buttonStyles.underlayColor
};
@@ -319,7 +326,7 @@ export default class AbstractButton<P extends Props, S> extends Component<P, S>
* @protected
* @returns {?boolean}
*/
_isToggled() {
_isToggled(): boolean | undefined {
return undefined;
}

9
react/features/base/toolbox/components/AbstractHangupButton.js → react/features/base/toolbox/components/AbstractHangupButton.ts
View File

@@ -1,14 +1,11 @@
// @flow
import { IconHangup } from '../../icons/svg';
import { IconHangup } from '../../icons';
import AbstractButton from './AbstractButton';
import type { Props } from './AbstractButton';
import AbstractButton, { IProps } from './AbstractButton';
/**
* An abstract implementation of a button for disconnecting a conference.
*/
export default class AbstractHangupButton<P : Props, S: *>
export default class AbstractHangupButton<P extends IProps, S>
extends AbstractButton<P, S> {
icon = IconHangup;

6
react/features/base/toolbox/components/AbstractToolboxItem.tsx
View File

@@ -9,17 +9,17 @@ export type Styles = {
/**
* Style for the item's icon.
*/
iconStyle: StyleType;
iconStyle?: StyleType;
/**
* Style for the item's label.
*/
labelStyle: StyleType;
labelStyle?: StyleType;
/**
* Style for the item itself.
*/
style: StyleType;
style?: StyleType;
/**
* Color for the item underlay (shows when clicked).

14
react/features/base/toolbox/components/AbstractVideoMuteButton.js → react/features/base/toolbox/components/AbstractVideoMuteButton.ts
View File

@@ -1,14 +1,11 @@
// @flow
import { IconVideo, IconVideoOff } from '../../icons/svg';
import { IconVideo, IconVideoOff } from '../../icons';
import AbstractButton from './AbstractButton';
import type { Props } from './AbstractButton';
import AbstractButton, { IProps } from './AbstractButton';
/**
* An abstract implementation of a button for toggling video mute.
*/
export default class AbstractVideoMuteButton<P : Props, S : *>
export default class AbstractVideoMuteButton<P extends IProps, S>
extends AbstractButton<P, S> {
icon = IconVideo;
@@ -45,17 +42,18 @@ export default class AbstractVideoMuteButton<P : Props, S : *>
*/
_isVideoMuted() {
// To be implemented by subclass.
return false;
}
/**
* Helper function to perform the actual setting of the video mute / unmute
* action.
*
* @param {boolean} videoMuted - Whether video should be muted or not.
* @param {boolean} _videoMuted - Whether video should be muted or not.
* @protected
* @returns {void}
*/
_setVideoMuted(videoMuted: boolean) { // eslint-disable-line no-unused-vars
_setVideoMuted(_videoMuted: boolean) {
// To be implemented by subclass.
}
}

3
react/features/jaas/actions.native.ts
View File

@@ -1,9 +1,10 @@
/**
* Shows a dialog prompting users to upgrade, if requested feature is disabled.
*
* @param {string} _feature - Used on web.
* @returns {Function}
*/
export function maybeShowPremiumFeatureDialog() {
export function maybeShowPremiumFeatureDialog(_feature: string) {
return function() {
return false;
};

25
react/features/noise-suppression/components/NoiseSuppressionButton.tsx
View File

@@ -6,29 +6,19 @@ import {
IconNoiseSuppressionOff,
IconNoiseSuppressionOn
} from '../../base/icons/svg';
import {
AbstractButton,
type AbstractButtonProps
// @ts-ignore
} from '../../base/toolbox/components';
import AbstractButton, { IProps as AbstractButtonProps } from '../../base/toolbox/components/AbstractButton';
import { setOverflowMenuVisible } from '../../toolbox/actions';
import { toggleNoiseSuppression } from '../actions';
import { isNoiseSuppressionEnabled } from '../functions';
type Props = AbstractButtonProps & {
/**
* The redux {@code dispatch} function.
*/
dispatch: Function;
};
interface IProps extends AbstractButtonProps {
_isNoiseSuppressionEnabled?: boolean;
}
/**
* Component that renders a toolbar button for toggling noise suppression.
*/
class NoiseSuppressionButton extends AbstractButton<Props, any, any> {
class NoiseSuppressionButton extends AbstractButton<IProps> {
accessibilityLabel = 'toolbar.accessibilityLabel.noiseSuppression';
icon = IconNoiseSuppressionOn;
label = 'toolbar.noiseSuppression';
@@ -36,8 +26,6 @@ class NoiseSuppressionButton extends AbstractButton<Props, any, any> {
toggledIcon = IconNoiseSuppressionOff;
toggledLabel = 'toolbar.disableNoiseSuppression';
private props: Props;
/**
* Handles clicking / pressing the button.
*
@@ -68,7 +56,7 @@ class NoiseSuppressionButton extends AbstractButton<Props, any, any> {
*
* @param {Object} state - The Redux state.
* @private
* @returns {Props}
* @returns {IProps}
*/
function _mapStateToProps(state: IReduxState) {
return {
@@ -76,5 +64,4 @@ function _mapStateToProps(state: IReduxState) {
};
}
// @ts-ignore
export default translate(connect(_mapStateToProps)(NoiseSuppressionButton));

37
react/features/recording/components/LiveStream/AbstractLiveStreamButton.js → react/features/recording/components/LiveStream/AbstractLiveStreamButton.ts
View File

@@ -1,11 +1,10 @@
// @flow
import { IconSites } from '../../../base/icons';
import { IReduxState } from '../../../app/types';
import { IconSites } from '../../../base/icons/svg';
import { MEET_FEATURES } from '../../../base/jwt/constants';
import { isJwtFeatureEnabled } from '../../../base/jwt/functions';
import { JitsiRecordingConstants } from '../../../base/lib-jitsi-meet';
import { isLocalParticipantModerator } from '../../../base/participants';
import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox/components';
import { isLocalParticipantModerator } from '../../../base/participants/functions';
import AbstractButton, { IProps as AbstractButtonProps } from '../../../base/toolbox/components/AbstractButton';
import { isInBreakoutRoom } from '../../../breakout-rooms/functions';
import { maybeShowPremiumFeatureDialog } from '../../../jaas/actions';
import { getActiveSession } from '../../functions';
@@ -17,38 +16,28 @@ import { getLiveStreaming } from './functions';
* The type of the React {@code Component} props of
* {@link AbstractLiveStreamButton}.
*/
export type Props = AbstractButtonProps & {
export interface IProps extends AbstractButtonProps {
/**
* True if the button needs to be disabled.
*/
_disabled: Boolean,
_disabled: boolean;
/**
* True if there is a running active live stream, false otherwise.
*/
_isLiveStreamRunning: boolean,
_isLiveStreamRunning: boolean;
/**
* The tooltip to display when hovering over the button.
*/
_tooltip: ?String,
/**
* The redux {@code dispatch} function.
*/
dispatch: Function,
/**
* The i18n translate function.
*/
t: Function
};
_tooltip?: string;
}
/**
* An abstract class of a button for starting and stopping live streaming.
*/
export default class AbstractLiveStreamButton<P: Props> extends AbstractButton<P, *> {
export default class AbstractLiveStreamButton<P extends IProps> extends AbstractButton<P> {
accessibilityLabel = 'dialog.accessibilityLabel.liveStreaming';
icon = IconSites;
label = 'dialog.startLiveStreaming';
@@ -61,7 +50,7 @@ export default class AbstractLiveStreamButton<P: Props> extends AbstractButton<P
* @returns {string}
*/
_getTooltip() {
return this.props._tooltip || '';
return this.props._tooltip ?? '';
}
/**
@@ -119,7 +108,7 @@ export default class AbstractLiveStreamButton<P: Props> extends AbstractButton<P
* {@code AbstractLiveStreamButton} component.
*
* @param {Object} state - The Redux state.
* @param {Props} ownProps - The own props of the Component.
* @param {IProps} ownProps - The own props of the Component.
* @private
* @returns {{
* _disabled: boolean,
@@ -127,7 +116,7 @@ export default class AbstractLiveStreamButton<P: Props> extends AbstractButton<P
* visible: boolean
* }}
*/
export function _mapStateToProps(state: Object, ownProps: Props) {
export function _mapStateToProps(state: IReduxState, ownProps: IProps) {
let { visible } = ownProps;
// A button can be disabled/enabled only if enableFeaturesBasedOnToken

39
react/features/recording/components/Recording/AbstractRecordButton.js → react/features/recording/components/Recording/AbstractRecordButton.ts
View File

@@ -1,13 +1,10 @@
// @flow
import {
createToolbarEvent,
sendAnalytics
} from '../../../analytics';
import { IconRecord, IconStop } from '../../../base/icons';
import { createToolbarEvent } from '../../../analytics/AnalyticsEvents';
import { sendAnalytics } from '../../../analytics/functions';
import { IReduxState } from '../../../app/types';
import { IconRecord, IconStop } from '../../../base/icons/svg';
import { MEET_FEATURES } from '../../../base/jwt/constants';
import { JitsiRecordingConstants } from '../../../base/lib-jitsi-meet';
import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox/components';
import AbstractButton, { IProps as AbstractButtonProps } from '../../../base/toolbox/components/AbstractButton';
import { maybeShowPremiumFeatureDialog } from '../../../jaas/actions';
import { getActiveSession, getRecordButtonProps } from '../../functions';
@@ -17,38 +14,28 @@ import LocalRecordingManager from './LocalRecordingManager';
* The type of the React {@code Component} props of
* {@link AbstractRecordButton}.
*/
export type Props = AbstractButtonProps & {
export interface IProps extends AbstractButtonProps {
/**
* True if the button needs to be disabled.
*/
_disabled: Boolean,
_disabled: boolean;
/**
* True if there is a running active recording, false otherwise.
*/
_isRecordingRunning: boolean,
_isRecordingRunning: boolean;
/**
* The tooltip to display when hovering over the button.
*/
_tooltip: ?String,
/**
* The redux {@code dispatch} function.
*/
dispatch: Function,
/**
* The i18n translate function.
*/
t: Function
};
_tooltip?: string;
}
/**
* An abstract implementation of a button for starting and stopping recording.
*/
export default class AbstractRecordButton<P: Props> extends AbstractButton<P, *> {
export default class AbstractRecordButton<P extends IProps> extends AbstractButton<P> {
accessibilityLabel = 'toolbar.accessibilityLabel.recording';
icon = IconRecord;
label = 'dialog.startRecording';
@@ -62,7 +49,7 @@ export default class AbstractRecordButton<P: Props> extends AbstractButton<P, *>
* @returns {string}
*/
_getTooltip() {
return this.props._tooltip || '';
return this.props._tooltip ?? '';
}
/**
@@ -136,7 +123,7 @@ export default class AbstractRecordButton<P: Props> extends AbstractButton<P, *>
* visible: boolean
* }}
*/
export function _mapStateToProps(state: Object): Object {
export function _mapStateToProps(state: IReduxState) {
const {
disabled: _disabled,
tooltip: _tooltip,

41
react/features/security/components/security-dialog/AbstractSecurityDialogButton.js → react/features/security/components/security-dialog/AbstractSecurityDialogButton.ts
View File

@@ -1,37 +1,26 @@
// @flow
import type { Dispatch } from 'redux';
import { createToolbarEvent, sendAnalytics } from '../../../analytics';
import { createToolbarEvent } from '../../../analytics/AnalyticsEvents';
import { sendAnalytics } from '../../../analytics/functions';
import { IReduxState } from '../../../app/types';
import { getSecurityUiConfig } from '../../../base/config/functions.any';
import {
LOBBY_MODE_ENABLED,
MEETING_PASSWORD_ENABLED,
SECURITY_OPTIONS_ENABLED,
getFeatureFlag
} from '../../../base/flags';
import { IconSecurityOff, IconSecurityOn } from '../../../base/icons';
import { isLocalParticipantModerator } from '../../../base/participants';
import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox/components';
import { LOBBY_MODE_ENABLED, MEETING_PASSWORD_ENABLED, SECURITY_OPTIONS_ENABLED } from '../../../base/flags/constants';
import { getFeatureFlag } from '../../../base/flags/functions';
import { IconSecurityOff, IconSecurityOn } from '../../../base/icons/svg';
import { isLocalParticipantModerator } from '../../../base/participants/functions';
import AbstractButton, { IProps as AbstractButtonProps } from '../../../base/toolbox/components/AbstractButton';
export type Props = AbstractButtonProps & {
export interface IProps extends AbstractButtonProps {
/**
* Whether the shared document is being edited or not.
*/
_locked: boolean,
/**
* The redux {@code dispatch} function.
*/
dispatch: Dispatch<any>
};
_locked: boolean;
}
/**
* Implements an {@link AbstractButton} to open the security dialog/screen.
*/
export default class AbstractSecurityDialogButton<P: Props, S:*>
export default class AbstractSecurityDialogButton<P extends IProps, S>
extends AbstractButton<P, S> {
accessibilityLabel = 'toolbar.accessibilityLabel.security';
icon = IconSecurityOff;
@@ -78,14 +67,14 @@ export default class AbstractSecurityDialogButton<P: Props, S:*>
* Maps part of the redux state to the component's props.
*
* @param {Object} state - The redux store/state.
* @returns {Props}
* @returns {IProps}
*/
export function _mapStateToProps(state: Object) {
export function _mapStateToProps(state: IReduxState) {
const { conference } = state['features/base/conference'];
const { hideLobbyButton } = getSecurityUiConfig(state);
const { locked } = state['features/base/conference'];
const { lobbyEnabled } = state['features/lobby'];
const lobbySupported = conference && conference.isLobbySupported();
const lobbySupported = conference?.isLobbySupported();
const lobby = lobbySupported && isLocalParticipantModerator(state) && !hideLobbyButton;
const enabledFlag = getFeatureFlag(state, SECURITY_OPTIONS_ENABLED, true);
const enabledLobbyModeFlag = getFeatureFlag(state, LOBBY_MODE_ENABLED, true) && lobby;

32
react/features/subtitles/components/AbstractClosedCaptionButton.js → react/features/subtitles/components/AbstractClosedCaptionButton.ts
View File

@@ -1,39 +1,29 @@
// @flow
import { createToolbarEvent, sendAnalytics } from '../../analytics';
import { createToolbarEvent } from '../../analytics/AnalyticsEvents';
import { sendAnalytics } from '../../analytics/functions';
import { IReduxState } from '../../app/types';
import { MEET_FEATURES } from '../../base/jwt/constants';
import { isLocalParticipantModerator } from '../../base/participants';
import { AbstractButton, type AbstractButtonProps } from '../../base/toolbox/components';
import { isLocalParticipantModerator } from '../../base/participants/functions';
import AbstractButton, { IProps as AbstractButtonProps } from '../../base/toolbox/components/AbstractButton';
import { maybeShowPremiumFeatureDialog } from '../../jaas/actions';
export type AbstractProps = AbstractButtonProps & {
/**
* Invoked to obtain translated strings.
*/
t: Function,
/**
* Invoked to Dispatch an Action to the redux store.
*/
dispatch: Function,
export interface IAbstractProps extends AbstractButtonProps {
/**
* Whether the local participant is currently requesting subtitles.
*/
_requestingSubtitles: Boolean,
_requestingSubtitles: boolean;
/**
* Selected language for subtitle.
*/
_subtitles: String
};
_subtitles: string;
}
/**
* The button component which starts/stops the transcription.
*/
export class AbstractClosedCaptionButton
extends AbstractButton<AbstractProps, *> {
extends AbstractButton<IAbstractProps> {
/**
* Helper function to be implemented by subclasses, which should be used
@@ -105,7 +95,7 @@ export class AbstractClosedCaptionButton
* visible: boolean
* }}
*/
export function _abstractMapStateToProps(state: Object, ownProps: Object) {
export function _abstractMapStateToProps(state: IReduxState, ownProps: IAbstractProps) {
const { _requestingSubtitles, _language } = state['features/subtitles'];
const { transcription } = state['features/base/config'];
const { isTranscribing } = state['features/transcribing'];

2
react/features/toolbox/actions.web.ts
View File

@@ -212,7 +212,7 @@ export function setHangupMenuVisible(visible: boolean): Object {
* visible: boolean
* }}
*/
export function setOverflowMenuVisible(visible: boolean): Object {
export function setOverflowMenuVisible(visible: boolean) {
return {
type: SET_OVERFLOW_MENU_VISIBLE,
visible

49
react/features/toolbox/components/AbstractToolbarButton.js → react/features/toolbox/components/AbstractToolbarButton.ts
View File

@@ -1,56 +1,54 @@
/* @flow */
import { Component } from 'react';
import React, { Component, ReactElement } from 'react';
/**
* The type of the React {@code Component} props of
* {@link AbstractToolbarButton}.
*/
export type Props = {
export interface IProps {
/**
* A succinct description of what the button does. Used by accessibility
* tools and torture tests.
*/
accessibilityLabel: string,
accessibilityLabel: string;
/**
* The Icon of this {@code AbstractToolbarButton}.
*/
icon: Object,
icon: Object;
/**
* The style of the Icon of this {@code AbstractToolbarButton}.
*/
iconStyle?: Object,
iconStyle?: Object;
/**
* On click handler.
*/
onClick: Function,
onClick: Function;
/**
* {@code AbstractToolbarButton} Styles.
*/
style?: Array<string> | Object,
style?: Array<string> | Object;
/**
* An optional modifier to render the button toggled.
*/
toggled?: boolean,
toggled?: boolean;
/**
* The color underlying the button.
*/
underlayColor?: any
};
underlayColor?: any;
}
/**
* Abstract (base) class for a button in {@link Toolbar}.
*
* @abstract
*/
export default class AbstractToolbarButton<P: Props, State=void> extends Component<P, State> {
export default class AbstractToolbarButton<P extends IProps, State=void> extends Component<P, State> {
/**
* Initializes a new {@code AbstractToolbarButton} instance.
*
@@ -64,8 +62,6 @@ export default class AbstractToolbarButton<P: Props, State=void> extends Compone
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.
@@ -74,10 +70,10 @@ export default class AbstractToolbarButton<P: Props, State=void> extends Compone
* @returns {*} The result returned by the invocation of the {@code onClick}
* prop of this instance if any.
*/
_onClick(...args) {
_onClick(...args: any) {
const { onClick } = this.props;
return onClick && onClick(...args);
return onClick?.(...args);
}
/**
@@ -90,7 +86,22 @@ export default class AbstractToolbarButton<P: Props, State=void> extends Compone
return this._renderButton(this._renderIcon());
}
_renderButton: (React$Element<any> | null) => React$Element<any>;
/**
* Render a button element.
*
* @param {ReactElement | null} _el - The element to render inside the button.
* @returns {ReactElement}
*/
_renderButton(_el: ReactElement | null): React.ReactElement | null {
return null;
}
_renderIcon: () => React$Element<any> | null;
/**
* Render an icon element.
*
* @returns {ReactElement | null}
*/
_renderIcon(): React.ReactElement | null {
return null;
}
}

16
react/features/toolbox/components/web/CustomOptionButton.tsx
View File

@@ -1,28 +1,22 @@
import React from 'react';
// eslint-disable-next-line lines-around-comment
// @ts-ignore
import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox/components';
import AbstractButton, { IProps as AbstractButtonProps } from '../../../base/toolbox/components/AbstractButton';
type Props = AbstractButtonProps & {
interface IProps extends AbstractButtonProps {
icon: string;
id?: string;
text: string;
};
}
/**
* Component that renders a custom toolbox button.
*
* @returns {Component}
*/
class CustomOptionButton extends AbstractButton<Props, any, any> {
// @ts-ignore
class CustomOptionButton extends AbstractButton<IProps> {
iconSrc = this.props.icon;
// @ts-ignore
id = this.props.id;
// @ts-ignore
text = this.props.text;
accessibilityLabel = this.text;

18
react/features/toolbox/components/web/HangupToggleButton.tsx
View File

@@ -1,14 +1,13 @@
// @ts-ignore
import { translate } from '../../../base/i18n';
import { connect } from 'react-redux';
import { translate } from '../../../base/i18n/functions';
import { IconCloseLarge, IconHangup } from '../../../base/icons/svg';
// eslint-disable-next-line lines-around-comment
// @ts-ignore
import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox/components';
import AbstractButton, { IProps as AbstractButtonProps } from '../../../base/toolbox/components/AbstractButton';
/**
* The type of the React {@code Component} props of {@link HangupToggleButton}.
*/
type Props = AbstractButtonProps & {
interface IProps extends AbstractButtonProps {
/**
* Whether the more options menu is open.
@@ -19,19 +18,18 @@ type Props = AbstractButtonProps & {
* External handler for key down action.
*/
onKeyDown: Function;
};
}
/**
* Implementation of a button for toggling the hangup menu.
*/
class HangupToggleButton extends AbstractButton<Props, any, any> {
class HangupToggleButton extends AbstractButton<IProps> {
accessibilityLabel = 'toolbar.accessibilityLabel.hangup';
icon = IconHangup;
label = 'toolbar.hangup';
toggledIcon = IconCloseLarge;
toggledLabel = 'toolbar.hangup';
tooltip = 'toolbar.hangup';
props: Props;
/**
* Indicates whether this button is in toggled state or not.
@@ -56,4 +54,4 @@ class HangupToggleButton extends AbstractButton<Props, any, any> {
}
}
export default translate(HangupToggleButton);
export default connect()(translate(HangupToggleButton));

39
react/features/video-menu/components/AbstractGrantModeratorButton.js → react/features/video-menu/components/AbstractGrantModeratorButton.ts
View File

@@ -1,39 +1,24 @@
// @flow
import { openDialog } from '../../base/dialog';
import { IconModerator } from '../../base/icons';
import {
PARTICIPANT_ROLE,
getLocalParticipant,
getParticipantById,
isParticipantModerator
} from '../../base/participants';
import { AbstractButton, type AbstractButtonProps } from '../../base/toolbox/components';
import { IReduxState } from '../../app/types';
import { openDialog } from '../../base/dialog/actions';
import { IconModerator } from '../../base/icons/svg';
import { PARTICIPANT_ROLE } from '../../base/participants/constants';
import { getLocalParticipant, getParticipantById, isParticipantModerator } from '../../base/participants/functions';
import AbstractButton, { IProps as AbstractButtonProps } from '../../base/toolbox/components/AbstractButton';
import { GrantModeratorDialog } from './';
export type Props = AbstractButtonProps & {
/**
* The redux {@code dispatch} function.
*/
dispatch: Function,
export interface IProps extends AbstractButtonProps {
/**
* The ID of the participant for whom to grant moderator status.
*/
participantID: string,
/**
* The function to be used to translate i18n labels.
*/
t: Function
};
participantID: string;
}
/**
* An abstract remote video menu button which kicks the remote participant.
*/
export default class AbstractGrantModeratorButton extends AbstractButton<Props, *> {
export default class AbstractGrantModeratorButton extends AbstractButton<IProps> {
accessibilityLabel = 'toolbar.accessibilityLabel.grantModerator';
icon = IconModerator;
label = 'videothumbnail.grantModerator';
@@ -61,7 +46,7 @@ export default class AbstractGrantModeratorButton extends AbstractButton<Props,
* visible: boolean
* }}
*/
export function _mapStateToProps(state: Object, ownProps: Props) {
export function _mapStateToProps(state: IReduxState, ownProps: IProps) {
const { participantID } = ownProps;
const localParticipant = getLocalParticipant(state);
@@ -69,6 +54,6 @@ export function _mapStateToProps(state: Object, ownProps: Props) {
return {
visible: Boolean(localParticipant?.role === PARTICIPANT_ROLE.MODERATOR)
&& !isParticipantModerator(targetParticipant)
&& !isParticipantModerator(targetParticipant)
};
}

26
react/features/video-menu/components/AbstractKickButton.js → react/features/video-menu/components/AbstractKickButton.ts
View File

@@ -1,33 +1,21 @@
// @flow
import { openDialog } from '../../base/dialog';
import { IconUserDeleted } from '../../base/icons';
import { AbstractButton, type AbstractButtonProps } from '../../base/toolbox/components';
import { openDialog } from '../../base/dialog/actions';
import { IconUserDeleted } from '../../base/icons/svg';
import AbstractButton, { IProps as AbstractButtonProps } from '../../base/toolbox/components/AbstractButton';
import { KickRemoteParticipantDialog } from './';
export type Props = AbstractButtonProps & {
/**
* The redux {@code dispatch} function.
*/
dispatch: Function,
export interface IProps extends AbstractButtonProps {
/**
* The ID of the participant that this button is supposed to kick.
*/
participantID: string,
/**
* The function to be used to translate i18n labels.
*/
t: Function
};
participantID: string;
}
/**
* An abstract remote video menu button which kicks the remote participant.
*/
export default class AbstractKickButton extends AbstractButton<Props, *> {
export default class AbstractKickButton extends AbstractButton<IProps> {
accessibilityLabel = 'toolbar.accessibilityLabel.kick';
icon = IconUserDeleted;
label = 'videothumbnail.kick';

39
react/features/video-menu/components/AbstractMuteButton.js → react/features/video-menu/components/AbstractMuteButton.ts
View File

@@ -1,45 +1,32 @@
// @flow
import {
createRemoteVideoMenuButtonEvent,
sendAnalytics
} from '../../analytics';
import { createRemoteVideoMenuButtonEvent } from '../../analytics/AnalyticsEvents';
import { sendAnalytics } from '../../analytics/functions';
import { IReduxState } from '../../app/types';
import { rejectParticipantAudio } from '../../av-moderation/actions';
import { IconMicSlash } from '../../base/icons';
import { MEDIA_TYPE } from '../../base/media';
import { AbstractButton, type AbstractButtonProps } from '../../base/toolbox/components';
import { isRemoteTrackMuted } from '../../base/tracks';
import { IconMicSlash } from '../../base/icons/svg';
import { MEDIA_TYPE } from '../../base/media/constants';
import AbstractButton, { IProps as AbstractButtonProps } from '../../base/toolbox/components/AbstractButton';
import { isRemoteTrackMuted } from '../../base/tracks/functions.any';
import { muteRemote } from '../actions.any';
export type Props = AbstractButtonProps & {
export interface IProps extends AbstractButtonProps {
/**
* Boolean to indicate if the audio track of the participant is muted or
* not.
*/
_audioTrackMuted: boolean,
/**
* The redux {@code dispatch} function.
*/
dispatch: Function,
_audioTrackMuted: boolean;
/**
* The ID of the participant object that this button is supposed to
* mute/unmute.
*/
participantID: string,
/**
* The function to be used to translate i18n labels.
*/
t: Function
};
participantID: string;
}
/**
* An abstract remote video menu button which mutes the remote participant.
*/
export default class AbstractMuteButton extends AbstractButton<Props, *> {
export default class AbstractMuteButton extends AbstractButton<IProps> {
accessibilityLabel = 'toolbar.accessibilityLabel.remoteMute';
icon = IconMicSlash;
label = 'videothumbnail.domute';
@@ -93,7 +80,7 @@ export default class AbstractMuteButton extends AbstractButton<Props, *> {
* _audioTrackMuted: boolean
* }}
*/
export function _mapStateToProps(state: Object, ownProps: Props) {
export function _mapStateToProps(state: IReduxState, ownProps: IProps) {
const tracks = state['features/base/tracks'];
return {

29
react/features/video-menu/components/AbstractMuteEveryoneElseButton.js → react/features/video-menu/components/AbstractMuteEveryoneElseButton.ts
View File

@@ -1,34 +1,23 @@
// @flow
import { createToolbarEvent, sendAnalytics } from '../../analytics';
import { openDialog } from '../../base/dialog';
import { IconMicSlash } from '../../base/icons';
import { AbstractButton, type AbstractButtonProps } from '../../base/toolbox/components';
import { createToolbarEvent } from '../../analytics/AnalyticsEvents';
import { sendAnalytics } from '../../analytics/functions';
import { openDialog } from '../../base/dialog/actions';
import { IconMicSlash } from '../../base/icons/svg';
import AbstractButton, { IProps as AbstractButtonProps } from '../../base/toolbox/components/AbstractButton';
import { MuteEveryoneDialog } from './';
export type Props = AbstractButtonProps & {
/**
* The redux {@code dispatch} function.
*/
dispatch: Function,
export interface IProps extends AbstractButtonProps {
/**
* The ID of the participant object that this button is supposed to keep unmuted.
*/
participantID: string,
/**
* The function to be used to translate i18n labels.
*/
t: Function
};
participantID: string;
}
/**
* An abstract remote video menu button which mutes all the other participants.
*/
export default class AbstractMuteEveryoneElseButton extends AbstractButton<Props, *> {
export default class AbstractMuteEveryoneElseButton extends AbstractButton<IProps> {
accessibilityLabel = 'toolbar.accessibilityLabel.muteEveryoneElse';
icon = IconMicSlash;
label = 'videothumbnail.domuteOthers';

29
react/features/video-menu/components/AbstractMuteEveryoneElsesVideoButton.js → react/features/video-menu/components/AbstractMuteEveryoneElsesVideoButton.ts
View File

@@ -1,34 +1,23 @@
// @flow
import { createToolbarEvent, sendAnalytics } from '../../analytics';
import { openDialog } from '../../base/dialog';
import { IconVideoOff } from '../../base/icons';
import { AbstractButton, type AbstractButtonProps } from '../../base/toolbox/components';
import { createToolbarEvent } from '../../analytics/AnalyticsEvents';
import { sendAnalytics } from '../../analytics/functions';
import { openDialog } from '../../base/dialog/actions';
import { IconVideoOff } from '../../base/icons/svg';
import AbstractButton, { IProps as AbstractButtonProps } from '../../base/toolbox/components/AbstractButton';
import { MuteEveryonesVideoDialog } from './';
export type Props = AbstractButtonProps & {
/**
* The redux {@code dispatch} function.
*/
dispatch: Function,
export interface IProps extends AbstractButtonProps {
/**
* The ID of the participant object that this button is supposed to keep unmuted.
*/
participantID: string,
/**
* The function to be used to translate i18n labels.
*/
t: Function
};
participantID: string;
}
/**
* An abstract remote video menu button which disables the camera of all the other participants.
*/
export default class AbstractMuteEveryoneElsesVideoButton extends AbstractButton<Props, *> {
export default class AbstractMuteEveryoneElsesVideoButton extends AbstractButton<IProps> {
accessibilityLabel = 'toolbar.accessibilityLabel.muteEveryoneElsesVideoStream';
icon = IconVideoOff;
label = 'videothumbnail.domuteVideoOfOthers';

41
react/features/video-menu/components/AbstractMuteVideoButton.js → react/features/video-menu/components/AbstractMuteVideoButton.ts
View File

@@ -1,46 +1,33 @@
// @flow
import {
createRemoteVideoMenuButtonEvent,
sendAnalytics
} from '../../analytics';
import { openDialog } from '../../base/dialog';
import { IconVideoOff } from '../../base/icons';
import { MEDIA_TYPE } from '../../base/media';
import { AbstractButton, type AbstractButtonProps } from '../../base/toolbox/components';
import { isRemoteTrackMuted } from '../../base/tracks';
import { createRemoteVideoMenuButtonEvent } from '../../analytics/AnalyticsEvents';
import { sendAnalytics } from '../../analytics/functions';
import { IReduxState } from '../../app/types';
import { openDialog } from '../../base/dialog/actions';
import { IconVideoOff } from '../../base/icons/svg';
import { MEDIA_TYPE } from '../../base/media/constants';
import AbstractButton, { IProps as AbstractButtonProps } from '../../base/toolbox/components/AbstractButton';
import { isRemoteTrackMuted } from '../../base/tracks/functions.any';
import { MuteRemoteParticipantsVideoDialog } from './';
export type Props = AbstractButtonProps & {
export interface IProps extends AbstractButtonProps {
/**
* Boolean to indicate if the video track of the participant is muted or
* not.
*/
_videoTrackMuted: boolean,
/**
* The redux {@code dispatch} function.
*/
dispatch: Function,
_videoTrackMuted: boolean;
/**
* The ID of the participant object that this button is supposed to
* mute/unmute.
*/
participantID: string,
/**
* The function to be used to translate i18n labels.
*/
t: Function
};
participantID: string;
}
/**
* An abstract remote video menu button which mutes the remote participant.
*/
export default class AbstractMuteVideoButton extends AbstractButton<Props, *> {
export default class AbstractMuteVideoButton extends AbstractButton<IProps> {
accessibilityLabel = 'toolbar.accessibilityLabel.remoteVideoMute';
icon = IconVideoOff;
label = 'videothumbnail.domuteVideo';
@@ -93,7 +80,7 @@ export default class AbstractMuteVideoButton extends AbstractButton<Props, *> {
* _videoTrackMuted: boolean
* }}
*/
export function _mapStateToProps(state: Object, ownProps: Props) {
export function _mapStateToProps(state: IReduxState, ownProps: IProps) {
const tracks = state['features/base/tracks'];
return {

2
react/features/video-menu/components/index.native.js → react/features/video-menu/components/index.native.ts
View File

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

2
react/features/video-menu/components/index.web.js → react/features/video-menu/components/index.web.ts
View File

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

12
react/features/video-menu/components/native/index.js → react/features/video-menu/components/native/index.ts
View File

@@ -1,11 +1,19 @@
// @flow
/* eslint-disable lines-around-comment */
// @ts-ignore
export { default as GrantModeratorDialog } from './GrantModeratorDialog';
// @ts-ignore
export { default as KickRemoteParticipantDialog } from './KickRemoteParticipantDialog';
// @ts-ignore
export { default as MuteEveryoneDialog } from './MuteEveryoneDialog';
// @ts-ignore
export { default as MuteEveryonesVideoDialog } from './MuteEveryonesVideoDialog';
// @ts-ignore
export { default as MuteRemoteParticipantsVideoDialog } from './MuteRemoteParticipantsVideoDialog';
// @ts-ignore
export { default as LocalVideoMenu } from './LocalVideoMenu';
// @ts-ignore
export { default as RemoteVideoMenu } from './RemoteVideoMenu';
// @ts-ignore
export { default as SharedVideoMenu } from './SharedVideoMenu';
// @ts-ignore
export { default as VolumeSlider } from './VolumeSlider';

13
react/features/video-menu/components/web/index.js → react/features/video-menu/components/web/index.ts
View File

@@ -1,20 +1,29 @@
// @flow
/* eslint-disable lines-around-comment */
export { default as AskToUnmuteButton } from './AskToUnmuteButton';
// @ts-ignore
export { default as ConnectionStatusButton } from './ConnectionStatusButton';
// @ts-ignore
export { default as GrantModeratorButton } from './GrantModeratorButton';
export { default as GrantModeratorDialog } from './GrantModeratorDialog';
// @ts-ignore
export { default as KickButton } from './KickButton';
export { default as KickRemoteParticipantDialog } from './KickRemoteParticipantDialog';
// @ts-ignore
export { default as MuteButton } from './MuteButton';
// @ts-ignore
export { default as MuteVideoButton } from './MuteVideoButton';
export { default as MuteEveryoneDialog } from './MuteEveryoneDialog';
export { default as MuteEveryonesVideoDialog } from './MuteEveryonesVideoDialog';
// @ts-ignore
export { default as MuteEveryoneElseButton } from './MuteEveryoneElseButton';
// @ts-ignore
export { default as MuteEveryoneElsesVideoButton } from './MuteEveryoneElsesVideoButton';
export { default as MuteRemoteParticipantsVideoDialog } from './MuteRemoteParticipantsVideoDialog';
// @ts-ignore
export { default as TogglePinToStageButton } from './TogglePinToStageButton';
// @ts-ignore
export { default as PrivateMessageMenuButton } from './PrivateMessageMenuButton';
// @ts-ignore
export { REMOTE_CONTROL_MENU_STATES, default as RemoteControlButton } from './RemoteControlButton';
export { default as RemoteVideoMenuTriggerButton } from './RemoteVideoMenuTriggerButton';
export { default as LocalVideoMenuTriggerButton } from './LocalVideoMenuTriggerButton';

24
react/features/whiteboard/components/web/WhiteboardButton.tsx
View File

@@ -1,33 +1,25 @@
import { connect } from 'react-redux';
import { IReduxState, IStore } from '../../../app/types';
import { IReduxState } from '../../../app/types';
import { translate } from '../../../base/i18n/functions';
import { IconWhiteboard, IconWhiteboardHide } from '../../../base/icons/svg';
// eslint-disable-next-line lines-around-comment
// @ts-ignore
import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox/components';
import AbstractButton, { IProps as AbstractButtonProps } from '../../../base/toolbox/components/AbstractButton';
import { setOverflowMenuVisible } from '../../../toolbox/actions.web';
import { setWhiteboardOpen } from '../../actions';
import { isWhiteboardVisible } from '../../functions';
type Props = AbstractButtonProps & {
interface IProps extends AbstractButtonProps {
/**
* Whether or not the button is toggled.
*/
_toggled: boolean;
/**
* The redux {@code dispatch} function.
*/
dispatch: IStore['dispatch'];
};
}
/**
* Component that renders a toolbar button for the whiteboard.
*/
class WhiteboardButton extends AbstractButton<Props, any, any> {
class WhiteboardButton extends AbstractButton<IProps> {
accessibilityLabel = 'toolbar.accessibilityLabel.showWhiteboard';
toggledAccessibilityLabel = 'toolbar.accessibilityLabel.hideWhiteboard';
icon = IconWhiteboard;
@@ -44,8 +36,6 @@ class WhiteboardButton extends AbstractButton<Props, any, any> {
* @returns {void}
*/
_handleClick() {
// @ts-ignore
const { dispatch, _toggled } = this.props;
dispatch(setWhiteboardOpen(!_toggled));
@@ -60,7 +50,6 @@ class WhiteboardButton extends AbstractButton<Props, any, any> {
* @returns {boolean}
*/
_isToggled() {
// @ts-ignore
return this.props._toggled;
}
}
@@ -70,7 +59,7 @@ class WhiteboardButton extends AbstractButton<Props, any, any> {
*
* @param {Object} state - The Redux state.
* @private
* @returns {Props}
* @returns {IProps}
*/
function _mapStateToProps(state: IReduxState) {
return {
@@ -78,5 +67,4 @@ function _mapStateToProps(state: IReduxState) {
};
}
// @ts-ignore
export default translate(connect(_mapStateToProps)(WhiteboardButton));