fix merge conflicts

src/component-index.js

@@ -67,6 +67,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

@@ -76,8 +76,9 @@ module.exports = React.createClass({
             syncState: MatrixClientPeg.get().getSyncState(),
             hasUnsentMessages: this._hasUnsentMessages(room),
             callState: null,
+            guestsCanJoin: false,
             readMarkerEventId: room.getEventReadUpTo(MatrixClientPeg.get().credentials.userId),
-            readMarkerGhostEventId: undefined,
+            readMarkerGhostEventId: undefined
         }
     },
 
@@ -111,15 +112,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() {
@@ -826,7 +839,7 @@ module.exports = React.createClass({
         // is the last element or not, because we only decide as we're going along.
         if (readMarkerIndex === undefined && ghostIndex && ghostIndex <= ret.length) {
             var hr;
-            hr = (<hr className="mx_RoomView_myReadMarker" style={{opacity: 1, width: '85%'}} ref={function(n) {
+            hr = (<hr className="mx_RoomView_myReadMarker" style={{opacity: 1, width: '99%'}} ref={function(n) {
                 Velocity(n, {opacity: '0', width: '10%'}, {duration: 400, easing: 'easeInSine', delay: 1000, complete: function() {
                     self.setState({readMarkerGhostEventId: undefined});
                 }});
@@ -921,7 +934,6 @@ module.exports = React.createClass({
             })
         );
 
-
         if (deferreds.length) {
             var self = this;
             q.all(deferreds).fail(function(err) {
@@ -1249,6 +1261,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) {
@@ -1399,6 +1412,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>
+        );
+    }
+});

src/components/views/rooms/RoomSettings.js

@@ -381,7 +381,7 @@ module.exports = React.createClass({
                     <input type="checkbox" ref="guests_join" defaultChecked={guest_access === "can_join"}/>
                     Allow guests to join this room
                 </label> <br/>
-                <label className="mx_RoomSettings_encrypt"><input type="checkbox" /> Encrypt room</label> <br/>
+                <label className="mx_RoomSettings_encrypt"><input type="checkbox" /> Encrypt room</label>
 
                 { room_colors_section }