ee74f11c3d
* feat(recording): frontend logic can support live streaming and recording Instead of either live streaming or recording, now both can live together. The changes to facilitate such include the following: - Killing the state storing in Recording.js. Instead state is stored in the lib and updated in redux for labels to display the necessary state updates. - Creating a new container, Labels, for recording labels. Previously labels were manually created and positioned. The container can create a reasonable number of labels and only the container itself needs to be positioned with CSS. The VideoQualityLabel has been shoved into the container as well because it moves along with the recording labels. - The action for updating recording state has been modified to enable updating an array of recording sessions to support having multiple sessions. - Confirmation dialogs for stopping and starting a file recording session have been created, as they previously were jquery modals opened by Recording.js. - Toolbox.web displays live streaming and recording buttons based on configuration instead of recording availability. - VideoQualityLabel and RecordingLabel have been simplified to remove any positioning logic, as the Labels container handles such. - Previous recording state update logic has been moved into the RecordingLabel component. Each RecordingLabel is in charge of displaying state for a recording session. The display UX has been left alone. - Sipgw availability is no longer broadcast so remove logic depending on its state. Some moving around of code was necessary to get around linting errors about the existing code being too deeply nested (even though I didn't touch it). * work around lib-jitsi-meet circular dependency issues * refactor labels to use html base * pass in translation keys to video quality label * add video quality classnames for torture tests * break up, rearrange recorder session update listener * add comment about disabling startup resize animation * rename session to sessionData * chore(deps): update to latest lib for recording changes
80 lines
2.5 KiB
JavaScript
80 lines
2.5 KiB
JavaScript
/* @flow */
|
|
|
|
import PropTypes from 'prop-types';
|
|
import React, { Component } from 'react';
|
|
|
|
import { Watermarks } from '../../base/react';
|
|
|
|
import Labels from './Labels';
|
|
|
|
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 : <Labels /> }
|
|
</div>
|
|
);
|
|
}
|
|
}
|