pb-sxp-ui 1.0.46 → 1.0.48

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 (28) hide show
  1. package/dist/index.cjs +74 -75
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +2 -0
  4. package/dist/index.js +74 -75
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.min.cjs +3 -3
  7. package/dist/index.min.cjs.map +1 -1
  8. package/dist/index.min.js +3 -3
  9. package/dist/index.min.js.map +1 -1
  10. package/dist/pb-ui.js +74 -75
  11. package/dist/pb-ui.js.map +1 -1
  12. package/dist/pb-ui.min.js +3 -3
  13. package/dist/pb-ui.min.js.map +1 -1
  14. package/es/core/components/DiyPortalPreview/index.js +5 -3
  15. package/es/core/components/SxpPageCore/index.d.ts +1 -0
  16. package/es/core/components/SxpPageCore/index.js +2 -2
  17. package/es/core/components/SxpPageRender/VideoWidget/index.js +54 -56
  18. package/es/core/components/SxpPageRender/WaterFall/List.js +6 -6
  19. package/es/core/components/SxpPageRender/index.d.ts +1 -0
  20. package/es/core/components/SxpPageRender/index.js +3 -3
  21. package/lib/core/components/DiyPortalPreview/index.js +5 -3
  22. package/lib/core/components/SxpPageCore/index.d.ts +1 -0
  23. package/lib/core/components/SxpPageCore/index.js +2 -2
  24. package/lib/core/components/SxpPageRender/VideoWidget/index.js +54 -56
  25. package/lib/core/components/SxpPageRender/WaterFall/List.js +6 -6
  26. package/lib/core/components/SxpPageRender/index.d.ts +1 -0
  27. package/lib/core/components/SxpPageRender/index.js +3 -3
  28. package/package.json +1 -1
package/es/core/components/DiyPortalPreview/index.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import React, { memo, useMemo } from 'react';
2
+ import { css } from '@emotion/css';
2
3
  import Nudge from '../SxpPageRender/Nudge';
3
4
  import RenderCard from '../SxpPageRender/RenderCard';
4
5
  import ExpandableText from '../SxpPageRender/ExpandableText';
@@ -112,15 +113,16 @@ const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, de
112
113
  renderBottom(rec, index),
113
114
  renderLikeButton(rec, index)));
114
115
  };
