@cmstops/pro-compo 0.3.40 → 0.3.42

package/es/contentModal/components/ViewAllColumn/MediaFilter/index.js

@@ -1,14 +1,11 @@
-import { defineComponent, ref, computed, watch, openBlock, createElementBlock, createVNode, unref, withCtx, createElementVNode, Fragment, renderList, createBlock, withDirectives, createTextVNode, vShow } from "vue";
+import { defineComponent, ref, computed, watch, openBlock, createElementBlock, createVNode, unref, withCtx, Fragment, renderList, createElementVNode, toDisplayString, createBlock, withDirectives, createTextVNode, vShow } from "vue";
 import { Space, Input, Select, Option, Tooltip, Button } from "@arco-design/web-vue";
 import { IconInfoCircle, IconRefresh } from "@arco-design/web-vue/es/icon";
 import { docSeries, docThumbMap } from "../../../../utils/doc.js";
 import _sfc_main$1 from "../columnTree/index.js";
 const _hoisted_1 = { class: "media-filter-container" };
 const _hoisted_2 = { style: { "display": "flex", "align-items": "center", "gap": "5px" } };
-const _hoisted_3 = /* @__PURE__ */ createElementVNode("span", null, "\u7CBE\u51C6\u641C", -1);
-const _hoisted_4 = { style: { "display": "flex", "align-items": "center", "gap": "5px" } };
-const _hoisted_5 = /* @__PURE__ */ createElementVNode("span", null, "\u6A21\u7CCA\u641C", -1);
-const _hoisted_6 = { class: "sort-button" };
+const _hoisted_3 = { class: "sort-button" };
 const _sfc_main = defineComponent({
   ...{ name: "MediaFilter" },
   __name: "index",
@@ -23,7 +20,7 @@ const _sfc_main = defineComponent({
   emits: ["update:group_id", "search"],
   setup(__props, { emit: __emit }) {
     const props = __props;
-    const column_id = ref(0);
+    const column_id = ref("all");
     const emit = __emit;
     const filter = ref({
       keywords: "",
@@ -34,6 +31,18 @@ const _sfc_main = defineComponent({
       order: "create_time",
       wordState: "precision"
     });
+    const wordStateOptions = [
+      {
+        value: "precision",
+        label: "\u7CBE\u51C6\u641C",
+        desc: "\u4F1A\u4EE5\u8F93\u5165\u7684\u5B8C\u6574\u5173\u952E\u8BCD\u201C\u6210\u957F\u201D\u8FDB\u884C\u641C\u7D22\uFF0C\u641C\u7D22\u7ED3\u679C\u5173\u8054\u6027\u66F4\u9AD8\uFF0C\u4F46\u641C\u7D22\u7ED3\u679C\u66F4\u5C11"
+      },
+      {
+        value: "blur",
+        label: "\u6A21\u7CCA\u641C",
+        desc: "\u4F1A\u5C06\u8F93\u5165\u5185\u5BB9\u5206\u8BCD\uFF0C\u4F8B\u5982\u201C\u6210\u957F\u201D\u4F1A\u5206\u4E3A\u201C\u6210\u201D\u3001\u201C\u957F\u201D\u3001\u201C\u6210\u957F\u201D\uFF0C\u5185\u5BB9\u5305\u542B\u4E09\u4E2A\u8BCD\u4E2D\u4EFB\u610F\u4E00\u4E2A\u5747\u4F1A\u663E\u793A\u51FA\u6765\uFF0C\u641C\u7D22\u5185\u5BB9\u66F4\u52A0\u4E30\u5BCC"
+      }
+    ];
     const bannerOptions = computed(() => {
       const options = [
         {
@@ -91,22 +100,24 @@ const _sfc_main = defineComponent({
       return filter.value.keywords || series || filter.value.cover_type || banner || filter.value.sort !== -1;
     });
     const reset = () => {
-      filter.value = {
+      const _set = {
         keywords: "",
         cover_type: "",
         sort: -1,
         order: "create_time"
       };
+      Object.assign(filter.value, _set);
       if (props.banner !== "all") {
         filter.value.banner = props.banner;
       } else {
         filter.value.banner = "";
       }
-      if (props.series !== "all") {
+      if (props.series !== "all" && props.series.split(",").length === 1) {
         filter.value.type = props.series;
       } else {
         filter.value.type = "";
       }
+      column_id.value = "all";
     };
     const checkout = (type) => {
       filter.value.wordState = type;
@@ -156,6 +167,7 @@ const _sfc_main = defineComponent({
               "allow-clear": "",
               class: "filter-item keyword",
               placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9\u6807\u9898",
+              style: { width: "240px" },
               onPressEnter: handleSearch
             }, {
               prepend: withCtx(() => [
@@ -166,48 +178,30 @@ const _sfc_main = defineComponent({
                   onSelect: checkout
                 }, {
                   default: withCtx(() => [
-                    createVNode(unref(Option), {
-                      value: "precision",
-                      label: "\u7CBE\u51C6\u641C"
-                    }, {
-                      default: withCtx(() => [
-                        createElementVNode("div", _hoisted_2, [
-                          _hoisted_3,
-                          createVNode(unref(Tooltip), {
-                            effect: "dark",
-                            content: "\u4F1A\u4EE5\u8F93\u5165\u7684\u5B8C\u6574\u5173\u952E\u8BCD\u201C\u6210\u957F\u201D\u8FDB\u884C\u641C\u7D22\uFF0C\u641C\u7D22\u7ED3\u679C\u5173\u8054\u6027\u66F4\u9AD8\uFF0C\u4F46\u641C\u7D22\u7ED3\u679C\u66F4\u5C11",
-                            position: "right"
-                          }, {
-                            default: withCtx(() => [
-                              createVNode(unref(IconInfoCircle))
-                            ]),
-                            _: 1
-                          })
-                        ])
-                      ]),
-                      _: 1
-                    }),
-                    createVNode(unref(Option), {
-                      value: "blur",
-                      label: "\u6A21\u7CCA\u641C"
-                    }, {
-                      default: withCtx(() => [
-                        createElementVNode("div", _hoisted_4, [
-                          _hoisted_5,
-                          createVNode(unref(Tooltip), {
-                            effect: "dark",
-                            content: "\u4F1A\u5C06\u8F93\u5165\u5185\u5BB9\u5206\u8BCD\uFF0C\u4F8B\u5982\u201C\u6210\u957F\u201D\u4F1A\u5206\u4E3A\u201C\u6210\u201D\u3001\u201C\u957F\u201D\u3001\u201C\u6210\u957F\u201D\uFF0C\u5185\u5BB9\u5305\u542B\u4E09\u4E2A\u8BCD\u4E2D\u4EFB\u610F\u4E00\u4E2A\u5747\u4F1A\u663E\u793A\u51FA\u6765\uFF0C\u641C\u7D22\u5185\u5BB9\u66F4\u52A0\u4E30\u5BCC",
-                            position: "right"
-                          }, {
-                            default: withCtx(() => [
-                              createVNode(unref(IconInfoCircle))
-                            ]),
-                            _: 1
-                          })
-                        ])
-                      ]),
-                      _: 1
-                    })
+                    (openBlock(), createElementBlock(Fragment, null, renderList(wordStateOptions, (item, index) => {
+                      return createVNode(unref(Option), {
+                        key: index,
+                        value: item.value,
+                        label: item.label
+                      }, {
+                        default: withCtx(() => [
+                          createElementVNode("div", _hoisted_2, [
+                            createElementVNode("span", null, toDisplayString(item.label), 1),
+                            createVNode(unref(Tooltip), {
+                              effect: "dark",
+                              content: item.desc,
+                              position: "right"
+                            }, {
+                              default: withCtx(() => [
+                                createVNode(unref(IconInfoCircle))
+                              ]),
+                              _: 2
+                            }, 1032, ["content"])
+                          ])
+                        ]),
+                        _: 2
+                      }, 1032, ["value", "label"]);
+                    }), 64))
                   ]),
                   _: 1
                 }, 8, ["modelValue"])
@@ -299,7 +293,7 @@ const _sfc_main = defineComponent({
           ]),
           _: 1
         }),
-        createElementVNode("div", _hoisted_6, [
+        createElementVNode("div", _hoisted_3, [
           createVNode(unref(Select), {
             modelValue: filter.value.order,
             "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => filter.value.order = $event),

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