content: import React, { Component } from 'react';
  import { connect as reactReduxConnect } from 'react-redux';
  
  import {
      connect,
      disconnect
  } from '../../base/connection';
  import { Container } from '../../base/react';
  import { FilmStrip } from '../../filmStrip';
  import { LargeVideo } from '../../largeVideo';
  import { Toolbar } from '../../toolbar';
  
  import { styles } from './styles';
  
  /**
   * The timeout in milliseconds after which the toolbar will be hidden.
   */
  const TOOLBAR_TIMEOUT_MS = 5000;
  
  /**
   * The conference page of the application.
   */
  class Conference extends Component {
  
      /**
       * Initializes a new Conference instance.
       *
       * @param {Object} props - The read-only properties with which the new
       * instance is to be initialized.
       */
      constructor(props) {
          super(props);
  
          this.state = { toolbarVisible: false };
  
          /**
           * The numerical ID of the timeout in milliseconds after which the
           * toolbar will be hidden. To be used with
           * {@link WindowTimers#clearTimeout()}.
           *
           * @private
           */
          this._toolbarTimeout = undefined;
  
          // Bind event handlers so they are only bound once for every instance.
          this._onClick = this._onClick.bind(this);
      }
  
      /**
       * Inits new connection and conference when conference screen is entered.
       *
       * @inheritdoc
       * @returns {void}
       */
      componentWillMount() {
          this.props.dispatch(connect());
      }
  
      /**
       * Destroys connection, conference and local tracks when conference screen
       * is left. Clears {@link #_toolbarTimeout} before the component unmounts.
       *
       * @inheritdoc
       * @returns {void}
       */
      componentWillUnmount() {
          this._clearToolbarTimeout();
  
          this.props.dispatch(disconnect());
      }
  
      /**
       * Implements React's {@link Component#render()}.
       *
       * @inheritdoc
       * @returns {ReactElement}
       */
      render() {
          const toolbarVisible = this.state.toolbarVisible;
  
          return (
              <Container
                  onClick = { this._onClick }
                  style = { styles.conference }
                  touchFeedback = { false }>
  
                  <LargeVideo />
                  <Toolbar visible = { toolbarVisible } />
                  <FilmStrip visible = { !toolbarVisible } />
              </Container>
          );
      }
  
      /**
       * Clears {@link #_toolbarTimeout} if any.
       *
       * @private
       * @returns {void}
       */
      _clearToolbarTimeout() {
          if (this._toolbarTimeout) {
              clearTimeout(this._toolbarTimeout);
              this._toolbarTimeout = undefined;
          }
      }
  
      /**
       * Changes the value of the toolbarVisible state, thus allowing us to
       * 'switch' between toolbar and filmstrip views and change the visibility of
       * the above.
       *
       * @private
       * @returns {void}
       */
      _onClick() {
          const toolbarVisible = !this.state.toolbarVisible;
  
          this.setState({ toolbarVisible });
  
          this._clearToolbarTimeout();
          if (toolbarVisible) {
              this._toolbarTimeout
                  = setTimeout(this._onClick, TOOLBAR_TIMEOUT_MS);
          }
      }
  }
  
  /**
   * Conference component's property types.
   *
   * @static
   */
  Conference.propTypes = {
      dispatch: React.PropTypes.func
  };
  
  export default reactReduxConnect()(Conference);
  