import { defineComponent, onMounted, openBlock, createElementBlock, createElementVNode, createVNode, unref } from 'vue';
import Plyr from 'plyr';
import { MeSvgIcon } from '../../svg-icon/index.mjs';

"use strict";
const _hoisted_1 = { class: "me-video-viewer" };
const _hoisted_2 = { style: { "width": "80vw", "height": "80vh", "display": "flex", "justify-content": "center" } };
const _hoisted_3 = ["src"];
const __default__ = defineComponent({
  name: "me-video-viewer"
});
var script = /* @__PURE__ */ defineComponent({
  ...__default__,
  props: {
    url: { type: String, required: true },
    close: { type: Function, required: false }
  },
  setup(__props) {
    ;
    const props = __props;
    onMounted(() => {
      const player = new Plyr("#player", {
        controls: [
          "play-large",
          "play",
          "progress",
          "current-time",
          "mute",
          "volume",
          "captions",
          "settings",
          "pip",
          "airplay",
          "download",
          "fullscreen"
        ]
      });
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1, [
        createElementVNode("div", {
          class: "el-image-viewer__close el-image-viewer__btn",
          onClick: _cache[0] || (_cache[0] = //@ts-ignore
          (...args) => __props.close && __props.close(...args))
        }, [
          createVNode(unref(MeSvgIcon), {
            name: "ri-close-line",
            size: 25
          })
        ]),
        createElementVNode("div", _hoisted_2, [
          createElementVNode("video", {
            id: "player",
            src: props.url
          }, null, 8, _hoisted_3)
        ])
      ]);
    };
  }
});

export { script as default };
//# sourceMappingURL=video-viewer.vue2.mjs.map
