@fonixtree/magic-design 0.1.4 → 0.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -13,7 +13,7 @@ function parseDom(html) {
13
13
  return ele.childNodes[0];
14
14
  }
15
15
 
16
- var rateHtml = "<div class=\"rate-components\">\n <div class=\"current-rate\">1.0x</div>\n <ul class=\"rate-list\">\n <li data-rate=\"2.0\">2.0x</li>\n <li data-rate=\"1.5\">1.5x</li>\n <li data-rate=\"1.25\">1.25x</li>\n <li data-rate=\"1.0\" class=\"current\">1.0x</li>\n <li data-rate=\"0.5\">0.5x</li>\n </ul>\n</div>";
16
+ var rateHtml = "<div class=\"rate-components\">\n <div class=\"current-rate\">1.0x</div>\n <ul class=\"rate-list\">\n <li data-rate=\"2.0\">2.0x</li>\n <li data-rate=\"1.5\">1.5x</li>\n <li data-rate=\"1.0\" class=\"current\">1.0x</li>\n <li data-rate=\"0.5\">0.5x</li>\n </ul>\n</div>";
17
17
  /**
18
18
  * 倍速播放组件
19
19
  */
@@ -33,10 +33,18 @@ function () {
33
33
  eleControlbar.appendChild(this.html);
34
34
  };
35
35
 
