Merge branch 'develop' into matthew/redesign

CHANGES.rst

@@ -1,3 +1,14 @@
+Changes in vector v0.1.2 (2015-10-28)
+======================================
+ * Support Room Avatars
+ * Fullscreen video calls
+ * Mute mic in VoIP calls
+ * Fix bug with multiple desktop notifications
+ * Context menu on messages
+ * Better hover-over on member list
+ * Support CAS auth
+ * Many other bug fixes
+ 
 Changes in vector v0.1.1 (2015-08-10)
 ======================================
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vector-web",
-  "version": "0.0.1",
+  "version": "0.1.2",
   "description": "Vector webapp",
   "author": "matrix.org",
   "repository": {
@@ -27,8 +27,8 @@
     "filesize": "^3.1.2",
     "flux": "~2.0.3",
     "linkifyjs": "^2.0.0-beta.4",
-    "matrix-js-sdk": "^0.2.2",
+    "matrix-js-sdk": "^0.3.0",
-    "matrix-react-sdk": "^0.0.1",
+    "matrix-react-sdk": "^0.0.2",
     "q": "^1.4.1",
     "react": "^0.13.3",
     "react-loader": "^1.4.0",

src/controllers/molecules/voip/CallView.js

@@ -90,6 +90,7 @@ module.exports = {
         else {
             this.getVideoView().getLocalVideoElement().style.display = "none";
             this.getVideoView().getRemoteVideoElement().style.display = "none";
+            dis.dispatch({action: 'video_fullscreen', fullscreen: false});
         }
     }
 };

src/controllers/organisms/RoomList.js

