jiti-meet/modules/UI/recording/Recording.js

547 lines
18 KiB
JavaScript
Raw Normal View History

/* global APP, $, config, interfaceConfig, JitsiMeetJS */
2016-03-29 18:10:31 +00:00
/*
* Copyright @ 2015 Atlassian Pty Ltd
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
2016-11-11 15:00:54 +00:00
const logger = require("jitsi-meet-logger").getLogger(__filename);
2016-03-29 18:10:31 +00:00
import UIEvents from "../../../service/UI/UIEvents";
import UIUtil from '../util/UIUtil';
2016-04-26 21:38:07 +00:00
import VideoLayout from '../videolayout/VideoLayout';
2017-02-16 23:02:40 +00:00
import { setToolboxEnabled } from '../../../react/features/toolbox';
import { setNotificationsEnabled } from '../../../react/features/notifications';
2016-04-26 21:38:07 +00:00
/**
* The dialog for user input.
*/
let dialog = null;
2016-03-29 18:10:31 +00:00
/**
* Indicates if the recording button should be enabled.
*
* @returns {boolean} {true} if the
* @private
2016-03-29 18:10:31 +00:00
*/
function _isRecordingButtonEnabled() {
return (
interfaceConfig.TOOLBAR_BUTTONS.indexOf("recording") !== -1
&& config.enableRecording
&& APP.conference.isRecordingSupported());
2016-03-29 18:10:31 +00:00
}
/**
* Request live stream token from the user.
* @returns {Promise}
*/
function _requestLiveStreamId() {
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");
const streamIdHelp
= APP.translation.generateTranslationHTML(
"liveStreaming.streamIdHelp");
2016-03-29 18:10:31 +00:00
return new Promise(function (resolve, reject) {
dialog = APP.UI.messageHandler.openDialogWithStates({
state0: {
titleKey: "dialog.liveStreaming",
html:
2016-11-09 16:46:58 +00:00
`<input class="input-control"
name="streamId" type="text"
2016-03-29 18:10:31 +00:00
data-i18n="[placeholder]dialog.streamKey"
autofocus><div style="text-align: right">
2017-04-01 05:52:40 +00:00
<a class="helper-link" target="_new"
href="${interfaceConfig.LIVE_STREAMING_HELP_LINK}">`
+ streamIdHelp
+ `</a></div>`,
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(APP.UI.messageHandler.CANCEL);
dialog.close();
return false;
}
2016-03-29 18:10:31 +00:00
}
},
state1: {
titleKey: "dialog.liveStreaming",
html: streamIdRequired,
persistent: false,
buttons: [
{title: cancelButton, value: false},
{title: backButton, value: true}
],
focus: ':input:first',
defaultButton: 1,
submit: function (e, v) {
e.preventDefault();
if (v === 0) {
reject(APP.UI.messageHandler.CANCEL);
dialog.close();
} else {
dialog.goToState('state0');
}
}
}
}, {
close: function () {
dialog = null;
}
});
2016-03-29 18:10:31 +00:00
});
}
/**
* Request recording token from the user.
* @returns {Promise}
*/
function _requestRecordingToken() {
let titleKey = "dialog.recordingToken";
let msgString = (
`<input name="recordingToken" type="text"
data-i18n="[placeholder]dialog.token"
2016-11-09 16:46:58 +00:00
class="input-control"
autofocus>`
);
2016-03-29 18:10:31 +00:00
return new Promise(function (resolve, reject) {
dialog = APP.UI.messageHandler.openTwoButtonDialog({
titleKey,
msgString,
leftButtonKey: 'dialog.Save',
submitFunction: function (e, v, m, f) {
2016-03-29 18:10:31 +00:00
if (v && f.recordingToken) {
resolve(UIUtil.escapeHtml(f.recordingToken));
} else {
reject(APP.UI.messageHandler.CANCEL);
2016-03-29 18:10:31 +00:00
}
},
closeFunction: function () {
dialog = null;
},
focus: ':input:first'
});
2016-03-29 18:10:31 +00:00
});
}
/**
* Shows a prompt dialog to the user when they have toggled off the recording.
*
* @param recordingType the recording type
* @returns {Promise}
* @private
*/
function _showStopRecordingPrompt(recordingType) {
2016-03-29 18:10:31 +00:00
var title;
var message;
var buttonKey;
if (recordingType === "jibri") {
title = "dialog.liveStreaming";
message = "dialog.stopStreamingWarning";
buttonKey = "dialog.stopLiveStreaming";
}
else {
title = "dialog.recording";
message = "dialog.stopRecordingWarning";
buttonKey = "dialog.stopRecording";
}
return new Promise((resolve, reject) => {
dialog = APP.UI.messageHandler.openTwoButtonDialog({
titleKey: title,
msgKey: message,
leftButtonKey: buttonKey,
submitFunction: (e, v) => (v ? resolve : reject)(),
closeFunction: () => {
dialog = null;
2016-03-29 18:10:31 +00:00
}
});
2016-03-29 18:10:31 +00:00
});
}
/**
* Moves the element given by {selector} to the top right corner of the screen.
* Set additional classes that can be used to style the selector relative to the
* state of the filmstrip.
*
* @param selector the selector for the element to move
* @param move {true} to move the element, {false} to move it back to its intial
* position
*/
2016-03-29 18:10:31 +00:00
function moveToCorner(selector, move) {
let moveToCornerClass = "moveToCorner";
let containsClass = selector.hasClass(moveToCornerClass);
2016-03-29 18:10:31 +00:00
if (move && !containsClass)
2016-03-29 18:10:31 +00:00
selector.addClass(moveToCornerClass);
else if (!move && containsClass)
2016-03-29 18:10:31 +00:00
selector.removeClass(moveToCornerClass);
const {
remoteVideosVisible,
visible
} = APP.store.getState()['features/filmstrip'];
const filmstripWasHidden = selector.hasClass('without-filmstrip');
const filmstipIsOpening = filmstripWasHidden && visible;
selector.toggleClass('opening', filmstipIsOpening);
selector.toggleClass('with-filmstrip', visible);
selector.toggleClass('without-filmstrip', !visible);
selector.toggleClass('with-remote-videos', remoteVideosVisible);
selector.toggleClass('without-remote-videos', !remoteVideosVisible);
2016-03-29 18:10:31 +00:00
}
/**
* The status of the recorder.
* FIXME: Those constants should come from the library.
* @type {{ON: string, OFF: string, AVAILABLE: string,
* UNAVAILABLE: string, PENDING: string}}
*/
var Status = {
ON: "on",
OFF: "off",
AVAILABLE: "available",
UNAVAILABLE: "unavailable",
2016-05-05 16:14:27 +00:00
PENDING: "pending",
RETRYING: "retrying",
2016-06-02 16:30:45 +00:00
ERROR: "error",
FAILED: "failed",
BUSY: "busy"
2016-03-29 21:30:08 +00:00
};
/**
* 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,
* updateRecordingUI, checkAutoRecord}}
*/
2016-03-29 18:10:31 +00:00
var Recording = {
/**
* Initializes the recording UI.
*/
init(eventEmitter, recordingType) {
this.eventEmitter = eventEmitter;
this.recordingType = recordingType;
this.updateRecordingState(APP.conference.getRecordingState());
2016-03-29 18:10:31 +00:00
if (recordingType === 'jibri') {
this.baseClass = "fa fa-play-circle";
2016-06-02 16:30:45 +00:00
this.recordingTitle = "dialog.liveStreaming";
2016-03-29 18:10:31 +00:00
this.recordingOnKey = "liveStreaming.on";
this.recordingOffKey = "liveStreaming.off";
this.recordingPendingKey = "liveStreaming.pending";
this.failedToStartKey = "liveStreaming.failedToStart";
2016-05-05 16:14:27 +00:00
this.recordingErrorKey = "liveStreaming.error";
this.recordingButtonTooltip = "liveStreaming.buttonTooltip";
2016-06-02 16:30:45 +00:00
this.recordingUnavailable = "liveStreaming.unavailable";
this.recordingBusy = "liveStreaming.busy";
2016-03-29 18:10:31 +00:00
}
else {
this.baseClass = "icon-recEnable";
2016-06-02 16:30:45 +00:00
this.recordingTitle = "dialog.recording";
2016-03-29 18:10:31 +00:00
this.recordingOnKey = "recording.on";
this.recordingOffKey = "recording.off";
this.recordingPendingKey = "recording.pending";
this.failedToStartKey = "recording.failedToStart";
2016-05-05 16:14:27 +00:00
this.recordingErrorKey = "recording.error";
this.recordingButtonTooltip = "recording.buttonTooltip";
2016-06-02 16:30:45 +00:00
this.recordingUnavailable = "recording.unavailable";
this.recordingBusy = "liveStreaming.busy";
2016-03-29 18:10:31 +00:00
}
// XXX Due to the React-ification of Toolbox, the HTMLElement with id
// toolbar_button_record may not exist yet.
$(document).on(
'click',
'#toolbar_button_record',
ev => this._onToolbarButtonClick(ev));
// If I am a recorder then I publish my recorder custom role to notify
// everyone.
if (config.iAmRecorder) {
VideoLayout.enableDeviceAvailabilityIcons(
APP.conference.getMyUserId(), false);
VideoLayout.setLocalVideoVisible(false);
APP.store.dispatch(setToolboxEnabled(false));
APP.store.dispatch(setNotificationsEnabled(false));
APP.UI.messageHandler.enablePopups(false);
}
this.eventEmitter.addListener(UIEvents.UPDATED_FILMSTRIP_DISPLAY, () =>{
this._updateStatusLabel();
});
},
/**
* Initialise the recording button.
*/
initRecordingButton() {
const selector = $('#toolbar_button_record');
2016-03-29 18:10:31 +00:00
selector.addClass(this.baseClass);
selector.attr("data-i18n", "[content]" + this.recordingButtonTooltip);
APP.translation.translateElement(selector);
2016-03-29 18:10:31 +00:00
},
/**
* Shows or hides the 'recording' button.
* @param show {true} to show the recording button, {false} to hide it
*/
showRecordingButton(show) {
2016-11-11 10:27:29 +00:00
let shouldShow = show && _isRecordingButtonEnabled();
2016-11-04 13:58:43 +00:00
let id = 'toolbar_button_record';
UIUtil.setVisible(id, shouldShow);
2016-03-29 18:10:31 +00:00
},
/**
* Updates the recording state UI.
* @param recordingState gives us the current recording state
*/
updateRecordingState(recordingState) {
// I'm the recorder, so I don't want to see any UI related to states.
if (config.iAmRecorder)
return;
// If there's no state change, we ignore the update.
if (!recordingState || this.currentState === recordingState)
return;
this.updateRecordingUI(recordingState);
2016-03-29 18:10:31 +00:00
},
/**
* Sets the state of the recording button.
* @param recordingState gives us the current recording state
*/
updateRecordingUI(recordingState) {
2016-03-29 18:10:31 +00:00
2016-06-02 16:30:45 +00:00
let oldState = this.currentState;
this.currentState = recordingState;
2016-03-29 18:10:31 +00:00
// TODO: handle recording state=available
if (recordingState === Status.ON ||
recordingState === Status.RETRYING) {
2016-03-29 18:10:31 +00:00
this._setToolbarButtonToggled(true);
2016-03-29 18:10:31 +00:00
2016-05-05 16:14:27 +00:00
this._updateStatusLabel(this.recordingOnKey, false);
}
else if (recordingState === Status.OFF
2016-06-02 16:30:45 +00:00
|| recordingState === Status.UNAVAILABLE
|| recordingState === Status.BUSY
|| recordingState === Status.FAILED) {
// We don't want to do any changes if this is
// an availability change.
2016-06-02 16:30:45 +00:00
if (oldState !== Status.ON
&& !isStartingStatus(oldState))
return;
2016-03-29 18:10:31 +00:00
this._setToolbarButtonToggled(false);
2016-03-29 18:10:31 +00:00
let messageKey;
if (isStartingStatus(oldState))
2016-03-29 18:10:31 +00:00
messageKey = this.failedToStartKey;
else
messageKey = this.recordingOffKey;
2016-05-05 16:14:27 +00:00
this._updateStatusLabel(messageKey, true);
2016-03-29 18:10:31 +00:00
setTimeout(function(){
$('#recordingLabel').css({display: "none"});
}, 5000);
}
else if (recordingState === Status.PENDING) {
2016-03-29 18:10:31 +00:00
this._setToolbarButtonToggled(false);
2016-03-29 18:10:31 +00:00
2016-05-05 16:14:27 +00:00
this._updateStatusLabel(this.recordingPendingKey, true);
}
2016-06-02 16:30:45 +00:00
else if (recordingState === Status.ERROR
|| recordingState === Status.FAILED) {
this._setToolbarButtonToggled(false);
2016-05-05 16:14:27 +00:00
this._updateStatusLabel(this.recordingErrorKey, true);
2016-03-29 18:10:31 +00:00
}
2016-05-05 16:14:27 +00:00
let labelSelector = $('#recordingLabel');
2016-03-29 21:30:08 +00:00
// We don't show the label for available state.
if (recordingState !== Status.AVAILABLE
&& !labelSelector.is(":visible"))
2016-03-29 18:10:31 +00:00
labelSelector.css({display: "inline-block"});
// Recording spinner
2016-11-04 13:58:43 +00:00
let spinnerId = 'recordingSpinner';
UIUtil.setVisible(
2016-11-23 21:04:05 +00:00
spinnerId, recordingState === Status.RETRYING);
2016-03-29 18:10:31 +00:00
},
// checks whether recording is enabled and whether we have params
// to start automatically recording
checkAutoRecord() {
2016-03-29 18:10:31 +00:00
if (_isRecordingButtonEnabled && config.autoRecord) {
this.predefinedToken = UIUtil.escapeHtml(config.autoRecordToken);
this.eventEmitter.emit(UIEvents.RECORDING_TOGGLED,
this.predefinedToken);
}
2016-05-05 16:14:27 +00:00
},
/**
* Updates the status label.
* @param textKey the text to show
* @param isCentered indicates if the label should be centered on the window
* or moved to the top right corner.
*/
_updateStatusLabel(textKey, isCentered) {
let labelSelector = $('#recordingLabel');
let labelTextSelector = $('#recordingLabelText');
2016-05-05 16:14:27 +00:00
moveToCorner(labelSelector, !isCentered);
labelTextSelector.attr("data-i18n", textKey);
APP.translation.translateElement(labelSelector);
},
/**
* Handles {@code click} on {@code toolbar_button_record}.
*
* @returns {void}
*/
_onToolbarButtonClick() {
if (dialog) {
return;
}
JitsiMeetJS.analytics.sendEvent('recording.clicked');
switch (this.currentState) {
case Status.ON:
case Status.RETRYING:
case Status.PENDING: {
_showStopRecordingPrompt(this.recordingType).then(
() => {
this.eventEmitter.emit(UIEvents.RECORDING_TOGGLED);
JitsiMeetJS.analytics.sendEvent('recording.stopped');
},
() => {});
break;
}
case Status.AVAILABLE:
case Status.OFF: {
if (this.recordingType === 'jibri')
_requestLiveStreamId().then(streamId => {
this.eventEmitter.emit(
UIEvents.RECORDING_TOGGLED,
{ streamId });
JitsiMeetJS.analytics.sendEvent('recording.started');
}).catch(reason => {
if (reason !== APP.UI.messageHandler.CANCEL)
logger.error(reason);
else
JitsiMeetJS.analytics.sendEvent('recording.canceled');
});
else {
if (this.predefinedToken) {
this.eventEmitter.emit(
UIEvents.RECORDING_TOGGLED,
{ token: this.predefinedToken });
JitsiMeetJS.analytics.sendEvent('recording.started');
return;
}
_requestRecordingToken().then((token) => {
this.eventEmitter.emit(
UIEvents.RECORDING_TOGGLED,
{ token });
JitsiMeetJS.analytics.sendEvent('recording.started');
}).catch(reason => {
if (reason !== APP.UI.messageHandler.CANCEL)
logger.error(reason);
else
JitsiMeetJS.analytics.sendEvent('recording.canceled');
});
}
break;
}
case Status.BUSY: {
dialog = APP.UI.messageHandler.openMessageDialog(
this.recordingTitle,
this.recordingBusy,
null,
() => {
dialog = null;
}
);
break;
}
default: {
dialog = APP.UI.messageHandler.openMessageDialog(
this.recordingTitle,
this.recordingUnavailable,
null,
() => {
dialog = null;
}
);
}
}
},
/**
* Sets the toggled state of the recording toolbar button.
*
* @param {boolean} isToggled indicates if the button should be toggled
* or not
*/
_setToolbarButtonToggled(isToggled) {
$("#toolbar_button_record").toggleClass("toggled", isToggled);
2016-03-29 18:10:31 +00:00
}
};
export default Recording;