You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

Thumbnail.js 8.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277
  1. // @flow
  2. import React from 'react';
  3. import { View } from 'react-native';
  4. import type { Dispatch } from 'redux';
  5. import { ColorSchemeRegistry } from '../../../base/color-scheme';
  6. import { openDialog } from '../../../base/dialog';
  7. import { MEDIA_TYPE, VIDEO_TYPE } from '../../../base/media';
  8. import {
  9. PARTICIPANT_ROLE,
  10. ParticipantView,
  11. getParticipantCount,
  12. isEveryoneModerator,
  13. pinParticipant
  14. } from '../../../base/participants';
  15. import { Container } from '../../../base/react';
  16. import { connect } from '../../../base/redux';
  17. import { StyleType } from '../../../base/styles';
  18. import { getTrackByMediaTypeAndParticipant } from '../../../base/tracks';
  19. import { ConnectionIndicator } from '../../../connection-indicator';
  20. import { DisplayNameLabel } from '../../../display-name';
  21. import { RemoteVideoMenu } from '../../../remote-video-menu';
  22. import { toggleToolboxVisible } from '../../../toolbox/actions.native';
  23. import AudioMutedIndicator from './AudioMutedIndicator';
  24. import DominantSpeakerIndicator from './DominantSpeakerIndicator';
  25. import ModeratorIndicator from './ModeratorIndicator';
  26. import RaisedHandIndicator from './RaisedHandIndicator';
  27. import ScreenShareIndicator from './ScreenShareIndicator';
  28. import VideoMutedIndicator from './VideoMutedIndicator';
  29. import styles, { AVATAR_SIZE } from './styles';
  30. /**
  31. * Thumbnail component's property types.
  32. */
  33. type Props = {
  34. /**
  35. * Whether local audio (microphone) is muted or not.
  36. */
  37. _audioMuted: boolean,
  38. /**
  39. * The Redux representation of the state "features/large-video".
  40. */
  41. _largeVideo: Object,
  42. /**
  43. * Handles click/tap event on the thumbnail.
  44. */
  45. _onClick: ?Function,
  46. /**
  47. * Handles long press on the thumbnail.
  48. */
  49. _onShowRemoteVideoMenu: ?Function,
  50. /**
  51. * Whether to show the dominant speaker indicator or not.
  52. */
  53. _renderDominantSpeakerIndicator: boolean,
  54. /**
  55. * Whether to show the moderator indicator or not.
  56. */
  57. _renderModeratorIndicator: boolean,
  58. /**
  59. * The color-schemed stylesheet of the feature.
  60. */
  61. _styles: StyleType,
  62. /**
  63. * The Redux representation of the participant's video track.
  64. */
  65. _videoTrack: Object,
  66. /**
  67. * If true, there will be no color overlay (tint) on the thumbnail
  68. * indicating the participant associated with the thumbnail is displayed on
  69. * large video. By default there will be a tint.
  70. */
  71. disableTint?: boolean,
  72. /**
  73. * Invoked to trigger state changes in Redux.
  74. */
  75. dispatch: Dispatch<any>,
  76. /**
  77. * The Redux representation of the participant to display.
  78. */
  79. participant: Object,
  80. /**
  81. * Whether to display or hide the display name of the participant in the thumbnail.
  82. */
  83. renderDisplayName: ?boolean,
  84. /**
  85. * Optional styling to add or override on the Thumbnail component root.
  86. */
  87. styleOverrides?: Object,
  88. /**
  89. * If true, it tells the thumbnail that it needs to behave differently. E.g. react differently to a single tap.
  90. */
  91. tileView?: boolean
  92. };
  93. /**
  94. * React component for video thumbnail.
  95. *
  96. * @param {Props} props - Properties passed to this functional component.
  97. * @returns {Component} - A React component.
  98. */
  99. function Thumbnail(props: Props) {
  100. const {
  101. _audioMuted: audioMuted,
  102. _largeVideo: largeVideo,
  103. _onClick,
  104. _onShowRemoteVideoMenu,
  105. _renderDominantSpeakerIndicator: renderDominantSpeakerIndicator,
  106. _renderModeratorIndicator: renderModeratorIndicator,
  107. _styles,
  108. _videoTrack: videoTrack,
  109. disableTint,
  110. participant,
  111. renderDisplayName,
  112. tileView
  113. } = props;
  114. const participantId = participant.id;
  115. const participantInLargeVideo
  116. = participantId === largeVideo.participantId;
  117. const videoMuted = !videoTrack || videoTrack.muted;
  118. const isScreenShare = videoTrack && videoTrack.videoType === VIDEO_TYPE.DESKTOP;
  119. return (
  120. <Container
  121. onClick = { _onClick }
  122. onLongPress = { participant.local ? undefined : _onShowRemoteVideoMenu }
  123. style = { [
  124. styles.thumbnail,
  125. participant.pinned && !tileView
  126. ? _styles.thumbnailPinned : null,
  127. props.styleOverrides || null
  128. ] }
  129. touchFeedback = { false }>
  130. <ParticipantView
  131. avatarSize = { tileView ? AVATAR_SIZE * 1.5 : AVATAR_SIZE }
  132. disableVideo = { isScreenShare || participant.isFakeParticipant }
  133. participantId = { participantId }
  134. style = { _styles.participantViewStyle }
  135. tintEnabled = { participantInLargeVideo && !disableTint }
  136. tintStyle = { _styles.activeThumbnailTint }
  137. zOrder = { 1 } />
  138. { renderDisplayName && <Container style = { styles.displayNameContainer }>
  139. <DisplayNameLabel participantId = { participantId } />
  140. </Container> }
  141. { renderModeratorIndicator
  142. && <View style = { styles.moderatorIndicatorContainer }>
  143. <ModeratorIndicator />
  144. </View>}
  145. { !participant.isFakeParticipant && <View
  146. style = { [
  147. styles.thumbnailTopIndicatorContainer,
  148. styles.thumbnailTopLeftIndicatorContainer
  149. ] }>
  150. <RaisedHandIndicator participantId = { participant.id } />
  151. { renderDominantSpeakerIndicator && <DominantSpeakerIndicator /> }
  152. </View> }
  153. { !participant.isFakeParticipant && <View
  154. style = { [
  155. styles.thumbnailTopIndicatorContainer,
  156. styles.thumbnailTopRightIndicatorContainer
  157. ] }>
  158. <ConnectionIndicator participantId = { participant.id } />
  159. </View> }
  160. { !participant.isFakeParticipant && <Container style = { styles.thumbnailIndicatorContainer }>
  161. { audioMuted
  162. && <AudioMutedIndicator /> }
  163. { videoMuted
  164. && <VideoMutedIndicator /> }
  165. { isScreenShare
  166. && <ScreenShareIndicator /> }
  167. </Container> }
  168. </Container>
  169. );
  170. }
  171. /**
  172. * Maps part of redux actions to component's props.
  173. *
  174. * @param {Function} dispatch - Redux's {@code dispatch} function.
  175. * @param {Props} ownProps - The own props of the component.
  176. * @returns {{
  177. * _onClick: Function,
  178. * _onShowRemoteVideoMenu: Function
  179. * }}
  180. */
  181. function _mapDispatchToProps(dispatch: Function, ownProps): Object {
  182. return {
  183. /**
  184. * Handles click/tap event on the thumbnail.
  185. *
  186. * @protected
  187. * @returns {void}
  188. */
  189. _onClick() {
  190. const { participant, tileView } = ownProps;
  191. if (tileView) {
  192. dispatch(toggleToolboxVisible());
  193. } else {
  194. dispatch(pinParticipant(participant.pinned ? null : participant.id));
  195. }
  196. },
  197. /**
  198. * Handles long press on the thumbnail.
  199. *
  200. * @returns {void}
  201. */
  202. _onShowRemoteVideoMenu() {
  203. const { participant } = ownProps;
  204. dispatch(openDialog(RemoteVideoMenu, {
  205. participant
  206. }));
  207. }
  208. };
  209. }
  210. /**
  211. * Function that maps parts of Redux state tree into component props.
  212. *
  213. * @param {Object} state - Redux state.
  214. * @param {Props} ownProps - Properties of component.
  215. * @returns {Object}
  216. */
  217. function _mapStateToProps(state, ownProps) {
  218. // We need read-only access to the state of features/large-video so that the
  219. // filmstrip doesn't render the video of the participant who is rendered on
  220. // the stage i.e. as a large video.
  221. const largeVideo = state['features/large-video'];
  222. const tracks = state['features/base/tracks'];
  223. const { participant } = ownProps;
  224. const id = participant.id;
  225. const audioTrack
  226. = getTrackByMediaTypeAndParticipant(tracks, MEDIA_TYPE.AUDIO, id);
  227. const videoTrack
  228. = getTrackByMediaTypeAndParticipant(tracks, MEDIA_TYPE.VIDEO, id);
  229. const participantCount = getParticipantCount(state);
  230. const renderDominantSpeakerIndicator = participant.dominantSpeaker && participantCount > 2;
  231. const _isEveryoneModerator = isEveryoneModerator(state);
  232. const renderModeratorIndicator = !_isEveryoneModerator && participant.role === PARTICIPANT_ROLE.MODERATOR;
  233. return {
  234. _audioMuted: audioTrack?.muted ?? true,
  235. _largeVideo: largeVideo,
  236. _renderDominantSpeakerIndicator: renderDominantSpeakerIndicator,
  237. _renderModeratorIndicator: renderModeratorIndicator,
  238. _styles: ColorSchemeRegistry.get(state, 'Thumbnail'),
  239. _videoTrack: videoTrack
  240. };
  241. }
  242. export default connect(_mapStateToProps, _mapDispatchToProps)(Thumbnail);