import React, { Component } from 'react';

import { FilmStrip } from '../../filmStrip';
import { LargeVideo } from '../../largeVideo';
import { Toolbar } from '../../toolbar';

import { ConferenceContainer } from './ConferenceContainer';

/**
 * The conference page of the application.
 */
class Conference extends Component {

    /**
     * Initializes the 'isToolbarVisible' property state.
     *
     * @param {Object} props - The read-only properties with which the new
     *      instance is to be initialized.
     */
    constructor(props) {
        super(props);
        this.state = { isToolbarVisible: false };
        this._onPress = this._onPress.bind(this);
    }

    /**
     * Implements React's {@link Component#render()}.
     *
     * @inheritdoc
     * @returns {ReactElement}
     */
    render() {
        return (
            <ConferenceContainer onPress = { this._onPress }>
                <LargeVideo/>
                <Toolbar
                    isVisible = { this.state.isToolbarVisible }
                    navigator = { this.props.navigator }/>
                <FilmStrip
                    isVisible = { !this.state.isToolbarVisible } />
            </ConferenceContainer>
        );
    }

    /**
     * Changes the value of the isToolbarVisible property, thus allowing
     * us to 'switch' between toolbar and filmstrip views and change the
     * visibility of the above.
     *
     * @private
     * @returns {void}
     */
    _onPress() {
        this.setState({ isToolbarVisible: !this.state.isToolbarVisible });
    }
}

/**
 * Conference component's property types.
 *
 * Ensure that the application navigator object is passed down via props on
 * mobile.
 *
 * @static
 */
Conference.propTypes = {
    navigator: React.PropTypes.object,
    participants: React.PropTypes.object
};

export default Conference;

@@ -232,16 +232,135 @@
 iner';%0A%0A
+/**%0A * The timeout in milliseconds after which the toolbar view will be hidden.%0A */%0Aconst toolbarTimeoutValue = 5000;%0A%0A
 /**%0A * T
@@ -398,16 +398,16 @@
 cation.%0A
-
  */%0Aclas
@@ -736,16 +736,52 @@
 alse %7D;%0A
+        this.toolbarTimeout = null;%0A
         
@@ -1368,32 +1368,277 @@
       );%0A    %7D%0A%0A
+    /**%0A     * Clears the toolbarTimeout before the component unmounts.%0A     *%0A     * @inheritdoc%0A     * @returns %7Bvoid%7D%0A     */%0A    componentWillUnmount() %7B%0A        if (this.toolbarTimeout)%0A            clearTimeout(this.toolbarTimeout);%0A    %7D%0A%0A
     /**%0A     * C
@@ -1890,24 +1890,36 @@
     
+var isVisible = !
 this.s
-etS
 tate
-(%7B 
+.
 isTo
@@ -1934,22 +1934,35 @@
 ible
-: !
+;%0A%0A        
 this.s
+etS
 tate
-.
+(%7B 
 isTo
@@ -1973,18 +1973,181 @@
 rVisible
+: isVisible %7D);%0A%0A        if (isVisible)%0A            this.toolbarTimeout = setTimeout(%0A                this._onPress,%0A                toolbarTimeoutValue%0A           
  
-%7D
 );%0A    %7D

Add timeout hiding the in call toolbar