96 lines
2.8 KiB
JavaScript
96 lines
2.8 KiB
JavaScript
// @flow
|
|
|
|
import React, { Component } from 'react';
|
|
|
|
import { Watermarks } from '../../base/react';
|
|
import { Captions } from '../../subtitles/';
|
|
import { connect } from '../../base/redux';
|
|
|
|
declare var interfaceConfig: Object;
|
|
|
|
type Props = {
|
|
|
|
/**
|
|
* Used to determine the value of the autoplay attribute of the underlying
|
|
* video element.
|
|
*/
|
|
_noAutoPlayVideo: boolean
|
|
}
|
|
|
|
/**
|
|
* Implements a React {@link Component} which represents the large video (a.k.a.
|
|
* the conference participant who is on the local stage) on Web/React.
|
|
*
|
|
* @extends Component
|
|
*/
|
|
class LargeVideo extends Component<Props> {
|
|
/**
|
|
* Implements React's {@link Component#render()}.
|
|
*
|
|
* @inheritdoc
|
|
* @returns {React$Element}
|
|
*/
|
|
render() {
|
|
return (
|
|
<div
|
|
className = 'videocontainer'
|
|
id = 'largeVideoContainer'>
|
|
<div id = 'sharedVideo'>
|
|
<div id = 'sharedVideoIFrame' />
|
|
</div>
|
|
<div id = 'etherpad' />
|
|
|
|
<Watermarks />
|
|
|
|
<div id = 'dominantSpeaker'>
|
|
<div className = 'dynamic-shadow' />
|
|
<div id = 'dominantSpeakerAvatarContainer' />
|
|
</div>
|
|
<div id = 'remotePresenceMessage' />
|
|
<span id = 'remoteConnectionMessage' />
|
|
<div id = 'largeVideoElementsContainer'>
|
|
<div id = 'largeVideoBackgroundContainer' />
|
|
|
|
{/*
|
|
* FIXME: the architecture of elements related to the large
|
|
* video and the naming. The background is not part of
|
|
* largeVideoWrapper because we are controlling the size of
|
|
* the video through largeVideoWrapper. That's why we need
|
|
* another container for the background and the
|
|
* largeVideoWrapper in order to hide/show them.
|
|
*/}
|
|
<div id = 'largeVideoWrapper'>
|
|
<video
|
|
autoPlay = { !this.props._noAutoPlayVideo }
|
|
id = 'largeVideo'
|
|
muted = { true } />
|
|
</div>
|
|
</div>
|
|
{ interfaceConfig.DISABLE_TRANSCRIPTION_SUBTITLES
|
|
|| <Captions /> }
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
|
|
/**
|
|
* Maps (parts of) the Redux state to the associated LargeVideo props.
|
|
*
|
|
* @param {Object} state - The Redux state.
|
|
* @private
|
|
* @returns {{
|
|
* _noAutoPlayVideo: boolean
|
|
* }}
|
|
*/
|
|
function _mapStateToProps(state) {
|
|
const testingConfig = state['features/base/config'].testing;
|
|
|
|
return {
|
|
_noAutoPlayVideo: testingConfig?.noAutoPlayVideo
|
|
};
|
|
}
|
|
|
|
|
|
export default connect(_mapStateToProps)(LargeVideo);
|