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.
package/dist/pb-ui.js CHANGED
@@ -444,39 +444,6 @@
444
444
  })
445
445
  };
446
446
 
447
- function useEditor() {
448
- return React.useContext(EditorContext);
449
- }
450
-
451
- function useDataSource() {
452
- return React.useContext(DataSourceContext);
453
- }
454
-
455
- const feRealSessionIdKey = 'feRealSessionIdKey';
456
- const generateFeSessionId = () => {
457
- const uid = getUid(); // 32位长度
458
- const timestamp = Date.now(); // 13位长度
459
- const result = `${timestamp}${uid}`; // 总共45位长度的唯一ID
460
- return result;
461
- };
462
- // 生成或者获取sessionID
463
- const storeAndLoadFeSessionId = () => {
464
- let result = getFeSessionId();
465
- if (!result) {
466
- result = generateFeSessionId();
467
- window.localStorage.setItem(feRealSessionIdKey, result);
468
- }
469
- return result;
470
- };
471
- const refreshFeSessionId = () => {
472
- const result = generateFeSessionId();
473
- window.localStorage.setItem(feRealSessionIdKey, result);
474
- };
475
- // 获取 sessionID
476
- const getFeSessionId = () => {
477
- return window.localStorage.getItem(feRealSessionIdKey);
478
- };
479
-
480
447
  /*
481
448
  * @Author: binruan@chatlabs.com
482
449
  * @Date: 2024-03-20 10:27:31
@@ -528,6 +495,39 @@
528
495
  window.localStorage.setItem(USER_CONSENT_RESULT_KEY, 'true');
529
496
  };
530
497
 
498
+ function useEditor() {
499
+ return React.useContext(EditorContext);
500
+ }
501
+
502
+ function useDataSource() {
503
+ return React.useContext(DataSourceContext);
504
+ }
505
+
506
+ const feRealSessionIdKey = 'feRealSessionIdKey';
507
+ const generateFeSessionId = () => {
508
+ const uid = getUid(); // 32位长度
509
+ const timestamp = Date.now(); // 13位长度
510
+ const result = `${timestamp}${uid}`; // 总共45位长度的唯一ID
511
+ return result;
512
+ };
513
+ // 生成或者获取sessionID
514
+ const storeAndLoadFeSessionId = () => {
515
+ let result = getFeSessionId();
516
+ if (!result) {
517
+ result = generateFeSessionId();
518
+ window.localStorage.setItem(feRealSessionIdKey, result);
519
+ }
520
+ return result;
521
+ };
522
+ const refreshFeSessionId = () => {
523
+ const result = generateFeSessionId();
524
+ window.localStorage.setItem(feRealSessionIdKey, result);
525
+ };
526
+ // 获取 sessionID
527
+ const getFeSessionId = () => {
528
+ return window.localStorage.getItem(feRealSessionIdKey);
529
+ };
530
+
531
531
  /*
532
532
  * @Author: binruan@chatlabs.com
533
533
  * @Date: 2024-03-20 10:27:31
@@ -772,16 +772,16 @@
772
772
  }, [bffDataSource]);
773
773
  // 获取推荐视频数据
774
774
  const getRecommendVideos = React.useCallback((query) => __awaiter(void 0, void 0, void 0, function* () {
775
- var _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
776
- 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 }));
775
+ var _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
776
+ 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 }));
777
777
  if (channel) {
778
778
  query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(channel) });
779
779
  }
780
780
  else if (utmVal) {
781
- const val = (_k = (_j = (_h = splitUrlParams(utmVal)) === null || _h === void 0 ? void 0 : _h.filter((val) => {
781
+ const val = (_h = (_g = (_f = splitUrlParams(utmVal)) === null || _f === void 0 ? void 0 : _f.filter((val) => {
782
782
  const key = val.split('=')[0];
783
783
  return key;
784
- })) === null || _j === void 0 ? void 0 : _j.join('&')) !== null && _k !== void 0 ? _k : '';
784
+ })) === null || _g === void 0 ? void 0 : _g.join('&')) !== null && _h !== void 0 ? _h : '';
785
785
  if (val)
786
786
  query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(val) });
787
787
  }
@@ -795,19 +795,19 @@
795
795
  let list = [];
796
796
  let result = null;
797
797
  const recurveRecList = (query) => __awaiter(void 0, void 0, void 0, function* () {
798
- var _v, _w, _x, _y, _z, _0;
798
+ var _t, _u, _v, _w, _x, _y;
799
799
  query.pageNum = pageNum;
800
800
  result = yield (bffFetchAdmin === null || bffFetchAdmin === void 0 ? void 0 : bffFetchAdmin('recommend/direct_page', { method: 'POST', body: query }));
801
801
  if (!(result === null || result === void 0 ? void 0 : result.success)) {
802
802
  return undefined;
803
803
  }
804
804
  setLoading(false);
805
- 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 : []);
805
+ 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 : []);
806
806
  if ((rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) === 0) {
807
807
  setRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
808
808
  setCacheRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
809
809
  }
810
- 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));
810
+ 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));
811
811
  if (isNotNullList) {
812
812
  pageNum = pageNum + 1;
813
813
  yield recurveRecList(query);
@@ -815,11 +815,11 @@
815
815
  });
816
816
  yield recurveRecList(query);
817
817
  if (!(query === null || query === void 0 ? void 0 : query.hashTag) && result)
818
- 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 });
818
+ 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 });
819
819
  return Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list });
820
820
  }
821
821
  if (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) {
822
- 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 });
822
+ 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 });
823
823
  }
824
824
  const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v3/recommend/direct', { method: 'POST', body: query }));
825
825
  if (!(result === null || result === void 0 ? void 0 : result.success)) {
@@ -829,8 +829,8 @@
829
829
  setCurReqInfo({ rtc: result.data.rtc, requestId: result.data.requestId });
830
830
  if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) && !isEditor) {
831
831
  let list = [];
832
- 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 : []);
833
- 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));
832
+ 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 : []);
833
+ 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));
834
834
  if (!isNotNullList) {
835
835
  setIsNoMoreData(true);
836
836
  }
@@ -839,12 +839,12 @@
839
839
  return result === null || result === void 0 ? void 0 : result.data;
840
840
  }), [bffFetch, utmVal, maxSize, defaultSize, channelQueryList, channel, chatlabsId, bffFetchAdmin]);
841
841
  const loadVideos = React.useCallback((pageNum) => __awaiter(void 0, void 0, void 0, function* () {
842
- var _1, _2, _3, _4;
842
+ var _z, _0, _1, _2;
843
843
  if (rtcList.length <= 0) {
844
844
  return;
845
845
  }
846
846
  const lastItem = rtcList === null || rtcList === void 0 ? void 0 : rtcList[(rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) - 1];
847
- 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 })));
847
+ 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 })));
848
848
  setRtcList(rtcList.concat(getFilterRecList(data)));
849
849
  setCacheRtcList(cacheRtcList.concat(getFilterRecList(data)));
850
850
  return data;
@@ -1009,18 +1009,18 @@
1009
1009
  }), [bffFetch]);
1010
1010
  // 获取 Tag
1011
1011
  const bffGetTagList = React.useCallback((data) => __awaiter(void 0, void 0, void 0, function* () {
1012
- var _5, _6, _7, _8, _9, _10, _11, _12;
1013
- 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);
1012
+ var _3, _4, _5, _6, _7, _8, _9, _10;
1013
+ 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);
1014
1014
  if (!utmVal || !isShowTag)
1015
1015
  return;
1016
1016
  try {
1017
- const val = (_10 = (_9 = (_8 = splitUrlParams(utmVal)) === null || _8 === void 0 ? void 0 : _8.filter((val) => {
1017
+ const val = (_8 = (_7 = (_6 = splitUrlParams(utmVal)) === null || _6 === void 0 ? void 0 : _6.filter((val) => {
1018
1018
  var _a, _b;
1019
1019
  const key = val.split('=')[0];
1020
1020
  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);
1021
- })) === null || _9 === void 0 ? void 0 : _9.join('&')) !== null && _10 !== void 0 ? _10 : '';
1021
+ })) === null || _7 === void 0 ? void 0 : _7.join('&')) !== null && _8 !== void 0 ? _8 : '';
1022
1022
  const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/tag/list', { method: 'GET', query: { channel: decodeURIComponent(val) } }));
1023
- 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 : []);
1023
+ 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 : []);
1024
1024
  }
1025
1025
  catch (e) {
1026
1026
  console.log('e', e);
@@ -1080,10 +1080,10 @@
1080
1080
  });
1081
1081
  }, [bffEventReport]);
1082
1082
  const getAccount = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
1083
- var _13, _14;
1083
+ var _11, _12;
1084
1084
  const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/account', { method: 'GET' }));
1085
- setChatlabsId((_13 = res === null || res === void 0 ? void 0 : res.data) === null || _13 === void 0 ? void 0 : _13.chatLabsId);
1086
- return ((_14 = res === null || res === void 0 ? void 0 : res.data) === null || _14 === void 0 ? void 0 : _14.consentResult) === 'true';
1085
+ setChatlabsId((_11 = res === null || res === void 0 ? void 0 : res.data) === null || _11 === void 0 ? void 0 : _11.chatLabsId);
1086
+ return ((_12 = res === null || res === void 0 ? void 0 : res.data) === null || _12 === void 0 ? void 0 : _12.consentResult) === 'true';
1087
1087
  }), [bffFetch]);
1088
1088
  const accountSonsent = React.useCallback((consentResult) => __awaiter(void 0, void 0, void 0, function* () {
1089
1089
  const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/account/consent', {
@@ -1098,7 +1098,6 @@
1098
1098
  if (!isShowConsent)
1099
1099
  h5EnterLink();
1100
1100
  }, [isShowConsent]);
1101
- console.log(data, '111');
1102
1101
  React.useEffect(() => {
1103
1102
  if (isShowConsent || isPreview)
1104
1103
  return;
@@ -18314,7 +18313,7 @@ Made in Italy` })));
18314
18313
  * @Author: binruan@chatlabs.com
18315
18314
  * @Date: 2023-12-26 16:11:34
18316
18315
  * @LastEditors: binruan@chatlabs.com
18317
- * @LastEditTime: 2025-03-26 19:32:00
18316
+ * @LastEditTime: 2025-03-28 14:46:08
18318
18317
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\RenderCard.tsx
18319
18318
  *
18320
18319
  */
