pb-sxp-ui 1.0.101 → 1.0.102

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 (38) hide show
  1. package/dist/index.cjs +166 -126
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +10 -3
  4. package/dist/index.js +167 -126
  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 +166 -126
  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/SxpPageRender/Nudge/index.d.ts +2 -0
  15. package/es/core/components/SxpPageRender/Nudge/index.js +5 -2
  16. package/es/core/components/SxpPageRender/VideoWidget/VideoPlayer.d.ts +1 -0
  17. package/es/core/components/SxpPageRender/VideoWidget/VideoPlayer.js +22 -0
  18. package/es/core/components/SxpPageRender/VideoWidget/index.d.ts +0 -1
  19. package/es/core/components/SxpPageRender/VideoWidget/index.js +93 -85
  20. package/es/core/components/SxpPageRender/index.js +3 -25
  21. package/es/materials/sxp/popup/AppointForm/settingRender.js +2 -2
  22. package/es/materials/sxp/popup/Prompt/index.d.ts +1 -0
  23. package/es/materials/sxp/popup/Prompt/index.js +4 -2
  24. package/es/materials/sxp/popup/Prompt/settingRender.d.ts +12 -0
  25. package/es/materials/sxp/popup/Prompt/settingRender.js +33 -4
  26. package/lib/core/components/SxpPageRender/Nudge/index.d.ts +2 -0
  27. package/lib/core/components/SxpPageRender/Nudge/index.js +5 -2
  28. package/lib/core/components/SxpPageRender/VideoWidget/VideoPlayer.d.ts +1 -0
  29. package/lib/core/components/SxpPageRender/VideoWidget/VideoPlayer.js +26 -0
  30. package/lib/core/components/SxpPageRender/VideoWidget/index.d.ts +0 -1
  31. package/lib/core/components/SxpPageRender/VideoWidget/index.js +93 -85
  32. package/lib/core/components/SxpPageRender/index.js +3 -25
  33. package/lib/materials/sxp/popup/AppointForm/settingRender.js +2 -2
  34. package/lib/materials/sxp/popup/Prompt/index.d.ts +1 -0
  35. package/lib/materials/sxp/popup/Prompt/index.js +4 -2
  36. package/lib/materials/sxp/popup/Prompt/settingRender.d.ts +12 -0
  37. package/lib/materials/sxp/popup/Prompt/settingRender.js +33 -4
  38. package/package.json +1 -1
package/es/core/components/SxpPageRender/Nudge/index.d.ts CHANGED
@@ -17,6 +17,8 @@ interface IProps {
17
17
  fontSize: number;
18
18
  fontStyle: string;
19
19
  textAlign: string;
20
+ ['fontFamily-cn']?: string;
21
+ ['fontFamily-en']?: string;
20
22
  };
21
23
  };
22
24
  }
package/es/core/components/SxpPageRender/Nudge/index.js CHANGED
@@ -1,6 +1,7 @@
1
+ import { setFontForText } from '../../../../core/utils/tool';
1
2
  import React from 'react';
