@cmstops/pro-compo 0.3.41 → 0.3.42

package/es/videoThumb/component.js

@@ -0,0 +1,103 @@
+import { defineComponent, ref, computed, watch, onMounted, openBlock, createElementBlock, createElementVNode, unref, createCommentVNode, Fragment, renderList, normalizeClass } from "vue";
+import { DEFAULT_BASE_API } from "../config.js";
+import { useVideoThumbs } from "./scripts/useVideoThumbs.js";
+const _hoisted_1 = { class: "video-thumb" };
+const _hoisted_2 = { class: "video-player-container" };
+const _hoisted_3 = ["src"];
+const _hoisted_4 = ["onClick"];
+const _hoisted_5 = ["src"];
+const _sfc_main = defineComponent({
+  ...{ name: "videoThumb" },
+  __name: "component",
+  props: {
+    BASE_API: {},
+    src: {},
+    duration: {}
+  },
+  emits: ["select"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const BASE_API = props.BASE_API || DEFAULT_BASE_API;
+    const { thumbs, curThumb, getVideoThumbs, handleSelectThumb } = useVideoThumbs();
+    const videoThumbRef = ref();
+    const videoThumbDrager = ref();
+    const isDrag = ref(false);
+    const width = computed(() => {
+      if (!videoThumbRef.value)
+        return 0;
+      const rect = videoThumbRef.value.getBoundingClientRect();
+      return parseInt((rect.width / thumbs.value.length).toFixed(0), 10);
+    });
+    function moveDragger(moveX) {
+      if (!videoThumbDrager.value || !videoThumbRef.value)
+        return;
+      const rect = videoThumbRef.value.getBoundingClientRect();
+      if (moveX < 0 || moveX > rect.width)
+        return;
+      videoThumbDrager.value.style.left = `${moveX}px`;
+      const index = Math.floor(moveX / width.value);
+      curThumb.value = thumbs.value[index];
+    }
+    const handleMousedown = () => {
+      isDrag.value = true;
+      window.onmouseup = handleMouseup;
+      window.onmousemove = handleMousemove;
+    };
+    const handleMouseup = () => {
+      isDrag.value = false;
+      window.onmouseup = null;
+      window.onmousemove = null;
+    };
+    const handleMousemove = (e) => {
+      if (!isDrag.value)
+        return;
+      const moveX = e.x - 30;
+      moveDragger(moveX);
+    };
+    function handleSelect(idx) {
+      handleSelectThumb(idx);
+      moveDragger(idx * width.value + width.value / 2);
+    }
+    watch(
+      () => curThumb.value,
+      () => emit("select", curThumb.value)
+    );
+    onMounted(() => {
+      getVideoThumbs(BASE_API, props.src, props.duration);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          createElementVNode("img", { src: unref(curThumb) }, null, 8, _hoisted_3)
+        ]),
+        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: handleMousedown
+          }, 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_5)
+            ], 10, _hoisted_4);
+          }), 128))
+        ], 512)
+      ]);
+    };
+  }
+});
+export { _sfc_main as default };

package/es/videoThumb/index.d.ts

@@ -0,0 +1,2 @@
+declare const videoThumb: any;
+export default videoThumb;

package/es/videoThumb/index.js

@@ -0,0 +1,7 @@
+import _sfc_main from "./component.js";
+const videoThumb = Object.assign(_sfc_main, {
+  install: (app) => {
+    app.component(_sfc_main.name, _sfc_main);
+  }
+});
+export { videoThumb as default };

package/es/videoThumb/scripts/api.d.ts

@@ -0,0 +1,9 @@
+declare type EditThumbParams = {
+    url: string;
+    count: number;
+    start: number;
+    end: number;
+    search: string;
+};
+export declare function editthumb(BASE_URL: string, params: EditThumbParams): import("axios").AxiosPromise<any>;
+export {};

package/es/videoThumb/scripts/api.js

@@ -0,0 +1,11 @@
+import request from "../../utils/request.js";
+function editthumb(BASE_URL, params) {
+  const { url, count, start, end, search } = params;
+  const src = encodeURIComponent(url);
+  const n = count > 50 ? 50 : count;
+  return request(BASE_URL, {
+    url: `/poplar/v2/editthumb?src=${src}&n=${n}&starttime=${start}&endtime=${end}${search}`,
+    method: "get"
+  });
+}
+export { editthumb };

package/es/videoThumb/scripts/useVideoThumbs.d.ts

