+ ",
skin: "black"});
+ // override popover show method to make sure we will update the content
+ // before showing the popover
+ var origShowFunc = this.popover.show;
+ this.popover.show = function () {
+ // update content by forcing it, to finish even if popover
+ // is not visible
+ this.updatePopoverData(true);
+ // call the original show, passing its actual this
+ origShowFunc.call(this.popover);
+ }.bind(this);
+
this.emptyIcon = this.connectionIndicatorContainer.appendChild(
createIcon(["connection", "connection_empty"]));
this.fullIcon = this.connectionIndicatorContainer.appendChild(
@@ -335,13 +346,18 @@ ConnectionIndicator.prototype.updateResolution = function (resolution) {
};
/**
- * Updates the content of the popover
+ * Updates the content of the popover if its visible
+ * @param force to work even if popover is not visible
*/
-ConnectionIndicator.prototype.updatePopoverData = function () {
- this.popover.updateContent(
- `
diff --git a/lang/main.json b/lang/main.json
index 963c6e553..0e5233b05 100644
--- a/lang/main.json
+++ b/lang/main.json
@@ -8,7 +8,7 @@
"participant": "Participant",
"me": "me",
"speaker": "Speaker",
- "defaultNickname": "ex. __name__",
+ "defaultNickname": "ex. Jane Pink",
"defaultLink": "e.g. __url__",
"welcomepage":{
"go": "GO",
@@ -65,7 +65,8 @@
"logout": "Logout",
"dialpad": "Show dialpad",
"sharedVideoMutedPopup": "Your shared video has been muted so${this.generateText()}
`
- );
- APP.translation.translateElement($(".connection_info"));
+ConnectionIndicator.prototype.updatePopoverData = function (force) {
+ // generate content, translate it and add it to document only if
+ // popover is visible or we force to do so.
+ if(this.popover.popoverShown || force) {
+ this.popover.updateContent(
+ `${this.generateText()}
`
+ );
+ APP.translation.translateElement($(".connection_info"));
+ }
};
/**
diff --git a/modules/UI/videolayout/RemoteVideo.js b/modules/UI/videolayout/RemoteVideo.js
index 7747ea822..32c3fd114 100644
--- a/modules/UI/videolayout/RemoteVideo.js
+++ b/modules/UI/videolayout/RemoteVideo.js
@@ -357,7 +357,9 @@ RemoteVideo.prototype.setDisplayName = function(displayName, key) {
// If we already have a display name for this video.
if (nameSpan.length > 0) {
if (displayName && displayName.length > 0) {
- $('#' + this.videoSpanId + '_name').text(displayName);
+ var displaynameSpan = $('#' + this.videoSpanId + '_name');
+ if (displaynameSpan.text() !== displayName)
+ displaynameSpan.text(displayName);
}
else if (key && key.length > 0) {
var nameHtml = APP.translation.generateTranslationHTML(key);
diff --git a/modules/UI/videolayout/SmallVideo.js b/modules/UI/videolayout/SmallVideo.js
index f40d2e9be..d3acdaa35 100644
--- a/modules/UI/videolayout/SmallVideo.js
+++ b/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;
@@ -141,9 +159,10 @@ SmallVideo.createStreamElement = function (stream) {
element.id = SmallVideo.getStreamElementID(stream);
element.onplay = function () {
- var now = APP.performanceTimes["video.render"]
+ var type = (isVideo ? 'video' : 'audio');
+ var now = APP.connectionTimes[type + ".render"]
= window.performance.now();
- console.log("(TIME) Render " + (isVideo ? 'video' : 'audio') + ":\t",
+ console.log("(TIME) Render " + type + ":\t",
now);
};
diff --git a/modules/UI/videolayout/VideoLayout.js b/modules/UI/videolayout/VideoLayout.js
index 772e05f37..7c94da9db 100644
--- a/modules/UI/videolayout/VideoLayout.js
+++ b/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.
diff --git a/modules/recorder/Recorder.js b/modules/recorder/Recorder.js
new file mode 100644
index 000000000..ca156f264
--- /dev/null
+++ b/modules/recorder/Recorder.js
@@ -0,0 +1,95 @@
+/* global config, APP */
+/*
+ * Copyright @ 2015 Atlassian Pty 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.
+ */
+import VideoLayout from '../UI/videolayout/VideoLayout';
+import Feedback from '../UI/Feedback.js';
+import Toolbar from '../UI/toolbars/Toolbar';
+import BottomToolbar from '../UI/toolbars/BottomToolbar';
+
+const _RECORDER_CUSTOM_ROLE = "recorder-role";
+
+class Recorder {
+ /**
+ * Initializes a new {Recorder} instance.
+ *
+ * @param conference the {conference} which is to transport
+ * {Recorder}-related information between participants
+ */
+ constructor (conference) {
+ this._conference = conference;
+
+ // If I am a recorder then I publish my recorder custom role to notify
+ // everyone.
+ if (config.iAmRecorder) {
+ VideoLayout.enableDeviceAvailabilityIcons(conference.localId, true);
+ this._publishMyRecorderRole();
+ Feedback.enableFeedback(false);
+ Toolbar.enable(false);
+ BottomToolbar.enable(false);
+ }
+
+ // Listen to "CUSTOM_ROLE" commands.
+ this._conference.commands.addCommandListener(
+ this._conference.commands.defaults.CUSTOM_ROLE,
+ this._onCustomRoleCommand.bind(this));
+ }
+
+ /**
+ * Publish the recorder custom role.
+ * @private
+ */
+ _publishMyRecorderRole () {
+ var conference = this._conference;
+
+ var commands = conference.commands;
+
+ commands.removeCommand(commands.defaults.CUSTOM_ROLE);
+ var self = this;
+ commands.sendCommandOnce(
+ commands.defaults.CUSTOM_ROLE,
+ {
+ attributes: {
+ recorderRole: true
+ }
+ });
+ }
+
+ /**
+ * Notifies this instance about a &qout;Custom Role&qout; command (delivered
+ * by the Command(s) API of {this._conference}).
+ *
+ * @param attributes the attributes {Object} carried by the command
+ * @param id the identifier of the participant who issued the command. A
+ * notable idiosyncrasy of the Command(s) API to be mindful of here is that
+ * the command may be issued by the local participant.
+ */
+ _onCustomRoleCommand ({ attributes }, id) {
+ // We require to know who issued the command because (1) only a
+ // moderator is allowed to send commands and (2) a command MUST be
+ // issued by a defined commander.
+ if (typeof id === 'undefined'
+ || this._conference.isLocalId(id)
+ || !attributes.recorderRole)
+ return;
+
+ var isRecorder = (attributes.recorderRole == 'true');
+
+ if (isRecorder)
+ VideoLayout.enableDeviceAvailabilityIcons(id, isRecorder);
+ }
+}
+
+export default Recorder;