Merge pull request #86 from matrix-org/kegan/guest-peek-then-join

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

src/component-index.js

@@ -66,6 +66,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() {
@@ -1236,6 +1249,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) {
@@ -1386,6 +1400,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>
+        );
+    }
+});