pb-sxp-ui 1.15.13-alpha.3 → 1.15.13-alpha.5

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.
@@ -11,7 +11,15 @@ interface IVideoWidgetProps {
11
11
  activeIndex?: number;
12
12
  videoPostConfig?: postConfigType;
13
13
  swiperRef?: any;
14
- loopPlay?: boolean;
14
+ videoPlayIcon?: string;
15
+ handleUpdateTimeline?: (index: number, v: number) => void;
16
+ loopPlay: any;
15
17
  }
16
- declare const _default: React.NamedExoticComponent<IVideoWidgetProps>;
18
+ export interface IVideoWidgetRef {
19
+ play: () => void;
20
+ pause: () => void;
21
+ setLoopPlay: (v: boolean) => void;
22
+ isPlaying: () => boolean;
23
+ }
24
+ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<IVideoWidgetProps & React.RefAttributes<IVideoWidgetRef>>>;
17
25
  export default _default;
@@ -1,9 +1,10 @@
1
- import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
1
+ import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
2
2
  import { useSwiperSlide } from 'swiper/react';
3
3
  import { useIconLink } from '../SxpPageRender/useIconLink';
4
4
  import { mountVideoPlayerAtNode } from '../SxpPageRender/VideoWidget/VideoPlayer';
5
+ import FormatImage from '../SxpPageRender/FormatImage';
5
6
  import { useSxpDataSource } from '../../../core/hooks';