115
- return (React.createElement("div", { style: {
116
+ return (React.createElement("div", { className: css({
116
117
  width: '100%',
117
118
  height: containerHeight,
118
119
  display: 'flex',
119
120
  boxSizing: 'border-box',
120
121
  gap: 16,
121
122
  pointerEvents: 'none',
122
- userSelect: 'none'
123
- } }, data === null || data === void 0 ? void 0 : data.map((rec, index) => {
123
+ userSelect: 'none',
124
+ transform: 'scale(0.7) translateX(-22%) translateY(-140px)'
125
+ }) }, data === null || data === void 0 ? void 0 : data.map((rec, index) => {
124
126
  return renderView(rec, index);
125
127
  })));
126
128
  };
package/es/core/components/SxpPageCore/index.d.ts CHANGED
@@ -7,6 +7,7 @@ export interface ISxpPageCoreProps {
7
7
  hashTagSize?: number;
8
8
  loadingImage?: string;
9
9
  appDomain?: string;
10
+ licenseUrl?: String;
10
11
  }
11
12
  declare const _default: React.NamedExoticComponent<ISxpPageCoreProps>;
12
13
  export default _default;
package/es/core/components/SxpPageCore/index.js CHANGED
@@ -8,7 +8,7 @@ const RESOLVER = {};
8
8
  Object.values(_materials_).forEach((v) => {
9
9
  RESOLVER[v.extend.type] = v;
10
10
  });
11
- const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain }) => {
11
+ const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain, licenseUrl }) => {
12
12
  var _a, _b, _c, _d, _e, _f;
13
13
  const utmVal = useMemo(() => {
14
14
  var _a;
@@ -19,7 +19,7 @@ const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, l
19
19
  React.createElement(SxpDataSourceProvider, { utmVal: utmVal, dataSources: data === null || data === void 0 ? void 0 : data.data_sources, sxpParameter: data === null || data === void 0 ? void 0 : data.sxp_parameter, maxSize: (_b = (_a = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _a === void 0 ? void 0 : _a.personalized_recommend) !== null && _b !== void 0 ? _b : maxSize, defaultSize: (_d = (_c = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _c === void 0 ? void 0 : _c.default_recommend) !== null && _d !== void 0 ? _d : defaultSize, hashTagSize: (_f = (_e = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _e === void 0 ? void 0 : _e.hash_tag_size) !== null && _f !== void 0 ? _f : hashTagSize, loadingImage: loadingImage, appDomain: appDomain, render: ({ rtcList, tagList }) => {
20
20
  var _a;
21
21
  return (React.createElement(React.Fragment, null,
22
- React.createElement(SxpPageRender, Object.assign({}, (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.sxpPageConf, { tagList: tagList, data: rtcList, resolver: RESOLVER })),
22
+ React.createElement(SxpPageRender, Object.assign({}, (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.sxpPageConf, { tagList: tagList, data: rtcList, resolver: RESOLVER, licenseUrl: licenseUrl })),
23
23
  React.createElement(Popup, null)));
24
24
  } })));
25
25
  };
package/es/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -15,6 +15,33 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
15
15
  const [firstFrameSrc, setFirstFrameSrc] = useState('');
16
16
  const videoId = `pb-cache-video-${index}`;
17
17
  const videoEleRef = useRef(null);
18
+ const blur = useMemo(() => {
19
+ return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
20
+ }, [videoPostConfig]);
21
+ const translateY = useMemo(() => {
22
+ var _a;
23
+ return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2'
24
+ ? `translateY(-${50 + ((_a = videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%) translate3d(0px, 0px, 0px)`
25
+ : 'translateY(-50%)';
26
+ }, [videoPostConfig]);
27
+ const blurBgSrc = useMemo(() => {
28
+ var _a;
29
+ return ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || firstFrameSrc;
30
+ }, [firstFrameSrc, rec]);
31
+ const blurStyle = useMemo(() => {
32
+ return blur
33
+ ? {
34
+ filter: 'blur(10px)',
35
+ transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
36
+ }
37
+ : {};
38
+ }, [blur]);
39
+ const isBgColor = useMemo(() => {
40
+ return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgWay) === '1';
41
+ }, [videoPostConfig]);
42
+ const bgStyle = useMemo(() => {
43
+ return isBgColor && (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgColor) ? { backgroundColor: videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgColor } : {};
44
+ }, [videoPostConfig, isBgColor]);
18
45
  useEffect(() => {
19
46
  if (!videoRef)
20
47
  return;
@@ -55,15 +82,35 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
55
82
  setIsFirstPlay(false);
56
83
  }
57
84
  }, [bffEventReport, data, index, isFirstPlay, videoRef]);
85
+ const handLoadeddata = useCallback(() => {
86
+ var _a;
87
+ if (!videoRef || isBgColor || firstFrameSrc)
88
+ return;
89
+ const videoDomRef = document.getElementById('player-container-id_html5_api');
90
+ if (((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || !canvasRef || !videoDomRef || !canvasRef.current)
91
+ return;
92
+ const setFrameImg = () => {
93
+ const video = videoDomRef;
94
+ const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
95
+ const ctx = canvas.getContext('2d');
96
+ const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
97
+ const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
98
+ canvas.height = targetHeight;
99
+ canvas.width = targetWidth;
100
+ ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
101
+ setFirstFrameSrc(canvas.toDataURL());
102
+ };
103
+ setFrameImg();
104
+ setTimeout(() => {
105
+ setFrameImg();
106
+ }, 500);
107
+ }, [videoRef, isBgColor, rec, firstFrameSrc]);
58
108
  const handleLoadedmetadata = useCallback(() => {
59
109
  if (!videoRef)
60
110
  return;
61
- if (activeIndex !== index) {
62
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
63
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.pause();
64
- }
111
+ handLoadeddata();
65
112
  setIsLoadFinish(true);
66
- }, [activeIndex, index, videoRef]);
113
+ }, [videoRef, handLoadeddata]);
67
114
  const handleCanplay = useCallback(() => {
68
115
  setIsLoadFinish(true);
69
116
  }, []);
@@ -124,57 +171,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
124
171
  }
125
172
  });
