'use strict';

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

var TsIcon = require('./TsIcon.js');
var TsImageLoader = require('./TsImageLoader.js');
var vue = require('vue');

var script = {
    components: {
        TsIcon: TsIcon["default"],
        TsImageLoader: TsImageLoader["default"],
    },
    props: {
        customClass: {
            type: String,
            default: "",
        },
        videoUrl: {
            type: String,
            default: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4",
        },
        iconSize: {
            type: String,
            default: "h-[18px]",
        },
    },
    name: "TsVideo",
    setup(props) {
        let player = null;
        const videoPlayer = vue.ref();
        const videoIsPlaying = vue.ref(false);
        const options = {
            autoplay: false,
            controls: true,
            sources: [
                {
                    src: props.videoUrl,
                    type: "video/mp4",
                },
            ],
        };
        vue.onMounted(() => {
            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
            // @ts-expect-error
            player = window.videojs(videoPlayer.value, options, () => {
                //
            });
        });
        const playVideo = () => {
            player?.play();
            videoIsPlaying.value = true;
        };
        vue.onUnmounted(() => {
            player?.dispose();
        });
        return {
            videoPlayer,
            videoIsPlaying,
            playVideo,
        };
    },
};

const _hoisted_1 = {
  key: 0,
  ref: "videoPlayer",
  class: "video-js w-full h-full relative"
};
const _hoisted_2 = {
  key: 2,
  class: "flex flex-row items-center justify-center rounded absolute h-full w-full top-0 left-0 bg-black bg-opacity-60 z-index"
};

function render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_ts_image_loader = vue.resolveComponent("ts-image-loader");
  const _component_ts_icon = vue.resolveComponent("ts-icon");

  return (vue.openBlock(), vue.createElementBlock("div", {
    class: vue.normalizeClass(`${$props.customClass} relative`)
  }, [
    ($props.videoUrl)
      ? (vue.openBlock(), vue.createElementBlock("video", _hoisted_1, null, 512 /* NEED_PATCH */))
      : (vue.openBlock(), vue.createBlock(_component_ts_image_loader, {
          key: 1,
          customClass: 'w-full h-full rounded',
          photoUrl: '/images/default-video.jpg'
        }, null, 8 /* PROPS */, ["photoUrl"])),
    (!$setup.videoIsPlaying)
      ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
          vue.createVNode(_component_ts_icon, {
            name: "play-video",
            customClass: `${$props.iconSize} cursor-pointer`,
            onClick: _cache[0] || (_cache[0] = $event => ($setup.playVideo()))
          }, null, 8 /* PROPS */, ["customClass"])
        ]))
      : vue.createCommentVNode("v-if", true)
  ], 2 /* CLASS */))
}

script.render = render;
script.__file = "src/components/TsVideo/index.vue";

exports["default"] = script;
