/
MinVideoView.tsx
106 lines (98 loc) · 3.24 KB
/
MinVideoView.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
import React, {useState, useContext} from 'react';
import {View, TouchableOpacity, Image} from 'react-native';
import {RenderModeType, RtcSurfaceView} from 'react-native-agora';
import styles from '../Style';
import icons from '../Controls/Icons';
import RemoteControls from '../Controls/RemoteControls';
import PropsContext, {UidInterface} from '../Contexts/PropsContext';
import ImageIcon from '../Controls/ImageIcon';
import Username from './Usernames';
// import RtcContext from '../Contexts/RtcContext';
interface MinViewInterface {
user: UidInterface;
color?: string;
showOverlay?: boolean;
Fallback?: React.ComponentType;
}
const MinVideoView: React.FC<MinViewInterface> = (props) => {
const [overlay, setOverlay] = useState(false);
const {styleProps, rtcProps} = useContext(PropsContext);
const {theme, remoteBtnStyles, customIcon} = styleProps || {};
const {minCloseBtnStyles} = remoteBtnStyles || {};
const {showOverlay} = props || {};
return (
<View style={{margin: 5}}>
{showOverlay ? (
<TouchableOpacity onPress={() => setOverlay(true)}>
<UserVideoWithFallback user={props.user} Fallback={props.Fallback} />
</TouchableOpacity>
) : (
<UserVideoWithFallback user={props.user} />
)}
{overlay && showOverlay ? (
<View style={styles.minOverlay}>
<TouchableOpacity
style={{...styles.minCloseBtn, ...(minCloseBtnStyles as object)}}
onPress={() => setOverlay(!overlay)}>
<Image
style={{
width: 25,
height: 25,
tintColor: theme || props.color || '#fff',
}}
source={{
uri: customIcon?.close ? customIcon.close : icons.close,
}}
/>
</TouchableOpacity>
<RemoteControls showRemoteSwap={true} user={props.user} />
</View>
) : (
<></>
)}
{!rtcProps.disableRtm && <Username user={props.user} />}
</View>
);
};
const UserVideoWithFallback = (props: {
user: UidInterface;
Fallback?: React.ComponentType;
}) => {
const {Fallback, user} = props;
const {styleProps} = useContext(PropsContext);
const {videoPlaceholderContainer, videoPlaceholderIcon} = styleProps || {};
return user.video ? (
<UserVideo user={user} />
) : Fallback ? (
<Fallback />
) : (
<View style={[styles.minViewFallback, videoPlaceholderContainer]}>
<ImageIcon
name={'videocamOff'}
style={[styles.placeholderIcon, videoPlaceholderIcon]}
/>
</View>
);
};
const UserVideo = (props: {user: UidInterface}) => {
const {styleProps} = useContext(PropsContext);
// const {rtcUidRef} = useContext(RtcContext);
const {minViewStyles} = styleProps || {};
return props.user.uid === 'local' ? (
<RtcSurfaceView
style={{...styles.minView, ...(minViewStyles as object)}}
canvas={{renderMode: RenderModeType.RenderModeFit, uid: 0}}
zOrderMediaOverlay={true}
/>
) : (
<RtcSurfaceView
style={{...styles.minView, ...(minViewStyles as object)}}
canvas={{
renderMode: RenderModeType.RenderModeFit,
uid: props.user.uid as number,
}}
zOrderMediaOverlay={true}
/>
);
};
export default MinVideoView;