updates #1094

Update the occupants list when occupants are added/removed from the
member lists.

.eslintrc.json

@@ -21,6 +21,7 @@
                 "map", "replace", "toLower", "split", "trim", "forEach", "toUpperCase", "includes"
             ]
         }],
+        "lodash/prefer-invoke-map": "off",
         "lodash/prefer-startswith": "off",
         "lodash/prefer-constant": "off",
         "lodash/prefer-noop": "off",

css/converse.css

@@ -7584,6 +7584,9 @@ body.reset {
 
 #conversejs.converse-fullscreen .chatbox-btn {
   font-size: 16px; }
+#conversejs.converse-fullscreen .chat-head .chatbox-buttons {
+  flex: 0 0 25%;
+  max-width: 25%; }
 
 @media screen and (max-width: 767px) {
   #conversejs:not(.converse-embedded) > .row {

css/inverse.css

@@ -7635,6 +7635,9 @@ body {
 
 #conversejs.converse-fullscreen .chatbox-btn {
   font-size: 16px; }
+#conversejs.converse-fullscreen .chat-head .chatbox-buttons {
+  flex: 0 0 25%;
+  max-width: 25%; }
 
 @media screen and (max-width: 767px) {
   #conversejs:not(.converse-embedded) > .row {

sass/_chatbox.scss

@@ -435,6 +435,11 @@
     .chatbox-btn {
         font-size: $fullpage-chatbox-button-size;
     }
+    .chat-head {
+        .chatbox-buttons {
+            @include make-col(3);
+        }
+    }
 }
 
 @media screen and (max-width: 767px) {

src/converse-muc-views.js

@@ -495,7 +495,7 @@
                     'click .close-chatbox-button': 'close',
                     'click .configure-chatroom-button': 'getAndRenderConfigurationForm',
                     'click .new-msgs-indicator': 'viewUnreadMessages',
-                    'click .occupant': 'onOccupantClicked',
+                    'click .occupant-nick': 'onOccupantClicked',
                     'click .send-button': 'onFormSubmitted',
                     'click .toggle-call': 'toggleCall',
                     'click .toggle-occupants': 'toggleOccupants',
@@ -759,8 +759,12 @@
                     return true;
                 },
 
-                onCommandError () {
+                onCommandError (err) {
-                    this.showErrorMessage(__("Error: could not execute the command"), true);
+                    _converse.log(err, Strophe.LogLevel.FATAL);
+                    this.showErrorMessage(
+                        __("Sorry, an error happened while running the command. Check your browser's developer console for details."),
+                        true
+                    );
                 },
 
                 parseMessageForCommands (text) {
@@ -780,14 +784,20 @@
                             this.model.setAffiliation('admin',
                                     [{ 'jid': args[0],
                                        'reason': args[1]
-                                    }]).then(null, this.onCommandError.bind(this));
+                                    }]).then(
+                                        () => this.model.occupants.fetchMembers(),
+                                        (err) => this.onCommandError(err)
+                                    );
                             break;
                         case 'ban':
                             if (!this.validateRoleChangeCommand(command, args)) { break; }
                             this.model.setAffiliation('outcast',
                                     [{ 'jid': args[0],
                                        'reason': args[1]
-                                    }]).then(null, this.onCommandError.bind(this));
+                                    }]).then(
+                                        () => this.model.occupants.fetchMembers(),
+                                        (err) => this.onCommandError(err)
+                                    );
                             break;
                         case 'deop':
                             if (!this.validateRoleChangeCommand(command, args)) { break; }
@@ -832,7 +842,10 @@
                             this.model.setAffiliation('member',
                                     [{ 'jid': args[0],
                                        'reason': args[1]
-                                    }]).then(null, this.onCommandError.bind(this));
+                                    }]).then(
+                                        () => this.model.occupants.fetchMembers(),
+                                        (err) => this.onCommandError(err)
+                                    );
                             break;
                         case 'nick':
                             _converse.connection.send($pres({
@@ -846,7 +859,10 @@
                             this.model.setAffiliation('owner',
                                     [{ 'jid': args[0],
                                        'reason': args[1]
-                                    }]).then(null, this.onCommandError.bind(this));
+                                    }]).then(
+                                        () => this.model.occupants.fetchMembers(),
+                                        (err) => this.onCommandError(err)
+                                    );
                             break;
                         case 'op':
                             if (!this.validateRoleChangeCommand(command, args)) { break; }
@@ -859,7 +875,10 @@
                             this.model.setAffiliation('none',
                                     [{ 'jid': args[0],
                                        'reason': args[1]
-                                    }]).then(null, this.onCommandError.bind(this));
+                                    }]).then(
+                                        () => this.model.occupants.fetchMembers(),
+                                        (err) => this.onCommandError(err)
+                                    );
                             break;
                         case 'topic':
                         case 'subject':

src/converse-muc.js

@@ -1020,8 +1020,22 @@
                 },
 
                 fetchMembers () {
+                    const old_jids = _.uniq(_.concat(
+                        _.map(this.where({'affiliation': 'admin'}), (item) => item.get('jid')),
+                        _.map(this.where({'affiliation': 'member'}), (item) => item.get('jid')),
+                        _.map(this.where({'affiliation': 'owner'}), (item) => item.get('jid'))
+                    ));
+
                     this.chatroom.getJidsWithAffiliations(['member', 'owner', 'admin'])
                     .then((jids) => {
+                        _.each(_.difference(old_jids, jids), (removed_jid) => {
+                            // Remove absent occupants who've been removed from
+                            // the members lists.
+                            const occupant = this.findOccupant({'jid': removed_jid});
+                            if (occupant.get('show') === 'offline') {
+                                occupant.destroy();
+                            }
+                        });
                         _.each(jids, (attrs) => {
                             const occupant = this.findOccupant({'jid': attrs.jid});
                             if (occupant) {