Display spinner for RETRYING recording status

pull/719/head
paweldomas 9 years ago
parent b3e02add3d
commit 62dd54ab31
  1. 2
      Makefile
  2. 4
      css/recording.css
  3. 2
      images/spin.svg
  4. 5
      index.html
  5. 29
      modules/UI/recording/Recording.js

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

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

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

After

Width:  |  Height:  |  Size: 3.0 KiB

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

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

Loading…
Cancel
Save