126
173
  }
127
- }, [data, index, bffEventReport, videoRef]);
128
- const blur = useMemo(() => {
129
- return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
130
- }, [videoPostConfig]);
131
- const translateY = useMemo(() => {
132
- var _a;
133
- return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2'
134
- ? `translateY(-${50 + ((_a = videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%) translate3d(0px, 0px, 0px)`
135
- : 'translateY(-50%)';
136
- }, [videoPostConfig]);
137
- const blurBgSrc = useMemo(() => {
138
- var _a;
139
- return ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || firstFrameSrc;
140
- }, [firstFrameSrc, rec]);
141
- const blurStyle = useMemo(() => {
142
- return blur
143
- ? {
144
- filter: 'blur(10px)',
145
- transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
146
- }
147
- : {};
148
- }, [blur]);
149
- const isBgColor = useMemo(() => {
150
- return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgWay) === '1';
151
- }, [videoPostConfig]);
152
- const bgStyle = useMemo(() => {
153
- return isBgColor && (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgColor) ? { backgroundColor: videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgColor } : {};
154
- }, [videoPostConfig, isBgColor]);
155
- const handLoadeddata = useCallback(() => {
156
- var _a;
157
- if (!videoRef || isBgColor)
158
- return;
159
- const videoDomRef = document.getElementById('player-container-id_html5_api');
160
- if (((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || !canvasRef || !videoDomRef || !canvasRef.current)
161
- return;
162
- const setFrameImg = () => {
163
- const video = videoDomRef;
164
- const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
165
- const ctx = canvas.getContext('2d');
166
- const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
167
- const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
168
- canvas.height = targetHeight;
169
- canvas.width = targetWidth;
170
- ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
171
- setFirstFrameSrc(canvas.toDataURL());
172
- };
173
- setFrameImg();
174
- setTimeout(() => {
175
- setFrameImg();
176
- }, 500);
177
- }, [videoRef, isBgColor, rec]);
174
+ }, [data, index, bffEventReport, videoRef, activeIndex]);
178
175
  useEffect(() => {
179
176
  if (!isActive || !videoRef)
180
177
  return;
@@ -188,6 +185,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
188
185
  if (!dom && !dom2)
189
186
  return;
190
187
  videoPlayerWrapperNode === null || videoPlayerWrapperNode === void 0 ? void 0 : videoPlayerWrapperNode.appendChild(dom || dom2);
188
+ videoRef.poster('https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240218/fsTan2fgYKJWrCpJtGZPogm0NnvdT1708239153661.jpeg');
191
189
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.src(videoSrc);
192
190
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('loadedmetadata', handleLoadedmetadata);
193
191
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('loadeddata', handLoadeddata);
package/es/core/components/SxpPageRender/WaterFall/List.js CHANGED
@@ -117,7 +117,7 @@ const WaterfallFlowItem = (props) => {
117
117
  React.createElement("div", { className: 'list-content-listItem-info-price', style: textStyles === null || textStyles === void 0 ? void 0 : textStyles.price, hidden: !priceText }, priceText))));
118
118
  };
119
119
  export default function WaterfallList(_a) {
120
- var _b, _c, _d, _e, _f, _g, _h, _j, _k;
120
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
121
121
  var { reportTagsView } = _a, props = __rest(_a, ["reportTagsView"]);
122
122
  const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag } = useSxpDataSource();
123
123
  const [list, setList] = useState();
@@ -178,10 +178,10 @@ export default function WaterfallList(_a) {
178
178
  return (React.createElement(WaterfallFlowItem, Object.assign({ key: ind, index: ind, rec: item, list: list, reportTagsView: reportTagsView }, props)));
179
179
  })),
180
180
  React.createElement("div", { hidden: !isLoadMore, style: { textAlign: 'center' } }, "loading..."),
