Add custom-role to presence and special view for Recorders

conference.js

@@ -21,16 +21,6 @@ const TrackErrors = JitsiMeetJS.errors.track;
 
 let room, connection, localAudio, localVideo, roomLocker;
 
-/**
- * Known custom conference commands.
- */
-const Commands = {
-    CONNECTION_QUALITY: "stats",
-    EMAIL: "email",
-    ETHERPAD: "etherpad",
-    SHARED_VIDEO: "shared-video"
-};
-
 import {VIDEO_CONTAINER_TYPE} from "./modules/UI/videolayout/LargeVideo";
 
 /**
@@ -52,10 +42,11 @@ function connect(roomName) {
 
 /**
  * Share email with other users.
+ * @param emailCommand the email command
  * @param {string} email new email
  */
-function sendEmail (email) {
+function sendEmail (emailCommand, email) {
-    room.sendCommand(Commands.EMAIL, {
+    room.sendCommand(emailCommand, {
         value: email,
         attributes: {
             id: room.myUserId()
@@ -494,6 +485,61 @@ export default {
     getLogs () {
         return room.getLogs();
     },
+
+    /**
+     * Exposes a Command(s) API on this instance. It is necessitated by (1) the
+     * desire to keep room private to this instance and (2) the need of other
+     * modules to send and receive commands to and from participants.
+     * Eventually, this instance remains in control with respect to the
+     * decision whether the Command(s) API of room (i.e. lib-jitsi-meet's
+     * JitsiConference) is to be used in the implementation of the Command(s)
+     * API of this instance.
+     */
+    commands: {
+        /**
+         * Known custom conference commands.
+         */
+        defaults: {
+            CONNECTION_QUALITY: "stats",
+            EMAIL: "email",
+            ETHERPAD: "etherpad",
+            SHARED_VIDEO: "shared-video",
+            CUSTOM_ROLE: "custom-role"
+        },
+        /**
+         * Receives notifications from other participants about commands aka
+         * custom events (sent by sendCommand or sendCommandOnce methods).
+         * @param command {String} the name of the command
+         * @param handler {Function} handler for the command
+         */
+            addCommandListener () {
+            room.addCommandListener.apply(room, arguments);
+        },
+        /**
+         * Removes command.
+         * @param name {String} the name of the command.
+         */
+            removeCommand () {
+            room.removeCommand.apply(room, arguments);
+        },
+        /**
+         * Sends command.
+         * @param name {String} the name of the command.
+         * @param values {Object} with keys and values that will be sent.
+         */
+            sendCommand () {
+            room.sendCommand.apply(room, arguments);
+        },
+        /**
+         * Sends command one time.
+         * @param name {String} the name of the command.
+         * @param values {Object} with keys and values that will be sent.
+         */
+            sendCommandOnce () {
+            room.sendCommandOnce.apply(room, arguments);
+        }
+    },
+
     _createRoom (localTracks) {
         room = connection.initJitsiConference(APP.conference.roomName,
             this._getConferenceOptions());
@@ -509,7 +555,7 @@ export default {
         this._room = room; // FIXME do not use this
 
         let email = APP.settings.getEmail();
-        email && sendEmail(email);
+        email && sendEmail(this.commands.defaults.EMAIL, email);
 
         let nick = APP.settings.getDisplayName();
         if (config.useNicks && !nick) {
@@ -521,50 +567,6 @@ export default {
         this._setupListeners();
     },
 
-    /**
-     * Exposes a Command(s) API on this instance. It is necessitated by (1) the
-     * desire to keep room private to this instance and (2) the need of other
-     * modules to send and receive commands to and from participants.
-     * Eventually, this instance remains in control with respect to the
-     * decision whether the Command(s) API of room (i.e. lib-jitsi-meet's
-     * JitsiConference) is to be used in the implementation of the Command(s)
-     * API of this instance.
-     */
-    commands: {
-        /**
-         * Receives notifications from other participants about commands aka
-         * custom events (sent by sendCommand or sendCommandOnce methods).
-         * @param command {String} the name of the command
-         * @param handler {Function} handler for the command
-         */
-        addCommandListener () {
-            room.addCommandListener.apply(room, arguments);
-        },
-        /**
-         * Removes command.
-         * @param name {String} the name of the command.
-         */
-        removeCommand () {
-            room.removeCommand.apply(room, arguments);
-        },
-        /**
-         * Sends command.
-         * @param name {String} the name of the command.
-         * @param values {Object} with keys and values that will be sent.
-         */
-        sendCommand () {
-            room.sendCommand.apply(room, arguments);
-        },
-        /**
-         * Sends command one time.
-         * @param name {String} the name of the command.
-         * @param values {Object} with keys and values that will be sent.
-         */
-        sendCommandOnce () {
-            room.sendCommandOnce.apply(room, arguments);
-        },
-    },
-
     _getConferenceOptions() {
         let options = config;
         if(config.enableRecording && !config.recordingType) {
@@ -721,6 +723,8 @@ export default {
      * Setup interaction between conference and UI.
      */
     _setupListeners () {
+        var self = this;
+
         // add local streams when joined to the conference
         room.on(ConferenceEvents.CONFERENCE_JOINED, () => {
             APP.UI.mucJoined();
@@ -903,7 +907,8 @@ export default {
                 APP.UI.updateLocalStats(percent, stats);
 
                 // send local stats to other users
-                room.sendCommandOnce(Commands.CONNECTION_QUALITY, {
+                room.sendCommandOnce(self.commands.defaults.CONNECTION_QUALITY,
+                {
                     children: ConnectionQuality.convertToMUCStats(stats),
                     attributes: {
                         xmlns: 'http://jitsi.org/jitmeet/stats'
@@ -913,8 +918,9 @@ export default {
         );
 
         // listen to remote stats
-        room.addCommandListener(Commands.CONNECTION_QUALITY,(values, from) => {
+        room.addCommandListener(self.commands.defaults.CONNECTION_QUALITY,
-            ConnectionQuality.updateRemoteStats(from, values);
+            (values, from) => {
+                ConnectionQuality.updateRemoteStats(from, values);
         });
 
         ConnectionQuality.addListener(CQEvents.REMOTESTATS_UPDATED,
@@ -922,7 +928,7 @@ export default {
                 APP.UI.updateRemoteStats(id, percent, stats);
             });
 
-        room.addCommandListener(Commands.ETHERPAD, ({value}) => {
+        room.addCommandListener(self.commands.defaults.ETHERPAD, ({value}) => {
             APP.UI.initEtherpad(value);
         });
 
@@ -935,9 +941,9 @@ export default {
 
             APP.settings.setEmail(email);
             APP.UI.setUserAvatar(room.myUserId(), email);
-            sendEmail(email);
+            sendEmail(self.commands.defaults.EMAIL, email);
         });
-        room.addCommandListener(Commands.EMAIL, (data) => {
+        room.addCommandListener(self.commands.defaults.EMAIL, (data) => {
             APP.UI.setUserAvatar(data.attributes.id, data.value);
         });
 
@@ -1082,8 +1088,8 @@ export default {
             // send start and stop commands once, and remove any updates
             // that had left
             if (state === 'stop' || state === 'start' || state === 'playing') {
-                room.removeCommand(Commands.SHARED_VIDEO);
+                room.removeCommand(self.commands.defaults.SHARED_VIDEO);
-                room.sendCommandOnce(Commands.SHARED_VIDEO, {
+                room.sendCommandOnce(self.commands.defaults.SHARED_VIDEO, {
                     value: url,
                     attributes: {
                         state: state,
@@ -1095,8 +1101,8 @@ export default {
             else {
                 // in case of paused, in order to allow late users to join
                 // paused
-                room.removeCommand(Commands.SHARED_VIDEO);
+                room.removeCommand(self.commands.defaults.SHARED_VIDEO);
-                room.sendCommand(Commands.SHARED_VIDEO, {
+                room.sendCommand(self.commands.defaults.SHARED_VIDEO, {
                     value: url,
                     attributes: {
                         state: state,
@@ -1107,7 +1113,7 @@ export default {
             }
         });
         room.addCommandListener(
-            Commands.SHARED_VIDEO, ({value, attributes}, id) => {
+            self.commands.defaults.SHARED_VIDEO, ({value, attributes}, id) => {
 
                 if (attributes.state === 'stop') {
                     APP.UI.stopSharedVideo(id, attributes);

modules/UI/Feedback.js

@@ -69,6 +69,21 @@ function _toggleFeedbackIcon() {
     $('#feedbackButtonDiv').toggleClass("hidden");
 }
 
+/**
+ * Shows / hides the feedback button.
+ * @param {show} set to {true} to show the feedback button or to  {false}
+ * to hide it
+ * @private
+ */
+function _showFeedbackButton (show) {
+    var feedbackButton = $("#feedbackButtonDiv");
+
+    if (show)
+        feedbackButton.css("display", "block");
+    else
+        feedbackButton.css("display", "none");
+}
+
 /**
  * Defines all methods in connection to the Feedback window.
  *
@@ -85,11 +100,15 @@ var Feedback = {
      * @param emitter the EventEmitter to associate with the Feedback.
      */
     init: function (emitter) {
+        // Initialise to enabled.
+        this.enabled = true;
+
         // CallStats is the way we send feedback, so we don't have to initialise
         // if callstats isn't enabled.
         if (!APP.conference.isCallstatsEnabled())
             return;
-        $("#feedbackButtonDiv").css("display", "block");
+
+        _showFeedbackButton(true);
         $("#feedbackButton").click(function (event) {
             Feedback.openFeedbackWindow();
         });
@@ -100,13 +119,22 @@ var Feedback = {
             _toggleFeedbackIcon();
         });
     },
+    /**
+     * Enables/ disabled the feedback feature.
+     */
+    enableFeedback: function (enable) {
+        if (this.enabled !== enable)
+            _showFeedbackButton(enable);
+        this.enabled = enable;
+    },
+
     /**
      * Indicates if the feedback functionality is enabled.
      *
      * @return true if the feedback functionality is enabled, false otherwise.
      */
     isEnabled: function() {
-        return APP.conference.isCallstatsEnabled();
+        return this.enabled && APP.conference.isCallstatsEnabled();
     },
     /**
      * Opens the feedback window.

modules/UI/UI.js

@@ -29,6 +29,8 @@ var JitsiPopover = require("./util/JitsiPopover");
 var Feedback = require("./Feedback");
 
 import FollowMe from "../FollowMe";
+import Recorder from "../recorder/Recorder";
+
 
 var eventEmitter = new EventEmitter();
 UI.eventEmitter = eventEmitter;
@@ -42,7 +44,8 @@ let followMeHandler;
  * Prompt user for nickname.
  */
 function promptDisplayName() {
-    let nickRequiredMsg = APP.translation.translateString("dialog.displayNameRequired");
+    let nickRequiredMsg
+        = APP.translation.translateString("dialog.displayNameRequired");
     let defaultNickMsg = APP.translation.translateString(
         "defaultNickname", {name: "Jane Pink"}
     );
@@ -110,8 +113,8 @@ function setupToolbars() {
  * @see https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
  */
 function toggleFullScreen () {
-    let isNotFullScreen = !document.fullscreenElement &&    // alternative standard method
+                            // alternative standard method
-
+    let isNotFullScreen = !document.fullscreenElement &&
             !document.mozFullScreenElement && // current working methods
         !document.webkitFullscreenElement &&
         !document.msFullscreenElement;
@@ -124,7 +127,8 @@ function toggleFullScreen () {
         } else if (document.documentElement.mozRequestFullScreen) {
             document.documentElement.mozRequestFullScreen();
         } else if (document.documentElement.webkitRequestFullscreen) {
-            document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
+            document.documentElement
+                .webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
         }
     } else {
         if (document.exitFullscreen) {
@@ -238,6 +242,11 @@ UI.initConference = function () {
     //if local role changes buttons state will be again updated
     UI.updateLocalRole(false);
 
+    // Initialise the recorder handler. We're doing this explicitly before
+    // calling showToolbar, because the recorder may want to disable all
+    // toolbars.
+    new Recorder(APP.conference, UI);
+
     // Once we've joined the muc show the toolbar
     ToolbarToggler.showToolbar();
 

modules/UI/toolbars/BottomToolbar.js

@@ -12,8 +12,27 @@ const defaultBottomToolbarButtons = {
 const BottomToolbar = {
     init () {
         this.toolbar = $('#bottomToolbar');
-    },
 
+        // The bottom toolbar is enabled by default.
+        this.enabled = true;
+    },
+    /**
+     * Enables / disables the bottom toolbar.
+     * @param {e} set to {true} to enable the bottom toolbar or {false}
+     * to disable it
+     */
+    enable (e) {
+        this.enabled = e;
+        if (!e && this.isVisible())
+            this.hide(false);
+    },
+    /**
+     * Indicates if the bottom toolbar is currently enabled.
+     * @return {this.enabled}
+     */
+    isEnabled() {
+        return this.enabled;
+    },
     setupListeners (emitter) {
         UIUtil.hideDisabledButtons(defaultBottomToolbarButtons);
 

modules/UI/toolbars/Toolbar.js

@@ -171,6 +171,9 @@ function showSipNumberInput () {
 const Toolbar = {
     init (eventEmitter) {
         emitter = eventEmitter;
+        // The toolbar is enabled by default.
+        this.enabled = true;
+        this.toolbarSelector = $("#header");
 
         UIUtil.hideDisabledButtons(defaultToolbarButtons);
 
@@ -178,14 +181,31 @@ const Toolbar = {
             buttonId => $(`#${buttonId}`).click(buttonHandlers[buttonId])
         );
     },
-
+    /**
+     * Enables / disables the toolbar.
+     * @param {e} set to {true} to enable the toolbar or {false}
+     * to disable it
+     */
+    enable (e) {
+        this.enabled = e;
+        if (!e && this.isVisible())
+            this.hide(false);
+    },
+    /**
+     * Indicates if the bottom toolbar is currently enabled.
+     * @return {this.enabled}
+     */
+    isEnabled() {
+        return this.enabled;
+    },
     /**
      * Updates the room invite url.
      */
     updateRoomUrl (newRoomUrl) {
         roomUrl = newRoomUrl;
 
-        // If the invite dialog has been already opened we update the information.
+        // If the invite dialog has been already opened we update the
+        // information.
         let inviteLink = document.getElementById('inviteLinkRef');
         if (inviteLink) {
             inviteLink.value = roomUrl;
@@ -244,14 +264,16 @@ const Toolbar = {
     // checks whether desktop sharing is enabled and whether
     // we have params to start automatically sharing
     checkAutoEnableDesktopSharing () {
-        if (UIUtil.isButtonEnabled('desktop') && config.autoEnableDesktopSharing) {
+        if (UIUtil.isButtonEnabled('desktop')
+            && config.autoEnableDesktopSharing) {
             emitter.emit(UIEvents.TOGGLE_SCREENSHARING);
         }
     },
 
     // Shows or hides SIP calls button
     showSipCallButton (show) {
-        if (APP.conference.sipGatewayEnabled() && UIUtil.isButtonEnabled('sip') && show) {
+        if (APP.conference.sipGatewayEnabled()
+            && UIUtil.isButtonEnabled('sip') && show) {
             $('#toolbar_button_sip').css({display: "inline-block"});
         } else {
             $('#toolbar_button_sip').css({display: "none"});
@@ -331,7 +353,51 @@ const Toolbar = {
      * @param {boolean} muted if icon should look like muted or not
      */
     markAudioIconAsMuted (muted) {
-        $('#toolbar_button_mute').toggleClass("icon-microphone", !muted).toggleClass("icon-mic-disabled", muted);
+        $('#toolbar_button_mute').toggleClass("icon-microphone",
+            !muted).toggleClass("icon-mic-disabled", muted);
+    },
+
+    /**
+     * Indicates if the toolbar is currently hovered.
+     * @return {true} if the toolbar is currently hovered, {false} otherwise
+     */
+    isHovered() {
+        this.toolbarSelector.find('*').each(function () {
+            let id = $(this).attr('id');
+            if ($(`#${id}:hover`).length > 0) {
+                return true;
+            }
+        });
+        if ($("#bottomToolbar:hover").length > 0) {
+            return true;
+        }
+        return false;
+    },
+
+    /**
+     * Returns true if this toolbar is currently visible, or false otherwise.
+     * @return <tt>true</tt> if currently visible, <tt>false</tt> - otherwise
+     */
+    isVisible() {
+        return this.toolbarSelector.is(":visible");
+    },
+
+    /**
+     * Hides the toolbar with animation or not depending on the animate
+     * parameter.
+     */
+    hide() {
+        this.toolbarSelector.hide(
+            "slide", { direction: "up", duration: 300});
+    },
+
+    /**
+     * Shows the toolbar with animation or not depending on the animate
+     * parameter.
+     */
+    show() {
+        this.toolbarSelector.show(
+            "slide", { direction: "up", duration: 300});
     }
 };
 

modules/UI/toolbars/ToolbarToggler.js

@@ -2,6 +2,7 @@
 
 import UIUtil from '../util/UIUtil';
 import BottomToolbar from './BottomToolbar';
+import Toolbar from './Toolbar';
 import FilmStrip from '../videolayout/FilmStrip.js';
 
 let toolbarTimeoutObject;
@@ -16,10 +17,6 @@ function showDesktopSharingButton() {
     }
 }
 
-function isToolbarVisible () {
-    return $('#header').is(':visible');
-}
-
 /**
  * Hides the toolbar.
  */
@@ -28,25 +25,13 @@ function hideToolbar() {
         return;
     }
 
-    let header = $("#header");
-    let isToolbarHover = false;
-    header.find('*').each(function () {
-        let id = $(this).attr('id');
-        if ($(`#${id}:hover`).length > 0) {
-            isToolbarHover = true;
-        }
-    });
-    if ($("#bottomToolbar:hover").length > 0) {
-        isToolbarHover = true;
-    }
-
     clearTimeout(toolbarTimeoutObject);
     toolbarTimeoutObject = null;
 
-    if (isToolbarHover) {
+    if (Toolbar.isHovered()) {
         toolbarTimeoutObject = setTimeout(hideToolbar, toolbarTimeout);
     } else {
-        header.hide("slide", { direction: "up", duration: 300});
+        Toolbar.hide();
         $('#subject').animate({top: "-=40"}, 300);
         if (!FilmStrip.isFilmStripVisible()) {
             BottomToolbar.hide(true);
@@ -59,18 +44,23 @@ const ToolbarToggler = {
      * Shows the main toolbar.
      */
     showToolbar () {
-        // if we are a recorder we do not want to show the toolbar
+        if (interfaceConfig.filmStripOnly) {
-        if (interfaceConfig.filmStripOnly || config.iAmRecorder) {
             return;
         }
-        let header = $("#header");
-        if (!header.is(':visible') || !BottomToolbar.isVisible()) {
-            header.show("slide", { direction: "up", duration: 300});
-            $('#subject').animate({top: "+=40"}, 300);
-            if (!BottomToolbar.isVisible()) {
-                BottomToolbar.show(true);
-            }
 
+        var updateTimeout = false;
+        if (Toolbar.isEnabled() && !Toolbar.isVisible()) {
+            Toolbar.show();
+            $('#subject').animate({top: "+=40"}, 300);
+            updateTimeout = true;
+        }
+
+        if (BottomToolbar.isEnabled() && !BottomToolbar.isVisible()) {
+            BottomToolbar.show(true);
+            updateTimeout = true;
+        }
+
+        if (updateTimeout) {
             if (toolbarTimeoutObject) {
                 clearTimeout(toolbarTimeoutObject);
                 toolbarTimeoutObject = null;
@@ -89,13 +79,13 @@ const ToolbarToggler = {
      * @param isDock indicates what operation to perform
      */
     dockToolbar (isDock) {
-        if (interfaceConfig.filmStripOnly) {
+        if (interfaceConfig.filmStripOnly || !Toolbar.isEnabled()) {
             return;
         }
 
         if (isDock) {
             // First make sure the toolbar is shown.
-            if (!isToolbarVisible()) {
+            if (!Toolbar.isVisible()) {
                 this.showToolbar();
             }
 
@@ -103,7 +93,7 @@ const ToolbarToggler = {
             clearTimeout(toolbarTimeoutObject);
             toolbarTimeoutObject = null;
         } else {
-            if (isToolbarVisible()) {
+            if (Toolbar.isVisible()) {
                 toolbarTimeoutObject = setTimeout(hideToolbar, toolbarTimeout);
             } else {
                 this.showToolbar();

modules/UI/videolayout/SmallVideo.js

@@ -50,7 +50,25 @@ SmallVideo.prototype.showDisplayName = function(isShow) {
     }
 };
 
+/**
+ * Enables / disables the device availability icons for this small video.
+ * @param {enable} set to {true} to enable and {false} to disable
+ */
+SmallVideo.prototype.enableDeviceAvailabilityIcons = function (enable) {
+    if (typeof enable === "undefined")
+        return;
+
+    this.deviceAvailabilityIconsEnabled = enable;
+};
+
+/**
+ * Sets the device "non" availability icons.
+ * @param devices the devices, which will be checked for availability
+ */
 SmallVideo.prototype.setDeviceAvailabilityIcons = function (devices) {
+    if (!this.deviceAvailabilityIconsEnabled)
+        return;
+
     if(!this.container)
         return;
 

modules/UI/videolayout/VideoLayout.js

@@ -196,6 +196,25 @@ var VideoLayout = {
         video.setDeviceAvailabilityIcons(devices);
     },
 
+    /**
+     * Enables/disables device availability icons for the given participant id.
+     * The default value is {true}.
+     * @param id the identifier of the participant
+     * @param enable {true} to enable device availability icons
+     */
+    enableDeviceAvailabilityIcons (id, enable) {
+        let video;
+        if (APP.conference.isLocalId(id)) {
+            video = localVideoThumbnail;
+        }
+        else if (remoteVideos[id]) {
+            video = remoteVideos[id];
+        }
+
+        if (video)
+            video.enableDeviceAvailabilityIcons(enable);
+    },
+
     /**
      * Checks if removed video is currently displayed and tries to display
      * another one instead.