@@ -19476,7 +19475,7 @@ Made in Italy` })));
19476
19475
  };
19477
19476
  var PictureGroup$1 = React.memo(PictureGroup);
19478
19477
 
19479
- const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, width, swiperRef, loopPlay }) => {
19478
+ const VideoWidget = React.forwardRef(({ rec, index, height, data, muted, activeIndex, videoPostConfig, width, swiperRef, videoPlayIcon, handleUpdateTimeline, loopPlay }, ref) => {
19480
19479
  const { isActive } = useSwiperSlide();
19481
19480
  const [isPauseVideo, setIsPauseVideo] = React.useState(false);
19482
19481
  const videoRef = React.useRef(null);
@@ -19488,6 +19487,38 @@ Made in Italy` })));
19488
19487
  const [firstFrameSrc, setFirstFrameSrc] = React.useState('');
19489
19488
  const videoId = `pb-cache-video-${index}`;
19490
19489
  const hlsRef = React.useRef(null);
19490
+ const loopPlayRef = React.useRef(loopPlay);
19491
+ React.useEffect(() => {
19492
+ loopPlayRef.current = loopPlay;
19493
+ }, [loopPlay]);
19494
+ React.useImperativeHandle(ref, () => {
19495
+ return {
19496
+ play() {
19497
+ var _a;
19498
+ if (!videoRef.current)
19499
+ return;
19500
+ handleTimeUpload();
19501
+ (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
19502
+ setIsPauseVideo(false);
19503
+ },
19504
+ pause() {
19505
+ var _a;
19506
+ if (!videoRef.current)
19507
+ return;
19508
+ (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
19509
+ setIsPauseVideo(true);
19510
+ },
19511
+ setLoopPlay(v) {
19512
+ if (!videoRef.current)
19513
+ return;
19514
+ loopPlayRef.current = v;
19515
+ },
19516
+ isPlaying() {
19517
+ var _a;
19518
+ return !((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused);
19519
+ }
19520
+ };
19521
+ });
19491
19522
  React.useEffect(() => {
19492
19523
  if (!videoRef.current)
19493
19524
  return;
@@ -19497,8 +19528,8 @@ Made in Italy` })));
19497
19528
  var _a;
19498
19529
  (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
19499
19530
  }, []);
19500
- useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
19501
- const handlePlaying = React.useCallback(() => {
19531
+ const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
19532
+ React.useCallback(() => {
19502
19533
  var _a, _b, _c, _d, _e, _f;
19503
19534
  setIsPauseVideo(false);
19504
19535
  const item = data[index];
@@ -19515,9 +19546,9 @@ Made in Italy` })));
19515
19546
  (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
19516
19547
  setIsLoadFinish(true);
19517
19548
  }, []);
