@cmstops/pro-compo 0.3.41 → 0.3.43

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.41",
+  "version": "0.3.43",
   "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",