-
Notifications
You must be signed in to change notification settings - Fork 39
/
MinVideoView.tsx
73 lines (70 loc) · 2.25 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
import React, { useContext, useState } from 'react'
import RtcContext from './RtcContext'
import { AgoraVideoPlayer, IRemoteVideoTrack } from 'agora-rtc-react'
import RemoteVideoMute from './Controls/Remote/RemoteVideoMute'
import RemoteAudioMute from './Controls/Remote/RemoteAudioMute'
import SwapUser from './Controls/SwapUser'
import PropsContext, { UIKitUser } from './PropsContext'
import VideoPlaceholder from './VideoPlaceholder'
/**
* React context to expose user array displayed in the smaller view
*/
const MinVideoView = (props: { user: UIKitUser }) => {
const { mediaStore } = useContext(RtcContext)
const { styleProps, rtcProps } = useContext(PropsContext)
const { minViewStyles, videoMode, minViewOverlayContainer } = styleProps || {}
const renderModeProp = videoMode?.min
const [isShown, setIsShown] = useState(false)
const { user } = props
return (
<div
style={{
...{ display: 'flex', flex: 1 },
...minViewStyles
}}
onMouseEnter={() => setIsShown(true)}
onMouseLeave={() => setIsShown(false)}
>
{user.hasVideo === 1 ? (
<div
style={{
...{
display: 'flex',
flex: 1,
position: 'relative'
}
}}
>
<AgoraVideoPlayer
style={{ flex: 10, display: 'flex' }}
config={{
fit: renderModeProp !== undefined ? renderModeProp : 'cover'
}}
videoTrack={mediaStore[user.uid].videoTrack as IRemoteVideoTrack}
/>
{isShown && (
<div
style={{
...{
margin: 4,
position: 'absolute',
flex: 1,
display: 'flex',
flexDirection: 'column'
},
...minViewOverlayContainer
}}
>
{!rtcProps.disableRtm && <RemoteVideoMute UIKitUser={user} />}
{!rtcProps.disableRtm && <RemoteAudioMute UIKitUser={user} />}
<SwapUser UIKitUser={user} />
</div>
)}
</div>
) : (
<VideoPlaceholder user={user} isShown={isShown} showButtons showSwap />
)}
</div>
)
}
export default MinVideoView