19518
- React.useCallback((type) => () => {
19519
- var _a, _b, _c, _d, _e;
19520
- if (!isLoadFinish)
19549
+ const handleClickVideo = React.useCallback((type) => () => {
19550
+ var _a, _b, _c, _d, _e, _f;
19551
+ if (!isActive || !(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
19521
19552
  return;
19522
19553
  const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
19523
19554
  switch (type) {
@@ -19535,10 +19566,13 @@ Made in Italy` })));
19535
19566
  break;
19536
19567
  default:
19537
19568
  if (isPause) {
19538
- (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
19569
+ 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)) {
19570
+ videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
19571
+ }
19572
+ (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
19539
19573
  }
19540
19574
  else {
19541
- (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
19575
+ (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.pause();
19542
19576
  }
19543
19577
  setIsPauseVideo(!isPause);
19544
19578
  break;
@@ -19562,7 +19596,7 @@ Made in Italy` })));
19562
19596
  ? `translateY(-${50 + ((_a = videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%) translate3d(0px, 0px, 0px)`
19563
19597
  : 'translateY(-50%)';
19564
19598
  }, [videoPostConfig]);
19565
- const handLoadeddata = React.useCallback(() => {
19599
+ React.useCallback(() => {
19566
19600
  if (!canvasRef || !videoRef || !videoRef.current || !canvasRef.current)
19567
19601
  return;
19568
19602
  const video = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current;
@@ -19576,36 +19610,34 @@ Made in Italy` })));
19576
19610
  setFirstFrameSrc(canvas.toDataURL());
19577
19611
  }, []);
19578
19612
  const handleTimeUpload = React.useCallback(() => {
19579
- var _a, _b, _c;
19613
+ var _a;
19580
19614
  if (!videoRef.current)
19581
19615
  return;
19582
- 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)) {
19583
- (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
19584
- }
19616
+ 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);
19617
+ handleUpdateTimeline === null || handleUpdateTimeline === void 0 ? void 0 : handleUpdateTimeline(index, localTime);
19618
+ setTimeout(() => {
19619
+ var _a, _b;
19620
+ 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)) {
19621
+ slideSwiper();
19622
+ }
19623
+ });
19585
19624
  }, []);
19586
- const handlePause = () => {
19587
- var _a, _b, _c, _d, _e, _f;
19588
- if (!videoRef.current || !isActive)
19589
- return;
19590
- if (!loopPlay)
19625
+ const slideSwiper = () => {
19626
+ var _a, _b, _c, _d, _e, _f, _g;
19627
+ (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
19628
+ if (!loopPlayRef.current)
19591
19629
  return;
19592
19630
  if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
19593
- (_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);
19631
+ (_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);
19594
19632
  }
19595
19633
  else {
19596
- 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;
19597
- (_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);
19634
+ 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;
19635
+ (_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);
19598
19636
  }
19599
19637
  };
19600
- // useEffect(() => {
19601
- // if (!videoRef.current) return;
19602
- // if (!isActive) return;
19603
- // if (!loopPlay) {
19604
- // videoRef?.current?.pause();
19605
- // } else {
19606
- // videoRef?.current?.play();
19607
- // }
19608
- // }, [loopPlay, isActive]);
19638
+ const handlePause = () => {
19639
+ setIsPauseVideo(true);
19640
+ };
19609
19641
  React.useEffect(() => {
19610
19642
  var _a, _b, _c;
19611
19643
  if (!isActive)
@@ -19651,8 +19683,8 @@ Made in Italy` })));
19651
19683
  (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('pause', handlePause);
19652
19684
  (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('timeupdate', handleTimeUpload);
19653
19685
  };
19654
- }, [handleLoadedMetadata, handlePlaying, rec, handLoadeddata, isActive, loopPlay]);
19655
- React.useMemo(() => {
19686
+ }, [isActive]);
19687
+ const renderPoster = React.useMemo(() => {
19656
19688
  if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
19657
19689
  return null;
19658
19690
  }
@@ -19669,22 +19701,43 @@ Made in Italy` })));
19669
19701
  if (!(rec === null || rec === void 0 ? void 0 : rec.mediaUrl)) {
19670
19702
  return null;
19671
19703
  }
19704
+ // const renderLoading = useMemo(() => {
19705
+ // if (!waiting || !isLoadFinish) return;
19706
+ // return (
19707
+ // <img
19708
+ // style={{
19709
+ // position: 'absolute',
19710
+ // top: '50%',
19711
+ // left: 0,
19712
+ // right: 0,
19713
+ // transform: 'translateY(-100%)',
19714
+ // margin: 'auto',
19715
+ // width: '50px',
19716
+ // height: '50px',
19717
+ // objectFit: 'contain'
19718
+ // }}
19719
+ // src={loading_gif}
19720
+ // alt='placeholder image'
19721
+ // />
19722
+ // );
19723
+ // }, [waiting, isLoadFinish]);
19672
19724
  return (React.createElement("div", { className: 'video-container', key: rec.itemId, style: {
19673
19725
  position: 'relative',
19674
19726
  width: '100%',
19675
19727
  height,
19676
- overflow: 'hidden',
19677
- pointerEvents: 'none'
19678
- } },
19679
- React.createElement("div", { className: 'n-full-screen', id: videoId, style: { width: '100%', height: '100%' } })));
19680
- };
19728
+ overflow: 'hidden'
19729
+ }, onClick: handleClickVideo() },
19730
+ React.createElement("div", { className: 'n-full-screen', id: videoId, style: { width: '100%', height: '100%' } }),
19731
+ renderPoster,
19732
+ isPauseVideo && React.createElement(FormatImage$1, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })));
19733
+ });
19681
19734
  var VideoWidget$1 = React.memo(VideoWidget);
19682
19735
 
19683
19736
  /*
19684
19737
  * @Author: binruan@chatlabs.com
19685
19738
  * @Date: 2025-03-25 13:54:27
19686
19739
  * @LastEditors: binruan@chatlabs.com
19687
- * @LastEditTime: 2025-03-27 17:20:34
19740
+ * @LastEditTime: 2025-03-31 14:29:21
19688
19741
  * @FilePath: \pb-sxp-ui\src\core\components\DiyStoryPreview\index.tsx
19689
19742
  *
19690
19743
  */
@@ -19872,9 +19925,10 @@ Made in Italy` })));
19872
19925
  });
