pb-sxp-ui 1.0.86 → 1.0.88
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 +113 -166
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +113 -166
- package/dist/index.js.map +1 -1
- package/dist/index.min.cjs +3 -4
- package/dist/index.min.cjs.map +1 -1
- package/dist/index.min.js +3 -4
- package/dist/index.min.js.map +1 -1
- package/dist/pb-ui.js +113 -166
- package/dist/pb-ui.js.map +1 -1
- package/dist/pb-ui.min.js +3 -4
- package/dist/pb-ui.min.js.map +1 -1
- package/es/core/components/Consent/index.js +2 -2
- package/es/core/components/DiyPortalPreview/VideoWidget.js +3 -3
- package/es/core/components/SxpPageRender/FingerSwipeTip/index.js +1 -1
- package/es/core/components/SxpPageRender/FormatImage.js +2 -2
- package/es/core/components/SxpPageRender/LikeButton/index.js +1 -1
- package/es/core/components/SxpPageRender/Navbar.js +1 -1
- package/es/core/components/SxpPageRender/Nudge/index.js +1 -1
- package/es/core/components/SxpPageRender/Tagbar.js +6 -7
- package/es/core/components/SxpPageRender/ToggleButton/index.js +2 -2
- package/es/core/components/SxpPageRender/VideoWidget/index.js +3 -3
- package/es/core/components/SxpPageRender/WaterFall/List.js +2 -2
- package/es/core/components/SxpPageRender/WaterFall/WaterfallList.js +17 -52
- package/es/core/components/SxpPageRender/WaterFall/index.js +2 -4
- package/es/core/components/SxpPageRender/index.js +28 -30
- package/es/core/context/SxpDataSourceProvider.d.ts +4 -0
- package/es/core/context/SxpDataSourceProvider.js +9 -3
- package/es/core/hooks/useEventReport.d.ts +1 -1
- package/es/core/hooks/useEventReport.js +13 -10
- package/es/materials/sxp/popup/AppointForm/index.js +1 -1
- package/es/materials/sxp/popup/CommodityDetail/index.js +3 -3
- package/es/materials/sxp/popup/CommodityDetailDiro/index.js +4 -4
- package/es/materials/sxp/popup/CommodityDetailDiroNew/index.js +3 -3
- package/es/materials/sxp/popup/Prompt/index.js +2 -2
- package/es/materials/sxp/template/Appoint/index.js +1 -1
- package/lib/core/components/Consent/index.js +2 -2
- package/lib/core/components/DiyPortalPreview/VideoWidget.js +3 -3
- package/lib/core/components/SxpPageRender/FingerSwipeTip/index.js +1 -1
- package/lib/core/components/SxpPageRender/FormatImage.js +2 -2
- package/lib/core/components/SxpPageRender/LikeButton/index.js +1 -1
- package/lib/core/components/SxpPageRender/Navbar.js +1 -1
- package/lib/core/components/SxpPageRender/Nudge/index.js +1 -1
- package/lib/core/components/SxpPageRender/Tagbar.js +7 -8
- package/lib/core/components/SxpPageRender/ToggleButton/index.js +2 -2
- package/lib/core/components/SxpPageRender/VideoWidget/index.js +3 -3
- package/lib/core/components/SxpPageRender/WaterFall/List.js +2 -2
- package/lib/core/components/SxpPageRender/WaterFall/WaterfallList.js +17 -52
- package/lib/core/components/SxpPageRender/WaterFall/index.js +2 -4
- package/lib/core/components/SxpPageRender/index.js +28 -30
- package/lib/core/context/SxpDataSourceProvider.d.ts +4 -0
- package/lib/core/context/SxpDataSourceProvider.js +10 -4
- package/lib/core/hooks/useEventReport.d.ts +1 -1
- package/lib/core/hooks/useEventReport.js +13 -10
- package/lib/materials/sxp/popup/AppointForm/index.js +1 -1
- package/lib/materials/sxp/popup/CommodityDetail/index.js +3 -3
- package/lib/materials/sxp/popup/CommodityDetailDiro/index.js +4 -4
- package/lib/materials/sxp/popup/CommodityDetailDiroNew/index.js +3 -3
- package/lib/materials/sxp/popup/Prompt/index.js +2 -2
- package/lib/materials/sxp/template/Appoint/index.js +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
@@ -419,7 +419,7 @@ var SXP_EVENT_TYPE;
|
|
419
419
|
* @Author: binruan@chatlabs.com
|
420
420
|
* @Date: 2024-06-13 15:16:53
|
421
421
|
* @LastEditors: binruan@chatlabs.com
|
422
|
-
* @LastEditTime: 2024-06-
|
422
|
+
* @LastEditTime: 2024-06-19 14:13:50
|
423
423
|
* @FilePath: \pb-sxp-ui\src\core\components\Consent\index.tsx
|
424
424
|
*
|
425
425
|
*/
|
@@ -474,8 +474,8 @@ const Consent$2 = ({ width = window.innerWidth, height = window.innerHeight, pri
|
|
474
474
|
React.createElement("div", { className: 'consent-title' }, privacy_title !== null && privacy_title !== void 0 ? privacy_title : 'Privacy Policy'),
|
475
475
|
React.createElement("div", { className: 'consent-content' }, privacy_context !== null && privacy_context !== void 0 ? privacy_context : 'This site uses cookies to improve your online experience. By continuing to use the site please agree the policy first.')),
|
476
476
|
React.createElement("div", { className: 'consent-col' },
|
477
|
-
React.createElement("button", { className: 'consent-btn', onClick: handleAgree }, "Agree"),
|
478
|
-
React.createElement("a", { className: 'consent-policy', target: '_blank', href: privacy_policy_url }, privacy_policy_title !== null && privacy_policy_title !== void 0 ? privacy_policy_title : 'More information')))));
|
477
|
+
React.createElement("button", { "aria-label": 'agree', className: 'consent-btn', onClick: handleAgree }, "Agree"),
|
478
|
+
React.createElement("a", { className: 'consent-policy', target: '_blank', href: privacy_policy_url ? `https://${privacy_policy_url}` : undefined }, privacy_policy_title !== null && privacy_policy_title !== void 0 ? privacy_policy_title : 'More information')))));
|
479
479
|
};
|
480
480
|
var Consent$3 = memo(Consent$2);
|
481
481
|
|
@@ -488,6 +488,7 @@ var DataSourceType;
|
|
488
488
|
DataSourceType[DataSourceType["BFF"] = 5] = "BFF";
|
489
489
|
})(DataSourceType || (DataSourceType = {}));
|
490
490
|
const UTM_KEYS = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_id', 'utm_content', 'cl_source'];
|
491
|
+
const DEFAULT_TAG = 'FOR U';
|
491
492
|
const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent = true, maxSize, defaultSize, isPreview = false, sxpParameter, appDomain, hashTagSize, loadingImage, isOpenHashTag = false, enabledMetaConversionApi = false, consentHeight, consentWidth, isShowTag = true, isOpenConsent = false, globalConfig, isEditor = false }) => {
|
492
493
|
var _a, _b, _c;
|
493
494
|
const [rtcList, setRtcList] = useState([]);
|
@@ -507,6 +508,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
507
508
|
const [videoRef, setVideoRef] = useState(null);
|
508
509
|
const themeTag = useRef();
|
509
510
|
const curTime = useRef();
|
511
|
+
const [selectTag, setSelectTag] = useState(DEFAULT_TAG);
|
510
512
|
const isShowConsent = useMemo(() => {
|
511
513
|
var _a, _b, _c, _d;
|
512
514
|
return (((_d = (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.consent) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.privacy_necessity) && !isAgreePolicy && !isEditor) || isOpenConsent;
|
@@ -716,8 +718,9 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
716
718
|
});
|
717
719
|
}, [bffEventReport]);
|
718
720
|
useEffect(() => {
|
719
|
-
|
720
|
-
|
721
|
+
if (!isShowConsent)
|
722
|
+
h5EnterLink();
|
723
|
+
}, [isShowConsent]);
|
721
724
|
useEffect(() => {
|
722
725
|
if (isShowConsent)
|
723
726
|
return;
|
@@ -796,7 +799,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
796
799
|
setIsAgreePolicy,
|
797
800
|
curTime,
|
798
801
|
h5EnterLink,
|
799
|
-
themeTag
|
802
|
+
themeTag,
|
803
|
+
isShowConsent,
|
804
|
+
selectTag,
|
805
|
+
setSelectTag
|
800
806
|
} }, isShowConsent ? (React.createElement(Consent$3, Object.assign({}, (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.consent) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props))) : (render({
|
801
807
|
rtcList,
|
802
808
|
mutateLike: bffMutateLike,
|
@@ -1207,7 +1213,7 @@ var settingRender$6 = [
|
|
1207
1213
|
* @Author: binruan@chatlabs.com
|
1208
1214
|
* @Date: 2024-03-12 10:59:06
|
1209
1215
|
* @LastEditors: binruan@chatlabs.com
|
1210
|
-
* @LastEditTime: 2024-06-
|
1216
|
+
* @LastEditTime: 2024-06-20 13:39:07
|
1211
1217
|
* @FilePath: \pb-sxp-ui\src\core\hooks\useEventReport.ts
|
1212
1218
|
*
|
1213
1219
|
*/
|
@@ -1277,16 +1283,18 @@ function useEventReport() {
|
|
1277
1283
|
}
|
1278
1284
|
});
|
1279
1285
|
}, [bffEventReport, popupDetailData]);
|
1280
|
-
const backMainFeed = useCallback((lastFeed, themeTag, hashTag) => {
|
1281
|
-
|
1282
|
-
|
1283
|
-
|
1284
|
-
|
1285
|
-
|
1286
|
-
|
1287
|
-
|
1288
|
-
|
1289
|
-
|
1286
|
+
const backMainFeed = useCallback((lastFeed, selectTag, themeTag, hashTag) => {
|
1287
|
+
if (selectTag && selectTag === DEFAULT_TAG) {
|
1288
|
+
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
1289
|
+
eventInfo: {
|
1290
|
+
lastFeed,
|
1291
|
+
themeTags: themeTag ? `['${themeTag}']` : '',
|
1292
|
+
hashTags: hashTag ? `['${hashTag}']` : '',
|
1293
|
+
eventSubject: 'backMainFeed',
|
1294
|
+
eventDescription: 'back Main Feed'
|
1295
|
+
}
|
1296
|
+
});
|
1297
|
+
}
|
1290
1298
|
}, [bffEventReport]);
|
1291
1299
|
return {
|
1292
1300
|
jumpToWeb,
|
@@ -1373,7 +1381,7 @@ const AppointForm$1 = (_a) => {
|
|
1373
1381
|
React.createElement("div", { className: 'pb-appoint-form-container' },
|
1374
1382
|
React.createElement(BetaSchemaForm, { columns: columnsData, submitter: false, layout: layoutType, autoFocusFirstInput: false, size: 'large', formRef: formRef, className: 'panel-reset' }))),
|
1375
1383
|
React.createElement("div", { className: 'pb-appoint-form-btn-wrapper' },
|
1376
|
-
React.createElement("button", { onClick: handleSubmit, className: 'pb-appoint-form-btn', style: Object.assign({ color: submitColor, background: submitBgColor }, submitButtonStyle) }, loading ? React.createElement(React.Fragment, null, "loading...") : submitText))));
|
1384
|
+
React.createElement("button", { "aria-label": submitText, onClick: handleSubmit, className: 'pb-appoint-form-btn', style: Object.assign({ color: submitColor, background: submitBgColor }, submitButtonStyle) }, loading ? React.createElement(React.Fragment, null, "loading...") : submitText))));
|
1377
1385
|
};
|
1378
1386
|
var AppointFormComponent = memo(AppointForm$1);
|
1379
1387
|
|
@@ -8565,7 +8573,7 @@ var ExpandableText$1 = memo(ExpandableText);
|
|
8565
8573
|
* @Author: binruan@chatlabs.com
|
8566
8574
|
* @Date: 2024-03-20 10:27:31
|
8567
8575
|
* @LastEditors: binruan@chatlabs.com
|
8568
|
-
* @LastEditTime: 2024-
|
8576
|
+
* @LastEditTime: 2024-06-19 16:25:46
|
8569
8577
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\FormatImage.tsx
|
8570
8578
|
*
|
8571
8579
|
*/
|
@@ -8615,9 +8623,9 @@ const FormatImage = forwardRef((props, ref) => {
|
|
8615
8623
|
React.createElement("source", { type: 'image/jpeg', srcSet: `${imgSrc}?imageMogr2/format/jpg` }),
|
8616
8624
|
React.createElement("img", { className: className, src: imgSrc, style: style, loading: loading, onLoad: (e) => {
|
8617
8625
|
onLoad === null || onLoad === void 0 ? void 0 : onLoad(e.target);
|
8618
|
-
} }))) : (React.createElement("img", { className: className, src: imgSrc, style: style, loading: loading, onLoad: (e) => {
|
8626
|
+
}, alt: 'image' }))) : (React.createElement("img", { className: className, src: imgSrc, style: style, loading: loading, onLoad: (e) => {
|
8619
8627
|
onLoad === null || onLoad === void 0 ? void 0 : onLoad(e.target);
|
8620
|
-
} }))));
|
8628
|
+
}, alt: 'image' }))));
|
8621
8629
|
});
|
8622
8630
|
var FormatImage$1 = memo(FormatImage);
|
8623
8631
|
|
@@ -8685,8 +8693,8 @@ const CommodityDetail$1 = (_a) => {
|
|
8685
8693
|
18-karat gold, this necklace is embellished with hand-set diamonds.`, maxStr: 79, className: 'pb-commondity-content-info', style: commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.info }))));
|
8686
8694
|
};
|
8687
8695
|
const renderBtn = () => {
|
8688
|
-
var _a;
|
8689
|
-
return (React.createElement(React.Fragment, null, (isDefault || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { onClick: handleLink, className: 'pb-commondity-btn', style: buttonStyle }, (
|
8696
|
+
var _a, _b;
|
8697
|
+
return (React.createElement(React.Fragment, null, (isDefault || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { "aria-label": (_a = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _a !== void 0 ? _a : 'Purchase on Website', onClick: handleLink, className: 'pb-commondity-btn', style: buttonStyle }, (_b = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _b !== void 0 ? _b : 'Purchase on Website'))));
|
8690
8698
|
};
|
8691
8699
|
const getStyle = useCallback((style) => {
|
8692
8700
|
if (style === null || style === void 0 ? void 0 : style.lineClamp) {
|
@@ -8732,7 +8740,7 @@ const CommodityDetail$1 = (_a) => {
|
|
8732
8740
|
top: 0,
|
8733
8741
|
objectFit: 'cover',
|
8734
8742
|
width: '100%'
|
8735
|
-
}), src: (_k = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _k !== void 0 ? _k : bottom_image, alt: '' }))),
|
8743
|
+
}), src: (_k = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _k !== void 0 ? _k : bottom_image, alt: 'pdp image' }))),
|
8736
8744
|
React.createElement("div", { className: 'pb-commondity-content' }, renderContent({ isPost }))),
|
8737
8745
|
renderBtn(),
|
8738
8746
|
React.createElement(Modal$1, { visible: showModal, onClose: () => setShowModal(false) },
|
@@ -8936,9 +8944,9 @@ const Prompt$1 = (_a) => {
|
|
8936
8944
|
};
|
8937
8945
|
return (React.createElement("div", Object.assign({ className: `pb-prompt ${css(Object.assign({}, style))}` }, props),
|
8938
8946
|
React.createElement("div", { className: 'pb-prompt-icon' },
|
8939
|
-
React.createElement("img", { width: '100%', src: iconSrc !== null && iconSrc !== void 0 ? iconSrc : img$2 })),
|
8947
|
+
React.createElement("img", { width: '100%', src: iconSrc !== null && iconSrc !== void 0 ? iconSrc : img$2, alt: 'success image' })),
|
8940
8948
|
React.createElement("div", { className: 'pb-prompt-content' }, content),
|
8941
|
-
React.createElement("button", { className: 'pb-prompt-btn', style: submitButtonStyle, onClick: handleOk }, btnText)));
|
8949
|
+
React.createElement("button", { "aria-label": btnText, className: 'pb-prompt-btn', style: submitButtonStyle, onClick: handleOk }, btnText)));
|
8942
8950
|
};
|
8943
8951
|
var PromptComponent = memo(Prompt$1);
|
8944
8952
|
|
@@ -9162,7 +9170,7 @@ var settingRender$3 = [
|
|
9162
9170
|
];
|
9163
9171
|
|
9164
9172
|
const CommodityDetailDiroNew$1 = (_a) => {
|
9165
|
-
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
9173
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
|
9166
9174
|
var { style, isDefault, rec, viewTime, isPost, bottom_image, tipText, swiper, commodityStyles, buttonStyle, index } = _a, props = __rest(_a, ["style", "isDefault", "rec", "viewTime", "isPost", "bottom_image", "tipText", "swiper", "commodityStyles", "buttonStyle", "index"]);
|
9167
9175
|
useState(true);
|
9168
9176
|
const { sxpParameter } = useSxpDataSource();
|
@@ -9268,7 +9276,7 @@ Made in Italy` })));
|
|
9268
9276
|
top: 0,
|
9269
9277
|
objectFit: 'cover',
|
9270
9278
|
width: '100%'
|
9271
|
-
}), src: (_k = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _k !== void 0 ? _k : bottom_image, alt: '' }))),
|
9279
|
+
}), src: (_k = sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _k !== void 0 ? _k : bottom_image, alt: 'pdp image' }))),
|
9272
9280
|
React.createElement("div", { className: 'pb-commondityDiroNew-content' },
|
9273
9281
|
React.createElement("div", { className: 'pb-commondityDiroNew-content-top' },
|
9274
9282
|
React.createElement("div", { className: 'pb-commondityDiroNew-content-top-left' },
|
@@ -9277,7 +9285,7 @@ Made in Italy` })));
|
|
9277
9285
|
React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right' },
|
9278
9286
|
React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.price), style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.price) }, priceText),
|
9279
9287
|
React.createElement("div", { className: 'pb-commondityDiroNew-content-top-right-price', hidden: !!product && !(product === null || product === void 0 ? void 0 : product.taxInfo), style: getStyle(commodityStyles === null || commodityStyles === void 0 ? void 0 : commodityStyles.taxInfo) }, (_m = product === null || product === void 0 ? void 0 : product.taxInfo) !== null && _m !== void 0 ? _m : '税费'))),
|
9280
|
-
(!product || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle }, (
|
9288
|
+
(!product || (product === null || product === void 0 ? void 0 : product.link)) && (React.createElement("button", { "aria-label": (_o = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _o !== void 0 ? _o : 'Shop now', onClick: handleLink, className: 'pb-commondityDiroNew-btn', style: buttonStyle }, (_p = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _p !== void 0 ? _p : 'Shop now')),
|
9281
9289
|
productInfoText({ isPost }))),
|
9282
9290
|
React.createElement(Modal$1, { visible: showModal, onClose: () => setShowModal(false) }, productInfoText({ isPost: false }))));
|
9283
9291
|
};
|
@@ -9769,7 +9777,7 @@ const Appoint$1 = (_a) => {
|
|
9769
9777
|
const cta = (_b = recData === null || recData === void 0 ? void 0 : recData.video) === null || _b === void 0 ? void 0 : _b.bindCta;
|
9770
9778
|
return (React.createElement(EventProvider$1, Object.assign({ isExternalLink: isExternalLink, rec: recData, className: css(Object.assign({ alignItems: 'center' }, style)), style: { display: 'flex' } }, props),
|
9771
9779
|
React.createElement("div", { className: css(Object.assign({ overflow: 'hidden', flexShrink: 0, backgroundColor: '#f2f2f2' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.img)) },
|
9772
|
-
React.createElement("img", { className: css({ width: '100%', objectFit: 'cover', height: '100%', display: 'block' }), src: (_d = (_c = cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, alt: '' })),
|
9780
|
+
React.createElement("img", { className: css({ width: '100%', objectFit: 'cover', height: '100%', display: 'block' }), src: (_d = (_c = cta === null || cta === void 0 ? void 0 : cta.icon) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) !== null && _d !== void 0 ? _d : bottom_image, alt: 'cta image' })),
|
9773
9781
|
React.createElement("div", { className: css(Object.assign({ overflow: 'hidden', textOverflow: 'ellipsis' }, ctaTempStyles === null || ctaTempStyles === void 0 ? void 0 : ctaTempStyles.ctaTitle)) }, (_e = cta === null || cta === void 0 ? void 0 : cta.enTitle) !== null && _e !== void 0 ? _e : 'Product Name')));
|
9774
9782
|
};
|
9775
9783
|
var AppointComponent = memo(Appoint$1);
|
@@ -10687,7 +10695,7 @@ const Navbar = ({ icon, styles, textStyle, onClose }) => {
|
|
10687
10695
|
var _a;
|
10688
10696
|
const { waterFallData, setOpenHashtag } = useSxpDataSource();
|
10689
10697
|
return (React.createElement("div", { className: 'clc-sxp-nav', style: styles },
|
10690
|
-
React.createElement("img", { className: 'clc-sxp-nav-left', src: icon, alt: '', onClick: onClose }),
|
10698
|
+
React.createElement("img", { className: 'clc-sxp-nav-left', src: icon, alt: 'back button', onClick: onClose }),
|
10691
10699
|
React.createElement("div", { className: 'clc-sxp-nav-title', style: textStyle }, `#${(_a = waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag) !== null && _a !== void 0 ? _a : '标题'}`)));
|
10692
10700
|
};
|
10693
10701
|
var Navbar$1 = memo(Navbar);
|
@@ -11979,15 +11987,15 @@ const WaterfallFlowItem$1 = (props) => {
|
|
11979
11987
|
const { rec, style = {}, sizeChange = () => { }, unitWidth, index, showBorder, list, reportTagsView, textStyles, space } = props;
|
11980
11988
|
const { swiperRef, setRtcList, setOpenHashtag, sxpParameter } = useSxpDataSource();
|
11981
11989
|
const [showVideo, setShowVideo] = useState(false);
|
11982
|
-
|
11983
|
-
|
11990
|
+
useState(false);
|
11991
|
+
useState({
|
11984
11992
|
height: 1,
|
11985
11993
|
width: 1
|
11986
11994
|
});
|
11987
11995
|
const imgDom = useRef(null);
|
11988
11996
|
const ref = useRef(null);
|
11989
|
-
|
11990
|
-
|
11997
|
+
useRef(null);
|
11998
|
+
useRef(null);
|
11991
11999
|
const [firstFrameSrc, setFirstFrameSrc] = useState('');
|
11992
12000
|
const src = useMemo(() => {
|
11993
12001
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
@@ -12017,7 +12025,7 @@ const WaterfallFlowItem$1 = (props) => {
|
|
12017
12025
|
return y;
|
12018
12026
|
}, [style]);
|
12019
12027
|
/** 是否加载图片 */
|
12020
|
-
|
12028
|
+
useMemo(() => {
|
12021
12029
|
if (top === undefined) {
|
12022
12030
|
return false;
|
12023
12031
|
}
|
@@ -12043,58 +12051,25 @@ const WaterfallFlowItem$1 = (props) => {
|
|
12043
12051
|
if (imgDom.current === null || src === '') {
|
12044
12052
|
return;
|
12045
12053
|
}
|
12046
|
-
|
12054
|
+
let imgSrc = null;
|
12047
12055
|
if (showVideo && firstFrameSrc) {
|
12048
|
-
|
12056
|
+
imgSrc = firstFrameSrc;
|
12049
12057
|
}
|
12050
12058
|
else {
|
12051
|
-
|
12059
|
+
imgSrc = src;
|
12052
12060
|
}
|
12053
|
-
|
12054
|
-
|
12055
|
-
|
12056
|
-
|
12057
|
-
|
12058
|
-
|
12059
|
-
|
12060
|
-
|
12061
|
-
}, [src, showVideo, firstFrameSrc, isImgShow]);
|
12062
|
-
useEffect(() => {
|
12063
|
-
// 通过宽度比例获取图片高度
|
12064
|
-
const height = imgInfo.height * (unitWidth / imgInfo.width);
|
12065
|
-
if (isLoading) {
|
12061
|
+
if (imgSrc)
|
12062
|
+
imgDom.current.setSrc(imgSrc);
|
12063
|
+
}, [src, showVideo, firstFrameSrc]);
|
12064
|
+
const pictRef = useRef();
|
12065
|
+
const imgLoad = useCallback((img) => {
|
12066
|
+
setTimeout(() => {
|
12067
|
+
var _a;
|
12068
|
+
const height = (_a = pictRef === null || pictRef === void 0 ? void 0 : pictRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight;
|
12066
12069
|
// 加56是因为下方文字部分高度为56,可以自己设置
|
12067
12070
|
sizeChange(height + 56 + space, index);
|
12068
|
-
}
|
12069
|
-
}, [
|
12070
|
-
const calculateHeightForWidth = (videoWidth, videoHeight, targetWidth) => {
|
12071
|
-
const aspectRatio = videoWidth / videoHeight;
|
12072
|
-
const targetHeight = targetWidth / aspectRatio;
|
12073
|
-
return targetHeight;
|
12074
|
-
};
|
12075
|
-
useEffect(() => {
|
12076
|
-
const video = videoDom === null || videoDom === void 0 ? void 0 : videoDom.current;
|
12077
|
-
if (video === null || src === '' || !showVideo) {
|
12078
|
-
return;
|
12079
|
-
}
|
12080
|
-
video.src = src;
|
12081
|
-
video.currentTime = 1;
|
12082
|
-
video.crossOrigin = 'anonymous';
|
12083
|
-
video.onloadeddata = () => {
|
12084
|
-
const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
|
12085
|
-
if (!canvas)
|
12086
|
-
return;
|
12087
|
-
const ctx = canvas.getContext('2d');
|
12088
|
-
const targetWidth = (window === null || window === void 0 ? void 0 : window.innerWidth) / 2;
|
12089
|
-
const targetHeight = calculateHeightForWidth(video.videoWidth, video.videoHeight, targetWidth);
|
12090
|
-
canvas.height = targetHeight;
|
12091
|
-
canvas.width = targetWidth;
|
12092
|
-
ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
|
12093
|
-
setFirstFrameSrc(canvas.toDataURL());
|
12094
|
-
video.remove();
|
12095
|
-
canvas.remove();
|
12096
|
-
};
|
12097
|
-
}, [src, showVideo]);
|
12071
|
+
}, 0);
|
12072
|
+
}, [space, sizeChange, index, unitWidth, pictRef]);
|
12098
12073
|
const handleClickToDetail = () => {
|
12099
12074
|
reportTagsView();
|
12100
12075
|
setRtcList === null || setRtcList === void 0 ? void 0 : setRtcList(list);
|
@@ -12105,17 +12080,14 @@ const WaterfallFlowItem$1 = (props) => {
|
|
12105
12080
|
}, 0);
|
12106
12081
|
};
|
12107
12082
|
return (React.createElement("div", { ref: ref, style: Object.assign({}, style), className: 'waterFallList-content-listItem', key: index, onClick: handleClickToDetail },
|
12108
|
-
React.createElement("div", { className: 'waterFallList-content-listItem-picture' },
|
12109
|
-
|
12110
|
-
React.createElement("video", { ref: videoDom, src: src, crossOrigin: 'anonymous', className: 'waterFallList-content-listItem-picture-img' }),
|
12111
|
-
React.createElement("canvas", { ref: canvasRef }))),
|
12112
|
-
React.createElement(FormatImage$1, { loading: 'lazy', className: 'waterFallList-content-listItem-picture-img', ref: imgDom })),
|
12083
|
+
React.createElement("div", { className: 'waterFallList-content-listItem-picture', ref: pictRef },
|
12084
|
+
React.createElement(FormatImage$1, { loading: 'lazy', className: 'waterFallList-content-listItem-picture-img', onLoad: imgLoad, ref: imgDom })),
|
12113
12085
|
React.createElement("div", { className: 'waterFallList-content-listItem-info' },
|
12114
12086
|
React.createElement("div", { className: `${'waterFallList-content-listItem-info-title'} ${priceText ? 'waterFallList-content-listItem-info-nowrap' : ''}`, style: Object.assign({}, textStyles === null || textStyles === void 0 ? void 0 : textStyles.title) }, title && title),
|
12115
12087
|
React.createElement("div", { className: 'waterFallList-content-listItem-info-price', hidden: !priceText, style: textStyles.price }, priceText))));
|
12116
12088
|
};
|
12117
12089
|
function WaterfallList$1(_a) {
|
12118
|
-
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
|
12090
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
|
12119
12091
|
var { reportTagsView, showBanner } = _a, props = __rest(_a, ["reportTagsView", "showBanner"]);
|
12120
12092
|
const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag } = useSxpDataSource();
|
12121
12093
|
/** 滚动的父元素 */
|
@@ -12167,7 +12139,6 @@ function WaterfallList$1(_a) {
|
|
12167
12139
|
for (let i = 0; i < (list === null || list === void 0 ? void 0 : list.length); i++) {
|
12168
12140
|
// 原本应对应的行数
|
12169
12141
|
const currentRow = Math.floor(i / rowsNum);
|
12170
|
-
//
|
12171
12142
|
const remainder = (i % rowsNum) + 1;
|
12172
12143
|
// 最低item下标
|
12173
12144
|
let minHeightInd = 0;
|
@@ -12344,7 +12315,7 @@ function WaterfallList$1(_a) {
|
|
12344
12315
|
} }))),
|
12345
12316
|
React.createElement("div", { className: 'waterFallList-bottom', hidden: !((_t = data === null || data === void 0 ? void 0 : data.tag) === null || _t === void 0 ? void 0 : _t.link), style: props === null || props === void 0 ? void 0 : props.buttonBgStyle }),
|
12346
12317
|
React.createElement("div", { ref: buttonRef, hidden: !((_u = data === null || data === void 0 ? void 0 : data.tag) === null || _u === void 0 ? void 0 : _u.link), className: 'waterFallList-btn-wrap', style: Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props.buttonBgStyle), { height: 'auto', backgroundColor: 'transparent' }) },
|
12347
|
-
React.createElement("button", { className: 'waterFallList-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((
|
12318
|
+
React.createElement("button", { "aria-label": ((_v = data === null || data === void 0 ? void 0 : data.tag) === null || _v === void 0 ? void 0 : _v.linkTitle) || 'Shop the collection', className: 'waterFallList-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_w = data === null || data === void 0 ? void 0 : data.tag) === null || _w === void 0 ? void 0 : _w.linkTitle) || 'Shop the collection'))))));
|
12348
12319
|
}
|
12349
12320
|
|
12350
12321
|
var img$1 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAaZJREFUeF7t2jFKBEEQRuG3mSJeQTARURDMTL2EqXfwAnoKD6FHMDEzNVIw2tzQC2gFggyDrExX1V92T7wz9PumFnqbXdH5teq8nwEwJqBzgfEVKDYAW8Ae8NZq3ZUm4Aa4AnaBR+C8BUIVAIu/ngSfAs9LESoAWLgB/LzWwP7SeLtfHWAu3tZ9Adz/dwD3eOUJCIlXBQiLVwQIjVcDCI9XAkiJVwFIi1cASI3PBpjb3jbd5GyyUcraCUrEZ02ATHwGgFR8NIBcfCSAZHwUgGx8BIB0vDeAfLwnQIl4L4Ay8R4ApeJbA2wD78DOZA/e7ABzk739Xz/T8rfAIfA6WYCd3BqA7NUSwCKfgLNKCK0BjoC7rzP74yoIrQGsuxSCB0ApBC+AMgieACUQvAHkESIApBGiAGQRIgEkEaIB5BAyAKQQsgBkEDIBJBCyAdIRFABSEVQA0hCUAFIQ1ADCERQBQhFUAcIQlAFCENQBfkOwg9eXpeftFQDmEOzv8ifARy8A3wiXwAHwANwujbf7q0xAi9bZZwwAN9oiDx4TUORFuS2z+wn4BAiAaEHnKChjAAAAAElFTkSuQmCC";
|
@@ -12473,7 +12444,7 @@ const WaterfallFlowItem = (props) => {
|
|
12473
12444
|
React.createElement("div", { className: 'list-content-listItem-info-price', style: textStyles === null || textStyles === void 0 ? void 0 : textStyles.price, hidden: !priceText }, priceText))));
|
12474
12445
|
};
|
12475
12446
|
function WaterfallList(_a) {
|
12476
|
-
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
12447
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
12477
12448
|
var { reportTagsView, showBanner } = _a, props = __rest(_a, ["reportTagsView", "showBanner"]);
|
12478
12449
|
const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag } = useSxpDataSource();
|
12479
12450
|
const [list, setList] = useState();
|
@@ -12562,20 +12533,20 @@ function WaterfallList(_a) {
|
|
12562
12533
|
} })),
|
12563
12534
|
React.createElement("div", { className: 'list-bottom', hidden: !((_o = data === null || data === void 0 ? void 0 : data.tag) === null || _o === void 0 ? void 0 : _o.link), style: props === null || props === void 0 ? void 0 : props.buttonBgStyle }),
|
12564
12535
|
React.createElement("div", { hidden: !((_p = data === null || data === void 0 ? void 0 : data.tag) === null || _p === void 0 ? void 0 : _p.link), className: 'list-btn-wrap', style: Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props.buttonBgStyle), { height: 'auto', backgroundColor: 'transparent' }) },
|
12565
|
-
React.createElement("button", { className: 'list-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((
|
12536
|
+
React.createElement("button", { "aria-label": ((_q = data === null || data === void 0 ? void 0 : data.tag) === null || _q === void 0 ? void 0 : _q.linkTitle) || 'Shop the collection', className: 'list-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_r = data === null || data === void 0 ? void 0 : data.tag) === null || _r === void 0 ? void 0 : _r.linkTitle) || 'Shop the collection'))))));
|
12566
12537
|
}
|
12567
12538
|
|
12568
12539
|
/*
|
12569
12540
|
* @Author: binruan@chatlabs.com
|
12570
12541
|
* @Date: 2024-01-10 10:58:24
|
12571
12542
|
* @LastEditors: binruan@chatlabs.com
|
12572
|
-
* @LastEditTime: 2024-06-12
|
12543
|
+
* @LastEditTime: 2024-06-20 12:45:26
|
12573
12544
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\WaterFall\index.tsx
|
12574
12545
|
*
|
12575
12546
|
*/
|
12576
12547
|
const WaterFall = (props) => {
|
12577
12548
|
var _a;
|
12578
|
-
const { waterFallData, setOpenHashtag, openHashtag, swiperRef, setWaterFallData, cacheRtcList, setRtcList, cacheActiveIndex, rtcList, setCacheRtcList, setIsFromHashtag, isFromHashtag, bffEventReport, themeTag } = useSxpDataSource();
|
12549
|
+
const { waterFallData, setOpenHashtag, openHashtag, swiperRef, setWaterFallData, cacheRtcList, setRtcList, cacheActiveIndex, rtcList, setCacheRtcList, setIsFromHashtag, isFromHashtag, bffEventReport, themeTag, selectTag } = useSxpDataSource();
|
12579
12550
|
const { backMainFeed } = useEventReport();
|
12580
12551
|
useRef(null);
|
12581
12552
|
const modalEleRef = useRef(null);
|
@@ -12597,9 +12568,7 @@ const WaterFall = (props) => {
|
|
12597
12568
|
if (!isEq && cacheRtcList && (cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.length)) {
|
12598
12569
|
setRtcList === null || setRtcList === void 0 ? void 0 : setRtcList(cacheRtcList);
|
12599
12570
|
}
|
12600
|
-
|
12601
|
-
backMainFeed('branch', themeTag === null || themeTag === void 0 ? void 0 : themeTag.current, waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag);
|
12602
|
-
}
|
12571
|
+
backMainFeed('branch', selectTag, undefined, waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag);
|
12603
12572
|
reportTagsView();
|
12604
12573
|
setWaterFallData === null || setWaterFallData === void 0 ? void 0 : setWaterFallData(undefined);
|
12605
12574
|
setIsFromHashtag === null || setIsFromHashtag === void 0 ? void 0 : setIsFromHashtag(false);
|
@@ -12911,7 +12880,7 @@ const LikeButton = (_a) => {
|
|
12911
12880
|
}
|
12912
12881
|
}
|
12913
12882
|
}), 200);
|
12914
|
-
return (React.createElement("button", Object.assign({}, props, { onClick: handleClick }),
|
12883
|
+
return (React.createElement("button", Object.assign({}, props, { "aria-label": 'like', onClick: handleClick }),
|
12915
12884
|
React.createElement("img", { style: { width: '100%', height: '100%', objectFit: 'contain' }, src: state ? activeIcon || likeIcon : unActicveIcon || unlikeIcon, alt: 'icon' })));
|
12916
12885
|
};
|
12917
12886
|
var LikeButton$1 = memo(LikeButton);
|
@@ -13170,7 +13139,7 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
|
|
13170
13139
|
if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
|
13171
13140
|
return null;
|
13172
13141
|
}
|
13173
|
-
return (React.createElement("img", { style: { position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', objectFit: 'cover' }, src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image }));
|
13142
|
+
return (React.createElement("img", { style: { position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', objectFit: 'cover' }, src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, alt: 'placeholder image' }));
|
13174
13143
|
}, [isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
|
13175
13144
|
useEffect(() => {
|
13176
13145
|
if (!videoRef)
|
@@ -13203,7 +13172,7 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
|
|
13203
13172
|
} },
|
13204
13173
|
React.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' } },
|
13205
13174
|
React.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
|
13206
|
-
React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON }))),
|
13175
|
+
React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', alt: 'pause', src: PAUSE_ICON }))),
|
13207
13176
|
renderPoster)) : (React.createElement("div", { className: 'video-container', key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, style: {
|
13208
13177
|
position: 'relative',
|
13209
13178
|
width: '100%',
|
@@ -13212,7 +13181,7 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
|
|
13212
13181
|
}, onClick: handleClickVideo() },
|
13213
13182
|
React.createElement("div", { className: 'n-full-screen', ref: videoEleRef, id: videoId, style: { width: '100%', height: '100%' } }),
|
13214
13183
|
renderPoster,
|
13215
|
-
React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })))));
|
13184
|
+
React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON, alt: 'pause' })))));
|
13216
13185
|
};
|
13217
13186
|
var VideoWidget$3 = memo(VideoWidget$2);
|
13218
13187
|
|
@@ -13232,8 +13201,8 @@ const ToggleButton = ({ defaultValue, activeIcon, unactiveIcon, onChange, style
|
|
13232
13201
|
setIsTure(result);
|
13233
13202
|
onChange === null || onChange === void 0 ? void 0 : onChange(result);
|
13234
13203
|
};
|
13235
|
-
return (React.createElement("button", { style: style, className: 'pb-toggle-button', onClick: handleClick },
|
13236
|
-
React.createElement("img", { className: 'pb-toggle-button-icon', src: isTrue ? activeIcon : unactiveIcon })));
|
13204
|
+
return (React.createElement("button", { style: style, "aria-label": 'toggle button', className: 'pb-toggle-button', onClick: handleClick },
|
13205
|
+
React.createElement("img", { className: 'pb-toggle-button-icon', alt: 'toggle image', src: isTrue ? activeIcon : unactiveIcon })));
|
13237
13206
|
};
|
13238
13207
|
var ToggleButton$1 = memo(ToggleButton);
|
13239
13208
|
|
@@ -13258,7 +13227,7 @@ const FingerSwipeTip = ({ imageUrl, style }) => {
|
|
13258
13227
|
return show ? 'pb-fadeIn' : 'pb-fadeOut';
|
13259
13228
|
}, [show]);
|
13260
13229
|
return (React.createElement("div", { hidden: !show, className: `pb-finger-wrap ${animationCls}`, style: style },
|
13261
|
-
React.createElement("img", { src: imageUrl || FINGER_SWIPE_ICON })));
|
13230
|
+
React.createElement("img", { src: imageUrl || FINGER_SWIPE_ICON, alt: 'finger swiper' })));
|
13262
13231
|
};
|
13263
13232
|
|
13264
13233
|
/*
|
@@ -13520,7 +13489,7 @@ const Nudge = ({ nudge }) => {
|
|
13520
13489
|
backgroundColor: nudge === null || nudge === void 0 ? void 0 : nudge.backgroundColor,
|
13521
13490
|
borderRadius: (_f = nudge === null || nudge === void 0 ? void 0 : nudge.borderRadius) !== null && _f !== void 0 ? _f : 4
|
13522
13491
|
} },
|
13523
|
-
(nudge === null || nudge === void 0 ? void 0 : nudge.icon) ? React.createElement("img", { src: nudge.icon, style: { height: '100%', objectFit: 'cover', flexShrink: 0 } }) : null,
|
13492
|
+
(nudge === null || nudge === void 0 ? void 0 : nudge.icon) ? (React.createElement("img", { src: nudge.icon, alt: 'nudge icon', style: { height: '100%', objectFit: 'cover', flexShrink: 0 } })) : null,
|
13524
13493
|
React.createElement("p", { style: Object.assign(Object.assign({}, nudge === null || nudge === void 0 ? void 0 : nudge.textStyle), { textWrap: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', flex: 1, marginBottom: 0 }) }, (_g = nudge === null || nudge === void 0 ? void 0 : nudge.content) !== null && _g !== void 0 ? _g : '')))));
|
13525
13494
|
};
|
13526
13495
|
|
@@ -13528,14 +13497,12 @@ const Nudge = ({ nudge }) => {
|
|
13528
13497
|
* @Author: binruan@chatlabs.com
|
13529
13498
|
* @Date: 2024-04-29 16:32:21
|
13530
13499
|
* @LastEditors: binruan@chatlabs.com
|
13531
|
-
* @LastEditTime: 2024-06-
|
13500
|
+
* @LastEditTime: 2024-06-20 10:53:08
|
13532
13501
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\Tagbar.tsx
|
13533
13502
|
*
|
13534
13503
|
*/
|
13535
|
-
const DEFAULT_TAG = 'FOR U';
|
13536
13504
|
const Tagbar = ({ tagList = [], setActiveIndex }) => {
|
13537
|
-
const
|
13538
|
-
const { getRecommendVideos, setRtcList, setCacheRtcList, setCacheActiveIndex, setLoading, swiperRef, waterFallData, bffEventReport } = useSxpDataSource();
|
13505
|
+
const { getRecommendVideos, setRtcList, setCacheRtcList, setCacheActiveIndex, setLoading, swiperRef, waterFallData, bffEventReport, selectTag, setSelectTag } = useSxpDataSource();
|
13539
13506
|
const { backMainFeed } = useEventReport();
|
13540
13507
|
const realTagList = useMemo(() => {
|
13541
13508
|
return [DEFAULT_TAG, ...tagList];
|
@@ -13548,12 +13515,12 @@ const Tagbar = ({ tagList = [], setActiveIndex }) => {
|
|
13548
13515
|
eventInfo: {
|
13549
13516
|
eventSubject: 'clickThemeTagsViewContents',
|
13550
13517
|
eventDescription: 'click Theme Tags View Contents',
|
13551
|
-
themeTags: `[${tag}]`
|
13518
|
+
themeTags: `['${tag}']`
|
13552
13519
|
}
|
13553
13520
|
});
|
13554
13521
|
}
|
13555
13522
|
else {
|
13556
|
-
backMainFeed('theme', selectTag);
|
13523
|
+
backMainFeed('theme', tag, selectTag);
|
13557
13524
|
}
|
13558
13525
|
let themeTag;
|
13559
13526
|
if (tag !== DEFAULT_TAG) {
|
@@ -13571,7 +13538,7 @@ const Tagbar = ({ tagList = [], setActiveIndex }) => {
|
|
13571
13538
|
}).finally(() => {
|
13572
13539
|
setLoading === null || setLoading === void 0 ? void 0 : setLoading(false);
|
13573
13540
|
});
|
13574
|
-
setSelectTag(tag);
|
13541
|
+
setSelectTag === null || setSelectTag === void 0 ? void 0 : setSelectTag(tag);
|
13575
13542
|
};
|
13576
13543
|
if (waterFallData || tagList.length <= 0)
|
13577
13544
|
return null;
|
@@ -13586,7 +13553,7 @@ var Tagbar$1 = memo(Tagbar);
|
|
13586
13553
|
* @Author: binruan@chatlabs.com
|
13587
13554
|
* @Date: 2024-01-15 19:03:09
|
13588
13555
|
* @LastEditors: binruan@chatlabs.com
|
13589
|
-
* @LastEditTime: 2024-06-
|
13556
|
+
* @LastEditTime: 2024-06-20 15:54:53
|
13590
13557
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
|
13591
13558
|
*
|
13592
13559
|
*/
|
@@ -13595,12 +13562,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
13595
13562
|
const { schema } = useEditor();
|
13596
13563
|
const [activeIndex, setActiveIndex] = useState(0);
|
13597
13564
|
const viewImageStartTime = useRef(0);
|
13598
|
-
|
13565
|
+
useState(false);
|
13599
13566
|
const [isMuted, setIsMuted] = useState(true);
|
13600
13567
|
const viewTime = useRef();
|
13601
13568
|
const [isLoadMore, setIsLoadMore] = useState(false);
|
13602
13569
|
const [isShowMore, setIsShowMore] = useState(false);
|
13603
|
-
const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink } = useSxpDataSource();
|
13570
|
+
const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink, isShowConsent, selectTag } = useSxpDataSource();
|
13604
13571
|
const { backMainFeed } = useEventReport();
|
13605
13572
|
const [videoRef, setVideoRef] = useState(null);
|
13606
13573
|
const playerRef = useRef();
|
@@ -13608,21 +13575,29 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
13608
13575
|
const isShowFingerTip = useMemo(() => {
|
13609
13576
|
return data.length > 0 && !loading && getFeUserId();
|
13610
13577
|
}, [data, loading]);
|
13611
|
-
|
13612
|
-
|
13613
|
-
|
13578
|
+
useEffect(() => {
|
13579
|
+
refreshFeSessionId();
|
13580
|
+
}, []);
|
13581
|
+
useEffect(() => {
|
13582
|
+
if ((data === null || data === void 0 ? void 0 : data.length) > 0) {
|
13583
|
+
const now = new Date();
|
13584
|
+
viewTime.current = now;
|
13585
|
+
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
13586
|
+
eventName: 'PageView'
|
13587
|
+
});
|
13614
13588
|
}
|
13589
|
+
}, [data === null || data === void 0 ? void 0 : data.length]);
|
13590
|
+
const handleH5EnterLink = useCallback(() => {
|
13615
13591
|
refreshFeSessionId();
|
13616
|
-
|
13617
|
-
|
13618
|
-
|
13619
|
-
|
13592
|
+
h5EnterLink === null || h5EnterLink === void 0 ? void 0 : h5EnterLink();
|
13593
|
+
if (data.length > 0) {
|
13594
|
+
const now = new Date();
|
13595
|
+
viewTime.current = now;
|
13596
|
+
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
13597
|
+
eventName: 'PageView'
|
13598
|
+
});
|
13620
13599
|
}
|
13621
|
-
|
13622
|
-
eventName: 'PageView'
|
13623
|
-
});
|
13624
|
-
setIsInit(true);
|
13625
|
-
}, [data.length, bffFbReport, h5EnterLink, isInit]);
|
13600
|
+
}, [data.length, bffFbReport, h5EnterLink]);
|
13626
13601
|
const firstRef = useRef();
|
13627
13602
|
useEffect(() => {
|
13628
13603
|
var _a, _b, _c, _d;
|
@@ -13650,10 +13625,6 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
13650
13625
|
});
|
13651
13626
|
}
|
13652
13627
|
}, [videoRef, licenseUrl, data]);
|
13653
|
-
useEffect(() => {
|
13654
|
-
if (!isInit)
|
13655
|
-
handleH5EnterLink();
|
13656
|
-
}, [handleH5EnterLink, isInit]);
|
13657
13628
|
useEffect(() => {
|
13658
13629
|
var _a;
|
13659
13630
|
const index = (data === null || data === void 0 ? void 0 : data.findIndex((item) => {
|
@@ -13674,10 +13645,11 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
13674
13645
|
const item = data === null || data === void 0 ? void 0 : data[activeIndex];
|
13675
13646
|
const visibleChange = () => {
|
13676
13647
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
13648
|
+
const repCond = !openHashtag && !isShowConsent;
|
13677
13649
|
if (document.visibilityState === 'hidden') {
|
13678
13650
|
// 当用户导航到新页面、切换标签页、关闭标签页、最小化或关闭浏览器、刷新原页面(即离开原页面时),或者在移动设备上从浏览器切换到不同的应用程序时
|
13679
13651
|
// 移动端h5直接杀掉浏览器或宿主app时不会触发,pc端直接杀掉标签页时能触发
|
13680
|
-
if (
|
13652
|
+
if (repCond) {
|
13681
13653
|
SXP_EVENT_BUS.emit(SXP_EVENT_TYPE.PAGE_DID_HIDE, item);
|
13682
13654
|
handleReportViewImageEnd(item);
|
13683
13655
|
handleReportProductView(item);
|
@@ -13718,11 +13690,11 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
13718
13690
|
else if (document.visibilityState === 'visible') {
|
13719
13691
|
// 页面可见时触发,注意页面初始化时不会触发
|
13720
13692
|
handleH5EnterLink();
|
13721
|
-
if (
|
13693
|
+
if (repCond) {
|
13722
13694
|
handleViewImageStartEvent(activeIndex);
|
13723
13695
|
SXP_EVENT_BUS.emit(SXP_EVENT_TYPE.PAGE_DID_SHOW, item);
|
13696
|
+
backMainFeed('external', selectTag);
|
13724
13697
|
}
|
13725
|
-
backMainFeed('external');
|
13726
13698
|
}
|
13727
13699
|
};
|
13728
13700
|
document.addEventListener('visibilitychange', visibleChange);
|
@@ -13739,17 +13711,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
13739
13711
|
tempMap,
|
13740
13712
|
curTime,
|
13741
13713
|
backMainFeed,
|
13742
|
-
openHashtag
|
13714
|
+
openHashtag,
|
13715
|
+
isShowConsent,
|
13716
|
+
selectTag
|
13743
13717
|
]);
|
13744
|
-
useEffect(() => {
|
13745
|
-
const initTime = () => {
|
13746
|
-
backMainFeed('external');
|
13747
|
-
};
|
13748
|
-
window.addEventListener('pageshow', initTime);
|
13749
|
-
return () => {
|
13750
|
-
window.removeEventListener('pageshow', initTime);
|
13751
|
-
};
|
13752
|
-
}, []);
|
13753
13718
|
const tagHeight = useMemo(() => {
|
13754
13719
|
let h = 0;
|
13755
13720
|
if (tagList.length > 0) {
|
@@ -14022,24 +13987,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
14022
13987
|
});
|
14023
13988
|
}
|
14024
13989
|
}
|
14025
|
-
},
|
14026
|
-
// style={{
|
14027
|
-
// pointerEvents: canSwiper ? 'auto' : 'none'
|
14028
|
-
// }}
|
14029
|
-
// onReachEnd={() => {
|
14030
|
-
// // 由hashtaglist跳转过来时不执行下面的方法
|
14031
|
-
// if (waterFallData) return;
|
14032
|
-
// if (!isLoadMore) {
|
14033
|
-
// console.log('trigger load 2');
|
14034
|
-
// setIsLoadMore(true);
|
14035
|
-
// loadVideos?.(Math.ceil(activeIndex / 10) + 1).then(() => {
|
14036
|
-
// setIsLoadMore(false);
|
14037
|
-
// });
|
14038
|
-
// }
|
14039
|
-
// }}
|
14040
|
-
// modules={[Virtual]}
|
14041
|
-
// virtual={{ enabled: true, cache: true }}
|
14042
|
-
direction: 'vertical', height: height },
|
13990
|
+
}, direction: 'vertical', height: height },
|
14043
13991
|
React.createElement(ToggleButton$1, { style: {
|
14044
13992
|
position: 'fixed',
|
14045
13993
|
visibility: ((_c = (_b = data === null || data === void 0 ? void 0 : data[activeIndex]) === null || _b === void 0 ? void 0 : _b.video) === null || _c === void 0 ? void 0 : _c.url) ? 'visible' : 'hidden',
|
@@ -14238,7 +14186,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
|
|
14238
14186
|
if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
|
14239
14187
|
return null;
|
14240
14188
|
}
|
14241
|
-
return (React.createElement("img", { style: { position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', objectFit: 'cover' }, src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image }));
|
14189
|
+
return (React.createElement("img", { style: { position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', objectFit: 'cover' }, src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, alt: 'video poster' }));
|
14242
14190
|
}, [isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
|
14243
14191
|
useEffect(() => {
|
14244
14192
|
const handleBeforeUnload = () => {
|
@@ -14287,7 +14235,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
|
|
14287
14235
|
height,
|
14288
14236
|
objectFit: 'contain'
|
14289
14237
|
} }),
|
14290
|
-
React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON }))),
|
14238
|
+
React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON, alt: 'video pause image' }))),
|
14291
14239
|
renderPoster)) : (React.createElement("div", { className: 'video-container', key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, onClick: handleClickVideo(), style: {
|
14292
14240
|
position: 'relative',
|
14293
14241
|
width,
|
@@ -14296,7 +14244,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
|
|
14296
14244
|
} },
|
14297
14245
|
React.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', style: { width: '100%' }, ref: videoRef, crossOrigin: 'anonymous', muted: true, autoPlay: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart }),
|
14298
14246
|
renderPoster,
|
14299
|
-
React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })))));
|
14247
|
+
React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON, alt: 'video pause image' })))));
|
14300
14248
|
};
|
14301
14249
|
var VideoWidget$1 = memo(VideoWidget);
|
14302
14250
|
|
@@ -14573,4 +14521,3 @@ function useEditorDataProvider() {
|
|
14573
14521
|
*/
|
14574
14522
|
|
14575
14523
|
export { index$1 as DiyPortalPreview, EditorDataProvider, Modal$1 as Modal, SxpDataSourceProvider$1 as SxpDataSourceProvider, index as SxpPageCore, SxpPageRender, index$2 as core, Pagebuilder as default, defaultSetting, _materials_ as materials, useEditorDataProvider };
|
14576
|
-
//# sourceMappingURL=index.js.map
|