@cmstops/pro-compo 0.3.42 → 0.3.44

package/lib/selectResourceModal/style/index.css

@@ -71,10 +71,18 @@
   overflow: hidden;
 }
 .list-panel-wrapper .list-selected-record .list-selected-item .item-thumb {
+  position: relative;
   width: 50px;
   height: 38px;
   overflow: hidden;
 }
+.list-panel-wrapper .list-selected-record .list-selected-item .item-thumb .item-tag {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  color: white;
+  transform: translate(-50%, -50%);
+}
 .list-panel-wrapper .list-selected-record .list-selected-item .item-alias {
   flex: 1;
   overflow: hidden;
@@ -104,13 +112,31 @@
 .card-wrapper-image {
   position: relative;
   overflow: hidden;
-  cursor: pointer;
 }
 .card-wrapper-image .card-wrapper {
   position: relative;
   overflow: hidden;
+  border-radius: 2px;
+  transition: all 0.3s ease-in-out;
   aspect-ratio: 4 / 3;
 }
+.card-wrapper-image .card-wrapper.disable:not(.active) {
+  opacity: 0.4;
+}
+.card-wrapper-image .card-wrapper .mask {
+  position: absolute;
+  top: 0;
+  z-index: 9;
+  display: none;
+  width: 100%;
+  height: 100%;
+  font-size: 18px;
+  background: rgba(0, 0, 0, 0.3);
+  cursor: pointer;
+}
+.card-wrapper-image .card-wrapper.active .mask {
+  display: block;
+}
 .card-wrapper-image .card-alias {
   width: 100%;
   margin-top: 6px;
@@ -120,6 +146,8 @@
   line-height: 22px;
   white-space: nowrap;
   text-overflow: ellipsis;
+  user-select: none;
+  -webkit-user-drag: none;
 }
 .card-wrapper-image:hover .check-box-wrapper .check-box,
 .card-wrapper-image .check-box-wrapper .check-box.active {
@@ -129,6 +157,7 @@
   position: absolute;
   top: 8px;
   left: 8px;
+  z-index: 10;
   cursor: pointer;
 }
 .card-wrapper-image .check-box-wrapper .check-box {

package/lib/selectResourceModal/style/listCardWrapper.less

@@ -1,13 +1,34 @@
 .card-wrapper-image {
   position: relative;
   overflow: hidden;
-  cursor: pointer;
 
   .card-wrapper {
     position: relative;
     overflow: hidden;
+    border-radius: 2px;
+    transition: all 0.3s ease-in-out;
     // 宽高：43
     aspect-ratio: 4 / 3;
+
+    &.disable:not(.active) {
+      opacity: 0.4;
+    }
+
+    .mask {
+      position: absolute;
+      top: 0;
+      z-index: 9;
+      display: none;
+      width: 100%;
+      height: 100%;
+      font-size: 18px;
+      background: rgba(0, 0, 0, 0.3);
+      cursor: pointer;
+    }
+
+    &.active .mask {
+      display: block;
+    }
   }
 
   .card-alias {
@@ -19,6 +40,8 @@
     line-height: 22px;
     white-space: nowrap;
     text-overflow: ellipsis;
+    user-select: none;
+    -webkit-user-drag: none;
   }
 
   &:hover .check-box-wrapper .check-box,
@@ -30,6 +53,7 @@
     position: absolute;
     top: 8px;
     left: 8px;
+    z-index: 10;
     cursor: pointer;
 
     .check-box {

package/lib/selectResourceModal/style/listSelected.less

@@ -59,9 +59,18 @@
       overflow: hidden;
 
       .item-thumb {
+        position: relative;
         width: 50px;
         height: 38px;
         overflow: hidden;
+
+        .item-tag {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          color: white;
+          transform: translate(-50%, -50%);
+        }
       }
 
       .item-alias {

package/lib/thumbCard/component.js

@@ -10,9 +10,13 @@ const _hoisted_1 = {
   key: 0,
   class: "thumb-upload-loading"
 };
-const _hoisted_2 = { class: "thumb-handler-list" };
-const _hoisted_3 = ["onClick"];
-const _hoisted_4 = {
+const _hoisted_2 = {
+  key: 0,
+  class: "thumb-upload-text"
+};
+const _hoisted_3 = { class: "thumb-handler-list" };
+const _hoisted_4 = ["onClick"];
+const _hoisted_5 = {
   key: 3,
   class: "thumb-select-tag"
 };
@@ -40,7 +44,7 @@ const _sfc_main = vue.defineComponent({
       var _a;
       return ((_a = props.meta) == null ? void 0 : _a.progress) != null;
     });
-    const thumb = vue.computed(() => {
+    const realThumb = vue.computed(() => {
       if (["image", "video"].includes(props.catalog || "")) {
         return props.thumb || props.url || "";
       }
@@ -76,7 +80,7 @@ const _sfc_main = vue.defineComponent({
       emits("edit", { key });
     }
     return (_ctx, _cache) => {
-      var _a, _b;
+      var _a, _b, _c;
       return vue.openBlock(), vue.createElementBlock("div", {
         class: vue.normalizeClass(["thumb-select-wrapper", classList.value]),
         style: vue.normalizeStyle(styleObject.value)
@@ -84,8 +88,9 @@ const _sfc_main = vue.defineComponent({
         isUploading.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
           vue.createVNode(vue.unref(webVue.Progress), {
             type: "circle",
-            percent: ((_a = _ctx.meta) == null ? void 0 : _a.progress) / 10
-          }, null, 8, ["percent"])
+            percent: (_a = _ctx.meta) == null ? void 0 : _a.progress
+          }, null, 8, ["percent"]),
+          ((_b = _ctx.meta) == null ? void 0 : _b.isTrans) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, "\u8F6C\u7801\u4E2D...")) : vue.createCommentVNode("v-if", true)
         ])) : _ctx.isEdit && !_ctx.url ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
           vue.createCommentVNode(" \u7F16\u8F91\u6A21\u5F0F\u4E0B\u53EF\u4F7F\u7528\u60AC\u6D6E\u6846\u5FEB\u901F\u63D2\u5165\u7D20\u6750 "),
           vue.createVNode(vue.unref(webVue.Dropdown), {
@@ -124,20 +129,23 @@ const _sfc_main = vue.defineComponent({
           _ctx.catalog ? (vue.openBlock(), vue.createBlock(vue.unref(webVue.Image), vue.mergeProps({
             key: 0,
             class: "thumb-image",
-            src: thumb.value
+            src: realThumb.value
           }, aImageAttr.value), null, 16, ["src"])) : vue.createCommentVNode("v-if", true),
           vue.createCommentVNode(" \u5C55\u793A\u6A21\u5F0F "),
-          vue.createElementVNode("div", _hoisted_2, [
+          vue.createElementVNode("div", _hoisted_3, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.handlersKey, (item) => {
               return vue.openBlock(), vue.createElementBlock("div", {
                 key: item.key,
                 class: "handler-item",
                 onClick: vue.withModifiers(() => handleOption(item.key), ["stop"])
-              }, vue.toDisplayString(item.label), 9, _hoisted_3);
+              }, vue.toDisplayString(item.label), 9, _hoisted_4);
             }), 128))
           ])
         ], 64)) : vue.createCommentVNode("v-if", true),
-        ["video", "audio"].includes(_ctx.catalog) && _ctx.meta ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, vue.toDisplayString(vue.unref(index.mediaTime)((_b = _ctx.meta) == null ? void 0 : _b.length)), 1)) : vue.createCommentVNode("v-if", true)
+        ["video", "audio"].includes(_ctx.catalog) && _ctx.meta ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
+          _ctx.catalog === "video" ? (vue.openBlock(), vue.createBlock(vue.unref(vueCmstopIcons.IconVideoTag), { key: 0 })) : (vue.openBlock(), vue.createBlock(vue.unref(vueCmstopIcons.IconAudioTag), { key: 1 })),
+          vue.createTextVNode(" " + vue.toDisplayString(vue.unref(index.mediaTime)((_c = _ctx.meta) == null ? void 0 : _c.length)), 1)
+        ])) : vue.createCommentVNode("v-if", true)
       ], 6);
     };
   }