2
3
  const Nudge = ({ nudge }) => {
3
- var _a, _b, _c, _d, _e, _f, _g;
4
+ var _a, _b, _c, _d, _e, _f;
4
5
  return (React.createElement(React.Fragment, null, (nudge === null || nudge === void 0 ? void 0 : nudge.isOpen) && (React.createElement("div", { className: 'clc-sxp-bottom-nudge', style: {
5
6
  marginBottom: (_a = nudge === null || nudge === void 0 ? void 0 : nudge.marginBottom) !== null && _a !== void 0 ? _a : 5,
6
7
  width: (_c = (_b = nudge === null || nudge === void 0 ? void 0 : nudge.size) === null || _b === void 0 ? void 0 : _b.width) !== null && _c !== void 0 ? _c : 212,
@@ -9,6 +10,8 @@ const Nudge = ({ nudge }) => {
9
10
  borderRadius: (_f = nudge === null || nudge === void 0 ? void 0 : nudge.borderRadius) !== null && _f !== void 0 ? _f : 4
10
11
  } },
11
12
  (nudge === null || nudge === void 0 ? void 0 : nudge.icon) ? (React.createElement("img", { src: nudge.icon, alt: 'nudge icon', style: { height: '100%', objectFit: 'cover', flexShrink: 0 } })) : null,
12
- React.createElement("p", { style: Object.assign(Object.assign({}, nudge === null || nudge === void 0 ? void 0 : nudge.textStyle), { textWrap: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', flex: 1, marginBottom: 0 }) }, (_g = nudge === null || nudge === void 0 ? void 0 : nudge.content) !== null && _g !== void 0 ? _g : '')))));
13
+ React.createElement("p", { style: Object.assign(Object.assign({}, nudge === null || nudge === void 0 ? void 0 : nudge.textStyle), { textWrap: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', flex: 1, marginBottom: 0 }), dangerouslySetInnerHTML: {
14
+ __html: setFontForText(nudge === null || nudge === void 0 ? void 0 : nudge.content, nudge === null || nudge === void 0 ? void 0 : nudge.textStyle)
15
+ } })))));
13
16
  };
14
17
  export default Nudge;
package/es/core/components/SxpPageRender/VideoWidget/VideoPlayer.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const mountVideoPlayerAtNode: ((domNode: any) => Element | null | undefined) | undefined;
package/es/core/components/SxpPageRender/VideoWidget/VideoPlayer.js ADDED
@@ -0,0 +1,22 @@
1
+ import React from 'react';
2
+ import ReactDOM from 'react-dom';
3
+ export const mountVideoPlayerAtNode = (() => {
4
+ if (typeof document === 'undefined')
5
+ return;
6
+ const playerContainer = document.createElement('div');
7
+ const dom = ReactDOM.render(React.createElement("video", { id: 'player-container-id', playsInline: true, crossOrigin: 'anonymous', preload: 'auto', controls: false, muted: true, style: {
8
+ backgroundColor: 'transparent',
9
+ width: '100%',
10
+ height: '100%',
11
+ objectFit: 'cover',
12
+ pointerEvents: 'none'
13
+ } }), playerContainer);
14
+ return (domNode) => {
15
+ if (!domNode)
16
+ return;
17
+ domNode.innerHTML = '';
18
+ domNode.appendChild(dom);
19
+ const videoPlayerWrapperNode = document.querySelector(`#player-container-id`);
20
+ return videoPlayerWrapperNode;
21
+ };
22
+ })();
package/es/core/components/SxpPageRender/VideoWidget/index.d.ts CHANGED
@@ -9,7 +9,6 @@ interface IVideoWidgetProps {
9
9
  muted: boolean;
10
10
  activeIndex?: number;
11
11
  videoPostConfig?: postConfigType;
12
- videoRef?: any;
13
12
  videoPlayIcon?: string;
14
13
  }
15
14
  declare const _default: React.NamedExoticComponent<IVideoWidgetProps>;
package/es/core/components/SxpPageRender/VideoWidget/index.js CHANGED
@@ -5,7 +5,8 @@ import FormatImage from '../FormatImage';
5
5
  import { useSxpDataSource } from '../../../../core/hooks';
6
6
  import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../../../../core/utils/event';
7
7
  import loading_gif from './loading.gif';
8
- const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoRef, videoPlayIcon }) => {
8
+ import { mountVideoPlayerAtNode } from './VideoPlayer';
9
+ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon }) => {
9
10
  const [isPauseVideo, setIsPauseVideo] = useState(false);
10
11
  const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport } = useSxpDataSource();
11
12
  const videoStartTime = useRef(0);
@@ -15,6 +16,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
15
16
  const canvasRef = useRef(null);
16
17
  const [firstFrameSrc, setFirstFrameSrc] = useState('');
17
18
  const [waiting, setWaiting] = useState(false);
19
+ const videoRef = useRef();
18
20
  const videoId = `pb-cache-video-${index}`;
19
21
  const videoEleRef = useRef(null);
20
22
  const blur = useMemo(() => {
@@ -45,56 +47,57 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
45
47
  return isBgColor && (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgColor) ? { backgroundColor: videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.bgColor } : {};
46
48
  }, [videoPostConfig, isBgColor]);
47
49
  useEffect(() => {
48
- if (!videoRef)
50
+ if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
49
51
  return;
50
- videoRef.muted = muted;
51
- }, [muted, videoRef]);
52
+ videoRef.current.muted = muted;
53
+ }, [muted, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
52
54
  const handlePlay = useCallback(() => {
53
- if (!videoRef)
55
+ var _a;
56
+ if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
54
57
  return;
55
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
56
- }, [videoRef]);
58
+ (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
59
+ }, [videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
57
60
  const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
58
61
  const handlePlaying = useCallback(() => {
59
- if (!videoRef)
62
+ if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
60
63
  return;
61
64
  setWaiting(false);
62
65
  setIsLoadFinish(true);
63
66
  }, []);
64
67
  const handleStartPlay = useCallback(() => {
65
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
66
- if (!videoRef)
68
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
69
+ if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
67
70
  return;
68
71
  setIsPauseVideo(false);
69
72
  const item = data[index];
70
- if (item && (videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration)) {
71
- videoStartTime.current = (videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime) || 0;
72
- const videoDuration = ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration) !== null && _a !== void 0 ? _a : 0).toFixed(2);
73
- const videoCurrentTime = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime) !== null && _b !== void 0 ? _b : 0).toFixed(2);
73
+ if (item && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
74
+ videoStartTime.current = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.currentTime) || 0;
75
+ const videoDuration = ((_d = (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 0).toFixed(2);
76
+ const videoCurrentTime = ((_f = (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime) !== null && _f !== void 0 ? _f : 0).toFixed(2);
74
77
  const playType = isFirstPlay ? '0' : '1';
75
78
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
76
79
  eventInfo: {
77
80
  eventSubject: 'playVideo',
78
81
  eventDescription: 'User played the video',
79
- contentId: (_d = (_c = item === null || item === void 0 ? void 0 : item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
80
- contentName: (_f = (_e = item === null || item === void 0 ? void 0 : item.video) === null || _e === void 0 ? void 0 : _e.title) !== null && _f !== void 0 ? _f : '',
82
+ contentId: (_h = (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
83
+ contentName: (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
81
84
  playType,
82
85
  startTime: videoCurrentTime,
83
86
  videoDuration,
84
- contentTags: JSON.stringify((_h = (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.tags) !== null && _h !== void 0 ? _h : []),
87
+ contentTags: JSON.stringify((_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
85
88
  position: index + '',
86
89
  contentFormat: 'video',
87
- traceInfo: (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.traceInfo
90
+ traceInfo: (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
88
91
  }
89
92
  });
90
93
  setIsFirstPlay(false);
91
94
  }
92
- }, [bffEventReport, data, index, isFirstPlay, videoRef]);
95
+ }, [bffEventReport, data, index, isFirstPlay, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
93
96
  const handLoadeddata = useCallback(() => {
94
97
  var _a;
95
- if (!videoRef || firstFrameSrc || !blur)
98
+ if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || firstFrameSrc || !blur)
96
99
  return;
97
- videoRef.style.objectFit = 'contain';
100
+ videoRef.current.style.objectFit = 'contain';
98
101
  if (((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || !canvasRef || !canvasRef.current || isBgColor)
99
102
  return;
100
103
  const setFrameImg = () => {
@@ -104,155 +107,160 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
104
107
  const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
105
108
  canvas.height = targetHeight;
106
109
  canvas.width = targetWidth;
107
- ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(videoRef, 0, 0, canvas.width, canvas.height);
110
+ ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(videoRef.current, 0, 0, canvas.width, canvas.height);
108
111
  setFirstFrameSrc(canvas.toDataURL());
109
112
  };
110
113
  setFrameImg();
111
114
  setTimeout(() => {
112
115
  setFrameImg();
113
116
  }, 500);
114
- }, [videoRef, isBgColor, rec, firstFrameSrc, blur]);
117
+ }, [videoRef.current, isBgColor, rec, firstFrameSrc, blur]);
115
118
  const handleLoadedmetadata = useCallback(() => {
116
- if (!videoRef)
119
+ if (!videoRef.current)
117
120
  return;
118
121
  handleStartPlay();
119
122
  handLoadeddata();
120
- }, [videoRef, handLoadeddata, handleStartPlay]);
123
+ }, [videoRef.current, handLoadeddata, handleStartPlay]);
121
124
  const handleClickVideo = useCallback((type) => () => {
122
- if (!videoRef)
125
+ var _a, _b, _c, _d, _e;
126
+ if (!videoRef.current)
123
127
  return;
124
128
  if (!isLoadFinish)
125
129
  return;
126
- const isPause = videoRef === null || videoRef === void 0 ? void 0 : videoRef.paused;
130
+ const isPause = (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
127
131
  switch (type) {
128
132
  case 'start':
129
133
  if (!isPause)
130
134
  return;
131
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
135
+ (_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.play();
132
136
  setIsPauseVideo(false);
133
137
  break;
134
138
  case 'pause':
135
139
  if (isPause)
136
140
  return;
137
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.pause();
141
+ (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
138
142
  setIsPauseVideo(true);
139
143
  break;
140
144
  default:
141
145
  if (isPause) {
142
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
146
+ (_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
143
147
  }
144
148
  else {
145
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.pause();
149
+ (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
146
150
  }
147
151
  setIsPauseVideo(!isPause);
148
152
  break;
149
153
  }
150
- }, [isLoadFinish, videoRef]);
154
+ }, [isLoadFinish, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
151
155
  const handlePause = useCallback(() => {
152
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
153
- if (!videoRef)
156
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
157
+ if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
154
158
  return;
155
159
  if (activeIndex !== index)
156
160
  return;
157
161
  const item = data[index];
158
- const videoDuration = ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration) !== null && _a !== void 0 ? _a : 0).toFixed(2);
159
- const videoCurrentTime = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime) !== null && _b !== void 0 ? _b : 0).toFixed(2);
160
- if (videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration) {
161
- const playDuration = ((videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime) - videoStartTime.current).toFixed(2);
162
+ const videoDuration = ((_b = (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
163
+ const videoCurrentTime = ((_d = (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
164
+ if ((_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.duration) {
165
+ const playDuration = (((_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.currentTime) - videoStartTime.current).toFixed(2);
162
166
  bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
163
167
  eventInfo: {
164
168
  eventSubject: 'playOverVideo',
165
169
  eventDescription: 'User finished playing the video',
166
- contentId: (_d = (_c = item === null || item === void 0 ? void 0 : item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
167
- contentName: (_f = (_e = item === null || item === void 0 ? void 0 : item.video) === null || _e === void 0 ? void 0 : _e.title) !== null && _f !== void 0 ? _f : '',
170
+ contentId: (_h = (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
171
+ contentName: (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
168
172
  endTime: videoCurrentTime,
169
173
  videoDuration,
170
174
  playDuration,
171
- contentTags: JSON.stringify((_h = (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.tags) !== null && _h !== void 0 ? _h : []),
175
+ contentTags: JSON.stringify((_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
172
176
  position: index + '',
173
177
  contentFormat: 'video',
174
- traceInfo: (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.traceInfo
178
+ traceInfo: (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
175
179
  }
176
180
  });
177
181
  }
178
- }, [data, index, bffEventReport, videoRef, activeIndex]);
182
+ }, [data, index, bffEventReport, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current, activeIndex]);
179
183
  const handleWaiting = useCallback(() => {
180
184
  setWaiting(true);
181
185
  }, []);
182
186
  useEffect(() => {
183
- if (!isActive || !videoRef)
187
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
188
+ if (!isActive)
184
189
  return;
185
190
  const videoSrc = rec === null || rec === void 0 ? void 0 : rec.video.url;
186
191
  if (!videoSrc)
187
192
  return;
193
+ const videoPlayerWrapperNode = document.querySelector(`#${videoId}`);
194
+ if (!videoPlayerWrapperNode)
195
+ return;
196
+ videoRef.current = mountVideoPlayerAtNode === null || mountVideoPlayerAtNode === void 0 ? void 0 : mountVideoPlayerAtNode(videoPlayerWrapperNode);
197
+ if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
198
+ return;
188
199
  const Hls = window === null || window === void 0 ? void 0 : window.Hls;
189
200
  let hls = null;
190
201
  if (videoSrc.includes('.m3u8') && Hls && Hls.isSupported()) {
191
202
  hls = new Hls();
192
203
  hls.loadSource(videoSrc);
193
- hls.attachMedia(videoRef);
204
+ hls.attachMedia(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current);
194
205
  hls.on(Hls.Events.MANIFEST_PARSED, function () {
195
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
206
+ var _a;
207
+ (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
196
208
  });
197
209
  }
198
210
  else {
199
- videoRef.src = videoSrc;
211
+ videoRef.current.src = videoSrc;
200
212
  }
201
- const videoPlayerWrapperNode = document.querySelector(`#${videoId}`);
202
- const dom = document.querySelector('#player-container-id');
203
- const dom2 = document.querySelector('#player-container-id-copy');
204
- if (!dom && !dom2)
205
- return;
206
- videoPlayerWrapperNode === null || videoPlayerWrapperNode === void 0 ? void 0 : videoPlayerWrapperNode.appendChild(dom || dom2);
207
- videoRef.setAttribute('x5-playsinline', 'true');
208
- videoRef.setAttribute('webkit-playsinline', 'true');
209
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('loadedmetadata', handleLoadedmetadata);
210
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('loadeddata', handLoadeddata);
211
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('play', handleStartPlay);
212
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('playing', handlePlaying);
213
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('pause', handlePause);
214
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('ended', handlePlay);
215
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('canplay', handlePlay);
216
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('waiting', handleWaiting);
213
+ (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.setAttribute('x5-playsinline', 'true');
214
+ (_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.setAttribute('webkit-playsinline', 'true');
215
+ (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener('loadedmetadata', handleLoadedmetadata);
216
+ (_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.addEventListener('loadeddata', handLoadeddata);
217
+ (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.addEventListener('play', handleStartPlay);
218
+ (_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.addEventListener('playing', handlePlaying);
219
+ (_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.addEventListener('pause', handlePause);
220
+ (_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.addEventListener('ended', handlePlay);
221
+ (_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.addEventListener('canplay', handlePlay);
222
+ (_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.addEventListener('waiting', handleWaiting);
217
223
  return () => {
224
+ var _a, _b, _c, _d, _e, _f, _g, _h;
218
225
  if (hls)
219
226
  hls === null || hls === void 0 ? void 0 : hls.destroy();
220
227
  setIsLoadFinish(false);
221
- dom2 === null || dom2 === void 0 ? void 0 : dom2.appendChild(dom);
222
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('loadedmetadata', handleLoadedmetadata);
223
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('loadeddata', handLoadeddata);
224
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('play', handleStartPlay);
225
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('playing', handlePlaying);
226
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('pause', handlePause);
227
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('ended', handlePlay);
228
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('canplay', handlePlay);
229
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('waiting', handleWaiting);
228
+ (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('loadedmetadata', handleLoadedmetadata);
229
+ (_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('loadeddata', handLoadeddata);
230
+ (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('play', handleStartPlay);
231
+ (_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('playing', handlePlaying);
232
+ (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.removeEventListener('pause', handlePause);
233
+ (_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.removeEventListener('ended', handlePlay);
234
+ (_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.removeEventListener('canplay', handlePlay);
235
+ (_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('waiting', handleWaiting);
230
236
  };
231
- }, [isActive, videoId, rec, videoRef]);
237
+ }, [isActive, videoId, rec]);
232
238
  useEffect(() => {
233
- if (!videoRef || !isLoadFinish)
239
+ var _a, _b;
240
+ if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
234
241
  return;
235
242
  if (isActive) {
236
243
  bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
237
244
  eventName: 'ViewContent'
238
245
  });
239
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
246
+ (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
240
247
  }
241
248
  else {
242
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.pause();
249
+ (_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.pause();
243
250
  }
244
- }, [isActive, isLoadFinish, videoRef]);
251
+ }, [isActive, isLoadFinish, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
245
252
  useEffect(() => {
246
- if (!isActive || !videoRef)
253
+ var _a, _b, _c;
254
+ if (!isActive || !(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
247
255
  return;
248
- const isPause = videoRef === null || videoRef === void 0 ? void 0 : videoRef.paused;
256
+ const isPause = (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
249
257
  if (!isPause && openHashtag) {
250
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.pause();
258
+ (_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.pause();
251
259
  }
252
260
  else if (!openHashtag) {
253
- videoRef === null || videoRef === void 0 ? void 0 : videoRef.play();
261
+ (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.play();
254
262
  }
255
- }, [openHashtag, isActive, videoRef]);
263
+ }, [openHashtag, isActive, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
256
264
  useEffect(() => {
257
265
  if (!isActive)
258
266
  return;
@@ -299,11 +307,11 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
299
307
  }, src: loading_gif, alt: 'placeholder image' }));
300
308
  }, [waiting, isLoadFinish]);
301
309
  useEffect(() => {
302
- if (!videoRef)
310
+ if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
303
311
  return;
304
312
  const handleBeforeUnload = () => {
305
313
  var _a;
306
- if (activeIndex === index && ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) && videoRef && !isPauseVideo) {
314
+ if (activeIndex === index && ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) && (videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) && !isPauseVideo) {
307
315
  handleClickVideo('pause')();
308
316
  }
309
317
  };
@@ -311,7 +319,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
311
319
  return () => {
312
320
  window.removeEventListener('beforeunload', handleBeforeUnload);
313
321
  };
314
- }, [activeIndex, index, rec, videoRef, handleClickVideo, isPauseVideo]);
322
+ }, [activeIndex, index, rec, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current, handleClickVideo, isPauseVideo]);
315
323
  if (!(rec === null || rec === void 0 ? void 0 : rec.video)) {
316
324
  return null;
317
325
  }
package/es/core/components/SxpPageRender/index.js CHANGED
@@ -26,14 +26,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
26
26
  const { schema } = useEditor();
27
27
  const [activeIndex, setActiveIndex] = useState(0);
28
28
  const viewImageStartTime = useRef(0);
29
- const [isInit, setIsInit] = useState(false);
30
29
  const [isMuted, setIsMuted] = useState(true);
31
30
  const viewTime = useRef();
32
31
  const [isLoadMore, setIsLoadMore] = useState(false);
33
32
  const [isShowMore, setIsShowMore] = useState(false);
34
33
  const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink, isShowConsent, selectTag } = useSxpDataSource();
35
34
  const { backMainFeed } = useEventReport();
36
- const videoRef = useRef();
37
35
  const { productView } = useEventReport();
38
36
  const isShowFingerTip = useMemo(() => {
39
37
  return data.length > 0 && !loading && getFeUserId();
@@ -61,16 +59,6 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
61
59
  });
62
60
  }
63
61
  }, [data.length, bffFbReport, h5EnterLink]);
64
- const firstRef = useRef();
65
- useEffect(() => {
66
- var _a, _b, _c, _d;
67
- if (!firstRef.current && (videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) && (data === null || data === void 0 ? void 0 : data.length) > 0) {
68
- firstRef.current = true;
69
- if ((_b = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.video) === null || _b === void 0 ? void 0 : _b.url) {
70
- videoRef.current.src = (_d = (_c = data === null || data === void 0 ? void 0 : data[0]) === null || _c === void 0 ? void 0 : _c.video) === null || _d === void 0 ? void 0 : _d.url;
71
- }
72
- }
73
- }, [videoRef, data]);
74
62
  useEffect(() => {
75
63
  var _a;
76
64
  const index = (data === null || data === void 0 ? void 0 : data.findIndex((item) => {
@@ -188,7 +176,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
188
176
  const renderContent = useCallback((rec, index) => {
189
177
  var _a, _b, _c, _d;
190
178
  if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) {
191
- return (React.createElement(VideoWidget, { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoRef: videoRef.current, videoPlayIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon }));
179
+ return (React.createElement(VideoWidget, { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoPlayIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon }));
192
180
  }
193
181
  if ((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
194
182
  return (React.createElement(PictureGroup, { key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, imgUrls: rec === null || rec === void 0 ? void 0 : rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onReportViewImageEnd: handleReportViewImageEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
@@ -214,8 +202,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
214
202
  viewTime,
215
203
  tipText,
216
204
  resolver,
217
- schema,
218
- videoRef.current
205
+ schema
219
206
  ]);
220
207
  const onExpandableChange = useCallback((v) => {
221
208
  setIsShowMore(v);
@@ -443,15 +430,6 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
443
430
  [(_f = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _f !== void 0 ? _f : 'bottom']: (_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _g !== void 0 ? _g : 23
444
431
  }, defaultValue: isMuted, 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, onChange: setIsMuted }),
445
432
  renderView),
446
- React.createElement(WaterFall, Object.assign({}, (_k = (_j = (_h = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.item) === null || _k === void 0 ? void 0 : _k.props)),
447
- React.createElement("div", { style: { position: 'absolute', zIndex: -100 } },
448
- React.createElement("video", { ref: videoRef, id: 'player-container-id', playsInline: true, crossOrigin: 'anonymous', preload: 'auto', controls: false, muted: true, style: {
449
- backgroundColor: 'transparent',
450
- width: '100%',
451
- height: '100%',
452
- objectFit: 'cover',
453
- pointerEvents: 'none'
454
- } }),
455
- React.createElement("div", { id: 'player-container-id-copy' }))));
433
+ React.createElement(WaterFall, Object.assign({}, (_k = (_j = (_h = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.hashTag) === null || _h === void 0 ? void 0 : _h[0]) === null || _j === void 0 ? void 0 : _j.item) === null || _k === void 0 ? void 0 : _k.props))));
456
434
  };
457
435
  export default SxpPageRender;
package/es/materials/sxp/popup/AppointForm/settingRender.js CHANGED
@@ -18,12 +18,12 @@ export default [
18
18
  child: [
19
19
  {
20
20
  type: 'Select',
21
- name: ['testStyle', 'fontFamily-cn'],
21
+ name: ['textStyle', 'fontFamily-cn'],
22
22
  bottomText: '中文字体'
23
23
  },
24
24
  {
25
25
  type: 'Select',
26
- name: ['testStyle', 'fontFamily-en'],
26
+ name: ['textStyle', 'fontFamily-en'],
27
27
  bottomText: '英文/其他字体'
28
28
  }
29
29
  ]
package/es/materials/sxp/popup/Prompt/index.d.ts CHANGED
@@ -10,6 +10,7 @@ export interface IPromptProps {
10
10
  onClose?: () => void;
11
11
  onClick?: () => void;
12
12
  submitButtonStyle?: CSSProperties;
13
+ contentStyle?: CSSProperties;
13
14
  }
14
15
  declare const _default: React.NamedExoticComponent<IPromptProps>;
15
16
  export default _default;
package/es/materials/sxp/popup/Prompt/index.js CHANGED
@@ -8,7 +8,7 @@ import { useSxpDataSource } from '../../../../core/hooks';
8
8
  import { useEventReport } from '../../../../core/hooks/useEventReport';
9
9
  import { setFontForText } from '../../../../core/utils/tool';
10
10
  const Prompt = (_a) => {
11
- var { content, btnText, style, icon, isPopup, isExternalLink, onClose, onClick, submitButtonStyle } = _a, props = __rest(_a, ["content", "btnText", "style", "icon", "isPopup", "isExternalLink", "onClose", "onClick", "submitButtonStyle"]);
11
+ var { content, btnText, style, icon, isPopup, isExternalLink, onClose, onClick, submitButtonStyle, contentStyle } = _a, props = __rest(_a, ["content", "btnText", "style", "icon", "isPopup", "isExternalLink", "onClose", "onClick", "submitButtonStyle", "contentStyle"]);
12
12
  const { popupDetailData } = useSxpDataSource();
13
13
  const { jumpToWeb } = useEventReport();
14
14
  const iconSrc = typeof icon === 'string' ? icon : getMediaValueByMode(icon);
@@ -29,7 +29,9 @@ const Prompt = (_a) => {
29
29
  return (React.createElement("div", Object.assign({ className: `pb-prompt ${css(Object.assign({}, style))}` }, props),
30
30
  React.createElement("div", { className: 'pb-prompt-icon' },
31
31
  React.createElement("img", { width: '100%', src: iconSrc !== null && iconSrc !== void 0 ? iconSrc : success, alt: 'success image' })),
32
- React.createElement("div", { className: 'pb-prompt-content' }, content),
32
+ React.createElement("div", { className: 'pb-prompt-content', style: contentStyle, dangerouslySetInnerHTML: {
33
+ __html: setFontForText(content, contentStyle)
34
+ } }),
33
35
  React.createElement("button", { "aria-label": btnText, className: 'pb-prompt-btn', style: submitButtonStyle, onClick: handleOk, dangerouslySetInnerHTML: {
34
36
  __html: setFontForText(btnText, submitButtonStyle)
35
37
  } })));
package/es/materials/sxp/popup/Prompt/settingRender.d.ts CHANGED
@@ -6,12 +6,14 @@ declare const _default: {
6
6
  name: string[];
7
7
  mediaType: string;
8
8
  child?: undefined;
9
+ initialValue?: undefined;
9
10
  } | {
10
11
  type: string;
11
12
  label: string;
12
13
  name: string[];
13
14
  mediaType?: undefined;
14
15
  child?: undefined;
16
+ initialValue?: undefined;
15
17
  } | {
16
18
  type: string;
17
19
  label: string;
@@ -22,6 +24,7 @@ declare const _default: {
22
24
  }[];
23
25
  name?: undefined;
24
26
  mediaType?: undefined;
27
+ initialValue?: undefined;
25
28
  } | {
26
29
  type: string;
27
30
  label: string;
@@ -38,12 +41,21 @@ declare const _default: {
38
41
  })[];
39
42
  name?: undefined;
40
43
  mediaType?: undefined;
44
+ initialValue?: undefined;
41
45
  } | {
42
46
  type: string;
43
47
  name: string[];
44
48
  label?: undefined;
45
49
  mediaType?: undefined;
46
50
  child?: undefined;
51
+ initialValue?: undefined;
52
+ } | {
53
+ label: string;
54
+ type: string;
55
+ name: string[];
56
+ initialValue: string;
57
+ mediaType?: undefined;
58
+ child?: undefined;
47
59
  })[];
48
60
  }[];
49
61
  export default _default;
package/es/materials/sxp/popup/Prompt/settingRender.js CHANGED
@@ -14,9 +14,37 @@ export default [
14
14
  name: ['props', 'content']
15
15
  },
16
16
  {
17
- type: 'Text',
18
- label: '按钮文案',
19
- name: ['props', 'btnText']
17
+ type: 'Group',
18
+ label: '内容字体',
19
+ child: [
20
+ {
21
+ type: 'Select',
22
+ name: ['props', 'contentStyle', 'fontFamily-cn'],
23
+ bottomText: '中文字体'
24
+ },
25
+ {
26
+ type: 'Select',
27
+ name: ['props', 'contentStyle', 'fontFamily-en'],
28
+ bottomText: '英文/其他字体'
29
+ }
30
+ ]
31
+ },
32
+ {
33
+ type: 'Group',
34
+ label: '',
35
+ child: [
36
+ {
37
+ type: 'Color',
38
+ name: ['props', 'contentStyle', 'color'],
39
+ initialValue: '#000'
40
+ },
41
+ {
42
+ type: 'Number',
43
+ name: ['props', 'contentStyle', 'fontSize'],
44
+ addonAfter: 'px',
45
+ initialValue: 14
46
+ }
47
+ ]
20
48
  },
21
49
  {
22
50
  type: 'Group',
@@ -62,7 +90,8 @@ export default [
62
90
  {
63
91
  label: '提交按钮颜色',
64
92
  type: 'Color',
65
- name: ['props', 'submitButtonStyle', 'backgroundColor']
93
+ name: ['props', 'submitButtonStyle', 'backgroundColor'],
94
+ initialValue: '#000'
66
95
  }
67
96
  ]
68
97
  }