Add a RoomPreviewBar which asks if you'd like to join a peeked room

src/component-index.js

@@ -23,14 +23,14 @@ limitations under the License.
 
 module.exports.components = {};
 module.exports.components['structures.CreateRoom'] = require('./components/structures/CreateRoom');
+module.exports.components['structures.login.Login'] = require('./components/structures/login/Login');
+module.exports.components['structures.login.PostRegistration'] = require('./components/structures/login/PostRegistration');
+module.exports.components['structures.login.Registration'] = require('./components/structures/login/Registration');
 module.exports.components['structures.MatrixChat'] = require('./components/structures/MatrixChat');
 module.exports.components['structures.RoomView'] = require('./components/structures/RoomView');
 module.exports.components['structures.ScrollPanel'] = require('./components/structures/ScrollPanel');
 module.exports.components['structures.UploadBar'] = require('./components/structures/UploadBar');
 module.exports.components['structures.UserSettings'] = require('./components/structures/UserSettings');
-module.exports.components['structures.login.Login'] = require('./components/structures/login/Login');
-module.exports.components['structures.login.PostRegistration'] = require('./components/structures/login/PostRegistration');
-module.exports.components['structures.login.Registration'] = require('./components/structures/login/Registration');
 module.exports.components['views.avatars.MemberAvatar'] = require('./components/views/avatars/MemberAvatar');
 module.exports.components['views.avatars.RoomAvatar'] = require('./components/views/avatars/RoomAvatar');
 module.exports.components['views.create_room.CreateRoomButton'] = require('./components/views/create_room/CreateRoomButton');
@@ -51,10 +51,10 @@ module.exports.components['views.login.LoginHeader'] = require('./components/vie
 module.exports.components['views.login.PasswordLogin'] = require('./components/views/login/PasswordLogin');
 module.exports.components['views.login.RegistrationForm'] = require('./components/views/login/RegistrationForm');
 module.exports.components['views.login.ServerConfig'] = require('./components/views/login/ServerConfig');
+module.exports.components['views.messages.MessageEvent'] = require('./components/views/messages/MessageEvent');
 module.exports.components['views.messages.MFileBody'] = require('./components/views/messages/MFileBody');
 module.exports.components['views.messages.MImageBody'] = require('./components/views/messages/MImageBody');
 module.exports.components['views.messages.MVideoBody'] = require('./components/views/messages/MVideoBody');
-module.exports.components['views.messages.MessageEvent'] = require('./components/views/messages/MessageEvent');
 module.exports.components['views.messages.TextualBody'] = require('./components/views/messages/TextualBody');
 module.exports.components['views.messages.TextualEvent'] = require('./components/views/messages/TextualEvent');
 module.exports.components['views.messages.UnknownBody'] = require('./components/views/messages/UnknownBody');
@@ -65,6 +65,7 @@ module.exports.components['views.rooms.MemberTile'] = require('./components/view
 module.exports.components['views.rooms.MessageComposer'] = require('./components/views/rooms/MessageComposer');
 module.exports.components['views.rooms.RoomHeader'] = require('./components/views/rooms/RoomHeader');
 module.exports.components['views.rooms.RoomList'] = require('./components/views/rooms/RoomList');
+module.exports.components['views.rooms.RoomPreviewBar'] = require('./components/views/rooms/RoomPreviewBar');
 module.exports.components['views.rooms.RoomSettings'] = require('./components/views/rooms/RoomSettings');
 module.exports.components['views.rooms.RoomTile'] = require('./components/views/rooms/RoomTile');
 module.exports.components['views.rooms.SearchResultTile'] = require('./components/views/rooms/SearchResultTile');

src/components/structures/RoomView.js

@@ -74,6 +74,7 @@ module.exports = React.createClass({
             syncState: MatrixClientPeg.get().getSyncState(),
             hasUnsentMessages: this._hasUnsentMessages(room),
             callState: null,
+            guestsCanJoin: false
         }
     },
 
@@ -106,15 +107,27 @@ module.exports = React.createClass({
         // succeeds then great, show the preview (but we still may be able to /join!).
         if (!this.state.room) {
             console.log("Attempting to peek into room %s", this.props.roomId);
-            MatrixClientPeg.get().peekInRoom(this.props.roomId).done(function() {
+            MatrixClientPeg.get().peekInRoom(this.props.roomId).done(() => {
                 // we don't need to do anything - JS SDK will emit Room events
-                // which will update the UI.
+                // which will update the UI. We *do* however need to know if we
+                // can join the room so we can fiddle with the UI appropriately.
+                var peekedRoom = MatrixClientPeg.get().getRoom(this.props.roomId);
+                if (!peekedRoom) {
+                    return;
+                }
+                var guestAccessEvent = peekedRoom.currentState.getStateEvents("m.room.guest_access", "");
+                if (!guestAccessEvent) {
+                    return;
+                }
+                if (guestAccessEvent.getContent().guest_access === "can_join") {
+                    this.setState({
+                        guestsCanJoin: true
+                    });
+                }
             }, function(err) {
                 console.error("Failed to peek into room: %s", err);
             });
         }
-
-
     },
 
     componentWillUnmount: function() {
@@ -1132,6 +1145,7 @@ module.exports = React.createClass({
         var SearchBar = sdk.getComponent("rooms.SearchBar");
         var ScrollPanel = sdk.getComponent("structures.ScrollPanel");
         var TintableSvg = sdk.getComponent("elements.TintableSvg");
+        var RoomPreviewBar = sdk.getComponent("rooms.RoomPreviewBar");
 
         if (!this.state.room) {
             if (this.props.roomId) {
@@ -1282,6 +1296,12 @@ module.exports = React.createClass({
             else if (this.state.searching) {
                 aux = <SearchBar ref="search_bar" searchInProgress={this.state.searchInProgress } onCancelClick={this.onCancelSearchClick} onSearch={this.onSearch}/>;
             }
+            else if (this.state.guestsCanJoin && MatrixClientPeg.get().isGuest() &&
+                    (!myMember || myMember.membership !== "join")) {
+                aux = (
+                    <RoomPreviewBar onJoinClick={this.onJoinButtonClicked} canJoin={true} />
+                );
+            }
 
             var conferenceCallNotification = null;
             if (this.state.displayConfCallNotification) {

src/components/views/rooms/RoomPreviewBar.js

@@ -0,0 +1,56 @@
+/*
+Copyright 2015, 2016 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: 'RoomPreviewBar',
+
+    propTypes: {
+        onJoinClick: React.PropTypes.func,
+        canJoin: React.PropTypes.bool
+    },
+
+    getDefaultProps: function() {
+        return {
+            onJoinClick: function() {},
+            canJoin: false
+        };
+    },
+
+    render: function() {
+        var joinBlock;
+
+        if (this.props.canJoin) {
+            joinBlock = (
+                <div className="mx_RoomPreviewBar_join_text">
+                Would you like to <a onClick={this.props.onJoinClick}>join</a> this room?
+                </div>
+            );
+        }
+
+        return (
+            <div className="mx_RoomPreviewBar">
+                <div className="mx_RoomPreviewBar_preview_text">
+                This is a preview of this room. Room interactions have been disabled.
+                </div>
+                {joinBlock}
+            </div>
+        );
+    }
+});