@fonixtree/magic-design 1.0.152 → 1.0.153

package/es/common/ProductCardModal/index.js

@@ -63,7 +63,8 @@ function ProductCardModal(_a) {
   };
 
   var randomRotateY = function randomRotateY() {
-    return Math.floor(Math.random() * 21) - 10;
+    // return Math.floor(Math.random() * 21) - 10;
+    return Math.floor((index % 2 === 0 ? -index : index) * 0.1 * 21) - 10;
   };
 
   var handleScroll = function handleScroll(e) {

package/es/common/ProductCardModal/index.less

@@ -61,6 +61,7 @@
         top: 5%;
         right: 5%;
         cursor: pointer;
+        z-index: 3;
       }
 
       .dotIcon {
@@ -96,6 +97,7 @@
         position: absolute;
         bottom: 25%;
         left: 55%;
+        z-index: 3;
         cursor: pointer;
       }
     }

package/es/composite-comp/dito/components/SlideImage/pc/components/VideoItem/index.js

@@ -54,10 +54,12 @@ function (_super) {
       inside: false,
       isNearCenter: false,
       flag: false,
-      corner: ''
+      corner: '',
+      videoPoster: ''
     };
     _this.videoRef = /*#__PURE__*/_react["default"].createRef();
     _this.cardRef = /*#__PURE__*/_react["default"].createRef();
