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

feat(dialog) added react-native-dialog dep and updated ConfirmDialog

This commit is contained in:
Calinteodor 2022-02-03 17:45:02 +02:00 committed by GitHub
parent b9f3448379
commit debb63d3d6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
23 changed files with 313 additions and 342 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
package-lock.json generated
View File

@ -88,6 +88,7 @@
"react-native-collapsible": "1.6.0",
"react-native-default-preference": "github:kevinresol/react-native-default-preference#11bff5eb05cb04fd8d35b5e761eeee80525e8c6c",
"react-native-device-info": "8.4.8",
"react-native-dialog": "9.2.0",
"react-native-gesture-handler": "2.1.0",
"react-native-get-random-values": "1.7.2",
"react-native-immersive": "2.0.0",
@ -15080,6 +15081,14 @@
"react-native": "*"
}
},
"node_modules/react-native-dialog": {
"version": "9.2.0",
"resolved": "https://registry.npmjs.org/react-native-dialog/-/react-native-dialog-9.2.0.tgz",
"integrity": "sha512-VXdfo+bAi9ER7+w4aKOWypw8K97C2orvnfnxX4Lup/U8iQB/635V00hgfHEE3s0XScQHftXxm34Fa4iIIjojQA==",
"peerDependencies": {
"react-native": ">=0.63.0"
}
},
"node_modules/react-native-gesture-handler": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.1.0.tgz",
@ -31586,6 +31595,11 @@
"resolved": "https://registry.npmjs.org/react-native-device-info/-/react-native-device-info-8.4.8.tgz",
"integrity": "sha512-92676ZWHZHsPM/EW1ulgb2MuVfjYfMWRTWMbLcrCsipkcMaZ9Traz5mpsnCS7KZpsOksnvUinzDIjsct2XGc6Q=="
},
"react-native-dialog": {
"version": "9.2.0",
"resolved": "https://registry.npmjs.org/react-native-dialog/-/react-native-dialog-9.2.0.tgz",
"integrity": "sha512-VXdfo+bAi9ER7+w4aKOWypw8K97C2orvnfnxX4Lup/U8iQB/635V00hgfHEE3s0XScQHftXxm34Fa4iIIjojQA=="
},
"react-native-gesture-handler": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.1.0.tgz",

1
package.json
View File

@ -93,6 +93,7 @@
"react-native-collapsible": "1.6.0",
"react-native-default-preference": "github:kevinresol/react-native-default-preference#11bff5eb05cb04fd8d35b5e761eeee80525e8c6c",
"react-native-device-info": "8.4.8",
"react-native-dialog": "9.2.0",
"react-native-gesture-handler": "2.1.0",
"react-native-get-random-values": "1.7.2",
"react-native-immersive": "2.0.0",

6
react/features/authentication/components/native/WaitForOwnerDialog.js
View File