@@ -34,6 +34,7 @@ module.exports = {
         cli.on("Room.timeline", this.onRoomTimeline);
         cli.on("Room.name", this.onRoomName);
         cli.on("RoomState.events", this.onRoomStateEvents);
+        cli.on("RoomMember.name", this.onRoomMemberName);
 
         var s = this.getRoomLists();
         s.activityMap = {};
@@ -112,6 +113,10 @@ module.exports = {
         setTimeout(this.refreshRoomList, 0);
     },
 
+    onRoomMemberName: function(ev, member) {
+        setTimeout(this.refreshRoomList, 0);
+    },
+
 
     refreshRoomList: function() {
         this.setState(this.getRoomLists());

src/skins/vector/css/common.css

@@ -86,6 +86,10 @@ a:visited {
     cursor: pointer;
 }
 
+.mx_ContextualMenu_spinner {
+    display: block;
+    margin: 0 auto;
+}
 
 .mx_Dialog_background {
     position: fixed;

src/skins/vector/views/atoms/RoomAvatar.js

@@ -17,7 +17,6 @@ limitations under the License.
 'use strict';
 
 var React = require('react');
-var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
 
 var RoomAvatarController = require('matrix-react-sdk/lib/controllers/atoms/RoomAvatar')
 

src/skins/vector/views/atoms/Spinner.js

@@ -0,0 +1,34 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var React = require('react');
+
+module.exports = React.createClass({
+    displayName: 'Spinner',
+
+    render: function() {
+        var w = this.props.w || 32;
+        var h = this.props.h || 32;
+        var imgClass = this.props.imgClassName || "";
+        return (
+            <div>
+                <img src="img/spinner.gif" width={w} height={h} className={imgClass}/>
+            </div>
+        );
+    }
+});

src/skins/vector/views/molecules/EventAsTextTile.js

@@ -18,7 +18,6 @@ limitations under the License.
 
 var React = require('react');
 
-var sdk = require('matrix-react-sdk')
 var TextForEvent = require('matrix-react-sdk/lib/TextForEvent');
 
 module.exports = React.createClass({

src/skins/vector/views/molecules/EventTile.js

@@ -70,8 +70,6 @@ module.exports = React.createClass({
         var SenderProfile = sdk.getComponent('molecules.SenderProfile');
         var MemberAvatar = sdk.getComponent('atoms.MemberAvatar');
 
-        var UnknownMessageTile = sdk.getComponent('molecules.UnknownMessageTile');
-
         var content = this.props.mxEvent.getContent();
         var msgtype = content.msgtype;
 
@@ -79,7 +77,7 @@ module.exports = React.createClass({
         // This shouldn't happen: the caller should check we support this type
         // before trying to instantiate us
         if (!EventTileType) {
-            return null;
+            throw new Error("Event type not supported");
         }
 
         var classes = classNames({

src/skins/vector/views/molecules/MemberInfo.js

@@ -17,6 +17,7 @@ limitations under the License.
 'use strict';
 
 var React = require('react');
+var Loader = require("../atoms/Spinner");
 
 var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
 var sdk = require('matrix-react-sdk')
@@ -37,7 +38,7 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        var interactButton, kickButton, banButton, muteButton, giveModButton;
+        var interactButton, kickButton, banButton, muteButton, giveModButton, spinner;
         if (this.props.member.userId === MatrixClientPeg.get().credentials.userId) {
             interactButton = <div className="mx_MemberInfo_field" onClick={this.onLeaveClick}>Leave room</div>;
         }
@@ -45,6 +46,10 @@ module.exports = React.createClass({
             interactButton = <div className="mx_MemberInfo_field" onClick={this.onChatClick}>Start chat</div>;
         }
 
+        if (this.state.creatingRoom) {
+            spinner = <Loader imgClassName="mx_ContextualMenu_spinner"/>;
+        }
+
         if (this.state.can.kick) {
             kickButton = <div className="mx_MemberInfo_field" onClick={this.onKick}>
                 Kick
@@ -88,6 +93,7 @@ module.exports = React.createClass({
                     {kickButton}
                     {banButton}
                     {giveModButton}
+                    {spinner}
                 </div>
             </div>
         );

src/skins/vector/views/molecules/MessageTile.js

@@ -17,12 +17,10 @@ limitations under the License.
 'use strict';
 
 var React = require('react');
-var classNames = require("classnames");
 
 var sdk = require('matrix-react-sdk')
 
 var MessageTileController = require('matrix-react-sdk/lib/controllers/molecules/MessageTile')
-var ContextualMenu = require('../../../../ContextualMenu');
 
 module.exports = React.createClass({
     displayName: 'MessageTile',

src/skins/vector/views/molecules/RoomHeader.js

@@ -39,7 +39,7 @@ module.exports = React.createClass({
     },
 
     onFullscreenClick: function() {
-        dis.dispatch({action: 'video_fullscreen'}, true);
+        dis.dispatch({action: 'video_fullscreen', fullscreen: true}, true);
     },
     
     render: function() {
@@ -60,7 +60,7 @@ module.exports = React.createClass({
 
             var call_buttons;
             if (this.state && this.state.call_state != 'ended') {
-                var muteVideoButton;
+                //var muteVideoButton;
                 var activeCall = (
                     CallHandler.getCallForRoom(this.props.room.roomId)
                 );

src/skins/vector/views/molecules/voip/IncomingCallBox.js

@@ -31,24 +31,28 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        if (!this.state.incomingCall || !this.state.incomingCall.roomId) {
+
-            return (
+        // NB: This block MUST have a "key" so React doesn't clobber the elements
-                <div>
+        // between in-call / not-in-call.
-                    <audio ref="ringAudio" loop>
+        var audioBlock = (
+            <audio ref="ringAudio" key="voip_ring_audio" loop>
                 <source src="media/ring.ogg" type="audio/ogg" />
                 <source src="media/ring.mp3" type="audio/mpeg" />
             </audio>
+        );
+
+        if (!this.state.incomingCall || !this.state.incomingCall.roomId) {
+            return (
+                <div>
+                    {audioBlock}
                 </div>
             );
         }
         var caller = MatrixClientPeg.get().getRoom(this.state.incomingCall.roomId).name;
         return (
             <div className="mx_IncomingCallBox">
+                {audioBlock}
                 <img className="mx_IncomingCallBox_chevron" src="img/chevron-left.png" width="9" height="16" />
-                <audio ref="ringAudio" loop>
-                    <source src="media/ring.ogg" type="audio/ogg" />
-                    <source src="media/ring.mp3" type="audio/mpeg" />
-                </audio>
                 <div className="mx_IncomingCallBox_title">
                     Incoming { this.state.incomingCall ? this.state.incomingCall.type : '' } call from { caller }
                 </div>

src/skins/vector/views/molecules/voip/VideoView.js

@@ -51,8 +51,26 @@ module.exports = React.createClass({
                     return;
                 }
                 var element = this.container.getDOMNode();
-                var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullscreen;
+                if (payload.fullscreen) {
+                    var requestMethod = (
+                        element.requestFullScreen ||
+                        element.webkitRequestFullScreen ||
+                        element.mozRequestFullScreen ||
+                        element.msRequestFullscreen
+                    );
                     requestMethod.call(element);
+                }
+                else {
+                    var exitMethod = (
+                        document.exitFullscreen ||
+                        document.mozCancelFullScreen ||
+                        document.webkitExitFullscreen ||
+                        document.msExitFullscreen
+                    );
+                    if (exitMethod) {
+                        exitMethod.call(document);
+                    }
+                }
                 break;
         }
     },