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

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

import { defineComponent, ref, computed, watch, onMounted, openBlock, createElementBlock, unref, createVNode, createBlock, Fragment, createElementVNode, createCommentVNode, renderList, normalizeClass } from "vue";
import { Spin } from "@arco-design/web-vue";
import { DEFAULT_BASE_API } from "../config.js";
import { useVideoThumbs, useDragger } from "./scripts/useVideoThumbs.js";
import emptyData from "../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 = 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 || DEFAULT_BASE_API;
    const { thumbs, loading, curThumb, getVideoThumbs, handleSelectThumb } = useVideoThumbs();
    const videoThumbRef = ref();
    const videoThumbDrager = ref();
    const width = computed(() => {
      if (!videoThumbRef.value)
        return 0;
      const rect = videoThumbRef.value.getBoundingClientRect();
      return parseInt((rect.width / thumbs.value.length).toFixed(0), 10);
    });
    const startPos = 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 index = Math.floor(pos / width.value);
      curThumb.value = thumbs.value[index < thumbs.value.length ? index : 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 } = useDragger(moveDragger, upDragger, downDragger);
    watch(
      () => curThumb.value,
      () => {
        emit("select", curThumb.value);
        emit("update:value", curThumb.value);
      },
      { immediate: true }
    );
    onMounted(() => {
      getVideoThumbs(BASE_API, props.src, props.duration);
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1, [
        unref(loading) ? (openBlock(), createElementBlock("div", _hoisted_2, [
          createVNode(unref(Spin), {
            loading: unref(loading),
            tip: "\u751F\u6210\u89C6\u9891\u5C01\u9762\u4E2D..."
          }, null, 8, ["loading"])
        ])) : unref(thumbs).length === 0 ? (openBlock(), createBlock(unref(emptyData), {
          key: 1,
          type: "empty"
        })) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
          createElementVNode("div", _hoisted_3, [
            createElementVNode("img", { src: unref(curThumb) }, null, 8, _hoisted_4)
          ]),
          createCommentVNode(" \u5C01\u9762\u56FE "),
          createElementVNode("div", {
            ref_key: "videoThumbRef",
            ref: videoThumbRef,
            class: "video-thumb-list"
          }, [
            createElementVNode("div", {
              ref_key: "videoThumbDrager",
              ref: videoThumbDrager,
              class: "video-thumb-list-drager",
              onMousedown: _cache[0] || (_cache[0] = (...args) => unref(handleMousedown) && unref(handleMousedown)(...args))
            }, null, 544),
            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(thumbs), (thumb, idx) => {
              return openBlock(), createElementBlock("div", {
                key: thumb,
                class: normalizeClass(["video-thumb-list-item", { active: unref(curThumb) === thumb }]),
                onClick: ($event) => handleSelect(idx)
              }, [
                createElementVNode("img", {
                  src: thumb,
                  alt: ""
                }, null, 8, _hoisted_6)
              ], 10, _hoisted_5);
            }), 128))
          ], 512)
        ], 64))
      ]);
    };
  }
});
export { _sfc_main as default };