From f94a061fdad7f7b5c55b5c0543d65d240f61fa30 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Wed, 15 Jul 2015 13:34:11 +0100
Subject: [PATCH] Add onClick listeners. Add getters for refs.

---
 skins/base/views/molecules/RoomHeader.js               | 4 ++--
 skins/base/views/{organisms => molecules}/VideoView.js | 0
 skins/base/views/organisms/RoomView.js                 | 9 ++++++++-
 skins/base/views/pages/MatrixChat.js                   | 2 --
 src/ComponentBroker.js                                 | 2 +-
 src/controllers/molecules/RoomHeader.js                | 8 ++++++++
 6 files changed, 19 insertions(+), 6 deletions(-)
 rename skins/base/views/{organisms => molecules}/VideoView.js (100%)

diff --git a/skins/base/views/molecules/RoomHeader.js b/skins/base/views/molecules/RoomHeader.js
index 23bd63d3ca..e4a16b829a 100644
--- a/skins/base/views/molecules/RoomHeader.js
+++ b/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>
diff --git a/skins/base/views/organisms/VideoView.js b/skins/base/views/molecules/VideoView.js
similarity index 100%
rename from skins/base/views/organisms/VideoView.js
rename to skins/base/views/molecules/VideoView.js
diff --git a/skins/base/views/organisms/RoomView.js b/skins/base/views/organisms/RoomView.js
index eb91b5442c..26b96baaee 100644
--- a/skins/base/views/organisms/RoomView.js
+++ b/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">
diff --git a/skins/base/views/pages/MatrixChat.js b/skins/base/views/pages/MatrixChat.js
index fcc1d274a6..11e2be9ca2 100644
--- a/skins/base/views/pages/MatrixChat.js
+++ b/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>
             );
diff --git a/src/ComponentBroker.js b/src/ComponentBroker.js
index e717ebb981..ec0f00b6ff 100644
--- a/src/ComponentBroker.js
+++ b/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');
 
 }
diff --git a/src/controllers/molecules/RoomHeader.js b/src/controllers/molecules/RoomHeader.js
index 8aa688b21e..49f85caa9b 100644
--- a/src/controllers/molecules/RoomHeader.js
+++ b/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");
+    }
 };