Display spinner for RETRYING recording status

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 = .

css/recording.css

@@ -0,0 +1,4 @@
+.recordingSpinner {
+    display: none;
+    vertical-align: text-bottom;
+}

images/spin.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width='20px' height='20px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-spin"><rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect><g transform="translate(50 50)"><g transform="rotate(0) translate(34 0)"><circle cx="0" cy="0" r="8" fill="#ffffff"><animate attributeName="opacity" from="1" to="0.1" begin="0s" dur="1s" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="scale" from="1.5" to="1" begin="0s" dur="1s" repeatCount="indefinite"></animateTransform></circle></g><g transform="rotate(45) translate(34 0)"><circle cx="0" cy="0" r="8" fill="#ffffff"><animate attributeName="opacity" from="1" to="0.1" begin="0.12s" dur="1s" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="scale" from="1.5" to="1" begin="0.12s" dur="1s" repeatCount="indefinite"></animateTransform></circle></g><g transform="rotate(90) translate(34 0)"><circle cx="0" cy="0" r="8" fill="#ffffff"><animate attributeName="opacity" from="1" to="0.1" begin="0.25s" dur="1s" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="scale" from="1.5" to="1" begin="0.25s" dur="1s" repeatCount="indefinite"></animateTransform></circle></g><g transform="rotate(135) translate(34 0)"><circle cx="0" cy="0" r="8" fill="#ffffff"><animate attributeName="opacity" from="1" to="0.1" begin="0.37s" dur="1s" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="scale" from="1.5" to="1" begin="0.37s" dur="1s" repeatCount="indefinite"></animateTransform></circle></g><g transform="rotate(180) translate(34 0)"><circle cx="0" cy="0" r="8" fill="#ffffff"><animate attributeName="opacity" from="1" to="0.1" begin="0.5s" dur="1s" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="scale" from="1.5" to="1" begin="0.5s" dur="1s" repeatCount="indefinite"></animateTransform></circle></g><g transform="rotate(225) translate(34 0)"><circle cx="0" cy="0" r="8" fill="#ffffff"><animate attributeName="opacity" from="1" to="0.1" begin="0.62s" dur="1s" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="scale" from="1.5" to="1" begin="0.62s" dur="1s" repeatCount="indefinite"></animateTransform></circle></g><g transform="rotate(270) translate(34 0)"><circle cx="0" cy="0" r="8" fill="#ffffff"><animate attributeName="opacity" from="1" to="0.1" begin="0.75s" dur="1s" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="scale" from="1.5" to="1" begin="0.75s" dur="1s" repeatCount="indefinite"></animateTransform></circle></g><g transform="rotate(315) translate(34 0)"><circle cx="0" cy="0" r="8" fill="#ffffff"><animate attributeName="opacity" from="1" to="0.1" begin="0.87s" dur="1s" repeatCount="indefinite"></animate><animateTransform attributeName="transform" type="scale" from="1.5" to="1" begin="0.87s" dur="1s" repeatCount="indefinite"></animateTransform></circle></g></g></svg>

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">

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));
     }
 };