pb-sxp-ui 1.15.15-alpha.1 → 1.15.15-alpha.2

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.
Files changed (17) hide show
  1. package/dist/index.cjs +21 -64
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +21 -64
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.min.cjs +6 -6
  6. package/dist/index.min.cjs.map +1 -1
  7. package/dist/index.min.js +6 -6
  8. package/dist/index.min.js.map +1 -1
  9. package/dist/pb-ui.js +21 -64
  10. package/dist/pb-ui.js.map +1 -1
  11. package/dist/pb-ui.min.js +6 -6
  12. package/dist/pb-ui.min.js.map +1 -1
  13. package/es/core/components/DiyStoryPreview/VideoWidget.js +12 -56
  14. package/es/core/components/DiyStoryPreview/index.js +4 -4
  15. package/lib/core/components/DiyStoryPreview/VideoWidget.js +12 -56
  16. package/lib/core/components/DiyStoryPreview/index.js +4 -4
  17. package/package.json +1 -1
package/es/core/components/DiyStoryPreview/VideoWidget.js CHANGED
@@ -38,8 +38,6 @@ const VideoWidget = forwardRef(({ rec, index, height, data, muted, activeIndex,
38
38
  setIsPauseVideo(true);
39
39
  },
40
40
  setLoopPlay(v) {
41
- if (!videoRef.current)
42
- return;
43
41
  loopPlayRef.current = v;
44
42
  },
45
43
  isPlaying() {
@@ -53,23 +51,7 @@ const VideoWidget = forwardRef(({ rec, index, height, data, muted, activeIndex,
53
51
  return;
54
52
  videoRef.current.muted = muted;
55
53
  }, [muted]);
56
- const handleVideoStart = useCallback(() => {
57
- var _a;
58
- (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
59
- }, []);
60
54
  const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
61
- const handlePlaying = useCallback(() => {
62
- var _a, _b, _c, _d, _e, _f;
63
- setIsPauseVideo(false);
64
- const item = data[index];
65
- if (item && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
66
- videoStartTime.current = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.currentTime) || 0;
67
- const videoDuration = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 0).toFixed(2);
68
- const videoCurrentTime = ((_f = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime) !== null && _f !== void 0 ? _f : 0).toFixed(2);
69
- const playType = isFirstPlay ? '0' : '1';
70
- setIsFirstPlay(false);
71
- }
72
- }, [bffEventReport, data, index, isFirstPlay]);
73
55
  const handleLoadedMetadata = useCallback(() => {
74
56
  var _a;
75
57
  videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
@@ -111,50 +93,24 @@ const VideoWidget = forwardRef(({ rec, index, height, data, muted, activeIndex,
111
93
  const blur = useMemo(() => {
112
94
  return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
113
95
  }, [videoPostConfig]);
114
- const translateY = useMemo(() => {
115
- var _a;
116
- return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2'
117
- ? `translateY(-${50 + ((_a = videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%) translate3d(0px, 0px, 0px)`
118
- : 'translateY(-50%)';
119
- }, [videoPostConfig]);
120
- const handLoadeddata = useCallback(() => {
121
- if (!canvasRef || !videoRef || !videoRef.current || !canvasRef.current)
122
- return;
123
- const video = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current;
124
- const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
125
- const ctx = canvas.getContext('2d');
126
- const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
127
- const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
128
- canvas.height = targetHeight;
129
- canvas.width = targetWidth;
130
- ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
131
- setFirstFrameSrc(canvas.toDataURL());
132
- }, []);
133
- const handleTimeUpload = useCallback(() => {
134
- var _a;
96
+ const handleTimeUpload = () => {
135
97
  if (!videoRef.current)
136
98
  return;
137
- const localTime = ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) - (rec === null || rec === void 0 ? void 0 : rec.startTime);
138
- onUpdateTimeLine === null || onUpdateTimeLine === void 0 ? void 0 : onUpdateTimeLine(index, localTime);
139
99
  setTimeout(() => {
140
- var _a, _b;
100
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
141
101
  if (((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) >= ((_b = rec === null || rec === void 0 ? void 0 : rec.endTime) !== null && _b !== void 0 ? _b : 0)) {
142
- slideSwiper();
102
+ (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
103
+ if (!loopPlayRef.current)
104
+ return;
105
+ if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
106
+ (_e = (_d = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _d === void 0 ? void 0 : _d.swiper) === null || _e === void 0 ? void 0 : _e.slideTo(0);
107
+ }
108
+ else {
109
+ const i = (_g = (_f = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _f === void 0 ? void 0 : _f.swiper) === null || _g === void 0 ? void 0 : _g.activeIndex;
110
+ (_j = (_h = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _h === void 0 ? void 0 : _h.swiper) === null || _j === void 0 ? void 0 : _j.slideTo(i + 1);
111
+ }
143
112
  }
144
113
  });
145
- }, []);
146
- const slideSwiper = () => {
147
- var _a, _b, _c, _d, _e, _f, _g;
148
- (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
149
- if (!loopPlayRef.current)
150
- return;
151
- if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
152
- (_c = (_b = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _b === void 0 ? void 0 : _b.swiper) === null || _c === void 0 ? void 0 : _c.slideTo(0);
153
- }
154
- else {
155
- const i = (_e = (_d = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _d === void 0 ? void 0 : _d.swiper) === null || _e === void 0 ? void 0 : _e.activeIndex;
156
- (_g = (_f = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _f === void 0 ? void 0 : _f.swiper) === null || _g === void 0 ? void 0 : _g.slideTo(i + 1);
157
- }
158
114
  };
159
115
  const handlePause = () => {
160
116
  setIsPauseVideo(true);
package/es/core/components/DiyStoryPreview/index.js CHANGED
@@ -304,7 +304,7 @@ const DiyStoryPreview = forwardRef(({ data = [], globalConfig, tipText, nudge, t
304
304
  const renderLikeButton = (rec, index) => {
305
305
  var _a, _b, _c, _d;
306
306
  if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike))
307
- return;
307
+ return null;
308
308
  let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconY) !== null && _a !== void 0 ? _a : 400;
309
309
  if (top < 40) {
310
310
  top += 40;
@@ -332,12 +332,12 @@ const DiyStoryPreview = forwardRef(({ data = [], globalConfig, tipText, nudge, t
332
332
  const renderToggleButton = (visible) => {
333
333
  var _a, _b, _c, _d;
334
334
  if (!visible)
335
- return;
335
+ return null;
336
336
  let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _a !== void 0 ? _a : 23;
337
337
  if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) === 'top') {
338
338
  top += 45;
339
339
  }
340
- return (((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === true) && (React.createElement(ToggleButton, { style: {
340
+ return (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === true ? (React.createElement(ToggleButton, { style: {
341
341
  position: 'absolute',
342
342
  visibility: 'visible',
343
343
  zIndex: 999,
@@ -351,7 +351,7 @@ const DiyStoryPreview = forwardRef(({ data = [], globalConfig, tipText, nudge, t
351
351
  border: 'none',
352
352
  boxSizing: 'content-box',
353
353
  padding: 0
354
- }, defaultValue: true, activeIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon : mutedIcon, unactiveIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon : unmutedIcon })));
354
+ }, defaultValue: true, activeIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon : mutedIcon, unactiveIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon : unmutedIcon })) : null;
355
355
  };
356
356
  const renderView = (item, index) => {
357
357
  var _a, _b, _c, _d;
package/lib/core/components/DiyStoryPreview/VideoWidget.js CHANGED
@@ -41,8 +41,6 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
41
41
  setIsPauseVideo(true);
42
42
  },
43
43
  setLoopPlay(v) {
44
- if (!videoRef.current)
45
- return;
46
44
  loopPlayRef.current = v;
47
45
  },
48
46
  isPlaying() {
@@ -56,23 +54,7 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
56
54
  return;
57
55
  videoRef.current.muted = muted;
58
56
  }, [muted]);
59
- const handleVideoStart = (0, react_1.useCallback)(() => {
60
- var _a;
61
- (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
62
- }, []);
63
57
  const PAUSE_ICON = (0, useIconLink_1.useIconLink)('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
64
- const handlePlaying = (0, react_1.useCallback)(() => {
65
- var _a, _b, _c, _d, _e, _f;
66
- setIsPauseVideo(false);
67
- const item = data[index];
68
- if (item && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
69
- videoStartTime.current = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.currentTime) || 0;
70
- const videoDuration = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 0).toFixed(2);
71
- const videoCurrentTime = ((_f = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime) !== null && _f !== void 0 ? _f : 0).toFixed(2);
72
- const playType = isFirstPlay ? '0' : '1';
73
- setIsFirstPlay(false);
74
- }
75
- }, [bffEventReport, data, index, isFirstPlay]);
76
58
  const handleLoadedMetadata = (0, react_1.useCallback)(() => {
77
59
  var _a;
78
60
  videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
@@ -114,50 +96,24 @@ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted,
114
96
  const blur = (0, react_1.useMemo)(() => {
115
97
  return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
116
98
  }, [videoPostConfig]);
117
- const translateY = (0, react_1.useMemo)(() => {
118
- var _a;
119
- return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2'
120
- ? `translateY(-${50 + ((_a = videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%) translate3d(0px, 0px, 0px)`
121
- : 'translateY(-50%)';
122
- }, [videoPostConfig]);
123
- const handLoadeddata = (0, react_1.useCallback)(() => {
124
- if (!canvasRef || !videoRef || !videoRef.current || !canvasRef.current)
125
- return;
126
- const video = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current;
127
- const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
128
- const ctx = canvas.getContext('2d');
129
- const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
130
- const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
131
- canvas.height = targetHeight;
132
- canvas.width = targetWidth;
133
- ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
134
- setFirstFrameSrc(canvas.toDataURL());
135
- }, []);
136
- const handleTimeUpload = (0, react_1.useCallback)(() => {
137
- var _a;
99
+ const handleTimeUpload = () => {
138
100
  if (!videoRef.current)
139
101
  return;
140
- const localTime = ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) - (rec === null || rec === void 0 ? void 0 : rec.startTime);
141
- onUpdateTimeLine === null || onUpdateTimeLine === void 0 ? void 0 : onUpdateTimeLine(index, localTime);
142
102
  setTimeout(() => {
143
- var _a, _b;
103
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
144
104
  if (((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) >= ((_b = rec === null || rec === void 0 ? void 0 : rec.endTime) !== null && _b !== void 0 ? _b : 0)) {
145
- slideSwiper();
105
+ (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
106
+ if (!loopPlayRef.current)
107
+ return;
108
+ if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
109
+ (_e = (_d = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _d === void 0 ? void 0 : _d.swiper) === null || _e === void 0 ? void 0 : _e.slideTo(0);
110
+ }
111
+ else {
112
+ const i = (_g = (_f = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _f === void 0 ? void 0 : _f.swiper) === null || _g === void 0 ? void 0 : _g.activeIndex;
113
+ (_j = (_h = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _h === void 0 ? void 0 : _h.swiper) === null || _j === void 0 ? void 0 : _j.slideTo(i + 1);
114
+ }
146
115
  }
147
116
  });
148
- }, []);
149
- const slideSwiper = () => {
150
- var _a, _b, _c, _d, _e, _f, _g;
151
- (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
152
- if (!loopPlayRef.current)
153
- return;
154
- if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
155
- (_c = (_b = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _b === void 0 ? void 0 : _b.swiper) === null || _c === void 0 ? void 0 : _c.slideTo(0);
156
- }
157
- else {
158
- const i = (_e = (_d = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _d === void 0 ? void 0 : _d.swiper) === null || _e === void 0 ? void 0 : _e.activeIndex;
159
- (_g = (_f = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _f === void 0 ? void 0 : _f.swiper) === null || _g === void 0 ? void 0 : _g.slideTo(i + 1);
160
- }
161
117
  };
162
118
  const handlePause = () => {
163
119
  setIsPauseVideo(true);
package/lib/core/components/DiyStoryPreview/index.js CHANGED
@@ -307,7 +307,7 @@ const DiyStoryPreview = (0, react_1.forwardRef)(({ data = [], globalConfig, tipT
307
307
  const renderLikeButton = (rec, index) => {
308
308
  var _a, _b, _c, _d;
309
309
  if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike))
310
- return;
310
+ return null;
311
311
  let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconY) !== null && _a !== void 0 ? _a : 400;
312
312
  if (top < 40) {
313
313
  top += 40;
@@ -335,12 +335,12 @@ const DiyStoryPreview = (0, react_1.forwardRef)(({ data = [], globalConfig, tipT
335
335
  const renderToggleButton = (visible) => {
336
336
  var _a, _b, _c, _d;
337
337
  if (!visible)
338
- return;
338
+ return null;
339
339
  let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _a !== void 0 ? _a : 23;
340
340
  if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) === 'top') {
341
341
  top += 45;
342
342
  }
343
- return (((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === true) && (react_1.default.createElement(ToggleButton_1.default, { style: {
343
+ return (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === true ? (react_1.default.createElement(ToggleButton_1.default, { style: {
344
344
  position: 'absolute',
345
345
  visibility: 'visible',
346
346
  zIndex: 999,
@@ -354,7 +354,7 @@ const DiyStoryPreview = (0, react_1.forwardRef)(({ data = [], globalConfig, tipT
354
354
  border: 'none',
355
355
  boxSizing: 'content-box',
356
356
  padding: 0
357
- }, defaultValue: true, activeIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon : mutedIcon, unactiveIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon : unmutedIcon })));
357
+ }, defaultValue: true, activeIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon : mutedIcon, unactiveIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon : unmutedIcon })) : null;
358
358
  };
359
359
  const renderView = (item, index) => {
360
360
  var _a, _b, _c, _d;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pb-sxp-ui",
3
- "version": "1.15.15-alpha.1",
3
+ "version": "1.15.15-alpha.2",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",