'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var Plyr = require('plyr');
var index = require('../../svg-icon/index.js');

"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__ = vue.defineComponent({
  name: "me-video-viewer"
});
var script = /* @__PURE__ */ vue.defineComponent({
  ...__default__,
  props: {
    url: { type: String, required: true },
    close: { type: Function, required: false }
  },
  setup(__props) {
    ;
    const props = __props;
    vue.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 vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
        vue.createElementVNode("div", {
          class: "el-image-viewer__close el-image-viewer__btn",
          onClick: _cache[0] || (_cache[0] = //@ts-ignore
          (...args) => __props.close && __props.close(...args))
        }, [
          vue.createVNode(vue.unref(index.MeSvgIcon), {
            name: "ri-close-line",
            size: 25
          })
        ]),
        vue.createElementVNode("div", _hoisted_2, [
          vue.createElementVNode("video", {
            id: "player",
            src: props.url
          }, null, 8, _hoisted_3)
        ])
      ]);
    };
  }
});

exports.default = script;
//# sourceMappingURL=video-viewer.vue2.js.map