19873
19926
  const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
19874
19927
  const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
19875
- const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [], scenes, onActiveChange, activeIndex, loopPlay = false, pointerEvents = 'none' }) => {
19876
- const [loopPlaySwiper, setLooPlaySwiper] = React.useState(loopPlay);
19928
+ const DiyStoryPreview = React.forwardRef(({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [], scenes, onActiveChange, activeIndex, loopPlay = false, pointerEvents = 'none', onUpdateTimeLine, disabledListener }, ref) => {
19929
+ const videoWidgetRef = React.useRef(null);
19877
19930
  const swiperRef = React.useRef(null);
19931
+ const [curIndex, setCurIndex] = React.useState(0);
19878
19932
  React.useMemo(() => {
19879
19933
  let minusHeight = 0;
19880
19934
  if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
@@ -19885,6 +19939,32 @@ Made in Italy` })));
19885
19939
  }
19886
19940
  return containerHeight - minusHeight;
19887
19941
  }, [globalConfig, containerHeight, tagList]);
19942
+ React.useImperativeHandle(ref, () => {
19943
+ return {
19944
+ play() {
19945
+ var _a;
19946
+ (_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.play();
19947
+ },
19948
+ pause() {
19949
+ var _a;
19950
+ (_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.pause();
19951
+ },
19952
+ slideTo(n) {
19953
+ var _a, _b;
19954
+ if (!(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current))
19955
+ return;
19956
+ (_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);
19957
+ },
19958
+ isPlaying() {
19959
+ var _a, _b;
19960
+ 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;
19961
+ },
19962
+ setLoopPlay(v) {
19963
+ var _a;
19964
+ (_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(v);
19965
+ }
19966
+ };
19967
+ });
19888
19968
  // 判断是否是视频
19889
19969
  const isVideoUrl = (url) => {
19890
19970
  if (url && url !== '' && typeof url === 'string') {
@@ -19899,10 +19979,10 @@ Made in Italy` })));
19899
19979
  const renderContent = (rec, index) => {
19900
19980
  const isVideo = isVideoUrl(rec === null || rec === void 0 ? void 0 : rec.mediaUrl);
19901
19981
  if (isVideo) {
19902
- return (React.createElement(VideoWidget$1, { 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 }));
19982
+ return (React.createElement(VideoWidget$1, 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 })));
19903
19983
  }
