pb-sxp-ui 1.7.4 → 1.7.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 +47 -68
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +47 -68
- package/dist/index.js.map +1 -1
- package/dist/index.min.cjs +3 -3
- package/dist/index.min.cjs.map +1 -1
- package/dist/index.min.js +3 -3
- package/dist/index.min.js.map +1 -1
- package/dist/pb-ui.js +47 -68
- package/dist/pb-ui.js.map +1 -1
- package/dist/pb-ui.min.js +3 -3
- package/dist/pb-ui.min.js.map +1 -1
- package/es/core/components/SxpPageRender/Modal/index.d.ts +1 -0
- package/es/core/components/SxpPageRender/Modal/index.js +2 -2
- package/es/core/components/SxpPageRender/PictureGroup/index.d.ts +0 -1
- package/es/core/components/SxpPageRender/PictureGroup/index.js +0 -3
- package/es/core/components/SxpPageRender/RenderCard.d.ts +1 -0
- package/es/core/components/SxpPageRender/RenderCard.js +16 -39
- package/es/core/components/SxpPageRender/VideoWidget/index.js +8 -9
- package/es/core/components/SxpPageRender/index.js +19 -9
- package/es/core/utils/tool.d.ts +1 -2
- package/es/core/utils/tool.js +1 -11
- package/lib/core/components/SxpPageRender/Modal/index.d.ts +1 -0
- package/lib/core/components/SxpPageRender/Modal/index.js +2 -2
- package/lib/core/components/SxpPageRender/PictureGroup/index.d.ts +0 -1
- package/lib/core/components/SxpPageRender/PictureGroup/index.js +0 -3
- package/lib/core/components/SxpPageRender/RenderCard.d.ts +1 -0
- package/lib/core/components/SxpPageRender/RenderCard.js +16 -39
- package/lib/core/components/SxpPageRender/VideoWidget/index.js +8 -9
- package/lib/core/components/SxpPageRender/index.js +19 -9
- package/lib/core/utils/tool.d.ts +1 -2
- package/lib/core/utils/tool.js +1 -12
- package/package.json +1 -1
@@ -3,7 +3,7 @@ import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from '
|
|
3
3
|
import * as ReactDOM from 'react-dom';
|
4
4
|
import { useEditor, useSxpDataSource } from '../../../../core/hooks';
|
5
5
|
const closeIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjhJREFUWEfFlztOw0AQhmeWiJ4CCmpQ5DiRQsIJyAWg5A0lR0AIChDiCJS8ER0cADgBeRSxt4CCDgkaKiq8i+zYeWx2413HEWmiJJv9v535Z2aN8M8vFPT9z3zETD0aAUChUJjwvPFHAJhBhB3Hqd6OAsK2yyucwykAvP38eJX398Z3AJDLlVYR8ToU9Rhj25TWr9KEsKy5dULIGQCMtfZly45TvwsAstm56UwG6wA4FUFwzrdctxZBDcWSy5XWEPG8I84/GcMipdWPtgcsaz5PCHtKG0IuTiqUvjT9U/WYMG2IOPE+AP+LtCB0xKUAAyA2Xbd2o2OG0NQXvTnvhL17D7EPtH9TRCIWwkRcGYGIQgYBABuqPuHXOQBc6pw80lBGwBQiiXhsBHQhkoprA6iM6acjhDQKu5YJZW6XeOI3XJdpvfsdTu52VfXEekD8owQiXGIubpSCbhDbLu8DwKEAd+A41SOdPpE4BS0viFOtvV2iKWqUgn5x/tmS70xR01GuDSCKc86/OCcLgTyyZ0ScDGNhFAktAJV4NFJ9YyaFiAWIE+9uVkkgBgLoig8DMWAa9ro9ynkUdlW5maZDCmB6clmz0k1HH4Cs1Ezbq2p2yEpUuBOKTSZZex00RUWIrltxuuK6EOGDSbGIOPZicpMx6fny650377qNRgBgWeVFQuA+6UjVgREhGIMlSqsPUQqIbZdOOIdZQmCv2axRnU1N1+TzJYsxOEaEV8ep7frPZ7Gd0FTEdP0ft0/kMNdg0eoAAAAASUVORK5CYII=';
|
6
|
-
const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema, fullHeight = window.innerHeight, isFullScreen = false }) => {
|
6
|
+
const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema, fullHeight = window.innerHeight, isFullScreen = false, openState }) => {
|
7
7
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
|
8
8
|
const touchRef = useRef(null);
|
9
9
|
const fTouchRef = useRef(null);
|
@@ -55,7 +55,7 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
|
|
55
55
|
}, [isOpen, popup]);
|
56
56
|
const child = useCallback(() => {
|
57
57
|
return children;
|
58
|
-
}, [_popup]);
|
58
|
+
}, [_popup, openState]);
|
59
59
|
if (!modalEleRef.current)
|
60
60
|
return null;
|
61
61
|
const handleClose = debounce(() => {
|
@@ -9,7 +9,6 @@ interface IPictureGroupProps {
|
|
9
9
|
index: number;
|
10
10
|
onViewImageEndEvent: (rec: RecItemType) => void;
|
11
11
|
onViewImageStartEvent: (index: number, imgInfo?: {
|
12
|
-
contentSize: string;
|
13
12
|
loadTime: string;
|
14
13
|
}, enableCapi?: boolean) => void;
|
15
14
|
imgUrlsPostConfig?: postConfigType;
|
@@ -6,7 +6,6 @@ import Picture from './Picture';
|
|
6
6
|
import { useSxpDataSource } from '../../../../core/hooks';
|
7
7
|
import { css } from '@emotion/css';
|
8
8
|
import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../../../../core/utils/event';
|
9
|
-
import { getResFileSizeFromSrc } from '../../../../core/utils/tool';
|
10
9
|
const PictureGroup = ({ imgUrls, width, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig }) => {
|
11
10
|
var _a, _b;
|
12
11
|
const ref = useRef();
|
@@ -31,9 +30,7 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onViewImageEndEvent,
|
|
31
30
|
}, [rec, isActive, onViewImageEndEvent, openHashtag, index, onViewImageStartEvent, isLoad, imgInfo]);
|
32
31
|
const showFirstImageFn = useCallback((e) => __awaiter(void 0, void 0, void 0, function* () {
|
33
32
|
if (!isLoad) {
|
34
|
-
const contentSize = yield getResFileSizeFromSrc(e.src);
|
35
33
|
setImgInfo({
|
36
|
-
contentSize,
|
37
34
|
loadTime: (new Date() - initTime).toFixed(2) + ''
|
38
35
|
});
|
39
36
|
setIsLoad(true);
|
@@ -2,59 +2,36 @@ import React, { memo, useMemo } from 'react';
|
|
2
2
|
import './index.less';
|
3
3
|
import withBindDataSource from '../../../core/hoc/withBindDataSource';
|
4
4
|
import { useEditor } from '../../../core/hooks';
|
5
|
-
|
6
|
-
|
5
|
+
import { cloneDeep } from 'lodash';
|
6
|
+
const RenderCard = ({ rec, index, tempMap, resolver, includesCtaType, isActive, value }) => {
|
7
7
|
const { schema } = useEditor();
|
8
8
|
if (!(rec === null || rec === void 0 ? void 0 : rec.video))
|
9
9
|
return null;
|
10
|
-
let cta = null;
|
11
|
-
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) {
|
12
|
-
cta = '多商品CTA';
|
13
|
-
}
|
14
|
-
else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) {
|
15
|
-
cta = '商品CTA';
|
16
|
-
}
|
17
|
-
else {
|
18
|
-
cta = (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.bindCta) === null || _e === void 0 ? void 0 : _e.itemId;
|
19
|
-
}
|
20
|
-
const value = tempMap === null || tempMap === void 0 ? void 0 : tempMap[cta];
|
21
10
|
const renderComp = useMemo(() => {
|
22
|
-
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
|
23
|
-
if (!(
|
24
|
-
return null;
|
25
|
-
let cta = null;
|
26
|
-
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) {
|
27
|
-
cta = '多商品CTA';
|
28
|
-
}
|
29
|
-
else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) {
|
30
|
-
cta = '商品CTA';
|
31
|
-
}
|
32
|
-
else {
|
33
|
-
cta = (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.bindCta) === null || _e === void 0 ? void 0 : _e.itemId;
|
34
|
-
}
|
35
|
-
if (includesCtaType && !(includesCtaType === null || includesCtaType === void 0 ? void 0 : includesCtaType.includes((_f = value === null || value === void 0 ? void 0 : value.item) === null || _f === void 0 ? void 0 : _f.type)))
|
11
|
+
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;
|
12
|
+
if (includesCtaType && !(includesCtaType === null || includesCtaType === void 0 ? void 0 : includesCtaType.includes((_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type)))
|
36
13
|
return;
|
37
|
-
if (!includesCtaType && ((
|
14
|
+
if (!includesCtaType && ((_b = value === null || value === void 0 ? void 0 : value.item) === null || _b === void 0 ? void 0 : _b.category) === 'cta')
|
38
15
|
return;
|
39
|
-
if ((((
|
40
|
-
(((
|
41
|
-
(((
|
42
|
-
(((
|
43
|
-
(((
|
44
|
-
(((
|
16
|
+
if ((((_c = value === null || value === void 0 ? void 0 : value.item) === null || _c === void 0 ? void 0 : _c.type) === 'CommodityDiro' && !((_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.bindProduct)) ||
|
17
|
+
(((_e = value === null || value === void 0 ? void 0 : value.item) === null || _e === void 0 ? void 0 : _e.type) === 'Commodity' && !((_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.bindProduct)) ||
|
18
|
+
(((_g = value === null || value === void 0 ? void 0 : value.item) === null || _g === void 0 ? void 0 : _g.type) === 'CommodityDiroNew' && !((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.bindProduct)) ||
|
19
|
+
(((_j = value === null || value === void 0 ? void 0 : value.item) === null || _j === void 0 ? void 0 : _j.type) === 'MultiCommodity' && !((_l = (_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.bindProducts) === null || _l === void 0 ? void 0 : _l.length)) ||
|
20
|
+
(((_m = value === null || value === void 0 ? void 0 : value.item) === null || _m === void 0 ? void 0 : _m.type) === 'MultiCommodityDiro' && !((_p = (_o = rec === null || rec === void 0 ? void 0 : rec.video) === null || _o === void 0 ? void 0 : _o.bindProducts) === null || _p === void 0 ? void 0 : _p.length)) ||
|
21
|
+
(((_q = value === null || value === void 0 ? void 0 : value.item) === null || _q === void 0 ? void 0 : _q.type) === 'MultiCommodityDiroNew' && !((_s = (_r = rec === null || rec === void 0 ? void 0 : rec.video) === null || _r === void 0 ? void 0 : _r.bindProducts) === null || _s === void 0 ? void 0 : _s.length))) {
|
45
22
|
return null;
|
46
23
|
}
|
47
24
|
if (value && resolver) {
|
48
|
-
const t = resolver[(
|
25
|
+
const t = resolver[(_t = value === null || value === void 0 ? void 0 : value.item) === null || _t === void 0 ? void 0 : _t.type];
|
49
26
|
const Component = withBindDataSource(t);
|
50
|
-
const defaulSetting = (
|
51
|
-
const isExternalLink = ((
|
52
|
-
let style = (
|
27
|
+
const defaulSetting = (_u = t === null || t === void 0 ? void 0 : t.extend) === null || _u === void 0 ? void 0 : _u.defaulSetting;
|
28
|
+
const isExternalLink = ((_x = (_w = (_v = value === null || value === void 0 ? void 0 : value.item) === null || _v === void 0 ? void 0 : _v.event) === null || _w === void 0 ? void 0 : _w.onClick) === null || _x === void 0 ? void 0 : _x.linkType) === 'externalLink';
|
29
|
+
let style = cloneDeep((_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.style);
|
53
30
|
if (style.hasOwnProperty('backdropFilter')) {
|
54
31
|
let sbf = style['backdropFilter'];
|
55
32
|
style['backdropFilter'] = `blur(${sbf !== null && sbf !== void 0 ? sbf : 0}px)`;
|
56
33
|
}
|
57
|
-
return (React.createElement(Component, Object.assign({ style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), style), { zIndex: 50, marginLeft: '20px', boxSizing: 'border-box', transform: 'translate3d(0px, 0px, 0px)' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (
|
34
|
+
return (React.createElement(Component, Object.assign({ style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), style), { zIndex: 50, marginLeft: '20px', boxSizing: 'border-box', transform: 'translate3d(0px, 0px, 0px)' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_z = value === null || value === void 0 ? void 0 : value.item) === null || _z === void 0 ? void 0 : _z.textStyle), bindDatas: (_1 = (_0 = value === null || value === void 0 ? void 0 : value.item) === null || _0 === void 0 ? void 0 : _0.bindDatas) !== null && _1 !== void 0 ? _1 : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_2 = value === null || value === void 0 ? void 0 : value.item) === null || _2 === void 0 ? void 0 : _2.props, { event: ((_3 = value === null || value === void 0 ? void 0 : value.item) === null || _3 === void 0 ? void 0 : _3.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, key: value === null || value === void 0 ? void 0 : value.id, recData: rec, isExternalLink: isExternalLink, index: index, isActive: isActive })));
|
58
35
|
}
|
59
36
|
else {
|
60
37
|
return null;
|
@@ -7,7 +7,6 @@ import { useSxpDataSource } from '../../../../core/hooks';
|
|
7
7
|
import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../../../../core/utils/event';
|
8
8
|
import loading_gif from './loading.gif';
|
9
9
|
import { mountVideoPlayerAtNode } from './VideoPlayer';
|
10
|
-
import { getResFileSizeFromSrc } from '../../../../core/utils/tool';
|
11
10
|
const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon }) => {
|
12
11
|
const [isPauseVideo, setIsPauseVideo] = useState(false);
|
13
12
|
const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport } = useSxpDataSource();
|
@@ -23,6 +22,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
|
|
23
22
|
const videoEleRef = useRef(null);
|
24
23
|
const hlsRef = useRef(null);
|
25
24
|
const initTimeRef = useRef();
|
25
|
+
const loadedTimeRef = useRef();
|
26
26
|
const blur = useMemo(() => {
|
27
27
|
return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
|
28
28
|
}, [videoPostConfig]);
|
@@ -69,7 +69,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
|
|
69
69
|
setIsLoadFinish(true);
|
70
70
|
}, []);
|
71
71
|
const handleStartPlay = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
|
72
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o
|
72
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
73
73
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
74
74
|
return;
|
75
75
|
setIsPauseVideo(false);
|
@@ -79,22 +79,20 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
|
|
79
79
|
const videoDuration = ((_d = (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 0).toFixed(2);
|
80
80
|
const videoCurrentTime = ((_f = (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime) !== null && _f !== void 0 ? _f : 0).toFixed(2);
|
81
81
|
const playType = isFirstPlay ? '0' : '1';
|
82
|
-
const contentSize = yield getResFileSizeFromSrc((_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.url);
|
83
82
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
84
83
|
eventInfo: {
|
85
84
|
eventSubject: 'playVideo',
|
86
85
|
eventDescription: 'User played the video',
|
87
|
-
contentId: (
|
88
|
-
contentName: (
|
86
|
+
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 : '',
|
87
|
+
contentName: (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
|
89
88
|
playType,
|
90
89
|
startTime: videoCurrentTime,
|
91
90
|
videoDuration,
|
92
|
-
contentTags: JSON.stringify((
|
91
|
+
contentTags: JSON.stringify((_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
|
93
92
|
position: index + '',
|
94
93
|
contentFormat: 'video',
|
95
|
-
traceInfo: (
|
96
|
-
|
97
|
-
loadTime: (new Date() - (initTimeRef === null || initTimeRef === void 0 ? void 0 : initTimeRef.current)).toFixed(2) + ''
|
94
|
+
traceInfo: (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.traceInfo,
|
95
|
+
loadTime: ((loadedTimeRef === null || loadedTimeRef === void 0 ? void 0 : loadedTimeRef.current) - (initTimeRef === null || initTimeRef === void 0 ? void 0 : initTimeRef.current)).toFixed(2) + ''
|
98
96
|
}
|
99
97
|
});
|
100
98
|
setIsFirstPlay(false);
|
@@ -125,6 +123,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
|
|
125
123
|
const handleLoadedmetadata = useCallback(() => {
|
126
124
|
if (!videoRef.current)
|
127
125
|
return;
|
126
|
+
loadedTimeRef.current = new Date();
|
128
127
|
handleStartPlay();
|
129
128
|
handLoadeddata();
|
130
129
|
}, [videoRef.current, handLoadeddata, handleStartPlay]);
|
@@ -254,19 +254,30 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
254
254
|
};
|
255
255
|
}, [isShowMore]);
|
256
256
|
const renderBottom = useCallback((rec, index) => {
|
257
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
257
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
258
258
|
if (rec === null || rec === void 0 ? void 0 : rec.video) {
|
259
|
+
let cta = null;
|
260
|
+
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) {
|
261
|
+
cta = '多商品CTA';
|
262
|
+
}
|
263
|
+
else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) {
|
264
|
+
cta = '商品CTA';
|
265
|
+
}
|
266
|
+
else {
|
267
|
+
cta = (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.bindCta) === null || _e === void 0 ? void 0 : _e.itemId;
|
268
|
+
}
|
269
|
+
const value = tempMap === null || tempMap === void 0 ? void 0 : tempMap[cta];
|
259
270
|
return (React.createElement(React.Fragment, null,
|
260
|
-
((
|
261
|
-
React.createElement("div", { className: 'clc-sxp-bottom', style: { marginBottom: `${(
|
271
|
+
((_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.title) && !isShowMore && React.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
|
272
|
+
React.createElement("div", { className: 'clc-sxp-bottom', style: { marginBottom: `${(_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.bottomInfoDist) !== null && _g !== void 0 ? _g : 40}px` } },
|
262
273
|
React.createElement(Nudge, { nudge: nudge }),
|
263
274
|
(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) ? (React.createElement("div", { className: 'clc-sxp-bottom-card' },
|
264
|
-
React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, isActive: index === activeIndex }))) : null,
|
275
|
+
React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, isActive: index === activeIndex, value: value }))) : null,
|
265
276
|
React.createElement("div", null,
|
266
|
-
React.createElement(ExpandableText, { 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: (
|
267
|
-
React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLink'], isActive: index === activeIndex }),
|
268
|
-
React.createElement(Hashtag, { index: activeIndex, tags: (
|
269
|
-
React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex })));
|
277
|
+
React.createElement(ExpandableText, { 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: (_j = (_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.title) !== null && _j !== void 0 ? _j : '', 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 }),
|
278
|
+
React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLink'], isActive: index === activeIndex, value: value }),
|
279
|
+
React.createElement(Hashtag, { index: activeIndex, tags: (_l = (_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.hashTags) !== null && _l !== void 0 ? _l : [], itemId: (_m = rec === null || rec === void 0 ? void 0 : rec.video) === null || _m === void 0 ? void 0 : _m.itemId, itemType: ((_o = rec === null || rec === void 0 ? void 0 : rec.video) === null || _o === void 0 ? void 0 : _o.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle, hashTagRightMargin: containerWidth - (hashTagRightMargin !== null && hashTagRightMargin !== void 0 ? hashTagRightMargin : 0) }))),
|
280
|
+
React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex, value: value })));
|
270
281
|
}
|
271
282
|
return null;
|
272
283
|
}, [
|
@@ -435,7 +446,6 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
435
446
|
position: activeIndex + '',
|
436
447
|
contentFormat: 'image',
|
437
448
|
traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo,
|
438
|
-
contentSize: imgInfo === null || imgInfo === void 0 ? void 0 : imgInfo.contentSize,
|
439
449
|
loadTime: imgInfo === null || imgInfo === void 0 ? void 0 : imgInfo.loadTime
|
440
450
|
}
|
441
451
|
});
|
package/es/core/utils/tool.d.ts
CHANGED
@@ -11,5 +11,4 @@ declare function getBrowserInfo(): string | null;
|
|
11
11
|
declare function getSystem(): string | null;
|
12
12
|
declare function getDevice(): string | null;
|
13
13
|
declare function getCookie(val: string): string;
|
14
|
-
|
15
|
-
export { uuid, getIndexByblockType, getBrowserInfo, getDevice, getSystem, getCookie, getResFileSizeFromSrc };
|
14
|
+
export { uuid, getIndexByblockType, getBrowserInfo, getDevice, getSystem, getCookie };
|
package/es/core/utils/tool.js
CHANGED
@@ -156,14 +156,4 @@ function getCookie(val) {
|
|
156
156
|
});
|
157
157
|
return value !== null && value !== void 0 ? value : '';
|
158
158
|
}
|
159
|
-
|
160
|
-
if (!imageSrc)
|
161
|
-
return '';
|
162
|
-
return fetch(imageSrc)
|
163
|
-
.then((response) => response.blob())
|
164
|
-
.then((blob) => {
|
165
|
-
const fileSizeInMB = blob.size / (1024 * 1024);
|
166
|
-
return fileSizeInMB.toFixed(2) + '';
|
167
|
-
});
|
168
|
-
};
|
169
|
-
export { uuid, getIndexByblockType, getBrowserInfo, getDevice, getSystem, getCookie, getResFileSizeFromSrc };
|
159
|
+
export { uuid, getIndexByblockType, getBrowserInfo, getDevice, getSystem, getCookie };
|
@@ -6,7 +6,7 @@ const react_1 = tslib_1.__importStar(require("react"));
|
|
6
6
|
const ReactDOM = tslib_1.__importStar(require("react-dom"));
|
7
7
|
const hooks_1 = require("../../../../core/hooks");
|
8
8
|
const closeIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjhJREFUWEfFlztOw0AQhmeWiJ4CCmpQ5DiRQsIJyAWg5A0lR0AIChDiCJS8ER0cADgBeRSxt4CCDgkaKiq8i+zYeWx2413HEWmiJJv9v535Z2aN8M8vFPT9z3zETD0aAUChUJjwvPFHAJhBhB3Hqd6OAsK2yyucwykAvP38eJX398Z3AJDLlVYR8ToU9Rhj25TWr9KEsKy5dULIGQCMtfZly45TvwsAstm56UwG6wA4FUFwzrdctxZBDcWSy5XWEPG8I84/GcMipdWPtgcsaz5PCHtKG0IuTiqUvjT9U/WYMG2IOPE+AP+LtCB0xKUAAyA2Xbd2o2OG0NQXvTnvhL17D7EPtH9TRCIWwkRcGYGIQgYBABuqPuHXOQBc6pw80lBGwBQiiXhsBHQhkoprA6iM6acjhDQKu5YJZW6XeOI3XJdpvfsdTu52VfXEekD8owQiXGIubpSCbhDbLu8DwKEAd+A41SOdPpE4BS0viFOtvV2iKWqUgn5x/tmS70xR01GuDSCKc86/OCcLgTyyZ0ScDGNhFAktAJV4NFJ9YyaFiAWIE+9uVkkgBgLoig8DMWAa9ro9ynkUdlW5maZDCmB6clmz0k1HH4Cs1Ezbq2p2yEpUuBOKTSZZex00RUWIrltxuuK6EOGDSbGIOPZicpMx6fny650377qNRgBgWeVFQuA+6UjVgREhGIMlSqsPUQqIbZdOOIdZQmCv2axRnU1N1+TzJYsxOEaEV8ep7frPZ7Gd0FTEdP0ft0/kMNdg0eoAAAAASUVORK5CYII=';
|
9
|
-
const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema, fullHeight = window.innerHeight, isFullScreen = false }) => {
|
9
|
+
const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema, fullHeight = window.innerHeight, isFullScreen = false, openState }) => {
|
10
10
|
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;
|
11
11
|
const touchRef = (0, react_1.useRef)(null);
|
12
12
|
const fTouchRef = (0, react_1.useRef)(null);
|
@@ -58,7 +58,7 @@ const Modal = ({ visible, onClose, children, modalStyle, padding, popup, schema,
|
|
58
58
|
}, [isOpen, popup]);
|
59
59
|
const child = (0, react_1.useCallback)(() => {
|
60
60
|
return children;
|
61
|
-
}, [_popup]);
|
61
|
+
}, [_popup, openState]);
|
62
62
|
if (!modalEleRef.current)
|
63
63
|
return null;
|
64
64
|
const handleClose = (0, lodash_1.debounce)(() => {
|
@@ -9,7 +9,6 @@ interface IPictureGroupProps {
|
|
9
9
|
index: number;
|
10
10
|
onViewImageEndEvent: (rec: RecItemType) => void;
|
11
11
|
onViewImageStartEvent: (index: number, imgInfo?: {
|
12
|
-
contentSize: string;
|
13
12
|
loadTime: string;
|
14
13
|
}, enableCapi?: boolean) => void;
|
15
14
|
imgUrlsPostConfig?: postConfigType;
|
@@ -8,7 +8,6 @@ const Picture_1 = tslib_1.__importDefault(require("./Picture"));
|
|
8
8
|
const hooks_1 = require("../../../../core/hooks");
|
9
9
|
const css_1 = require("@emotion/css");
|
10
10
|
const event_1 = tslib_1.__importStar(require("../../../../core/utils/event"));
|
11
|
-
const tool_1 = require("../../../../core/utils/tool");
|
12
11
|
const PictureGroup = ({ imgUrls, width, height, rec, index, onViewImageEndEvent, onViewImageStartEvent, imgUrlsPostConfig }) => {
|
13
12
|
var _a, _b;
|
14
13
|
const ref = (0, react_1.useRef)();
|
@@ -33,9 +32,7 @@ const PictureGroup = ({ imgUrls, width, height, rec, index, onViewImageEndEvent,
|
|
33
32
|
}, [rec, isActive, onViewImageEndEvent, openHashtag, index, onViewImageStartEvent, isLoad, imgInfo]);
|
34
33
|
const showFirstImageFn = (0, react_1.useCallback)((e) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
|
35
34
|
if (!isLoad) {
|
36
|
-
const contentSize = yield (0, tool_1.getResFileSizeFromSrc)(e.src);
|
37
35
|
setImgInfo({
|
38
|
-
contentSize,
|
39
36
|
loadTime: (new Date() - initTime).toFixed(2) + ''
|
40
37
|
});
|
41
38
|
setIsLoad(true);
|
@@ -5,59 +5,36 @@ const react_1 = tslib_1.__importStar(require("react"));
|
|
5
5
|
require("./index.less");
|
6
6
|
const withBindDataSource_1 = tslib_1.__importDefault(require("../../../core/hoc/withBindDataSource"));
|
7
7
|
const hooks_1 = require("../../../core/hooks");
|
8
|
-
const
|
9
|
-
|
8
|
+
const lodash_1 = require("lodash");
|
9
|
+
const RenderCard = ({ rec, index, tempMap, resolver, includesCtaType, isActive, value }) => {
|
10
10
|
const { schema } = (0, hooks_1.useEditor)();
|
11
11
|
if (!(rec === null || rec === void 0 ? void 0 : rec.video))
|
12
12
|
return null;
|
13
|
-
let cta = null;
|
14
|
-
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) {
|
15
|
-
cta = '多商品CTA';
|
16
|
-
}
|
17
|
-
else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) {
|
18
|
-
cta = '商品CTA';
|
19
|
-
}
|
20
|
-
else {
|
21
|
-
cta = (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.bindCta) === null || _e === void 0 ? void 0 : _e.itemId;
|
22
|
-
}
|
23
|
-
const value = tempMap === null || tempMap === void 0 ? void 0 : tempMap[cta];
|
24
13
|
const renderComp = (0, react_1.useMemo)(() => {
|
25
|
-
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
|
26
|
-
if (!(
|
27
|
-
return null;
|
28
|
-
let cta = null;
|
29
|
-
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) {
|
30
|
-
cta = '多商品CTA';
|
31
|
-
}
|
32
|
-
else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) {
|
33
|
-
cta = '商品CTA';
|
34
|
-
}
|
35
|
-
else {
|
36
|
-
cta = (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.bindCta) === null || _e === void 0 ? void 0 : _e.itemId;
|
37
|
-
}
|
38
|
-
if (includesCtaType && !(includesCtaType === null || includesCtaType === void 0 ? void 0 : includesCtaType.includes((_f = value === null || value === void 0 ? void 0 : value.item) === null || _f === void 0 ? void 0 : _f.type)))
|
14
|
+
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;
|
15
|
+
if (includesCtaType && !(includesCtaType === null || includesCtaType === void 0 ? void 0 : includesCtaType.includes((_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type)))
|
39
16
|
return;
|
40
|
-
if (!includesCtaType && ((
|
17
|
+
if (!includesCtaType && ((_b = value === null || value === void 0 ? void 0 : value.item) === null || _b === void 0 ? void 0 : _b.category) === 'cta')
|
41
18
|
return;
|
42
|
-
if ((((
|
43
|
-
(((
|
44
|
-
(((
|
45
|
-
(((
|
46
|
-
(((
|
47
|
-
(((
|
19
|
+
if ((((_c = value === null || value === void 0 ? void 0 : value.item) === null || _c === void 0 ? void 0 : _c.type) === 'CommodityDiro' && !((_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.bindProduct)) ||
|
20
|
+
(((_e = value === null || value === void 0 ? void 0 : value.item) === null || _e === void 0 ? void 0 : _e.type) === 'Commodity' && !((_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.bindProduct)) ||
|
21
|
+
(((_g = value === null || value === void 0 ? void 0 : value.item) === null || _g === void 0 ? void 0 : _g.type) === 'CommodityDiroNew' && !((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.bindProduct)) ||
|
22
|
+
(((_j = value === null || value === void 0 ? void 0 : value.item) === null || _j === void 0 ? void 0 : _j.type) === 'MultiCommodity' && !((_l = (_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.bindProducts) === null || _l === void 0 ? void 0 : _l.length)) ||
|
23
|
+
(((_m = value === null || value === void 0 ? void 0 : value.item) === null || _m === void 0 ? void 0 : _m.type) === 'MultiCommodityDiro' && !((_p = (_o = rec === null || rec === void 0 ? void 0 : rec.video) === null || _o === void 0 ? void 0 : _o.bindProducts) === null || _p === void 0 ? void 0 : _p.length)) ||
|
24
|
+
(((_q = value === null || value === void 0 ? void 0 : value.item) === null || _q === void 0 ? void 0 : _q.type) === 'MultiCommodityDiroNew' && !((_s = (_r = rec === null || rec === void 0 ? void 0 : rec.video) === null || _r === void 0 ? void 0 : _r.bindProducts) === null || _s === void 0 ? void 0 : _s.length))) {
|
48
25
|
return null;
|
49
26
|
}
|
50
27
|
if (value && resolver) {
|
51
|
-
const t = resolver[(
|
28
|
+
const t = resolver[(_t = value === null || value === void 0 ? void 0 : value.item) === null || _t === void 0 ? void 0 : _t.type];
|
52
29
|
const Component = (0, withBindDataSource_1.default)(t);
|
53
|
-
const defaulSetting = (
|
54
|
-
const isExternalLink = ((
|
55
|
-
let style = (
|
30
|
+
const defaulSetting = (_u = t === null || t === void 0 ? void 0 : t.extend) === null || _u === void 0 ? void 0 : _u.defaulSetting;
|
31
|
+
const isExternalLink = ((_x = (_w = (_v = value === null || value === void 0 ? void 0 : value.item) === null || _v === void 0 ? void 0 : _v.event) === null || _w === void 0 ? void 0 : _w.onClick) === null || _x === void 0 ? void 0 : _x.linkType) === 'externalLink';
|
32
|
+
let style = (0, lodash_1.cloneDeep)((_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.style);
|
56
33
|
if (style.hasOwnProperty('backdropFilter')) {
|
57
34
|
let sbf = style['backdropFilter'];
|
58
35
|
style['backdropFilter'] = `blur(${sbf !== null && sbf !== void 0 ? sbf : 0}px)`;
|
59
36
|
}
|
60
|
-
return (react_1.default.createElement(Component, Object.assign({ style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), style), { zIndex: 50, marginLeft: '20px', boxSizing: 'border-box', transform: 'translate3d(0px, 0px, 0px)' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (
|
37
|
+
return (react_1.default.createElement(Component, Object.assign({ style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), style), { zIndex: 50, marginLeft: '20px', boxSizing: 'border-box', transform: 'translate3d(0px, 0px, 0px)' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_z = value === null || value === void 0 ? void 0 : value.item) === null || _z === void 0 ? void 0 : _z.textStyle), bindDatas: (_1 = (_0 = value === null || value === void 0 ? void 0 : value.item) === null || _0 === void 0 ? void 0 : _0.bindDatas) !== null && _1 !== void 0 ? _1 : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_2 = value === null || value === void 0 ? void 0 : value.item) === null || _2 === void 0 ? void 0 : _2.props, { event: ((_3 = value === null || value === void 0 ? void 0 : value.item) === null || _3 === void 0 ? void 0 : _3.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id, key: value === null || value === void 0 ? void 0 : value.id, recData: rec, isExternalLink: isExternalLink, index: index, isActive: isActive })));
|
61
38
|
}
|
62
39
|
else {
|
63
40
|
return null;
|
@@ -9,7 +9,6 @@ const hooks_1 = require("../../../../core/hooks");
|
|
9
9
|
const event_1 = tslib_1.__importStar(require("../../../../core/utils/event"));
|
10
10
|
const loading_gif_1 = tslib_1.__importDefault(require("./loading.gif"));
|
11
11
|
const VideoPlayer_1 = require("./VideoPlayer");
|
12
|
-
const tool_1 = require("../../../../core/utils/tool");
|
13
12
|
const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon }) => {
|
14
13
|
const [isPauseVideo, setIsPauseVideo] = (0, react_1.useState)(false);
|
15
14
|
const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport } = (0, hooks_1.useSxpDataSource)();
|
@@ -25,6 +24,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
|
|
25
24
|
const videoEleRef = (0, react_1.useRef)(null);
|
26
25
|
const hlsRef = (0, react_1.useRef)(null);
|
27
26
|
const initTimeRef = (0, react_1.useRef)();
|
27
|
+
const loadedTimeRef = (0, react_1.useRef)();
|
28
28
|
const blur = (0, react_1.useMemo)(() => {
|
29
29
|
return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
|
30
30
|
}, [videoPostConfig]);
|
@@ -71,7 +71,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
|
|
71
71
|
setIsLoadFinish(true);
|
72
72
|
}, []);
|
73
73
|
const handleStartPlay = (0, react_1.useCallback)(() => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
|
74
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o
|
74
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
75
75
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
76
76
|
return;
|
77
77
|
setIsPauseVideo(false);
|
@@ -81,22 +81,20 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
|
|
81
81
|
const videoDuration = ((_d = (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 0).toFixed(2);
|
82
82
|
const videoCurrentTime = ((_f = (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime) !== null && _f !== void 0 ? _f : 0).toFixed(2);
|
83
83
|
const playType = isFirstPlay ? '0' : '1';
|
84
|
-
const contentSize = yield (0, tool_1.getResFileSizeFromSrc)((_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.url);
|
85
84
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
86
85
|
eventInfo: {
|
87
86
|
eventSubject: 'playVideo',
|
88
87
|
eventDescription: 'User played the video',
|
89
|
-
contentId: (
|
90
|
-
contentName: (
|
88
|
+
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 : '',
|
89
|
+
contentName: (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
|
91
90
|
playType,
|
92
91
|
startTime: videoCurrentTime,
|
93
92
|
videoDuration,
|
94
|
-
contentTags: JSON.stringify((
|
93
|
+
contentTags: JSON.stringify((_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
|
95
94
|
position: index + '',
|
96
95
|
contentFormat: 'video',
|
97
|
-
traceInfo: (
|
98
|
-
|
99
|
-
loadTime: (new Date() - (initTimeRef === null || initTimeRef === void 0 ? void 0 : initTimeRef.current)).toFixed(2) + ''
|
96
|
+
traceInfo: (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.traceInfo,
|
97
|
+
loadTime: ((loadedTimeRef === null || loadedTimeRef === void 0 ? void 0 : loadedTimeRef.current) - (initTimeRef === null || initTimeRef === void 0 ? void 0 : initTimeRef.current)).toFixed(2) + ''
|
100
98
|
}
|
101
99
|
});
|
102
100
|
setIsFirstPlay(false);
|
@@ -127,6 +125,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
|
|
127
125
|
const handleLoadedmetadata = (0, react_1.useCallback)(() => {
|
128
126
|
if (!videoRef.current)
|
129
127
|
return;
|
128
|
+
loadedTimeRef.current = new Date();
|
130
129
|
handleStartPlay();
|
131
130
|
handLoadeddata();
|
132
131
|
}, [videoRef.current, handLoadeddata, handleStartPlay]);
|
@@ -257,19 +257,30 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
257
257
|
};
|
258
258
|
}, [isShowMore]);
|
259
259
|
const renderBottom = (0, react_1.useCallback)((rec, index) => {
|
260
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
260
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
261
261
|
if (rec === null || rec === void 0 ? void 0 : rec.video) {
|
262
|
+
let cta = null;
|
263
|
+
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) {
|
264
|
+
cta = '多商品CTA';
|
265
|
+
}
|
266
|
+
else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) {
|
267
|
+
cta = '商品CTA';
|
268
|
+
}
|
269
|
+
else {
|
270
|
+
cta = (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.bindCta) === null || _e === void 0 ? void 0 : _e.itemId;
|
271
|
+
}
|
272
|
+
const value = tempMap === null || tempMap === void 0 ? void 0 : tempMap[cta];
|
262
273
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
263
|
-
((
|
264
|
-
react_1.default.createElement("div", { className: 'clc-sxp-bottom', style: { marginBottom: `${(
|
274
|
+
((_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.title) && !isShowMore && react_1.default.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
|
275
|
+
react_1.default.createElement("div", { className: 'clc-sxp-bottom', style: { marginBottom: `${(_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.bottomInfoDist) !== null && _g !== void 0 ? _g : 40}px` } },
|
265
276
|
react_1.default.createElement(Nudge_1.default, { nudge: nudge }),
|
266
277
|
(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) ? (react_1.default.createElement("div", { className: 'clc-sxp-bottom-card' },
|
267
|
-
react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, isActive: index === activeIndex }))) : null,
|
278
|
+
react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, isActive: index === activeIndex, value: value }))) : null,
|
268
279
|
react_1.default.createElement("div", null,
|
269
|
-
react_1.default.createElement(ExpandableText_1.default, { 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: (
|
270
|
-
react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLink'], isActive: index === activeIndex }),
|
271
|
-
react_1.default.createElement(Hashtag_1.default, { index: activeIndex, tags: (
|
272
|
-
react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex })));
|
280
|
+
react_1.default.createElement(ExpandableText_1.default, { 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: (_j = (_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.title) !== null && _j !== void 0 ? _j : '', 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 }),
|
281
|
+
react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLink'], isActive: index === activeIndex, value: value }),
|
282
|
+
react_1.default.createElement(Hashtag_1.default, { index: activeIndex, tags: (_l = (_k = rec === null || rec === void 0 ? void 0 : rec.video) === null || _k === void 0 ? void 0 : _k.hashTags) !== null && _l !== void 0 ? _l : [], itemId: (_m = rec === null || rec === void 0 ? void 0 : rec.video) === null || _m === void 0 ? void 0 : _m.itemId, itemType: ((_o = rec === null || rec === void 0 ? void 0 : rec.video) === null || _o === void 0 ? void 0 : _o.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle, hashTagRightMargin: containerWidth - (hashTagRightMargin !== null && hashTagRightMargin !== void 0 ? hashTagRightMargin : 0) }))),
|
283
|
+
react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: resolver, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex, value: value })));
|
273
284
|
}
|
274
285
|
return null;
|
275
286
|
}, [
|
@@ -438,7 +449,6 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
438
449
|
position: activeIndex + '',
|
439
450
|
contentFormat: 'image',
|
440
451
|
traceInfo: item === null || item === void 0 ? void 0 : item.video.traceInfo,
|
441
|
-
contentSize: imgInfo === null || imgInfo === void 0 ? void 0 : imgInfo.contentSize,
|
442
452
|
loadTime: imgInfo === null || imgInfo === void 0 ? void 0 : imgInfo.loadTime
|
443
453
|
}
|
444
454
|
});
|
package/lib/core/utils/tool.d.ts
CHANGED
@@ -11,5 +11,4 @@ declare function getBrowserInfo(): string | null;
|
|
11
11
|
declare function getSystem(): string | null;
|
12
12
|
declare function getDevice(): string | null;
|
13
13
|
declare function getCookie(val: string): string;
|
14
|
-
|
15
|
-
export { uuid, getIndexByblockType, getBrowserInfo, getDevice, getSystem, getCookie, getResFileSizeFromSrc };
|
14
|
+
export { uuid, getIndexByblockType, getBrowserInfo, getDevice, getSystem, getCookie };
|