var __defProp = Object.defineProperty;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
import { V as VideoModel } from "./model.js";
import { l as lodash } from "./index.js";
import { e as editorDefaults, P as utils, $ } from "./watermark.js";
import { V as VideoRenderer } from "./video.js";
import { i as inherit } from "./base-element.js";
import { I as ImageElement, b as maskEditor } from "./index21.js";
import "./background.js";
import "vue";
import "./v4.js";
import "./index18.js";
import "./dom.js";
import "./clone.js";
import "./flattenDeep.js";
import "./defaults.js";
import "./index15.js";
import "./gif-utils.js";
import "./gif-apng.worker.js";
import "./upng.js";
import "./api-service.js";
var methods = {
  addVideo(url, options) {
    const data = lodash.exports.assign({
      type: "video",
      volume: 1,
      url
    }, options);
    return this.addElement(data);
  },
  seekVideo(element, time) {
    if (element && element.type === "video") {
      element.$currentTime = time;
    }
  },
  async playVideo(element, time) {
    if (!element || element.type !== "video")
      return;
    await this.$nextTick();
    time && this.seekVideo(element, time);
    element.$playing = true;
  },
  pauseVideo(element, time) {
    if (!element || element.type !== "video")
      return;
    element.$playing = false;
    time && this.seekVideo(element, time);
  },
  stopVideo(element) {
    this.pauseVideo(element, 0);
  },
  replaceVideo(url, options, element) {
    element = this.getElement(element);
    if (!element) {
      return;
    }
    const type = element.type;
    if (type !== "video") {
      return;
    }
    options = lodash.exports.assign({
      forwardEdit: true
    }, options);
    const elementWidth = element.width;
    const elementHeight = element.height;
    const imgWidth = options.width || elementWidth;
    const imgHeight = options.height || elementHeight;
    const ratio = Math.max(elementWidth / imgWidth, elementHeight / imgHeight);
    const width = imgWidth * ratio;
    const height = imgHeight * ratio;
    element.imageTransform = element.parseTransform({ a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 });
    const { animation } = element;
    const naturalDuration = typeof options.duration === "number" ? options.duration * 1e3 : options.naturalDuration;
    const { delay } = this.getTimeRange(element);
    this.setTimeRange(delay, naturalDuration);
    this.changeElement({
      url,
      naturalWidth: imgWidth,
      naturalHeight: imgHeight,
      $imageWidth: width,
      $imageHeight: height,
      startTime: 0,
      endTime: naturalDuration,
      naturalDuration,
      animation,
      invertPlay: false
    }, element);
    if (options.forwardEdit && element !== this.currentSubElement) {
      this.showVideoCroper(element);
    }
  },
  showVideoCroper(element) {
    element = this.getElement(element);
    element.$originalType = "video";
    this.currentCropElement = element;
  },
  hideVideoCroper() {
    this.currentCropElement = null;
  },
  async convertVideoToImage(element, replaceOption = {}, layout) {
    element = this.getElement(element);
    if (!element) {
      return;
    }
    const defaultElement = editorDefaults.element;
    const defaultImageElement = element.mask ? editorDefaults.maskElement : editorDefaults.imageElement;
    const props = [].concat(Object.keys(defaultImageElement)).concat(Object.keys(defaultElement));
    const data = lodash.exports.pick(element, props);
    data.type = element.mask ? "mask" : "image";
    data.version = editorDefaults.version;
    data.url = replaceOption.url || element.url;
    data.startTime = replaceOption.startTime || 0;
    data.endTime = replaceOption.endTime || 0;
    data.naturalDuration = replaceOption.naturalDuration || 0;
    if (element.invertPlay) {
      const { endTime, startTime } = data;
      data.startTime = data.naturalDuration - endTime;
      data.endTime = data.naturalDuration - startTime;
    }
    if (!replaceOption.url) {
      const renderer = new VideoRenderer({ model: element, editor: self }).render();
      data.url = await renderer.export().then((canvas) => {
        return canvas.toDataURL("image/jpg", 0.9);
      });
    }
    const newElement = this.replaceElement(element, data, layout);
    if (replaceOption.url) {
      this.replaceImage(data.url, replaceOption, newElement);
    }
    this.focusElement(newElement);
    return newElement;
  },
  convertImageToVideo(element, replaceOption = {}, layout) {
    element = this.getElement(element);
    if (!element) {
      return;
    }
    const defaultElement = editorDefaults.element;
    const defaultImageElement = editorDefaults.videoElement;
    const props = [].concat(Object.keys(defaultImageElement)).concat(Object.keys(defaultElement));
    const data = lodash.exports.pick(element, props);
    data.type = "video";
    data.url = replaceOption.url || element.url;
    data.version = editorDefaults.version;
    data.startTime = replaceOption.startTime || 0;
    data.endTime = replaceOption.endTime || 0;
    data.naturalDuration = replaceOption.naturalDuration || 0;
    const newElement = this.replaceElement(element, data, layout);
    if (replaceOption.url) {
      this.replaceVideo(data.url, replaceOption, newElement);
    }
    this.focusElement(newElement);
    return newElement;
  }
};
var template = `<div
    class="editor-element"
    :class="[
        'editor-element-' + model.type,
        model.lock ? 'editor-element-lock' : '',
        model.hidden ? 'editor-element-hidden' : '',
        model.frozen ? 'editor-element-frozen' : '',
        model.$loaded ? '' : 'editor-element-loading',
        model.$selected ? 'editor-element-selected' : '',
        model.$editing ? 'editor-element-editing' : '',
        linkSelected ? 'editor-element-link-selected' : ''
    ]"
    :style="[baseStyle, cssStyle]"
>
    <div draggable="false" class="element-main" :style="mainStyle">
        <div class="element-main-inner" :style="imageWrapStyle">
            <video
                ref="video"
                crossorigin="anonymous"
                :src="originUrl || null"
                :style="imageStyle"
            />
        </div>
    </div>

    <div class="element-tips-loading" v-if="!model.$loaded">
        <i class="fa fa-spin fa-spinner"></i>
    </div>

    <ElementCommon
        :element="model"
        :options="options"
        :global="global"
        :editor="editor"
        :layout="editor.currentLayout"
        :hideBlink="hideBlink"
        :isShowBlink="isShowBlink"
        :bgNinePatch="bgNinePatch"
    />
</div>
`;
const createProxy = (obj) => {
  return new Proxy(obj, {
    get(target, property) {
      if (typeof target[property] === "undefined") {
        const key = Object.keys(target).find((key2) => target[key2][property]);
        return target[key] && target[key][property] || (() => {
        });
      }
      if (typeof target[property] === "object") {
        return createProxy(target[property]);
      }
      return target[property];
    }
  });
};
var VideoElement = inherit(ImageElement, {
  name: "video-element",
  template,
  data() {
    return {
      video: null
    };
  },
  computed: {
    cssStyle() {
      const { rect } = this;
      const { padding } = rect;
      return {
        height: rect.height + padding[0] + padding[2] + "px",
        width: rect.width + padding[1] + padding[3] + "px",
        transform: this.transform.toString() + " translateZ(0)",
        left: rect.left + "px",
        top: rect.top + "px",
        opacity: this.opacity
      };
    },
    mainStyle() {
      const { padding, borderRadius } = this;
      return __spreadValues({
        padding,
        borderRadius,
        overflow: "hidden"
      }, this.maskStyle);
    },
    imageRenderer() {
      if (!this._imageRendererProxy) {
        this._imageRendererProxy = createProxy({});
      }
      return this._imageRendererProxy;
    },
    startTime() {
      const { startTime, endTime, naturalDuration, invertPlay } = this.model;
      if (invertPlay) {
        return naturalDuration - endTime;
      }
      return startTime;
    },
    endTime() {
      const { startTime, endTime, naturalDuration, invertPlay } = this.model;
      if (invertPlay) {
        return naturalDuration - startTime;
      }
      return endTime;
    }
  },
  watch: {
    "model.$currentTime"(time) {
      const { model, video } = this;
      if (!video)
        return;
      const currentTime = video.currentTime * 1e3;
      if (model.$playing && Math.abs(currentTime - time) < 500)
        return;
      this.videoUpdateTime(time / 1e3);
      model.$currentTime = Math.min(this.endTime, Math.max(time, this.startTime));
    },
    "model.volume"(vol) {
      if (!this.video || this.isPreviewMode)
        return;
      this.video.volume = vol;
    },
    "model.muted"(muted) {
      if (!this.video || this.isPreviewMode)
        return;
      this.video.muted = muted;
    },
    "model.$playing"(playing) {
      if (!this.video || this.isPreviewMode)
        return;
      if (playing) {
        if (this.model.$currentTime >= this.endTime) {
          this.videoUpdateTime(0);
        }
        this.video.play();
      } else {
        this.video.pause();
      }
    },
    "element.updateTime": lodash.exports.throttle(function(model, time) {
      if (model !== this.model || !this.isPreviewMode || !this.video)
        return;
      this.video.currentTime = time;
    }, 1e3, {
      trailing: true
    })
  },
  methods: {
    load() {
      const { originUrl, model, options } = this;
      return utils.loadVideo(originUrl, model.$currentTime / 1e3, options.fitCrossOrigin).then((originalVideo) => {
        originalVideo && this.initDataByImg(originalVideo);
        this.$nextTick();
      }).then(() => {
        if (!this.isPreviewMode) {
          model.$currentTime = Math.max(model.$currentTime, this.startTime);
          if (model.$playing) {
            model.$playing = false;
            return this.$nextTick().then(() => {
              model.$playing = true;
            });
          }
        }
        if (this.video) {
          this.videoUpdateTime(model.$currentTime / 1e3);
        }
      }).timeout(15e3, `video [${originUrl}] load timeout(${15e3}ms)`).catch((e) => {
        throw e;
      });
    },
    videoUpdateTime(time) {
      this.video.currentTime = time;
      this.$events.$emit("element.updateTime", this.model, time);
    }
  },
  events: {},
  mounted() {
    const video = this.video = this.$refs.video;
    video.volume = this.model.volume;
    video.muted = this.model.muted;
    $(video).on("pause", this._onpause = () => {
      this.model.$playing = false;
      this.videoUpdateTime(video.currentTime);
    }).on("paly", this._onplay = () => {
      this.model.$playing = true;
      this.videoUpdateTime(video.currentTime);
    });
    this.videoUpdateTime(this.model.$currentTime / 1e3);
  },
  beforeDestroy() {
    const video = this.video;
    $(video).off("pause", this._onpause);
    $(video).off("paly", this._onplay);
  }
});
var index = {
  model: VideoModel,
  methods,
  layoutComponent: VideoElement,
  editComponent: maskEditor
};
export { index as default };