19904
19984
  else {
19905
- return (React.createElement(PictureGroup$1, { 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 }));
19985
+ return (React.createElement(PictureGroup$1, { 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 }));
19906
19986
  }
19907
19987
  };
19908
19988
  React.useMemo(() => {
@@ -20019,6 +20099,7 @@ Made in Italy` })));
20019
20099
  var _a, _b, _c, _d;
20020
20100
  const rec = lodash.cloneDeep(recData);
20021
20101
  rec.video.bindProducts = item === null || item === void 0 ? void 0 : item.bindProducts;
20102
+ rec.video.title = (item === null || item === void 0 ? void 0 : item.title) || '';
20022
20103
  return (React.createElement("div", { style: { position: 'relative' } },
20023
20104
  React.createElement(SwiperSlide, { key: index, virtualIndex: index, style: { overflow: 'hidden', position: 'relative' } },
20024
20105
  renderBottom(rec, index),
@@ -20039,35 +20120,45 @@ Made in Italy` })));
20039
20120
  return;
20040
20121
  (_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);
20041
20122
  }, [activeIndex]);
20123
+ const handleSessionExpire = React.useCallback(lodash.debounce(() => {
20124
+ var _a;
20125
+ (_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
20126
+ }, 1000), []);
20042
20127
  React.useEffect(() => {
20043
- var _a, _b;
20044
- if (!(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current))
20128
+ if (disabledListener)
20045
20129
  return;
20046
- (_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);
20047
- }, [loopPlay]);
20130
+ const events = ['touchstart', 'touchcancel'];
20131
+ events.forEach((event) => {
20132
+ window.addEventListener(event, handleSessionExpire);
20133
+ });
20134
+ return () => {
20135
+ events.forEach((event) => {
20136
+ window.removeEventListener(event, handleSessionExpire);
20137
+ });
20138
+ };
20139
+ }, [handleSessionExpire, disabledListener]);
20048
20140
  return (React.createElement("div", { id: 'sxp-render',
20049
20141
  // className={style['clc-sxp-container']}
20050
20142
  style: { height: containerHeight, position: 'relative', pointerEvents } },
20051
20143
  React.createElement(Swiper, { ref: swiperRef, allowTouchMove: pointerEvents !== 'none', onSlideChange: () => {
20052
- setLooPlaySwiper(false);
20053
20144
  swiperRef.current.swiper.allowTouchMove = false;
20054
20145
  setTimeout(() => {
20055
20146
  swiperRef.current.swiper.allowTouchMove = true;
20056
20147
  }, 500);
20057
20148
  }, onActiveIndexChange: (swiper) => {
20058
- // setActiveIndex(swiper.activeIndex);
20149
+ setCurIndex(swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex);
20059
20150
  onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(swiper.activeIndex);
20060
20151
  }, direction: 'vertical', style: { overflow: 'hidden', height: containerHeight }, height: containerHeight }, scenes === null || scenes === void 0 ? void 0 : scenes.map((rec, index) => {
20061
20152
  return renderView(rec, index);
20062
20153
  }))));
