diff --git a/Makefile b/Makefile
index f68c81d86..7b1db6226 100644
--- a/Makefile
+++ b/Makefile
@@ -3,7 +3,7 @@ BROWSERIFY = ./node_modules/.bin/browserify
UGLIFYJS = ./node_modules/.bin/uglifyjs
EXORCIST = ./node_modules/.bin/exorcist
CLEANCSS = ./node_modules/.bin/cleancss
-CSS_FILES = font.css toastr.css main.css overlay.css videolayout_default.css font-awesome.css jquery-impromptu.css modaldialog.css notice.css popup_menu.css login_menu.css popover.css jitsi_popover.css contact_list.css chat.css welcome_page.css settingsmenu.css feedback.css jquery.contextMenu.css keyboard-shortcuts.css
+CSS_FILES = font.css toastr.css main.css overlay.css videolayout_default.css font-awesome.css jquery-impromptu.css modaldialog.css notice.css popup_menu.css recording.css login_menu.css popover.css jitsi_popover.css contact_list.css chat.css welcome_page.css settingsmenu.css feedback.css jquery.contextMenu.css keyboard-shortcuts.css
DEPLOY_DIR = libs
BROWSERIFY_FLAGS = -d
OUTPUT_DIR = .
diff --git a/css/recording.css b/css/recording.css
new file mode 100644
index 000000000..0f58bb789
--- /dev/null
+++ b/css/recording.css
@@ -0,0 +1,4 @@
+.recordingSpinner {
+ display: none;
+ vertical-align: text-bottom;
+}
\ No newline at end of file
diff --git a/images/spin.svg b/images/spin.svg
new file mode 100644
index 000000000..a4e857921
--- /dev/null
+++ b/images/spin.svg
@@ -0,0 +1,2 @@
+
+
\ No newline at end of file
diff --git a/index.html b/index.html
index e5f8e8a16..0be9df482 100644
--- a/index.html
+++ b/index.html
@@ -174,7 +174,10 @@
HD
-
+
+
+ 
+
diff --git a/modules/UI/recording/Recording.js b/modules/UI/recording/Recording.js
index ecdb58355..df59c7cf9 100644
--- a/modules/UI/recording/Recording.js
+++ b/modules/UI/recording/Recording.js
@@ -201,10 +201,11 @@ function _showStopRecordingPrompt (recordingType) {
*/
function moveToCorner(selector, move) {
let moveToCornerClass = "moveToCorner";
+ let containsClass = selector.hasClass(moveToCornerClass);
- if (move && !selector.hasClass(moveToCornerClass))
+ if (move && !containsClass)
selector.addClass(moveToCornerClass);
- else
+ else if (!move && containsClass)
selector.removeClass(moveToCornerClass);
}
@@ -220,11 +221,21 @@ var Status = {
AVAILABLE: "available",
UNAVAILABLE: "unavailable",
PENDING: "pending",
+ RETRYING: "retrying",
ERROR: "error",
FAILED: "failed",
BUSY: "busy"
};
+/**
+ * Checks whether if the given status is either PENDING or RETRYING
+ * @param status {Status} Jibri status to be checked
+ * @returns {boolean} true if the condition is met or false otherwise.
+ */
+function isStartingStatus(status) {
+ return status === Status.PENDING || status === Status.RETRYING;
+}
+
/**
* Manages the recording user interface and user experience.
* @type {{init, initRecordingButton, showRecordingButton, updateRecordingState,
@@ -298,6 +309,7 @@ var Recording = {
switch (self.currentState) {
case Status.ON:
+ case Status.RETRYING:
case Status.PENDING: {
_showStopRecordingPrompt(recordingType).then(() =>
self.eventEmitter.emit(UIEvents.RECORDING_TOGGLED),
@@ -399,7 +411,8 @@ var Recording = {
this.currentState = recordingState;
// TODO: handle recording state=available
- if (recordingState === Status.ON) {
+ if (recordingState === Status.ON ||
+ recordingState === Status.RETRYING) {
buttonSelector.removeClass(this.baseClass);
buttonSelector.addClass(this.baseClass + " active");
@@ -414,14 +427,14 @@ var Recording = {
// We don't want to do any changes if this is
// an availability change.
if (oldState !== Status.ON
- && oldState !== Status.PENDING)
+ && !isStartingStatus(oldState))
return;
buttonSelector.removeClass(this.baseClass + " active");
buttonSelector.addClass(this.baseClass);
let messageKey;
- if (oldState === Status.PENDING)
+ if (isStartingStatus(oldState))
messageKey = this.failedToStartKey;
else
messageKey = this.recordingOffKey;
@@ -453,6 +466,12 @@ var Recording = {
if (recordingState !== Status.AVAILABLE
&& !labelSelector.is(":visible"))
labelSelector.css({display: "inline-block"});
+
+ // Recording spinner
+ if (recordingState === Status.RETRYING)
+ $("#recordingSpinner").show();
+ else
+ $("#recordingSpinner").hide();
},
// checks whether recording is enabled and whether we have params
// to start automatically recording
@@ -471,11 +490,12 @@ var Recording = {
*/
_updateStatusLabel(textKey, isCentered) {
let labelSelector = $('#recordingLabel');
+ let labelTextSelector = $('#recordingLabelText');
moveToCorner(labelSelector, !isCentered);
- labelSelector.attr("data-i18n", textKey);
- labelSelector.text(APP.translation.translateString(textKey));
+ labelTextSelector.attr("data-i18n", textKey);
+ labelTextSelector.text(APP.translation.translateString(textKey));
}
};