b7133f5717
* fix(large-video): do not show avatar if no url By default the large video dominant speaker avatar has an empty src, which will result in a broken image displaying. There is also disconnect with non-react code trying to set an undefined src. To prevent such until local avatar generation work is done in the future, just don't show the avatar. * fix(conference): set the room instance earlier Set the room instance on APP.conference before triggering a redux update of the conference being set,, because middleware can then fire and call methods on APP.conference that depend on the room being set. * get local participant directly from store instead of from global
66 lines
2.2 KiB
JavaScript
66 lines
2.2 KiB
JavaScript
// @flow
|
|
|
|
import React, { Component } from 'react';
|
|
|
|
import { Watermarks } from '../../base/react';
|
|
import { Captions } from '../../subtitles/';
|
|
|
|
declare var interfaceConfig: Object;
|
|
|
|
/**
|
|
* 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
|
|
*/
|
|
export default class LargeVideo extends Component<{}> {
|
|
/**
|
|
* 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 = { true }
|
|
id = 'largeVideo'
|
|
muted = { true } />
|
|
</div>
|
|
</div>
|
|
{ interfaceConfig.DISABLE_TRANSCRIPTION_SUBTITLES
|
|
|| <Captions /> }
|
|
<span id = 'localConnectionMessage' />
|
|
</div>
|
|
);
|
|
}
|
|
}
|