20063
- };
20154
+ });
20064
20155
  var DiyStoryPreview$1 = React.memo(DiyStoryPreview);
20065
20156
 
20066
20157
  /*
20067
20158
  * @Author: binruan@chatlabs.com
20068
20159
  * @Date: 2023-10-31 10:56:01
20069
20160
  * @LastEditors: binruan@chatlabs.com
20070
- * @LastEditTime: 2024-10-23 15:07:29
20161
+ * @LastEditTime: 2025-03-28 17:15:47
20071
20162
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Popup\index.tsx
20072
20163
  *
20073
20164
  */
@@ -20161,7 +20252,7 @@ Made in Italy` })));
20161
20252
  * @Author: binruan@chatlabs.com
20162
20253
  * @Date: 2024-03-20 10:27:31
20163
20254
  * @LastEditors: binruan@chatlabs.com
20164
- * @LastEditTime: 2025-03-27 17:17:56
20255
+ * @LastEditTime: 2025-03-28 16:55:21
20165
20256
  * @FilePath: \pb-sxp-ui\src\core\components\SxpPageCore\index.tsx
20166
20257
  *
20167
20258
  */
@@ -20170,19 +20261,19 @@ Made in Italy` })));
20170
20261
  RESOLVER[v.extend.type] = v;
20171
20262
  });