@@ -0,0 +1,7 @@
+export declare function getHMSF(time: string): string;
+export declare function useVideoThumbs(): {
+    thumbs: import("vue").Ref<any[]>;
+    curThumb: import("vue").Ref<string | undefined>;
+    getVideoThumbs: (BASE_API: string, url: string, duration: number) => Promise<void>;
+    handleSelectThumb: (idx: number) => void;
+};

package/es/videoThumb/scripts/useVideoThumbs.js

@@ -0,0 +1,48 @@
+import { ref } from "vue";
+import { editthumb } from "./api.js";
+function calculateFrameCoverCount(videoDuration) {
+  const base = 5;
+  const coefficient = 10;
+  const maxCount = 50;
+  let count = Math.log(videoDuration / base) * coefficient;
+  count = Math.min(count, maxCount);
+  return Math.ceil(count);
+}
+function useVideoThumbs() {
+  const thumbs = ref([]);
+  const loading = ref(true);
+  const curThumb = ref();
+  async function getVideoThumbs(BASE_API, url, duration) {
+    loading.value = true;
+    try {
+      const { Code, Msg } = await editthumb(BASE_API, {
+        url,
+        count: calculateFrameCoverCount(duration),
+        start: 0,
+        end: duration,
+        search: "&cover=true"
+      });
+      if (Code !== 200)
+        return;
+      const { Domain, Frames } = Msg;
+      thumbs.value = Frames.map((item) => {
+        return `${Domain}/${item}`;
+      });
+      [curThumb.value] = thumbs.value;
+    } catch (e) {
+      console.log("\u52A0\u8F7D\u5C01\u9762\u56FE\u5931\u8D25", e);
+    } finally {
+      loading.value = false;
+    }
+  }
+  function handleSelectThumb(idx) {
+    curThumb.value = thumbs.value[idx];
+  }
+  return {
+    thumbs,
+    curThumb,
+    getVideoThumbs,
+    handleSelectThumb
+  };
+}
+export { useVideoThumbs };

package/es/videoThumb/style/css.js

@@ -0,0 +1 @@
+import "./index.css";

package/es/videoThumb/style/index.css

@@ -0,0 +1,49 @@
+.video-thumb {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+  overflow: hidden;
+}
+.video-thumb .video-player-container {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  overflow: hidden;
+}
+.video-thumb .video-player-container video {
+  height: 100%;
+}
+.video-thumb .video-thumb-list {
+  position: relative;
+  display: flex;
+  height: 80px;
+  padding: 20px 0;
+}
+.video-thumb .video-thumb-list .video-thumb-list-item {
+  flex: 1;
+  cursor: pointer;
+  user-select: none;
+}
+.video-thumb .video-thumb-list .video-thumb-list-item img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: all 0.1s ease-in-out;
+  pointer-events: none;
+}
+.video-thumb .video-thumb-list .video-thumb-list-item:hover:not(.active) img {
+  transform: scale(1.05);
+}
+.video-thumb .video-thumb-list .video-thumb-list-drager {
+  position: absolute;
+  top: 20px;
+  left: 0;
+  width: 6px;
+  height: calc(100% - 40px);
+  background-color: rgb(var(--primary-5));
+  cursor: pointer;
+}

package/es/videoThumb/style/index.d.ts

@@ -0,0 +1 @@
+import './index.less';

package/es/videoThumb/style/index.js

@@ -0,0 +1 @@
+import "./index.less";

package/es/videoThumb/style/index.less

@@ -0,0 +1,61 @@
+.video-thumb {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+  overflow: hidden;
+
+  // 播放器
+  .video-player-container {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    overflow: hidden;
+
+    video {
+      height: 100%;
+    }
+  }
+
+  // 视频封面列表
+  .video-thumb-list {
+    position: relative;
+    display: flex;
+    height: 80px;
+    padding: 20px 0;
+
+    .video-thumb-list-item {
+      flex: 1;
+      cursor: pointer;
+      user-select: none;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        transition: all 0.1s ease-in-out;
+        // 不允许拖动
+        pointer-events: none;
+      }
+
+      &:hover:not(.active) {
+        img {
+          transform: scale(1.05);
+        }
+      }
+    }
+
+    .video-thumb-list-drager {
+      position: absolute;
+      top: 20px;
+      left: 0;
+      width: 6px;
+      height: calc(100% - 40px);
+      background-color: rgb(var(--primary-5));
+      cursor: pointer;
+    }
+  }
+}

package/lib/index.css

@@ -4746,3 +4746,52 @@
 .doc-history-drawer .arco-drawer-body {
   padding: 0;
 }
