83 lines
2.8 KiB
TypeScript
83 lines
2.8 KiB
TypeScript
import React, { useEffect } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Text, View } from 'react-native';
|
|
import { withSafeAreaInsets } from 'react-native-safe-area-context';
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
|
|
import JitsiScreen from '../../../../base/modal/components/JitsiScreen';
|
|
import { LoadingIndicator, TintedView } from '../../../../base/react';
|
|
import { isLocalVideoTrackDesktop } from '../../../../base/tracks';
|
|
import { setPictureInPictureDisabled } from '../../../../mobile/picture-in-picture/functions';
|
|
import { setIsCarmode } from '../../../../video-layout/actions';
|
|
import ConferenceTimer from '../../ConferenceTimer';
|
|
import { isConnecting } from '../../functions';
|
|
|
|
import EndMeetingButton from './EndMeetingButton';
|
|
import MicrophoneButton from './MicrophoneButton';
|
|
import SoundDeviceButton from './SoundDeviceButton';
|
|
import TitleBar from './TitleBar';
|
|
import styles from './styles';
|
|
|
|
/**
|
|
* Implements the carmode tab.
|
|
*
|
|
* @returns { JSX.Element} - The carmode tab.
|
|
*/
|
|
const CarmodeTab = (): JSX.Element => {
|
|
const dispatch = useDispatch();
|
|
const { t } = useTranslation();
|
|
const connecting = useSelector(isConnecting);
|
|
const isSharing = useSelector(isLocalVideoTrackDesktop);
|
|
|
|
useEffect(() => {
|
|
dispatch(setIsCarmode(true));
|
|
setPictureInPictureDisabled(true);
|
|
|
|
return () => {
|
|
dispatch(setIsCarmode(false));
|
|
if (!isSharing) {
|
|
setPictureInPictureDisabled(false);
|
|
}
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<JitsiScreen style = { styles.conference }>
|
|
{/*
|
|
* The activity/loading indicator goes above everything, except
|
|
* the toolbox/toolbars and the dialogs.
|
|
*/
|
|
connecting
|
|
&& <TintedView>
|
|
<LoadingIndicator />
|
|
</TintedView>
|
|
}
|
|
<View
|
|
pointerEvents = 'box-none'
|
|
style = { styles.titleBarSafeViewColor }>
|
|
<View
|
|
style = { styles.titleBar }>
|
|
<TitleBar />
|
|
</View>
|
|
<ConferenceTimer textStyle = { styles.roomTimer } />
|
|
</View>
|
|
<View
|
|
pointerEvents = 'box-none'
|
|
style = { styles.microphoneContainer }>
|
|
<MicrophoneButton />
|
|
</View>
|
|
<View
|
|
pointerEvents = 'box-none'
|
|
style = { styles.bottomContainer }>
|
|
<Text style = { styles.videoStoppedLabel }>
|
|
{t('carmode.labels.videoStopped')}
|
|
</Text>
|
|
<SoundDeviceButton />
|
|
<EndMeetingButton />
|
|
</View>
|
|
</JitsiScreen>
|
|
);
|
|
};
|
|
|
|
export default withSafeAreaInsets(CarmodeTab);
|