Merge pull request #566 from jitsi/recording-related-work-in-progress
Fixes streaming tooltip. Checks if the stream id is not provided and …
This commit is contained in:
commit
3c33542874
|
@ -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);
|
||||
|
|
|
@ -116,7 +116,7 @@
|
|||
</span>
|
||||
<a class="button icon-microphone" id="toolbar_button_mute" data-container="body" data-toggle="popover" data-placement="bottom" shortcut="mutePopover" data-i18n="[content]toolbar.mute" content="Mute / Unmute"></a>
|
||||
<a class="button icon-camera" id="toolbar_button_camera" data-container="body" data-toggle="popover" data-placement="bottom" shortcut="toggleVideoPopover" data-i18n="[content]toolbar.videomute" content="Start / stop camera"></a>
|
||||
<a class="button" id="toolbar_button_record" data-container="body" data-toggle="popover" data-placement="bottom" data-i18n="[content]toolbar.record" content="Record" style="display: none"></a>
|
||||
<a class="button" id="toolbar_button_record" data-container="body" data-toggle="popover" data-placement="bottom" style="display: none"></a>
|
||||
<a class="button icon-security" id="toolbar_button_security" data-container="body" data-toggle="popover" data-placement="bottom" data-i18n="[content]toolbar.lock" content="Lock / unlock room"></a>
|
||||
<a class="button icon-link" id="toolbar_button_link" data-container="body" data-toggle="popover" data-placement="bottom" data-i18n="[content]toolbar.invite" content="Invite others"></a>
|
||||
<a class="button icon-chat" id="toolbar_button_chat" data-container="body" data-toggle="popover" shortcut="toggleChatPopover" data-placement="bottom" data-i18n="[content]toolbar.chat" content="Open / close chat">
|
||||
|
|
|
@ -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",
|
||||
|
@ -265,7 +264,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":
|
||||
{
|
||||
|
@ -273,6 +273,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."
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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,
|
||||
`<h2>${msg}</h2>
|
||||
<input name="streamId" type="text"
|
||||
let dialog = APP.UI.messageHandler.openDialogWithStates({
|
||||
state0: {
|
||||
html:
|
||||
`<h2>${msg}</h2>
|
||||
<input name="streamId" type="text"
|
||||
data-i18n="[placeholder]dialog.streamKey"
|
||||
placeholder="${token}" autofocus>`,
|
||||
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: `<h2>${msg}</h2> ${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.ON
|
||||
&& this.currentState !== Status.PENDING)
|
||||
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);
|
||||
|
@ -272,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
|
||||
|
|
Loading…
Reference in New Issue