haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ref(ui-components) Use new Dialog component (#12306) 

Convert some files to TS
This commit is contained in:
Robert Pintilii 2022-10-07 12:16:41 +03:00 committed by GitHub
parent be25ad855f
commit 25bd824621
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 113 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/modals/feedback/_feedback.scss
View File

@ -46,6 +46,8 @@
}
.feedback-dialog {
margin-bottom: 5px;
.details {
textarea {
min-height: 100px;

4
css/modals/screen-share/_share-audio.scss
View File

@ -1,3 +1,7 @@
.share-audio-dialog-container {
max-height: none;
}
.share-audio-dialog {
.share-audio-animation {
width: 100%;

18
react/features/base/dialog/middleware.web.ts
View File

@ -1,7 +1,21 @@
/* eslint-disable lines-around-comment */
import ChatPrivacyDialog from '../../chat/components/web/ChatPrivacyDialog';
import DisplayNamePrompt from '../../display-name/components/web/DisplayNamePrompt';
import EmbedMeetingDialog from '../../embed-meeting/components/EmbedMeetingDialog';
// @ts-ignore
import FeedbackDialog from '../../feedback/components/FeedbackDialog.web';
import AddPeopleDialog from '../../invite/components/add-people-dialog/web/AddPeopleDialog';
import PremiumFeatureDialog from '../../jaas/components/web/PremiumFeatureDialog';
import KeyboardShortcutsDialog from '../../keyboard-shortcuts/components/web/KeyboardShortcutsDialog';
// @ts-ignore
import StartLiveStreamDialog from '../../recording/components/LiveStream/web/StartLiveStreamDialog';
// @ts-ignore
import StopLiveStreamDialog from '../../recording/components/LiveStream/web/StopLiveStreamDialog';
// @ts-ignore
import StartRecordingDialog from '../../recording/components/Recording/web/StartRecordingDialog';
// @ts-ignore
import StopRecordingDialog from '../../recording/components/Recording/web/StopRecordingDialog';
import ShareAudioDialog from '../../screen-share/components/ShareAudioDialog';
import MiddlewareRegistry from '../redux/MiddlewareRegistry';
import { OPEN_DIALOG } from './actionTypes';
@ -9,7 +23,9 @@ import { OPEN_DIALOG } from './actionTypes';
// ! IMPORTANT - This whole middleware is only needed for the transition from from @atlaskit dialog to our component.
// ! It should be removed when the transition is over.
const NEW_DIALOG_LIST = [ KeyboardShortcutsDialog, ChatPrivacyDialog, DisplayNamePrompt, EmbedMeetingDialog ];
const NEW_DIALOG_LIST = [ KeyboardShortcutsDialog, ChatPrivacyDialog, DisplayNamePrompt, EmbedMeetingDialog,
FeedbackDialog, AddPeopleDialog, PremiumFeatureDialog, StartLiveStreamDialog, StopLiveStreamDialog,
StartRecordingDialog, StopRecordingDialog, ShareAudioDialog ];
// This function is necessary while the transition from @atlaskit dialog to our component is ongoing.
const isNewDialog = (component: any) => NEW_DIALOG_LIST.some(comp => comp === component);

2
react/features/base/tracks/actions.ts
View File

@ -313,7 +313,7 @@ export function showNoDataFromSourceVideoError(jitsiTrack: any) {
* shareOptions: Object
* }}
*/
export function toggleScreensharing(enabled: boolean, audioOnly = false,
export function toggleScreensharing(enabled: boolean | undefined, audioOnly = false,
ignoreDidHaveVideo = false, shareOptions = {}) {
return {
type: TOGGLE_SCREENSHARING,

5
react/features/base/ui/components/web/Dialog.tsx
View File

@ -177,6 +177,7 @@ interface DialogProps {
translationKey?: string;
};
children?: ReactElement | ReactElement[];
className?: string;
description?: string;
ok?: {
disabled?: boolean;
@ -193,6 +194,7 @@ interface DialogProps {
const Dialog = ({
cancel = { translationKey: 'dialog.Cancel' },
children,
className,
description,
ok = { translationKey: 'dialog.Ok' },
onCancel,
@ -237,7 +239,7 @@ const Dialog = ({
aria-describedby = { description }
aria-labelledby = { title ?? t(titleKey ?? '') }
aria-modal = { true }
className = { cx(classes.modal, isUnmounting && 'unmount', size) }
className = { cx(classes.modal, isUnmounting && 'unmount', size, className) }
role = 'dialog'>
<div className = { classes.header }>
<p className = { classes.title }>{title ?? t(titleKey ?? '')}</p>
@ -256,6 +258,7 @@ const Dialog = ({
{!ok.hidden && <Button
accessibilityLabel = { t(ok.translationKey ?? '') }
disabled = { ok.disabled }
id = 'modal-dialog-ok-button'
labelKey = { ok.translationKey }
onClick = { submit } />}
</div>

7
react/features/feedback/components/FeedbackDialog.web.js
View File

@ -9,10 +9,10 @@ import {
createFeedbackOpenEvent,
sendAnalytics
} from '../../analytics';
import { Dialog } from '../../base/dialog';
import { isMobileBrowser } from '../../base/environment/utils';
import { translate } from '../../base/i18n';
import { connect } from '../../base/redux';
import Dialog from '../../base/ui/components/web/Dialog';
import Input from '../../base/ui/components/web/Input';
import { cancelFeedback, submitFeedback } from '../actions';
@ -250,9 +250,10 @@ class FeedbackDialog extends Component<Props, State> {
return (
<Dialog
okKey = 'dialog.Submit'
ok = {{
translationKey: 'dialog.Submit'
}}
onCancel = { this._onCancel }
onDialogRef = { this._onScrollTop }
onSubmit = { this._onSubmit }
titleKey = 'feedback.rateExperience'>
<div className = 'feedback-dialog'>

92
react/features/invite/components/add-people-dialog/web/AddPeopleDialog.js → react/features/invite/components/add-people-dialog/web/AddPeopleDialog.tsx
View File

@ -1,17 +1,24 @@
// @flow
/* eslint-disable lines-around-comment */
import React, { useEffect } from 'react';
import { WithTranslation } from 'react-i18next';
import { createInviteDialogEvent, sendAnalytics } from '../../../../analytics';
import { getInviteURL } from '../../../../base/connection';
import { Dialog } from '../../../../base/dialog';
import { translate } from '../../../../base/i18n';
import { createInviteDialogEvent } from '../../../../analytics/AnalyticsEvents';
import { sendAnalytics } from '../../../../analytics/functions';
import { IState } from '../../../../app/types';
import { getInviteURL } from '../../../../base/connection/functions';
import { translate } from '../../../../base/i18n/functions';
import { JitsiRecordingConstants } from '../../../../base/lib-jitsi-meet';
import { connect } from '../../../../base/redux';
import { connect } from '../../../../base/redux/functions';
import Dialog from '../../../../base/ui/components/web/Dialog';
// @ts-ignore
import { isDynamicBrandingDataLoaded } from '../../../../dynamic-branding/functions.any';
// @ts-ignore
import EmbedMeetingTrigger from '../../../../embed-meeting/components/EmbedMeetingTrigger';
// @ts-ignore
import { isVpaasMeeting } from '../../../../jaas/functions';
// @ts-ignore
import { getActiveSession } from '../../../../recording';
// @ts-ignore
import { updateDialInNumbers } from '../../../actions';
import {
_getDefaultPhoneNumber,
@ -21,95 +28,94 @@ import {
isDialOutEnabled,
isSharingEnabled,
sharingFeatures
// @ts-ignore
} from '../../../functions';
// @ts-ignore
import CopyMeetingLinkSection from './CopyMeetingLinkSection';
import DialInLimit from './DialInLimit';
// @ts-ignore
import DialInSection from './DialInSection';
// @ts-ignore
import InviteByEmailSection from './InviteByEmailSection';
// @ts-ignore
import InviteContactsSection from './InviteContactsSection';
// @ts-ignore
import LiveStreamSection from './LiveStreamSection';
declare var interfaceConfig: Object;
type Props = {
interface Props extends WithTranslation {
/**
* The object representing the dialIn feature.
*/
_dialIn: Object,
/**
* Whether or not embed meeting should be visible.
*/
_embedMeetingVisible: boolean,
_dialIn: any;
/**
* Whether or not dial in number should be visible.
*/
_dialInVisible: boolean,
/**
* Whether or not url sharing button should be visible.
*/
_urlSharingVisible: boolean,
_dialInVisible: boolean;
/**
* Whether or not email sharing features should be visible.
*/
_emailSharingVisible: boolean,
_emailSharingVisible: boolean;
/**
* Whether or not embed meeting should be visible.
*/
_embedMeetingVisible: boolean;
/**
* The meeting invitation text.
*/
_invitationText: string,
_invitationText: string;
/**
* The custom no new-lines meeting invitation text for iOS default email.
* Needed because of this mailto: iOS issue: https://developer.apple.com/forums/thread/681023.
*/
_invitationTextiOS: string,
_invitationTextiOS: string;
/**
* An alternate app name to be displayed in the email subject.
*/
_inviteAppName: ?string,
_inviteAppName?: string;
/**
* Whether or not invite contacts should be visible.
*/
_inviteContactsVisible: boolean,
_inviteContactsVisible: boolean;
/**
* The current url of the conference to be copied onto the clipboard.
*/
_inviteUrl: string,
_inviteUrl: string;
/**
* Whether or not the current meeting belongs to a JaaS user.
*/
_isVpaasMeeting: boolean,
_isVpaasMeeting: boolean;
/**
* The current known URL for a live stream in progress.
*/
_liveStreamViewURL: string,
_liveStreamViewURL: string;
/**
* The default phone number.
*/
_phoneNumber: ?string,
_phoneNumber?: string;
/**
* Invoked to obtain translated strings.
* Whether or not url sharing button should be visible.
*/
t: Function,
_urlSharingVisible: boolean;
/**
* Method to update the dial in numbers.
*/
updateNumbers: Function
};
updateNumbers: Function;
}
/**
* Invite More component.
@ -163,11 +169,9 @@ function AddPeopleDialog({
return (
<Dialog
cancelKey = { 'dialog.close' }
hideCancelButton = { true }
submitDisabled = { true }
titleKey = 'addPeople.inviteMorePrompt'
width = { 'small' }>
cancel = {{ hidden: true }}
ok = {{ hidden: true }}
titleKey = 'addPeople.inviteMorePrompt'>
<div className = 'invite-more-dialog'>
{ _inviteContactsVisible && <InviteContactsSection /> }
{_urlSharingVisible ? <CopyMeetingLinkSection url = { _inviteUrl } /> : null}
@ -207,7 +211,7 @@ function AddPeopleDialog({
* @private
* @returns {Props}
*/
function mapStateToProps(state, ownProps) {
function mapStateToProps(state: IState, ownProps: Partial<Props>) {
const currentLiveStreamingSession
= getActiveSession(state, JitsiRecordingConstants.mode.STREAM);
const { iAmRecorder, inviteAppName } = state['features/base/config'];
@ -215,7 +219,7 @@ function mapStateToProps(state, ownProps) {
const dialOutEnabled = isDialOutEnabled(state);
const hideInviteContacts = iAmRecorder || (!addPeopleEnabled && !dialOutEnabled);
const dialIn = state['features/invite'];
const phoneNumber = dialIn && dialIn.numbers ? _getDefaultPhoneNumber(dialIn.numbers) : undefined;
const phoneNumber = dialIn?.numbers ? _getDefaultPhoneNumber(dialIn.numbers) : undefined;
return {
_dialIn: dialIn,
@ -233,9 +237,7 @@ function mapStateToProps(state, ownProps) {
_inviteContactsVisible: interfaceConfig.ENABLE_DIAL_OUT && !hideInviteContacts,
_inviteUrl: getInviteURL(state),
_isVpaasMeeting: isVpaasMeeting(state),
_liveStreamViewURL:
currentLiveStreamingSession
&& currentLiveStreamingSession.liveStreamViewURL,
_liveStreamViewURL: currentLiveStreamingSession?.liveStreamViewURL,
_phoneNumber: phoneNumber
};
}

22
react/features/jaas/components/web/PremiumFeatureDialog.js → react/features/jaas/components/web/PremiumFeatureDialog.tsx
View File

@ -1,11 +1,9 @@
// @flow
import React, { PureComponent } from 'react';
import { Dialog } from '../../../base/dialog';
import { translate } from '../../../base/i18n';
import { openURLInBrowser } from '../../../base/util';
import { translate } from '../../../base/i18n/functions';
import Dialog from '../../../base/ui/components/web/Dialog';
import { openURLInBrowser } from '../../../base/util/openURLInBrowser.web';
import { JAAS_UPGRADE_URL } from '../../constants';
/**
@ -13,22 +11,19 @@ import { JAAS_UPGRADE_URL } from '../../constants';
*
* @returns {React$Element<any>}
*/
class PremiumFeatureDialog extends PureComponent<*> {
class PremiumFeatureDialog extends PureComponent<any> {
/**
* Instantiates a new component.
*
* @inheritdoc
*/
constructor(props) {
constructor(props: any) {
super(props);
this._onSubmitValue = this._onSubmitValue.bind(this);
}
_onSubmitValue: () => void;
/**
* Callback to be invoked when the dialog ok is pressed.
*
@ -48,11 +43,10 @@ class PremiumFeatureDialog extends PureComponent<*> {
return (
<Dialog
hideCancelButton = { true }
okKey = { t('dialog.viewUpgradeOptions') }
cancel = {{ hidden: true }}
ok = {{ translationKey: 'dialog.viewUpgradeOptions' }}
onSubmit = { this._onSubmitValue }
titleKey = { t('dialog.viewUpgradeOptionsTitle') }
width = { 'small' }>
titleKey = { t('dialog.viewUpgradeOptionsTitle') }>
<span>{t('dialog.viewUpgradeOptionsContent')}</span>
</Dialog>
);

8
react/features/recording/components/LiveStream/web/StartLiveStreamDialog.js
View File

@ -3,9 +3,9 @@
import Spinner from '@atlaskit/spinner';
import React from 'react';
import { Dialog } from '../../../../base/dialog';
import { translate } from '../../../../base/i18n';
import { connect } from '../../../../base/redux';
import Dialog from '../../../../base/ui/components/web/Dialog';
import {
GOOGLE_API_STATES,
GoogleSignInButton,
@ -85,12 +85,10 @@ class StartLiveStreamDialog
return (
<Dialog
cancelKey = 'dialog.Cancel'
okKey = 'dialog.startLiveStreaming'
ok = {{ translationKey: 'dialog.startLiveStreaming' }}
onCancel = { this._onCancel }
onSubmit = { this._onSubmit }
titleKey = 'liveStreaming.start'
width = { 'small' }>
titleKey = 'liveStreaming.start'>
<div className = 'live-stream-dialog'>
{ _googleApiApplicationClientID
? this._renderYouTubePanel() : null }

7
react/features/recording/components/LiveStream/web/StopLiveStreamDialog.js
View File

@ -2,9 +2,9 @@
import React from 'react';
import { Dialog } from '../../../../base/dialog';
import { translate } from '../../../../base/i18n';
import { connect } from '../../../../base/redux';
import Dialog from '../../../../base/ui/components/web/Dialog';
import AbstractStopLiveStreamDialog, {
_mapStateToProps
} from '../AbstractStopLiveStreamDialog';
@ -26,10 +26,9 @@ class StopLiveStreamDialog extends AbstractStopLiveStreamDialog {
render() {
return (
<Dialog
okKey = 'dialog.stopLiveStreaming'
ok = {{ translationKey: 'dialog.stopLiveStreaming' }}
onSubmit = { this._onSubmit }
titleKey = 'dialog.liveStreaming'
width = 'small'>
titleKey = 'dialog.liveStreaming'>
{ this.props.t('dialog.stopStreamingWarning') }
</Dialog>
);

11
react/features/recording/components/Recording/web/StartRecordingDialog.js
View File

@ -1,8 +1,8 @@
import React from 'react';
import { Dialog } from '../../../../base/dialog';
import { translate } from '../../../../base/i18n';
import { connect } from '../../../../base/redux';
import Dialog from '../../../../base/ui/components/web/Dialog';
import { toggleScreenshotCaptureSummary } from '../../../../screenshot-capture';
import { isScreenshotCaptureEnabled } from '../../../../screenshot-capture/functions';
import { RECORDING_TYPES } from '../../../constants';
@ -68,11 +68,12 @@ class StartRecordingDialog extends AbstractStartRecordingDialog {
return (
<Dialog
okDisabled = { this.isStartRecordingDisabled() }
okKey = 'dialog.startRecording'
ok = {{
translationKey: 'dialog.startRecording',
disabled: this.isStartRecordingDisabled()
}}
onSubmit = { this._onSubmit }
titleKey = 'dialog.startRecording'
width = 'small'>
titleKey = 'dialog.startRecording'>
<StartRecordingDialogContent
fileRecordingsServiceEnabled = { _fileRecordingsServiceEnabled }
fileRecordingsServiceSharingEnabled = { _fileRecordingsServiceSharingEnabled }

7
react/features/recording/components/Recording/web/StopRecordingDialog.js
View File

@ -2,9 +2,9 @@
import React from 'react';
import { Dialog } from '../../../../base/dialog';
import { translate } from '../../../../base/i18n';
import { connect } from '../../../../base/redux';
import Dialog from '../../../../base/ui/components/web/Dialog';
import { toggleScreenshotCaptureSummary } from '../../../../screenshot-capture';
import AbstractStopRecordingDialog, {
type Props,
@ -29,10 +29,9 @@ class StopRecordingDialog extends AbstractStopRecordingDialog<Props> {
return (
<Dialog
okKey = 'dialog.confirm'
ok = {{ translationKey: 'dialog.confirm' }}
onSubmit = { this._onSubmit }
titleKey = 'dialog.recording'
width = 'small'>
titleKey = 'dialog.recording'>
{t(localRecordingVideoStop ? 'recording.localRecordingVideoStop' : 'dialog.stopRecordingWarning') }
</Dialog>
);

27
react/features/screen-share/components/ShareAudioDialog.tsx
View File

@ -1,20 +1,15 @@
/* eslint-disable lines-around-comment */
import React, { Component } from 'react';
import { WithTranslation } from 'react-i18next';
import type { Dispatch } from 'redux';
// @ts-ignore
import { Dialog } from '../../base/dialog';
import { IState } from '../../app/types';
import { translate } from '../../base/i18n/functions';
import { connect } from '../../base/redux/functions';
import {
shouldHideShareAudioHelper,
updateSettings
// @ts-ignore
} from '../../base/settings';
// @ts-ignore
import { toggleScreensharing } from '../../base/tracks';
import { updateSettings } from '../../base/settings/actions';
import { shouldHideShareAudioHelper } from '../../base/settings/functions.any';
import { toggleScreensharing } from '../../base/tracks/actions';
import Checkbox from '../../base/ui/components/web/Checkbox';
import Dialog from '../../base/ui/components/web/Dialog';
/**
* The type of the React {@code Component} props of {@link ShareAudioDialog}.
@ -83,11 +78,11 @@ class ShareAudioDialog extends Component<Props> {
return (
<Dialog
hideCancelButton = { false }
okKey = { t('dialog.shareAudio') }
className = 'share-audio-dialog-container'
ok = {{ translationKey: 'dialog.shareAudio' }}
onSubmit = { this._onContinue }
titleKey = { t('dialog.shareAudioTitle') }
width = { 'medium' } >
size = 'large'
titleKey = { t('dialog.shareAudioTitle') }>
<div className = 'share-audio-dialog'>
<img
className = 'share-audio-animation'
@ -107,11 +102,11 @@ class ShareAudioDialog extends Component<Props> {
/**
* Maps part of the Redux state to the props of this component.
*
* @param {Object} state - The Redux state.
* @param {IState} state - The Redux state.
* @private
* @returns {Props}
*/
function _mapStateToProps(state: Object): Partial<Props> {
function _mapStateToProps(state: IState): Partial<Props> {
return {
_shouldHideShareAudioHelper: shouldHideShareAudioHelper(state)