pb-sxp-ui 1.15.22-alpha.1 → 1.15.22-alpha.2

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.
@@ -10,184 +10,6 @@ import PictureGroup from './PictureGroup';
10
10
  import VideoWidget from './VideoWidget';
11
11
  import * as _materials_ from '../../../materials';
12
12
  import '../SxpPageRender/index.less';
13
- const recData = {
14
- position: 0,
15
- isCollected: false,
16
- product: null,
17
- video: {
18
- appId: null,
19
- itemId: 'VIDEOSsRgI1695278974368',
20
- title: '8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片',
21
- enTitle: null,
22
- icon: null,
23
- cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20231017/fsJFWmW1dGyW7XmDspbJPTn5esL3U1697538777398.png',
24
- link: null,
25
- linkTitle: null,
26
- linkType: null,
27
- menuCategoryId: null,
28
- remark: null,
29
- tags: [
30
- 'Gift-Giving',
31
- 'Daily Wear',
32
- 'Business Formal',
33
- 'Sports/Casual',
34
- 'Anniversary Gifts',
35
- 'Wedding/Engagement',
36
- 'Formal Dinner/Party'
37
- ],
38
- traceInfo: ':VIDEO:VIDEOSsRgI1695278974368:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
39
- value: 385,
40
- weight: null,
41
- bindCta: null,
42
- bindProduct: null,
43
- bindProducts: [
44
- {
45
- appId: 'wx448578f8851f3dce',
46
- itemId: 'test02178888',
47
- title: 'christian dior小包包 新CDN',
48
- enTitle: null,
49
- icon: null,
50
- cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs2jqiurjftpoaba67iiwr9jt5sc31726213277754.avif',
51
- link: '/pages/details/index?spu_id=1702262707659534338',
52
- linkTitle: '',
53
- linkType: 'MP',
54
- menuCategoryId: null,
55
- remark: null,
56
- tags: [],
57
- traceInfo: ':PRODUCT:test02178888:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
58
- value: null,
59
- weight: null,
60
- bindCta: {
61
- appId: 'wx448578f8851f3dce',
62
- itemId: 'CTA3KofE1716186622249',
63
- title: 'SHOP NOW 立即购买',
64
- enTitle: 'BUY NOW立即购买,选择你所喜爱的;',
65
- icon: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240520/fssfxbmiwghixmgblz9uriwennd2r1716186615574.avif',
66
- cover: null,
67
- link: '/pages/details/index?spu_id=1702262707659534338',
68
- linkTitle: '',
69
- linkType: 'MP',
70
- menuCategoryId: '64b60b202caf0e1c1ce1e17d',
71
- remark: null,
72
- tags: [
73
- "Woman's Perfumes",
74
- 'Plates & Bowls',
75
- 'Glasses',
76
- 'Multicolor',
77
- 'Carafes',
78
- 'Tea & Coffee',
79
- 'Green',
80
- 'Grey',
81
- 'Cutlery'
82
- ],
83
- traceInfo: ':CTA:CTA3KofE1716186622249:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
84
- value: null,
85
- weight: null
86
- },
87
- collection: 'Ricco',
88
- currency: 'INR-₹',
89
- homePage: [
90
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs2jqiurjftpoaba67iiwr9jt5sc31726213277754.avif',
91
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fsr9ttuzuljs85smqi6lsidovnyoy1726213285994.avif',
92
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fsknmfhx2lxukxews05guwwxr8rju1726213281108.avif',
93
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs0acnua4f1clamdpwdsrh0v5dgc61726213289247.avif'
94
- ],
95
- info: 'test',
96
- price: 53200,
97
- shippingInfo: null,
98
- taxInfo: null
99
- },
100
- {
101
- appId: null,
102
- itemId: '113J631A0684_C520',
103
- title: 'Sweatshirt à capuche Dior Oblique, coupe relax',
104
- enTitle: null,
105
- icon: null,
106
- cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fsaf0xq8vx8gkkl30y1h1swpinmbt1731661943891.avif',
107
- link: 'https://www.dior.com/fr_fr/fashion/products/113J631A0684_C520',
108
- linkTitle: null,
109
- linkType: 'WEB',
110
- menuCategoryId: null,
111
- remark: null,
112
- tags: [],
113
- traceInfo: ':PRODUCT:113J631A0684_C520:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
114
- value: null,
115
- weight: null,
116
- bindCta: {
117
- appId: null,
118
- itemId: 'CTAAfaKf1730796437032',
119
- title: 'test',
120
- enTitle: 'test',
121
- icon: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241105/fsjblxoud2tmehpiqqomh0oktwqrd1730796431496.avif',
122
- cover: null,
123
- link: null,
124
- linkTitle: null,
125
- linkType: null,
126
- menuCategoryId: '64b60b202caf0e1c1ce1e17d',
127
- remark: '',
128
- tags: [],
129
- traceInfo: ':CTA:CTAAfaKf1730796437032:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
130
- value: null,
131
- weight: null
132
- },
133
- collection: 'Jacquard de coton éponge bleu',
134
- currency: 'EUR-€',
135
- homePage: [
136
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fsaf0xq8vx8gkkl30y1h1swpinmbt1731661943891.avif',
137
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fszxkdcjfjql2oiy90ffbal5tsfd81731661964913.avif',
138
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fs1jhd9jwxvfqmrbjwy5abfzb0fde1731661994996.avif'
139
- ],
140
- info: "Le sweatshirt à capuche bleu met à l'honneur l'emblématique motif dior oblique. Confectionné en jacquard de coton éponge bleu, il présente une coupe relax très confortable. Doté de poches latérales fendues, ce sweatshirt à capuche s'associera à tous vos jeans ou pantalons de survêtement pour un look décontracté.. Sweatshirt à capuche dior oblique, coupe relax Jacquard de coton éponge bleu",
141
- price: 1800,
142
- shippingInfo: null,
143
- taxInfo: null
144
- },
145
- {
146
- appId: null,
147
- itemId: 'S5573CRIW_M928',
148
- title: 'Mini Dior Book Tote',
149
- enTitle: null,
150
- icon: null,
151
- cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsvewk9etrawxrzznmvvewgt1bctu1739415576729.avif',
152
- link: 'https://www.dior.com/en_gb/fashion/products/S5573CRIW_M928',
153
- linkTitle: null,
154
- linkType: 'WEB',
155
- menuCategoryId: null,
156
- remark: null,
157
- tags: ['ダイヤモンド'],
158
- traceInfo: ':PRODUCT:S5573CRIW_M928:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
159
- value: null,
160
- weight: null,
161
- bindCta: null,
162
- collection: null,
163
- currency: 'GBP-£',
164
- homePage: [
165
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsvewk9etrawxrzznmvvewgt1bctu1739415576729.avif',
166
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsngtlvhid7xwt5if0viw7vqanm831739415582147.avif',
167
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fs4hotdvyzjtnqb9vszlynuzplddc1739415586910.avif',
168
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fswffx9kwexf3z3vcnxisut1qxtez1739415591629.avif',
169
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsbfsi7tttx1hnzldoiw7eoea7fvh1739415597388.avif'
170
- ],
171
- info: "The Dior Book Tote is a House classic and original design by Maria Grazia Chiuri, Creative Director of Christian Dior. The style is fully embroidered with the House's hallmark blue Dior Oblique motif and showcases the Christian Dior Paris signature. Exemplifying House savoir-faire, the miniature style features an adjustable and removable strap that allows it to be carried by hand, worn over the shoulder or crossbody.",
172
- price: 1950,
173
- shippingInfo: null,
174
- taxInfo: null
175
- }
176
- ],
177
- url: null,
178
- blockCta: 1,
179
- blockProduct: 1,
180
- hashTags: [
181
- 'Sports/Casual',
182
- 'Formal Dinner/Party',
183
- 'Business Formal',
184
- 'Wedding/Engagement',
185
- 'Gift-Giving',
186
- 'Daily Wear',
187
- 'Anniversary Gifts'
188
- ]
189
- }
190
- };
191
13
  const RESOLVER = {};
