Merge branch 'MDL-68436' of https://github.com/timhunt/moodle
[moodle.git] / lib / editor / atto / plugins / recordrtc / yui / build / moodle-atto_recordrtc-button / moodle-atto_recordrtc-button.js
1 YUI.add('moodle-atto_recordrtc-button', function (Y, NAME) {
3 // This file is part of Moodle - http://moodle.org/
4 //
5 // Moodle is free software: you can redistribute it and/or modify
6 // it under the terms of the GNU General Public License as published by
7 // the Free Software Foundation, either version 3 of the License, or
8 // (at your option) any later version.
9 //
10 // Moodle is distributed in the hope that it will be useful,
11 // but WITHOUT ANY WARRANTY; without even the implied warranty of
12 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
13 // GNU General Public License for more details.
14 //
15 // You should have received a copy of the GNU General Public License
16 // along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
17 //
19 /**
20  * Atto recordrtc library functions
21  *
22  * @package    atto_recordrtc
23  * @author     Jesus Federico (jesus [at] blindsidenetworks [dt] com)
24  * @author     Jacob Prud'homme (jacob [dt] prudhomme [at] blindsidenetworks [dt] com)
25  * @copyright  2017 Blindside Networks Inc.
26  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
27  */
29 /**
30  * @module moodle-atto_recordrtc-button
31  */
33 /**
34  * Atto text editor recordrtc plugin.
35  *
36  * @namespace M.atto_recordrtc
37  * @class button
38  * @extends M.editor_atto.EditorPlugin
39  */
41 // ESLint directives.
42 /* eslint-disable camelcase, spaced-comment */
44 // JSHint directives.
45 /*global M */
46 /*jshint onevar: false */
48 // Scrutinizer CI directives.
49 /** global: Y */
50 /** global: M */
52 var PLUGINNAME = 'atto_recordrtc',
53     TEMPLATE = '' +
54     '<div class="{{PLUGINNAME}} container-fluid">' +
55       '<div class="{{bs_row}} hide">' +
56         '<div class="{{bs_col}}12">' +
57           '<div id="alert-danger" class="alert {{bs_al_dang}}">' +
58             '<strong>{{insecurealert_title}}</strong> {{insecurealert}}' +
59           '</div>' +
60         '</div>' +
61       '</div>' +
62       '<div class="{{bs_row}} hide">' +
63         '{{#if isAudio}}' +
64           '<div class="{{bs_col}}1"></div>' +
65           '<div class="{{bs_col}}10">' +
66             '<audio id="player"></audio>' +
67           '</div>' +
68           '<div class="{{bs_col}}1"></div>' +
69         '{{else}}' +
70           '<div class="{{bs_col}}12">' +
71             '<video id="player"></video>' +
72           '</div>' +
73         '{{/if}}' +
74       '</div>' +
75       '<div class="{{bs_row}}">' +
76         '<div class="{{bs_col}}1"></div>' +
77         '<div class="{{bs_col}}10">' +
78           '<button id="start-stop" class="{{bs_ss_btn}}">{{startrecording}}</button>' +
79         '</div>' +
80         '<div class="{{bs_col}}1"></div>' +
81       '</div>' +
82       '<div class="{{bs_row}} hide">' +
83         '<div class="{{bs_col}}3"></div>' +
84         '<div class="{{bs_col}}6">' +
85           '<button id="upload" class="btn btn-primary btn-block">{{attachrecording}}</button>' +
86         '</div>' +
87         '<div class="{{bs_col}}3"></div>' +
88       '</div>' +
89     '</div>';
91 Y.namespace('M.atto_recordrtc').Button = Y.Base.create('button', Y.M.editor_atto.EditorPlugin, [], {
92     /**
93      * The current language by default.
94      */
95     _lang: 'en',
97     initializer: function() {
98         if (this.get('host').canShowFilepicker('media')) {
99             // Add audio and/or video buttons depending on the settings.
100             var allowedtypes = this.get('allowedtypes'),
101                 buttonadded = false;
102             if (allowedtypes === 'both' || allowedtypes === 'audio') {
103                 this._addButton('audio', this._audio);
104                 buttonadded = true;
105             }
106             if (allowedtypes === 'both' || allowedtypes === 'video') {
107                 this._addButton('video', this._video);
108                 buttonadded = true;
109             }
110             if (!buttonadded) {
111                 // Plugin not available here.
112                 return;
113             }
115             // Initialize the dialogue box.
116             var dialogue = this.getDialogue({
117                 width: 1000,
118                 focusAfterHide: null
119             });
121             dialogue.after('visibleChange', function() {
122                 var closed = !dialogue.get('visible'),
123                     m = M.atto_recordrtc.commonmodule;
125                 if (closed) {
126                     // If dialogue is closed during recording, do the following.
127                     window.clearInterval(m.countdownTicker);
129                     if (m.mediaRecorder && m.mediaRecorder.state !== 'inactive') {
130                         m.mediaRecorder.stop();
131                     }
133                     if (m.stream) {
134                         m.stream.getTracks().forEach(function(track) {
135                             if (track.readyState !== 'ended') {
136                                 track.stop();
137                             }
138                         });
139                     }
141                     // Because the player uses ids to identify things (this should be fixed)
142                     // we must make sure the dialogue contents only exist once in the DOM.
143                     // Therefore, when a dialogue is closed, we must remove its contents.
144                     this.getDialogue().set('bodyContent', '');
145                 }
147             }, this);
149             dialogue.on('click', function() {
150                 this.centered();
151             });
153             // Require adapter.js library.
154             window.require(['core/adapter'], function(adapter) {
155                 window.adapter = adapter;
156             });
157         }
158     },
160     /**
161      * Add the buttons to the Atto toolbar.
162      *
163      * @method _addButton
164      * @param {string} type
165      * @param {callback} callback
166      * @private
167      */
168     _addButton: function(type, callback) {
169         this.addButton({
170             buttonName: type,
171             icon: this.get(type + 'rtcicon'),
172             iconComponent: PLUGINNAME,
173             callback: callback,
174             title: type + 'rtc',
175             tags: type + 'rtc',
176             tagMatchRequiresAll: false
177         });
178     },
180     /**
181      * Toggle audiortc and normal display mode
182      *
183      * @method _audio
184      * @private
185      */
186     _audio: function() {
187         var dialogue = this.getDialogue();
189         dialogue.set('headerContent', M.util.get_string('audiortc', 'atto_recordrtc'));
190         dialogue.set('bodyContent', this._createContent('audio'));
192         dialogue.show();
194         M.atto_recordrtc.audiomodule.init(this);
195     },
197     /**
198      * Toggle videortc and normal display mode
199      *
200      * @method _video
201      * @private
202      */
203     _video: function() {
204         var dialogue = this.getDialogue();
206         dialogue.set('headerContent', M.util.get_string('videortc', 'atto_recordrtc'));
207         dialogue.set('bodyContent', this._createContent('video'));
209         dialogue.show();
211         M.atto_recordrtc.videomodule.init(this);
212     },
214     /**
215      * Create the HTML to be displayed in the dialogue box
216      *
217      * @method _createContent
218      * @param {string} type
219      * @returns {Object}
220      * @private
221      */
222     _createContent: function(type) {
223         var isAudio = (type === 'audio'),
224             bsRow = 'row',
225             bsCol = 'col-',
226             bsAlDang = 'alert-danger',
227             bsSsBtn = 'btn btn-lg btn-outline-danger btn-block';
229         var bodyContent = Y.Handlebars.compile(TEMPLATE)({
230             PLUGINNAME: PLUGINNAME,
231             isAudio: isAudio,
232             bs_row: bsRow,
233             bs_col: bsCol,
234             bs_al_dang: bsAlDang,
235             bs_ss_btn: bsSsBtn,
236             insecurealert_title: M.util.get_string('insecurealert_title', 'atto_recordrtc'),
237             insecurealert: M.util.get_string('insecurealert', 'atto_recordrtc'),
238             startrecording: M.util.get_string('startrecording', 'atto_recordrtc'),
239             attachrecording: M.util.get_string('attachrecording', 'atto_recordrtc')
240         });
242         return bodyContent;
243     },
245     /**
246      * Close the dialogue without further action.
247      *
248      * @method closeDialogue
249      * @param {Object} scope The "this" context of the editor.
250      */
251     closeDialogue: function(scope) {
252         scope.getDialogue().hide();
254         scope.editor.focus();
255     },
257     /**
258      * Insert the annotation link in the editor.
259      *
260      * @method setLink
261      * @param {Object} scope The "this" context of the editor.
262      * @param {string} annotation The HTML link to the recording.
263      */
264     setLink: function(scope, annotation) {
265         scope.getDialogue().hide();
267         scope.editor.focus();
268         scope.get('host').insertContentAtFocusPoint(annotation);
269         scope.markUpdated();
270     }
271 }, {
272     ATTRS: {
273         /**
274          * The contextid to use when generating this recordrtc.
275          *
276          * @attribute contextid
277          * @type String
278          */
279         contextid: {
280             value: null
281         },
283         /**
284          * The sesskey to use when generating this recordrtc.
285          *
286          * @attribute sesskey
287          * @type String
288          */
289         sesskey: {
290             value: null
291         },
293         /**
294          * The allowedtypes to use when generating this recordrtc.
295          *
296          * @attribute allowedtypes
297          * @type String
298          */
299         allowedtypes: {
300             value: null
301         },
303         /**
304          * The audiobitrate to use when generating this recordrtc.
305          *
306          * @attribute audiobitrate
307          * @type String
308          */
309         audiobitrate: {
310             value: null
311         },
313         /**
314          * The videobitrate to use when generating this recordrtc.
315          *
316          * @attribute videobitrate
317          * @type String
318          */
319         videobitrate: {
320             value: null
321         },
323         /**
324          * The timelimit to use when generating this recordrtc.
325          *
326          * @attribute timelimit
327          * @type String
328          */
329         timelimit: {
330             value: null
331         },
333         /**
334          * The audiortcicon to use when generating this recordrtc.
335          *
336          * @attribute audiortcicon
337          * @type String
338          */
339         audiortcicon: {
340             value: null
341         },
343         /**
344          * The videortcicon to use when generating this recordrtc.
345          *
346          * @attribute videortcicon
347          * @type String
348          */
349         videortcicon: {
350             value: null
351         },
353         /**
354          * Maximum upload size set on server, in bytes.
355          *
356          * @attribute maxrecsize
357          * @type String
358          */
359         maxrecsize: {
360             value: null
361         }
362     }
363 });
366 }, '@VERSION@', {"requires": ["moodle-editor_atto-plugin", "moodle-atto_recordrtc-recording"]});