+.video-thumb {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+  overflow: hidden;
+}
+.video-thumb .video-player-container {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  overflow: hidden;
+}
+.video-thumb .video-player-container video {
+  height: 100%;
+}
+.video-thumb .video-thumb-list {
+  position: relative;
+  display: flex;
+  height: 80px;
+  padding: 20px 0;
+}
+.video-thumb .video-thumb-list .video-thumb-list-item {
+  flex: 1;
+  cursor: pointer;
+  user-select: none;
+}
+.video-thumb .video-thumb-list .video-thumb-list-item img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: all 0.1s ease-in-out;
+  pointer-events: none;
+}
+.video-thumb .video-thumb-list .video-thumb-list-item:hover:not(.active) img {
+  transform: scale(1.05);
+}
+.video-thumb .video-thumb-list .video-thumb-list-drager {
+  position: absolute;
+  top: 20px;
+  left: 0;
+  width: 6px;
+  height: calc(100% - 40px);
+  background-color: rgb(var(--primary-5));
+  cursor: pointer;
+}

package/lib/index.js

@@ -28,6 +28,7 @@ var index$n = require("./thumbCard/index.js");
 var index$o = require("./selectResourceModal/index.js");
 var index$p = require("./docPreview/index.js");
 var index$q = require("./docHistory/index.js");
+var index$r = require("./videoThumb/index.js");
 exports["default"] = components;
 exports.appCenter = index;
 exports.messageBox = index$1;
@@ -56,3 +57,4 @@ exports.thumbCard = index$n;
 exports.selectResourceModal = index$o;
 exports.docPreview = index$p;
 exports.docHistory = index$q;
+exports.videoThumb = index$r;

package/lib/index.less

@@ -26,3 +26,4 @@
 @import './selectResourceModal/style/index.less';
 @import './docPreview/style/index.less';
 @import './docHistory/style/index.less';
+@import './videoThumb/style/index.less';

package/lib/utils/request.js

@@ -26,6 +26,8 @@ function request(BASE_API, options) {
   service.interceptors.response.use(
     (response) => {
       const res = response.data;
+      if (res.Code != null && res.Code === 200)
+        res.code = 0;
       if ((res == null ? void 0 : res.code) !== 0) {
         if (res == null ? void 0 : res.real_error) {
           webVue.Message.warning({ content: res.real_error });

package/lib/videoThumb/component.js

@@ -0,0 +1,104 @@
+"use strict";
+var vue = require("vue");
+var config = require("../config.js");
+var useVideoThumbs = require("./scripts/useVideoThumbs.js");
+const _hoisted_1 = { class: "video-thumb" };
+const _hoisted_2 = { class: "video-player-container" };
+const _hoisted_3 = ["src"];
+const _hoisted_4 = ["onClick"];
+const _hoisted_5 = ["src"];
+const _sfc_main = vue.defineComponent({
+  ...{ name: "videoThumb" },
+  __name: "component",
+  props: {
+    BASE_API: {},
+    src: {},
+    duration: {}
+  },
+  emits: ["select"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const BASE_API = props.BASE_API || config.DEFAULT_BASE_API;
+    const { thumbs, curThumb, getVideoThumbs, handleSelectThumb } = useVideoThumbs.useVideoThumbs();
+    const videoThumbRef = vue.ref();
+    const videoThumbDrager = vue.ref();
+    const isDrag = vue.ref(false);
+    const width = vue.computed(() => {
+      if (!videoThumbRef.value)
+        return 0;
+      const rect = videoThumbRef.value.getBoundingClientRect();
+      return parseInt((rect.width / thumbs.value.length).toFixed(0), 10);
+    });
+    function moveDragger(moveX) {
+      if (!videoThumbDrager.value || !videoThumbRef.value)
+        return;
+      const rect = videoThumbRef.value.getBoundingClientRect();
+      if (moveX < 0 || moveX > rect.width)
+        return;
+      videoThumbDrager.value.style.left = `${moveX}px`;
+      const index = Math.floor(moveX / width.value);
+      curThumb.value = thumbs.value[index];
+    }
+    const handleMousedown = () => {
+      isDrag.value = true;
+      window.onmouseup = handleMouseup;
+      window.onmousemove = handleMousemove;
+    };
+    const handleMouseup = () => {
+      isDrag.value = false;
+      window.onmouseup = null;
+      window.onmousemove = null;
+    };
+    const handleMousemove = (e) => {
+      if (!isDrag.value)
+        return;
+      const moveX = e.x - 30;
+      moveDragger(moveX);
+    };
+    function handleSelect(idx) {
+      handleSelectThumb(idx);
+      moveDragger(idx * width.value + width.value / 2);
+    }
+    vue.watch(
+      () => curThumb.value,
+      () => emit("select", curThumb.value)
+    );
+    vue.onMounted(() => {
+      getVideoThumbs(BASE_API, props.src, props.duration);
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        vue.createElementVNode("div", _hoisted_2, [
+          vue.createElementVNode("img", { src: vue.unref(curThumb) }, null, 8, _hoisted_3)
+        ]),
+        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: handleMousedown
+          }, 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_5)
+            ], 10, _hoisted_4);
+          }), 128))
+        ], 512)
+      ]);
+    };
+  }
+});
+module.exports = _sfc_main;