181
- React.createElement("div", { style: {
182
- height: ((_g = data === null || data === void 0 ? void 0 : data.tag) === null || _g === void 0 ? void 0 : _g.link) ? ((_h = props === null || props === void 0 ? void 0 : props.buttonBgStyle) === null || _h === void 0 ? void 0 : _h.height) || ((_j = props === null || props === void 0 ? void 0 : props.buttonStyle) === null || _j === void 0 ? void 0 : _j.height) || '100px' : 0
181
+ React.createElement("div", { hidden: !((_g = data === null || data === void 0 ? void 0 : data.tag) === null || _g === void 0 ? void 0 : _g.link), style: {
182
+ height: ((_h = data === null || data === void 0 ? void 0 : data.tag) === null || _h === void 0 ? void 0 : _h.link) ? ((_j = props === null || props === void 0 ? void 0 : props.buttonBgStyle) === null || _j === void 0 ? void 0 : _j.height) || ((_k = props === null || props === void 0 ? void 0 : props.buttonStyle) === null || _k === void 0 ? void 0 : _k.height) || '100px' : 0
183
183
  } })),
184
- React.createElement("div", { className: 'list-bottom', style: props === null || props === void 0 ? void 0 : props.buttonBgStyle }),
185
- React.createElement("div", { className: 'list-btn-wrap', style: Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props.buttonBgStyle), { height: 'auto', backgroundColor: 'transparent' }) },
186
- React.createElement("button", { className: 'list-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_k = data === null || data === void 0 ? void 0 : data.tag) === null || _k === void 0 ? void 0 : _k.linkTitle) || 'Shop the collection'))))));
184
+ React.createElement("div", { className: 'list-bottom', hidden: !((_l = data === null || data === void 0 ? void 0 : data.tag) === null || _l === void 0 ? void 0 : _l.link), style: props === null || props === void 0 ? void 0 : props.buttonBgStyle }),
185
+ React.createElement("div", { hidden: !((_m = data === null || data === void 0 ? void 0 : data.tag) === null || _m === void 0 ? void 0 : _m.link), className: 'list-btn-wrap', style: Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props.buttonBgStyle), { height: 'auto', backgroundColor: 'transparent' }) },
186
+ React.createElement("button", { className: 'list-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_o = data === null || data === void 0 ? void 0 : data.tag) === null || _o === void 0 ? void 0 : _o.linkTitle) || 'Shop the collection'))))));
187
187
  }
package/es/core/components/SxpPageRender/index.d.ts CHANGED
@@ -63,6 +63,7 @@ export interface ISxpPageRenderProps {
63
63
  ctaType?: string;
64
64
  _schema?: any;
65
65
  hashTagStyle?: CSSProperties;
66
+ licenseUrl?: String;
66
67
  }
67
68
  declare const SxpPageRender: FC<ISxpPageRenderProps>;
68
69
  export default SxpPageRender;
package/es/core/components/SxpPageRender/index.js CHANGED
@@ -22,7 +22,7 @@ import { useEventReport } from '../../../core/hooks/useEventReport';
22
22
  import withBindDataSource from '../../../core/hoc/withBindDataSource';
23
23
  import { getFeUserId } from '../../../core/utils/localStore';
24
24
  import Tagbar from './Tagbar';
25
- const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, tagList = [] }) => {
25
+ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, tagList = [], licenseUrl }) => {
26
26
  var _a, _b, _c, _d, _e, _f, _g;
27
27
  const { schema } = useEditor();
28
28
  const [activeIndex, setActiveIndex] = useState(0);
@@ -76,7 +76,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
76
76
  if (!firstRef.current && !videoRef) {
77
77
  firstRef.current = true;
78
78
  const player = TCPlayer('player-container-id', {
79
- licenseUrl: 'https://license.vod2.myqcloud.com/license/v2/1325816236_1/v_cube.license',
79
+ licenseUrl,
80
80
  controls: false,
81
81
  autoplay: false,
82
82
  loop: false,
@@ -89,7 +89,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
89
89
  setVideoRef(player);
90
90
  });
91
91
  }
92
- }, [videoRef]);
92
+ }, [videoRef, licenseUrl]);
93
93
  useEffect(() => {
94
94
  if (!isInit)
95
95
  handleH5EnterLink();
package/lib/core/components/DiyPortalPreview/index.js CHANGED
@@ -2,6 +2,7 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const tslib_1 = require("tslib");
4
4
  const react_1 = tslib_1.__importStar(require("react"));
5
+ const css_1 = require("@emotion/css");
5
6
  const Nudge_1 = tslib_1.__importDefault(require("../SxpPageRender/Nudge"));
6
7
  const RenderCard_1 = tslib_1.__importDefault(require("../SxpPageRender/RenderCard"));
7
8
  const ExpandableText_1 = tslib_1.__importDefault(require("../SxpPageRender/ExpandableText"));
@@ -115,15 +116,16 @@ const DiyPortalPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, de
115
116
  renderBottom(rec, index),
116
117
  renderLikeButton(rec, index)));
