jiti-meet/react/features/filmstrip/components/native/Thumbnail.js

260 lines
7.6 KiB
JavaScript
Raw Normal View History

// @flow
import React, { Component } from 'react';
import { connect } from 'react-redux';
2019-03-19 15:42:25 +00:00
import type { Dispatch } from 'redux';
import { ColorSchemeRegistry } from '../../../base/color-scheme';
2018-12-19 18:40:17 +00:00
import { openDialog } from '../../../base/dialog';
import { Audio, MEDIA_TYPE } from '../../../base/media';
import {
PARTICIPANT_ROLE,
ParticipantView,
2018-12-19 18:40:17 +00:00
isLocalParticipantModerator,
pinParticipant
} from '../../../base/participants';
import { Container } from '../../../base/react';
import { StyleType } from '../../../base/styles';
import { getTrackByMediaTypeAndParticipant } from '../../../base/tracks';
2018-12-19 18:40:17 +00:00
import { RemoteVideoMenu } from '../../../remote-video-menu';
import AudioMutedIndicator from './AudioMutedIndicator';
import DominantSpeakerIndicator from './DominantSpeakerIndicator';
import ModeratorIndicator from './ModeratorIndicator';
import { AVATAR_SIZE } from '../styles';
import styles from './styles';
import VideoMutedIndicator from './VideoMutedIndicator';
/**
* Thumbnail component's property types.
*/
type Props = {
/**
* The Redux representation of the participant's audio track.
*/
_audioTrack: Object,
2018-12-19 18:40:17 +00:00
/**
* True if the local participant is a moderator.
*/
_isModerator: boolean,
/**
* The Redux representation of the state "features/large-video".
*/
_largeVideo: Object,
2019-01-05 16:49:21 +00:00
/**
* Handles click/tap event on the thumbnail.
*/
_onClick: ?Function,
/**
* Handles long press on the thumbnail.
*/
_onShowRemoteVideoMenu: ?Function,
/**
* The color-schemed stylesheet of the feature.
*/
_styles: StyleType,
/**
* The Redux representation of the participant's video track.
*/
_videoTrack: Object,
/**
* If true, tapping on the thumbnail will not pin the participant to large
* video. By default tapping does pin the participant.
*/
disablePin?: boolean,
/**
* If true, there will be no color overlay (tint) on the thumbnail
* indicating the participant associated with the thumbnail is displayed on
* large video. By default there will be a tint.
*/
disableTint?: boolean,
/**
* Invoked to trigger state changes in Redux.
*/
2019-03-19 15:42:25 +00:00
dispatch: Dispatch<any>,
/**
* The Redux representation of the participant to display.
*/
participant: Object,
/**
* Optional styling to add or override on the Thumbnail component root.
*/
styleOverrides?: Object
};
/**
* React component for video thumbnail.
*
* @extends Component
*/
class Thumbnail extends Component<Props> {
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
* @returns {ReactElement}
*/
render() {
const {
_audioTrack: audioTrack,
2018-12-19 18:40:17 +00:00
_isModerator,
_largeVideo: largeVideo,
2019-01-05 16:49:21 +00:00
_onClick,
_onShowRemoteVideoMenu,
_styles,
_videoTrack: videoTrack,
disablePin,
disableTint,
participant
} = this.props;
// We don't render audio in any of the following:
// 1. The audio (source) is muted. There's no practical reason (that we
// know of, anyway) why we'd want to render it given that it's
// silence (& not even comfort noise).
// 2. The audio is local. If we were to render local audio, the local
// participants would be hearing themselves.
const audioMuted = !audioTrack || audioTrack.muted;
const renderAudio = !audioMuted && !audioTrack.local;
const participantId = participant.id;
2018-07-10 15:27:48 +00:00
const participantInLargeVideo
= participantId === largeVideo.participantId;
const videoMuted = !videoTrack || videoTrack.muted;
2018-12-19 18:40:17 +00:00
const showRemoteVideoMenu = _isModerator && !participant.local;
return (
<Container
2019-01-05 16:49:21 +00:00
onClick = { disablePin ? undefined : _onClick }
2018-12-19 18:40:17 +00:00
onLongPress = {
showRemoteVideoMenu
2019-01-05 16:49:21 +00:00
? _onShowRemoteVideoMenu : undefined }
style = { [
styles.thumbnail,
participant.pinned && !disablePin
? _styles.thumbnailPinned : null,
this.props.styleOverrides || null
] }
touchFeedback = { false }>
{ renderAudio
&& <Audio
stream
= { audioTrack.jitsiTrack.getOriginalStream() } /> }
<ParticipantView
avatarSize = { AVATAR_SIZE }
participantId = { participantId }
style = { _styles.participantViewStyle }
tintEnabled = { participantInLargeVideo && !disableTint }
tintStyle = { _styles.activeThumbnailTint }
zOrder = { 1 } />
{ participant.role === PARTICIPANT_ROLE.MODERATOR
&& <ModeratorIndicator /> }
{ participant.dominantSpeaker
&& <DominantSpeakerIndicator /> }
2017-04-11 00:14:14 +00:00
<Container style = { styles.thumbnailIndicatorContainer }>
{ audioMuted
&& <AudioMutedIndicator /> }
{ videoMuted
&& <VideoMutedIndicator /> }
</Container>
</Container>
);
}
2019-01-05 16:49:21 +00:00
}
2019-01-05 16:49:21 +00:00
/**
* Maps part of redux actions to component's props.
*
* @param {Function} dispatch - Redux's {@code dispatch} function.
* @param {Props} ownProps - The own props of the component.
* @returns {{
* _onClick: Function,
* _onShowRemoteVideoMenu: Function
* }}
*/
function _mapDispatchToProps(dispatch: Function, ownProps): Object {
return {
/**
* Handles click/tap event on the thumbnail.
*
* @protected
* @returns {void}
*/
_onClick() {
const { participant } = ownProps;
dispatch(
pinParticipant(participant.pinned ? null : participant.id));
},
/**
* Handles long press on the thumbnail.
*
* @returns {void}
*/
_onShowRemoteVideoMenu() {
const { participant } = ownProps;
dispatch(openDialog(RemoteVideoMenu, {
participant
}));
}
};
}
/**
* Function that maps parts of Redux state tree into component props.
*
* @param {Object} state - Redux state.
2019-01-05 16:49:21 +00:00
* @param {Props} ownProps - Properties of component.
* @returns {{
* _audioTrack: Track,
2018-12-19 18:40:17 +00:00
* _isModerator: boolean,
* _largeVideo: Object,
* _styles: StyleType,
* _videoTrack: Track
* }}
*/
function _mapStateToProps(state, ownProps) {
2017-01-17 14:44:50 +00:00
// We need read-only access to the state of features/large-video so that the
// filmstrip doesn't render the video of the participant who is rendered on
// the stage i.e. as a large video.
2017-01-17 14:44:50 +00:00
const largeVideo = state['features/large-video'];
const tracks = state['features/base/tracks'];
const id = ownProps.participant.id;
const audioTrack
= getTrackByMediaTypeAndParticipant(tracks, MEDIA_TYPE.AUDIO, id);
const videoTrack
= getTrackByMediaTypeAndParticipant(tracks, MEDIA_TYPE.VIDEO, id);
return {
_audioTrack: audioTrack,
2018-12-19 18:40:17 +00:00
_isModerator: isLocalParticipantModerator(state),
_largeVideo: largeVideo,
_styles: ColorSchemeRegistry.get(state, 'Thumbnail'),
_videoTrack: videoTrack
};
}
2019-03-19 15:42:25 +00:00
// $FlowExpectedError
2019-01-05 16:49:21 +00:00
export default connect(_mapStateToProps, _mapDispatchToProps)(Thumbnail);