pb-sxp-ui 1.0.22 → 1.0.24

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 (25) hide show
  1. package/dist/index.cjs +47 -91
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +47 -91
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.min.cjs +3 -3
  6. package/dist/index.min.cjs.map +1 -1
  7. package/dist/index.min.js +3 -3
  8. package/dist/index.min.js.map +1 -1
  9. package/dist/pb-ui.js +47 -91
  10. package/dist/pb-ui.js.map +1 -1
  11. package/dist/pb-ui.min.js +3 -3
  12. package/dist/pb-ui.min.js.map +1 -1
  13. package/es/core/components/SxpPageRender/ExpandableText.js +1 -1
  14. package/es/core/components/SxpPageRender/PictureGroup/Picture.js +2 -17
  15. package/es/core/components/SxpPageRender/RenderCard.js +1 -1
  16. package/es/core/components/SxpPageRender/VideoWidget/index.js +36 -64
  17. package/es/core/components/SxpPageRender/index.js +2 -2
  18. package/es/materials/sxp/template/components/Img.js +1 -1
  19. package/lib/core/components/SxpPageRender/ExpandableText.js +1 -1
  20. package/lib/core/components/SxpPageRender/PictureGroup/Picture.js +1 -16
  21. package/lib/core/components/SxpPageRender/RenderCard.js +1 -1
  22. package/lib/core/components/SxpPageRender/VideoWidget/index.js +36 -64
  23. package/lib/core/components/SxpPageRender/index.js +2 -2
  24. package/lib/materials/sxp/template/components/Img.js +1 -1
  25. package/package.json +1 -1
package/es/core/components/SxpPageRender/ExpandableText.js CHANGED
@@ -37,7 +37,7 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
37
37
  }
38
38
  multiRowCopy.current.style.display = 'none';
39
39
  }, [isPost]);