117
118
  };
118
- return (react_1.default.createElement("div", { style: {
119
+ return (react_1.default.createElement("div", { className: (0, css_1.css)({
119
120
  width: '100%',
120
121
  height: containerHeight,
121
122
  display: 'flex',
122
123
  boxSizing: 'border-box',
123
124
  gap: 16,
124
125
  pointerEvents: 'none',
125
- userSelect: 'none'
126
- } }, data === null || data === void 0 ? void 0 : data.map((rec, index) => {
126
+ userSelect: 'none',
127
+ transform: 'scale(0.7) translateX(-22%) translateY(-140px)'
128
+ }) }, data === null || data === void 0 ? void 0 : data.map((rec, index) => {
127
129
  return renderView(rec, index);
128
130
  })));
129
131
  };
package/lib/core/components/SxpPageCore/index.d.ts CHANGED
@@ -7,6 +7,7 @@ export interface ISxpPageCoreProps {
7
7
  hashTagSize?: number;
8
8
  loadingImage?: string;
9
9
  appDomain?: string;
10
+ licenseUrl?: String;
10
11
  }
11
12
  declare const _default: React.NamedExoticComponent<ISxpPageCoreProps>;
12
13
  export default _default;
package/lib/core/components/SxpPageCore/index.js CHANGED
@@ -11,7 +11,7 @@ const RESOLVER = {};
11
11
  Object.values(_materials_).forEach((v) => {
12
12
  RESOLVER[v.extend.type] = v;
13
13
  });
14
- const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain }) => {
14
+ const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain, licenseUrl }) => {
15
15
  var _a, _b, _c, _d, _e, _f;
16
16
  const utmVal = (0, react_1.useMemo)(() => {
17
17
  var _a;
@@ -22,7 +22,7 @@ const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, l
22
22
  react_1.default.createElement(SxpDataSourceProvider_1.default, { utmVal: utmVal, dataSources: data === null || data === void 0 ? void 0 : data.data_sources, sxpParameter: data === null || data === void 0 ? void 0 : data.sxp_parameter, maxSize: (_b = (_a = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _a === void 0 ? void 0 : _a.personalized_recommend) !== null && _b !== void 0 ? _b : maxSize, defaultSize: (_d = (_c = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _c === void 0 ? void 0 : _c.default_recommend) !== null && _d !== void 0 ? _d : defaultSize, hashTagSize: (_f = (_e = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _e === void 0 ? void 0 : _e.hash_tag_size) !== null && _f !== void 0 ? _f : hashTagSize, loadingImage: loadingImage, appDomain: appDomain, render: ({ rtcList, tagList }) => {
23
23
  var _a;
24
24
  return (react_1.default.createElement(react_1.default.Fragment, null,
25
- react_1.default.createElement(SxpPageRender_1.default, Object.assign({}, (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.sxpPageConf, { tagList: tagList, data: rtcList, resolver: RESOLVER })),
25
+ react_1.default.createElement(SxpPageRender_1.default, Object.assign({}, (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.sxpPageConf, { tagList: tagList, data: rtcList, resolver: RESOLVER, licenseUrl: licenseUrl })),
26
26
  react_1.default.createElement(Popup_1.default, null)));
27
27
  } })));
28
28
  };
package/lib/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -18,6 +18,33 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
18
18
  const [firstFrameSrc, setFirstFrameSrc] = (0, react_1.useState)('');
19
19
  const videoId = `pb-cache-video-${index}`;
20
20
  const videoEleRef = (0, react_1.useRef)(null);
21
+ const blur = (0, react_1.useMemo)(() => {
22
+ return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
23
+ }, [videoPostConfig]);
24
+ const translateY = (0, react_1.useMemo)(() => {
25
+ var _a;
26
+ return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2'
27
+ ? `translateY(-${50 + ((_a = videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%) translate3d(0px, 0px, 0px)`
28
+ : 'translateY(-50%)';
29
+ }, [videoPostConfig]);
30
+ const blurBgSrc = (0, react_1.useMemo)(() => {
31
+ var _a;
32
+ return ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || firstFrameSrc;
33
+ }, [firstFrameSrc, rec]);
34
+ const blurStyle = (0, react_1.useMemo)(() => {
35
+ return blur
36
+ ? {
37
+ filter: 'blur(10px)',
38
+ transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
39
+ }
40
+ : {};
41
+ }, [blur]);
42
+ const isBgColor = (0, react_1.useMemo)(() => {
43
+ return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgWay) === '1';
44
+ }, [videoPostConfig]);
45
+ const bgStyle = (0, react_1.useMemo)(() => {
46
+ return isBgColor && (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgColor) ? { backgroundColor: videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgColor } : {};
47
+ }, [videoPostConfig, isBgColor]);
21
48
  (0, react_1.useEffect)(() => {
22
49
  if (!videoRef)
23
50
  return;
@@ -58,15 +85,35 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
58
85
  setIsFirstPlay(false);
59
86
  }
60
87
  }, [bffEventReport, data, index, isFirstPlay, videoRef]);
88
+ const handLoadeddata = (0, react_1.useCallback)(() => {
89
+ var _a;
90
+ if (!videoRef || isBgColor || firstFrameSrc)
91
+ return;
92
+ const videoDomRef = document.getElementById('player-container-id_html5_api');
93
+ if (((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || !canvasRef || !videoDomRef || !canvasRef.current)
94
+ return;
95
+ const setFrameImg = () => {
96
+ const video = videoDomRef;
97
+ const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
98
+ const ctx = canvas.getContext('2d');
99
+ const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
100
+ const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
101
+ canvas.height = targetHeight;
102
+ canvas.width = targetWidth;
103
+ ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
104
+ setFirstFrameSrc(canvas.toDataURL());
105
+ };
106
+ setFrameImg();
107
+ setTimeout(() => {
108
+ setFrameImg();
109
+ }, 500);
110
+ }, [videoRef, isBgColor, rec, firstFrameSrc]);
61
111
  const handleLoadedmetadata = (0, react_1.useCallback)(() => {
62
112
  if (!videoRef)
63
113
  return;
64
- if (activeIndex !== index) {
65
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
66
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.pause();
67
- }
114
+ handLoadeddata();
68
115
  setIsLoadFinish(true);
69
- }, [activeIndex, index, videoRef]);
116
+ }, [videoRef, handLoadeddata]);
70
117
  const handleCanplay = (0, react_1.useCallback)(() => {
71
118
  setIsLoadFinish(true);
72
119
  }, []);
@@ -127,57 +174,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
127
174
  }
128
175
  });
