108 lines
3.4 KiB
TypeScript
108 lines
3.4 KiB
TypeScript
import React from 'react';
|
|
import { StyleSheet, Text, View } from 'react-native';
|
|
import Touchable from 'react-native-platform-touchable';
|
|
|
|
import { useAppSelector } from '../lib/hooks';
|
|
import { useTheme } from '../theme';
|
|
import sharedStyles from '../views/Styles';
|
|
import { CustomIcon } from './CustomIcon';
|
|
import { BUTTON_HIT_SLOP } from './message/utils';
|
|
import AvatarContainer from './Avatar';
|
|
import StatusContainer from './Status';
|
|
import DotsLoader from './DotsLoader';
|
|
|
|
type TCallHeader = {
|
|
mic: boolean;
|
|
cam: boolean;
|
|
setCam: Function;
|
|
setMic: Function;
|
|
title: string;
|
|
avatar: string;
|
|
uid: string;
|
|
name: string;
|
|
direct: boolean;
|
|
};
|
|
|
|
export const CallHeader = ({ mic, cam, setCam, setMic, title, avatar, uid, name, direct }: TCallHeader): React.ReactElement => {
|
|
const style = useStyle();
|
|
const { colors } = useTheme();
|
|
const calling = useAppSelector(state => state.videoConf.calling);
|
|
|
|
const handleColors = (enabled: boolean) => {
|
|
if (calling) {
|
|
if (enabled) return { button: colors.buttonBackgroundSecondaryDisabled, icon: colors.strokeExtraDark };
|
|
return { button: 'transparent', icon: colors.strokeLight };
|
|
}
|
|
if (enabled) return { button: colors.strokeHighlight, icon: colors.surfaceLight };
|
|
return { button: 'transparent', icon: colors.strokeExtraDark };
|
|
};
|
|
|
|
return (
|
|
<View>
|
|
<View style={style.actionSheetHeader}>
|
|
<View style={style.rowContainer}>
|
|
<Text style={style.actionSheetHeaderTitle}>{title}</Text>
|
|
{calling && direct ? <DotsLoader /> : null}
|
|
</View>
|
|
<View style={style.actionSheetHeaderButtons}>
|
|
<Touchable
|
|
onPress={() => setCam(!cam)}
|
|
style={[style.iconCallContainerRight, { backgroundColor: handleColors(cam).button }]}
|
|
hitSlop={BUTTON_HIT_SLOP}
|
|
disabled={calling}
|
|
>
|
|
<CustomIcon name={cam ? 'camera' : 'camera-disabled'} size={24} color={handleColors(cam).icon} />
|
|
</Touchable>
|
|
<Touchable
|
|
onPress={() => setMic(!mic)}
|
|
style={[style.iconCallContainer, { backgroundColor: handleColors(mic).button }]}
|
|
hitSlop={BUTTON_HIT_SLOP}
|
|
disabled={calling}
|
|
>
|
|
<CustomIcon name={mic ? 'microphone' : 'microphone-disabled'} size={24} color={handleColors(mic).icon} />
|
|
</Touchable>
|
|
</View>
|
|
</View>
|
|
<View style={style.actionSheetUsernameContainer}>
|
|
<AvatarContainer text={avatar} size={36} />
|
|
{direct ? <StatusContainer size={16} id={uid} style={style.statusContainerMargin} /> : null}
|
|
<Text style={{ ...style.actionSheetUsername, marginLeft: !direct ? 8 : 0 }} numberOfLines={1}>
|
|
{name}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
function useStyle() {
|
|
const { colors } = useTheme();
|
|
const style = StyleSheet.create({
|
|
actionSheetHeader: { flexDirection: 'row', alignItems: 'center' },
|
|
actionSheetHeaderTitle: {
|
|
fontSize: 14,
|
|
...sharedStyles.textBold,
|
|
color: colors.fontDefault
|
|
},
|
|
actionSheetHeaderButtons: { flex: 1, alignItems: 'center', flexDirection: 'row', justifyContent: 'flex-end' },
|
|
iconCallContainer: {
|
|
padding: 6,
|
|
borderRadius: 4
|
|
},
|
|
iconCallContainerRight: {
|
|
padding: 6,
|
|
borderRadius: 4,
|
|
marginRight: 6
|
|
},
|
|
actionSheetUsernameContainer: { flexDirection: 'row', paddingTop: 8, alignItems: 'center' },
|
|
actionSheetUsername: {
|
|
fontSize: 16,
|
|
...sharedStyles.textBold,
|
|
color: colors.fontDefault,
|
|
flexShrink: 1
|
|
},
|
|
rowContainer: { flexDirection: 'row' },
|
|
statusContainerMargin: { marginLeft: 8, marginRight: 6 }
|
|
});
|
|
return style;
|
|
}
|