egroupware_official/api/js/etemplate/et2_widget_audio.js
2021-06-07 17:33:53 +02:00

151 lines
4.5 KiB
JavaScript

/**
* EGroupware eTemplate2 - JS Audio tag
*
* @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
* @package etemplate
* @subpackage api
* @link https://www.egroupware.org
* @author Hadi Nategh <hn[at]egroupware.org>
* @copyright EGroupware GmbH
*/
/*egw:uses
/vendor/bower-asset/jquery/dist/jquery.js;
et2_core_interfaces;
et2_core_baseWidget;
*/
import { et2_baseWidget } from './et2_core_baseWidget';
import { ClassWithAttributes } from "./et2_core_inheritance";
import { et2_register_widget } from "./et2_core_widget";
/**
* This widget represents the HTML5 Audio tag with all its optional attributes
*
* The widget can be created in the following ways:
* <code>
* var audioTag = et2_createWidget("audio", {
* audio_src: "../../test.mp3",
* src_type: "audio/mpeg",
* muted: true,
* autoplay: true,
* controls: true,
* loop: true,
* height: 100,
* width: 200,
* });
* </code>
* Or by adding XET-tag in your template (.xet) file:
* <code>
* <audio [attributes...]/>
* </code>
*/
/**
* Class which implements the "audio" XET-Tag
*
* @augments et2_baseWidget
*/
export class et2_audio extends et2_baseWidget {
constructor(_parent, _attrs, _child) {
super(_parent, _attrs, ClassWithAttributes.extendAttributes(et2_audio._attributes, _child || {}));
this.audio = null;
this.container = null;
//Create Audio tag
this.audio = new Audio();
// Container
this.container = document.createElement('div');
this.container.append(this.audio);
this.container.classList.add('et2_audio');
if (this.options.autohide)
this.container.classList.add('et2_audio_autohide');
if (this.options.controls)
this.audio.setAttribute("controls", '1');
if (this.options.autoplay)
this.audio.setAttribute("autoplay", '1');
if (this.options.muted)
this.audio.setAttribute("muted", '1');
if (this.options.loop)
this.audio.setAttribute("loop", '1');
if (this.options.preload)
this.audio.setAttribute('preload', this.options.preload);
this.setDOMNode(this.container);
}
/**
* Set audio source
*
* @param {string} _value url
*/
set_src(_value) {
if (_value) {
this.audio.setAttribute('src', _value);
if (this.options.src_type) {
this.audio.setAttribute('type', this.options.src_type);
}
//preload the audio after changing the source/ only if preload is allowed
if (this.options.preload != "none")
this.audio.load();
}
}
/**
* @return Promise
*/
play() {
return this.audio.play();
}
pause() {
this.audio.pause();
}
currentTime() {
return this.audio.currentTime;
}
seek(_time) {
this.audio.currentTime = _time;
}
}
et2_audio._attributes = {
"src": {
"name": "Audio",
"type": "string",
"description": "Source of audio to play"
},
"src_type": {
"name": "Source type",
"type": "string",
"description": "Defines the type the stream source provided"
},
"muted": {
"name": "Audio control",
"type": "boolean",
"default": false,
"description": "Defines that the audio output should be muted"
},
"autoplay": {
"name": "Autoplay",
"type": "boolean",
"default": false,
"description": "Defines if audio will start playing as soon as it is ready"
},
"controls": {
"name": "Control buttons",
"type": "boolean",
"default": true,
"description": "Defines if audio controls, play/pause buttons should be displayed"
},
"loop": {
"name": "Audio loop",
"type": "boolean",
"default": false,
"description": "Defines if the audio should be played repeatedly"
},
"autohide": {
"name": "Auto hide",
"type": "boolean",
"default": false,
"description": "Auto hides audio control bars and only shows a play button, hovering for few seconds will show the whole controlbar."
},
"preload": {
"name": "preload",
"type": "string",
"default": 'auto',
"description": "preloads audio source based on given option. none(do not preload), auto(preload), metadata(preload metadata only)."
}
};
et2_register_widget(et2_audio, ["audio"]);
//# sourceMappingURL=et2_widget_audio.js.map