export var VideoOverlay = ImageOverlay.extend({
  options: {
    autoplay: true,
    loop: true,
    keepAspectRatio: true,
    muted: true,
    playsInline: true,
  },
  _initImage: function () {
    var wasElementSupplied = this._url.tagName === "VIDEO";
    var vid = (this._image = wasElementSupplied
      ? this._url
      : document.createElement("video"));

    DomUtil.addClass(vid, "leaflet-image-layer");
    if (this._zoomAnimated) {
      DomUtil.addClass(vid, "leaflet-zoom-animated");
    }
    if (this.options.className) {
      DomUtil.addClass(vid, this.options.className);
    }

    vid.onselectstart = Util.falseFn;
    vid.onmousemove = Util.falseFn;

    vid.onloadeddata = Util.bind(this.fire, this, "load");

    if (wasElementSupplied) {
      var sourceElements = vid.getElementsByTagName("source");
      var sources = [];
      for (var j = 0; j < sourceElements.length; j++) {
        sources.push(sourceElements[j].src);
      }

      this._url = sourceElements.length > 0 ? sources : [vid.src];
      return;
    }

    if (!Util.isArray(this._url)) {
      this._url = [this._url];
    }

    if (
      !this.options.keepAspectRatio &&
      Object.prototype.hasOwnProperty.call(vid.style, "objectFit")
    ) {
      vid.style["objectFit"] = "fill";
    }
    vid.autoplay = !!this.options.autoplay;
    vid.loop = !!this.options.loop;
    vid.muted = !!this.options.muted;
    vid.playsInline = !!this.options.playsInline;
    for (var i = 0; i < this._url.length; i++) {
      var source = DomUtil.create("source");
      source.src = this._url[i];
      vid.appendChild(source);
    }
  },
});

export function videoOverlay(video, bounds, options) {
	return new VideoOverlay(video, bounds, options);
}