36
- RateComponent.prototype.ready = function (player, e) {
36
+ RateComponent.prototype.ready = function (player) {
37
37
  var currentRateEle = this.html.querySelector('.current-rate');
38
38
  var rateListEle = this.html.querySelector('.rate-list');
39
- var timeId = null; // 隐藏设置里面的倍速播放
39
+ var timeId = null;
40
+ var currentEle = rateListEle.querySelector('.current');
41
+
42
+ if (currentEle) {
43
+ currentEle.className = '';
44
+ }
45
+
46
+ rateListEle.querySelector("[data-rate=\"" + player._speed + "\"]").className = 'current';
47
+ currentRateEle.innerText = player._speed + 'x'; // 隐藏设置里面的倍速播放
40
48
 
41
49
  var settingRate = document.querySelector('.prism-setting-item.prism-setting-speed');
42
50
 
@@ -70,10 +78,10 @@ function () {
70
78
  player.setSpeed(rate);
71
79
 
72
80
  if (target.className !== 'current') {
73
- var currentEle = rateListEle.querySelector('.current');
81
+ var currentEle_1 = rateListEle.querySelector('.current');
74
82
 
75
- if (currentEle) {
76
- currentEle.className = '';
83
+ if (currentEle_1) {
84
+ currentEle_1.className = '';
77
85
  }
78
86
 
79
87
  target.className = 'current';
@@ -393,7 +393,9 @@ var createAliVideo = function createAliVideo(domId, opts) {
393
393
  }
394
394
 
395
395
  if (opts.speed) {
396
- player.setSpeed(opts.speed);
396
+ var speed = Number(opts.speed).toFixed(1);
397
+ player.setSpeed(speed);
398
+ player._speed = speed;
397
399
  }
398
400
 
399
401
  if (opts.startAt) {
@@ -90,7 +90,8 @@ function (_super) {
90
90
  var data = _this.props.data;
91
91
 
92
92
  try {
93
- var cardWidth = ((_a = document.querySelector('.group-wrap .one-card')) === null || _a === void 0 ? void 0 : _a.offsetWidth) - 48;
93
+ // const cardWidth = document.querySelector('.group-wrap .one-card')?.offsetWidth - 48;
94
+ var cardWidth = (100 - (data.customize.pcRowNum - 1) * 2) / data.customize.pcRowNum * 0.01 * ((_a = document.querySelector('.image-text-pc .group-wrap')) === null || _a === void 0 ? void 0 : _a.offsetWidth) - 48;
94
95
  var maxLayoutWidth = maxWidthAndHeight[data.customize.layout.pcLayout];
95
96
 
96
97
  _this.setState({
@@ -130,6 +131,7 @@ function (_super) {
130
131
  ImageTextPc.prototype.componentDidMount = function () {
131
132
  var data = this.props.data;
132
133
  this.layout = data.customize.layout.pcLayout;
134
+ this.pcRowNum = data.customize.pcRowNum;
133
135
  this.listenCardWidth();
134
136
  window.addEventListener('resize', (0, _lodash.debounce)(this.listenCardWidth));
135
137
  };
@@ -139,8 +141,9 @@ function (_super) {
139
141
  };
140
142
 
141
143
  ImageTextPc.prototype.componentWillReceiveProps = function (nextProps) {
142
- if (nextProps.data.customize.layout.pcLayout !== this.layout) {
144
+ if (nextProps.data.customize.layout.pcLayout !== this.layout || nextProps.data.customize.pcRowNum !== this.pcRowNum) {
143
145
  this.layout = nextProps.data.customize.layout.pcLayout;
146
+ this.pcRowNum = nextProps.data.customize.pcRowNum;
144
147
  this.listenCardWidth();
145
148
  }
146
149
  };
@@ -9,6 +9,7 @@
9
9
 
10
10
  .video-tag-container .left-wrap+.right-wrap {
11
11
  padding-left: 60px;
12
+ width: calc(100% - 120px);
12
13
  }
13
14
 
14
15
  .video-item-wrap {
@@ -17,6 +17,7 @@
17
17
 
18
18
  .video-tag-container .left-wrap+.right-wrap {
19
19
  padding-left: 30px;
20
+ width: calc(100% - 100px);
20
21
  }
21
22
 
22
23
  .video-left-wrap {
@@ -9,6 +9,7 @@
9
9
 
10
10
  .video-tag-container .left-wrap+.right-wrap {
11
11
  padding-left: 20px;
12
+ width: calc(100% - 90px);
12
13
  }
13
14
 
14
15
  .video-item-wrap {
@@ -122,7 +122,7 @@ function (_super) {
122
122
  layout: "horizontal",
123
123
  title: (0, _locale.i18n)('VIDEO_HEIGHT')
124
124
  }, /*#__PURE__*/_react["default"].createElement(_common.InputNumber, {
125
- max: 1000,
125
+ max: 4000,
126
126
  onChange: function onChange(v) {
127
127
  return _this.onChangeHeight(v);
128
128
  },
@@ -26,13 +26,16 @@
26
26
  }
27
27
  }
28
28
  .menu-drop {
29
- // .all-category {
30
- // color: #ED2121 !important;
31
- // }
29
+ .all-category {
30
+ position: relative;
31
+ z-index: 1;
32
+ background: #fff;
33
+ }
32
34
  &>img {
33
35
  position: relative;
34
- left: 5000px;
35
- filter: drop-shadow(#ED2121 -5000px 0);
36
+ left: 30px;
37
+ filter: drop-shadow(#ED2121 -30px 0);
38
+ z-index: -1;
36
39
  }
37
40
  }
38
41
  }
@@ -13,7 +13,7 @@ function parseDom(html) {
13
13
  return ele.childNodes[0];
14
14
  }
15
15
 
16
- var rateHtml = "<div class=\"rate-components\">\n <div class=\"current-rate\">1.0x</div>\n <ul class=\"rate-list\">\n <li data-rate=\"2.0\">2.0x</li>\n <li data-rate=\"1.5\">1.5x</li>\n <li data-rate=\"1.25\">1.25x</li>\n <li data-rate=\"1.0\" class=\"current\">1.0x</li>\n <li data-rate=\"0.5\">0.5x</li>\n </ul>\n</div>";
16
+ var rateHtml = "<div class=\"rate-components\">\n <div class=\"current-rate\">1.0x</div>\n <ul class=\"rate-list\">\n <li data-rate=\"2.0\">2.0x</li>\n <li data-rate=\"1.5\">1.5x</li>\n <li data-rate=\"1.0\" class=\"current\">1.0x</li>\n <li data-rate=\"0.5\">0.5x</li>\n </ul>\n</div>";
17
17
  /**
18
18
  * 倍速播放组件
19
19
  */
@@ -33,10 +33,18 @@ function () {
33
33
  eleControlbar.appendChild(this.html);
34
34
  };
35
35
 
36
- RateComponent.prototype.ready = function (player, e) {
36
+ RateComponent.prototype.ready = function (player) {
37
37
  var currentRateEle = this.html.querySelector('.current-rate');
38
38
  var rateListEle = this.html.querySelector('.rate-list');
39
- var timeId = null; // 隐藏设置里面的倍速播放
39
+ var timeId = null;
40
+ var currentEle = rateListEle.querySelector('.current');
41
+
42
+ if (currentEle) {
43
+ currentEle.className = '';
44
+ }
45
+
46
+ rateListEle.querySelector("[data-rate=\"" + player._speed + "\"]").className = 'current';
47
+ currentRateEle.innerText = player._speed + 'x'; // 隐藏设置里面的倍速播放
40
48
 
41
49
  var settingRate = document.querySelector('.prism-setting-item.prism-setting-speed');
42
50
 
@@ -70,10 +78,10 @@ function () {
70
78
  player.setSpeed(rate);
71
79
 
72
80
  if (target.className !== 'current') {
73
- var currentEle = rateListEle.querySelector('.current');
81
+ var currentEle_1 = rateListEle.querySelector('.current');
74
82
 
75
- if (currentEle) {
76
- currentEle.className = '';
83
+ if (currentEle_1) {
84
+ currentEle_1.className = '';
77
85
  }
78
86
 
79
87
  target.className = 'current';
@@ -393,7 +393,9 @@ var createAliVideo = function createAliVideo(domId, opts) {
393
393
  }
394
394
 
395
395
  if (opts.speed) {
396
- player.setSpeed(opts.speed);
396
+ var speed = Number(opts.speed).toFixed(1);
397
+ player.setSpeed(speed);
398
+ player._speed = speed;
397
399
  }
398
400
 
399
401
  if (opts.startAt) {
@@ -90,7 +90,8 @@ function (_super) {
90
90
  var data = _this.props.data;
91
91
 
92
92
  try {
93
- var cardWidth = ((_a = document.querySelector('.group-wrap .one-card')) === null || _a === void 0 ? void 0 : _a.offsetWidth) - 48;
93
+ // const cardWidth = document.querySelector('.group-wrap .one-card')?.offsetWidth - 48;
94
+ var cardWidth = (100 - (data.customize.pcRowNum - 1) * 2) / data.customize.pcRowNum * 0.01 * ((_a = document.querySelector('.image-text-pc .group-wrap')) === null || _a === void 0 ? void 0 : _a.offsetWidth) - 48;
94
95
  var maxLayoutWidth = maxWidthAndHeight[data.customize.layout.pcLayout];
95
96
 
96
97
  _this.setState({
@@ -130,6 +131,7 @@ function (_super) {
130
131
  ImageTextPc.prototype.componentDidMount = function () {
131
132
  var data = this.props.data;
132
133
  this.layout = data.customize.layout.pcLayout;
134
+ this.pcRowNum = data.customize.pcRowNum;
133
135
  this.listenCardWidth();
134
136
  window.addEventListener('resize', (0, _lodash.debounce)(this.listenCardWidth));
135
137
  };
@@ -139,8 +141,9 @@ function (_super) {
139
141
  };
140
142
 
141
143
  ImageTextPc.prototype.componentWillReceiveProps = function (nextProps) {
142
- if (nextProps.data.customize.layout.pcLayout !== this.layout) {
144
+ if (nextProps.data.customize.layout.pcLayout !== this.layout || nextProps.data.customize.pcRowNum !== this.pcRowNum) {
143
145
  this.layout = nextProps.data.customize.layout.pcLayout;
146
+ this.pcRowNum = nextProps.data.customize.pcRowNum;
144
147
  this.listenCardWidth();
145
148
  }
146
149
  };
@@ -9,6 +9,7 @@
9
9
 
10
10
  .video-tag-container .left-wrap+.right-wrap {
11
11
  padding-left: 60px;
12
+ width: calc(100% - 120px);
12
13
  }
13
14
 
14
15
  .video-item-wrap {
@@ -17,6 +17,7 @@
17
17
 
18
18
  .video-tag-container .left-wrap+.right-wrap {
19
19
  padding-left: 30px;
20
+ width: calc(100% - 100px);
20
21
  }
21
22
 
22
23
  .video-left-wrap {
@@ -9,6 +9,7 @@
9
9
 
10
10
  .video-tag-container .left-wrap+.right-wrap {
11
11
  padding-left: 20px;
12
+ width: calc(100% - 90px);
12
13
  }
13
14
 
14
15
  .video-item-wrap {
@@ -122,7 +122,7 @@ function (_super) {
122
122
  layout: "horizontal",
123
123
  title: (0, _locale.i18n)('VIDEO_HEIGHT')
124
124
  }, /*#__PURE__*/_react["default"].createElement(_common.InputNumber, {
125
- max: 1000,
125
+ max: 4000,
126
126
  onChange: function onChange(v) {
127
127
  return _this.onChangeHeight(v);
128
128
  },
@@ -26,13 +26,16 @@
26
26
  }
27
27
  }
28
28
  .menu-drop {
29
- // .all-category {
30
- // color: #ED2121 !important;
31
- // }
29
+ .all-category {
30
+ position: relative;
31
+ z-index: 1;
32
+ background: #fff;
33
+ }
32
34
  &>img {
33
35
  position: relative;
34
- left: 5000px;
35
- filter: drop-shadow(#ED2121 -5000px 0);
36
+ left: 30px;
37
+ filter: drop-shadow(#ED2121 -30px 0);
38
+ z-index: -1;
36
39
  }
37
40
  }
38
41
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@fonixtree/magic-design",
3
3
  "author": "Cylon Team",
4
- "version": "0.1.4",
4
+ "version": "0.1.6",
5
5
  "description": "Magic Design",
6
6
  "license": "MIT",
7
7
  "module": "es/index.js",