verdnatura-mirror
/
verdnatura-chat
forked from verdnatura-mirror/Rocket.Chat.ReactNative
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

set colors when calling

This commit is contained in:
GleidsonDaniel 2023-03-03 17:16:35 -03:00
parent d36d5fd4e3
commit 9722550c9f
1 changed files with 30 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
app/containers/UIKit/VideoConferenceBlock/components/StartACallActionSheet.tsx
View File

@ -1,14 +1,13 @@
import { Camera, CameraType } from 'expo-camera';
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { Text, View } from 'react-native'; import { Text, View } from 'react-native';
import Touchable from 'react-native-platform-touchable'; import Touchable from 'react-native-platform-touchable';
import { Camera, CameraType } from 'expo-camera';
import i18n from '../../../../i18n'; import i18n from '../../../../i18n';
import { getSubscriptionByRoomId } from '../../../../lib/database/services/Subscription'; import { getSubscriptionByRoomId } from '../../../../lib/database/services/Subscription';
import { useAppSelector } from '../../../../lib/hooks'; import { useAppSelector } from '../../../../lib/hooks';
import { getRoomAvatar, getUidDirectMessage } from '../../../../lib/methods/helpers'; import { getRoomAvatar, getUidDirectMessage } from '../../../../lib/methods/helpers';
import { useTheme } from '../../../../theme'; import { useTheme } from '../../../../theme';
import { useActionSheet } from '../../../ActionSheet';
import AvatarContainer from '../../../Avatar'; import AvatarContainer from '../../../Avatar';
import Button from '../../../Button'; import Button from '../../../Button';
import { CustomIcon } from '../../../CustomIcon'; import { CustomIcon } from '../../../CustomIcon';
@ -17,6 +16,9 @@ import StatusContainer from '../../../Status';
import useStyle from './styles'; import useStyle from './styles';
const CAM_SIZE = { height: 220, width: 148 }; const CAM_SIZE = { height: 220, width: 148 };
// fixed colors, do not change with theme change.
const gray300 = '#5f656e';
const gray100 = '#CBCED1';
export default function StartACallActionSheet({ rid, initCall }: { rid: string; initCall: Function }): React.ReactElement { export default function StartACallActionSheet({ rid, initCall }: { rid: string; initCall: Function }): React.ReactElement {
const style = useStyle(); const style = useStyle();
@ -24,10 +26,9 @@ export default function StartACallActionSheet({ rid, initCall }: { rid: string;
const [user, setUser] = useState({ username: '', avatar: '', uid: '' }); const [user, setUser] = useState({ username: '', avatar: '', uid: '' });
const [mic, setMic] = useState(true); const [mic, setMic] = useState(true);
const [cam, setCam] = useState(false); const [cam, setCam] = useState(false);
const [calling, setCalling] = useState(true);
const username = useAppSelector(state => state.login.user.username); const username = useAppSelector(state => state.login.user.username);
const { hideActionSheet } = useActionSheet();
useEffect(() => { useEffect(() => {
(async () => { (async () => {
const room = await getSubscriptionByRoomId(rid); const room = await getSubscriptionByRoomId(rid);
@ -37,26 +38,37 @@ export default function StartACallActionSheet({ rid, initCall }: { rid: string;
})(); })();
}, [rid]); }, [rid]);
const handleColor = (enabled: boolean) => (enabled ? colors.conferenceCallEnabledIcon : colors.conferenceCallDisabledIcon); const handleColors = (enabled: boolean) => {
if (calling) {
if (enabled) {
return { button: colors.conferenceCallCallBackButton, icon: gray300 };
}
return { button: 'transparent', icon: gray100 };
}
if (enabled) {
return { button: colors.conferenceCallEnabledIconBackground, icon: colors.conferenceCallEnabledIcon };
}
return { button: 'transparent', icon: colors.conferenceCallDisabledIcon };
};
return ( return (
<View style={style.actionSheetContainer}> <View style={style.actionSheetContainer}>
<View style={style.actionSheetHeader}> <View style={style.actionSheetHeader}>
<Text style={style.actionSheetHeaderTitle}>{i18n.t('Start_a_call')}</Text> <Text style={style.actionSheetHeaderTitle}>{calling ? i18n.t('Calling') : i18n.t('Start_a_call')}</Text>
<View style={style.actionSheetHeaderButtons}> <View style={style.actionSheetHeaderButtons}>
<Touchable <Touchable
onPress={() => setCam(!cam)} onPress={() => setCam(!cam)}
style={[style.iconCallContainer, cam && style.enabledBackground, { marginRight: 6 }]} style={[style.iconCallContainer, { backgroundColor: handleColors(cam).button }, { marginRight: 6 }]}
hitSlop={BUTTON_HIT_SLOP} hitSlop={BUTTON_HIT_SLOP}
> >
<CustomIcon name={cam ? 'camera' : 'camera-disabled'} size={20} color={handleColor(cam)} /> <CustomIcon name={cam ? 'camera' : 'camera-disabled'} size={20} color={handleColors(cam).icon} />
</Touchable> </Touchable>
<Touchable <Touchable
onPress={() => setMic(!mic)} onPress={() => setMic(!mic)}
style={[style.iconCallContainer, mic && style.enabledBackground]} style={[style.iconCallContainer, { backgroundColor: handleColors(mic).button }]}
hitSlop={BUTTON_HIT_SLOP} hitSlop={BUTTON_HIT_SLOP}
> >
<CustomIcon name={mic ? 'microphone' : 'microphone-disabled'} size={20} color={handleColor(mic)} /> <CustomIcon name={mic ? 'microphone' : 'microphone-disabled'} size={20} color={handleColors(mic).icon} />
</Touchable> </Touchable>
</View> </View>
</View> </View>
@ -77,13 +89,17 @@ export default function StartACallActionSheet({ rid, initCall }: { rid: string;
{cam ? <Camera style={CAM_SIZE} type={CameraType.front} /> : <AvatarContainer size={62} text={username} />} {cam ? <Camera style={CAM_SIZE} type={CameraType.front} /> : <AvatarContainer size={62} text={username} />}
</View> </View>
<Button <Button
backgroundColor={calling ? colors.conferenceCallCallBackButton : colors.actionTintColor}
color={calling ? gray300 : colors.conferenceCallEnabledIcon}
onPress={() => { onPress={() => {
hideActionSheet(); if (!calling) {
setTimeout(() => { setCalling(true);
initCall({ cam, mic }); initCall({ cam, mic });
}, 100); } else {
setCalling(false);
}
}} }}
title={i18n.t('Call')} title={calling ? i18n.t('Cancel') : i18n.t('Call')}
/> />
</View> </View>
); );