package/lib/videoThumb/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var component = require("./component.js");
+const videoThumb = Object.assign(component, {
+  install: (app) => {
+    app.component(component.name, component);
+  }
+});
+module.exports = videoThumb;

package/lib/videoThumb/scripts/api.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+var request = require("../../utils/request.js");
+function editthumb(BASE_URL, params) {
+  const { url, count, start, end, search } = params;
+  const src = encodeURIComponent(url);
+  const n = count > 50 ? 50 : count;
+  return request(BASE_URL, {
+    url: `/poplar/v2/editthumb?src=${src}&n=${n}&starttime=${start}&endtime=${end}${search}`,
+    method: "get"
+  });
+}
+exports.editthumb = editthumb;

package/lib/videoThumb/scripts/useVideoThumbs.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+var vue = require("vue");
+var api = require("./api.js");
+function calculateFrameCoverCount(videoDuration) {
+  const base = 5;
+  const coefficient = 10;
+  const maxCount = 50;
+  let count = Math.log(videoDuration / base) * coefficient;
+  count = Math.min(count, maxCount);
+  return Math.ceil(count);
+}
+function useVideoThumbs() {
+  const thumbs = vue.ref([]);
+  const loading = vue.ref(true);
+  const curThumb = vue.ref();
+  async function getVideoThumbs(BASE_API, url, duration) {
+    loading.value = true;
+    try {
+      const { Code, Msg } = await api.editthumb(BASE_API, {
+        url,
+        count: calculateFrameCoverCount(duration),
+        start: 0,
+        end: duration,
+        search: "&cover=true"
+      });
+      if (Code !== 200)
+        return;
+      const { Domain, Frames } = Msg;
+      thumbs.value = Frames.map((item) => {
+        return `${Domain}/${item}`;
+      });
+      [curThumb.value] = thumbs.value;
+    } catch (e) {
+      console.log("\u52A0\u8F7D\u5C01\u9762\u56FE\u5931\u8D25", e);
+    } finally {
+      loading.value = false;
+    }
+  }
+  function handleSelectThumb(idx) {
+    curThumb.value = thumbs.value[idx];
+  }
+  return {
+    thumbs,
+    curThumb,
+    getVideoThumbs,
+    handleSelectThumb
+  };
+}
+exports.useVideoThumbs = useVideoThumbs;

package/lib/videoThumb/style/css.js

@@ -0,0 +1,2 @@
+"use strict";
+require("./index.css");

package/lib/videoThumb/style/index.css

@@ -0,0 +1,49 @@
+.video-thumb {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+  overflow: hidden;
+}
+.video-thumb .video-player-container {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  overflow: hidden;
+}
+.video-thumb .video-player-container video {
+  height: 100%;
+}
+.video-thumb .video-thumb-list {
+  position: relative;
+  display: flex;
+  height: 80px;
+  padding: 20px 0;
+}
+.video-thumb .video-thumb-list .video-thumb-list-item {
+  flex: 1;
+  cursor: pointer;
+  user-select: none;
+}
+.video-thumb .video-thumb-list .video-thumb-list-item img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: all 0.1s ease-in-out;
+  pointer-events: none;
+}
+.video-thumb .video-thumb-list .video-thumb-list-item:hover:not(.active) img {
+  transform: scale(1.05);
+}
+.video-thumb .video-thumb-list .video-thumb-list-drager {
+  position: absolute;
+  top: 20px;
+  left: 0;
+  width: 6px;
+  height: calc(100% - 40px);
+  background-color: rgb(var(--primary-5));
+  cursor: pointer;
+}

package/lib/videoThumb/style/index.js

@@ -0,0 +1,2 @@
+"use strict";
+require("./index.less");