haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixes streaming tooltip. Checks if the stream id is not provided and requests the user before starting the recorder.

This commit is contained in:
yanas 2016-03-29 16:07:01 -05:00
parent 8b060e9cc0
commit 39c350cdba
4 changed files with 97 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/videolayout_default.css
View File

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

2
index.html
View File

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

8
lang/main.json
View File

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

119
modules/UI/recording/Recording.js
View File

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