pb-sxp-ui 1.16.4 → 1.16.6
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 +165 -128
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +3 -3
- package/dist/index.js +165 -128
- package/dist/index.js.map +1 -1
- package/dist/index.min.cjs +6 -6
- package/dist/index.min.cjs.map +1 -1
- package/dist/index.min.js +6 -6
- package/dist/index.min.js.map +1 -1
- package/dist/pb-ui.js +165 -128
- package/dist/pb-ui.js.map +1 -1
- package/dist/pb-ui.min.js +6 -6
- 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 +17 -15
- package/es/core/components/SxpPageRender/PictureGroup/index.d.ts +5 -0
- package/es/core/components/SxpPageRender/PictureGroup/index.js +42 -13
- package/es/core/components/SxpPageRender/VideoWidget/index.js +34 -44
- package/es/core/components/SxpPageRender/WaterFall/index.js +4 -3
- package/es/core/components/SxpPageRender/index.js +49 -37
- package/es/core/context/SxpDataSourceProvider.js +2 -2
- 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 +17 -15
- package/lib/core/components/SxpPageRender/PictureGroup/index.d.ts +5 -0
- package/lib/core/components/SxpPageRender/PictureGroup/index.js +41 -12
- package/lib/core/components/SxpPageRender/VideoWidget/index.js +34 -44
- package/lib/core/components/SxpPageRender/WaterFall/index.js +4 -3
- package/lib/core/components/SxpPageRender/index.js +49 -37
- package/lib/core/context/SxpDataSourceProvider.js +2 -2
- package/lib/core/hooks/useEventReport.js +6 -5
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -44,7 +44,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
|
44
44
|
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
45
45
|
PERFORMANCE OF THIS SOFTWARE.
|
|
46
46
|
***************************************************************************** */
|
|
47
|
-
/* global Reflect, Promise, SuppressedError, Symbol
|
|
47
|
+
/* global Reflect, Promise, SuppressedError, Symbol */
|
|
48
48
|
|
|
49
49
|
|
|
50
50
|
function __rest(s, e) {
|
|
@@ -1086,7 +1086,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
|
1086
1086
|
}
|
|
1087
1087
|
}), [bffFetch, utmVal]);
|
|
1088
1088
|
const ctaEvent = React.useCallback((eventInfo, rec, product, position) => {
|
|
1089
|
-
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;
|
|
1089
|
+
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;
|
|
1090
1090
|
const cta = product === null || product === void 0 ? void 0 : product.bindCta;
|
|
1091
1091
|
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);
|
|
1092
1092
|
let fromKName = '';
|
|
@@ -1104,7 +1104,7 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
|
1104
1104
|
}
|
|
1105
1105
|
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;
|
|
1106
1106
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
|
1107
|
-
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: (
|
|
1107
|
+
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 })
|
|
1108
1108
|
});
|
|
1109
1109
|
}, [bffEventReport, isFromHashtag]);
|
|
1110
1110
|
const h5EnterLink = React.useCallback(() => {
|
|
@@ -1765,14 +1765,14 @@ var settingRender$f = [
|
|
|
1765
1765
|
* @Author: binruan@chatlabs.com
|
|
1766
1766
|
* @Date: 2024-03-12 10:59:06
|
|
1767
1767
|
* @LastEditors: binruan@chatlabs.com
|
|
1768
|
-
* @LastEditTime:
|
|
1768
|
+
* @LastEditTime: 2025-05-09 15:30:59
|
|
1769
1769
|
* @FilePath: \pb-sxp-ui\src\core\hooks\useEventReport.ts
|
|
1770
1770
|
*
|
|
1771
1771
|
*/
|
|
1772
1772
|
function useEventReport() {
|
|
1773
1773
|
const { bffEventReport, popupDetailData, isFromHashtag, eventTimeList, setEventTimeList } = useSxpDataSource();
|
|
1774
1774
|
const jumpToWeb = React.useCallback((e, data, product, cta, position, traceInfo) => {
|
|
1775
|
-
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;
|
|
1775
|
+
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;
|
|
1776
1776
|
const i = eventTimeList === null || eventTimeList === void 0 ? void 0 : eventTimeList.findIndex((item) => item.target === (e === null || e === void 0 ? void 0 : e.target));
|
|
1777
1777
|
if (i !== -1) {
|
|
1778
1778
|
return;
|
|
@@ -1805,11 +1805,11 @@ function useEventReport() {
|
|
|
1805
1805
|
contentFormat = 'image';
|
|
1806
1806
|
}
|
|
1807
1807
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
|
1808
|
-
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 : '',
|
|
1808
|
+
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 }))
|
|
1809
1809
|
});
|
|
1810
1810
|
}, [bffEventReport, popupDetailData, isFromHashtag, eventTimeList]);
|
|
1811
1811
|
const productView = React.useCallback((data, product, cta, viewTime, position) => {
|
|
1812
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
|
|
1812
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
|
|
1813
1813
|
let fromKName = '';
|
|
1814
1814
|
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))) {
|
|
1815
1815
|
fromKName = 'pdpPage';
|
|
@@ -1828,8 +1828,9 @@ function useEventReport() {
|
|
|
1828
1828
|
contentTags: JSON.stringify(product === null || product === void 0 ? void 0 : product.tags),
|
|
1829
1829
|
position: position + '',
|
|
1830
1830
|
contentId: (_d = data === null || data === void 0 ? void 0 : data.video) === null || _d === void 0 ? void 0 : _d.itemId,
|
|
1831
|
+
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 : '',
|
|
1831
1832
|
ctatId: cta === null || cta === void 0 ? void 0 : cta.itemId,
|
|
1832
|
-
traceInfo: (
|
|
1833
|
+
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 : '',
|
|
1833
1834
|
timeOnSite: Math.floor((new Date() - viewTime) / 1000) + '',
|
|
1834
1835
|
eventSubject: 'productView',
|
|
1835
1836
|
eventDescription: 'User browsed the product'
|
|
@@ -15632,7 +15633,7 @@ function WaterfallList(_a) {
|
|
|
15632
15633
|
* @Author: binruan@chatlabs.com
|
|
15633
15634
|
* @Date: 2024-01-10 10:58:24
|
|
15634
15635
|
* @LastEditors: binruan@chatlabs.com
|
|
15635
|
-
* @LastEditTime: 2025-
|
|
15636
|
+
* @LastEditTime: 2025-05-09 15:30:41
|
|
15636
15637
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\WaterFall\index.tsx
|
|
15637
15638
|
*
|
|
15638
15639
|
*/
|
|
@@ -15670,7 +15671,7 @@ const WaterFall = (props) => {
|
|
|
15670
15671
|
}
|
|
15671
15672
|
}, [waterFallData]);
|
|
15672
15673
|
const reportTagsView = React.useCallback(() => {
|
|
15673
|
-
var _a, _b, _c, _d, _e, _f;
|
|
15674
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
15674
15675
|
const rec = recData === null || recData === void 0 ? void 0 : recData.rec;
|
|
15675
15676
|
if (!rec)
|
|
15676
15677
|
return;
|
|
@@ -15690,9 +15691,10 @@ const WaterFall = (props) => {
|
|
|
15690
15691
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
|
15691
15692
|
eventInfo: {
|
|
15692
15693
|
contentId: (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.itemId,
|
|
15694
|
+
sceneId: (_g = (_f = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.scene) === null || _f === void 0 ? void 0 : _f.sceneId) !== null && _g !== void 0 ? _g : '',
|
|
15693
15695
|
position: cacheActiveIndex + '',
|
|
15694
|
-
contentTags: JSON.stringify((
|
|
15695
|
-
traceInfo: (
|
|
15696
|
+
contentTags: JSON.stringify((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.tags),
|
|
15697
|
+
traceInfo: (_j = rec === null || rec === void 0 ? void 0 : rec.video) === null || _j === void 0 ? void 0 : _j.traceInfo,
|
|
15696
15698
|
hashTags: JSON.stringify([recData === null || recData === void 0 ? void 0 : recData.hashTag]),
|
|
15697
15699
|
fromKName,
|
|
15698
15700
|
fromKPage: location === null || location === void 0 ? void 0 : location.href,
|
|
@@ -17774,7 +17776,7 @@ const LikeButton = (_a) => {
|
|
|
17774
17776
|
const likeIcon = useIconLink(defaultLikeIconPath$2);
|
|
17775
17777
|
const unlikeIcon = useIconLink(defaultUnLikeIconPath$2);
|
|
17776
17778
|
const handleClick = lodash.debounce(() => __awaiter(void 0, void 0, void 0, function* () {
|
|
17777
|
-
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
|
|
17779
|
+
var _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;
|
|
17778
17780
|
if (state) {
|
|
17779
17781
|
// 先设置状态
|
|
17780
17782
|
setState(false);
|
|
@@ -17784,11 +17786,12 @@ const LikeButton = (_a) => {
|
|
|
17784
17786
|
eventSubject: 'favoriteContentCanceled',
|
|
17785
17787
|
eventDescription: 'This content was unfavorite by the user',
|
|
17786
17788
|
contentId: (_g = (_f = recData === null || recData === void 0 ? void 0 : recData.video) === null || _f === void 0 ? void 0 : _f.itemId) !== null && _g !== void 0 ? _g : '',
|
|
17787
|
-
|
|
17788
|
-
|
|
17789
|
+
sceneId: (_k = (_j = (_h = recData === null || recData === void 0 ? void 0 : recData.video) === null || _h === void 0 ? void 0 : _h.scene) === null || _j === void 0 ? void 0 : _j.sceneId) !== null && _k !== void 0 ? _k : '',
|
|
17790
|
+
contentName: (_m = (_l = recData === null || recData === void 0 ? void 0 : recData.video) === null || _l === void 0 ? void 0 : _l.title) !== null && _m !== void 0 ? _m : '',
|
|
17791
|
+
contentTags: JSON.stringify((_p = (_o = recData === null || recData === void 0 ? void 0 : recData.video) === null || _o === void 0 ? void 0 : _o.tags) !== null && _p !== void 0 ? _p : []),
|
|
17789
17792
|
position: position + '',
|
|
17790
|
-
contentFormat: ((
|
|
17791
|
-
traceInfo: (
|
|
17793
|
+
contentFormat: ((_q = recData === null || recData === void 0 ? void 0 : recData.video) === null || _q === void 0 ? void 0 : _q.url) ? 'video' : 'image',
|
|
17794
|
+
traceInfo: (_r = recData === null || recData === void 0 ? void 0 : recData.video) === null || _r === void 0 ? void 0 : _r.traceInfo
|
|
17792
17795
|
}
|
|
17793
17796
|
});
|
|
17794
17797
|
// 如果接口调用失败，则回滚状态
|
|
@@ -17796,40 +17799,41 @@ const LikeButton = (_a) => {
|
|
|
17796
17799
|
setState(true);
|
|
17797
17800
|
}
|
|
17798
17801
|
else {
|
|
17799
|
-
const nRtcList = (
|
|
17802
|
+
const nRtcList = (_s = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.map((item, index) => {
|
|
17800
17803
|
if (index === position) {
|
|
17801
17804
|
item.isCollected = false;
|
|
17802
17805
|
}
|
|
17803
17806
|
return item;
|
|
17804
|
-
})) !== null &&
|
|
17807
|
+
})) !== null && _s !== void 0 ? _s : [];
|
|
17805
17808
|
setCacheRtcList === null || setCacheRtcList === void 0 ? void 0 : setCacheRtcList(nRtcList);
|
|
17806
17809
|
}
|
|
17807
17810
|
}
|
|
17808
17811
|
else {
|
|
17809
17812
|
setState(true);
|
|
17810
|
-
const result = (
|
|
17813
|
+
const result = (_t = (yield (mutateLike === null || mutateLike === void 0 ? void 0 : mutateLike({ content: JSON.stringify(recData) })))) !== null && _t !== void 0 ? _t : false;
|
|
17811
17814
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
|
17812
17815
|
eventInfo: {
|
|
17813
17816
|
eventSubject: 'favoriteContent',
|
|
17814
17817
|
eventDescription: 'This content was favorite by the user',
|
|
17815
|
-
contentId: (
|
|
17816
|
-
|
|
17817
|
-
|
|
17818
|
+
contentId: (_v = (_u = recData === null || recData === void 0 ? void 0 : recData.video) === null || _u === void 0 ? void 0 : _u.itemId) !== null && _v !== void 0 ? _v : '',
|
|
17819
|
+
sceneId: (_y = (_x = (_w = recData === null || recData === void 0 ? void 0 : recData.video) === null || _w === void 0 ? void 0 : _w.scene) === null || _x === void 0 ? void 0 : _x.sceneId) !== null && _y !== void 0 ? _y : '',
|
|
17820
|
+
contentName: (_0 = (_z = recData === null || recData === void 0 ? void 0 : recData.video) === null || _z === void 0 ? void 0 : _z.title) !== null && _0 !== void 0 ? _0 : '',
|
|
17821
|
+
contentTags: JSON.stringify((_2 = (_1 = recData === null || recData === void 0 ? void 0 : recData.video) === null || _1 === void 0 ? void 0 : _1.tags) !== null && _2 !== void 0 ? _2 : []),
|
|
17818
17822
|
position: position + '',
|
|
17819
|
-
contentFormat: ((
|
|
17820
|
-
traceInfo: (
|
|
17823
|
+
contentFormat: ((_3 = recData === null || recData === void 0 ? void 0 : recData.video) === null || _3 === void 0 ? void 0 : _3.url) ? 'video' : 'image',
|
|
17824
|
+
traceInfo: (_4 = recData === null || recData === void 0 ? void 0 : recData.video) === null || _4 === void 0 ? void 0 : _4.traceInfo
|
|
17821
17825
|
}
|
|
17822
17826
|
});
|
|
17823
17827
|
if (!result) {
|
|
17824
17828
|
setState(false);
|
|
17825
17829
|
}
|
|
17826
17830
|
else {
|
|
17827
|
-
const nRtcList = (
|
|
17831
|
+
const nRtcList = (_5 = cacheRtcList === null || cacheRtcList === void 0 ? void 0 : cacheRtcList.map((item, index) => {
|
|
17828
17832
|
if (index === position) {
|
|
17829
17833
|
item.isCollected = true;
|
|
17830
17834
|
}
|
|
17831
17835
|
return item;
|
|
17832
|
-
})) !== null &&
|
|
17836
|
+
})) !== null && _5 !== void 0 ? _5 : [];
|
|
17833
17837
|
setCacheRtcList === null || setCacheRtcList === void 0 ? void 0 : setCacheRtcList(nRtcList);
|
|
17834
17838
|
}
|
|
17835
17839
|
}
|
|
@@ -17932,6 +17936,26 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
|
17932
17936
|
return;
|
|
17933
17937
|
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
|
17934
17938
|
}, [videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
|
17939
|
+
const handleEnd = () => {
|
|
17940
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
17941
|
+
if (!videoRef.current)
|
|
17942
|
+
return;
|
|
17943
|
+
if (isDiyH5) {
|
|
17944
|
+
(_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
|
|
17945
|
+
if (!loopPlayRef.current)
|
|
17946
|
+
return;
|
|
17947
|
+
if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
|
|
17948
|
+
(_c = (_b = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _b === void 0 ? void 0 : _b.swiper) === null || _c === void 0 ? void 0 : _c.slideTo(0);
|
|
17949
|
+
}
|
|
17950
|
+
else {
|
|
17951
|
+
const i = (_e = (_d = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _d === void 0 ? void 0 : _d.swiper) === null || _e === void 0 ? void 0 : _e.activeIndex;
|
|
17952
|
+
(_g = (_f = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _f === void 0 ? void 0 : _f.swiper) === null || _g === void 0 ? void 0 : _g.slideTo(i + 1);
|
|
17953
|
+
}
|
|
17954
|
+
}
|
|
17955
|
+
else {
|
|
17956
|
+
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.play();
|
|
17957
|
+
}
|
|
17958
|
+
};
|
|
17935
17959
|
const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
|
|
17936
17960
|
const handlePlaying = React.useCallback(() => {
|
|
17937
17961
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
|
@@ -17940,7 +17964,7 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
|
17940
17964
|
setIsLoadFinish(true);
|
|
17941
17965
|
}, []);
|
|
17942
17966
|
const handleStartPlay = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
|
|
17943
|
-
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
|
17967
|
+
var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
|
|
17944
17968
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
|
17945
17969
|
return;
|
|
17946
17970
|
setIsPauseVideo(false);
|
|
@@ -17951,16 +17975,11 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
|
17951
17975
|
const videoCurrentTime = ((_h = (_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.currentTime) !== null && _h !== void 0 ? _h : 0).toFixed(2);
|
|
17952
17976
|
const playType = (isFirstPlayRef === null || isFirstPlayRef === void 0 ? void 0 : isFirstPlayRef.current) ? '0' : '1';
|
|
17953
17977
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
|
17954
|
-
eventInfo: Object.assign({ eventSubject: 'playVideo', eventDescription: 'User played the video', contentId: (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.itemId) !== null && _k !== void 0 ? _k : '',
|
|
17978
|
+
eventInfo: Object.assign({ eventSubject: 'playVideo', eventDescription: 'User played the video', contentId: (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.itemId) !== null && _k !== void 0 ? _k : '', sceneId: (_o = (_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.scene) === null || _m === void 0 ? void 0 : _m.sceneId) !== null && _o !== void 0 ? _o : '', contentName: (_q = (_p = item === null || item === void 0 ? void 0 : item.video) === null || _p === void 0 ? void 0 : _p.title) !== null && _q !== void 0 ? _q : '', playType, startTime: videoCurrentTime, videoDuration, contentTags: JSON.stringify((_s = (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.tags) !== null && _s !== void 0 ? _s : []), position: index + '', contentFormat: 'video', traceInfo: (_t = item === null || item === void 0 ? void 0 : item.video) === null || _t === void 0 ? void 0 : _t.traceInfo }, ((isFirstPlayRef === null || isFirstPlayRef === void 0 ? void 0 : isFirstPlayRef.current) && { loadTime: (loadedTimeRef === null || loadedTimeRef === void 0 ? void 0 : loadedTimeRef.current) - (initTimeRef === null || initTimeRef === void 0 ? void 0 : initTimeRef.current) + '' }))
|
|
17955
17979
|
});
|
|
17956
17980
|
isFirstPlayRef.current = false;
|
|
17957
17981
|
}
|
|
17958
17982
|
}), [bffEventReport, data, index, isFirstPlayRef, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
|
17959
|
-
const setCurrentTimeByStartTime = React.useCallback(() => {
|
|
17960
|
-
if (isDiyH5) {
|
|
17961
|
-
videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
|
|
17962
|
-
}
|
|
17963
|
-
}, []);
|
|
17964
17983
|
const handLoadeddata = React.useCallback(() => {
|
|
17965
17984
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || firstFrameSrc || !blur)
|
|
17966
17985
|
return;
|
|
@@ -17985,13 +18004,12 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
|
17985
18004
|
const handleLoadedmetadata = React.useCallback(() => {
|
|
17986
18005
|
if (!videoRef.current)
|
|
17987
18006
|
return;
|
|
17988
|
-
setCurrentTimeByStartTime();
|
|
17989
18007
|
loadedTimeRef.current = new Date();
|
|
17990
18008
|
handleStartPlay();
|
|
17991
18009
|
handLoadeddata();
|
|
17992
18010
|
}, [videoRef.current, handLoadeddata, handleStartPlay]);
|
|
17993
18011
|
const handleClickVideo = React.useCallback((type) => () => {
|
|
17994
|
-
var _a, _b, _c, _d, _e
|
|
18012
|
+
var _a, _b, _c, _d, _e;
|
|
17995
18013
|
if (!videoRef.current)
|
|
17996
18014
|
return;
|
|
17997
18015
|
if (!isLoadFinish)
|
|
@@ -18012,20 +18030,17 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
|
18012
18030
|
break;
|
|
18013
18031
|
default:
|
|
18014
18032
|
if (isPause) {
|
|
18015
|
-
|
|
18016
|
-
videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
|
|
18017
|
-
}
|
|
18018
|
-
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
|
|
18033
|
+
(_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
|
|
18019
18034
|
}
|
|
18020
18035
|
else {
|
|
18021
|
-
(
|
|
18036
|
+
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
|
|
18022
18037
|
}
|
|
18023
18038
|
setIsPauseVideo(!isPause);
|
|
18024
18039
|
break;
|
|
18025
18040
|
}
|
|
18026
18041
|
}, [isLoadFinish, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
|
18027
18042
|
const handlePause = React.useCallback(() => {
|
|
18028
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
18043
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
18029
18044
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
|
18030
18045
|
return;
|
|
18031
18046
|
if (activeIndex !== index)
|
|
@@ -18041,14 +18056,15 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
|
18041
18056
|
eventSubject: 'playOverVideo',
|
|
18042
18057
|
eventDescription: 'User finished playing the video',
|
|
18043
18058
|
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 : '',
|
|
18044
|
-
|
|
18059
|
+
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 : '',
|
|
18060
|
+
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 : '',
|
|
18045
18061
|
endTime: videoCurrentTime,
|
|
18046
18062
|
videoDuration,
|
|
18047
18063
|
playDuration,
|
|
18048
|
-
contentTags: JSON.stringify((
|
|
18064
|
+
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 : []),
|
|
18049
18065
|
position: index + '',
|
|
18050
18066
|
contentFormat: 'video',
|
|
18051
|
-
traceInfo: (
|
|
18067
|
+
traceInfo: (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.traceInfo
|
|
18052
18068
|
}
|
|
18053
18069
|
});
|
|
18054
18070
|
}
|
|
@@ -18056,27 +18072,8 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
|
18056
18072
|
const handleWaiting = React.useCallback(() => {
|
|
18057
18073
|
setWaiting(true);
|
|
18058
18074
|
}, []);
|
|
18059
|
-
const handleTimeUpload = () => {
|
|
18060
|
-
if (!videoRef.current || !isDiyH5)
|
|
18061
|
-
return;
|
|
18062
|
-
setTimeout(() => {
|
|
18063
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
18064
|
-
if (Math.round((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) >= ((_b = scene === null || scene === void 0 ? void 0 : scene.endTime) !== null && _b !== void 0 ? _b : 0)) {
|
|
18065
|
-
(_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
|
|
18066
|
-
if (!loopPlayRef.current)
|
|
18067
|
-
return;
|
|
18068
|
-
if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
|
|
18069
|
-
(_e = (_d = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _d === void 0 ? void 0 : _d.swiper) === null || _e === void 0 ? void 0 : _e.slideTo(0);
|
|
18070
|
-
}
|
|
18071
|
-
else {
|
|
18072
|
-
const i = (_g = (_f = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _f === void 0 ? void 0 : _f.swiper) === null || _g === void 0 ? void 0 : _g.activeIndex;
|
|
18073
|
-
(_j = (_h = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _h === void 0 ? void 0 : _h.swiper) === null || _j === void 0 ? void 0 : _j.slideTo(i + 1);
|
|
18074
|
-
}
|
|
18075
|
-
}
|
|
18076
|
-
});
|
|
18077
|
-
};
|
|
18078
18075
|
React.useEffect(() => {
|
|
18079
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k
|
|
18076
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
18080
18077
|
if (!isActive)
|
|
18081
18078
|
return;
|
|
18082
18079
|
const videoSrc = videoUrl;
|
|
@@ -18097,7 +18094,6 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
|
18097
18094
|
hls === null || hls === void 0 ? void 0 : hls.attachMedia(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current);
|
|
18098
18095
|
hls === null || hls === void 0 ? void 0 : hls.on(Hls.Events.MANIFEST_PARSED, function () {
|
|
18099
18096
|
var _a;
|
|
18100
|
-
setCurrentTimeByStartTime();
|
|
18101
18097
|
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
|
18102
18098
|
});
|
|
18103
18099
|
}
|
|
@@ -18111,12 +18107,11 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
|
18111
18107
|
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.addEventListener('play', handleStartPlay);
|
|
18112
18108
|
(_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.addEventListener('playing', handlePlaying);
|
|
18113
18109
|
(_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.addEventListener('pause', handlePause);
|
|
18114
|
-
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.addEventListener('ended',
|
|
18110
|
+
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.addEventListener('ended', handleEnd);
|
|
18115
18111
|
(_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.addEventListener('canplay', handlePlay);
|
|
18116
18112
|
(_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.addEventListener('waiting', handleWaiting);
|
|
18117
|
-
(_l = videoRef.current) === null || _l === void 0 ? void 0 : _l.addEventListener('timeupdate', handleTimeUpload);
|
|
18118
18113
|
return () => {
|
|
18119
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k
|
|
18114
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
18120
18115
|
const isPause = (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
|
|
18121
18116
|
if (!isPause)
|
|
18122
18117
|
handlePause();
|
|
@@ -18128,10 +18123,9 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
|
18128
18123
|
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.removeEventListener('play', handleStartPlay);
|
|
18129
18124
|
(_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.removeEventListener('playing', handlePlaying);
|
|
18130
18125
|
(_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.removeEventListener('pause', handlePause);
|
|
18131
|
-
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('ended',
|
|
18126
|
+
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('ended', handleEnd);
|
|
18132
18127
|
(_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.removeEventListener('canplay', handlePlay);
|
|
18133
18128
|
(_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.removeEventListener('waiting', handleWaiting);
|
|
18134
|
-
(_l = videoRef.current) === null || _l === void 0 ? void 0 : _l.removeEventListener('timeupdate', handleTimeUpload);
|
|
18135
18129
|
};
|
|
18136
18130
|
}, [isActive]);
|
|
18137
18131
|
React.useEffect(() => {
|
|
@@ -18342,19 +18336,48 @@ const Picture = (props) => {
|
|
|
18342
18336
|
}, onLoad: onShowFirstImage }))));
|
|
18343
18337
|
};
|
|
18344
18338
|
|
|
18345
|
-
const PictureGroup$4 = ({ imgUrls,
|
|
18339
|
+
const PictureGroup$4 = React.forwardRef(({ imgUrls, data, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig, swiperRef }, ref) => {
|
|
18346
18340
|
var _a, _b;
|
|
18347
18341
|
const { isActive } = useSwiperSlide();
|
|
18348
|
-
const { sxpParameter, openHashtag } = useSxpDataSource();
|
|
18342
|
+
const { sxpParameter, openHashtag, isDiyH5 } = useSxpDataSource();
|
|
18349
18343
|
const [isLoad, setIsLoad] = React.useState(false);
|
|
18350
18344
|
const [imgInfo, setImgInfo] = React.useState();
|
|
18351
18345
|
const [swiperActiveIndex, setSwiperActiveIndex] = React.useState(0);
|
|
18352
|
-
const
|
|
18346
|
+
const imgsSwiperRef = React.useRef();
|
|
18353
18347
|
const isFirstPlayRef = React.useRef(true);
|
|
18348
|
+
const loopPlayRef = React.useRef(true);
|
|
18354
18349
|
const initTime = new Date();
|
|
18350
|
+
React.useImperativeHandle(ref, () => {
|
|
18351
|
+
return {
|
|
18352
|
+
setLoopPlay(v) {
|
|
18353
|
+
loopPlayRef.current = v;
|
|
18354
|
+
}
|
|
18355
|
+
};
|
|
18356
|
+
});
|
|
18357
|
+
React.useEffect(() => {
|
|
18358
|
+
let timerId;
|
|
18359
|
+
if (isLoad && isActive && isDiyH5) {
|
|
18360
|
+
timerId = setTimeout(() => {
|
|
18361
|
+
var _a, _b, _c, _d, _e, _f;
|
|
18362
|
+
if (!loopPlayRef.current)
|
|
18363
|
+
return;
|
|
18364
|
+
if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
|
|
18365
|
+
(_b = (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.slideTo(0);
|
|
18366
|
+
}
|
|
18367
|
+
else {
|
|
18368
|
+
const i = (_d = (_c = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _c === void 0 ? void 0 : _c.swiper) === null || _d === void 0 ? void 0 : _d.activeIndex;
|
|
18369
|
+
(_f = (_e = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _e === void 0 ? void 0 : _e.swiper) === null || _f === void 0 ? void 0 : _f.slideTo(i + 1);
|
|
18370
|
+
}
|
|
18371
|
+
}, 3000);
|
|
18372
|
+
}
|
|
18373
|
+
return () => {
|
|
18374
|
+
if (timerId)
|
|
18375
|
+
clearTimeout(timerId);
|
|
18376
|
+
};
|
|
18377
|
+
}, [isLoad, isActive, isDiyH5, data, index, swiperRef]);
|
|
18355
18378
|
React.useEffect(() => {
|
|
18356
18379
|
if (isLoad && isActive) {
|
|
18357
|
-
(
|
|
18380
|
+
(imgsSwiperRef === null || imgsSwiperRef === void 0 ? void 0 : imgsSwiperRef.current) && imgsSwiperRef.current.swiper.autoplay.start();
|
|
18358
18381
|
if (openHashtag) {
|
|
18359
18382
|
onViewImageEndEvent(rec);
|
|
18360
18383
|
}
|
|
@@ -18364,7 +18387,7 @@ const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEven
|
|
|
18364
18387
|
}
|
|
18365
18388
|
}
|
|
18366
18389
|
else {
|
|
18367
|
-
(
|
|
18390
|
+
(imgsSwiperRef === null || imgsSwiperRef === void 0 ? void 0 : imgsSwiperRef.current) && imgsSwiperRef.current.swiper.autoplay.stop();
|
|
18368
18391
|
}
|
|
18369
18392
|
}, [rec, isActive, onViewImageEndEvent, openHashtag, index, onViewImageStartEvent, isLoad, imgInfo]);
|
|
18370
18393
|
const showFirstImageFn = React.useCallback((e) => __awaiter(void 0, void 0, void 0, function* () {
|
|
@@ -18391,13 +18414,13 @@ const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEven
|
|
|
18391
18414
|
};
|
|
18392
18415
|
}, [isActive, imgInfo]);
|
|
18393
18416
|
const handleMouseEnter = React.useCallback(() => {
|
|
18394
|
-
if (
|
|
18395
|
-
|
|
18417
|
+
if (imgsSwiperRef.current && imgsSwiperRef.current.swiper && isAlly) {
|
|
18418
|
+
imgsSwiperRef.current.swiper.autoplay.stop();
|
|
18396
18419
|
}
|
|
18397
18420
|
}, []);
|
|
18398
18421
|
const handleMouseLeave = React.useCallback(() => {
|
|
18399
|
-
if (
|
|
18400
|
-
|
|
18422
|
+
if (imgsSwiperRef.current && imgsSwiperRef.current.swiper && isAlly) {
|
|
18423
|
+
imgsSwiperRef.current.swiper.autoplay.start();
|
|
18401
18424
|
}
|
|
18402
18425
|
}, []);
|
|
18403
18426
|
const handleSlideChange = React.useCallback((swiper) => {
|
|
@@ -18418,7 +18441,7 @@ const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEven
|
|
|
18418
18441
|
enabled: true
|
|
18419
18442
|
}
|
|
18420
18443
|
}
|
|
18421
|
-
: {}), { loop: true, ref:
|
|
18444
|
+
: {}), { loop: true, ref: imgsSwiperRef, onSlideChange: handleSlideChange, className: css.css(Object.assign(Object.assign({ '.swiper-pagination': {
|
|
18422
18445
|
bottom: (_a = imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.marginBottom) !== null && _a !== void 0 ? _a : 0,
|
|
18423
18446
|
fontSize: '14px'
|
|
18424
18447
|
} }, ((imgUrlsPostConfig === null || imgUrlsPostConfig === void 0 ? void 0 : imgUrlsPostConfig.dotsBgColor) && {
|
|
@@ -18435,7 +18458,7 @@ const PictureGroup$4 = ({ imgUrls, width, height, rec, index, onViewImageEndEven
|
|
|
18435
18458
|
return (React.createElement(SwiperSlide, { key: srcKey, "aria-hidden": srcKey !== swiperActiveIndex },
|
|
18436
18459
|
React.createElement(Picture, { src: !isLoad && srcKey > 0 ? '' : url, height: height, imgUrlsPostConfig: imgUrlsPostConfig, onShowFirstImage: showFirstImageFn })));
|
|
18437
18460
|
}))));
|
|
18438
|
-
};
|
|
18461
|
+
});
|
|
18439
18462
|
var PictureGroup$5 = React.memo(PictureGroup$4);
|
|
18440
18463
|
|
|
18441
18464
|
/*
|
|
@@ -18715,7 +18738,7 @@ var NavBack$1 = React.memo(NavBack);
|
|
|
18715
18738
|
* @Author: binruan@chatlabs.com
|
|
18716
18739
|
* @Date: 2024-03-20 10:27:31
|
|
18717
18740
|
* @LastEditors: binruan@chatlabs.com
|
|
18718
|
-
* @LastEditTime: 2025-05-
|
|
18741
|
+
* @LastEditTime: 2025-05-12 14:26:15
|
|
18719
18742
|
* @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\index.tsx
|
|
18720
18743
|
*
|
|
18721
18744
|
*/
|
|
@@ -18735,6 +18758,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
18735
18758
|
const skipLinkRef = React.useRef(false);
|
|
18736
18759
|
const [pageNum, setPageNum] = React.useState(2);
|
|
18737
18760
|
const videoWidgetRef = React.useRef(null);
|
|
18761
|
+
const pictureGroupRef = React.useRef(null);
|
|
18738
18762
|
const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData, bffFbReport, curTime, h5EnterLink, isShowConsent, selectTag, isPreview, isEditor, cacheRtcList, setRtcList, cacheActiveIndex, rtcList, isNoMoreData, channel, refreshFeSession, isDiyH5 } = useSxpDataSource();
|
|
18739
18763
|
const { backMainFeed, productView, jumpToWeb } = useEventReport();
|
|
18740
18764
|
const isShowFingerTip = React.useMemo(() => {
|
|
@@ -18782,7 +18806,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
18782
18806
|
(_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(index);
|
|
18783
18807
|
}, [data, ctaType, swiperRef]);
|
|
18784
18808
|
const handleSessionCompleted = React.useCallback((fk) => {
|
|
18785
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
|
|
18809
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
|
|
18786
18810
|
const item = data === null || data === void 0 ? void 0 : data[activeIndex];
|
|
18787
18811
|
let fromKName = '';
|
|
18788
18812
|
if (popupDetailData && (((_b = (_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b.length) || ((_c = item === null || item === void 0 ? void 0 : item.video) === null || _c === void 0 ? void 0 : _c.bindProduct))) {
|
|
@@ -18809,12 +18833,13 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
18809
18833
|
eventSubject: 'sessionCompleted',
|
|
18810
18834
|
eventDescription: 'Session completed',
|
|
18811
18835
|
contentId: (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId,
|
|
18812
|
-
|
|
18836
|
+
sceneId: (_q = (_p = (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.scene) === null || _p === void 0 ? void 0 : _p.sceneId) !== null && _q !== void 0 ? _q : '',
|
|
18837
|
+
productId: (_r = item === null || item === void 0 ? void 0 : item.product) === null || _r === void 0 ? void 0 : _r.itemId,
|
|
18813
18838
|
position: activeIndex + '',
|
|
18814
18839
|
fromKName: fk || fromKName,
|
|
18815
18840
|
fromKPage: location === null || location === void 0 ? void 0 : location.href,
|
|
18816
|
-
ctatId: (
|
|
18817
|
-
traceInfo: (
|
|
18841
|
+
ctatId: (_u = (_t = (_s = item === null || item === void 0 ? void 0 : item.video) === null || _s === void 0 ? void 0 : _s.bindCta) === null || _t === void 0 ? void 0 : _t.itemId) !== null && _u !== void 0 ? _u : '',
|
|
18842
|
+
traceInfo: (_y = (_w = (_v = item === null || item === void 0 ? void 0 : item.video) === null || _v === void 0 ? void 0 : _v.traceInfo) !== null && _w !== void 0 ? _w : (_x = item === null || item === void 0 ? void 0 : item.product) === null || _x === void 0 ? void 0 : _x.traceInfo) !== null && _y !== void 0 ? _y : ''
|
|
18818
18843
|
}
|
|
18819
18844
|
});
|
|
18820
18845
|
}, [data, bffEventReport, activeIndex, popupDetailData, tempMap, isFromHashtag, curTime]);
|
|
@@ -18873,8 +18898,9 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
18873
18898
|
refreshFeSession
|
|
18874
18899
|
]);
|
|
18875
18900
|
const handleSessionExpire = React.useCallback(lodash.debounce(() => {
|
|
18876
|
-
var _a;
|
|
18901
|
+
var _a, _b;
|
|
18877
18902
|
(_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
|
|
18903
|
+
(_b = pictureGroupRef.current) === null || _b === void 0 ? void 0 : _b.setLoopPlay(false);
|
|
18878
18904
|
refreshFeSession === null || refreshFeSession === void 0 ? void 0 : refreshFeSession(false, handleSessionCompleted);
|
|
18879
18905
|
}, 1000), [handleSessionCompleted, refreshFeSession]);
|
|
18880
18906
|
React.useEffect(() => {
|
|
@@ -18944,18 +18970,18 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
18944
18970
|
return null;
|
|
18945
18971
|
}, [globalConfig, activeIndex, visList]);
|
|
18946
18972
|
const renderContent = React.useCallback((rec, index) => {
|
|
18947
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
18973
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
18948
18974
|
if (rec === 'organic menu') {
|
|
18949
18975
|
return (React.createElement(MultiPosts$2, Object.assign({ recData: data === null || data === void 0 ? void 0 : data[1] }, (_c = (_b = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.item) === null || _c === void 0 ? void 0 : _c.props, (_f = (_e = (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.multiPosts) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.item) === null || _f === void 0 ? void 0 : _f.event)));
|
|
18950
18976
|
}
|
|
18951
|
-
if ((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null ||
|
|
18977
|
+
if (((_h = (_g = rec.video) === null || _g === void 0 ? void 0 : _g.scene) === null || _h === void 0 ? void 0 : _h.mediaUrl) || ((_j = rec === null || rec === void 0 ? void 0 : rec.video) === null || _j === void 0 ? void 0 : _j.url)) {
|
|
18952
18978
|
return (React.createElement(VideoWidget$5, Object.assign({ key: isReload }, (activeIndex === index && { ref: videoWidgetRef }), { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoPlayIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon, loopPlay: true, swiperRef: swiperRef })));
|
|
18953
18979
|
}
|
|
18954
|
-
if ((
|
|
18955
|
-
return (React.createElement(PictureGroup$5, { key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, imgUrls: rec === null || rec === void 0 ? void 0 : rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onViewImageEndEvent: handleViewImageStartEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
|
|
18980
|
+
if ((_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.imgUrls) {
|
|
18981
|
+
return (React.createElement(PictureGroup$5, Object.assign({ data: data }, (activeIndex === index && { ref: pictureGroupRef }), { key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, imgUrls: rec === null || rec === void 0 ? void 0 : rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onViewImageEndEvent: handleViewImageStartEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost, swiperRef: swiperRef })));
|
|
18956
18982
|
}
|
|
18957
|
-
if (rec.product && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((
|
|
18958
|
-
return (
|
|
18983
|
+
if (rec.product && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((_l = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _l === void 0 ? void 0 : _l.length) > 0) {
|
|
18984
|
+
return (_m = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _m === void 0 ? void 0 : _m.map((value, idx) => {
|
|
18959
18985
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
18960
18986
|
const t = resolver[(_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type];
|
|
18961
18987
|
const Component = withBindDataSource(t);
|
|
@@ -18993,7 +19019,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
18993
19019
|
};
|
|
18994
19020
|
}, [isShowMore]);
|
|
18995
19021
|
const renderBottom = React.useCallback((rec, index) => {
|
|
18996
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
19022
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
18997
19023
|
if (rec === null || rec === void 0 ? void 0 : rec.video) {
|
|
18998
19024
|
let cta = null;
|
|
18999
19025
|
if ((_b = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.bindProducts) === null || _b === void 0 ? void 0 : _b.length) {
|
|
@@ -19002,22 +19028,25 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
19002
19028
|
else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) {
|
|
19003
19029
|
cta = '商品CTA';
|
|
19004
19030
|
}
|
|
19031
|
+
else if (tempMap && ((_d = Object.keys(tempMap)) === null || _d === void 0 ? void 0 : _d.includes('服务CTA')) && ((_f = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.bindCta) === null || _f === void 0 ? void 0 : _f.itemId)) {
|
|
19032
|
+
cta = '服务CTA';
|
|
19033
|
+
}
|
|
19005
19034
|
else {
|
|
19006
|
-
cta = (
|
|
19035
|
+
cta = (_h = (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.bindCta) === null || _h === void 0 ? void 0 : _h.itemId;
|
|
19007
19036
|
}
|
|
19008
19037
|
const value = tempMap === null || tempMap === void 0 ? void 0 : tempMap[cta];
|
|
19009
|
-
const isNineProduct = (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.nineProductEnable) && index === 1;
|
|
19038
|
+
const isNineProduct = (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.nineProductEnable) && index === ((rtcList === null || rtcList === void 0 ? void 0 : rtcList[0]) === 'organic menu' ? 2 : 1);
|
|
19010
19039
|
return (React.createElement(React.Fragment, null,
|
|
19011
19040
|
isNineProduct && (React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, isActive: index === activeIndex, value: value, isNineProduct: isNineProduct })),
|
|
19012
|
-
((
|
|
19013
|
-
React.createElement("div", { className: 'clc-sxp-bottom', style: { marginBottom: `${(
|
|
19041
|
+
((_j = rec === null || rec === void 0 ? void 0 : rec.video) === null || _j === void 0 ? void 0 : _j.title) && !isShowMore && React.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
|
|
19042
|
+
React.createElement("div", { className: 'clc-sxp-bottom', style: { marginBottom: `${(_k = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.bottomInfoDist) !== null && _k !== void 0 ? _k : 40}px` } },
|
|
19014
19043
|
React.createElement(Nudge, { nudge: nudge }),
|
|
19015
19044
|
((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA)) && !isNineProduct ? (React.createElement("div", { className: 'clc-sxp-bottom-card' },
|
|
19016
19045
|
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, isActive: index === activeIndex, value: value }))) : null,
|
|
19017
19046
|
React.createElement("div", null,
|
|
19018
|
-
React.createElement(ExpandableText$1, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (
|
|
19047
|
+
React.createElement(ExpandableText$1, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_m = (_l = rec === null || rec === void 0 ? void 0 : rec.video) === null || _l === void 0 ? void 0 : _l.title) !== null && _m !== void 0 ? _m : '', style: Object.assign(Object.assign({}, descStyle), { textShadow: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isOpenTextShadow) ? '2px 2px 4px rgba(0, 0, 0, 0.5)' : 'none' }), onChange: onExpandableChange }),
|
|
19019
19048
|
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLink'], isActive: index === activeIndex, value: value }),
|
|
19020
|
-
React.createElement(Hashtag$1, { index: activeIndex, tags: (
|
|
19049
|
+
React.createElement(Hashtag$1, { index: activeIndex, tags: (_p = (_o = rec === null || rec === void 0 ? void 0 : rec.video) === null || _o === void 0 ? void 0 : _o.hashTags) !== null && _p !== void 0 ? _p : [], itemId: (_q = rec === null || rec === void 0 ? void 0 : rec.video) === null || _q === void 0 ? void 0 : _q.itemId, itemType: ((_r = rec === null || rec === void 0 ? void 0 : rec.video) === null || _r === void 0 ? void 0 : _r.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle, hashTagRightMargin: containerWidth - (hashTagRightMargin !== null && hashTagRightMargin !== void 0 ? hashTagRightMargin : 0) }))),
|
|
19021
19050
|
React.createElement(RenderCard$1, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex, value: value })));
|
|
19022
19051
|
}
|
|
19023
19052
|
return null;
|
|
@@ -19032,7 +19061,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
19032
19061
|
globalConfig,
|
|
19033
19062
|
onExpandableChange,
|
|
19034
19063
|
isShowMore,
|
|
19035
|
-
lineGradStyle
|
|
19064
|
+
lineGradStyle,
|
|
19065
|
+
rtcList
|
|
19036
19066
|
]);
|
|
19037
19067
|
const renderLikeButton = React.useCallback((rec, index, visible) => {
|
|
19038
19068
|
var _a, _b, _c, _d;
|
|
@@ -19055,7 +19085,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
19055
19085
|
return null;
|
|
19056
19086
|
}, [globalConfig, waterFallData]);
|
|
19057
19087
|
const handleViewImageStartEnd = (item) => {
|
|
19058
|
-
var _a, _b, _c, _d, _e, _f;
|
|
19088
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
19059
19089
|
if (!((_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.url) && ((_b = item === null || item === void 0 ? void 0 : item.video) === null || _b === void 0 ? void 0 : _b.imgUrls)) {
|
|
19060
19090
|
const endTime = Date.now();
|
|
19061
19091
|
const duration = viewImageStartTime.current === 0 ? 0 : (endTime - viewImageStartTime.current) / 1000;
|
|
@@ -19064,10 +19094,11 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
19064
19094
|
eventSubject: 'viewImageCarouselEnd',
|
|
19065
19095
|
eventDescription: 'User end view the image carousel',
|
|
19066
19096
|
contentId: (_d = (_c = item === null || item === void 0 ? void 0 : item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
|
|
19067
|
-
|
|
19097
|
+
sceneId: (_g = (_f = (_e = item === null || item === void 0 ? void 0 : item.video) === null || _e === void 0 ? void 0 : _e.scene) === null || _f === void 0 ? void 0 : _f.sceneId) !== null && _g !== void 0 ? _g : '',
|
|
19098
|
+
contentName: (_h = item === null || item === void 0 ? void 0 : item.video.title) !== null && _h !== void 0 ? _h : '',
|
|
19068
19099
|
imageEndTime: `${endTime}`,
|
|
19069
19100
|
playDuration: `${duration}`,
|
|
19070
|
-
contentTags: JSON.stringify((
|
|
19101
|
+
contentTags: JSON.stringify((_j = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _j !== void 0 ? _j : []),
|
|
19071
19102
|
position: activeIndex + '',
|
|
19072
19103
|
contentFormat: 'image',
|
|
19073
19104
|
traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo
|
|
@@ -19076,7 +19107,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
19076
19107
|
}
|
|
19077
19108
|
};
|
|
19078
19109
|
const handleSlideSkip = (item, position) => {
|
|
19079
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
|
|
19110
|
+
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;
|
|
19080
19111
|
if (isPreview || waterFallData)
|
|
19081
19112
|
return;
|
|
19082
19113
|
const t = new Date() - curTime.current;
|
|
@@ -19102,7 +19133,8 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
19102
19133
|
contentTags: (product === null || product === void 0 ? void 0 : product.tags) ? JSON.stringify(product === null || product === void 0 ? void 0 : product.tags) : '',
|
|
19103
19134
|
position: position + '',
|
|
19104
19135
|
contentId: (_t = (_s = item === null || item === void 0 ? void 0 : item.video) === null || _s === void 0 ? void 0 : _s.itemId) !== null && _t !== void 0 ? _t : '',
|
|
19105
|
-
|
|
19136
|
+
sceneId: (_w = (_v = (_u = item === null || item === void 0 ? void 0 : item.video) === null || _u === void 0 ? void 0 : _u.scene) === null || _v === void 0 ? void 0 : _v.sceneId) !== null && _w !== void 0 ? _w : '',
|
|
19137
|
+
traceInfo: (_0 = (_y = (_x = item === null || item === void 0 ? void 0 : item.video) === null || _x === void 0 ? void 0 : _x.traceInfo) !== null && _y !== void 0 ? _y : (_z = item === null || item === void 0 ? void 0 : item.product) === null || _z === void 0 ? void 0 : _z.traceInfo) !== null && _0 !== void 0 ? _0 : '',
|
|
19106
19138
|
contentFormat
|
|
19107
19139
|
}
|
|
19108
19140
|
});
|
|
@@ -19112,7 +19144,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
19112
19144
|
}
|
|
19113
19145
|
};
|
|
19114
19146
|
const handleScrollEvent = (swiper) => {
|
|
19115
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
|
|
19147
|
+
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;
|
|
19116
19148
|
const item = data[swiper.previousIndex];
|
|
19117
19149
|
if (!item)
|
|
19118
19150
|
return;
|
|
@@ -19129,11 +19161,12 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
19129
19161
|
eventSubject: 'scrollDown',
|
|
19130
19162
|
eventDescription: 'User scroll down',
|
|
19131
19163
|
contentId: (_e = (_d = item === null || item === void 0 ? void 0 : item.video) === null || _d === void 0 ? void 0 : _d.itemId) !== null && _e !== void 0 ? _e : '',
|
|
19132
|
-
|
|
19164
|
+
sceneId: (_h = (_g = (_f = item === null || item === void 0 ? void 0 : item.video) === null || _f === void 0 ? void 0 : _f.scene) === null || _g === void 0 ? void 0 : _g.sceneId) !== null && _h !== void 0 ? _h : '',
|
|
19165
|
+
productId: (_k = (_j = item === null || item === void 0 ? void 0 : item.product) === null || _j === void 0 ? void 0 : _j.itemId) !== null && _k !== void 0 ? _k : '',
|
|
19133
19166
|
requestId: null,
|
|
19134
|
-
traceInfo: (
|
|
19167
|
+
traceInfo: (_p = (_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.traceInfo) !== null && _m !== void 0 ? _m : (_o = item === null || item === void 0 ? void 0 : item.product) === null || _o === void 0 ? void 0 : _o.traceInfo) !== null && _p !== void 0 ? _p : '',
|
|
19135
19168
|
contentFormat,
|
|
19136
|
-
position: ((
|
|
19169
|
+
position: ((_q = swiper.previousIndex) !== null && _q !== void 0 ? _q : 0) + ''
|
|
19137
19170
|
}
|
|
19138
19171
|
});
|
|
19139
19172
|
// 如果上一个商品是图片集，需上报 浏览图片集结结束 事件
|
|
@@ -19145,12 +19178,13 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
19145
19178
|
eventInfo: {
|
|
19146
19179
|
eventSubject: 'scrollUp',
|
|
19147
19180
|
eventDescription: 'User scroll up',
|
|
19148
|
-
contentId: (
|
|
19149
|
-
|
|
19181
|
+
contentId: (_s = (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.itemId) !== null && _s !== void 0 ? _s : '',
|
|
19182
|
+
sceneId: (_v = (_u = (_t = item === null || item === void 0 ? void 0 : item.video) === null || _t === void 0 ? void 0 : _t.scene) === null || _u === void 0 ? void 0 : _u.sceneId) !== null && _v !== void 0 ? _v : '',
|
|
19183
|
+
productId: (_x = (_w = item.product) === null || _w === void 0 ? void 0 : _w.itemId) !== null && _x !== void 0 ? _x : '',
|
|
19150
19184
|
requestId: null,
|
|
19151
|
-
traceInfo: (
|
|
19185
|
+
traceInfo: (_1 = (_z = (_y = item === null || item === void 0 ? void 0 : item.video) === null || _y === void 0 ? void 0 : _y.traceInfo) !== null && _z !== void 0 ? _z : (_0 = item === null || item === void 0 ? void 0 : item.product) === null || _0 === void 0 ? void 0 : _0.traceInfo) !== null && _1 !== void 0 ? _1 : '',
|
|
19152
19186
|
contentFormat,
|
|
19153
|
-
position: ((
|
|
19187
|
+
position: ((_2 = swiper.previousIndex) !== null && _2 !== void 0 ? _2 : 0) + ''
|
|
19154
19188
|
}
|
|
19155
19189
|
});
|
|
19156
19190
|
// 如果上一个商品是图片集，需上报 浏览图片集结结束 事件
|
|
@@ -19176,7 +19210,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
19176
19210
|
}
|
|
19177
19211
|
}, [openHashtag, data, activeIndex]);
|
|
19178
19212
|
const handleViewImageStartEvent = (activeIndex, imgInfo, enableCapi) => {
|
|
19179
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
19213
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
19180
19214
|
const item = data[activeIndex];
|
|
19181
19215
|
// 如果是图片集则上报事件
|
|
19182
19216
|
if (!((_a = item === null || item === void 0 ? void 0 : item.video) === null || _a === void 0 ? void 0 : _a.url) && ((_b = item === null || item === void 0 ? void 0 : item.video) === null || _b === void 0 ? void 0 : _b.imgUrls)) {
|
|
@@ -19187,9 +19221,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
19187
19221
|
eventSubject: 'viewImageCarouselStart',
|
|
19188
19222
|
eventDescription: 'User start view the image carousel',
|
|
19189
19223
|
contentId: (_d = (_c = item === null || item === void 0 ? void 0 : item.video) === null || _c === void 0 ? void 0 : _c.itemId) !== null && _d !== void 0 ? _d : '',
|
|
19190
|
-
|
|
19224
|
+
sceneId: (_g = (_f = (_e = item === null || item === void 0 ? void 0 : item.video) === null || _e === void 0 ? void 0 : _e.scene) === null || _f === void 0 ? void 0 : _f.sceneId) !== null && _g !== void 0 ? _g : '',
|
|
19225
|
+
contentName: (_h = item === null || item === void 0 ? void 0 : item.video.title) !== null && _h !== void 0 ? _h : '',
|
|
19191
19226
|
imageStartTime: `${startTime}`,
|
|
19192
|
-
contentTags: JSON.stringify((
|
|
19227
|
+
contentTags: JSON.stringify((_j = item === null || item === void 0 ? void 0 : item.video.tags) !== null && _j !== void 0 ? _j : []),
|
|
19193
19228
|
position: activeIndex + '',
|
|
19194
19229
|
contentFormat: 'image',
|
|
19195
19230
|
traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo,
|
|
@@ -19199,11 +19234,11 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
|
19199
19234
|
if (enableCapi) {
|
|
19200
19235
|
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
|
19201
19236
|
eventName: 'ViewContent',
|
|
19202
|
-
product: (
|
|
19237
|
+
product: (_k = item === null || item === void 0 ? void 0 : item.video) === null || _k === void 0 ? void 0 : _k.bindProduct
|
|
19203
19238
|
});
|
|
19204
19239
|
bffFbReport === null || bffFbReport === void 0 ? void 0 : bffFbReport({
|
|
19205
19240
|
eventName: 'PageView',
|
|
19206
|
-
product: (
|
|
19241
|
+
product: (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.bindProduct
|
|
19207
19242
|
});
|
|
19208
19243
|
}
|
|
19209
19244
|
}
|
|
@@ -19356,7 +19391,7 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
|
|
|
19356
19391
|
}, []);
|
|
19357
19392
|
const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
|
|
19358
19393
|
const handlePlaying = React.useCallback(() => {
|
|
19359
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
19394
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
19360
19395
|
setIsPauseVideo(false);
|
|
19361
19396
|
const item = data[index];
|
|
19362
19397
|
if (item && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
|
|
@@ -19369,14 +19404,15 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
|
|
|
19369
19404
|
eventSubject: 'playVideo',
|
|
19370
19405
|
eventDescription: 'User played the video',
|
|
19371
19406
|
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 : '',
|
|
19372
|
-
|
|
19407
|
+
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 : '',
|
|
19408
|
+
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 : '',
|
|
19373
19409
|
playType,
|
|
19374
19410
|
startTime: videoCurrentTime,
|
|
19375
19411
|
videoDuration,
|
|
19376
|
-
contentTags: JSON.stringify((
|
|
19412
|
+
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 : []),
|
|
19377
19413
|
position: index + '',
|
|
19378
19414
|
contentFormat: 'video',
|
|
19379
|
-
traceInfo: (
|
|
19415
|
+
traceInfo: (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.traceInfo
|
|
19380
19416
|
}
|
|
19381
19417
|
});
|
|
19382
19418
|
setIsFirstPlay(false);
|
|
@@ -19415,7 +19451,7 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
|
|
|
19415
19451
|
}
|
|
19416
19452
|
}, [isLoadFinish]);
|
|
19417
19453
|
const onPause = React.useCallback(() => {
|
|
19418
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
19454
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
19419
19455
|
const item = data[index];
|
|
19420
19456
|
const videoDuration = ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
|
|
19421
19457
|
const videoCurrentTime = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
|
|
@@ -19426,14 +19462,15 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
|
|
|
19426
19462
|
eventSubject: 'playOverVideo',
|
|
19427
19463
|
eventDescription: 'User finished playing the video',
|
|
19428
19464
|
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 : '',
|
|
19429
|
-
|
|
19465
|
+
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 : '',
|
|
19466
|
+
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 : '',
|
|
19430
19467
|
endTime: videoCurrentTime,
|
|
19431
19468
|
videoDuration,
|
|
19432
19469
|
playDuration,
|
|
19433
|
-
contentTags: JSON.stringify((
|
|
19470
|
+
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 : []),
|
|
19434
19471
|
position: index + '',
|
|
19435
19472
|
contentFormat: 'video',
|
|
19436
|
-
traceInfo: (
|
|
19473
|
+
traceInfo: (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.traceInfo
|
|
19437
19474
|
}
|
|
19438
19475
|
});
|
|
19439
19476
|
}
|