Display spinner for RETRYING recording status

mbell8903 · Jul 8, 2016 · 62dd54a · 62dd54a
1 parent b3e02ad
commit 62dd54a
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 7 deletions.
diff --git 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
@@ -0,0 +1,4 @@
+.recordingSpinner {
+    display: none;
+    vertical-align: text-bottom;
+}
diff --git a/images/spin.svg b/images/spin.svg
diff --git a/index.html b/index.html
@@ -174,7 +174,10 @@
                 </div>
                 <span id="videoConnectionMessage"></span>
                 <span id="videoResolutionLabel">HD</span>
-                <span id="recordingLabel" class="centeredVideoLabel"></span>
+                <span id="recordingLabel" class="centeredVideoLabel">
+                    <span id="recordingLabelText"></span>
+                    <img id="recordingSpinner" class="recordingSpinner" src="images/spin.svg"></img>
+                </span>
             </div>
 
             <div id="remoteVideos">

diff --git a/modules/UI/recording/Recording.js b/modules/UI/recording/Recording.js
@@ -221,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,
@@ -299,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),
@@ -400,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");
@@ -415,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;
@@ -454,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
@@ -472,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));
     }
 };