192
14
  Object.values(_materials_).forEach((v) => {
193
15
  RESOLVER[v.extend.type] = v;
@@ -1,7 +1,6 @@
1
1
  import React, { memo, useMemo, useState } from 'react';
2
2
  import SxpPageRender from '../SxpPageRender';
3
3
  import Popup from '../SxpPageRender/Popup';
4
- import DiyStoryPreview from '../DiyStoryPreview';
5
4
  import * as _materials_ from '../../../materials';
6
5
  import { EditorCore } from '../../../core';
7
6
  import SxpDataSourceProvider from '../../../core/context/SxpDataSourceProvider';
@@ -21,9 +20,9 @@ const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, l
21
20
  const [channel, setChannel] = useState();
22
21
  return (React.createElement(EditorCore, { resolver: RESOLVER, enableDataSource: false, schema: _schema, utmVal: channel || utmVal },
23
22
  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: data, dataList: dataList, isDiyH5: isDiyH5, onUpdateSchema: (d) => setSchema(d), onUpdateChannel: (d) => setChannel(d), render: ({ rtcList, tagList, pageData }) => {
24
- var _a, _b;
23
+ var _a;
25
24
  return (React.createElement(React.Fragment, null,
26
- isDiyH5 ? (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, data: rtcList, resolver: RESOLVER, containerHeight: window === null || window === void 0 ? void 0 : window.innerHeight, pointerEvents: 'all', loopPlay: true }))) : (React.createElement(SxpPageRender, Object.assign({ defaultData: data }, (_b = pageData === null || pageData === void 0 ? void 0 : pageData.data) === null || _b === void 0 ? void 0 : _b.sxpPageConf, { tagList: tagList, data: rtcList, resolver: RESOLVER }))),
25
+ React.createElement(SxpPageRender, Object.assign({ defaultData: data }, (_a = pageData === null || pageData === void 0 ? void 0 : pageData.data) === null || _a === void 0 ? void 0 : _a.sxpPageConf, { tagList: tagList, data: rtcList, resolver: RESOLVER })),
27
26
  React.createElement(Popup, null)));
28
27
  } })));
