init

react/features/visitors/components/native/JoinMeetingDialog.tsx

@@ -0,0 +1,40 @@
+import React, { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { View, ViewStyle } from 'react-native';
+import Dialog from 'react-native-dialog';
+
+import { StandaloneRaiseHandButton as RaiseHandButton } from '../../../reactions/components/native/RaiseHandButton';
+import styles from '../../components/native/styles';
+
+/**
+ * Component that renders the join meeting dialog for visitors.
+ *
+ * @returns {JSX.Element}
+ */
+export default function JoinMeetingDialog() {
+    const { t } = useTranslation();
+    const [ visible, setVisible ] = useState(true);
+
+    const closeDialog = useCallback(() => {
+        setVisible(false);
+    }, []);
+
+    return (
+        <Dialog.Container
+            coverScreen = { false }
+            visible = { visible }>
+            <Dialog.Title>{ t('visitors.joinMeeting.title') }</Dialog.Title>
+            <Dialog.Description>
+                { t('visitors.joinMeeting.description') }
+                <View style = { styles.raiseHandButton as ViewStyle }>
+                    {/* @ts-ignore */}
+                    <RaiseHandButton disableClick = { true } />
+                </View>
+            </Dialog.Description>
+            <Dialog.Description>{t('visitors.joinMeeting.wishToSpeak')}</Dialog.Description>
+            <Dialog.Button
+                label = { t('dialog.Ok') }
+                onPress = { closeDialog } />
+        </Dialog.Container>
+    );
+}

react/features/visitors/components/native/VisitorsCountLabel.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+
+import { IconUsers } from '../../../base/icons/svg';
+import Label from '../../../base/label/components/native/Label';
+import BaseTheme from '../../../base/ui/components/BaseTheme.native';
+import { getVisitorsCount, getVisitorsShortText } from '../../functions';
+
+const styles = {
+    raisedHandsCountLabel: {
+        alignItems: 'center',
+        backgroundColor: BaseTheme.palette.warning02,
+        borderRadius: BaseTheme.shape.borderRadius,
+        flexDirection: 'row',
+        marginLeft: BaseTheme.spacing[0],
+        marginBottom: BaseTheme.spacing[0]
+    },
+
+    raisedHandsCountLabelText: {
+        color: BaseTheme.palette.uiBackground,
+        paddingLeft: BaseTheme.spacing[2]
+    }
+};
+
+const VisitorsCountLabel = () => {
+    const visitorsCount = useSelector(getVisitorsCount);
+
+    return visitorsCount > 0 ? (
+        <Label
+            icon = { IconUsers }
+            iconColor = { BaseTheme.palette.uiBackground }
+            style = { styles.raisedHandsCountLabel }
+            text = { `${getVisitorsShortText(visitorsCount)}` }
+            textStyle = { styles.raisedHandsCountLabelText } />
+    ) : null;
+};
+
+export default VisitorsCountLabel;

react/features/visitors/components/native/VisitorsQueue.tsx

@@ -0,0 +1,43 @@
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Text, View, ViewStyle } from 'react-native';
+import { useDispatch } from 'react-redux';
+
+import { hangup } from '../../../base/connection/actions.native';
+import LoadingIndicator from '../../../base/react/components/native/LoadingIndicator';
+import BaseTheme from '../../../base/ui/components/BaseTheme.native';
+import Button from '../../../base/ui/components/native/Button';
+import { BUTTON_TYPES } from '../../../base/ui/constants.any';
+import lobbyStyles from '../../../lobby/components/native/styles';
+
+import styles from './styles';
+
+/**
+ * The component that renders visitors queue UI.
+ *
+ * @returns {ReactElement}
+ */
+export default function VisitorsQueue() {
+    const { t } = useTranslation();
+    const dispatch = useDispatch();
+    const onHangupClick = useCallback(() => {
+        dispatch(hangup());
+    }, []);
+
+    return (
+        <View style = { styles.visitorsQueue as ViewStyle }>
+            <Text style = { styles.visitorsQueueTitle }>
+                { t('visitors.waitingMessage') }
+            </Text>
+            <LoadingIndicator
+                color = { BaseTheme.palette.icon01 }
+                style = { lobbyStyles.loadingIndicator } />
+            <Button
+                accessibilityLabel = 'toolbar.accessibilityLabel.leaveConference'
+                labelKey = 'toolbar.accessibilityLabel.leaveConference'
+                onClick = { onHangupClick }
+                style = { styles.hangupButton }
+                type = { BUTTON_TYPES.DESTRUCTIVE } />
+        </View>
+    );
+}

react/features/visitors/components/native/styles.ts

@@ -0,0 +1,34 @@
+import BaseTheme from '../../../base/ui/components/BaseTheme.native';
+
+/**
+ * The styles of the feature visitors.
+ */
+export default {
+
+    hangupButton: {
+        marginTop: BaseTheme.spacing[3],
+        width: 240
+    },
+
+    raiseHandButton: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '100%'
+    },
+
+    visitorsQueue: {
+        alignItems: 'center',
+        display: 'flex',
+        justifyContent: 'center',
+        height: '100%',
+        width: '100%',
+    },
+
+    visitorsQueueTitle: {
+        ...BaseTheme.typography.heading5,
+        color: BaseTheme.palette.text01,
+        marginBottom: BaseTheme.spacing[3],
+        textAlign: 'center'
+    },
+};