drapcode-builder/src/dom_components/model/ComponentAudio.js

Drapcode Builder Library

import Component from "./ComponentImage";

const hso = "hso";
const src_default =
  "https://cdn.pixabay.com/download/audio/2022/01/12/audio_45cacdef8f.mp3";

export default Component.extend(
  {
    defaults: {
      ...Component.prototype.defaults,
      type: "audio",
      tagName: "audio",
      void: 0,
      provider: hso, // on change of provider, traits are switched
      loop: 0,
      muted: 0,
      autoplay: 0,
      controls: 1,
      list: "",
      sources: [],
      attributes: {},
      src: src_default
    },

    initialize(o, opt) {
      this.em = opt.em;
      this.updateTraits();
      Component.prototype.initialize.apply(this, arguments);
    },

    /**
     * Update traits by provider
     * @private
     */
    updateTraits() {
      let tagName = "audio";
      let traits = this.getSourceTraits();
      const dataAudioType = "data-audio-type";

      this.setAttributes({ [dataAudioType]: "url" });
      this.set({ tagName }, { silent: 1 }); // avoid break in view
      this.set({ traits });
      this.em.trigger("component:toggled");
    },

    /**
     * Update src on change of audio ID
     * @private
     */
    updateSrc() {
      let src = "";
      this.set({ src });
    },

    /**
     * Returns object of attributes for HTML
     * @return {Object}
     * @private
     */
    getAttrToHTML(...args) {
      var attr = Component.prototype.getAttrToHTML.apply(this, args);
      if (this.get("loop")) attr.loop = "loop";
      if (this.get("autoplay")) attr.autoplay = "autoplay";
      if (this.get("controls")) attr.controls = "controls";
      return attr;
    },

    // Listen provider change and switch traits, in TraitView listen traits change

    /**
     * Return traits for the source provider
     * @return {Array<Object>}
     * @private
     */
    getSourceTraits() {
      return [
        {
          label: "Source",
          name: "src",
          placeholder: "eg. ./media/audio.mp3",
          changeProp: 1
        },
        this.getAutoplayTrait(),
        this.getLoopTrait(),
        this.getControlsTrait(),
        this.getWebconnectAudioTrait()
      ];
    },

    /**
     * Return object trait
     * @return {Object}
     * @private
     */
    getAutoplayTrait() {
      return {
        type: "checkbox",
        label: "Autoplay",
        name: "autoplay",
        changeProp: 1
      };
    },

    /**
     * Return object trait
     * @return {Object}
     * @private
     */
    getLoopTrait() {
      return {
        type: "checkbox",
        label: "Loop",
        name: "loop",
        changeProp: 1
      };
    },

    /**
     * Return object trait
     * @return {Object}
     * @private
     */
    getControlsTrait() {
      return {
        type: "checkbox",
        label: "Controls",
        name: "controls",
        changeProp: 1
      };
    },

    //added web connect trait
    getWebconnectAudioTrait() {
      return {
        type: "drapcode-audio",
        label: false,
        content: "Insert audio URL here"
      };
    }
  },
  {
    /**
     * Detect if the passed element is a valid component.
     * In case the element is valid an object abstracted
     * from the element will be returned
     * @param {HTMLElement}
     * @return {Object}
     * @private
     */
    isComponent(el) {
      var result = '';
      if (el.tagName == 'AUDIO') {
        result = { type: 'audio' };
        if (el.src) result.src = el.src;
      }
      return result;
    }
  }
);