mirror of
https://gitcode.com/GitHub_Trending/ji/jitsi-meet.git
synced 2026-05-22 21:37:46 +00:00
b7c4ebba84
We've had Filmstrip & LargeVideo React Components on mobile/React Native from the start. We didn't have them on Web (because the rewrite in React is not complete yet). However, that led to differences in the React Component Conference on Web and mobile. In an effort to get closer to merging the React Component Conference on Web and mobile, introduce the React Components Filmstrip & LargeVideo on Web even if a minimal render-only form at this time.
63 lines
1.9 KiB
JavaScript
63 lines
1.9 KiB
JavaScript
/* @flow */
|
|
|
|
import React, { Component } from 'react';
|
|
|
|
import { Watermarks } from '../../base/react';
|
|
import { VideoStatusLabel } from '../../video-status-label';
|
|
|
|
/**
|
|
* 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 {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>
|
|
<span id = 'remoteConnectionMessage' />
|
|
<div id = 'largeVideoWrapper'>
|
|
<video
|
|
autoPlay = { true }
|
|
id = 'largeVideo'
|
|
muted = { true } />
|
|
</div>
|
|
<span id = 'localConnectionMessage' />
|
|
|
|
<VideoStatusLabel />
|
|
|
|
<span
|
|
className = 'video-state-indicator centeredVideoLabel'
|
|
id = 'recordingLabel'>
|
|
<span id = 'recordingLabelText' />
|
|
<img
|
|
className = 'recordingSpinner'
|
|
id = 'recordingSpinner'
|
|
src = 'images/spin.svg' />
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
}
|