From 39c350cdba0a404e7f4042cb96b4cc8b30f36949 Mon Sep 17 00:00:00 2001 From: yanas Date: Tue, 29 Mar 2016 16:07:01 -0500 Subject: [PATCH 1/2] Fixes streaming tooltip. Checks if the stream id is not provided and requests the user before starting the recorder. --- css/videolayout_default.css | 2 +- index.html | 2 +- lang/main.json | 8 +- modules/UI/recording/Recording.js | 119 ++++++++++++++++++++++-------- 4 files changed, 97 insertions(+), 34 deletions(-) diff --git a/css/videolayout_default.css b/css/videolayout_default.css index ed00174e4..1c86854ee 100644 --- a/css/videolayout_default.css +++ b/css/videolayout_default.css @@ -513,7 +513,7 @@ .moveToCorner { top: 5px; - right: 5px; + right: 50px; /*leave free space for the HD label*/ margin-right: 0px; margin-left: auto; background: rgba(0,0,0,.3); diff --git a/index.html b/index.html index 1e2608db7..aec04ade9 100644 --- a/index.html +++ b/index.html @@ -116,7 +116,7 @@ - + diff --git a/lang/main.json b/lang/main.json index 99de636ae..6269e2f26 100644 --- a/lang/main.json +++ b/lang/main.json @@ -51,7 +51,6 @@ "mute": "Mute / Unmute", "videomute": "Start / stop camera", "authenticate": "Authenticate", - "record": "Toggle recording", "lock": "Lock / unlock room", "invite": "Invite others", "chat": "Open / close chat", @@ -264,7 +263,8 @@ "pending": "Recording waiting for a participant to join...", "on": "Recording", "off": "Recording stopped", - "failedToStart": "Recording failed to start" + "failedToStart": "Recording failed to start", + "buttonTooltip": "Start / stop recording" }, "liveStreaming": { @@ -272,6 +272,8 @@ "on": "Live Streaming", "off": "Live Streaming Stopped", "unavailable": "The live streaming service is currently unavailable. Please try again later.", - "failedToStart": "Live streaming failed to start" + "failedToStart": "Live streaming failed to start", + "buttonTooltip": "Start / stop live stream", + "streamIdRequired": "Please fill in the stream id in order to launch the live streaming." } } diff --git a/modules/UI/recording/Recording.js b/modules/UI/recording/Recording.js index 3c55d749d..77603e326 100644 --- a/modules/UI/recording/Recording.js +++ b/modules/UI/recording/Recording.js @@ -32,27 +32,73 @@ function _isRecordingButtonEnabled() { * @returns {Promise} */ function _requestLiveStreamId() { - let msg = APP.translation.generateTranslationHTML("dialog.liveStreaming"); - let token = APP.translation.translateString("dialog.streamKey"); + const msg = APP.translation.generateTranslationHTML("dialog.liveStreaming"); + const token = APP.translation.translateString("dialog.streamKey"); + const cancelButton + = APP.translation.generateTranslationHTML("dialog.Cancel"); + const backButton = APP.translation.generateTranslationHTML("dialog.Back"); + const startStreamingButton + = APP.translation.generateTranslationHTML("dialog.startLiveStreaming"); + const streamIdRequired + = APP.translation.generateTranslationHTML( + "liveStreaming.streamIdRequired"); + return new Promise(function (resolve, reject) { - APP.UI.messageHandler.openTwoButtonDialog( - null, null, null, - `

${msg}

- ${msg} + `, - false, "dialog.startLiveStreaming", - function (e, v, m, f) { - if (v && f.streamId) { - resolve(UIUtil.escapeHtml(f.streamId)); - } else { - reject(); + persistent: false, + buttons: [ + {title: cancelButton, value: false}, + {title: startStreamingButton, value: true} + ], + focus: ':input:first', + defaultButton: 1, + submit: function (e, v, m, f) { + e.preventDefault(); + + if (v) { + if (f.streamId && f.streamId.length > 0) { + resolve(UIUtil.escapeHtml(f.streamId)); + dialog.close(); + return; + } + else { + dialog.goToState('state1'); + return false; + } + } else { + reject(); + dialog.close(); + return false; + } } }, - null, - function () { }, - ':input:first' - ); + + state1: { + html: `

${msg}

${streamIdRequired}`, + persistent: false, + buttons: [ + {title: cancelButton, value: false}, + {title: backButton, value: true} + ], + focus: ':input:first', + defaultButton: 1, + submit: function (e, v, m, f) { + e.preventDefault(); + if (v === 0) { + reject(); + dialog.close(); + } else { + dialog.goToState('state0'); + } + } + } + }); }); } @@ -129,12 +175,22 @@ function moveToCorner(selector, move) { selector.removeClass(moveToCornerClass); } +var Status = { + ON: "on", + OFF: "off", + AVAILABLE: "available", + UNAVAILABLE: "unavailable", + PENDING: "pending" +} + var Recording = { /** * Initializes the recording UI. */ init (emitter, recordingType) { this.eventEmitter = emitter; + // Use recorder states directly from the library. + this.currentState = Status.UNAVAILABLE; this.initRecordingButton(recordingType); }, @@ -148,6 +204,7 @@ var Recording = { this.recordingOffKey = "liveStreaming.off"; this.recordingPendingKey = "liveStreaming.pending"; this.failedToStartKey = "liveStreaming.failedToStart"; + this.recordingButtonTooltip = "liveStreaming.buttonTooltip"; } else { this.baseClass = "icon-recEnable"; @@ -155,21 +212,25 @@ var Recording = { this.recordingOffKey = "recording.off"; this.recordingPendingKey = "recording.pending"; this.failedToStartKey = "recording.failedToStart"; + this.recordingButtonTooltip = "recording.buttonTooltip"; } selector.addClass(this.baseClass); + selector.attr("data-i18n", "[content]" + this.recordingButtonTooltip); + selector.attr("content", + APP.translation.translateString(this.recordingButtonTooltip)); var self = this; selector.click(function () { - console.log("BUTTON CLICKED", self.currentState); switch (self.currentState) { - case "on": { + case Status.ON: + case Status.PENDING: { _showStopRecordingPrompt(recordingType).then(() => self.eventEmitter.emit(UIEvents.RECORDING_TOGGLED)); - } break; - case "available": - case "off": { + } + case Status.AVAILABLE: + case Status.OFF: { if (recordingType === 'jibri') _requestLiveStreamId().then((streamId) => { self.eventEmitter.emit( UIEvents.RECORDING_TOGGLED, @@ -187,8 +248,8 @@ var Recording = { {token: token}); }); } - } break; + } default: { APP.UI.messageHandler.openMessageDialog( "dialog.liveStreaming", @@ -222,7 +283,7 @@ var Recording = { let labelSelector = $('#recordingLabel'); // TODO: handle recording state=available - if (recordingState === 'on') { + if (recordingState === Status.ON) { buttonSelector.removeClass(this.baseClass); buttonSelector.addClass(this.baseClass + " active"); @@ -231,13 +292,13 @@ var Recording = { moveToCorner(labelSelector, true, 3000); labelSelector .text(APP.translation.translateString(this.recordingOnKey)); - } else if (recordingState === 'off' - || recordingState === 'unavailable') { + } else if (recordingState === Status.OFF + || recordingState === Status.UNAVAILABLE) { // We don't want to do any changes if this is // an availability change. - if (this.currentState === "available" - || this.currentState === "unavailable") + if (this.currentState === Status.AVAILABLE + || this.currentState === Status.UNAVAILABLE) return; buttonSelector.removeClass(this.baseClass + " active"); @@ -245,7 +306,7 @@ var Recording = { moveToCorner(labelSelector, false); let messageKey; - if (this.currentState === "pending") + if (this.currentState === Status.PENDING) messageKey = this.failedToStartKey; else messageKey = this.recordingOffKey; @@ -257,7 +318,7 @@ var Recording = { $('#recordingLabel').css({display: "none"}); }, 5000); } - else if (recordingState === 'pending') { + else if (recordingState === Status.PENDING) { buttonSelector.removeClass(this.baseClass + " active"); buttonSelector.addClass(this.baseClass); From 76820bed8d21d83e10d4125af5406f94b2fe30f9 Mon Sep 17 00:00:00 2001 From: yanas Date: Tue, 29 Mar 2016 16:30:08 -0500 Subject: [PATCH 2/2] Fixes recording state handling. --- modules/UI/recording/Recording.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/modules/UI/recording/Recording.js b/modules/UI/recording/Recording.js index 77603e326..386b9d617 100644 --- a/modules/UI/recording/Recording.js +++ b/modules/UI/recording/Recording.js @@ -181,7 +181,7 @@ var Status = { AVAILABLE: "available", UNAVAILABLE: "unavailable", PENDING: "pending" -} +}; var Recording = { /** @@ -297,8 +297,8 @@ var Recording = { // We don't want to do any changes if this is // an availability change. - if (this.currentState === Status.AVAILABLE - || this.currentState === Status.UNAVAILABLE) + if (this.currentState !== Status.ON + && this.currentState !== Status.PENDING) return; buttonSelector.removeClass(this.baseClass + " active"); @@ -333,7 +333,9 @@ var Recording = { this.currentState = recordingState; - if (!labelSelector.is(":visible")) + // We don't show the label for available state. + if (recordingState !== Status.AVAILABLE + && !labelSelector.is(":visible")) labelSelector.css({display: "inline-block"}); }, // checks whether recording is enabled and whether we have params