mirror of
https://gitcode.com/GitHub_Trending/ji/jitsi-meet.git
synced 2025-12-30 11:22:31 +00:00
4fb37c38eb
* ref(large-video): reactify background This is pre-requisite work for disabling the background on certain browsers, namely Firefox. By moving the component to react, and in general encapsulating background logic, selectively disabling the background will be easier. The component was left for LargeVideo to update so it can continue to coordinate update timing with the actual large video display. If the background were moved completely into react and redux with LargeVideo, then background updates would occur before large video updates causing visual jank. * fix(large-video): do not show background for Firefox and temasys Firefox has performance issues with adding filter effects on animated elements. On temasys, the background videos weren't really displaying anyway. * some props refactoring Instead of passing in classes to LargeVideoBackground, rely on explicit props. At some point LargeVideo will have to be reactified and the relationsihp between it and LargeVideoBackground might change, so for now make use of props to be explicit about how LargeVideoBackground can be modified. Also, set the jitsiTrack to display on LargeVideoBackground to null if the background is not displayed. This was an existing optimization, although previously done with pausing and playing. * squash: use newly exposed RTCBrowserType * squash: rebase and use new lib browser util * squash: move hiding logic all into LargeVideo * squash: remove hiding of background on stream change. hopefully doesnt break anything
81 lines
2.6 KiB
JavaScript
81 lines
2.6 KiB
JavaScript
/* @flow */
|
|
|
|
import PropTypes from 'prop-types';
|
|
import React, { Component } from 'react';
|
|
|
|
import { Watermarks } from '../../base/react';
|
|
import { VideoQualityLabel } from '../../video-quality';
|
|
import { RecordingLabel } from '../../recording';
|
|
|
|
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<*> {
|
|
static propTypes = {
|
|
/**
|
|
* True if the {@code VideoQualityLabel} should not be displayed.
|
|
*/
|
|
hideVideoQualityLabel: PropTypes.bool
|
|
};
|
|
|
|
/**
|
|
* Implements React's {@link Component#render()}.
|
|
*
|
|
* @inheritdoc
|
|
* @returns {ReactElement}
|
|
*/
|
|
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' />
|
|
<img
|
|
id = 'dominantSpeakerAvatar'
|
|
src = '' />
|
|
</div>
|
|
<div id = 'remotePresenceMessage' />
|
|
<span id = 'remoteConnectionMessage' />
|
|
<div>
|
|
<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 the
|
|
* background and the largeVideoWrapper in order to
|
|
* hide/show them.
|
|
*/
|
|
}
|
|
<div id = 'largeVideoWrapper'>
|
|
<video
|
|
autoPlay = { true }
|
|
id = 'largeVideo'
|
|
muted = { true } />
|
|
</div>
|
|
</div>
|
|
<span id = 'localConnectionMessage' />
|
|
{ this.props.hideVideoQualityLabel
|
|
? null : <VideoQualityLabel /> }
|
|
<RecordingLabel />
|
|
</div>
|
|
);
|
|
}
|
|
}
|