@cmstops/pro-compo/lib/videoThumb/component.js

[物料平台文档中心](https://arco.design/docs/material/guide)

"use strict";
var vue = require("vue");
var webVue = require("@arco-design/web-vue");
var config = require("../config.js");
var useVideoThumbs = require("./scripts/useVideoThumbs.js");
var index = require("../emptyData/index.js");
const _hoisted_1 = { class: "video-thumb" };
const _hoisted_2 = {
  key: 0,
  class: "video-thumb-loading"
};
const _hoisted_3 = { class: "video-player-container" };
const _hoisted_4 = ["src"];
const _hoisted_5 = ["onClick"];
const _hoisted_6 = ["src"];
const _sfc_main = vue.defineComponent({
  ...{ name: "videoThumb" },
  __name: "component",
  props: {
    BASE_API: {},
    value: {},
    src: {},
    duration: {},
    offset: {}
  },
  emits: ["select", "update:value"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const BASE_API = props.BASE_API || config.DEFAULT_BASE_API;
    const { thumbs, loading, curThumb, getVideoThumbs, handleSelectThumb } = useVideoThumbs.useVideoThumbs();
    const videoThumbRef = vue.ref();
    const videoThumbDrager = vue.ref();
    const width = vue.computed(() => {
      if (!videoThumbRef.value)
        return 0;
      const rect = videoThumbRef.value.getBoundingClientRect();
      return parseInt((rect.width / thumbs.value.length).toFixed(0), 10);
    });
    const startPos = vue.ref(0);
    function moveDragger(moveX) {
      if (!videoThumbDrager.value || !videoThumbRef.value)
        return;
      const rect = videoThumbRef.value.getBoundingClientRect();
      const pos = startPos.value + moveX;
      if (pos < 0 || pos > rect.width - 5)
        return;
      videoThumbDrager.value.style.left = `${pos}px`;
      const index2 = Math.floor(pos / width.value);
      curThumb.value = thumbs.value[index2 < thumbs.value.length ? index2 : thumbs.value.length - 1];
    }
    function upDragger() {
      startPos.value = 0;
    }
    function downDragger() {
      if (!videoThumbDrager.value)
        return;
      const originX = parseInt(videoThumbDrager.value.style.left.replace("px", ""), 10) || 0;
      startPos.value = originX;
    }
    function handleSelect(idx) {
      handleSelectThumb(idx);
      moveDragger(idx * width.value + width.value / 2);
    }
    const { handleMousedown } = useVideoThumbs.useDragger(moveDragger, upDragger, downDragger);
    vue.watch(
      () => curThumb.value,
      () => {
        emit("select", curThumb.value);
        emit("update:value", curThumb.value);
      },
      { immediate: true }
    );
    vue.onMounted(() => {
      getVideoThumbs(BASE_API, props.src, props.duration);
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
        vue.unref(loading) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
          vue.createVNode(vue.unref(webVue.Spin), {
            loading: vue.unref(loading),
            tip: "\u751F\u6210\u89C6\u9891\u5C01\u9762\u4E2D..."
          }, null, 8, ["loading"])
        ])) : vue.unref(thumbs).length === 0 ? (vue.openBlock(), vue.createBlock(vue.unref(index), {
          key: 1,
          type: "empty"
        })) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
          vue.createElementVNode("div", _hoisted_3, [
            vue.createElementVNode("img", { src: vue.unref(curThumb) }, null, 8, _hoisted_4)
          ]),
          vue.createCommentVNode(" \u5C01\u9762\u56FE "),
          vue.createElementVNode("div", {
            ref_key: "videoThumbRef",
            ref: videoThumbRef,
            class: "video-thumb-list"
          }, [
            vue.createElementVNode("div", {
              ref_key: "videoThumbDrager",
              ref: videoThumbDrager,
              class: "video-thumb-list-drager",
              onMousedown: _cache[0] || (_cache[0] = (...args) => vue.unref(handleMousedown) && vue.unref(handleMousedown)(...args))
            }, null, 544),
            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(thumbs), (thumb, idx) => {
              return vue.openBlock(), vue.createElementBlock("div", {
                key: thumb,
                class: vue.normalizeClass(["video-thumb-list-item", { active: vue.unref(curThumb) === thumb }]),
                onClick: ($event) => handleSelect(idx)
              }, [
                vue.createElementVNode("img", {
                  src: thumb,
                  alt: ""
                }, null, 8, _hoisted_6)
              ], 10, _hoisted_5);
            }), 128))
          ], 512)
        ], 64))
      ]);
    };
  }
});
module.exports = _sfc_main;