@cmstops/pro-compo 0.3.41 → 0.3.43

package/es/docHistory/scripts/useDocHistory.js

@@ -26,7 +26,7 @@ function useDocHistory(BASE_API) {
       const { code, message } = await getDocHistory(BASE_API, id.value, pub.value);
       if (code !== 0)
         return;
-      list.value = message;
+      list.value = message || [];
       handleSelect(0);
     } catch (e) {
       console.log(e);

package/es/hooks/useMediaContext.d.ts

@@ -0,0 +1,12 @@
+export declare function useVideoContext(callback: (data?: any) => any): {
+    options: import("vue").Ref<any[]>;
+    videoContext: import("vue").Ref<HTMLVideoElement | null>;
+    loading: import("vue").Ref<boolean>;
+    playing: import("vue").Ref<boolean>;
+    currentTime: import("vue").Ref<number>;
+    handleOption: (key: string, value: number) => void;
+    togglePlay: () => void;
+    initVideoContext: (selector: string) => void;
+    seekVideo: (time: number) => void;
+    handleOnCanPlay: () => void;
+};

package/es/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/es/index.d.ts

@@ -26,3 +26,4 @@ export { default as thumbCard } from './thumbCard';
 export { default as selectResourceModal } from './selectResourceModal';
 export { default as docPreview } from './docPreview';
 export { default as docHistory } from './docHistory';
+export { default as videoThumb } from './videoThumb';

package/es/index.js

@@ -26,3 +26,4 @@ export { default as thumbCard } from "./thumbCard/index.js";
 export { default as selectResourceModal } from "./selectResourceModal/index.js";
 export { default as docPreview } from "./docPreview/index.js";
 export { default as docHistory } from "./docHistory/index.js";
+export { default as videoThumb } from "./videoThumb/index.js";

package/es/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/es/utils/request.js

@@ -21,6 +21,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) {
           Message.warning({ content: res.real_error });

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/docHistory/component.js

@@ -5,6 +5,7 @@ var config = require("../config.js");
 var useDocHistory = require("./scripts/useDocHistory.js");
 var index$1 = require("./components/DocHistoryList/index.js");
 var index = require("./components/DocDiffPanel/index.js");
+var index$2 = require("../emptyData/index.js");
 const _hoisted_1 = { class: "doc-history-wrap" };
 const _hoisted_2 = { class: "doc-diff-panel" };
 const _hoisted_3 = { class: "doc-history-list" };
@@ -54,43 +55,49 @@ const _sfc_main = vue.defineComponent({
       }, {
         default: vue.withCtx(() => [
           vue.createElementVNode("div", _hoisted_1, [
-            vue.createElementVNode("div", _hoisted_2, [
-              vue.createVNode(vue.unref(webVue.Spin), {
-                loading: vue.unref(loading),
-                style: { "height": "100%", "width": "100%" }
-              }, {
-                default: vue.withCtx(() => [
-                  vue.createVNode(vue.unref(webVue.Scrollbar), {
-                    "outer-style": { height: "100%" },
-                    style: { "height": "100%", "overflow": "auto" }
-                  }, {
-                    default: vue.withCtx(() => [
-                      vue.unref(diffContent) ? (vue.openBlock(), vue.createBlock(index, {
-                        key: 0,
-                        doc: vue.unref(diffContent)
-                      }, null, 8, ["doc"])) : vue.createCommentVNode("v-if", true)
-                    ]),
-                    _: 1
-                  })
-                ]),
-                _: 1
-              }, 8, ["loading"])
-            ]),
-            vue.createElementVNode("div", _hoisted_3, [
-              vue.createVNode(vue.unref(webVue.Scrollbar), {
-                "outer-style": { height: "100%" },
-                style: { "height": "100%", "overflow": "auto" }
-              }, {
-                default: vue.withCtx(() => [
-                  vue.createVNode(index$1, {
-                    list: vue.unref(list),
-                    current: vue.unref(current),
-                    onSelect: vue.unref(handleSelect)
-                  }, null, 8, ["list", "current", "onSelect"])
-                ]),
-                _: 1
-              })
-            ])
+            vue.unref(list).length ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+              vue.createElementVNode("div", _hoisted_2, [
+                vue.createVNode(vue.unref(webVue.Spin), {
+                  loading: vue.unref(loading),
+                  style: { "height": "100%", "width": "100%" }
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(vue.unref(webVue.Scrollbar), {
+                      "outer-style": { height: "100%" },
+                      style: { "height": "100%", "overflow": "auto" }
+                    }, {
+                      default: vue.withCtx(() => [
+                        vue.unref(diffContent) ? (vue.openBlock(), vue.createBlock(index, {
+                          key: 0,
+                          doc: vue.unref(diffContent)
+                        }, null, 8, ["doc"])) : vue.createCommentVNode("v-if", true)
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  _: 1
+                }, 8, ["loading"])
+              ]),
+              vue.createElementVNode("div", _hoisted_3, [
+                vue.createVNode(vue.unref(webVue.Scrollbar), {
+                  "outer-style": { height: "100%" },
+                  style: { "height": "100%", "overflow": "auto" }
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(index$1, {
+                      list: vue.unref(list),
+                      current: vue.unref(current),
+                      onSelect: vue.unref(handleSelect)
+                    }, null, 8, ["list", "current", "onSelect"])
+                  ]),
+                  _: 1
+                })
+              ])
+            ], 64)) : (vue.openBlock(), vue.createBlock(vue.unref(index$2), {
+              key: 1,
+              type: "empty",
+              "custom-tip": "\u6682\u65E0\u5386\u53F2\u8BB0\u5F55"
+            }))
           ])
         ]),
         _: 1

package/lib/docHistory/scripts/useDocHistory.js

@@ -28,7 +28,7 @@ function useDocHistory(BASE_API) {
       const { code, message } = await getDocHistory(BASE_API, id.value, pub.value);
       if (code !== 0)
         return;
-      list.value = message;
+      list.value = message || [];
       handleSelect(0);
     } catch (e) {
       console.log(e);

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 });