feat(prejoin) display recording warning (jitsi#14347)

config.js

@@ -329,6 +329,9 @@ var config = {
     //    // If true, shows a notification at the start of the meeting with a call to action button
     //    // to start recording (for users who can do so).
     //    // suggestRecording: true,
+    //    // If true, shows a warning label in the prejoin screen to point out the possibility that
+    //    // the call you're joining might be recorded.
+    //    // showPrejoinWarning: true,
     // },
 
     // recordingService: {

lang/main.json

@@ -939,6 +939,7 @@
         "or": "or",
         "premeeting": "Pre meeting",
         "proceedAnyway": "Proceed anyway",
+        "recordingWarning": "This call might be recorded",
         "screenSharingError": "Screen sharing error:",
         "showScreen": "Enable pre meeting screen",
         "startWithPhone": "Start with phone audio",

react/features/base/config/configType.ts

@@ -531,6 +531,7 @@ export interface IConfig {
     };
     recordingSharingUrl?: string;
     recordings?: {
+        showPrejoinWarning?: boolean;
         suggestRecording?: boolean;
     };
     remoteVideoMenu?: {

react/features/base/premeeting/components/web/PreMeetingScreen.tsx

@@ -14,6 +14,7 @@ import { withPixelLineHeight } from '../../../styles/functions.web';
 
 import ConnectionStatus from './ConnectionStatus';
 import Preview from './Preview';
+import RecordingWarning from './RecordingWarning';
 import UnsafeRoomWarning from './UnsafeRoomWarning';
 
 interface IProps {
@@ -58,6 +59,11 @@ interface IProps {
      */
     showDeviceStatus: boolean;
 
+    /**
+     * Indicates whether to display the recording warning.
+     */
+    showRecordingWarning?: boolean;
+
     /**
      * If should show unsafe room warning when joining.
      */
@@ -168,6 +174,7 @@ const PreMeetingScreen = ({
     children,
     className,
     showDeviceStatus,
+    showRecordingWarning,
     showUnsafeRoomWarning,
     skipPrejoinButton,
     title,
@@ -199,6 +206,7 @@ const PreMeetingScreen = ({
                         {children}
                         {_buttons.length && <Toolbox toolbarButtons = { _buttons } />}
                         {skipPrejoinButton}
+                        {showRecordingWarning && <RecordingWarning />}
                         {showUnsafeRoomWarning && <UnsafeRoomWarning />}
                         {showDeviceStatus && <DeviceStatus />}
                     </div>

react/features/base/premeeting/components/web/RecordingWarning.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { makeStyles } from 'tss-react/mui';
+
+import Icon from '../../../icons/components/Icon';
+import { IconRecord } from '../../../icons/svg';
+import { withPixelLineHeight } from '../../../styles/functions.web';
+
+const useStyles = makeStyles()(theme => {
+    return {
+        container: {
+            backgroundColor: theme.palette.warning01,
+            borderRadius: theme.shape.borderRadius,
+            color: theme.palette.text04,
+            display: 'flex',
+            justifyContent: 'center',
+            ...withPixelLineHeight(theme.typography.bodyShortRegular),
+            marginBottom: theme.spacing(3),
+            marginTop: theme.spacing(2),
+            paddingBottom: theme.spacing(2),
+            paddingTop: theme.spacing(2),
+            width: '100%'
+        },
+        warning: {
+            alignItems: 'center',
+            display: 'flex',
+            paddingLeft: theme.spacing(3),
+            paddingRight: theme.spacing(3)
+        },
+        text: {
+            fontWeight: 600,
+            paddingLeft: theme.spacing(2)
+        }
+    };
+});
+
+const RecordingWarning = () => {
+    const { t } = useTranslation();
+    const { classes, theme } = useStyles();
+    const color = theme.palette.icon04;
+
+    return (
+        <div className = { classes.container }>
+            <div className = { classes.warning }>
+                <Icon
+                    color = { color }
+                    src = { IconRecord } />
+                <span className = { classes.text }>
+                    {t('prejoin.recordingWarning')}
+                </span>
+            </div>
+        </div>
+    );
+};
+
+export default RecordingWarning;

react/features/prejoin/components/native/Prejoin.tsx

@@ -42,6 +42,7 @@ import { isDisplayNameRequired, isRoomNameEnabled } from '../../functions';
 import { IPrejoinProps } from '../../types';
 import { hasDisplayName } from '../../utils';
 
+import RecordingWarning from './RecordingWarning';
 import { preJoinStyles as styles } from './styles';
 
 
@@ -59,6 +60,8 @@ const Prejoin: React.FC<IPrejoinProps> = ({ navigation }: IPrejoinProps) => {
     const isDisplayNameReadonly = useSelector(isNameReadOnly);
     const roomName = useSelector((state: IReduxState) => getConferenceName(state));
     const roomNameEnabled = useSelector((state: IReduxState) => isRoomNameEnabled(state));
+    const showRecordingWarning
+        = useSelector((state: IReduxState) => state['features/base/config'].recordings?.showPrejoinWarning);
     const participantName = localParticipant?.name;
     const [ displayName, setDisplayName ]
         = useState(participantName || '');
@@ -169,17 +172,18 @@ const Prejoin: React.FC<IPrejoinProps> = ({ navigation }: IPrejoinProps) => {
             {
                 isFocused
                 && <View style = { largeVideoContainerStyles as StyleProp<ViewStyle> }>
-                    {
-                        roomNameEnabled && (
+                    <View style = { styles.conferenceInfo as StyleProp<ViewStyle> }>
+                        {roomNameEnabled && (
                             <View style = { styles.displayRoomNameBackdrop as StyleProp<TextStyle> }>
                                 <Text
                                     numberOfLines = { 1 }
                                     style = { styles.preJoinRoomName as StyleProp<TextStyle> }>
                                     { roomName }
                                 </Text>
                             </View>
-                        )
-                    }
+                        )}
+                        {showRecordingWarning && <RecordingWarning />}
+                    </View>
                     <LargeVideo />
                 </View>
             }

react/features/prejoin/components/native/RecordingWarning.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+    StyleProp,
+    Text,
+    TextStyle,
+    View,
+    ViewStyle
+} from 'react-native';
+
+import Icon from '../../../base/icons/components/Icon';
+import { IconRecord } from '../../../base/icons/svg';
+import BaseTheme from '../../../base/ui/components/BaseTheme.native';
+
+import { preJoinStyles as styles } from './styles';
+
+
+const RecordingWarning = (): JSX.Element => {
+    const { t } = useTranslation();
+    const color = BaseTheme.palette.icon04;
+
+    return (
+        <View style = { styles.recordingWarningContainer as StyleProp<ViewStyle> }>
+            <View style = { styles.recordingWarning as StyleProp<ViewStyle> }>
+                <Icon
+                    color = { color }
+                    size = { 20 }
+                    src = { IconRecord } />
+                <Text
+                    numberOfLines = { 1 }
+                    style = { styles.recordingWarningText as StyleProp<TextStyle> }>
+                    { t('prejoin.recordingWarning') }
+                </Text>
+            </View>
+        </View>
+    );
+};
+
+export default RecordingWarning;

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

@@ -106,18 +106,47 @@ export const preJoinStyles = {
         textAlign: 'center'
     },
 
-    displayRoomNameBackdrop: {
+    conferenceInfo: {
         alignSelf: 'center',
-        backgroundColor: BaseTheme.palette.uiBackground,
-        borderRadius: BaseTheme.shape.borderRadius,
         marginTop: BaseTheme.spacing[3],
-        opacity: 0.7,
         paddingHorizontal: BaseTheme.spacing[3],
         paddingVertical: BaseTheme.spacing[1],
         position: 'absolute',
-        maxWidth: 243,
+        maxWidth: 273,
         zIndex: 1
     },
+    displayRoomNameBackdrop: {
+        backgroundColor: BaseTheme.palette.uiBackground,
+        borderRadius: BaseTheme.shape.borderRadius,
+        opacity: 0.7,
+        paddingHorizontal: BaseTheme.spacing[3],
+        paddingVertical: BaseTheme.spacing[1]
+    },
+    recordingWarningContainer: {
+        backgroundColor: BaseTheme.palette.warning01,
+        borderRadius: BaseTheme.shape.borderRadius,
+        color: BaseTheme.palette.text04,
+        display: 'flex',
+        justifyContent: 'center',
+        lineHeight: 22,
+        marginBottom: BaseTheme.spacing[2],
+        marginTop: BaseTheme.spacing[1],
+        paddingBottom: BaseTheme.spacing[1],
+        paddingTop: BaseTheme.spacing[1],
+        width: 'auto'
+    },
+    recordingWarning: {
+        alignItems: 'center',
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        paddingLeft: BaseTheme.spacing[2],
+        paddingRight: BaseTheme.spacing[2]
+    },
+    recordingWarningText: {
+        fontWeight: '600',
+        paddingLeft: BaseTheme.spacing[1]
+    },
     unsafeRoomWarningContainer: {
         height: '100%',
         width: '100%',

react/features/prejoin/components/web/Prejoin.tsx

@@ -111,6 +111,11 @@ interface IProps {
      */
     showErrorOnJoin: boolean;
 
+    /**
+     * If the recording warning is visible or not.
+     */
+    showRecordingWarning: boolean;
+
     /**
      * If should show unsafe room warning when joining.
      */
@@ -219,6 +224,7 @@ const Prejoin = ({
     showCameraPreview,
     showDialog,
     showErrorOnJoin,
+    showRecordingWarning,
     showUnsafeRoomWarning,
     unsafeRoomConsent,
     updateSettings: dispatchUpdateSettings,
@@ -390,6 +396,7 @@ const Prejoin = ({
     return (
         <PreMeetingScreen
             showDeviceStatus = { deviceStatusVisible }
+            showRecordingWarning = { showRecordingWarning }
             showUnsafeRoomWarning = { showUnsafeRoomWarning }
             title = { t('prejoin.joinMeeting') }
             videoMuted = { !showCameraPreview }
@@ -483,6 +490,7 @@ function mapStateToProps(state: IReduxState) {
     const { joiningInProgress } = state['features/prejoin'];
     const { room } = state['features/base/conference'];
     const { unsafeRoomConsent } = state['features/base/premeeting'];
+    const { showPrejoinWarning: showRecordingWarning } = state['features/base/config'].recordings ?? {};
 
     return {
         deviceStatusVisible: isDeviceStatusVisible(state),
@@ -496,6 +504,7 @@ function mapStateToProps(state: IReduxState) {
         showCameraPreview: !isVideoMutedByUser(state),
         showDialog: isJoinByPhoneDialogVisible(state),
         showErrorOnJoin,
+        showRecordingWarning: Boolean(showRecordingWarning),
         showUnsafeRoomWarning: isInsecureRoomName(room) && isUnsafeRoomWarningEnabled(state),
         unsafeRoomConsent,
         videoTrack: getLocalJitsiVideoTrack(state)