40
- return (React.createElement("div", { className: className, style: Object.assign({}, style), hidden: !text || text === '' },
40
+ return (React.createElement("div", { className: className, style: Object.assign(Object.assign({}, style), { transform: 'translate3d(0px, 0px, 0px)' }), hidden: !text || text === '' },
41
41
  React.createElement("div", { ref: multiRow, style: {
42
42
  overflow: 'hidden',
43
43
  WebkitLineClamp: !isPost || isShowMore ? '' : lineClamp,
package/es/core/components/SxpPageRender/PictureGroup/Picture.js CHANGED
@@ -1,31 +1,16 @@
1
- import React, { useCallback, useState } from 'react';
1
+ import React, { useState } from 'react';
2
2
  import FormatImage from '../FormatImage';
3
- import { useSxpDataSource } from '../../../../core/hooks';
4
3
  const Picture = (props) => {
5
4
  const { src, height, width } = props;
6
5
  const [blur, setBlur] = useState(false);
7
- const { sxpParameter } = useSxpDataSource();
8
6
  const onLoad = (img) => {
9
- const aspectRatio = img.height / img.width;
7
+ const aspectRatio = img.naturalHeight / img.naturalWidth;
10
8
  const targetAspectRatio = 16 / 9;
11
9
  const tolerance = 0.05;
12
10
  if (Math.abs(aspectRatio - targetAspectRatio) > tolerance) {
13
11
  setBlur(true);
14
12
  }
15
13
  };
16
- const getImg = useCallback((src, style) => {
17
- if (src === '' || !src)
18
- return;
19
- return (src === null || src === void 0 ? void 0 : src.includes('.avif')) ? (React.createElement("picture", null,
20
- React.createElement("source", { type: 'image/avif', srcSet: src }),
21
- React.createElement("source", { type: 'image/webp', srcSet: `${src}?imageMogr2/format/webp` }),
22
- React.createElement("source", { type: 'image/jpeg', srcSet: `${src}?imageMogr2/format/jpg` }),
23
- React.createElement("img", { src: src, style: style, onLoad: (e) => {
24
- onLoad(e.target);
25
- } }))) : (React.createElement("img", { src: src, style: style, onLoad: (e) => {
26
- onLoad(e.target);
27
- } }));
28
- }, []);
29
14
  return (React.createElement("div", { style: {
30
15
  overflow: 'hidden',
31
16
  height,
package/es/core/components/SxpPageRender/RenderCard.js CHANGED
@@ -32,7 +32,7 @@ const RenderCard = ({ rec, index, tempMap, resolver }) => {
32
32
  const Component = withBindDataSource(t);
33
33
  const defaulSetting = (_x = t === null || t === void 0 ? void 0 : t.extend) === null || _x === void 0 ? void 0 : _x.defaulSetting;
34
34
  const isExternalLink = ((_0 = (_z = (_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.event) === null || _z === void 0 ? void 0 : _z.onClick) === null || _0 === void 0 ? void 0 : _0.linkType) === 'externalLink';
35
- return (React.createElement(Component, Object.assign({ style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_1 = value === null || value === void 0 ? void 0 : value.item) === null || _1 === void 0 ? void 0 : _1.style), { zIndex: 50, marginLeft: '20px', boxSizing: 'border-box' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_2 = value === null || value === void 0 ? void 0 : value.item) === null || _2 === void 0 ? void 0 : _2.textStyle), bindDatas: (_4 = (_3 = value === null || value === void 0 ? void 0 : value.item) === null || _3 === void 0 ? void 0 : _3.bindDatas) !== null && _4 !== void 0 ? _4 : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_5 = value === null || value === void 0 ? void 0 : value.item) === null || _5 === void 0 ? void 0 : _5.props, { event: ((_6 = value === null || value === void 0 ? void 0 : value.item) === null || _6 === void 0 ? void 0 : _6.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, key: value === null || value === void 0 ? void 0 : value.id, recData: rec, isExternalLink: isExternalLink, index: index })));
35
+ return (React.createElement(Component, Object.assign({ style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_1 = value === null || value === void 0 ? void 0 : value.item) === null || _1 === void 0 ? void 0 : _1.style), { zIndex: 50, marginLeft: '20px', boxSizing: 'border-box', transform: 'translate3d(0px, 0px, 0px)' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_2 = value === null || value === void 0 ? void 0 : value.item) === null || _2 === void 0 ? void 0 : _2.textStyle), bindDatas: (_4 = (_3 = value === null || value === void 0 ? void 0 : value.item) === null || _3 === void 0 ? void 0 : _3.bindDatas) !== null && _4 !== void 0 ? _4 : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_5 = value === null || value === void 0 ? void 0 : value.item) === null || _5 === void 0 ? void 0 : _5.props, { event: ((_6 = value === null || value === void 0 ? void 0 : value.item) === null || _6 === void 0 ? void 0 : _6.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, key: value === null || value === void 0 ? void 0 : value.id, recData: rec, isExternalLink: isExternalLink, index: index })));
36
36
  }
37
37
  else {
38
38
  return null;
package/es/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -8,7 +8,8 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
8
8
  const videoRef = useRef(null);
9
9
  const { bffEventReport, sxpParameter, waterFallData, openHashtag } = useSxpDataSource();
10
10
  const videoStartTime = useRef(0);
11
- const [isLoad, setIsLoad] = useState(false);
11
+ const [isLoadFinish, setIsLoadFinish] = useState(false);
12
+ const [isFirstPlay, setIsFirstPlay] = useState(true);
12
13
  const { isActive } = useSwiperSlide();
13
14
  useEffect(() => {
14
15
  if (!videoRef.current)
@@ -24,11 +25,11 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
24
25
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
25
26
  setIsPauseVideo(false);
26
27
  const item = data[index];
27
- if (item && isLoad && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
28
+ if (item && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
28
29
  videoStartTime.current = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.currentTime) || 0;
29
30
  const videoDuration = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 0).toFixed(2);
30
31
  const videoCurrentTime = ((_f = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime) !== null && _f !== void 0 ? _f : 0).toFixed(2);
31
- const playType = '1';
32
+ const playType = isFirstPlay ? '0' : '1';
32
33
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
33
34
  eventInfo: {
34
35
  eventSubject: 'playVideo',
@@ -44,72 +45,41 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
44
45
  traceInfo: (_o = item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
45
46
  }
46
47
  });
48
+ setIsFirstPlay(false);
47
49
  }
48
- if (!isLoad) {
49
- setIsLoad(true);
50
- }
51
- }, [bffEventReport, data, index, isLoad]);
50
+ }, [bffEventReport, data, index, isFirstPlay]);
52
51
  const handleLoadedMetadata = useCallback(() => {
53
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
54
- const item = data[index];
55
- if (item && !isLoad && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
56
- videoStartTime.current = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.currentTime) || 0;
57
- const videoDuration = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 0).toFixed(2);
58
- const videoCurrentTime = ((_f = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime) !== null && _f !== void 0 ? _f : 0).toFixed(2);
59
- const playType = '0';
60
- bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
61
- eventInfo: {
62
- eventSubject: 'playVideo',
63
- eventDescription: 'User played the video',
64
- contentId: (_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
65
- contentName: (_k = (_j = item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
66
- playType,
67
- startTime: videoCurrentTime,
68
- videoDuration,
69
- contentTags: JSON.stringify((_m = (_l = item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
70
- position: index + '',
71
- contentFormat: 'video',
72
- traceInfo: (_o = item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
73
- }
74
- });
75
- }
76
- setTimeout(() => {
77
- var _a;
78
- (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
79
- }, 0);
80
- }, [index, bffEventReport, data, isLoad]);
52
+ setIsLoadFinish(true);
53
+ }, []);
81
54
  const handleClickVideo = useCallback((type) => () => {
82
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
83
- if (!isLoad)
55
+ var _a, _b, _c, _d, _e;
56
+ if (!isLoadFinish)
84
57
  return;
85
- const item = data[index];
86
- const videoDuration = ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
87
- const videoCurrentTime = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
88
- const isPause = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.paused;
58
+ const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
89
59
  switch (type) {
90
60
  case 'start':
91
61
  if (!isPause)
92
62
  return;
93
- (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.play();
63
+ (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.play();
94
64
  setIsPauseVideo(false);
95
65
  break;
96
66
  case 'pause':
97
67
  if (isPause)
98
68
  return;
99
- (_g = videoRef.current) === null || _g === void 0 ? void 0 : _g.pause();
69
+ (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
100
70
  setIsPauseVideo(true);
101
71
  break;
102
72
  default:
103
73
  if (isPause) {
104
- (_h = videoRef.current) === null || _h === void 0 ? void 0 : _h.play();
74
+ (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
105
75
  }
106
76
  else {
107
- (_j = videoRef.current) === null || _j === void 0 ? void 0 : _j.pause();
77
+ (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
108
78
  }
109
79
  setIsPauseVideo(!isPause);
110
80
  break;
111
81
  }
112
- }, [data, index, isLoad]);
82
+ }, [isLoadFinish]);
113
83
  const onPause = useCallback(() => {
114
84
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
115
85
  const item = data[index];
@@ -135,38 +105,40 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
135
105
  }
136
106
  }, [data, index, bffEventReport]);
137
107
  useEffect(() => {
138
- var _a, _b, _c;
139
- if (data.length <= 0)
140
- return;
108
+ var _a, _b;
141
109
  if (!videoRef.current)
142
110
  return;
143
111
  setIsPauseVideo(false);
144
- if (!isActive) {
145
- (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
146
- return;
147
- }
148
112
  if (!videoRef.current.src) {
149
113
  const videoSrc = rec.video.url;
150
114
  videoRef.current.src = videoSrc;
151
115
  videoRef.current.setAttribute('x5-playsinline', 'true');
152
116
  videoRef.current.setAttribute('webkit-playsinline', 'true');
153
117
  }
154
- else {
155
- videoRef.current.play();
156
- }
157
- (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('canplay', handleLoadedMetadata);
158
- (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener('playing', handlePlaying);
118
+ (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('canplay', handleLoadedMetadata);
119
+ (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('playing', handlePlaying);
159
120
  return () => {
160
121
  var _a, _b;
161
122
  (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('canplay', handleLoadedMetadata);
162
123
  (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('playing', handlePlaying);
163
124
  };
164
- }, [data, handleLoadedMetadata, handlePlaying, isActive, isLoad, rec.video]);
125
+ }, [handleLoadedMetadata, handlePlaying, rec.video]);
126
+ useEffect(() => {
127
+ var _a;
128
+ if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
129
+ return;
130
+ if (isActive) {
131
+ videoRef.current.play();
132
+ }
133
+ else {
134
+ (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
135
+ }
136
+ }, [isActive, isLoadFinish]);
165
137
  useEffect(() => {
166
138
  var _a, _b, _c;
167
- const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
168
- if (!isActive)
139
+ if (!isActive || !(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
169
140
  return;
141
+ const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
170
142
  if (!isPause && openHashtag) {
171
143
  (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.pause();
172
144
  }
@@ -187,11 +159,11 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
187
159
  };
188
160
  }, [handleClickVideo, isActive]);
189
161
  const renderPoster = useMemo(() => {
190
- if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image)) {
162
+ if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
191
163
  return null;
192
164
  }
193
- return (React.createElement("img", { hidden: isLoad, style: { position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', objectFit: 'cover' }, src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image }));
194
- }, [isLoad, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
165
+ return (React.createElement("img", { style: { position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', objectFit: 'cover' }, src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image }));
166
+ }, [isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
195
167
  useEffect(() => {
196
168
  const handleBeforeUnload = () => {
197
169
  var _a, _b;
package/es/core/components/SxpPageRender/index.js CHANGED
@@ -193,8 +193,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
193
193
  React.createElement("div", { className: 'clc-sxp-bottom-card' },
194
194
  React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: resolver })),
195
195
  React.createElement("div", null,
196
- React.createElement(ExpandableText, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_c = (_b = rec.video) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : '', style: Object.assign({}, descStyle), onChange: onExpandableChange }),
197
- React.createElement(Hashtag, { index: activeIndex, tags: (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.hashTags) !== null && _e !== void 0 ? _e : [], itemId: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.itemId, itemType: ((_g = rec.video) === null || _g === void 0 ? void 0 : _g.url) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle })))));
196
+ React.createElement(ExpandableText, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_c = (_b = rec.video) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : '', style: Object.assign(Object.assign({}, descStyle), { textShadow: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isOpenTextShadow) ? '2px 2px 4px rgba(0, 0, 0, 0.5)' : 'none' }), onChange: onExpandableChange }),
197
+ React.createElement(Hashtag, { index: activeIndex, tags: (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.hashTags) !== null && _e !== void 0 ? _e : [], itemId: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.itemId, itemType: ((_g = rec.video) === null || _g === void 0 ? void 0 : _g.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle })))));
198
198
  }
199
199
  return null;
200
200
  }, [
package/es/materials/sxp/template/components/Img.js CHANGED
@@ -15,7 +15,7 @@ const Img = ({ src, rec, item, index }) => {
15
15
  }, rec, item, index);
16
16
  }
17
17
  }, [isOnScreen, src, ref, rec, ctaEvent, item, index]);
18
- return (React.createElement("div", { ref: ref, hidden: !src },
18
+ return (React.createElement("div", { ref: ref, hidden: !src, className: css({ width: '100%', height: '100%' }) },
19
19
  React.createElement(FormatImage, { className: css({ width: '100%', objectFit: 'cover', height: '100%', display: 'block' }), src: src })));
20
20
  };
21
21
  export default memo(Img);
package/lib/core/components/SxpPageRender/ExpandableText.js CHANGED
@@ -40,7 +40,7 @@ const ExpandableText = ({ text, maxStr = 108, style, className, onClick, foldTex
40
40
  }
41
41
  multiRowCopy.current.style.display = 'none';
42
42
  }, [isPost]);
43
- return (react_1.default.createElement("div", { className: className, style: Object.assign({}, style), hidden: !text || text === '' },
43
+ return (react_1.default.createElement("div", { className: className, style: Object.assign(Object.assign({}, style), { transform: 'translate3d(0px, 0px, 0px)' }), hidden: !text || text === '' },
44
44
  react_1.default.createElement("div", { ref: multiRow, style: {
45
45
  overflow: 'hidden',
46
46
  WebkitLineClamp: !isPost || isShowMore ? '' : lineClamp,
package/lib/core/components/SxpPageRender/PictureGroup/Picture.js CHANGED
@@ -3,32 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const tslib_1 = require("tslib");
4
4
  const react_1 = tslib_1.__importStar(require("react"));
5
5
  const FormatImage_1 = tslib_1.__importDefault(require("../FormatImage"));
6
- const hooks_1 = require("../../../../core/hooks");
7
6
  const Picture = (props) => {
8
7
  const { src, height, width } = props;
9
8
  const [blur, setBlur] = (0, react_1.useState)(false);
10
- const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
11
9
  const onLoad = (img) => {
12
- const aspectRatio = img.height / img.width;
10
+ const aspectRatio = img.naturalHeight / img.naturalWidth;
13
11
  const targetAspectRatio = 16 / 9;
14
12
  const tolerance = 0.05;
15
13
  if (Math.abs(aspectRatio - targetAspectRatio) > tolerance) {
16
14
  setBlur(true);
17
15
  }
18
16
  };
19
- const getImg = (0, react_1.useCallback)((src, style) => {
20
- if (src === '' || !src)
21
- return;
22
- return (src === null || src === void 0 ? void 0 : src.includes('.avif')) ? (react_1.default.createElement("picture", null,
23
- react_1.default.createElement("source", { type: 'image/avif', srcSet: src }),
24
- react_1.default.createElement("source", { type: 'image/webp', srcSet: `${src}?imageMogr2/format/webp` }),
25
- react_1.default.createElement("source", { type: 'image/jpeg', srcSet: `${src}?imageMogr2/format/jpg` }),
26
- react_1.default.createElement("img", { src: src, style: style, onLoad: (e) => {
27
- onLoad(e.target);
28
- } }))) : (react_1.default.createElement("img", { src: src, style: style, onLoad: (e) => {
29
- onLoad(e.target);
30
- } }));
31
- }, []);
32
17
  return (react_1.default.createElement("div", { style: {
33
18
  overflow: 'hidden',
34
19
  height,
package/lib/core/components/SxpPageRender/RenderCard.js CHANGED
@@ -35,7 +35,7 @@ const RenderCard = ({ rec, index, tempMap, resolver }) => {
35
35
  const Component = (0, withBindDataSource_1.default)(t);
36
36
  const defaulSetting = (_x = t === null || t === void 0 ? void 0 : t.extend) === null || _x === void 0 ? void 0 : _x.defaulSetting;
37
37
  const isExternalLink = ((_0 = (_z = (_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.event) === null || _z === void 0 ? void 0 : _z.onClick) === null || _0 === void 0 ? void 0 : _0.linkType) === 'externalLink';
38
- return (react_1.default.createElement(Component, Object.assign({ style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_1 = value === null || value === void 0 ? void 0 : value.item) === null || _1 === void 0 ? void 0 : _1.style), { zIndex: 50, marginLeft: '20px', boxSizing: 'border-box' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_2 = value === null || value === void 0 ? void 0 : value.item) === null || _2 === void 0 ? void 0 : _2.textStyle), bindDatas: (_4 = (_3 = value === null || value === void 0 ? void 0 : value.item) === null || _3 === void 0 ? void 0 : _3.bindDatas) !== null && _4 !== void 0 ? _4 : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_5 = value === null || value === void 0 ? void 0 : value.item) === null || _5 === void 0 ? void 0 : _5.props, { event: ((_6 = value === null || value === void 0 ? void 0 : value.item) === null || _6 === void 0 ? void 0 : _6.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, key: value === null || value === void 0 ? void 0 : value.id, recData: rec, isExternalLink: isExternalLink, index: index })));
38
+ return (react_1.default.createElement(Component, Object.assign({ style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_1 = value === null || value === void 0 ? void 0 : value.item) === null || _1 === void 0 ? void 0 : _1.style), { zIndex: 50, marginLeft: '20px', boxSizing: 'border-box', transform: 'translate3d(0px, 0px, 0px)' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_2 = value === null || value === void 0 ? void 0 : value.item) === null || _2 === void 0 ? void 0 : _2.textStyle), bindDatas: (_4 = (_3 = value === null || value === void 0 ? void 0 : value.item) === null || _3 === void 0 ? void 0 : _3.bindDatas) !== null && _4 !== void 0 ? _4 : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_5 = value === null || value === void 0 ? void 0 : value.item) === null || _5 === void 0 ? void 0 : _5.props, { event: ((_6 = value === null || value === void 0 ? void 0 : value.item) === null || _6 === void 0 ? void 0 : _6.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, key: value === null || value === void 0 ? void 0 : value.id, recData: rec, isExternalLink: isExternalLink, index: index })));
39
39
  }
40
40
  else {
41
41
  return null;
package/lib/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -11,7 +11,8 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
11
11
  const videoRef = (0, react_1.useRef)(null);
12
12
  const { bffEventReport, sxpParameter, waterFallData, openHashtag } = (0, hooks_1.useSxpDataSource)();
13
13
  const videoStartTime = (0, react_1.useRef)(0);
14
- const [isLoad, setIsLoad] = (0, react_1.useState)(false);
14
+ const [isLoadFinish, setIsLoadFinish] = (0, react_1.useState)(false);
15
+ const [isFirstPlay, setIsFirstPlay] = (0, react_1.useState)(true);
15
16
  const { isActive } = (0, react_2.useSwiperSlide)();
16
17
  (0, react_1.useEffect)(() => {
17
18
  if (!videoRef.current)
@@ -27,11 +28,11 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
27
28
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
28
29
  setIsPauseVideo(false);
29
30
  const item = data[index];
30
- if (item && isLoad && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
31
+ if (item && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
31
32
  videoStartTime.current = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.currentTime) || 0;
32
33
  const videoDuration = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 0).toFixed(2);
33
34
  const videoCurrentTime = ((_f = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime) !== null && _f !== void 0 ? _f : 0).toFixed(2);
34
- const playType = '1';
35
+ const playType = isFirstPlay ? '0' : '1';
35
36
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
36
37
  eventInfo: {
37
38
  eventSubject: 'playVideo',
@@ -47,72 +48,41 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
47
48
  traceInfo: (_o = item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
48
49
  }
49
50
  });
51
+ setIsFirstPlay(false);
50
52
  }
51
- if (!isLoad) {
52
- setIsLoad(true);
53
- }
54
- }, [bffEventReport, data, index, isLoad]);
53
+ }, [bffEventReport, data, index, isFirstPlay]);
55
54
  const handleLoadedMetadata = (0, react_1.useCallback)(() => {
56
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
57
- const item = data[index];
58
- if (item && !isLoad && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
59
- videoStartTime.current = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.currentTime) || 0;
60
- const videoDuration = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 0).toFixed(2);
61
- const videoCurrentTime = ((_f = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime) !== null && _f !== void 0 ? _f : 0).toFixed(2);
62
- const playType = '0';
63
- bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
64
- eventInfo: {
65
- eventSubject: 'playVideo',
66
- eventDescription: 'User played the video',
67
- contentId: (_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
68
- contentName: (_k = (_j = item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
69
- playType,
70
- startTime: videoCurrentTime,
71
- videoDuration,
72
- contentTags: JSON.stringify((_m = (_l = item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
73
- position: index + '',
74
- contentFormat: 'video',
75
- traceInfo: (_o = item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
76
- }
77
- });
78
- }
79
- setTimeout(() => {
80
- var _a;
81
- (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
82
- }, 0);
83
- }, [index, bffEventReport, data, isLoad]);
55
+ setIsLoadFinish(true);
56
+ }, []);
84
57
  const handleClickVideo = (0, react_1.useCallback)((type) => () => {
85
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
86
- if (!isLoad)
58
+ var _a, _b, _c, _d, _e;
59
+ if (!isLoadFinish)
87
60
  return;
88
- const item = data[index];
89
- const videoDuration = ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
90
- const videoCurrentTime = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
91
- const isPause = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.paused;
61
+ const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
92
62
  switch (type) {
93
63
  case 'start':
94
64
  if (!isPause)
95
65
  return;
96
- (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.play();
66
+ (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.play();
97
67
  setIsPauseVideo(false);
98
68
  break;
99
69
  case 'pause':
100
70
  if (isPause)
101
71
  return;
102
- (_g = videoRef.current) === null || _g === void 0 ? void 0 : _g.pause();
72
+ (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
103
73
  setIsPauseVideo(true);
104
74
  break;
105
75
  default:
106
76
  if (isPause) {
107
- (_h = videoRef.current) === null || _h === void 0 ? void 0 : _h.play();
77
+ (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
108
78
  }
109
79
  else {
110
- (_j = videoRef.current) === null || _j === void 0 ? void 0 : _j.pause();
80
+ (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
111
81
  }
112
82
  setIsPauseVideo(!isPause);
113
83
  break;
114
84
  }
115
- }, [data, index, isLoad]);
85
+ }, [isLoadFinish]);
116
86
  const onPause = (0, react_1.useCallback)(() => {
117
87
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
118
88
  const item = data[index];
@@ -138,38 +108,40 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
138
108
  }
139
109
  }, [data, index, bffEventReport]);
140
110
  (0, react_1.useEffect)(() => {
141
- var _a, _b, _c;
142
- if (data.length <= 0)
143
- return;
111
+ var _a, _b;
144
112
  if (!videoRef.current)
145
113
  return;
146
114
  setIsPauseVideo(false);
147
- if (!isActive) {
148
- (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
149
- return;
150
- }
151
115
  if (!videoRef.current.src) {
152
116
  const videoSrc = rec.video.url;
153
117
  videoRef.current.src = videoSrc;
154
118
  videoRef.current.setAttribute('x5-playsinline', 'true');
155
119
  videoRef.current.setAttribute('webkit-playsinline', 'true');
156
120
  }
157
- else {
158
- videoRef.current.play();
159
- }
160
- (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('canplay', handleLoadedMetadata);
161
- (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener('playing', handlePlaying);
121
+ (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('canplay', handleLoadedMetadata);
122
+ (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('playing', handlePlaying);
162
123
  return () => {
163
124
  var _a, _b;
164
125
  (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('canplay', handleLoadedMetadata);
165
126
  (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('playing', handlePlaying);
166
127
  };
167
- }, [data, handleLoadedMetadata, handlePlaying, isActive, isLoad, rec.video]);
128
+ }, [handleLoadedMetadata, handlePlaying, rec.video]);
129
+ (0, react_1.useEffect)(() => {
130
+ var _a;
131
+ if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
132
+ return;
133
+ if (isActive) {
134
+ videoRef.current.play();
135
+ }
136
+ else {
137
+ (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
138
+ }
139
+ }, [isActive, isLoadFinish]);
168
140
  (0, react_1.useEffect)(() => {
169
141
  var _a, _b, _c;
170
- const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
171
- if (!isActive)
142
+ if (!isActive || !(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
172
143
  return;
144
+ const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
173
145
  if (!isPause && openHashtag) {
174
146
  (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.pause();
175
147
  }
@@ -190,11 +162,11 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
190
162
  };
191
163
  }, [handleClickVideo, isActive]);
192
164
  const renderPoster = (0, react_1.useMemo)(() => {
193
- if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image)) {
165
+ if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
194
166
  return null;
195
167
  }
196
- return (react_1.default.createElement("img", { hidden: isLoad, style: { position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', objectFit: 'cover' }, src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image }));
197
- }, [isLoad, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
168
+ return (react_1.default.createElement("img", { style: { position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', objectFit: 'cover' }, src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image }));
169
+ }, [isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
198
170
  (0, react_1.useEffect)(() => {
199
171
  const handleBeforeUnload = () => {
200
172
  var _a, _b;
package/lib/core/components/SxpPageRender/index.js CHANGED
@@ -196,8 +196,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
196
196
  react_1.default.createElement("div", { className: 'clc-sxp-bottom-card' },
197
197
  react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: resolver })),
198
198
  react_1.default.createElement("div", null,
199
- react_1.default.createElement(ExpandableText_1.default, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_c = (_b = rec.video) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : '', style: Object.assign({}, descStyle), onChange: onExpandableChange }),
200
- react_1.default.createElement(Hashtag_1.default, { index: activeIndex, tags: (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.hashTags) !== null && _e !== void 0 ? _e : [], itemId: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.itemId, itemType: ((_g = rec.video) === null || _g === void 0 ? void 0 : _g.url) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle })))));
199
+ react_1.default.createElement(ExpandableText_1.default, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_c = (_b = rec.video) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : '', style: Object.assign(Object.assign({}, descStyle), { textShadow: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isOpenTextShadow) ? '2px 2px 4px rgba(0, 0, 0, 0.5)' : 'none' }), onChange: onExpandableChange }),
200
+ react_1.default.createElement(Hashtag_1.default, { index: activeIndex, tags: (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.hashTags) !== null && _e !== void 0 ? _e : [], itemId: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.itemId, itemType: ((_g = rec.video) === null || _g === void 0 ? void 0 : _g.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle })))));
201
201
  }
202
202
  return null;
203
203
  }, [
package/lib/materials/sxp/template/components/Img.js CHANGED
@@ -18,7 +18,7 @@ const Img = ({ src, rec, item, index }) => {
18
18
  }, rec, item, index);
19
19
  }
20
20
  }, [isOnScreen, src, ref, rec, ctaEvent, item, index]);
21
- return (react_1.default.createElement("div", { ref: ref, hidden: !src },
21
+ return (react_1.default.createElement("div", { ref: ref, hidden: !src, className: (0, css_1.css)({ width: '100%', height: '100%' }) },
22
22
  react_1.default.createElement(FormatImage_1.default, { className: (0, css_1.css)({ width: '100%', objectFit: 'cover', height: '100%', display: 'block' }), src: src })));
23
23
  };
24
24
  exports.default = (0, react_1.memo)(Img);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pb-sxp-ui",
3
- "version": "1.0.22",
3
+ "version": "1.0.24",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",