jiti-meet/react/features/filmstrip/components/Filmstrip.web.js

78 lines
2.8 KiB
JavaScript
Raw Normal View History

/* @flow */
import React, { Component } from 'react';
import { Toolbox } from '../../toolbox';
/**
* Implements a React {@link Component} which represents the filmstrip on
* Web/React.
*
* @extends Component
*/
export default class Filmstrip extends Component {
static propTypes = {
/**
* Whether or not the toolbox should be displayed within the filmstrip.
*/
displayToolbox: React.PropTypes.bool
};
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
* @returns {ReactElement}
*/
render() {
return (
<div className = 'filmstrip'>
{ this.props.displayToolbox ? <Toolbox /> : null }
<div
className = 'filmstrip__videos'
id = 'remoteVideos'>
<div
className = 'filmstrip__videos'
id = 'filmstripLocalVideo'>
<span
className = 'videocontainer'
id = 'localVideoContainer'>
<div className = 'videocontainer__background' />
<span id = 'localVideoWrapper' />
<audio
autoPlay = { true }
id = 'localAudio'
muted = { true } />
<div className = 'videocontainer__toolbar' />
<div className = 'videocontainer__toptoolbar' />
<div className = 'videocontainer__hoverOverlay' />
<div className = 'displayNameContainer' />
<div className = 'avatar-container' />
</span>
</div>
<div
className = 'filmstrip__videos'
id = 'filmstripRemoteVideos'>
{/*
* This extra video container is needed for scrolling
* thumbnails in Firefox; otherwise, the flex
* thumbnails resize instead of causing overflow.
*/}
<div
className = 'remote-videos-container'
id = 'filmstripRemoteVideosContainer' />
</div>
<audio
id = 'userJoined'
preload = 'auto'
src = 'sounds/joined.wav' />
<audio
id = 'userLeft'
preload = 'auto'
src = 'sounds/left.wav' />
</div>
</div>
);
}
}