6
- const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, width, swiperRef, loopPlay }) => {
7
+ const VideoWidget = forwardRef(({ rec, index, height, data, muted, activeIndex, videoPostConfig, width, swiperRef, videoPlayIcon, handleUpdateTimeline, loopPlay }, ref) => {
7
8
  const { isActive } = useSwiperSlide();
8
9
  const [isPauseVideo, setIsPauseVideo] = useState(false);
9
10
  const videoRef = useRef(null);
@@ -15,6 +16,38 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
15
16
  const [firstFrameSrc, setFirstFrameSrc] = useState('');
16
17
  const videoId = `pb-cache-video-${index}`;
17
18
  const hlsRef = useRef(null);
19
+ const loopPlayRef = useRef(loopPlay);
20
+ useEffect(() => {
21
+ loopPlayRef.current = loopPlay;
22
+ }, [loopPlay]);
23
+ useImperativeHandle(ref, () => {
24
+ return {
25
+ play() {
26
+ var _a;
27
+ if (!videoRef.current)
28
+ return;
29
+ handleTimeUpload();
30
+ (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
31
+ setIsPauseVideo(false);
32
+ },
33
+ pause() {
34
+ var _a;
35
+ if (!videoRef.current)
36
+ return;
37
+ (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
38
+ setIsPauseVideo(true);
39
+ },
40
+ setLoopPlay(v) {
41
+ if (!videoRef.current)
42
+ return;
43
+ loopPlayRef.current = v;
44
+ },
45
+ isPlaying() {
46
+ var _a;
47
+ return !((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused);
48
+ }
49
+ };
50
+ });
18
51
  useEffect(() => {
19
52
  if (!videoRef.current)
20
53
  return;
@@ -44,8 +77,8 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
44
77
  setIsLoadFinish(true);
45
78
  }, []);
46
79
  const handleClickVideo = useCallback((type) => () => {
47
- var _a, _b, _c, _d, _e;
48
- if (!isLoadFinish)
80
+ var _a, _b, _c, _d, _e, _f;
81
+ if (!isActive || !(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
49
82
  return;
50
83
  const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
51
84
  switch (type) {
@@ -63,10 +96,13 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
63
96
  break;
64
97
  default:
65
98
  if (isPause) {
66
- (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
99
+ if (((_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.currentTime) >= (rec === null || rec === void 0 ? void 0 : rec.endTime)) {
100
+ videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
101
+ }
102
+ (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
67
103
  }
68
104
  else {
69
- (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
105
+ (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.pause();
70
106
  }
71
107
  setIsPauseVideo(!isPause);
72
108
  break;
@@ -104,27 +140,34 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
104
140
  setFirstFrameSrc(canvas.toDataURL());
105
141
  }, []);
106
142
  const handleTimeUpload = useCallback(() => {
107
- var _a, _b, _c;
143
+ var _a;
108
144
  if (!videoRef.current)
109
145
  return;
110
- if (((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) >= ((_b = rec === null || rec === void 0 ? void 0 : rec.endTime) !== null && _b !== void 0 ? _b : 0)) {
111
- (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
112
- }
146
+ const localTime = ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) - (rec === null || rec === void 0 ? void 0 : rec.startTime);
147
+ handleUpdateTimeline === null || handleUpdateTimeline === void 0 ? void 0 : handleUpdateTimeline(index, localTime);
148
+ setTimeout(() => {
149
+ var _a, _b;
150
+ if (((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) >= ((_b = rec === null || rec === void 0 ? void 0 : rec.endTime) !== null && _b !== void 0 ? _b : 0)) {
151
+ slideSwiper();
152
+ }
153
+ });
113
154
  }, []);
114
- const handlePause = () => {
115
- var _a, _b, _c, _d, _e, _f;
116
- if (!videoRef.current || !isActive)
117
- return;
118
- if (!loopPlay)
155
+ const slideSwiper = () => {
156
+ var _a, _b, _c, _d, _e, _f, _g;
157
+ (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
158
+ if (!loopPlayRef.current)
119
159
  return;
120
160
  if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
121
- (_b = (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.slideTo(0);
161
+ (_c = (_b = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _b === void 0 ? void 0 : _b.swiper) === null || _c === void 0 ? void 0 : _c.slideTo(0);
122
162
  }
123
163
  else {
124
- const i = (_d = (_c = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _c === void 0 ? void 0 : _c.swiper) === null || _d === void 0 ? void 0 : _d.activeIndex;
125
- (_f = (_e = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _e === void 0 ? void 0 : _e.swiper) === null || _f === void 0 ? void 0 : _f.slideTo(i + 1);
164
+ const i = (_e = (_d = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _d === void 0 ? void 0 : _d.swiper) === null || _e === void 0 ? void 0 : _e.activeIndex;
165
+ (_g = (_f = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _f === void 0 ? void 0 : _f.swiper) === null || _g === void 0 ? void 0 : _g.slideTo(i + 1);
126
166
  }
127
167
  };
168
+ const handlePause = () => {
169
+ setIsPauseVideo(true);
170
+ };
128
171
  useEffect(() => {
129
172
  var _a, _b, _c;
130
173
  if (!isActive)
@@ -166,7 +209,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
166
209
  (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('pause', handlePause);
167
210
  (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('timeupdate', handleTimeUpload);
168
211
  };
169
- }, [handleLoadedMetadata, handlePlaying, rec, handLoadeddata, isActive, loopPlay]);
212
+ }, [isActive]);
170
213
  const renderPoster = useMemo(() => {
171
214
  if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
172
215
  return null;
@@ -188,9 +231,10 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
188
231
  position: 'relative',
189
232
  width: '100%',
190
233
  height,
191
- overflow: 'hidden',
192
- pointerEvents: 'none'
193
- } },
194
- React.createElement("div", { className: 'n-full-screen', id: videoId, style: { width: '100%', height: '100%' } })));
195
- };
234
+ overflow: 'hidden'
235
+ }, onClick: handleClickVideo() },
236
+ React.createElement("div", { className: 'n-full-screen', id: videoId, style: { width: '100%', height: '100%' } }),
237
+ renderPoster,
238
+ isPauseVideo && React.createElement(FormatImage, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })));
239
+ });
196
240
  export default memo(VideoWidget);
@@ -15,6 +15,7 @@ export interface IScene {
15
15
  startTime: number;
16
16
  traceInfo: string;
17
17
  bindProducts?: any[];
18
+ title?: string;
18
19
  }
19
20
  export type ScenesType = IScene[];
20
21
  export type DiyStoryPreviewType = ISxpPageRenderProps & {
@@ -24,6 +25,24 @@ export type DiyStoryPreviewType = ISxpPageRenderProps & {
24
25
  onActiveChange?: (v: number) => void;
25
26
  loopPlay?: boolean;
26
27
  pointerEvents?: any;
28
+ onUpdateTimeLine: (index: number, curTime: number) => void;
29
+ disabledListener?: boolean;
27
30
  };
28
- declare const _default: React.NamedExoticComponent<DiyStoryPreviewType>;
31
+ export interface IDiyStoryPreviewRef {
32
+ play: () => void;
33
+ pause: () => void;
34
+ slideTo: (n: number) => void;
35
+ isPlaying: () => boolean;
36
+ setLoopPlay: (v: boolean) => void;
37
+ }
38
+ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<ISxpPageRenderProps & {
39
+ appDomain?: string | undefined;
40
+ scenes?: ScenesType | undefined;
41
+ activeIndex?: number | undefined;
42
+ onActiveChange?: ((v: number) => void) | undefined;
43
+ loopPlay?: boolean | undefined;
44
+ pointerEvents?: any;
45
+ onUpdateTimeLine: (index: number, curTime: number) => void;
46
+ disabledListener?: boolean | undefined;
47
+ } & React.RefAttributes<IDiyStoryPreviewRef>>>;
29
48
  export default _default;
@@ -1,6 +1,6 @@
1
- import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
1
+ import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
2
2
  import { Swiper, SwiperSlide } from 'swiper/react';
3
- import { cloneDeep } from 'lodash';
3
+ import { cloneDeep, debounce } from 'lodash';
4
4
  import RenderCard from '../SxpPageRender/RenderCard';
5
5
  import ExpandableText from '../SxpPageRender/ExpandableText';
6
6
  import LikeButton from '../SxpPageRender/LikeButton';
@@ -194,9 +194,10 @@ Object.values(_materials_).forEach((v) => {
194
194
  });
195
195
  const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
196
196
  const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
197
- const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [], scenes, onActiveChange, activeIndex, loopPlay = false, pointerEvents = 'none' }) => {
198
- const [loopPlaySwiper, setLooPlaySwiper] = useState(loopPlay);
197
+ const DiyStoryPreview = forwardRef(({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [], scenes, onActiveChange, activeIndex, loopPlay = false, pointerEvents = 'none', onUpdateTimeLine, disabledListener }, ref) => {
198
+ const videoWidgetRef = useRef(null);
199
199
  const swiperRef = useRef(null);
200
+ const [curIndex, setCurIndex] = useState(0);
200
201
  const height = useMemo(() => {
201
202
  let minusHeight = 0;
202
203
  if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
@@ -207,6 +208,32 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
207
208
  }
208
209
  return containerHeight - minusHeight;
209
210
  }, [globalConfig, containerHeight, tagList]);
211
+ useImperativeHandle(ref, () => {
212
+ return {
213
+ play() {
214
+ var _a;
215
+ (_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.play();
216
+ },
217
+ pause() {
218
+ var _a;
219
+ (_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.pause();
220
+ },
221
+ slideTo(n) {
222
+ var _a, _b;
223
+ if (!(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current))
224
+ return;
225
+ (_b = (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.slideTo(n);
226
+ },
227
+ isPlaying() {
228
+ var _a, _b;
229
+ return (_b = (_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.isPlaying()) !== null && _b !== void 0 ? _b : false;
230
+ },
231
+ setLoopPlay(v) {
232
+ var _a;
233
+ (_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(v);
234
+ }
235
+ };
236
+ });
210
237
  const isVideoUrl = (url) => {
211
238
  if (url && url !== '' && typeof url === 'string') {
212
239
  const imageExtensions = ['.mp4', '.m3u8'];
@@ -220,10 +247,10 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
220
247
  const renderContent = (rec, index) => {
221
248
  const isVideo = isVideoUrl(rec === null || rec === void 0 ? void 0 : rec.mediaUrl);
222
249
  if (isVideo) {
223
- return (React.createElement(VideoWidget, { rec: rec, index: index, muted: true, width: containerWidth, data: scenes !== null && scenes !== void 0 ? scenes : [], height: containerHeight, activeIndex: index, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, swiperRef: swiperRef, loopPlay: loopPlaySwiper }));
250
+ return (React.createElement(VideoWidget, Object.assign({ key: index }, (curIndex === index && { ref: videoWidgetRef }), { rec: rec, index: index, muted: true, width: containerWidth, data: scenes !== null && scenes !== void 0 ? scenes : [], height: containerHeight, activeIndex: index, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoPlayIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon, swiperRef: swiperRef, loopPlay: loopPlay, handleUpdateTimeline: onUpdateTimeLine })));
224
251
  }
225
252
  else {
226
- return (React.createElement(PictureGroup, { key: rec.itemId, imgUrls: [rec === null || rec === void 0 ? void 0 : rec.mediaUrl], width: containerWidth, height: containerHeight, rec: rec, index: index, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost, data: scenes !== null && scenes !== void 0 ? scenes : [], swiperRef: swiperRef, loopPlay: loopPlaySwiper }));
253
+ return (React.createElement(PictureGroup, { key: rec.itemId, imgUrls: [rec === null || rec === void 0 ? void 0 : rec.mediaUrl], width: containerWidth, height: containerHeight, rec: rec, index: index, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost, data: scenes !== null && scenes !== void 0 ? scenes : [], swiperRef: swiperRef }));
227
254
  }
228
255
  };
229
256
  const renderLogo = useMemo(() => {
@@ -233,14 +260,6 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
233
260
  }
234
261
  return null;
235
262
  }, [globalConfig]);
236
- const CTA = (rec, index) => {
237
- if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA)) {
238
- console.log(globalConfig, rec, '111');
239
- return (React.createElement("div", { className: 'clc-sxp-bottom-card' },
240
- React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER })));
241
- }
242
- return null;
243
- };
244
263
  const renderBottom = (rec, index) => {
245
264
  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
246
265
  if (rec === null || rec === void 0 ? void 0 : rec.video) {
@@ -342,6 +361,7 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
342
361
  var _a, _b, _c, _d;
343
362
  const rec = cloneDeep(recData);
344
363
  rec.video.bindProducts = item === null || item === void 0 ? void 0 : item.bindProducts;
364
+ rec.video.title = (item === null || item === void 0 ? void 0 : item.title) || '';
345
365
  return (React.createElement("div", { style: { position: 'relative' } },
346
366
  React.createElement(SwiperSlide, { key: index, virtualIndex: index, style: { overflow: 'hidden', position: 'relative' } },
347
367
  renderBottom(rec, index),
@@ -362,23 +382,34 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
362
382
  return;
363
383
  (_b = (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.slideTo(activeIndex);
364
384
  }, [activeIndex]);
385
+ const handleSessionExpire = useCallback(debounce(() => {
386
+ var _a;
387
+ (_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
388
+ }, 1000), []);
365
389
  useEffect(() => {
366
- var _a, _b;
367
- if (!(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current))
390
+ if (disabledListener)
368
391
  return;
369
- (_b = (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.slideTo(0);
370
- }, [loopPlay]);
392
+ const events = ['touchstart', 'touchcancel'];
393
+ events.forEach((event) => {
394
+ window.addEventListener(event, handleSessionExpire);
395
+ });
396
+ return () => {
397
+ events.forEach((event) => {
398
+ window.removeEventListener(event, handleSessionExpire);
399
+ });
400
+ };
401
+ }, [handleSessionExpire, disabledListener]);
371
402
  return (React.createElement("div", { id: 'sxp-render', style: { height: containerHeight, position: 'relative', pointerEvents } },
372
403
  React.createElement(Swiper, { ref: swiperRef, allowTouchMove: pointerEvents !== 'none', onSlideChange: () => {
373
- setLooPlaySwiper(false);
374
404
  swiperRef.current.swiper.allowTouchMove = false;
375
405
  setTimeout(() => {
376
406
  swiperRef.current.swiper.allowTouchMove = true;
377
407
  }, 500);
378
408
  }, onActiveIndexChange: (swiper) => {
409
+ setCurIndex(swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex);
379
410
  onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(swiper.activeIndex);
380
411
  }, direction: 'vertical', style: { overflow: 'hidden', height: containerHeight }, height: containerHeight }, scenes === null || scenes === void 0 ? void 0 : scenes.map((rec, index) => {
381
412
  return renderView(rec, index);
382
413
  }))));
383
- };
414
+ });
384
415
  export default memo(DiyStoryPreview);
@@ -9,19 +9,19 @@ Object.values(_materials_).forEach((v) => {
9
9
  RESOLVER[v.extend.type] = v;
10
10
  });
11
11
  const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain, enabledMetaConversionApi, dataList, pointerEvents }) => {
12
- var _a, _b, _c, _d, _e, _f;
12
+ var _a, _b, _c, _d, _e, _f, _g, _h;
13
13
  const utmVal = useMemo(() => {
14
14
  var _a;
15
15
  const searchParams = (location === null || location === void 0 ? void 0 : location.search) ? (_a = location === null || location === void 0 ? void 0 : location.search) === null || _a === void 0 ? void 0 : _a.replace('?', '') : '';
16
16
  return searchParams;
17
17
  }, []);
18
- const [_schema, setSchema] = useState(data === null || data === void 0 ? void 0 : data.data);
18
+ const [_schema, setSchema] = useState((_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.data);
19
19
  const [channel, setChannel] = useState();
20
20
  return (React.createElement(EditorCore, { resolver: RESOLVER, enableDataSource: false, schema: _schema, utmVal: channel || utmVal },
21
- 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, enabledMetaConversionApi: enabledMetaConversionApi, utmParameter: data === null || data === void 0 ? void 0 : data.utm_parameter, data: data, dataList: dataList, onUpdateSchema: (d) => setSchema(d), onUpdateChannel: (d) => setChannel(d), render: ({ rtcList, tagList, pageData }) => {
22
- var _a;
21
+ 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: (_c = (_b = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _b === void 0 ? void 0 : _b.personalized_recommend) !== null && _c !== void 0 ? _c : maxSize, defaultSize: (_e = (_d = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _d === void 0 ? void 0 : _d.default_recommend) !== null && _e !== void 0 ? _e : defaultSize, hashTagSize: (_g = (_f = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _f === void 0 ? void 0 : _f.hash_tag_size) !== null && _g !== void 0 ? _g : hashTagSize, loadingImage: loadingImage, appDomain: appDomain, enabledMetaConversionApi: enabledMetaConversionApi, utmParameter: data === null || data === void 0 ? void 0 : data.utm_parameter, data: Object.assign(Object.assign({}, data), { data: (_h = data === null || data === void 0 ? void 0 : data.data) === null || _h === void 0 ? void 0 : _h.data }), dataList: dataList, onUpdateSchema: (d) => setSchema(d), onUpdateChannel: (d) => setChannel(d), render: ({ rtcList, tagList, pageData }) => {
22
+ var _a, _b;
23
23
  return (React.createElement(React.Fragment, null,
24
- React.createElement(DiyStoryPreview, Object.assign({ defaultData: data }, (_a = pageData === null || pageData === void 0 ? void 0 : pageData.data) === null || _a === void 0 ? void 0 : _a.sxpPageConf, { tagList: tagList, scenes: rtcList, resolver: RESOLVER, containerHeight: window === null || window === void 0 ? void 0 : window.innerHeight, pointerEvents: pointerEvents })),
24
+ React.createElement(DiyStoryPreview, Object.assign({ defaultData: Object.assign(Object.assign({}, data), { data: (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.data }) }, (_b = pageData === null || pageData === void 0 ? void 0 : pageData.data) === null || _b === void 0 ? void 0 : _b.sxpPageConf, { tagList: tagList, scenes: rtcList, resolver: RESOLVER, containerHeight: window === null || window === void 0 ? void 0 : window.innerHeight, pointerEvents: pointerEvents, loopPlay: true })),
25
25
  React.createElement(Popup, null)));
26
26
  } })));
27
27
  };
@@ -1,8 +1,8 @@
1
1
  import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState, useMemo } from 'react';
2
2
  import { cloneDeep } from 'lodash';
3
+ import { setSlideSkipState } from '../utils/localStore';
3
4
  import DataSourceProvider from './DataSourceProvider';
4
5
  import { uuid } from '../../core/utils/tool';
5
- import { setSlideSkipState } from '../utils/localStore';
6
6
  const item = {
7
7
  id: uuid(6, 10),
8
8
  item: {
@@ -131,7 +131,7 @@ export interface SxpDataSourceProviderProps {
131
131
  isEditor?: boolean;
132
132
  utmParameter?: PageData['utm_parameter'];
133
133
  channelQueryList?: any[];
134
- data?: PageData;
134
+ data?: any;
135
135
  dataList?: PageData[];
136
136
  onUpdateSchema?: (d: PageData['data']) => void;
137
137
  onUpdateChannel?: (d: string) => void;
@@ -144,16 +144,16 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
144
144
  .catch((err) => Promise.reject(err));
145
145
  }, [bffDataSource]);
146
146
  const getRecommendVideos = useCallback((query) => __awaiter(void 0, void 0, void 0, function* () {
147
- var _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
148
- query = Object.assign({ maxSize: (_f = query === null || query === void 0 ? void 0 : query.maxSize) !== null && _f !== void 0 ? _f : maxSize, defaultSize: (_g = query === null || query === void 0 ? void 0 : query.defaultSize) !== null && _g !== void 0 ? _g : defaultSize, hashTag: query === null || query === void 0 ? void 0 : query.hashTag, traceInfo: query === null || query === void 0 ? void 0 : query.traceInfo, themeTag: query === null || query === void 0 ? void 0 : query.themeTag, pageNum: query === null || query === void 0 ? void 0 : query.pageNum, contentFilter: query === null || query === void 0 ? void 0 : query.contentFilter, productFilter: query === null || query === void 0 ? void 0 : query.productFilter }, (chatlabsId && { chatlabsId }));
147
+ var _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
148
+ query = Object.assign({ maxSize: 50, defaultSize: 50, hashTag: query === null || query === void 0 ? void 0 : query.hashTag, traceInfo: query === null || query === void 0 ? void 0 : query.traceInfo, themeTag: query === null || query === void 0 ? void 0 : query.themeTag, pageNum: query === null || query === void 0 ? void 0 : query.pageNum, contentFilter: query === null || query === void 0 ? void 0 : query.contentFilter, productFilter: query === null || query === void 0 ? void 0 : query.productFilter }, (chatlabsId && { chatlabsId }));
149
149
  if (channel) {
150
150
  query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(channel) });
151
151
  }
152
152
  else if (utmVal) {
153
- const val = (_k = (_j = (_h = splitUrlParams(utmVal)) === null || _h === void 0 ? void 0 : _h.filter((val) => {
153
+ const val = (_h = (_g = (_f = splitUrlParams(utmVal)) === null || _f === void 0 ? void 0 : _f.filter((val) => {
154
154
  const key = val.split('=')[0];
155
155
  return key;
156
- })) === null || _j === void 0 ? void 0 : _j.join('&')) !== null && _k !== void 0 ? _k : '';
156
+ })) === null || _g === void 0 ? void 0 : _g.join('&')) !== null && _h !== void 0 ? _h : '';
157
157
  if (val)
158
158
  query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(val) });
159
159
  }
@@ -167,19 +167,19 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
167
167
  let list = [];
168
168
  let result = null;
169
169
  const recurveRecList = (query) => __awaiter(void 0, void 0, void 0, function* () {
170
- var _v, _w, _x, _y, _z, _0;
170
+ var _t, _u, _v, _w, _x, _y;
171
171
  query.pageNum = pageNum;
172
172
  result = yield (bffFetchAdmin === null || bffFetchAdmin === void 0 ? void 0 : bffFetchAdmin('recommend/direct_page', { method: 'POST', body: query }));
173
173
  if (!(result === null || result === void 0 ? void 0 : result.success)) {
174
174
  return undefined;
175
175
  }
176
176
  setLoading(false);
177
- list = list.concat((_y = (_x = (_w = (_v = result === null || result === void 0 ? void 0 : result.data) === null || _v === void 0 ? void 0 : _v.recList) === null || _w === void 0 ? void 0 : _w.filter) === null || _x === void 0 ? void 0 : _x.call(_w, (item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video))) !== null && _y !== void 0 ? _y : []);
177
+ list = list.concat((_w = (_v = (_u = (_t = result === null || result === void 0 ? void 0 : result.data) === null || _t === void 0 ? void 0 : _t.recList) === null || _u === void 0 ? void 0 : _u.filter) === null || _v === void 0 ? void 0 : _v.call(_u, (item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video))) !== null && _w !== void 0 ? _w : []);
178
178
  if ((rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) === 0) {
179
179
  setRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
180
180
  setCacheRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
181
181
  }
182
- const isNotNullList = (_0 = (_z = result === null || result === void 0 ? void 0 : result.data) === null || _z === void 0 ? void 0 : _z.recList) === null || _0 === void 0 ? void 0 : _0.some((item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video));
182
+ const isNotNullList = (_y = (_x = result === null || result === void 0 ? void 0 : result.data) === null || _x === void 0 ? void 0 : _x.recList) === null || _y === void 0 ? void 0 : _y.some((item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video));
183
183
  if (isNotNullList) {
184
184
  pageNum = pageNum + 1;
185
185
  yield recurveRecList(query);
@@ -187,11 +187,11 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
187
187
  });
188
188
  yield recurveRecList(query);
189
189
  if (!(query === null || query === void 0 ? void 0 : query.hashTag) && result)
190
- setCurReqInfo({ rtc: (_l = result === null || result === void 0 ? void 0 : result.data) === null || _l === void 0 ? void 0 : _l.rtc, requestId: (_m = result === null || result === void 0 ? void 0 : result.data) === null || _m === void 0 ? void 0 : _m.requestId });
190
+ setCurReqInfo({ rtc: (_j = result === null || result === void 0 ? void 0 : result.data) === null || _j === void 0 ? void 0 : _j.rtc, requestId: (_k = result === null || result === void 0 ? void 0 : result.data) === null || _k === void 0 ? void 0 : _k.requestId });
191
191
  return Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list });
192
192
  }
193
193
  if (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) {
194
- query = Object.assign(Object.assign({}, query), { directPage: true, level: 1, pageNum: (_o = query === null || query === void 0 ? void 0 : query.pageNum) !== null && _o !== void 0 ? _o : 1 });
194
+ query = Object.assign(Object.assign({}, query), { directPage: true, level: 1, pageNum: (_l = query === null || query === void 0 ? void 0 : query.pageNum) !== null && _l !== void 0 ? _l : 1 });
195
195
  }
196
196
  const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v3/recommend/direct', { method: 'POST', body: query }));
197
197
  if (!(result === null || result === void 0 ? void 0 : result.success)) {
@@ -201,8 +201,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
201
201
  setCurReqInfo({ rtc: result.data.rtc, requestId: result.data.requestId });
202
202
  if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) && !isEditor) {
203
203
  let list = [];
204
- list = list.concat((_s = (_r = (_q = (_p = result === null || result === void 0 ? void 0 : result.data) === null || _p === void 0 ? void 0 : _p.recList) === null || _q === void 0 ? void 0 : _q.filter) === null || _r === void 0 ? void 0 : _r.call(_q, (item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video))) !== null && _s !== void 0 ? _s : []);
205
- const isNotNullList = (_u = (_t = result === null || result === void 0 ? void 0 : result.data) === null || _t === void 0 ? void 0 : _t.recList) === null || _u === void 0 ? void 0 : _u.some((item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video));
204
+ list = list.concat((_q = (_p = (_o = (_m = result === null || result === void 0 ? void 0 : result.data) === null || _m === void 0 ? void 0 : _m.recList) === null || _o === void 0 ? void 0 : _o.filter) === null || _p === void 0 ? void 0 : _p.call(_o, (item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video))) !== null && _q !== void 0 ? _q : []);
205
+ const isNotNullList = (_s = (_r = result === null || result === void 0 ? void 0 : result.data) === null || _r === void 0 ? void 0 : _r.recList) === null || _s === void 0 ? void 0 : _s.some((item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video));
206
206
  if (!isNotNullList) {
207
207
  setIsNoMoreData(true);
208
208
  }
@@ -211,12 +211,12 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
211
211
  return result === null || result === void 0 ? void 0 : result.data;
212
212
  }), [bffFetch, utmVal, maxSize, defaultSize, channelQueryList, channel, chatlabsId, bffFetchAdmin]);
213
213
  const loadVideos = useCallback((pageNum) => __awaiter(void 0, void 0, void 0, function* () {
214
- var _1, _2, _3, _4;
214
+ var _z, _0, _1, _2;
215
215
  if (rtcList.length <= 0) {
216
216
  return;
217
217
  }
218
218
  const lastItem = rtcList === null || rtcList === void 0 ? void 0 : rtcList[(rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) - 1];
219
- const data = yield getRecommendVideos(Object.assign(Object.assign(Object.assign(Object.assign({ hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag }, (((_1 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _1 === void 0 ? void 0 : _1.itemId) && { productFilter: [(_2 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _2 === void 0 ? void 0 : _2.itemId] })), (((_3 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _3 === void 0 ? void 0 : _3.itemId) && { contentFilter: [(_4 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _4 === void 0 ? void 0 : _4.itemId] })), { themeTag: themeTag.current }), ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) && !isEditor && { pageNum })));
219
+ const data = yield getRecommendVideos(Object.assign(Object.assign(Object.assign(Object.assign({ hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag }, (((_z = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _z === void 0 ? void 0 : _z.itemId) && { productFilter: [(_0 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _0 === void 0 ? void 0 : _0.itemId] })), (((_1 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _1 === void 0 ? void 0 : _1.itemId) && { contentFilter: [(_2 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _2 === void 0 ? void 0 : _2.itemId] })), { themeTag: themeTag.current }), ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) && !isEditor && { pageNum })));
220
220
  setRtcList(rtcList.concat(getFilterRecList(data)));
221
221
  setCacheRtcList(cacheRtcList.concat(getFilterRecList(data)));
222
222
  return data;
@@ -375,18 +375,18 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
375
375
  return res === null || res === void 0 ? void 0 : res.success;
376
376
  }), [bffFetch]);
377
377
  const bffGetTagList = useCallback((data) => __awaiter(void 0, void 0, void 0, function* () {
378
- var _5, _6, _7, _8, _9, _10, _11, _12;
379
- const isShowTag = !!((_7 = (_6 = (_5 = data === null || data === void 0 ? void 0 : data.data) === null || _5 === void 0 ? void 0 : _5.sxpPageConf) === null || _6 === void 0 ? void 0 : _6.globalConfig) === null || _7 === void 0 ? void 0 : _7.isShowTag);
378
+ var _3, _4, _5, _6, _7, _8, _9, _10;
379
+ const isShowTag = !!((_5 = (_4 = (_3 = data === null || data === void 0 ? void 0 : data.data) === null || _3 === void 0 ? void 0 : _3.sxpPageConf) === null || _4 === void 0 ? void 0 : _4.globalConfig) === null || _5 === void 0 ? void 0 : _5.isShowTag);
380
380
  if (!utmVal || !isShowTag)
381
381
  return;
382
382
  try {
383
- const val = (_10 = (_9 = (_8 = splitUrlParams(utmVal)) === null || _8 === void 0 ? void 0 : _8.filter((val) => {
383
+ const val = (_8 = (_7 = (_6 = splitUrlParams(utmVal)) === null || _6 === void 0 ? void 0 : _6.filter((val) => {
384
384
  var _a, _b;
385
385
  const key = val.split('=')[0];
386
386
  return (_b = ((_a = utmParameter === null || utmParameter === void 0 ? void 0 : utmParameter.channels) !== null && _a !== void 0 ? _a : [])) === null || _b === void 0 ? void 0 : _b.includes(key);
387
- })) === null || _9 === void 0 ? void 0 : _9.join('&')) !== null && _10 !== void 0 ? _10 : '';
387
+ })) === null || _7 === void 0 ? void 0 : _7.join('&')) !== null && _8 !== void 0 ? _8 : '';
388
388
  const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/tag/list', { method: 'GET', query: { channel: decodeURIComponent(val) } }));
389
- setTagList((_12 = (_11 = result === null || result === void 0 ? void 0 : result.data) === null || _11 === void 0 ? void 0 : _11.tags) !== null && _12 !== void 0 ? _12 : []);
389
+ setTagList((_10 = (_9 = result === null || result === void 0 ? void 0 : result.data) === null || _9 === void 0 ? void 0 : _9.tags) !== null && _10 !== void 0 ? _10 : []);
390
390
  }
391
391
  catch (e) {
392
392
  console.log('e', e);
@@ -446,10 +446,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
446
446
  });
447
447
  }, [bffEventReport]);
448
448
  const getAccount = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
449
- var _13, _14;
449
+ var _11, _12;
450
450
  const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/account', { method: 'GET' }));
451
- setChatlabsId((_13 = res === null || res === void 0 ? void 0 : res.data) === null || _13 === void 0 ? void 0 : _13.chatLabsId);
452
- return ((_14 = res === null || res === void 0 ? void 0 : res.data) === null || _14 === void 0 ? void 0 : _14.consentResult) === 'true';
451
+ setChatlabsId((_11 = res === null || res === void 0 ? void 0 : res.data) === null || _11 === void 0 ? void 0 : _11.chatLabsId);
452
+ return ((_12 = res === null || res === void 0 ? void 0 : res.data) === null || _12 === void 0 ? void 0 : _12.consentResult) === 'true';
453
453
  }), [bffFetch]);
454
454
  const accountSonsent = useCallback((consentResult) => __awaiter(void 0, void 0, void 0, function* () {
455
455
  const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/account/consent', {
@@ -464,7 +464,6 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
464
464
  if (!isShowConsent)
465
465
  h5EnterLink();
466
466
  }, [isShowConsent]);
467
- console.log(data, '111');
468
467
  useEffect(() => {
469
468
  if (isShowConsent || isPreview)
470
469
  return;
@@ -11,7 +11,15 @@ interface IVideoWidgetProps {
11
11
  activeIndex?: number;
12
12
  videoPostConfig?: postConfigType;
13
13
  swiperRef?: any;
14
- loopPlay?: boolean;
14
+ videoPlayIcon?: string;
15
+ handleUpdateTimeline?: (index: number, v: number) => void;
16
+ loopPlay: any;
15
17
  }
16
- declare const _default: React.NamedExoticComponent<IVideoWidgetProps>;
18
+ export interface IVideoWidgetRef {
19
+ play: () => void;
20
+ pause: () => void;
21
+ setLoopPlay: (v: boolean) => void;
22
+ isPlaying: () => boolean;
23
+ }
24
+ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<IVideoWidgetProps & React.RefAttributes<IVideoWidgetRef>>>;
17
25
  export default _default;