@ -63,14 +63,14 @@ class WaitForOwnerDialog extends Component<Props> {
return (
<ConfirmDialog
cancelKey = 'dialog.Cancel'
contentKey = {
cancelLabel = 'dialog.Cancel'
confirmLabel = 'dialog.IamHost'
descriptionKey = {
{
key: 'dialog.WaitForHostMsgWOk',
params: { room }
}
}
okKey = 'dialog.Ok'
onCancel = { this._onCancel }
onSubmit = { this._onLogin } />
);

57
react/features/base/dialog/components/functions.native.js Normal file
View File

@ -0,0 +1,57 @@
import React from 'react';
import { Text } from 'react-native';
import { brandedDialog as styles } from './native';
/**
* Renders a specific {@code string} which may contain HTML.
*
* @param {string|undefined} html - The {@code string} which may
* contain HTML to render.
* @returns {ReactElement[]|string}
*/
export function renderHTML(html) {
if (typeof html === 'string') {
// At the time of this writing, the specified HTML contains a couple
// of spaces one after the other. They do not cause a visible
// problem on Web, because the specified HTML is rendered as, well,
// HTML. However, we're not rendering HTML here.
// eslint-disable-next-line no-param-reassign
html = html.replace(/\s{2,}/gi, ' ');
// Render text in <b>text</b> in bold.
const opening = /<\s*b\s*>/gi;
const closing = /<\s*\/\s*b\s*>/gi;
let o;
let c;
let prevClosingLastIndex = 0;
const r = [];
// eslint-disable-next-line no-cond-assign
while (o = opening.exec(html)) {
closing.lastIndex = opening.lastIndex;
// eslint-disable-next-line no-cond-assign
if (c = closing.exec(html)) {
r.push(html.substring(prevClosingLastIndex, o.index));
r.push(
<Text style = { styles.boldDialogText }>
{ html.substring(opening.lastIndex, c.index) }
</Text>);
opening.lastIndex
= prevClosingLastIndex
= closing.lastIndex;
} else {
break;
}
}
if (prevClosingLastIndex < html.length) {
r.push(html.substring(prevClosingLastIndex));
}
return r;
}
return html;
}

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

@ -6,6 +6,7 @@ import { Text } from 'react-native';
import { translate } from '../../../i18n';
import { connect } from '../../../redux';
import { _abstractMapStateToProps } from '../../functions';
import { renderHTML } from '../functions.native';
import { type Props as AbstractProps } from './BaseDialog';
import BaseSubmitDialog from './BaseSubmitDialog';
@ -36,7 +37,7 @@ class AlertDialog extends BaseSubmitDialog<Props, *> {
const content
= typeof contentKey === 'string'
? t(contentKey)
: this._renderHTML(t(contentKey.key, contentKey.params));
: renderHTML(t(contentKey.key, contentKey.params));
return (
<Text style = { _dialogStyles.text }>
@ -44,8 +45,6 @@ class AlertDialog extends BaseSubmitDialog<Props, *> {
</Text>
);
}
_renderHTML: string => Object | string;
}
export default translate(connect(_abstractMapStateToProps)(AlertDialog));

53
react/features/base/dialog/components/native/BaseDialog.js
View File

@ -94,59 +94,6 @@ class BaseDialog<P: Props, S: State> extends AbstractDialog<P, S> {
* @returns {ReactElement}
*/
_renderContent: () => Object;
/**
* Renders a specific {@code string} which may contain HTML.
*
* @param {string|undefined} html - The {@code string} which may
* contain HTML to render.
* @returns {ReactElement[]|string}
*/
_renderHTML(html: ?string) {
if (typeof html === 'string') {
// At the time of this writing, the specified HTML contains a couple
// of spaces one after the other. They do not cause a visible
// problem on Web, because the specified HTML is rendered as, well,
// HTML. However, we're not rendering HTML here.
// eslint-disable-next-line no-param-reassign
html = html.replace(/\s{2,}/gi, ' ');
// Render text in <b>text</b> in bold.
const opening = /<\s*b\s*>/gi;
const closing = /<\s*\/\s*b\s*>/gi;
let o;
let c;
let prevClosingLastIndex = 0;
const r = [];
// eslint-disable-next-line no-cond-assign
while (o = opening.exec(html)) {
closing.lastIndex = opening.lastIndex;
// eslint-disable-next-line no-cond-assign
if (c = closing.exec(html)) {
r.push(html.substring(prevClosingLastIndex, o.index));
r.push(
<Text style = { styles.boldDialogText }>
{ html.substring(opening.lastIndex, c.index) }
</Text>);
opening.lastIndex
= prevClosingLastIndex
= closing.lastIndex;
} else {
break;
}
}
if (prevClosingLastIndex < html.length) {
r.push(html.substring(prevClosingLastIndex));
}
return r;
}
return html;
}
}
export default BaseDialog;

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

@ -84,8 +84,6 @@ class BaseSubmitDialog<P: Props, S: *> extends BaseDialog<P, S> {
_onSubmit: () => boolean;
_renderHTML: string => Object | string;
/** .
* Renders the actual content of the dialog defining what is about to be
* submitted. E.g. A simple confirmation (text, properly wrapped) or a

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

@ -1,107 +1,165 @@
// @flow
import React from 'react';
import { Text, TouchableOpacity } from 'react-native';
import { Platform, View } from 'react-native';
import Dialog from 'react-native-dialog';
import { translate } from '../../../i18n';
import { connect } from '../../../redux';
import { StyleType } from '../../../styles';
import { _abstractMapStateToProps } from '../../functions';
import AbstractDialog from '../AbstractDialog';
import { renderHTML } from '../functions.native';
import { type Props as BaseProps } from './BaseDialog';
import BaseSubmitDialog from './BaseSubmitDialog';
import { brandedDialog } from './styles';
import styles from './styles';
type Props = BaseProps & {
/**
* The color-schemed stylesheet of the feature.
*/
_dialogStyles: StyleType,
/**
* Untranslated i18n key of the content to be displayed.
*
* NOTE: This dialog also adds support to Object type keys that will be
* translated using the provided params. See i18n function
* {@code translate(string, Object)} for more details.
*/
contentKey: string | { key: string, params: Object},
/**
* The handler for the event when clicking the 'confirmNo' button.
* Defaults to onCancel if absent.
*/
onDecline?: Function,
t: Function
}
/**
* Implements a confirm dialog component.
* The type of the React {@code Component} props of
* {@link ConfirmDialog}.
*/
class ConfirmDialog extends BaseSubmitDialog<Props, *> {
type Props = {
/**
* Returns the title key of the submit button.
*
* @returns {string}
* The i18n key of the text label for the cancel button.
*/
_getSubmitButtonKey() {
return this.props.okKey || 'dialog.confirmYes';
cancelLabel: string,
/**
* The React {@code Component} children.
*/
children?: React$Node,
/**
* The i18n key of the text label for the confirm button.
*/
confirmLabel: string,
/**
* Dialog description key for translations.
*/
descriptionKey?: string | Object,
/**
* Whether or not the nature of the confirm button is destructive.
*/
isConfirmDestructive?: Boolean,
/**
* Invoked to obtain translated strings.
*/
t: Function,
/**
* Dialog title.
*/
title?: string,
};
/**
* React Component for getting confirmation to stop a file recording session in
* progress.
*
* @augments Component
*/
class ConfirmDialog extends AbstractDialog<Props> {
/**
* Default values for {@code ConfirmDialog} component's properties.
*
* @static
*/
static defaultProps = {
isConfirmDestructive: false
};
/**
* Renders the dialog description.
*
* @returns {React$Component}
*/
_renderDescription() {
const { descriptionKey, t } = this.props;
const description
= typeof descriptionKey === 'string'
? t(descriptionKey)
: renderHTML(
t(descriptionKey?.key, descriptionKey?.params)
);
return (
<Dialog.Description>
{ description }
</Dialog.Description>
);
}
/**
* Implements {@code Component#render}.
*
* @inheritdoc
*/
render() {
const {
cancelLabel,
children,
confirmLabel,
isConfirmDestructive,
t,
title
} = this.props;
const dialogButtonStyle
= isConfirmDestructive
? styles.destructiveDialogButton : styles.dialogButton;
let rightLabel;
let leftLabel;
let rightOnPress;
let leftOnPress;
let rightStyle;
let leftStyle;
if (Platform.OS === 'android') {
rightLabel = confirmLabel || 'dialog.confirmYes';
rightOnPress = () => this._onSubmit();
rightStyle = dialogButtonStyle;
leftLabel = cancelLabel || 'dialog.confirmNo';
leftOnPress = () => this._onCancel();
leftStyle = styles.dialogButton;
} else {
rightLabel = cancelLabel || 'dialog.confirmNo';
rightOnPress = () => this._onCancel();
rightStyle = styles.dialogButton;
leftLabel = confirmLabel || 'dialog.confirmYes';
leftOnPress = () => this._onSubmit();
leftStyle = dialogButtonStyle;
}
return (
<View>
<Dialog.Container
visible = { true }>
{
title && <Dialog.Title>
{ t(title) }
</Dialog.Title>
}
{ this._renderDescription() }
{ children }
<Dialog.Button
label = { t(rightLabel) }
onPress = { rightOnPress }
style = { rightStyle } />
<Dialog.Button
label = { t(leftLabel) }
onPress = { leftOnPress }
style = { leftStyle } />
</Dialog.Container>
</View>
);
}
_onCancel: () => void;
/**
* Renders the 'No' button.
*
* NOTE: The {@code ConfirmDialog} is the only dialog right now that
* renders 2 buttons, mainly for clarity.
*
* @inheritdoc
*/
_renderAdditionalButtons() {
const { _dialogStyles, cancelKey, onDecline, t } = this.props;
return (
<TouchableOpacity
onPress = { onDecline || this._onCancel }
style = { [
_dialogStyles.button,
brandedDialog.buttonFarLeft,
_dialogStyles.buttonSeparator
] }>
<Text style = { _dialogStyles.buttonLabel }>
{ t(cancelKey || 'dialog.confirmNo') }
</Text>
</TouchableOpacity>
);
}
/**
* Implements {@code BaseSubmitDialog._renderSubmittable}.
*
* @inheritdoc
*/
_renderSubmittable() {
if (this.props.children) {
return this.props.children;
}
const { _dialogStyles, contentKey, t } = this.props;
const content
= typeof contentKey === 'string'
? t(contentKey)
: this._renderHTML(t(contentKey.key, contentKey.params));
return (
<Text style = { _dialogStyles.text }>
{ content }
</Text>
);
}
_renderHTML: string => Object | string;
_onSubmit: (?string) => void;
}
export default translate(connect(_abstractMapStateToProps)(ConfirmDialog));
export default translate(connect()(ConfirmDialog));

12
react/features/base/dialog/components/native/styles.js
View File

@ -56,6 +56,18 @@ export const bottomSheetStyles = {
}
};
export default {
dialogButton: {
...BaseTheme.typography.labelButton
},
destructiveDialogButton: {
...BaseTheme.typography.labelButton,
color: BaseTheme.palette.actionDanger
}
};
export const brandedDialog = {
/**

9
react/features/calendar-sync/components/UpdateCalendarEventDialog.native.js
View File

@ -17,12 +17,7 @@ type Props = {
/**
* The ID of the event to be updated.
*/
eventId: string,
/**
* Function to translate i18n labels.
*/
t: Function
eventId: string
};
/**
@ -49,7 +44,7 @@ class UpdateCalendarEventDialog extends Component<Props> {
render() {
return (
<ConfirmDialog
contentKey = 'calendarSync.confirmAddLink'
descriptionKey = 'calendarSync.confirmAddLink'
onSubmit = { this._onSubmit } />
);
}

6
react/features/chat/components/native/ChatPrivacyDialog.js
View File

@ -20,9 +20,9 @@ class ChatPrivacyDialog extends AbstractChatPrivacyDialog {
render() {
return (
<ConfirmDialog
cancelKey = 'dialog.sendPrivateMessageCancel'
contentKey = 'dialog.sendPrivateMessage'
okKey = 'dialog.sendPrivateMessageOk'
cancelLabel = 'dialog.sendPrivateMessageCancel'
confirmLabel = 'dialog.sendPrivateMessageOk'
descriptionKey = 'dialog.sendPrivateMessage'
onCancel = { this._onSendGroupMessage }
onSubmit = { this._onSendPrivateMessage } />
);

43
react/features/overlay/components/native/PageReloadOverlay.js
View File

@ -1,29 +1,19 @@
// @flow
import React from 'react';
import { Text } from 'react-native';
import { appNavigate, reloadNow } from '../../../app/actions';
import { ColorSchemeRegistry } from '../../../base/color-scheme';
import { ConfirmDialog } from '../../../base/dialog';
import { translate } from '../../../base/i18n';
import { connect } from '../../../base/redux';
import { StyleType } from '../../../base/styles';
import { setFatalError, setPageReloadOverlayCanceled } from '../../actions';
import AbstractPageReloadOverlay, {
abstractMapStateToProps,
type Props as AbstractProps
type Props
} from '../AbstractPageReloadOverlay';
import OverlayFrame from './OverlayFrame';
type Props = AbstractProps & {
/**
* The color-schemed stylesheet of the base/dialog feature.
*/
_dialogStyles: StyleType
}
/**
* Implements a React Component for page reload overlay. Shown before the
@ -85,38 +75,21 @@ class PageReloadOverlay extends AbstractPageReloadOverlay<Props> {
* @returns {ReactElement}
*/
render() {
const { _dialogStyles, t } = this.props;
const { t } = this.props;
const { message, timeLeft, title } = this.state;
return (
<OverlayFrame>
<ConfirmDialog
cancelKey = 'dialog.Cancel'
okKey = 'dialog.rejoinNow'
cancelLabel = 'dialog.Cancel'
confirmLabel = 'dialog.rejoinNow'
descriptionKey = { `${t(message, { seconds: timeLeft })}` }
onCancel = { this._onCancel }
onSubmit = { this._onReloadNow }>
<Text style = { _dialogStyles.text }>
{ `${t(title)} ${t(message, { seconds: timeLeft })}` }
</Text>
</ConfirmDialog>
onSubmit = { this._onReloadNow }
title = { title } />
</OverlayFrame>
);
}
}
/**
* Maps part of the Redux state to the props of this component.
*
* @param {Object} state - The Redux state.
* @returns {{
* _dialogStyles: StyleType
* }}
*/
function _mapStateToProps(state) {
return {
...abstractMapStateToProps(state),
_dialogStyles: ColorSchemeRegistry.get(state, 'Dialog')
};
}
export default translate(connect(_mapStateToProps)(PageReloadOverlay));
export default translate(connect(abstractMapStateToProps)(PageReloadOverlay));

2
react/features/recording/components/LiveStream/native/StopLiveStreamDialog.js
View File

@ -26,7 +26,7 @@ class StopLiveStreamDialog extends AbstractStopLiveStreamDialog {
render() {
return (
<ConfirmDialog
contentKey = 'dialog.stopStreamingWarning'
descriptionKey = 'dialog.stopStreamingWarning'
onSubmit = { this._onSubmit } />
);
}

2
react/features/recording/components/Recording/native/StopRecordingDialog.js
View File

@ -26,7 +26,7 @@ class StopRecordingDialog extends AbstractStopRecordingDialog<Props> {
render() {
return (
<ConfirmDialog
contentKey = 'dialog.stopRecordingWarning'
descriptionKey = 'dialog.stopRecordingWarning'
onSubmit = { this._onSubmit } />
);
}

46
react/features/video-menu/components/AbstractBlockAudioVideoDialog.js
View File

@ -1,46 +0,0 @@
// @flow
import { Component } from 'react';
type Props = {
/**
* The Redux dispatch function.
*/
dispatch: Function,
/**
* Function to translate i18n labels.
*/
t: Function
};
/**
* Abstract dialog to confirm blocking mic and camera for all participants.
*/
export default class AbstractBlockAudioVideoDialog
extends Component<Props> {
/**
* Initializes a new {@code AbstractBlockAudioVideoDialog} instance.
*
* @inheritdoc
*/
constructor(props: Props) {
super(props);
this._onSubmit = this._onSubmit.bind(this);
}
_onSubmit: () => boolean;
/**
* Callback for the confirm button.
*
* @private
* @returns {boolean} - True (to note that the modal should be closed).
*/
_onSubmit() {
return true;
}
}

32
react/features/video-menu/components/native/BlockAudioVideoDialog.js
View File

@ -1,32 +0,0 @@
// @flow
import React from 'react';
import { ConfirmDialog } from '../../../base/dialog';
import { translate } from '../../../base/i18n';
import { connect } from '../../../base/redux';
import AbstractBlockAudioVideoDialog
from '../AbstractBlockAudioVideoDialog';
/**
* Dialog to confirm a remote participant kick action.
*/
class BlockAudioVideoDialog extends AbstractBlockAudioVideoDialog {
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
* @returns {ReactElement}
*/
render() {
return (
<ConfirmDialog
contentKey = 'dialog.blockAudioVideoMsg'
onSubmit = { this._onSubmit } />
);
}
_onSubmit: () => boolean;
}
export default translate(connect()(BlockAudioVideoDialog));

12
react/features/video-menu/components/native/GrantModeratorDialog.js
View File

@ -1,7 +1,6 @@
// @flow
import React from 'react';
import { Text } from 'react-native';
import { ConfirmDialog } from '../../../base/dialog';
import { translate } from '../../../base/i18n';
@ -22,12 +21,11 @@ class GrantModeratorDialog extends AbstractGrantModeratorDialog {
render() {
return (
<ConfirmDialog
contentKey = 'dialog.grantModeratorDialog'
onSubmit = { this._onSubmit }>
<Text>
{`${this.props.t('dialog.grantModeratorDialog', { participantName: this.props.participantName })}`}
</Text>
</ConfirmDialog>
descriptionKey = {
`${this.props.t('dialog.grantModeratorDialog',
{ participantName: this.props.participantName })}`
}
onSubmit = { this._onSubmit } />
);
}

8
react/features/video-menu/components/native/KickRemoteParticipantDialog.js
View File

@ -21,8 +21,12 @@ class KickRemoteParticipantDialog extends AbstractKickRemoteParticipantDialog {
render() {
return (
<ConfirmDialog
contentKey = 'dialog.kickParticipantDialog'
onSubmit = { this._onSubmit } />
cancelLabel = 'dialog.Cancel'
confirmLabel = 'dialog.kickParticipantButton'
descriptionKey = 'dialog.kickParticipantDialog'
isConfirmDestructive = { true }
onSubmit = { this._onSubmit }
title = 'dialog.kickParticipantTitle' />
);
}

44
react/features/video-menu/components/native/MuteEveryoneDialog.js
View File

@ -1,7 +1,7 @@
// @flow
import React from 'react';
import { Text, View, Switch } from 'react-native';
import Dialog from 'react-native-dialog';
import { Divider } from 'react-native-paper';
import { ColorSchemeRegistry } from '../../../base/color-scheme';
@ -15,6 +15,7 @@ import AbstractMuteEveryoneDialog, {
import styles from './styles';
type Props = AbstractProps & {
/**
@ -31,6 +32,21 @@ type Props = AbstractProps & {
*/
class MuteEveryoneDialog extends AbstractMuteEveryoneDialog<Props> {
/**
* Renders the dialog switch.
*
* @returns {React$Component}
*/
_renderSwitch() {
return (
this.props.exclude.length === 0
&& <Dialog.Switch
label = { this.props.t('dialog.moderationAudioLabel') }
onValueChange = { this._onToggleModeration }
value = { !this.state.audioModerationEnabled } />
);
}
/**
* Toggles advanced moderation switch.
*
@ -55,26 +71,12 @@ class MuteEveryoneDialog extends AbstractMuteEveryoneDialog<Props> {
render() {
return (
<ConfirmDialog
okKey = 'dialog.muteParticipantButton'
onSubmit = { this._onSubmit } >
<Text style = { this.props._dialogStyles.text }>
{ `${this.props.title} \n\n ${this.state.content}` }
</Text>
{this.props.exclude.length === 0 && <>
<Divider style = { styles.dividerWithSpacing } />
<View style = { styles.toggleContainer }>
<Text
style = {{
...this.props._dialogStyles.text,
...styles.toggleLabel
}}>
{this.props.t('dialog.moderationAudioLabel')}
</Text>
<Switch
onValueChange = { this._onToggleModeration }
value = { !this.state.audioModerationEnabled } />
</View>
</>}
confirmLabel = 'dialog.muteParticipantButton'
descriptionKey = { this.state.content }
onSubmit = { this._onSubmit }
title = { this.props.title } >
<Divider style = { styles.dividerDialog } />
{ this._renderSwitch() }
</ConfirmDialog>
);
}

41
react/features/video-menu/components/native/MuteEveryonesVideoDialog.js
View File

@ -1,7 +1,7 @@
// @flow
import React from 'react';
import { Switch, Text, View } from 'react-native';
import Dialog from 'react-native-dialog';
import { Divider } from 'react-native-paper';
import { ColorSchemeRegistry } from '../../../base/color-scheme';
@ -31,6 +31,21 @@ type Props = AbstractProps & {
*/
class MuteEveryonesVideoDialog extends AbstractMuteEveryonesVideoDialog<Props> {
/**
* Renders the dialog switch.
*
* @returns {React$Component}
*/
_renderSwitch() {
return (
this.props.exclude.length === 0
&& <Dialog.Switch
label = { this.props.t('dialog.moderationVideoLabel') }
onValueChange = { this._onToggleModeration }
value = { !this.state.moderationEnabled } />
);
}
/**
* Toggles advanced moderation switch.
*
@ -55,24 +70,12 @@ class MuteEveryonesVideoDialog extends AbstractMuteEveryonesVideoDialog<Props> {
render() {
return (
<ConfirmDialog
okKey = 'dialog.muteEveryonesVideoDialogOk'
onSubmit = { this._onSubmit } >
<Text style = { this.props._dialogStyles.text }>
{ `${this.props.title} \n\n ${this.state.content}` }
</Text>
{this.props.exclude.length === 0 && <>
<Divider style = { styles.dividerWithSpacing } />
<View style = { styles.toggleContainer }>
<Text
style = {{ ...this.props._dialogStyles.text,
...styles.toggleLabel }}>
{this.props.t('dialog.moderationVideoLabel')}
</Text>
<Switch
onValueChange = { this._onToggleModeration }
value = { !this.state.moderationEnabled } />
</View>
</>}
confirmLabel = 'dialog.muteEveryonesVideoDialogOk'
descriptionKey = { this.state.content }
onSubmit = { this._onSubmit }
title = { this.props.title }>
<Divider style = { styles.dividerDialog } />
{ this._renderSwitch() }
</ConfirmDialog>
);
}

2
react/features/video-menu/components/native/MuteRemoteParticipantsVideoDialog.js
View File

@ -22,7 +22,7 @@ class MuteRemoteParticipantsVideoDialog extends AbstractMuteRemoteParticipantsVi
render() {
return (
<ConfirmDialog
contentKey = { this.props.isVideoModerationOn
descriptionKey = { this.props.isVideoModerationOn
? 'dialog.muteParticipantsVideoDialogModerationOn'
: 'dialog.muteParticipantsVideoDialog'
}

1
react/features/video-menu/components/native/index.js
View File

@ -1,6 +1,5 @@
// @flow
export { default as BlockAudioVideoDialog } from './BlockAudioVideoDialog';
export { default as GrantModeratorDialog } from './GrantModeratorDialog';
export { default as KickRemoteParticipantDialog } from './KickRemoteParticipantDialog';
export { default as MuteEveryoneDialog } from './MuteEveryoneDialog';

23
react/features/video-menu/components/native/styles.js
View File

@ -1,5 +1,7 @@
// @flow
import { PlatformColor } from 'react-native';
import {
MD_FONT_SIZE,
MD_ITEM_HEIGHT,
@ -69,23 +71,10 @@ export default createStyleSheet({
backgroundColor: BaseTheme.palette.dividerColor
},
dividerWithSpacing: {
backgroundColor: BaseTheme.palette.dividerColor,
marginVertical: BaseTheme.spacing[3]
},
toggleContainer: {
display: 'flex',
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'center',
width: '100%',
overflow: 'hidden'
},
toggleLabel: {
marginRight: BaseTheme.spacing[3],
maxWidth: '70%'
dividerDialog: {
// eslint-disable-next-line new-cap
backgroundColor: PlatformColor('separator'),
marginBottom: BaseTheme.spacing[3]
},
contextMenuItem: {