Add onClick listeners. Add getters for refs.

skins/base/views/molecules/RoomHeader.js

@@ -49,10 +49,10 @@ module.exports = React.createClass({
                         <div className="mx_RoomHeader_button">
                             <img src="img/search.png" width="32" height="32"/>
                         </div>
-                        <div className="mx_RoomHeader_button">
+                        <div className="mx_RoomHeader_button" onClick={this.onVideoClick}>
                             <img src="img/video.png" width="32" height="32"/>
                         </div>
-                        <div className="mx_RoomHeader_button">
+                        <div className="mx_RoomHeader_button" onClick={this.onVoiceClick}>
                             <img src="img/voip.png" width="32" height="32"/>
                         </div>
                     </div>

skins/base/views/organisms/RoomView.js

@@ -26,6 +26,7 @@ var classNames = require("classnames");
 var MessageTile = ComponentBroker.get('molecules/MessageTile');
 var RoomHeader = ComponentBroker.get('molecules/RoomHeader');
 var MessageComposer = ComponentBroker.get('molecules/MessageComposer');
+var VideoView = ComponentBroker.get("molecules/VideoView");
 
 var RoomViewController = require("../../../../src/controllers/organisms/RoomView");
 
@@ -36,6 +37,10 @@ module.exports = React.createClass({
     displayName: 'RoomView',
     mixins: [RoomViewController],
 
+    getVideoView: function() {
+        return this.refs.video;
+    },
+
     render: function() {
         var myUserId = MatrixClientPeg.get().credentials.userId;
         if (this.state.room.currentState.members[myUserId].membership == 'invite') {
@@ -67,7 +72,9 @@ module.exports = React.createClass({
             return (
                 <div className="mx_RoomView">
                     <RoomHeader room={this.state.room} />
-                    <div className="mx_RoomView_auxPanel"></div>
+                    <div className="mx_RoomView_auxPanel">
+                        <VideoView ref="video" />
+                    </div>
                     <div ref="messageWrapper" className="mx_RoomView_messagePanel" onScroll={this.onMessageListScroll}>
                         <div className="mx_RoomView_messageListWrapper">
                             <div className="mx_RoomView_MessageList" aria-live="polite">

skins/base/views/pages/MatrixChat.js

@@ -22,7 +22,6 @@ var ComponentBroker = require('../../../../src/ComponentBroker');
 var LeftPanel = ComponentBroker.get('organisms/LeftPanel');
 var RoomView = ComponentBroker.get('organisms/RoomView');
 var RightPanel = ComponentBroker.get('organisms/RightPanel');
-var VideoView = ComponentBroker.get('organisms/VideoView');
 var Login = ComponentBroker.get('templates/Login');
 
 var MatrixChatController = require("../../../../src/controllers/pages/MatrixChat");
@@ -41,7 +40,6 @@ module.exports = React.createClass({
                 <div className="mx_MatrixChat">
                     <LeftPanel selectedRoom={this.state.currentRoom} />
                     <RoomView roomId={this.state.currentRoom} key={this.state.currentRoom} />
-                    <VideoView />
                     <RightPanel roomId={this.state.currentRoom} />
                 </div>
             );

src/ComponentBroker.js

@@ -89,6 +89,6 @@ require('../skins/base/views/organisms/RightPanel');
 require('../skins/base/views/molecules/RoomCreate');
 require('../skins/base/views/molecules/RoomDropTarget');
 require('../skins/base/views/molecules/DirectoryMenu');
-require('../skins/base/views/organisms/VideoView');
+require('../skins/base/views/molecules/VideoView');
 
 }

src/controllers/molecules/RoomHeader.js

@@ -16,6 +16,14 @@ limitations under the License.
 
 'use strict';
 
+var MatrixClientPeg = require("../../MatrixClientPeg");
+
 module.exports = {
+    onVideoClick: function() {
+        console.log("video clicked");
+    },
+    onVoiceClick: function() {
+        console.log("voice clicked");
+    }
 };