@cmstops/pro-compo 0.3.40 → 0.3.42

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

@@ -6,10 +6,7 @@ var doc = require("../../../../utils/doc.js");
 var index = require("../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__ */ vue.createElementVNode("span", null, "\u7CBE\u51C6\u641C", -1);
-const _hoisted_4 = { style: { "display": "flex", "align-items": "center", "gap": "5px" } };
-const _hoisted_5 = /* @__PURE__ */ vue.createElementVNode("span", null, "\u6A21\u7CCA\u641C", -1);
-const _hoisted_6 = { class: "sort-button" };
+const _hoisted_3 = { class: "sort-button" };
 const _sfc_main = vue.defineComponent({
   ...{ name: "MediaFilter" },
   __name: "index",
@@ -24,7 +21,7 @@ const _sfc_main = vue.defineComponent({
   emits: ["update:group_id", "search"],
   setup(__props, { emit: __emit }) {
     const props = __props;
-    const column_id = vue.ref(0);
+    const column_id = vue.ref("all");
     const emit = __emit;
     const filter = vue.ref({
       keywords: "",
@@ -35,6 +32,18 @@ const _sfc_main = vue.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 = vue.computed(() => {
       const options = [
         {
@@ -92,22 +101,24 @@ const _sfc_main = vue.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;
@@ -157,6 +168,7 @@ const _sfc_main = vue.defineComponent({
               "allow-clear": "",
               class: "filter-item keyword",
               placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9\u6807\u9898",
+              style: { width: "240px" },
               onPressEnter: handleSearch
             }, {
               prepend: vue.withCtx(() => [
@@ -167,48 +179,30 @@ const _sfc_main = vue.defineComponent({
                   onSelect: checkout
                 }, {
                   default: vue.withCtx(() => [
-                    vue.createVNode(vue.unref(webVue.Option), {
-                      value: "precision",
-                      label: "\u7CBE\u51C6\u641C"
-                    }, {
-                      default: vue.withCtx(() => [
-                        vue.createElementVNode("div", _hoisted_2, [
-                          _hoisted_3,
-                          vue.createVNode(vue.unref(webVue.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: vue.withCtx(() => [
-                              vue.createVNode(vue.unref(icon.IconInfoCircle))
-                            ]),
-                            _: 1
-                          })
-                        ])
-                      ]),
-                      _: 1
-                    }),
-                    vue.createVNode(vue.unref(webVue.Option), {
-                      value: "blur",
-                      label: "\u6A21\u7CCA\u641C"
-                    }, {
-                      default: vue.withCtx(() => [
-                        vue.createElementVNode("div", _hoisted_4, [
-                          _hoisted_5,
-                          vue.createVNode(vue.unref(webVue.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: vue.withCtx(() => [
-                              vue.createVNode(vue.unref(icon.IconInfoCircle))
-                            ]),
-                            _: 1
-                          })
-                        ])
-                      ]),
-                      _: 1
-                    })
+                    (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(wordStateOptions, (item, index2) => {
+                      return vue.createVNode(vue.unref(webVue.Option), {
+                        key: index2,
+                        value: item.value,
+                        label: item.label
+                      }, {
+                        default: vue.withCtx(() => [
+                          vue.createElementVNode("div", _hoisted_2, [
+                            vue.createElementVNode("span", null, vue.toDisplayString(item.label), 1),
+                            vue.createVNode(vue.unref(webVue.Tooltip), {
+                              effect: "dark",
+                              content: item.desc,
+                              position: "right"
+                            }, {
+                              default: vue.withCtx(() => [
+                                vue.createVNode(vue.unref(icon.IconInfoCircle))
+                              ]),
+                              _: 2
+                            }, 1032, ["content"])
+                          ])
+                        ]),
+                        _: 2
+                      }, 1032, ["value", "label"]);
+                    }), 64))
                   ]),
                   _: 1
                 }, 8, ["modelValue"])
@@ -300,7 +294,7 @@ const _sfc_main = vue.defineComponent({
           ]),
           _: 1
         }),
-        vue.createElementVNode("div", _hoisted_6, [
+        vue.createElementVNode("div", _hoisted_3, [
           vue.createVNode(vue.unref(webVue.Select), {
             modelValue: filter.value.order,
             "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => filter.value.order = $event),

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

package/lib/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmstops/pro-compo",
-  "version": "0.3.40",
+  "version": "0.3.42",
   "description": "",
   "keywords": [
     "vue",
@@ -51,16 +51,16 @@
     "colorthief": "^2.4.0",
     "cropperjs": "^1.6.1",
     "dayjs": "^1.11.9",
+    "diff": "^5.2.0",
     "gif-to-canvas": "^1.0.0",
     "gif.js": "^0.2.0",
     "tus-js-client": "^3.1.1",
     "vue": "^3.2.0",
-    "vuedraggable": "^4.1.0",
-    "diff": "^5.2.0"
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
     "@arco-design/web-vue": "~2",
-    "@arco-iconbox/vue-cmstop-icons": "^0.0.29",
+    "@arco-iconbox/vue-cmstop-icons": "^0.0.30",
     "@babel/core": "^7.14.6",
     "@babel/plugin-proposal-class-properties": "^7.14.5",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
@@ -90,6 +90,7 @@
     "colorthief": "^2.4.0",
     "cropperjs": "^1.6.1",
     "dayjs": "^1.11.9",
+    "diff": "^5.2.0",
     "eslint": "^7.21.0",
     "eslint-config-airbnb-base": "^14.2.1",
     "eslint-config-prettier": "^8.3.0",
@@ -119,8 +120,7 @@
     "vue": "^3.2.0",
     "vue-loader": "^16.2.0",
     "vuedraggable": "^4.1.0",
-    "webpack": "^5.88.2",
-    "diff": "^5.2.0"
+    "webpack": "^5.88.2"
   },
   "arcoMeta": {
     "type": "vue-library",