20172
20263
  const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain, enabledMetaConversionApi, dataList, pointerEvents }) => {
20173
- var _a, _b, _c, _d, _e, _f;
20264
+ var _a, _b, _c, _d, _e, _f, _g, _h;
20174
20265
  const utmVal = React.useMemo(() => {
20175
20266
  var _a;
20176
20267
  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('?', '') : '';
20177
20268
  return searchParams;
20178
20269
  }, []);
20179
- const [_schema, setSchema] = React.useState(data === null || data === void 0 ? void 0 : data.data);
20270
+ const [_schema, setSchema] = React.useState((_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.data);
20180
20271
  const [channel, setChannel] = React.useState();
20181
20272
  return (React.createElement(EditorCore, { resolver: RESOLVER, enableDataSource: false, schema: _schema, utmVal: channel || utmVal },
20182
- React.createElement(SxpDataSourceProvider$1, { 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 }) => {
20183
- var _a;
20273
+ React.createElement(SxpDataSourceProvider$1, { 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 }) => {
20274
+ var _a, _b;
20184
20275
  return (React.createElement(React.Fragment, null,
20185
- React.createElement(DiyStoryPreview$1, 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 })),
20276
+ React.createElement(DiyStoryPreview$1, 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 })),
20186
20277
  React.createElement(Popup, null)));
20187
20278
  } })));
20188
20279
  };