drapcode-builder/src/dom_components/view/ComponentAudioView.js

Drapcode Builder Library

import ComponentView from "./ComponentImageView";
import OComponentView from "./ComponentView";

export default ComponentView.extend({
  tagName: "div",

  events: {},

  initialize(o) {
    OComponentView.prototype.initialize.apply(this, arguments);
    const { model } = this;
    const props = ["loop", "autoplay", "controls"];
    const events = props.map(p => `change:${p}`).join(" ");
    this.listenTo(model, "change:src", this.updateSrc);
    this.listenTo(model, events, this.updateAudio);
  },

  /**
   * Rerender on update of the provider
   * @private
   */
  updateProvider() {
    var prov = this.model.get("provider");
    this.el.innerHTML = "";
    this.el.appendChild(this.renderByProvider(prov));
  },

  /**
   * Update the source of the audio
   * @private
   */
  updateSrc() {
    const { model, audioEl } = this;
    if (!audioEl) return;
    let src = model.get("src");

    audioEl.src = src;
  },

  /**
   * Update audio parameters
   * @private
   */
  updateAudio() {
    var audioEl = this.audioEl;
    var md = this.model;
    audioEl.loop = md.get("loop");
    audioEl.autoplay = md.get("autoplay");
    audioEl.controls = md.get("controls");
  },

  renderByProvider(prov) {
    var audioEl;
    audioEl = this.renderSource();
    this.audioEl = audioEl;
    return audioEl;
  },

  renderSource() {
    var el = document.createElement("audio");
    el.src = this.model.get("src");
    this.initAudioEl(el);
    return el;
  },

  initAudioEl(el) {
    el.className = this.ppfx + "no-pointer";
    el.style.height = "100%";
    el.style.width = "100%";
  },

  render(...args) {
    ComponentView.prototype.render.apply(this, args);
    this.updateClasses();
    var prov = this.model.get("provider");
    this.el.appendChild(this.renderByProvider(prov));
    this.updateAudio();
    return this;
  }
});