29
28
  };
@@ -10,6 +10,11 @@ interface IVideoWidgetProps {
10
10
  activeIndex?: number;
11
11
  videoPostConfig?: postConfigType;
12
12
  videoPlayIcon?: string;
13
+ loopPlay: any;
14
+ swiperRef?: any;
13
15
  }
14
- declare const _default: React.NamedExoticComponent<IVideoWidgetProps>;
16
+ export interface IVideoWidgetRef {
17
+ setLoopPlay: (v: boolean) => void;
18
+ }
19
+ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<IVideoWidgetProps & React.RefAttributes<IVideoWidgetRef>>>;
15
20
  export default _default;
@@ -1,15 +1,15 @@
1
1
  import { __awaiter } from "tslib";
2
- import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
2
+ import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
3
3
  import { useSwiperSlide } from 'swiper/react';
4
4
  import { useIconLink } from '../useIconLink';
5
5
  import FormatImage from '../FormatImage';
6
- import { useSxpDataSource } from '../../../../core/hooks';
7
- import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../../../../core/utils/event';
8
6
  import loading_gif from './loading.gif';
9
7
  import { mountVideoPlayerAtNode } from './VideoPlayer';
10
- const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon }) => {
8
+ import { useSxpDataSource } from '../../../../core/hooks';
9
+ import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../../../../core/utils/event';
10
+ const VideoWidget = forwardRef(({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon, loopPlay, swiperRef }, ref) => {
11
11
  const [isPauseVideo, setIsPauseVideo] = useState(false);
12
- const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport } = useSxpDataSource();
12
+ const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport, isDiyH5 } = useSxpDataSource();
13
13
  const videoStartTime = useRef(0);
14
14
  const [isLoadFinish, setIsLoadFinish] = useState(false);
15
15
  const { isActive } = useSwiperSlide();
@@ -23,6 +23,18 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
23
23
  const initTimeRef = useRef();
24
24
  const loadedTimeRef = useRef();
25
25
  const isFirstPlayRef = useRef(true);
26
+ const loopPlayRef = useRef(loopPlay);
27
+ const scene = rec.video.scene;
28
+ useImperativeHandle(ref, () => {
29
+ return {
30
+ setLoopPlay(v) {
31
+ loopPlayRef.current = v;
32
+ }
33
+ };
34
+ });
35
+ useEffect(() => {
36
+ loopPlayRef.current = loopPlay;
37
+ }, [loopPlay]);
26
38
  const blur = useMemo(() => {
27
39
  return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
28
40
  }, [videoPostConfig]);
@@ -110,12 +122,15 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
110
122
  const handleLoadedmetadata = useCallback(() => {
111
123
  if (!videoRef.current)
112
124
  return;
125
+ if (isDiyH5) {
126
+ videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
127
+ }
113
128
  loadedTimeRef.current = new Date();
114
129
  handleStartPlay();
115
130
  handLoadeddata();
116
131
  }, [videoRef.current, handLoadeddata, handleStartPlay]);
117
132
  const handleClickVideo = useCallback((type) => () => {
118
- var _a, _b, _c, _d, _e;
133
+ var _a, _b, _c, _d, _e, _f;
119
134
  if (!videoRef.current)
120
135
  return;
121
136
  if (!isLoadFinish)
@@ -136,10 +151,13 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
136
151
  break;
137
152
  default:
138
153
  if (isPause) {
139
- (_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
154
+ if (isDiyH5 && Math.round((_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.currentTime) >= (scene === null || scene === void 0 ? void 0 : scene.endTime)) {
155
+ videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
156
+ }
157
+ (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
140
158
  }
141
159
  else {
142
- (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
160
+ (_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.pause();
143
161
  }
144
162
  setIsPauseVideo(!isPause);
145
163
  break;
@@ -176,8 +194,27 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
176
194
  const handleWaiting = useCallback(() => {
177
195
  setWaiting(true);
178
196
  }, []);
197
+ const handleTimeUpload = () => {
198
+ if (!videoRef.current || !isDiyH5)
199
+ return;
200
+ setTimeout(() => {
201
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
202
+ if (Math.round((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) >= ((_b = scene === null || scene === void 0 ? void 0 : scene.endTime) !== null && _b !== void 0 ? _b : 0)) {
203
+ (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
204
+ if (!loopPlayRef.current)
205
+ return;
206
+ if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
207
+ (_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.slideTo(0);
208
+ }
209
+ else {
210
+ const i = (_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.activeIndex;
211
+ (_j = (_h = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _h === void 0 ? void 0 : _h.swiper) === null || _j === void 0 ? void 0 : _j.slideTo(i + 1);
212
+ }
213
+ }
214
+ });
215
+ };
179
216
  useEffect(() => {
180
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
217
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
181
218
  if (!isActive)
182
219
  return;
183
220
  const videoSrc = rec === null || rec === void 0 ? void 0 : rec.video.url;
@@ -198,6 +235,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
198
235
  hls === null || hls === void 0 ? void 0 : hls.attachMedia(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current);
199
236
  hls === null || hls === void 0 ? void 0 : hls.on(Hls.Events.MANIFEST_PARSED, function () {
200
237
  var _a;
238
+ videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
201
239
  (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
202
240
  });
203
241
  }
@@ -214,8 +252,9 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
214
252
  (_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.addEventListener('ended', handlePlay);
215
253
  (_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.addEventListener('canplay', handlePlay);
216
254
  (_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.addEventListener('waiting', handleWaiting);
255
+ (_l = videoRef.current) === null || _l === void 0 ? void 0 : _l.addEventListener('timeupdate', handleTimeUpload);
217
256
  return () => {
218
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
257
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
219
258
  const isPause = (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
220
259
  if (!isPause)
221
260
  handlePause();
@@ -230,6 +269,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
230
269
  (_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('ended', handlePlay);
231
270
  (_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.removeEventListener('canplay', handlePlay);
232
271
  (_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.removeEventListener('waiting', handleWaiting);
272
+ (_l = videoRef.current) === null || _l === void 0 ? void 0 : _l.removeEventListener('timeupdate', handleTimeUpload);
233
273
  };
234
274
  }, [isActive]);
235
275
  useEffect(() => {
@@ -347,6 +387,6 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
347
387
  React.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
348
388
  renderPoster,
349
389
  renderLoading,
350
- isPauseVideo && React.createElement(FormatImage, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })))));
351
- };
390
+ isPauseVideo && (React.createElement(FormatImage, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' }))))));
391
+ });
352
392
  export default memo(VideoWidget);
@@ -41,7 +41,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
41
41
  const [isReload, setIsReload] = useState(new Date().getTime());
42
42
  const skipLinkRef = useRef(false);
43
43
  const [pageNum, setPageNum] = useState(2);
44
- const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink, isShowConsent, selectTag, isPreview, isEditor, cacheRtcList, setRtcList, cacheActiveIndex, rtcList, isNoMoreData, channel, refreshFeSession } = useSxpDataSource();
44
+ const videoWidgetRef = useRef(null);
45
+ const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink, isShowConsent, selectTag, isPreview, isEditor, cacheRtcList, setRtcList, cacheActiveIndex, rtcList, isNoMoreData, channel, refreshFeSession, isDiyH5 } = useSxpDataSource();
45
46
  const { backMainFeed, productView, jumpToWeb } = useEventReport();
46
47
  const isShowFingerTip = useMemo(() => {
47
48
  return data.length > 0 && !loading && (getFeUserState() || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enableSwiperTip));
@@ -176,6 +177,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
176
177
  refreshFeSession
177
178
  ]);
178
179
  const handleSessionExpire = useCallback(debounce(() => {
180
+ var _a;
181
+ (_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
179
182
  refreshFeSession === null || refreshFeSession === void 0 ? void 0 : refreshFeSession(false, handleSessionCompleted);
180
183
  }, 1000), [handleSessionCompleted, refreshFeSession]);
181
184
  useEffect(() => {
@@ -250,7 +253,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
250
253
  return (React.createElement(MultiPosts, Object.assign({ recData: data === null || data === void 0 ? void 0 : data[1] }, (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props, (_f = (_e = (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.item) === null || _f === void 0 ? void 0 : _f.event)));
251
254
  }
252
255
  if ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.url) {
253
- return (React.createElement(VideoWidget, { key: isReload, 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 }));
256
+ return (React.createElement(VideoWidget, Object.assign({ key: isReload }, (activeIndex === index && { ref: videoWidgetRef }), { 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, loopPlay: true, swiperRef: swiperRef })));
254
257
  }
255
258
  if ((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.imgUrls) {
256
259
  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, onViewImageEndEvent: handleViewImageStartEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
@@ -594,7 +597,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
594
597
  if (openHashtag)
595
598
  return;
596
599
  handleScrollEvent(swiper);
597
- if (waterFallData || isEditor)
600
+ if (waterFallData || isEditor || isDiyH5)
598
601
  return;
599
602
  if ((swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex) + 1 >= (data === null || data === void 0 ? void 0 : data.length)) {
600
603
  if (!isLoadMore) {
@@ -92,6 +92,7 @@ export interface ISxpDataSourceContext {
92
92
  refreshFeSession?: (enableReSid?: boolean, event?: (fk: string) => void) => void;
93
93
  getAccount?: () => Promise<any>;
94
94
  accountSonsent?: (v: boolean) => Promise<boolean>;
95
+ isDiyH5?: boolean;
95
96
  }
96
97
  export declare const SxpDataSourceContext: React.Context<ISxpDataSourceContext>;
97
98
  export interface SxpDataSourceProviderProps {
@@ -625,7 +625,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
625
625
  multiPostTimeRef,
626
626
  refreshFeSession,
627
627
  getAccount,
628
- accountSonsent
628
+ accountSonsent,
629
+ isDiyH5
629
630
  } }, isShowConsent ? (React.createElement(Consent, Object.assign({}, (_e = (_d = (_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.consent) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.item) === null || _e === void 0 ? void 0 : _e.props))) : (render({
630
631
  rtcList,
631
632
  mutateLike: bffMutateLike,
@@ -13,184 +13,6 @@ const PictureGroup_1 = tslib_1.__importDefault(require("./PictureGroup"));
13
13
  const VideoWidget_1 = tslib_1.__importDefault(require("./VideoWidget"));
14
14
  const _materials_ = tslib_1.__importStar(require("../../../materials"));
15
15
  require("../SxpPageRender/index.less");
16
- const recData = {
17
- position: 0,
18
- isCollected: false,
19
- product: null,
20
- video: {
21
- appId: null,
22
- itemId: 'VIDEOSsRgI1695278974368',
23
- title: '8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片8张尺寸不一样的图片',
24
- enTitle: null,
25
- icon: null,
26
- cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20231017/fsJFWmW1dGyW7XmDspbJPTn5esL3U1697538777398.png',
27
- link: null,
28
- linkTitle: null,
29
- linkType: null,
30
- menuCategoryId: null,
31
- remark: null,
32
- tags: [
33
- 'Gift-Giving',
34
- 'Daily Wear',
35
- 'Business Formal',
36
- 'Sports/Casual',
37
- 'Anniversary Gifts',
38
- 'Wedding/Engagement',
39
- 'Formal Dinner/Party'
40
- ],
41
- traceInfo: ':VIDEO:VIDEOSsRgI1695278974368:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
42
- value: 385,
43
- weight: null,
44
- bindCta: null,
45
- bindProduct: null,
46
- bindProducts: [
47
- {
48
- appId: 'wx448578f8851f3dce',
49
- itemId: 'test02178888',
50
- title: 'christian dior小包包 新CDN',
51
- enTitle: null,
52
- icon: null,
53
- cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs2jqiurjftpoaba67iiwr9jt5sc31726213277754.avif',
54
- link: '/pages/details/index?spu_id=1702262707659534338',
55
- linkTitle: '',
56
- linkType: 'MP',
57
- menuCategoryId: null,
58
- remark: null,
59
- tags: [],
60
- traceInfo: ':PRODUCT:test02178888:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
61
- value: null,
62
- weight: null,
63
- bindCta: {
64
- appId: 'wx448578f8851f3dce',
65
- itemId: 'CTA3KofE1716186622249',
66
- title: 'SHOP NOW 立即购买',
67
- enTitle: 'BUY NOW立即购买,选择你所喜爱的;',
68
- icon: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240520/fssfxbmiwghixmgblz9uriwennd2r1716186615574.avif',
69
- cover: null,
70
- link: '/pages/details/index?spu_id=1702262707659534338',
71
- linkTitle: '',
72
- linkType: 'MP',
73
- menuCategoryId: '64b60b202caf0e1c1ce1e17d',
74
- remark: null,
75
- tags: [
76
- "Woman's Perfumes",
77
- 'Plates & Bowls',
78
- 'Glasses',
79
- 'Multicolor',
80
- 'Carafes',
81
- 'Tea & Coffee',
82
- 'Green',
83
- 'Grey',
84
- 'Cutlery'
85
- ],
86
- traceInfo: ':CTA:CTA3KofE1716186622249:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
87
- value: null,
88
- weight: null
89
- },
90
- collection: 'Ricco',
91
- currency: 'INR-₹',
92
- homePage: [
93
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs2jqiurjftpoaba67iiwr9jt5sc31726213277754.avif',
94
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fsr9ttuzuljs85smqi6lsidovnyoy1726213285994.avif',
95
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fsknmfhx2lxukxews05guwwxr8rju1726213281108.avif',
96
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20240913/fs0acnua4f1clamdpwdsrh0v5dgc61726213289247.avif'
97
- ],
98
- info: 'test',
99
- price: 53200,
100
- shippingInfo: null,
101
- taxInfo: null
102
- },
103
- {
104
- appId: null,
105
- itemId: '113J631A0684_C520',
106
- title: 'Sweatshirt à capuche Dior Oblique, coupe relax',
107
- enTitle: null,
108
- icon: null,
109
- cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fsaf0xq8vx8gkkl30y1h1swpinmbt1731661943891.avif',
110
- link: 'https://www.dior.com/fr_fr/fashion/products/113J631A0684_C520',
111
- linkTitle: null,
112
- linkType: 'WEB',
113
- menuCategoryId: null,
114
- remark: null,
115
- tags: [],
116
- traceInfo: ':PRODUCT:113J631A0684_C520:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
117
- value: null,
118
- weight: null,
119
- bindCta: {
120
- appId: null,
121
- itemId: 'CTAAfaKf1730796437032',
122
- title: 'test',
123
- enTitle: 'test',
124
- icon: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241105/fsjblxoud2tmehpiqqomh0oktwqrd1730796431496.avif',
125
- cover: null,
126
- link: null,
127
- linkTitle: null,
128
- linkType: null,
129
- menuCategoryId: '64b60b202caf0e1c1ce1e17d',
130
- remark: '',
131
- tags: [],
132
- traceInfo: ':CTA:CTAAfaKf1730796437032:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
133
- value: null,
134
- weight: null
135
- },
136
- collection: 'Jacquard de coton éponge bleu',
137
- currency: 'EUR-€',
138
- homePage: [
139
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fsaf0xq8vx8gkkl30y1h1swpinmbt1731661943891.avif',
140
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fszxkdcjfjql2oiy90ffbal5tsfd81731661964913.avif',
141
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20241115/fs1jhd9jwxvfqmrbjwy5abfzb0fde1731661994996.avif'
142
- ],
143
- info: "Le sweatshirt à capuche bleu met à l'honneur l'emblématique motif dior oblique. Confectionné en jacquard de coton éponge bleu, il présente une coupe relax très confortable. Doté de poches latérales fendues, ce sweatshirt à capuche s'associera à tous vos jeans ou pantalons de survêtement pour un look décontracté.. Sweatshirt à capuche dior oblique, coupe relax Jacquard de coton éponge bleu",
144
- price: 1800,
145
- shippingInfo: null,
146
- taxInfo: null
147
- },
148
- {
149
- appId: null,
150
- itemId: 'S5573CRIW_M928',
151
- title: 'Mini Dior Book Tote',
152
- enTitle: null,
153
- icon: null,
154
- cover: 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsvewk9etrawxrzznmvvewgt1bctu1739415576729.avif',
155
- link: 'https://www.dior.com/en_gb/fashion/products/S5573CRIW_M928',
156
- linkTitle: null,
157
- linkType: 'WEB',
158
- menuCategoryId: null,
159
- remark: null,
160
- tags: ['ダイヤモンド'],
161
- traceInfo: ':PRODUCT:S5573CRIW_M928:regular:1:VPRHSkRS1697701789894:main::0:EXPMW20250305155940:COMBTh20250305160047:',
162
- value: null,
163
- weight: null,
164
- bindCta: null,
165
- collection: null,
166
- currency: 'GBP-£',
167
- homePage: [
168
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsvewk9etrawxrzznmvvewgt1bctu1739415576729.avif',
169
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsngtlvhid7xwt5if0viw7vqanm831739415582147.avif',
170
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fs4hotdvyzjtnqb9vszlynuzplddc1739415586910.avif',
171
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fswffx9kwexf3z3vcnxisut1qxtez1739415591629.avif',
172
- 'https://graff-cdn.chatlabs.net/dev/img/8922b5b8-a954-4a61-9ffc-80edebdf02b4/sxp-portal/20250213/fsbfsi7tttx1hnzldoiw7eoea7fvh1739415597388.avif'
173
- ],
174
- info: "The Dior Book Tote is a House classic and original design by Maria Grazia Chiuri, Creative Director of Christian Dior. The style is fully embroidered with the House's hallmark blue Dior Oblique motif and showcases the Christian Dior Paris signature. Exemplifying House savoir-faire, the miniature style features an adjustable and removable strap that allows it to be carried by hand, worn over the shoulder or crossbody.",
175
- price: 1950,
176
- shippingInfo: null,
177
- taxInfo: null
178
- }
179
- ],
180
- url: null,
181
- blockCta: 1,
182
- blockProduct: 1,
183
- hashTags: [
184
- 'Sports/Casual',
185
- 'Formal Dinner/Party',
186
- 'Business Formal',
187
- 'Wedding/Engagement',
188
- 'Gift-Giving',
189
- 'Daily Wear',
190
- 'Anniversary Gifts'
191
- ]
192
- }
193
- };
194
16
  const RESOLVER = {};
195
17
  Object.values(_materials_).forEach((v) => {
196
18
  RESOLVER[v.extend.type] = v;
@@ -4,7 +4,6 @@ const tslib_1 = require("tslib");
4
4
  const react_1 = tslib_1.__importStar(require("react"));
5
5
  const SxpPageRender_1 = tslib_1.__importDefault(require("../SxpPageRender"));
6
6
  const Popup_1 = tslib_1.__importDefault(require("../SxpPageRender/Popup"));
7
- const DiyStoryPreview_1 = tslib_1.__importDefault(require("../DiyStoryPreview"));
8
7
  const _materials_ = tslib_1.__importStar(require("../../../materials"));
9
8
  const core_1 = require("../../../core");
10
9
  const SxpDataSourceProvider_1 = tslib_1.__importDefault(require("../../../core/context/SxpDataSourceProvider"));
@@ -24,9 +23,9 @@ const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, l
24
23
  const [channel, setChannel] = (0, react_1.useState)();
25
24
  return (react_1.default.createElement(core_1.EditorCore, { resolver: RESOLVER, enableDataSource: false, schema: _schema, utmVal: channel || utmVal },
26
25
  react_1.default.createElement(SxpDataSourceProvider_1.default, { utmVal: utmVal, dataSources: data === null || data === void 0 ? void 0 : data.data_sources, sxpParameter: data === null || data === void 0 ? void 0 : data.sxp_parameter, maxSize: (_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: data, dataList: dataList, isDiyH5: isDiyH5, onUpdateSchema: (d) => setSchema(d), onUpdateChannel: (d) => setChannel(d), render: ({ rtcList, tagList, pageData }) => {
27
- var _a, _b;
26
+ var _a;
28
27
  return (react_1.default.createElement(react_1.default.Fragment, null,
29
- isDiyH5 ? (react_1.default.createElement(DiyStoryPreview_1.default, Object.assign({ defaultData: data }, (_a = pageData === null || pageData === void 0 ? void 0 : pageData.data) === null || _a === void 0 ? void 0 : _a.sxpPageConf, { tagList: tagList, data: rtcList, resolver: RESOLVER, containerHeight: window === null || window === void 0 ? void 0 : window.innerHeight, pointerEvents: 'all', loopPlay: true }))) : (react_1.default.createElement(SxpPageRender_1.default, Object.assign({ defaultData: data }, (_b = pageData === null || pageData === void 0 ? void 0 : pageData.data) === null || _b === void 0 ? void 0 : _b.sxpPageConf, { tagList: tagList, data: rtcList, resolver: RESOLVER }))),
28
+ react_1.default.createElement(SxpPageRender_1.default, Object.assign({ defaultData: data }, (_a = pageData === null || pageData === void 0 ? void 0 : pageData.data) === null || _a === void 0 ? void 0 : _a.sxpPageConf, { tagList: tagList, data: rtcList, resolver: RESOLVER })),
30
29
  react_1.default.createElement(Popup_1.default, null)));
31
30
  } })));
32
31
  };
@@ -10,6 +10,11 @@ interface IVideoWidgetProps {
10
10
  activeIndex?: number;
11
11
  videoPostConfig?: postConfigType;
12
12
  videoPlayIcon?: string;
13
+ loopPlay: any;
14
+ swiperRef?: any;
13
15
  }
14
- declare const _default: React.NamedExoticComponent<IVideoWidgetProps>;
16
+ export interface IVideoWidgetRef {
17
+ setLoopPlay: (v: boolean) => void;
18
+ }
19
+ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<IVideoWidgetProps & React.RefAttributes<IVideoWidgetRef>>>;
15
20
  export default _default;