egroupware/api/js/etemplate/et2_widget_audio.js

/**
 * 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