package/lib/thumbCard/style/index.css

@@ -11,6 +11,7 @@
 }
 .thumb-select-wrapper .thumb-upload-loading {
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 100%;
@@ -29,6 +30,8 @@
 .thumb-select-wrapper .thumb-image img {
   width: 100%;
   height: 100%;
+  user-select: none;
+  -webkit-user-drag: none;
 }
 .thumb-select-wrapper .thumb-handler-list {
   position: absolute;
@@ -68,9 +71,13 @@
   position: absolute;
   right: 5px;
   bottom: 5px;
-  padding: 2px 10px;
+  display: flex;
+  gap: 2px;
+  align-items: center;
+  padding: 2px 5px;
   color: #fff;
   font-size: 12px;
+  line-height: 14px;
   background-color: rgba(0, 0, 0, 0.5);
   border-radius: 16px;
   opacity: 1;

package/lib/thumbCard/style/index.less

@@ -13,6 +13,7 @@
   // loading 模式
   .thumb-upload-loading {
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
     width: 100%;
@@ -37,6 +38,8 @@
     img {
       width: 100%;
       height: 100%;
+      user-select: none;
+      -webkit-user-drag: none;
     }
   }
 
@@ -89,9 +92,13 @@
     position: absolute;
     right: 5px;
     bottom: 5px;
-    padding: 2px 10px;
+    display: flex;
+    gap: 2px;
+    align-items: center;
+    padding: 2px 5px;
     color: #fff;
     font-size: 12px;
+    line-height: 14px;
     background-color: rgba(0, 0, 0, 0.5);
     border-radius: 16px;
     opacity: 1;

package/lib/utils/transcodeMedia.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+var request = require("./request.js");
+function getTranscodingProgress(BASE_API, id) {
+  return request(BASE_API, {
+    url: `/poplar/v2/transcoding/progress?id=${id}`,
+    method: "get"
+  });
+}
+class TranscodingTask {
+  constructor(file) {
+    this.file = file;
+    this.pollCount = 0;
+  }
+  start(BASE_API, callback) {
+    if (!this.file.id)
+      return Promise.reject(new Error("file error"));
+    return new Promise((resolve, reject) => {
+      const handleTranscoding = async () => {
+        const { code, message } = await getTranscodingProgress(
+          BASE_API,
+          this.file.id
+        );
+        if (code !== 0)
+          reject(new Error(message));
+        if (message.state === 1) {
+          callback(message.progress);
+          if (message.progress === 1 && ++this.pollCount === 3) {
+            this.abort();
+            resolve(false);
+          }
+        } else if (message.state === 2) {
+          this.abort();
+          resolve(false);
+        } else if (message.state === 3) {
+          this.abort();
+          resolve(true);
+        }
+      };
+      this.taskInterval = setInterval(handleTranscoding, 5e3);
+    });
+  }
+  abort() {
+    clearInterval(this.taskInterval);
+    this.taskInterval = null;
+  }
+}
+exports.TranscodingTask = TranscodingTask;
+exports.getTranscodingProgress = getTranscodingProgress;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmstops/pro-compo",
-  "version": "0.3.42",
+  "version": "0.3.44",
   "description": "",
   "keywords": [
     "vue",
@@ -60,7 +60,7 @@
   },
   "devDependencies": {
     "@arco-design/web-vue": "~2",
-    "@arco-iconbox/vue-cmstop-icons": "^0.0.30",
+    "@arco-iconbox/vue-cmstop-icons": "^0.0.31",
     "@babel/core": "^7.14.6",
     "@babel/plugin-proposal-class-properties": "^7.14.5",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",