129
176
  }
130
- }, [data, index, bffEventReport, videoRef]);
131
- const blur = (0, react_1.useMemo)(() => {
132
- return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
133
- }, [videoPostConfig]);
134
- const translateY = (0, react_1.useMemo)(() => {
135
- var _a;
136
- return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2'
137
- ? `translateY(-${50 + ((_a = videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%) translate3d(0px, 0px, 0px)`
138
- : 'translateY(-50%)';
139
- }, [videoPostConfig]);
140
- const blurBgSrc = (0, react_1.useMemo)(() => {
141
- var _a;
142
- return ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || firstFrameSrc;
143
- }, [firstFrameSrc, rec]);
144
- const blurStyle = (0, react_1.useMemo)(() => {
145
- return blur
146
- ? {
147
- filter: 'blur(10px)',
148
- transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
149
- }
150
- : {};
151
- }, [blur]);
152
- const isBgColor = (0, react_1.useMemo)(() => {
153
- return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgWay) === '1';
154
- }, [videoPostConfig]);
155
- const bgStyle = (0, react_1.useMemo)(() => {
156
- return isBgColor && (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgColor) ? { backgroundColor: videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgColor } : {};
157
- }, [videoPostConfig, isBgColor]);
158
- const handLoadeddata = (0, react_1.useCallback)(() => {
159
- var _a;
160
- if (!videoRef || isBgColor)
161
- return;
162
- const videoDomRef = document.getElementById('player-container-id_html5_api');
163
- if (((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || !canvasRef || !videoDomRef || !canvasRef.current)
164
- return;
165
- const setFrameImg = () => {
166
- const video = videoDomRef;
167
- const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
168
- const ctx = canvas.getContext('2d');
169
- const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
170
- const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
171
- canvas.height = targetHeight;
172
- canvas.width = targetWidth;
173
- ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
174
- setFirstFrameSrc(canvas.toDataURL());
175
- };
176
- setFrameImg();
177
- setTimeout(() => {
178
- setFrameImg();
179
- }, 500);
180
- }, [videoRef, isBgColor, rec]);
177
+ }, [data, index, bffEventReport, videoRef, activeIndex]);
181
178
  (0, react_1.useEffect)(() => {
182
179
  if (!isActive || !videoRef)
183
180
  return;
@@ -191,6 +188,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
191
188
  if (!dom && !dom2)
192
189
  return;
193
190
  videoPlayerWrapperNode === null || videoPlayerWrapperNode === void 0 ? void 0 : videoPlayerWrapperNode.appendChild(dom || dom2);
191
+ videoRef.poster('https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240218/fsTan2fgYKJWrCpJtGZPogm0NnvdT1708239153661.jpeg');
194
192
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.src(videoSrc);
195
193
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('loadedmetadata', handleLoadedmetadata);
196
194
  videoRef === null || videoRef === void 0 ? void 0 : videoRef.on('loadeddata', handLoadeddata);
package/lib/core/components/SxpPageRender/WaterFall/List.js CHANGED
@@ -119,7 +119,7 @@ const WaterfallFlowItem = (props) => {
119
119
  react_1.default.createElement("div", { className: 'list-content-listItem-info-price', style: textStyles === null || textStyles === void 0 ? void 0 : textStyles.price, hidden: !priceText }, priceText))));
