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