+    _this.canvasRef = /*#__PURE__*/_react["default"].createRef();
 
     _this.onMouseEnter = function () {
       var _a;
@@ -157,9 +159,32 @@ function (_super) {
   }
 
   VideoItem.prototype.componentDidMount = function () {
+    var _this = this;
+
     var dom = this.cardRef.current;
     dom.addEventListener('mousemove', this.handleMouseMove);
     dom.addEventListener('mouseleave', this.handleMouseLeave);
+
+    if (this.videoRef.current) {
+      var video_1 = this.videoRef.current;
+      var canvas_1 = this.canvasRef.current;
+      video_1.addEventListener('loadedmetadata', function () {
+        // 确保跳转到第一帧
+        video_1.currentTime = 0;
+      });
+      video_1.addEventListener('seeked', function () {
+        // 设置Canvas尺寸与视频一致
+        canvas_1.width = video_1.offsetWidth;
+        canvas_1.height = video_1.offsetHeight; // 绘制视频帧到Canvas
+
+        var ctx = canvas_1.getContext('2d');
+        ctx.drawImage(video_1, 0, 0, canvas_1.width, canvas_1.height); // 转换为缩略图
+
+        _this.setState({
+          videoPoster: canvas_1.toDataURL('image/png')
+        });
+      });
+    }
   };
 
   VideoItem.prototype.componentWillUnmount = function () {
@@ -171,21 +196,23 @@ function (_super) {
   VideoItem.prototype.render = function () {
     var _a;
 
-    var _b, _c, _d, _e, _f;
+    var _b, _c, _d, _e, _f, _g;
 
     var data = this.props.data;
-    var _g = this.state,
-        playing = _g.playing,
-        inside = _g.inside,
-        isNearCenter = _g.isNearCenter,
-        flag = _g.flag,
-        corner = _g.corner;
+    var _h = this.state,
+        playing = _h.playing,
+        inside = _h.inside,
+        isNearCenter = _h.isNearCenter,
+        flag = _h.flag,
+        corner = _h.corner,
+        videoPoster = _h.videoPoster;
+    var img = ((_c = (_b = data.overilay) === null || _b === void 0 ? void 0 : _b.content) === null || _c === void 0 ? void 0 : _c.pcImgSrc) || videoPoster;
     return /*#__PURE__*/_react["default"].createElement("div", {
       ref: this.cardRef,
       className: (0, _classnames["default"])('slide-image-video-wrap', (_a = {}, _a[corner] = inside && !isNearCenter && !flag, _a)),
       onMouseEnter: this.onMouseEnter,
       onMouseLeave: this.onMouseLeave
-    }, ((_b = data.video) === null || _b === void 0 ? void 0 : _b.sourceUrl) && /*#__PURE__*/_react["default"].createElement("video", {
+    }, ((_d = data.video) === null || _d === void 0 ? void 0 : _d.sourceUrl) && /*#__PURE__*/_react["default"].createElement("video", {
       ref: this.videoRef,
       loop: true,
       muted: true,
@@ -194,15 +221,19 @@ function (_super) {
         visibility: playing ? 'visible' : 'hidden'
       }
     }, /*#__PURE__*/_react["default"].createElement("source", {
-      src: (_c = data.video) === null || _c === void 0 ? void 0 : _c.sourceUrl,
+      src: (_e = data.video) === null || _e === void 0 ? void 0 : _e.sourceUrl,
       type: "video/mp4"
-    })), ((_d = data.overilay) === null || _d === void 0 ? void 0 : _d.open) && /*#__PURE__*/_react["default"].createElement("img", {
+    })), ((_f = data.overilay) === null || _f === void 0 ? void 0 : _f.open) && img && /*#__PURE__*/_react["default"].createElement("img", {
       alt: "",
-      className: "video-img",
-      src: (_f = (_e = data.overilay) === null || _e === void 0 ? void 0 : _e.content) === null || _f === void 0 ? void 0 : _f.pcImgSrc,
+      className: (0, _classnames["default"])('video-img', {
+        cover: (_g = data.video) === null || _g === void 0 ? void 0 : _g.sourceUrl
+      }),
+      src: img,
       style: {
         visibility: playing ? 'hidden' : 'visible'
       }
+    }), /*#__PURE__*/_react["default"].createElement("canvas", {
+      ref: this.canvasRef
     }));
   };
 

package/es/composite-comp/dito/components/SlideImage/pc/components/VideoItem/index.less

@@ -2,9 +2,10 @@
   position: relative;
   transition: border-radius 0.2s ease;
   overflow: hidden;
-  cursor: pointer;
+  display: flex;
   --dx: calc(var(--size) - var(--x));
   --dy: calc(var(--size) - var(--y));
+  cursor: url('./imgs/cursor.png'), pointer;
 
   // &.hover {
   // border-radius:
@@ -67,18 +68,26 @@
   }
 
   video {
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom: 0;
-    object-fit: cover;
     width: 100%;
-    height: 100%;
-    z-index: 2;
   }
 
   .video-img {
     width: 100%;
+
+    &.cover {
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+      bottom: 0;
+      object-fit: cover;
+      width: 100%;
+      height: 100%;
+      z-index: 2;
+    }
+  }
+
+  canvas {
+    display: none;
   }
 }

package/es/meta-comp/config-panels/TextConfig/index.js

@@ -282,6 +282,7 @@ function (_super) {
         split: true,
         title: "URL"
       }, /*#__PURE__*/_react["default"].createElement(_common.UrlPicker, {
+        disabled: true,
         onChange: function onChange(v) {
           textData.clickUrl = v;
 

package/lib/common/ProductCardModal/index.js

@@ -63,7 +63,8 @@ function ProductCardModal(_a) {
   };
 
   var randomRotateY = function randomRotateY() {
-    return Math.floor(Math.random() * 21) - 10;
+    // return Math.floor(Math.random() * 21) - 10;
+    return Math.floor((index % 2 === 0 ? -index : index) * 0.1 * 21) - 10;
   };
 
   var handleScroll = function handleScroll(e) {

package/lib/common/ProductCardModal/index.less

@@ -61,6 +61,7 @@
         top: 5%;
         right: 5%;
         cursor: pointer;
+        z-index: 3;
       }
 
       .dotIcon {
@@ -96,6 +97,7 @@
         position: absolute;
         bottom: 25%;
         left: 55%;
+        z-index: 3;
         cursor: pointer;
       }
     }

package/lib/composite-comp/dito/components/SlideImage/pc/components/VideoItem/index.js

@@ -54,10 +54,12 @@ function (_super) {
       inside: false,
       isNearCenter: false,
       flag: false,
-      corner: ''
+      corner: '',
+      videoPoster: ''
     };
     _this.videoRef = /*#__PURE__*/_react["default"].createRef();
     _this.cardRef = /*#__PURE__*/_react["default"].createRef();
+    _this.canvasRef = /*#__PURE__*/_react["default"].createRef();
 
     _this.onMouseEnter = function () {
       var _a;
@@ -157,9 +159,32 @@ function (_super) {
   }
 
   VideoItem.prototype.componentDidMount = function () {
+    var _this = this;
+
     var dom = this.cardRef.current;
     dom.addEventListener('mousemove', this.handleMouseMove);
     dom.addEventListener('mouseleave', this.handleMouseLeave);
+
+    if (this.videoRef.current) {
+      var video_1 = this.videoRef.current;
+      var canvas_1 = this.canvasRef.current;
+      video_1.addEventListener('loadedmetadata', function () {
+        // 确保跳转到第一帧
+        video_1.currentTime = 0;
+      });
+      video_1.addEventListener('seeked', function () {
+        // 设置Canvas尺寸与视频一致
+        canvas_1.width = video_1.offsetWidth;
+        canvas_1.height = video_1.offsetHeight; // 绘制视频帧到Canvas
+
+        var ctx = canvas_1.getContext('2d');
+        ctx.drawImage(video_1, 0, 0, canvas_1.width, canvas_1.height); // 转换为缩略图
+
+        _this.setState({
+          videoPoster: canvas_1.toDataURL('image/png')
+        });
+      });
+    }
   };
 
   VideoItem.prototype.componentWillUnmount = function () {
@@ -171,21 +196,23 @@ function (_super) {
   VideoItem.prototype.render = function () {
     var _a;
 
-    var _b, _c, _d, _e, _f;
+    var _b, _c, _d, _e, _f, _g;
 
     var data = this.props.data;
-    var _g = this.state,
-        playing = _g.playing,
-        inside = _g.inside,
-        isNearCenter = _g.isNearCenter,
-        flag = _g.flag,
-        corner = _g.corner;
+    var _h = this.state,
+        playing = _h.playing,
+        inside = _h.inside,
+        isNearCenter = _h.isNearCenter,
+        flag = _h.flag,
+        corner = _h.corner,
+        videoPoster = _h.videoPoster;
+    var img = ((_c = (_b = data.overilay) === null || _b === void 0 ? void 0 : _b.content) === null || _c === void 0 ? void 0 : _c.pcImgSrc) || videoPoster;
     return /*#__PURE__*/_react["default"].createElement("div", {
       ref: this.cardRef,
       className: (0, _classnames["default"])('slide-image-video-wrap', (_a = {}, _a[corner] = inside && !isNearCenter && !flag, _a)),
       onMouseEnter: this.onMouseEnter,
       onMouseLeave: this.onMouseLeave
-    }, ((_b = data.video) === null || _b === void 0 ? void 0 : _b.sourceUrl) && /*#__PURE__*/_react["default"].createElement("video", {
+    }, ((_d = data.video) === null || _d === void 0 ? void 0 : _d.sourceUrl) && /*#__PURE__*/_react["default"].createElement("video", {
       ref: this.videoRef,
       loop: true,
       muted: true,
@@ -194,15 +221,19 @@ function (_super) {
         visibility: playing ? 'visible' : 'hidden'
       }
     }, /*#__PURE__*/_react["default"].createElement("source", {
-      src: (_c = data.video) === null || _c === void 0 ? void 0 : _c.sourceUrl,
+      src: (_e = data.video) === null || _e === void 0 ? void 0 : _e.sourceUrl,
       type: "video/mp4"
-    })), ((_d = data.overilay) === null || _d === void 0 ? void 0 : _d.open) && /*#__PURE__*/_react["default"].createElement("img", {
+    })), ((_f = data.overilay) === null || _f === void 0 ? void 0 : _f.open) && img && /*#__PURE__*/_react["default"].createElement("img", {
       alt: "",
-      className: "video-img",
-      src: (_f = (_e = data.overilay) === null || _e === void 0 ? void 0 : _e.content) === null || _f === void 0 ? void 0 : _f.pcImgSrc,
+      className: (0, _classnames["default"])('video-img', {
+        cover: (_g = data.video) === null || _g === void 0 ? void 0 : _g.sourceUrl
+      }),
+      src: img,
       style: {
         visibility: playing ? 'hidden' : 'visible'
       }
+    }), /*#__PURE__*/_react["default"].createElement("canvas", {
+      ref: this.canvasRef
     }));
   };
 

package/lib/composite-comp/dito/components/SlideImage/pc/components/VideoItem/index.less

@@ -2,9 +2,10 @@
   position: relative;
   transition: border-radius 0.2s ease;
   overflow: hidden;
-  cursor: pointer;
+  display: flex;
   --dx: calc(var(--size) - var(--x));
   --dy: calc(var(--size) - var(--y));
+  cursor: url('./imgs/cursor.png'), pointer;
 
   // &.hover {
   // border-radius:
@@ -67,18 +68,26 @@
   }
 
   video {
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom: 0;
-    object-fit: cover;
     width: 100%;
-    height: 100%;
-    z-index: 2;
   }
 
   .video-img {
     width: 100%;
+
+    &.cover {
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+      bottom: 0;
+      object-fit: cover;
+      width: 100%;
+      height: 100%;
+      z-index: 2;
+    }
+  }
+
+  canvas {
+    display: none;
   }
 }

package/lib/meta-comp/config-panels/TextConfig/index.js

@@ -282,6 +282,7 @@ function (_super) {
         split: true,
         title: "URL"
       }, /*#__PURE__*/_react["default"].createElement(_common.UrlPicker, {
+        disabled: true,
         onChange: function onChange(v) {
           textData.clickUrl = v;
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fonixtree/magic-design",
   "author": "Cylon Team",
-  "version": "1.0.152",
+  "version": "1.0.153",
   "description": "Magic Design",
   "license": "MIT",
   "module": "es/index.js",