pb-sxp-ui 1.20.6 → 1.20.8
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/index.cjs +291 -189
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +291 -189
- package/dist/index.js.map +1 -1
- package/dist/index.min.cjs +7 -7
- package/dist/index.min.cjs.map +1 -1
- package/dist/index.min.js +7 -7
- package/dist/index.min.js.map +1 -1
- package/dist/pb-ui.js +291 -189
- package/dist/pb-ui.js.map +1 -1
- package/dist/pb-ui.min.js +7 -7
- package/dist/pb-ui.min.js.map +1 -1
- package/es/core/components/DiyPortalPreview/VideoWidget.js +10 -8
- package/es/core/components/SxpPageRender/LikeButton/index.js +20 -18
- package/es/core/components/SxpPageRender/PictureGroup/index.d.ts +5 -0
- package/es/core/components/SxpPageRender/PictureGroup/index.js +39 -13
- package/es/core/components/SxpPageRender/VideoWidget/index.js +33 -46
- package/es/core/components/SxpPageRender/WaterFall/index.js +4 -3
- package/es/core/components/SxpPageRender/index.js +56 -40
- package/es/core/context/SxpDataSourceProvider.d.ts +5 -12
- package/es/core/context/SxpDataSourceProvider.js +124 -56
- package/es/core/hooks/useEventReport.js +6 -5
- package/lib/core/components/DiyPortalPreview/VideoWidget.js +10 -8
- package/lib/core/components/SxpPageRender/LikeButton/index.js +20 -18
- package/lib/core/components/SxpPageRender/PictureGroup/index.d.ts +5 -0
- package/lib/core/components/SxpPageRender/PictureGroup/index.js +38 -12
- package/lib/core/components/SxpPageRender/VideoWidget/index.js +33 -46
- package/lib/core/components/SxpPageRender/WaterFall/index.js +4 -3
- package/lib/core/components/SxpPageRender/index.js +56 -40
- package/lib/core/context/SxpDataSourceProvider.d.ts +5 -12
- package/lib/core/context/SxpDataSourceProvider.js +124 -56
- package/lib/core/hooks/useEventReport.js +6 -5
- package/package.json +1 -1
|
@@ -20,6 +20,7 @@ export const DEFAULT_TAG = 'FOR U';
|
|
|
20
20
|
const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent = true, maxSize, defaultSize, isPreview = false, sxpParameter, appDomain, hashTagSize, loadingImage, isOpenHashTag = false, enabledMetaConversionApi = false, consentHeight, consentWidth, isOpenConsent = false, isEditor = false, utmParameter, channelQueryList, data, dataList, isDiyH5, onUpdateSchema, onUpdateChannel }) => {
|
|
21
21
|
var _a, _b, _c, _d, _e;
|
|
22
22
|
const [rtcList, setRtcList] = useState([]);
|
|
23
|
+
const [firstRtcList, setFirstRtcList] = useState([]);
|
|
23
24
|
const [tagList, setTagList] = useState([]);
|
|
24
25
|
const [loading, setLoading] = useState(true);
|
|
25
26
|
const [curReqInfo, setCurReqInfo] = useState({ rtc: '', requestId: '' });
|
|
@@ -50,6 +51,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
|
50
51
|
const [chatlabsId, setChatlabsId] = useState();
|
|
51
52
|
const finalPageData = useMemo(() => pageData !== null && pageData !== void 0 ? pageData : data, [pageData, data]);
|
|
52
53
|
const pixelPvStatusRef = useRef(false);
|
|
54
|
+
const isDiyPage = useMemo(() => {
|
|
55
|
+
var _a, _b, _c;
|
|
56
|
+
return isDiyH5 && !((_c = (_b = (_a = finalPageData === null || finalPageData === void 0 ? void 0 : finalPageData.data) === null || _a === void 0 ? void 0 : _a.sxpPageConf) === null || _b === void 0 ? void 0 : _b.globalConfig) === null || _c === void 0 ? void 0 : _c.enablePreview);
|
|
57
|
+
}, [isDiyH5, finalPageData]);
|
|
53
58
|
useEffect(() => {
|
|
54
59
|
var _a, _b;
|
|
55
60
|
setGlobalConfig((_b = (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.sxpPageConf) === null || _b === void 0 ? void 0 : _b.globalConfig);
|
|
@@ -135,13 +140,16 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
|
135
140
|
return '';
|
|
136
141
|
}
|
|
137
142
|
const OptanonConsent = decodeURIComponent((_a = getCookie('OptanonConsent')) !== null && _a !== void 0 ? _a : '');
|
|
138
|
-
if ((
|
|
143
|
+
if ((window === null || window === void 0 ? void 0 : window.OnetrustActiveGroups) &&
|
|
144
|
+
((_b = window === null || window === void 0 ? void 0 : window.OnetrustActiveGroups) === null || _b === void 0 ? void 0 : _b.length) > 2 &&
|
|
145
|
+
!(window === null || window === void 0 ? void 0 : window.OnetrustActiveGroups.includes('4')) &&
|
|
146
|
+
isTargetingRejected(OptanonConsent)) {
|
|
139
147
|
return true;
|
|
140
148
|
}
|
|
141
149
|
return false;
|
|
142
150
|
};
|
|
143
151
|
const bffFetch = useCallback((path, options, isBota = true) => {
|
|
144
|
-
var _a;
|
|
152
|
+
var _a, _b;
|
|
145
153
|
if (!bffDataSource)
|
|
146
154
|
return;
|
|
147
155
|
const url = bffDataSource.url;
|
|
@@ -156,8 +164,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
|
156
164
|
const value = val.split('=')[1];
|
|
157
165
|
params[key] = value;
|
|
158
166
|
});
|
|
167
|
+
options.body = Object.assign(Object.assign({}, options.body), { productUserId: fakeUserId });
|
|
159
168
|
return window
|
|
160
|
-
.fetch(`${url}/api/${path}`, Object.assign({ headers: Object.assign({ 'Content-Type': 'application/json', 'x-user-id': fakeUserId }, bffDataSource.headers), method: options.method, body: options.type === 'beacon' && isBota
|
|
169
|
+
.fetch(`${url}/api/${path}`, Object.assign({ headers: Object.assign({ 'Content-Type': 'application/json', 'x-user-id': fakeUserId, 'tenant-id': (_b = bffDataSource === null || bffDataSource === void 0 ? void 0 : bffDataSource.headers) === null || _b === void 0 ? void 0 : _b['x-app-id'] }, bffDataSource.headers), method: options.method, body: options.type === 'beacon' && isBota
|
|
161
170
|
? JSON.stringify({
|
|
162
171
|
body: btoa(encodeURIComponent(JSON.stringify(Object.assign(Object.assign(Object.assign({}, options.body), bffDataSource.headers), { 'x-user-id': fakeUserId }))))
|
|
163
172
|
})
|
|
@@ -186,7 +195,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
|
186
195
|
const originalSrcDescriptor = Object.getOwnPropertyDescriptor(HTMLImageElement.prototype, 'src');
|
|
187
196
|
Object.defineProperty(img, 'src', {
|
|
188
197
|
set(value) {
|
|
189
|
-
if (getTargetingCookie() &&
|
|
198
|
+
if (getTargetingCookie() &&
|
|
199
|
+
(value.includes('https://www.facebook.com/privacy_sandbox/pixel/register/trigger/') ||
|
|
200
|
+
value.includes('https://www.facebook.com/tr'))) {
|
|
190
201
|
return;
|
|
191
202
|
}
|
|
192
203
|
originalSrcDescriptor.set.call(this, value);
|
|
@@ -198,7 +209,6 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
|
198
209
|
eventSource: 'Meta Pixel'
|
|
199
210
|
});
|
|
200
211
|
}
|
|
201
|
-
;
|
|
202
212
|
},
|
|
203
213
|
get() {
|
|
204
214
|
return originalSrcDescriptor.get.call(this);
|
|
@@ -216,7 +226,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
|
216
226
|
const originalSendBeacon = navigatorWithBeacon.sendBeacon.bind(navigatorWithBeacon);
|
|
217
227
|
navigatorWithBeacon.sendBeacon = function (url, data) {
|
|
218
228
|
const urlString = url instanceof URL ? url.href : url.toString();
|
|
219
|
-
if (getTargetingCookie() &&
|
|
229
|
+
if (getTargetingCookie() &&
|
|
230
|
+
(urlString.includes('https://tr.snapchat.com/p') ||
|
|
231
|
+
urlString.includes('https://analytics.tiktok.com/api/v2/pixel'))) {
|
|
220
232
|
return true;
|
|
221
233
|
}
|
|
222
234
|
const success = originalSendBeacon(url, data);
|
|
@@ -292,18 +304,16 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
|
292
304
|
var _a;
|
|
293
305
|
let url;
|
|
294
306
|
try {
|
|
295
|
-
url = typeof input === 'string'
|
|
296
|
-
? input
|
|
297
|
-
: input instanceof URL
|
|
298
|
-
? input.href
|
|
299
|
-
: input.url;
|
|
307
|
+
url = typeof input === 'string' ? input : input instanceof URL ? input.href : input.url;
|
|
300
308
|
}
|
|
301
309
|
catch (error) {
|
|
302
310
|
console.error('解析请求URL失败:', error);
|
|
303
311
|
return _originalFetch.apply(this, arguments_1);
|
|
304
312
|
}
|
|
305
313
|
try {
|
|
306
|
-
if (getTargetingCookie() &&
|
|
314
|
+
if (getTargetingCookie() &&
|
|
315
|
+
(url.includes('https://www.google-analytics.com/g/collect') ||
|
|
316
|
+
url.includes('https://arms-retcode.aliyuncs.com/r.png'))) {
|
|
307
317
|
return Promise.resolve(new Response(''));
|
|
308
318
|
}
|
|
309
319
|
const response = _originalFetch.apply(this, arguments_1);
|
|
@@ -357,7 +367,12 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
|
357
367
|
};
|
|
358
368
|
XMLHttpRequest.prototype.send = function (body) {
|
|
359
369
|
var _a;
|
|
360
|
-
if (getTargetingCookie() &&
|
|
370
|
+
if (getTargetingCookie() &&
|
|
371
|
+
this._url &&
|
|
372
|
+
typeof this._url === 'string' &&
|
|
373
|
+
(this._url.includes('https://rumcollector.uptime.com') ||
|
|
374
|
+
this._url.includes('https://arms-retcode.aliyuncs.com/r.png') ||
|
|
375
|
+
this._url.includes('https://i.giesswein.com/nb-collector'))) {
|
|
361
376
|
return;
|
|
362
377
|
}
|
|
363
378
|
if (this._url && typeof this._url === 'string' && this._url.includes('https://i.giesswein.com/nb-collector')) {
|
|
@@ -409,8 +424,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
|
409
424
|
.catch((err) => Promise.reject(err));
|
|
410
425
|
}, [bffDataSource]);
|
|
411
426
|
const getRecommendVideos = useCallback((query) => __awaiter(void 0, void 0, void 0, function* () {
|
|
412
|
-
var _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
|
|
413
|
-
query = Object.assign(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 })), (
|
|
427
|
+
var _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
|
|
428
|
+
query = Object.assign(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 })), (isDiyPage && { type: 'story' }));
|
|
414
429
|
if (channel) {
|
|
415
430
|
query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(channel) });
|
|
416
431
|
}
|
|
@@ -423,9 +438,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
|
423
438
|
if (val)
|
|
424
439
|
query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(val) });
|
|
425
440
|
}
|
|
441
|
+
const isDiy = isDiyH5 && ((_o = (_m = (_l = finalPageData === null || finalPageData === void 0 ? void 0 : finalPageData.data) === null || _l === void 0 ? void 0 : _l.sxpPageConf) === null || _m === void 0 ? void 0 : _m.globalConfig) === null || _o === void 0 ? void 0 : _o.enablePreview);
|
|
426
442
|
if (isEditor) {
|
|
427
443
|
let pageNum = 1;
|
|
428
|
-
query = Object.assign(Object.assign(Object.assign({}, query), { directPage: true, level: 1 }), (!utmVal && channelQueryList && (channelQueryList === null || channelQueryList === void 0 ? void 0 : channelQueryList.length) > 0 && { channel: channelQueryList === null || channelQueryList === void 0 ? void 0 : channelQueryList[0] }));
|
|
444
|
+
query = Object.assign(Object.assign(Object.assign(Object.assign({}, query), { directPage: true, level: 1 }), (!utmVal && channelQueryList && (channelQueryList === null || channelQueryList === void 0 ? void 0 : channelQueryList.length) > 0 && { channel: channelQueryList === null || channelQueryList === void 0 ? void 0 : channelQueryList[0] })), (isDiy && { maxRecs: query === null || query === void 0 ? void 0 : query.maxSize }));
|
|
429
445
|
if (!(query === null || query === void 0 ? void 0 : query.channel) || isInit.current) {
|
|
430
446
|
return undefined;
|
|
431
447
|
}
|
|
@@ -433,19 +449,24 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
|
433
449
|
let list = [];
|
|
434
450
|
let result = null;
|
|
435
451
|
const recurveRecList = (query) => __awaiter(void 0, void 0, void 0, function* () {
|
|
436
|
-
var
|
|
452
|
+
var _y, _z, _0, _1, _2, _3;
|
|
437
453
|
query.pageNum = pageNum;
|
|
438
|
-
result =
|
|
454
|
+
result = isDiyH5
|
|
455
|
+
? yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v3/recommend/direct/page/view', { method: 'POST', body: query }))
|
|
456
|
+
: yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('recommend/direct_page', { method: 'POST', body: query }));
|
|
439
457
|
if (!(result === null || result === void 0 ? void 0 : result.success)) {
|
|
440
458
|
return undefined;
|
|
441
459
|
}
|
|
442
460
|
setLoading(false);
|
|
443
|
-
list = list.concat((
|
|
461
|
+
list = list.concat((_1 = (_0 = (_z = (_y = result === null || result === void 0 ? void 0 : result.data) === null || _y === void 0 ? void 0 : _y.recList) === null || _z === void 0 ? void 0 : _z.filter) === null || _0 === void 0 ? void 0 : _0.call(_z, (item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video))) !== null && _1 !== void 0 ? _1 : []);
|
|
444
462
|
if ((rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) === 0) {
|
|
445
463
|
setRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
|
446
464
|
setCacheRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
|
465
|
+
if (isDiyPage) {
|
|
466
|
+
setFirstRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
|
467
|
+
}
|
|
447
468
|
}
|
|
448
|
-
const isNotNullList = (
|
|
469
|
+
const isNotNullList = (_3 = (_2 = result === null || result === void 0 ? void 0 : result.data) === null || _2 === void 0 ? void 0 : _2.recList) === null || _3 === void 0 ? void 0 : _3.some((item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video));
|
|
449
470
|
if (isNotNullList) {
|
|
450
471
|
pageNum = pageNum + 1;
|
|
451
472
|
yield recurveRecList(query);
|
|
@@ -453,42 +474,61 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
|
453
474
|
});
|
|
454
475
|
yield recurveRecList(query);
|
|
455
476
|
if (!(query === null || query === void 0 ? void 0 : query.hashTag) && result)
|
|
456
|
-
setCurReqInfo({ rtc: (
|
|
477
|
+
setCurReqInfo({ rtc: (_p = result === null || result === void 0 ? void 0 : result.data) === null || _p === void 0 ? void 0 : _p.rtc, requestId: (_q = result === null || result === void 0 ? void 0 : result.data) === null || _q === void 0 ? void 0 : _q.requestId });
|
|
457
478
|
return Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list });
|
|
458
479
|
}
|
|
459
480
|
if (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) {
|
|
460
|
-
query = Object.assign(Object.assign({}, query), { directPage: true, level: 1, pageNum: (
|
|
481
|
+
query = Object.assign(Object.assign(Object.assign({}, query), { directPage: true, level: 1, pageNum: (_r = query === null || query === void 0 ? void 0 : query.pageNum) !== null && _r !== void 0 ? _r : 1 }), (isDiy && { maxRecs: query === null || query === void 0 ? void 0 : query.maxSize }));
|
|
461
482
|
}
|
|
462
|
-
const result =
|
|
463
|
-
method: 'POST',
|
|
464
|
-
|
|
465
|
-
|
|
483
|
+
const result = isDiy
|
|
484
|
+
? yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v3/recommend/direct/page/view', { method: 'POST', body: query }))
|
|
485
|
+
: yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/recommend/list', {
|
|
486
|
+
method: 'POST',
|
|
487
|
+
body: query
|
|
488
|
+
}));
|
|
466
489
|
if (!(result === null || result === void 0 ? void 0 : result.success)) {
|
|
467
490
|
return undefined;
|
|
468
491
|
}
|
|
469
492
|
if (!(query === null || query === void 0 ? void 0 : query.hashTag))
|
|
470
493
|
setCurReqInfo({ rtc: result.data.rtc, requestId: result.data.requestId });
|
|
471
494
|
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) && !isEditor) {
|
|
472
|
-
const isNotNullList = (
|
|
495
|
+
const isNotNullList = (_t = (_s = result === null || result === void 0 ? void 0 : result.data) === null || _s === void 0 ? void 0 : _s.recList) === null || _t === void 0 ? void 0 : _t.some((item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video));
|
|
473
496
|
if (!isNotNullList) {
|
|
474
497
|
setIsNoMoreData(true);
|
|
475
498
|
}
|
|
476
499
|
}
|
|
477
500
|
let list = [];
|
|
478
|
-
list = list.concat((
|
|
501
|
+
list = list.concat((_x = (_w = (_v = (_u = result === null || result === void 0 ? void 0 : result.data) === null || _u === void 0 ? void 0 : _u.recList) === null || _v === void 0 ? void 0 : _v.filter) === null || _w === void 0 ? void 0 : _w.call(_v, (item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video))) !== null && _x !== void 0 ? _x : []);
|
|
479
502
|
return Object.assign(Object.assign({}, result.data), { recList: list });
|
|
480
|
-
}), [
|
|
503
|
+
}), [
|
|
504
|
+
bffFetch,
|
|
505
|
+
utmVal,
|
|
506
|
+
maxSize,
|
|
507
|
+
defaultSize,
|
|
508
|
+
channelQueryList,
|
|
509
|
+
channel,
|
|
510
|
+
chatlabsId,
|
|
511
|
+
bffFetchAdmin,
|
|
512
|
+
isDiyPage,
|
|
513
|
+
finalPageData,
|
|
514
|
+
isDiyH5
|
|
515
|
+
]);
|
|
481
516
|
const loadVideos = useCallback((pageNum) => __awaiter(void 0, void 0, void 0, function* () {
|
|
482
|
-
var
|
|
517
|
+
var _4, _5, _6, _7;
|
|
483
518
|
if (rtcList.length <= 0) {
|
|
484
519
|
return;
|
|
485
520
|
}
|
|
521
|
+
if (isDiyPage && (firstRtcList === null || firstRtcList === void 0 ? void 0 : firstRtcList.length) > 0) {
|
|
522
|
+
setRtcList(rtcList.concat(firstRtcList));
|
|
523
|
+
setCacheRtcList(cacheRtcList.concat(firstRtcList));
|
|
524
|
+
return;
|
|
525
|
+
}
|
|
486
526
|
const lastItem = rtcList === null || rtcList === void 0 ? void 0 : rtcList[(rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) - 1];
|
|
487
|
-
const data = yield getRecommendVideos(Object.assign(Object.assign(Object.assign(Object.assign({ hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag }, (((
|
|
527
|
+
const data = yield getRecommendVideos(Object.assign(Object.assign(Object.assign(Object.assign({ hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag }, (((_4 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _4 === void 0 ? void 0 : _4.itemId) && { productFilter: [(_5 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _5 === void 0 ? void 0 : _5.itemId] })), (((_6 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _6 === void 0 ? void 0 : _6.itemId) && { contentFilter: [(_7 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _7 === void 0 ? void 0 : _7.itemId] })), { themeTag: themeTag.current }), ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) && !isEditor && { pageNum })));
|
|
488
528
|
setRtcList(rtcList.concat(getFilterRecList(data)));
|
|
489
529
|
setCacheRtcList(cacheRtcList.concat(getFilterRecList(data)));
|
|
490
530
|
return data;
|
|
491
|
-
}), [getRecommendVideos, rtcList, waterFallData, cacheRtcList]);
|
|
531
|
+
}), [getRecommendVideos, rtcList, waterFallData, cacheRtcList, isDiyPage, firstRtcList]);
|
|
492
532
|
const refreshFeSession = useCallback((enableReSid, event) => {
|
|
493
533
|
var _a, _b, _c, _d, _e;
|
|
494
534
|
let expire = false;
|
|
@@ -516,7 +556,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
|
516
556
|
return;
|
|
517
557
|
}
|
|
518
558
|
if (!userInfo) {
|
|
519
|
-
userInfo = {
|
|
559
|
+
userInfo = {
|
|
560
|
+
productUserId: fakeUserId
|
|
561
|
+
};
|
|
520
562
|
}
|
|
521
563
|
const sessionID = storeAndLoadFeSessionId();
|
|
522
564
|
const params = {};
|
|
@@ -549,7 +591,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
|
549
591
|
layoutVariantId,
|
|
550
592
|
globalConfig,
|
|
551
593
|
playbookType,
|
|
552
|
-
bffDataSource
|
|
594
|
+
bffDataSource,
|
|
595
|
+
fakeUserId
|
|
553
596
|
]);
|
|
554
597
|
const getEventParamsByJson = useCallback((_a) => {
|
|
555
598
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
|
|
@@ -566,26 +609,40 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
|
566
609
|
time: Math.floor(Date.now() / 1000)
|
|
567
610
|
};
|
|
568
611
|
let customData = Object.assign({ content_ids: [(_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.itemId, ...((_f = product === null || product === void 0 ? void 0 : product.map((item) => item === null || item === void 0 ? void 0 : item.itemId)) !== null && _f !== void 0 ? _f : [])], content_type: contentType, content_name: (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.title, total_posts: rtcList === null || rtcList === void 0 ? void 0 : rtcList.length, position, currency: (_h = product === null || product === void 0 ? void 0 : product[0]) === null || _h === void 0 ? void 0 : _h.currency, contents: (_j = product === null || product === void 0 ? void 0 : product.map((item) => ({
|
|
569
|
-
|
|
612
|
+
id: item === null || item === void 0 ? void 0 : item.itemId,
|
|
570
613
|
item_price: item === null || item === void 0 ? void 0 : item.price
|
|
571
614
|
}))) !== null && _j !== void 0 ? _j : [], image_urls: (_l = (_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.imgUrls) !== null && _l !== void 0 ? _l : [], video_urls: (_m = rec === null || rec === void 0 ? void 0 : rec.video) === null || _m === void 0 ? void 0 : _m.url, headline: getUrlParamByKey('headline'), scene: getUrlParamByKey('scene'), campaign_id: getUrlParamByKey('campaign_id'), ad_id: getUrlParamByKey('ad_id'), utm_source: getUrlParamByKey('utm_source'), utm_medium: getUrlParamByKey('utm_medium'), utm_campaign: getUrlParamByKey('utm_campaign'), utm_content: getUrlParamByKey('utm_content') }, props);
|
|
572
|
-
if (!((_o = rec === null || rec === void 0 ? void 0 : rec.video) === null || _o === void 0 ? void 0 : _o.url) &&
|
|
615
|
+
if (!((_o = rec === null || rec === void 0 ? void 0 : rec.video) === null || _o === void 0 ? void 0 : _o.url) &&
|
|
616
|
+
!((_q = (_p = rec === null || rec === void 0 ? void 0 : rec.video) === null || _p === void 0 ? void 0 : _p.imgUrls) === null || _q === void 0 ? void 0 : _q.length) &&
|
|
617
|
+
(rec === null || rec === void 0 ? void 0 : rec.product) &&
|
|
618
|
+
Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) &&
|
|
619
|
+
((_r = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _r === void 0 ? void 0 : _r.length) > 0) {
|
|
573
620
|
const product = rec === null || rec === void 0 ? void 0 : rec.product;
|
|
574
621
|
const productCustomData = {
|
|
575
622
|
content_ids: [product === null || product === void 0 ? void 0 : product.itemId],
|
|
576
623
|
content_type: 'product',
|
|
577
624
|
content_name: '',
|
|
578
|
-
contents: [
|
|
625
|
+
contents: [
|
|
626
|
+
{
|
|
579
627
|
id: product === null || product === void 0 ? void 0 : product.itemId,
|
|
580
628
|
item_price: product === null || product === void 0 ? void 0 : product.price
|
|
581
|
-
}
|
|
629
|
+
}
|
|
630
|
+
],
|
|
582
631
|
image_urls: (_s = product.homePage) !== null && _s !== void 0 ? _s : []
|
|
583
632
|
};
|
|
584
633
|
customData = Object.assign(Object.assign({}, customData), productCustomData);
|
|
585
634
|
}
|
|
586
635
|
if (eventName === 'ContentSwipe' || eventName === 'Engagement' || eventName === 'ExitFeed') {
|
|
587
|
-
const deleteKeys = [
|
|
588
|
-
|
|
636
|
+
const deleteKeys = [
|
|
637
|
+
'content_ids',
|
|
638
|
+
'content_category',
|
|
639
|
+
'currency',
|
|
640
|
+
'contents',
|
|
641
|
+
'image_urls',
|
|
642
|
+
'video_urls',
|
|
643
|
+
'prompt'
|
|
644
|
+
];
|
|
645
|
+
deleteKeys.forEach((key) => {
|
|
589
646
|
if (customData === null || customData === void 0 ? void 0 : customData[key])
|
|
590
647
|
delete customData[key];
|
|
591
648
|
});
|
|
@@ -691,7 +748,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
|
691
748
|
if ((snapchatPixelEventParamsJson === null || snapchatPixelEventParamsJson === void 0 ? void 0 : snapchatPixelEventParamsJson.event_name) && typeof (window === null || window === void 0 ? void 0 : window.snaptr) === 'function') {
|
|
692
749
|
window === null || window === void 0 ? void 0 : window.snaptr('track', snapchatPixelEventParamsJson === null || snapchatPixelEventParamsJson === void 0 ? void 0 : snapchatPixelEventParamsJson.event_name, getEventParamsByJson(Object.assign({ json: snapchatPixelEventParamsJson, eventName }, props)));
|
|
693
750
|
}
|
|
694
|
-
if (eventName === 'PageView' &&
|
|
751
|
+
if (eventName === 'PageView' &&
|
|
752
|
+
typeof (window === null || window === void 0 ? void 0 : window.Northbeam) === 'object' &&
|
|
753
|
+
typeof ((_g = window === null || window === void 0 ? void 0 : window.Northbeam) === null || _g === void 0 ? void 0 : _g.trackPageView) === 'function') {
|
|
695
754
|
(_h = window === null || window === void 0 ? void 0 : window.Northbeam) === null || _h === void 0 ? void 0 : _h.trackPageView();
|
|
696
755
|
}
|
|
697
756
|
const converApiEventParamsJson = (_j = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.converApi) === null || _j === void 0 ? void 0 : _j[eventName];
|
|
@@ -713,37 +772,39 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
|
713
772
|
}
|
|
714
773
|
}, [bffFetch, enableReportEvent, enabledMetaConversionApi, globalConfig, bffDataSource, getEventParamsByJson]);
|
|
715
774
|
const bffMutateLike = useCallback((body) => __awaiter(void 0, void 0, void 0, function* () {
|
|
775
|
+
body = Object.assign(Object.assign({}, body), { productUserId: fakeUserId });
|
|
716
776
|
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/recommend/like', { method: 'POST', body }));
|
|
717
777
|
return res === null || res === void 0 ? void 0 : res.success;
|
|
718
|
-
}), [bffFetch]);
|
|
778
|
+
}), [bffFetch, fakeUserId]);
|
|
719
779
|
const bffMutateUnlike = useCallback((body) => __awaiter(void 0, void 0, void 0, function* () {
|
|
780
|
+
body = Object.assign(Object.assign({}, body), { productUserId: fakeUserId });
|
|
720
781
|
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/recommend/unlike', { method: 'POST', body }));
|
|
721
782
|
return res === null || res === void 0 ? void 0 : res.success;
|
|
722
|
-
}), [bffFetch]);
|
|
783
|
+
}), [bffFetch, fakeUserId]);
|
|
723
784
|
const bffSubmitForm = useCallback((body) => __awaiter(void 0, void 0, void 0, function* () {
|
|
724
785
|
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/customform', { method: 'POST', body }));
|
|
725
786
|
return res === null || res === void 0 ? void 0 : res.success;
|
|
726
787
|
}), [bffFetch]);
|
|
727
788
|
const bffGetTagList = useCallback((data) => __awaiter(void 0, void 0, void 0, function* () {
|
|
728
|
-
var
|
|
729
|
-
const isShowTag = !!((
|
|
789
|
+
var _8, _9, _10, _11, _12, _13, _14, _15;
|
|
790
|
+
const isShowTag = !!((_10 = (_9 = (_8 = data === null || data === void 0 ? void 0 : data.data) === null || _8 === void 0 ? void 0 : _8.sxpPageConf) === null || _9 === void 0 ? void 0 : _9.globalConfig) === null || _10 === void 0 ? void 0 : _10.isShowTag);
|
|
730
791
|
if (!utmVal || !isShowTag)
|
|
731
792
|
return;
|
|
732
793
|
try {
|
|
733
|
-
const val = (
|
|
794
|
+
const val = (_13 = (_12 = (_11 = splitUrlParams(utmVal)) === null || _11 === void 0 ? void 0 : _11.filter((val) => {
|
|
734
795
|
var _a, _b;
|
|
735
796
|
const key = val.split('=')[0];
|
|
736
797
|
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);
|
|
737
|
-
})) === null ||
|
|
798
|
+
})) === null || _12 === void 0 ? void 0 : _12.join('&')) !== null && _13 !== void 0 ? _13 : '';
|
|
738
799
|
const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/tag/list', { method: 'GET', query: { channel: decodeURIComponent(val) } }));
|
|
739
|
-
setTagList((
|
|
800
|
+
setTagList((_15 = (_14 = result === null || result === void 0 ? void 0 : result.data) === null || _14 === void 0 ? void 0 : _14.tags) !== null && _15 !== void 0 ? _15 : []);
|
|
740
801
|
}
|
|
741
802
|
catch (e) {
|
|
742
803
|
console.log('e', e);
|
|
743
804
|
}
|
|
744
805
|
}), [bffFetch, utmVal]);
|
|
745
806
|
const ctaEvent = useCallback((eventInfo, rec, product, position, ctaActionType, targetUrl, contentType) => {
|
|
746
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11;
|
|
807
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14;
|
|
747
808
|
const cta = product === null || product === void 0 ? void 0 : product.bindCta;
|
|
748
809
|
const isProd = ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProduct) || (((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.bindProducts) && ((_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProducts) === null || _d === void 0 ? void 0 : _d.length) > 0);
|
|
749
810
|
let fromKName = '';
|
|
@@ -761,7 +822,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
|
761
822
|
}
|
|
762
823
|
const contentTags = (_p = (_m = (_h = product === null || product === void 0 ? void 0 : product.tags) !== null && _h !== void 0 ? _h : (_l = (_k = (_j = rec === null || rec === void 0 ? void 0 : rec.video) === null || _j === void 0 ? void 0 : _j.bindProducts) === null || _k === void 0 ? void 0 : _k[0]) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : (_o = rec === null || rec === void 0 ? void 0 : rec.video) === null || _o === void 0 ? void 0 : _o.tags) !== null && _p !== void 0 ? _p : (_q = rec === null || rec === void 0 ? void 0 : rec.product) === null || _q === void 0 ? void 0 : _q.tags;
|
|
763
824
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
|
764
|
-
eventInfo: Object.assign(Object.assign({}, eventInfo), { ctaId: (_r = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _r !== void 0 ? _r : '', ctaName: (_s = cta === null || cta === void 0 ? void 0 : cta.title) !== null && _s !== void 0 ? _s : '', contentTags: contentTags ? JSON.stringify(contentTags) : '', position: position + '', contentId: (_u = (_t = rec === null || rec === void 0 ? void 0 : rec.video) === null || _t === void 0 ? void 0 : _t.itemId) !== null && _u !== void 0 ? _u : '', productId: isProd ? product === null || product === void 0 ? void 0 : product.itemId : '', traceInfo: (
|
|
825
|
+
eventInfo: Object.assign(Object.assign({}, eventInfo), { ctaId: (_r = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _r !== void 0 ? _r : '', ctaName: (_s = cta === null || cta === void 0 ? void 0 : cta.title) !== null && _s !== void 0 ? _s : '', contentTags: contentTags ? JSON.stringify(contentTags) : '', position: position + '', contentId: (_u = (_t = rec === null || rec === void 0 ? void 0 : rec.video) === null || _t === void 0 ? void 0 : _t.itemId) !== null && _u !== void 0 ? _u : '', sceneId: (_x = (_w = (_v = rec === null || rec === void 0 ? void 0 : rec.video) === null || _v === void 0 ? void 0 : _v.scene) === null || _w === void 0 ? void 0 : _w.sceneId) !== null && _x !== void 0 ? _x : '', productId: isProd ? product === null || product === void 0 ? void 0 : product.itemId : '', traceInfo: (_13 = (_10 = (_5 = (_1 = (_y = cta === null || cta === void 0 ? void 0 : cta.traceInfo) !== null && _y !== void 0 ? _y : (_0 = (_z = rec === null || rec === void 0 ? void 0 : rec.video) === null || _z === void 0 ? void 0 : _z.bindCta) === null || _0 === void 0 ? void 0 : _0.traceInfo) !== null && _1 !== void 0 ? _1 : (_4 = (_3 = (_2 = rec === null || rec === void 0 ? void 0 : rec.video) === null || _2 === void 0 ? void 0 : _2.bindProduct) === null || _3 === void 0 ? void 0 : _3.bindCta) === null || _4 === void 0 ? void 0 : _4.traceInfo) !== null && _5 !== void 0 ? _5 : (_9 = (_8 = (_7 = (_6 = rec === null || rec === void 0 ? void 0 : rec.video) === null || _6 === void 0 ? void 0 : _6.bindProducts) === null || _7 === void 0 ? void 0 : _7[0]) === null || _8 === void 0 ? void 0 : _8.bindCta) === null || _9 === void 0 ? void 0 : _9.traceInfo) !== null && _10 !== void 0 ? _10 : (_12 = (_11 = rec === null || rec === void 0 ? void 0 : rec.product) === null || _11 === void 0 ? void 0 : _11.bindCta) === null || _12 === void 0 ? void 0 : _12.traceInfo) !== null && _13 !== void 0 ? _13 : '', fromKName, fromKPage: (_14 = location === null || location === void 0 ? void 0 : location.href) !== null && _14 !== void 0 ? _14 : '', contentFormat })
|
|
765
826
|
});
|
|
766
827
|
}, [bffEventReport, isFromHashtag]);
|
|
767
828
|
const h5EnterLink = useCallback(() => {
|
|
@@ -785,10 +846,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
|
785
846
|
});
|
|
786
847
|
}, [bffEventReport]);
|
|
787
848
|
const getAccount = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
|
|
788
|
-
var
|
|
849
|
+
var _16, _17;
|
|
789
850
|
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/account', { method: 'GET' }));
|
|
790
|
-
setChatlabsId((
|
|
791
|
-
return ((
|
|
851
|
+
setChatlabsId((_16 = res === null || res === void 0 ? void 0 : res.data) === null || _16 === void 0 ? void 0 : _16.chatLabsId);
|
|
852
|
+
return ((_17 = res === null || res === void 0 ? void 0 : res.data) === null || _17 === void 0 ? void 0 : _17.consentResult) === 'true';
|
|
792
853
|
}), [bffFetch]);
|
|
793
854
|
const accountSonsent = useCallback((consentResult) => __awaiter(void 0, void 0, void 0, function* () {
|
|
794
855
|
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/account/consent', {
|
|
@@ -852,6 +913,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
|
852
913
|
}
|
|
853
914
|
setRtcList(list);
|
|
854
915
|
setCacheRtcList(list);
|
|
916
|
+
if (isDiyPage) {
|
|
917
|
+
setFirstRtcList(list);
|
|
918
|
+
}
|
|
855
919
|
bffGetTagList(curData !== null && curData !== void 0 ? curData : finalPageData);
|
|
856
920
|
if (channel) {
|
|
857
921
|
const item = list === null || list === void 0 ? void 0 : list[0];
|
|
@@ -871,7 +935,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
|
871
935
|
});
|
|
872
936
|
setLoading(false);
|
|
873
937
|
});
|
|
874
|
-
}, [isShowConsent, channel]);
|
|
938
|
+
}, [isShowConsent, channel, isDiyPage]);
|
|
875
939
|
useEffect(() => {
|
|
876
940
|
if (!isPreview)
|
|
877
941
|
return;
|
|
@@ -886,12 +950,15 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
|
886
950
|
}
|
|
887
951
|
setRtcList(list);
|
|
888
952
|
setCacheRtcList(list);
|
|
953
|
+
if (isDiyPage) {
|
|
954
|
+
setFirstRtcList(list);
|
|
955
|
+
}
|
|
889
956
|
}
|
|
890
957
|
})
|
|
891
958
|
.finally(() => {
|
|
892
959
|
setLoading(false);
|
|
893
960
|
});
|
|
894
|
-
}, [getRecommendVideos, bffGetTagList, channel]);
|
|
961
|
+
}, [getRecommendVideos, bffGetTagList, channel, isDiyPage]);
|
|
895
962
|
const defaultLoadingImage = useIconLink('/pb_static/a65d23c5893c49d7aaaa81681d3179e2.gif', appDomain);
|
|
896
963
|
return (React.createElement(SxpDataSourceContext.Provider, { value: {
|
|
897
964
|
rtcList,
|
|
@@ -949,7 +1016,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
|
949
1016
|
refreshFeSession,
|
|
950
1017
|
getAccount,
|
|
951
1018
|
accountSonsent,
|
|
952
|
-
isDiyH5,
|
|
1019
|
+
isDiyH5: isDiyPage,
|
|
1020
|
+
firstRtcList,
|
|
953
1021
|
pixelPvStatusRef
|
|
954
1022
|
} }, 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({
|
|
955
1023
|
rtcList,
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { useCallback } from 'react';
|
|
2
|
-
import { useSxpDataSource } from './useSxpDataSource';
|
|
3
2
|
import { DEFAULT_TAG } from '../context/SxpDataSourceProvider';
|
|
3
|
+
import { useSxpDataSource } from './useSxpDataSource';
|
|
4
4
|
export function useEventReport() {
|
|
5
5
|
const { bffEventReport, popupDetailData, isFromHashtag, eventTimeList, setEventTimeList } = useSxpDataSource();
|
|
6
6
|
const jumpToWeb = useCallback((e, data, product, cta, position, traceInfo) => {
|
|
7
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13;
|
|
7
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16;
|
|
8
8
|
const i = eventTimeList === null || eventTimeList === void 0 ? void 0 : eventTimeList.findIndex((item) => item.target === (e === null || e === void 0 ? void 0 : e.target));
|
|
9
9
|
if (i !== -1) {
|
|
10
10
|
return;
|
|
@@ -37,11 +37,11 @@ export function useEventReport() {
|
|
|
37
37
|
contentFormat = 'image';
|
|
38
38
|
}
|
|
39
39
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
|
40
|
-
eventInfo: Object.assign({ eventSubject: 'jumpToWeb', eventDescription: 'User jumped to website', productId: (_v = product === null || product === void 0 ? void 0 : product.itemId) !== null && _v !== void 0 ? _v : '', productName: (_w = product === null || product === void 0 ? void 0 : product.title) !== null && _w !== void 0 ? _w : '', price: (product === null || product === void 0 ? void 0 : product.price) ? (product === null || product === void 0 ? void 0 : product.price) + '' : '0', productCollection: (_x = product === null || product === void 0 ? void 0 : product.collection) !== null && _x !== void 0 ? _x : '', fromKName, fromKPage: location === null || location === void 0 ? void 0 : location.href, contentTags: contentTags ? JSON.stringify(contentTags) : '', position: position + '', contentId: (_z = (_y = data === null || data === void 0 ? void 0 : data.video) === null || _y === void 0 ? void 0 : _y.itemId) !== null && _z !== void 0 ? _z : '',
|
|
40
|
+
eventInfo: Object.assign({ eventSubject: 'jumpToWeb', eventDescription: 'User jumped to website', productId: (_v = product === null || product === void 0 ? void 0 : product.itemId) !== null && _v !== void 0 ? _v : '', productName: (_w = product === null || product === void 0 ? void 0 : product.title) !== null && _w !== void 0 ? _w : '', price: (product === null || product === void 0 ? void 0 : product.price) ? (product === null || product === void 0 ? void 0 : product.price) + '' : '0', productCollection: (_x = product === null || product === void 0 ? void 0 : product.collection) !== null && _x !== void 0 ? _x : '', fromKName, fromKPage: location === null || location === void 0 ? void 0 : location.href, contentTags: contentTags ? JSON.stringify(contentTags) : '', position: position + '', contentId: (_z = (_y = data === null || data === void 0 ? void 0 : data.video) === null || _y === void 0 ? void 0 : _y.itemId) !== null && _z !== void 0 ? _z : '', sceneId: (_2 = (_1 = (_0 = data === null || data === void 0 ? void 0 : data.video) === null || _0 === void 0 ? void 0 : _0.scene) === null || _1 === void 0 ? void 0 : _1.sceneId) !== null && _2 !== void 0 ? _2 : '', ctatId: (_3 = cta === null || cta === void 0 ? void 0 : cta.itemId) !== null && _3 !== void 0 ? _3 : '', traceInfo: (_16 = (_13 = (_11 = (_7 = (_4 = traceInfo !== null && traceInfo !== void 0 ? traceInfo : product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _4 !== void 0 ? _4 : (_6 = (_5 = data === null || data === void 0 ? void 0 : data.video) === null || _5 === void 0 ? void 0 : _5.bindProduct) === null || _6 === void 0 ? void 0 : _6.traceInfo) !== null && _7 !== void 0 ? _7 : (_10 = (_9 = (_8 = data === null || data === void 0 ? void 0 : data.video) === null || _8 === void 0 ? void 0 : _8.bindProducts) === null || _9 === void 0 ? void 0 : _9[0]) === null || _10 === void 0 ? void 0 : _10.traceInfo) !== null && _11 !== void 0 ? _11 : (_12 = data === null || data === void 0 ? void 0 : data.product) === null || _12 === void 0 ? void 0 : _12.traceInfo) !== null && _13 !== void 0 ? _13 : (_15 = (_14 = data === null || data === void 0 ? void 0 : data.video) === null || _14 === void 0 ? void 0 : _14.bindCta) === null || _15 === void 0 ? void 0 : _15.traceInfo) !== null && _16 !== void 0 ? _16 : '' }, (contentFormat && { contentFormat }))
|
|
41
41
|
});
|
|
42
42
|
}, [bffEventReport, popupDetailData, isFromHashtag, eventTimeList]);
|
|
43
43
|
const productView = useCallback((data, product, cta, viewTime, position) => {
|
|
44
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
|
|
44
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
|
|
45
45
|
let fromKName = '';
|
|
46
46
|
if (popupDetailData && (((_b = (_a = data === null || data === void 0 ? void 0 : data.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b.length) || ((_c = data === null || data === void 0 ? void 0 : data.video) === null || _c === void 0 ? void 0 : _c.bindProduct))) {
|
|
47
47
|
fromKName = 'pdpPage';
|
|
@@ -60,8 +60,9 @@ export function useEventReport() {
|
|
|
60
60
|
contentTags: JSON.stringify(product === null || product === void 0 ? void 0 : product.tags),
|
|
61
61
|
position: position + '',
|
|
62
62
|
contentId: (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.itemId,
|
|
63
|
+
sceneId: (_g = (_f = (_e = data === null || data === void 0 ? void 0 : data.video) === null || _e === void 0 ? void 0 : _e.scene) === null || _f === void 0 ? void 0 : _f.sceneId) !== null && _g !== void 0 ? _g : '',
|
|
63
64
|
ctatId: cta === null || cta === void 0 ? void 0 : cta.itemId,
|
|
64
|
-
traceInfo: (
|
|
65
|
+
traceInfo: (_s = (_q = (_l = (_h = product === null || product === void 0 ? void 0 : product.traceInfo) !== null && _h !== void 0 ? _h : (_k = (_j = data === null || data === void 0 ? void 0 : data.video) === null || _j === void 0 ? void 0 : _j.bindProduct) === null || _k === void 0 ? void 0 : _k.traceInfo) !== null && _l !== void 0 ? _l : (_p = (_o = (_m = data === null || data === void 0 ? void 0 : data.video) === null || _m === void 0 ? void 0 : _m.bindProducts) === null || _o === void 0 ? void 0 : _o[0]) === null || _p === void 0 ? void 0 : _p.traceInfo) !== null && _q !== void 0 ? _q : (_r = data === null || data === void 0 ? void 0 : data.product) === null || _r === void 0 ? void 0 : _r.traceInfo) !== null && _s !== void 0 ? _s : '',
|
|
65
66
|
timeOnSite: Math.floor((new Date() - viewTime) / 1000) + '',
|
|
66
67
|
eventSubject: 'productView',
|
|
67
68
|
eventDescription: 'User browsed the product'
|
|
@@ -25,7 +25,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
|
|
|
25
25
|
}, []);
|
|
26
26
|
const PAUSE_ICON = (0, useIconLink_1.useIconLink)('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
|
|
27
27
|
const handlePlaying = (0, react_1.useCallback)(() => {
|
|
28
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
28
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
29
29
|
setIsPauseVideo(false);
|
|
30
30
|
const item = data[index];
|
|
31
31
|
if (item && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
|
|
@@ -38,14 +38,15 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
|
|
|
38
38
|
eventSubject: 'playVideo',
|
|
39
39
|
eventDescription: 'User played the video',
|
|
40
40
|
contentId: (_h = (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
|
|
41
|
-
|
|
41
|
+
sceneId: (_l = (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.scene) === null || _k === void 0 ? void 0 : _k.sceneId) !== null && _l !== void 0 ? _l : '',
|
|
42
|
+
contentName: (_o = (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.title) !== null && _o !== void 0 ? _o : '',
|
|
42
43
|
playType,
|
|
43
44
|
startTime: videoCurrentTime,
|
|
44
45
|
videoDuration,
|
|
45
|
-
contentTags: JSON.stringify((
|
|
46
|
+
contentTags: JSON.stringify((_q = (_p = item === null || item === void 0 ? void 0 : item.video) === null || _p === void 0 ? void 0 : _p.tags) !== null && _q !== void 0 ? _q : []),
|
|
46
47
|
position: index + '',
|
|
47
48
|
contentFormat: 'video',
|
|
48
|
-
traceInfo: (
|
|
49
|
+
traceInfo: (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.traceInfo
|
|
49
50
|
}
|
|
50
51
|
});
|
|
51
52
|
setIsFirstPlay(false);
|
|
@@ -84,7 +85,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
|
|
|
84
85
|
}
|
|
85
86
|
}, [isLoadFinish]);
|
|
86
87
|
const onPause = (0, react_1.useCallback)(() => {
|
|
87
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
88
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
88
89
|
const item = data[index];
|
|
89
90
|
const videoDuration = ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
|
|
90
91
|
const videoCurrentTime = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
|
|
@@ -95,14 +96,15 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
|
|
|
95
96
|
eventSubject: 'playOverVideo',
|
|
96
97
|
eventDescription: 'User finished playing the video',
|
|
97
98
|
contentId: (_h = (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
|
|
98
|
-
|
|
99
|
+
sceneId: (_l = (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.scene) === null || _k === void 0 ? void 0 : _k.sceneId) !== null && _l !== void 0 ? _l : '',
|
|
100
|
+
contentName: (_o = (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.title) !== null && _o !== void 0 ? _o : '',
|
|
99
101
|
endTime: videoCurrentTime,
|
|
100
102
|
videoDuration,
|
|
101
103
|
playDuration,
|
|
102
|
-
contentTags: JSON.stringify((
|
|
104
|
+
contentTags: JSON.stringify((_q = (_p = item === null || item === void 0 ? void 0 : item.video) === null || _p === void 0 ? void 0 : _p.tags) !== null && _q !== void 0 ? _q : []),
|
|
103
105
|
position: index + '',
|
|
104
106
|
contentFormat: 'video',
|
|
105
|
-
traceInfo: (
|
|
107
|
+
traceInfo: (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.traceInfo
|
|
106
108
|
}
|
|
107
109
|
});
|
|
108
110
|
}
|