From b3e02add3db86d26175a893332ab988c6cb6c7ad Mon Sep 17 00:00:00 2001 From: paweldomas Date: Fri, 8 Jul 2016 14:47:01 +0200 Subject: [PATCH 1/2] Fix moveToCorner method If the class was contained the old code was removing it --- modules/UI/recording/Recording.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/modules/UI/recording/Recording.js b/modules/UI/recording/Recording.js index ecdb583559..6cdb5ccdd6 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); } From 62dd54ab3138b9a817405fd5f86305b18b325089 Mon Sep 17 00:00:00 2001 From: paweldomas Date: Fri, 8 Jul 2016 14:50:09 +0200 Subject: [PATCH 2/2] Display spinner for RETRYING recording status --- Makefile | 2 +- css/recording.css | 4 ++++ images/spin.svg | 2 ++ index.html | 5 ++++- modules/UI/recording/Recording.js | 29 ++++++++++++++++++++++++----- 5 files changed, 35 insertions(+), 7 deletions(-) create mode 100644 css/recording.css create mode 100644 images/spin.svg diff --git a/Makefile b/Makefile index 393f727037..9a4f209e64 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 0000000000..0f58bb7894 --- /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 0000000000..a4e857921a --- /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 e5f8e8a163..0be9df482a 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 6cdb5ccdd6..df59c7cf9f 100644 --- 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)); } };