120
120
  };
121
121
  function WaterfallList(_a) {
122
- var _b, _c, _d, _e, _f, _g, _h, _j, _k;
122
+ var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
123
123
  var { reportTagsView } = _a, props = tslib_1.__rest(_a, ["reportTagsView"]);
124
124
  const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag } = (0, hooks_1.useSxpDataSource)();
125
125
  const [list, setList] = (0, react_1.useState)();
@@ -180,11 +180,11 @@ function WaterfallList(_a) {
180
180
  return (react_1.default.createElement(WaterfallFlowItem, Object.assign({ key: ind, index: ind, rec: item, list: list, reportTagsView: reportTagsView }, props)));
181
181
  })),
182
182
  react_1.default.createElement("div", { hidden: !isLoadMore, style: { textAlign: 'center' } }, "loading..."),
183
- react_1.default.createElement("div", { style: {
184
- height: ((_g = data === null || data === void 0 ? void 0 : data.tag) === null || _g === void 0 ? void 0 : _g.link) ? ((_h = props === null || props === void 0 ? void 0 : props.buttonBgStyle) === null || _h === void 0 ? void 0 : _h.height) || ((_j = props === null || props === void 0 ? void 0 : props.buttonStyle) === null || _j === void 0 ? void 0 : _j.height) || '100px' : 0
183
+ react_1.default.createElement("div", { hidden: !((_g = data === null || data === void 0 ? void 0 : data.tag) === null || _g === void 0 ? void 0 : _g.link), style: {
184
+ height: ((_h = data === null || data === void 0 ? void 0 : data.tag) === null || _h === void 0 ? void 0 : _h.link) ? ((_j = props === null || props === void 0 ? void 0 : props.buttonBgStyle) === null || _j === void 0 ? void 0 : _j.height) || ((_k = props === null || props === void 0 ? void 0 : props.buttonStyle) === null || _k === void 0 ? void 0 : _k.height) || '100px' : 0
185
185
  } })),
186
- react_1.default.createElement("div", { className: 'list-bottom', style: props === null || props === void 0 ? void 0 : props.buttonBgStyle }),
187
- react_1.default.createElement("div", { className: 'list-btn-wrap', style: Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props.buttonBgStyle), { height: 'auto', backgroundColor: 'transparent' }) },
188
- react_1.default.createElement("button", { className: 'list-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_k = data === null || data === void 0 ? void 0 : data.tag) === null || _k === void 0 ? void 0 : _k.linkTitle) || 'Shop the collection'))))));
186
+ react_1.default.createElement("div", { className: 'list-bottom', hidden: !((_l = data === null || data === void 0 ? void 0 : data.tag) === null || _l === void 0 ? void 0 : _l.link), style: props === null || props === void 0 ? void 0 : props.buttonBgStyle }),
187
+ react_1.default.createElement("div", { hidden: !((_m = data === null || data === void 0 ? void 0 : data.tag) === null || _m === void 0 ? void 0 : _m.link), className: 'list-btn-wrap', style: Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props.buttonBgStyle), { height: 'auto', backgroundColor: 'transparent' }) },
188
+ react_1.default.createElement("button", { className: 'list-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_o = data === null || data === void 0 ? void 0 : data.tag) === null || _o === void 0 ? void 0 : _o.linkTitle) || 'Shop the collection'))))));
189
189
  }
190
190
  exports.default = WaterfallList;
package/lib/core/components/SxpPageRender/index.d.ts CHANGED
@@ -63,6 +63,7 @@ export interface ISxpPageRenderProps {
63
63
  ctaType?: string;
64
64
  _schema?: any;
65
65
  hashTagStyle?: CSSProperties;
66
+ licenseUrl?: String;
66
67
  }
67
68
  declare const SxpPageRender: FC<ISxpPageRenderProps>;
68
69
  export default SxpPageRender;
package/lib/core/components/SxpPageRender/index.js CHANGED
@@ -25,7 +25,7 @@ const useEventReport_1 = require("../../../core/hooks/useEventReport");
25
25
  const withBindDataSource_1 = tslib_1.__importDefault(require("../../../core/hoc/withBindDataSource"));
26
26
  const localStore_1 = require("../../../core/utils/localStore");
27
27
  const Tagbar_1 = tslib_1.__importDefault(require("./Tagbar"));
28
- const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, tagList = [] }) => {
28
+ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.innerHeight, containerWidth = window.innerWidth, tempMap, resolver, data = [], ctaType, tipText, nudge, _schema, hashTagStyle, tagList = [], licenseUrl }) => {
29
29
  var _a, _b, _c, _d, _e, _f, _g;
30
30
  const { schema } = (0, hooks_1.useEditor)();
31
31
  const [activeIndex, setActiveIndex] = (0, react_1.useState)(0);
@@ -79,7 +79,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
79
79
  if (!firstRef.current && !videoRef) {
80
80
  firstRef.current = true;
81
81
  const player = TCPlayer('player-container-id', {
82
- licenseUrl: 'https://license.vod2.myqcloud.com/license/v2/1325816236_1/v_cube.license',
82
+ licenseUrl,
83
83
  controls: false,
84
84
  autoplay: false,
85
85
  loop: false,
@@ -92,7 +92,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
92
92
  setVideoRef(player);
93
93
  });
94
94
  }
95
- }, [videoRef]);
95
+ }, [videoRef, licenseUrl]);
96
96
  (0, react_1.useEffect)(() => {
97
97
  if (!isInit)
98
98
  handleH5EnterLink();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pb-sxp-ui",
3
- "version": "1.0.46",
3
+ "version": "1.0.48",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",