pb-sxp-ui 1.0.16 → 1.0.17

package/lib/core/components/SxpPageRender/PictureGroup/index.js

@@ -1,31 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
-const modules_1 = require("swiper/modules");
-const react_2 = require("swiper/react");
-const Picture_1 = tslib_1.__importDefault(require("./Picture"));
-const hooks_1 = require("../../../../core/hooks");
-const PictureGroup = ({ imgUrls, width, height, rec, index, onReportViewImageEnd, onViewImageStartEvent }) => {
-    const { isActive } = (0, react_2.useSwiperSlide)();
-    const { sxpParameter, openHashtag } = (0, hooks_1.useSxpDataSource)();
-    const [isLoad, setIsLoad] = (0, react_1.useState)(false);
-    (0, react_1.useEffect)(() => {
-        if (isLoad && isActive) {
-            if (openHashtag) {
-                onReportViewImageEnd(rec);
-            }
-            else {
-                onViewImageStartEvent(index);
-            }
-        }
-        else {
-            setIsLoad(true);
-        }
-    }, [rec, isActive, onReportViewImageEnd, openHashtag, index, onViewImageStartEvent, isLoad]);
-    return (react_1.default.createElement(react_2.Swiper, { defaultValue: 0, direction: 'horizontal', modules: [modules_1.Pagination, modules_1.Autoplay], pagination: { clickable: true, bulletActiveClass: 'swipe-item-active-bullet' }, height: height, loop: true, autoplay: { delay: 3000 } }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url) => {
-        return (react_1.default.createElement(react_2.SwiperSlide, { key: url },
-            react_1.default.createElement(Picture_1.default, { src: url, width: width, height: height })));
-    })));
-};
-exports.default = (0, react_1.memo)(PictureGroup);

package/lib/core/components/SxpPageRender/Popup/index.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const Popup: () => React.JSX.Element;
-export default Popup;

package/lib/core/components/SxpPageRender/Popup/index.js

@@ -1,65 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
-const Modal_1 = tslib_1.__importDefault(require("../Modal"));
-const hooks_1 = require("../../../../core/hooks");
-const withBindDataSource_1 = tslib_1.__importDefault(require("../../../../core/hoc/withBindDataSource"));
-const useEventReport_1 = require("../../../../core/hooks/useEventReport");
-const Popup = () => {
-    const { schema, resolver, popup } = (0, hooks_1.useEditor)();
-    const { setPopupDetailData, popupDetailData, bffEventReport } = (0, hooks_1.useSxpDataSource)();
-    const { productView } = (0, useEventReport_1.useEventReport)();
-    const [visible, setVisible] = (0, react_1.useState)();
-    const curTimeRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        const initTime = () => {
-            curTimeRef.current = new Date();
-        };
-        initTime();
-        window.addEventListener('pageshow', initTime);
-        return () => {
-            window.removeEventListener('pageshow', initTime);
-        };
-    }, []);
-    (0, react_1.useEffect)(() => {
-        if (popup && (popup === null || popup === void 0 ? void 0 : popup.id) && (popup === null || popup === void 0 ? void 0 : popup.id) !== '') {
-            curTimeRef.current = new Date();
-            setVisible(popup);
-        }
-    }, [popup]);
-    const handleClose = () => {
-        var _a, _b, _c, _d;
-        if (!popup || (popup === null || popup === void 0 ? void 0 : popup.id) === '' || !visible || new Date() - curTimeRef.current < ((_a = popup === null || popup === void 0 ? void 0 : popup.duration) !== null && _a !== void 0 ? _a : 0)) {
-            return;
-        }
-        setVisible(Object.assign(Object.assign({}, popup), { id: '' }));
-        const data = popupDetailData;
-        const product = (_b = data === null || data === void 0 ? void 0 : data.video) === null || _b === void 0 ? void 0 : _b.bindProduct;
-        const cta = (_d = (_c = data === null || data === void 0 ? void 0 : data.video) === null || _c === void 0 ? void 0 : _c.bindProduct) === null || _d === void 0 ? void 0 : _d.bindCta;
-        if (product && cta) {
-            productView(data, product, cta, curTimeRef.current, popupDetailData === null || popupDetailData === void 0 ? void 0 : popupDetailData.index);
-        }
-        setTimeout(() => {
-            window === null || window === void 0 ? void 0 : window.sxpPopup('');
-            setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(null);
-        }, popup === null || popup === void 0 ? void 0 : popup.duration);
-    };
-    const renderPopupDetail = (0, react_1.useMemo)(() => {
-        var _a, _b, _c;
-        return (_c = (_b = (_a = schema === null || schema === void 0 ? void 0 : schema.sxpPageConf) === null || _a === void 0 ? void 0 : _a.globalConfig) === null || _b === void 0 ? void 0 : _b.popupList) === null || _c === void 0 ? void 0 : _c.map((value, index) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
-            if ((value === null || value === void 0 ? void 0 : value.id) === (popup === null || popup === void 0 ? void 0 : popup.id)) {
-                const t = resolver[(_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type];
-                const Component = (0, withBindDataSource_1.default)(t);
-                const defaulSetting = (_b = t === null || t === void 0 ? void 0 : t.extend) === null || _b === void 0 ? void 0 : _b.defaulSetting;
-                return (react_1.default.createElement(Component, Object.assign({ key: index, style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_c = value === null || value === void 0 ? void 0 : value.item) === null || _c === void 0 ? void 0 : _c.style), { width: '100%', height: '80vh', overflow: 'auto' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_d = value === null || value === void 0 ? void 0 : value.item) === null || _d === void 0 ? void 0 : _d.textStyle), bindDatas: (_f = (_e = value === null || value === void 0 ? void 0 : value.item) === null || _e === void 0 ? void 0 : _e.bindDatas) !== null && _f !== void 0 ? _f : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_g = value === null || value === void 0 ? void 0 : value.item) === null || _g === void 0 ? void 0 : _g.props, { event: ((_h = value === null || value === void 0 ? void 0 : value.item) === null || _h === void 0 ? void 0 : _h.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id })));
-            }
-            else {
-                return react_1.default.createElement(react_1.default.Fragment, null);
-            }
-        });
-    }, [schema, popup, resolver]);
-    return (react_1.default.createElement(Modal_1.default, { popup: visible, onClose: handleClose, padding: 0, modalStyle: { position: 'fixed' } }, renderPopupDetail));
-};
-exports.default = Popup;

package/lib/core/components/SxpPageRender/RenderCard.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-import './index.less';
-import { RecItemType } from './typing';
-interface IRenderCardProps {
-    index: number;
-    rec: RecItemType;
-    tempMap?: Record<string, any>;
-    resolver: any;
-}
-declare const _default: React.NamedExoticComponent<IRenderCardProps>;
-export default _default;

package/lib/core/components/SxpPageRender/RenderCard.js

@@ -1,46 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
-require("./index.less");
-const withBindDataSource_1 = tslib_1.__importDefault(require("../../../core/hoc/withBindDataSource"));
-const hooks_1 = require("../../../core/hooks");
-const RenderCard = ({ rec, index, tempMap, resolver }) => {
-    const { schema } = (0, hooks_1.useEditor)();
-    const renderComp = (0, react_1.useMemo)(() => {
-        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;
-        if (!(rec === null || rec === void 0 ? void 0 : rec.video))
-            return null;
-        let cta = null;
-        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) {
-            cta = '多商品CTA';
-        }
-        else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.bindProduct) {
-            cta = '商品CTA';
-        }
-        else {
-            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;
-        }
-        const value = tempMap === null || tempMap === void 0 ? void 0 : tempMap[cta];
-        if ((((_f = value === null || value === void 0 ? void 0 : value.item) === null || _f === void 0 ? void 0 : _f.type) === 'CommodityDiro' && !((_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.bindProduct)) ||
-            (((_h = value === null || value === void 0 ? void 0 : value.item) === null || _h === void 0 ? void 0 : _h.type) === 'Commodity' && !((_j = rec === null || rec === void 0 ? void 0 : rec.video) === null || _j === void 0 ? void 0 : _j.bindProduct)) ||
-            (((_k = value === null || value === void 0 ? void 0 : value.item) === null || _k === void 0 ? void 0 : _k.type) === 'CommodityDiroNew' && !((_l = rec === null || rec === void 0 ? void 0 : rec.video) === null || _l === void 0 ? void 0 : _l.bindProduct)) ||
-            (((_m = value === null || value === void 0 ? void 0 : value.item) === null || _m === void 0 ? void 0 : _m.type) === 'MultiCommodity' && !((_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)) ||
-            (((_q = value === null || value === void 0 ? void 0 : value.item) === null || _q === void 0 ? void 0 : _q.type) === 'MultiCommodityDiro' && !((_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)) ||
-            (((_t = value === null || value === void 0 ? void 0 : value.item) === null || _t === void 0 ? void 0 : _t.type) === 'MultiCommodityDiroNew' && !((_v = (_u = rec === null || rec === void 0 ? void 0 : rec.video) === null || _u === void 0 ? void 0 : _u.bindProducts) === null || _v === void 0 ? void 0 : _v.length))) {
-            return null;
-        }
-        if (value && resolver) {
-            const t = resolver[(_w = value === null || value === void 0 ? void 0 : value.item) === null || _w === void 0 ? void 0 : _w.type];
-            const Component = (0, withBindDataSource_1.default)(t);
-            const defaulSetting = (_x = t === null || t === void 0 ? void 0 : t.extend) === null || _x === void 0 ? void 0 : _x.defaulSetting;
-            const isExternalLink = ((_0 = (_z = (_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.event) === null || _z === void 0 ? void 0 : _z.onClick) === null || _0 === void 0 ? void 0 : _0.linkType) === 'externalLink';
-            return (react_1.default.createElement(Component, Object.assign({ style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_1 = value === null || value === void 0 ? void 0 : value.item) === null || _1 === void 0 ? void 0 : _1.style), { zIndex: 50, marginLeft: '20px', boxSizing: 'border-box' }), textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.textStyle), (_2 = value === null || value === void 0 ? void 0 : value.item) === null || _2 === void 0 ? void 0 : _2.textStyle), bindDatas: (_4 = (_3 = value === null || value === void 0 ? void 0 : value.item) === null || _3 === void 0 ? void 0 : _3.bindDatas) !== null && _4 !== void 0 ? _4 : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_5 = value === null || value === void 0 ? void 0 : value.item) === null || _5 === void 0 ? void 0 : _5.props, { event: ((_6 = value === null || value === void 0 ? void 0 : value.item) === null || _6 === void 0 ? void 0 : _6.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 })));
-        }
-        else {
-            return null;
-        }
-    }, [rec, resolver, tempMap, schema]);
-    return react_1.default.createElement(react_1.default.Fragment, null, renderComp);
-};
-exports.default = (0, react_1.memo)(RenderCard);

package/lib/core/components/SxpPageRender/ToggleButton/index.d.ts

@@ -1,10 +0,0 @@
-import React, { CSSProperties } from 'react';
-interface IToggleButtonProps {
-    activeIcon?: string;
-    unactiveIcon?: string;
-    onChange?: (result: boolean) => void;
-    defaultValue?: boolean;
-    style?: CSSProperties;
-}
-declare const _default: React.NamedExoticComponent<IToggleButtonProps>;
-export default _default;

package/lib/core/components/SxpPageRender/ToggleButton/index.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
-const ToggleButton = ({ defaultValue, activeIcon, unactiveIcon, onChange, style }) => {
-    const [isTrue, setIsTure] = (0, react_1.useState)(defaultValue);
-    const handleClick = (e) => {
-        e.stopPropagation();
-        const result = !isTrue;
-        setIsTure(result);
-        onChange === null || onChange === void 0 ? void 0 : onChange(result);
-    };
-    return (react_1.default.createElement("button", { style: style, className: 'pb-toggle-button', onClick: handleClick },
-        react_1.default.createElement("img", { className: 'pb-toggle-button-icon', src: isTrue ? activeIcon : unactiveIcon })));
-};
-exports.default = (0, react_1.memo)(ToggleButton);

package/lib/core/components/SxpPageRender/VideoWidget/index.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-import { RecItemType } from '../typing';
-interface IVideoWidgetProps {
-    rec: RecItemType;
-    index: number;
-    height: number;
-    data: RecItemType[];
-    muted: boolean;
-    activeIndex?: number;
-}
-declare const _default: React.NamedExoticComponent<IVideoWidgetProps>;
-export default _default;

package/lib/core/components/SxpPageRender/VideoWidget/index.js

@@ -1,222 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
-const react_2 = require("swiper/react");
-const useIconLink_1 = require("../useIconLink");
-const hooks_1 = require("../../../../core/hooks");
-const event_1 = tslib_1.__importStar(require("../../../../core/utils/event"));
-const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
-    const [isPauseVideo, setIsPauseVideo] = (0, react_1.useState)(false);
-    const videoRef = (0, react_1.useRef)(null);
-    const { bffEventReport, sxpParameter, waterFallData, openHashtag } = (0, hooks_1.useSxpDataSource)();
-    const videoStartTime = (0, react_1.useRef)(0);
-    const [isLoad, setIsLoad] = (0, react_1.useState)(false);
-    const { isActive } = (0, react_2.useSwiperSlide)();
-    (0, react_1.useEffect)(() => {
-        if (!videoRef.current)
-            return;
-        videoRef.current.muted = muted;
-    }, [muted]);
-    const handleVideoStart = (0, react_1.useCallback)(() => {
-        var _a;
-        (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
-    }, []);
-    const PAUSE_ICON = (0, useIconLink_1.useIconLink)('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
-    const handlePlaying = (0, react_1.useCallback)(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-        setIsPauseVideo(false);
-        const item = data[index];
-        if (item && isLoad && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
-            videoStartTime.current = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.currentTime) || 0;
-            const videoDuration = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 0).toFixed(2);
-            const videoCurrentTime = ((_f = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime) !== null && _f !== void 0 ? _f : 0).toFixed(2);
-            const playType = '1';
-            bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
-                eventInfo: {
-                    eventSubject: 'playVideo',
-                    eventDescription: 'User played the video',
-                    contentId: (_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
-                    contentName: (_k = (_j = item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
-                    playType,
-                    startTime: videoCurrentTime,
-                    videoDuration,
-                    contentTags: JSON.stringify((_m = (_l = item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
-                    position: index + '',
-                    contentFormat: 'video',
-                    traceInfo: (_o = item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
-                }
-            });
-        }
-        if (!isLoad) {
-            setIsLoad(true);
-        }
-    }, [bffEventReport, data, index, isLoad]);
-    const handleLoadedMetadata = (0, react_1.useCallback)(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-        const item = data[index];
-        if (item && !isLoad && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
-            videoStartTime.current = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.currentTime) || 0;
-            const videoDuration = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 0).toFixed(2);
-            const videoCurrentTime = ((_f = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime) !== null && _f !== void 0 ? _f : 0).toFixed(2);
-            const playType = '0';
-            bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
-                eventInfo: {
-                    eventSubject: 'playVideo',
-                    eventDescription: 'User played the video',
-                    contentId: (_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
-                    contentName: (_k = (_j = item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
-                    playType,
-                    startTime: videoCurrentTime,
-                    videoDuration,
-                    contentTags: JSON.stringify((_m = (_l = item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
-                    position: index + '',
-                    contentFormat: 'video',
-                    traceInfo: (_o = item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
-                }
-            });
-        }
-        setTimeout(() => {
-            var _a;
-            (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
-        }, 0);
-    }, [index, bffEventReport, data, isLoad]);
-    const handleClickVideo = (0, react_1.useCallback)((type) => () => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        if (!isLoad)
-            return;
-        const item = data[index];
-        const videoDuration = ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
-        const videoCurrentTime = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
-        const isPause = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.paused;
-        switch (type) {
-            case 'start':
-                if (!isPause)
-                    return;
-                (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.play();
-                setIsPauseVideo(false);
-                break;
-            case 'pause':
-                if (isPause)
-                    return;
-                (_g = videoRef.current) === null || _g === void 0 ? void 0 : _g.pause();
-                setIsPauseVideo(true);
-                break;
-            default:
-                if (isPause) {
-                    (_h = videoRef.current) === null || _h === void 0 ? void 0 : _h.play();
-                }
-                else {
-                    (_j = videoRef.current) === null || _j === void 0 ? void 0 : _j.pause();
-                }
-                setIsPauseVideo(!isPause);
-                break;
-        }
-    }, [data, index, isLoad]);
-    const onPause = (0, react_1.useCallback)(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-        const item = data[index];
-        const videoDuration = ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
-        const videoCurrentTime = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
-        if ((_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.duration) {
-            const playDuration = (((_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.currentTime) - videoStartTime.current).toFixed(2);
-            bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
-                eventInfo: {
-                    eventSubject: 'playOverVideo',
-                    eventDescription: 'User finished playing the video',
-                    contentId: (_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
-                    contentName: (_k = (_j = item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
-                    endTime: videoCurrentTime,
-                    videoDuration,
-                    playDuration,
-                    contentTags: JSON.stringify((_m = (_l = item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
-                    position: index + '',
-                    contentFormat: 'video',
-                    traceInfo: (_o = item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
-                }
-            });
-        }
-    }, [data, index, bffEventReport]);
-    (0, react_1.useEffect)(() => {
-        var _a, _b, _c;
-        if (data.length <= 0)
-            return;
-        if (!videoRef.current)
-            return;
-        setIsPauseVideo(false);
-        if (!isActive) {
-            (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
-            return;
-        }
-        if (!videoRef.current.src) {
-            const videoSrc = rec.video.url;
-            videoRef.current.src = videoSrc;
-            videoRef.current.setAttribute('x5-playsinline', 'true');
-            videoRef.current.setAttribute('webkit-playsinline', 'true');
-        }
-        else {
-            videoRef.current.play();
-        }
-        (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('canplay', handleLoadedMetadata);
-        (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener('playing', handlePlaying);
-        return () => {
-            var _a, _b;
-            (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('canplay', handleLoadedMetadata);
-            (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('playing', handlePlaying);
-        };
-    }, [data, handleLoadedMetadata, handlePlaying, isActive, isLoad, rec.video]);
-    (0, react_1.useEffect)(() => {
-        var _a, _b, _c;
-        const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
-        if (!isActive)
-            return;
-        if (!isPause && openHashtag) {
-            (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.pause();
-        }
-        else if (!openHashtag) {
-            (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.play();
-        }
-    }, [openHashtag, isActive]);
-    (0, react_1.useEffect)(() => {
-        if (!isActive)
-            return;
-        const onShow = handleClickVideo('start');
-        const onHide = handleClickVideo('pause');
-        event_1.default.on(event_1.SXP_EVENT_TYPE.PAGE_DID_SHOW, onShow);
-        event_1.default.on(event_1.SXP_EVENT_TYPE.PAGE_DID_HIDE, onHide);
-        return () => {
-            event_1.default.off(event_1.SXP_EVENT_TYPE.PAGE_DID_SHOW, onShow);
-            event_1.default.off(event_1.SXP_EVENT_TYPE.PAGE_DID_HIDE, onHide);
-        };
-    }, [handleClickVideo, isActive]);
-    const renderPoster = (0, react_1.useMemo)(() => {
-        if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image)) {
-            return null;
-        }
-        return (react_1.default.createElement("img", { hidden: isLoad, style: { position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', objectFit: 'cover' }, src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image }));
-    }, [isLoad, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
-    (0, react_1.useEffect)(() => {
-        const handleBeforeUnload = () => {
-            var _a, _b;
-            if (activeIndex === index && ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) && ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.src) && !isPauseVideo) {
-                handleClickVideo('pause')();
-            }
-        };
-        window.addEventListener('beforeunload', handleBeforeUnload);
-        return () => {
-            window.removeEventListener('beforeunload', handleBeforeUnload);
-        };
-    }, [activeIndex, index, rec, videoRef, handleClickVideo, isPauseVideo]);
-    if (!rec.video) {
-        return null;
-    }
-    return (react_1.default.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
-            position: 'relative',
-            width: '100%',
-            height
-        } },
-        react_1.default.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', ref: videoRef, poster: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, muted: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart }),
-        renderPoster,
-        react_1.default.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })));
-};
-exports.default = (0, react_1.memo)(VideoWidget);

package/lib/core/components/SxpPageRender/WaterFall/List.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import './List.less';
-import { IHashTagProps } from '../../../../materials/sxp/HashTag';
-export default function WaterfallList({ reportTagsView, ...props }: any & IHashTagProps): React.JSX.Element;

package/lib/core/components/SxpPageRender/WaterFall/List.js

@@ -1,186 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
-require("./List.less");
-const preview_json_1 = tslib_1.__importDefault(require("./preview.json"));
-const hooks_1 = require("../../../../core/hooks");
-const WaterfallFlowItem = (props) => {
-    const { rec, index, list, reportTagsView, textStyles, space } = props;
-    const { swiperRef, setRtcList, setOpenHashtag, bffEventReport, sxpParameter } = (0, hooks_1.useSxpDataSource)();
-    const [showVideo, setShowVideo] = (0, react_1.useState)(false);
-    const imgDom = (0, react_1.useRef)(null);
-    const videoDom = (0, react_1.useRef)(null);
-    const canvasRef = (0, react_1.useRef)(null);
-    const [firstFrameSrc, setFirstFrameSrc] = (0, react_1.useState)('');
-    const src = (0, react_1.useMemo)(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-        if ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) {
-            return (_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.cover;
-        }
-        else if ((_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.url) {
-            setShowVideo(true);
-            return (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.url;
-        }
-        else if ((_f = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.imgUrls) === null || _f === void 0 ? void 0 : _f.length) {
-            return (_h = (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.imgUrls) === null || _h === void 0 ? void 0 : _h[0];
-        }
-        else if ((_k = (_j = rec === null || rec === void 0 ? void 0 : rec.product) === null || _j === void 0 ? void 0 : _j.homePage) === null || _k === void 0 ? void 0 : _k.length) {
-            return (_m = (_l = rec === null || rec === void 0 ? void 0 : rec.product) === null || _l === void 0 ? void 0 : _l.homePage) === null || _m === void 0 ? void 0 : _m[0];
-        }
-        else {
-            return (sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image) || '';
-        }
-    }, [rec, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.bottom_image]);
-    const title = (0, react_1.useMemo)(() => {
-        var _a, _b;
-        return ((_a = rec === null || rec === void 0 ? void 0 : rec.product) === null || _a === void 0 ? void 0 : _a.title) || ((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.title) || null;
-    }, [rec]);
-    const priceText = (0, react_1.useMemo)(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        if (((_a = rec === null || rec === void 0 ? void 0 : rec.product) === null || _a === void 0 ? void 0 : _a.currency) && ((_b = rec === null || rec === void 0 ? void 0 : rec.product) === null || _b === void 0 ? void 0 : _b.price)) {
-            return `${(_f = (_e = (_d = (_c = rec === null || rec === void 0 ? void 0 : rec.product) === null || _c === void 0 ? void 0 : _c.currency) === null || _d === void 0 ? void 0 : _d.split('-')[1]) === null || _e === void 0 ? void 0 : _e.toUpperCase()) !== null && _f !== void 0 ? _f : ''}${(_j = (_h = (_g = rec === null || rec === void 0 ? void 0 : rec.product) === null || _g === void 0 ? void 0 : _g.price) === null || _h === void 0 ? void 0 : _h.toLocaleString('zh', {
-                minimumFractionDigits: 0
-            })) !== null && _j !== void 0 ? _j : ''}`;
-        }
-        else {
-            return null;
-        }
-    }, [rec]);
-    (0, react_1.useEffect)(() => {
-        const observer = new IntersectionObserver((entries) => {
-            entries.forEach((entry) => {
-                if (entry.isIntersecting) {
-                    if (imgDom.current === null || src === '') {
-                        return;
-                    }
-                    if (showVideo && firstFrameSrc) {
-                        imgDom.current.src = firstFrameSrc;
-                    }
-                    else {
-                        imgDom.current.src = src;
-                    }
-                    observer.unobserve(imgDom.current);
-                }
-            });
-        });
-        observer.observe(imgDom.current);
-        return () => {
-            observer.disconnect();
-        };
-    }, [src, showVideo, firstFrameSrc]);
-    const calculateHeightForWidth = (videoWidth, videoHeight, targetWidth) => {
-        const aspectRatio = videoWidth / videoHeight;
-        const targetHeight = targetWidth / aspectRatio;
-        return targetHeight;
-    };
-    (0, react_1.useEffect)(() => {
-        const video = videoDom === null || videoDom === void 0 ? void 0 : videoDom.current;
-        if (video === null || src === '' || !showVideo) {
-            return;
-        }
-        video.src = src;
-        video.currentTime = 1;
-        video.crossOrigin = 'anonymous';
-        video.onloadeddata = () => {
-            const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
-            if (!canvas)
-                return;
-            const ctx = canvas.getContext('2d');
-            const targetWidth = (window === null || window === void 0 ? void 0 : window.innerWidth) / 2;
-            const targetHeight = calculateHeightForWidth(video.videoWidth, video.videoHeight, targetWidth);
-            canvas.height = targetHeight;
-            canvas.width = targetWidth;
-            ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-            setFirstFrameSrc(canvas.toDataURL());
-            video.remove();
-            canvas.remove();
-        };
-    }, [src, showVideo]);
-    const handleClickToDetail = () => {
-        reportTagsView();
-        setRtcList === null || setRtcList === void 0 ? void 0 : setRtcList(list);
-        setTimeout(() => {
-            var _a;
-            (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(index, 0, false);
-            setOpenHashtag === null || setOpenHashtag === void 0 ? void 0 : setOpenHashtag(false);
-        }, 0);
-    };
-    return (react_1.default.createElement("div", { className: 'list-content-listItem', key: index, onClick: handleClickToDetail, style: { marginBottom: space } },
-        react_1.default.createElement("div", { className: 'list-content-listItem-picture' },
-            showVideo && (react_1.default.createElement("div", { style: { display: 'none' } },
-                react_1.default.createElement("video", { ref: videoDom, crossOrigin: 'anonymous', className: 'list-content-listItem-picture-img' }),
-                react_1.default.createElement("canvas", { ref: canvasRef }))),
-            react_1.default.createElement("img", { className: 'list-content-listItem-picture-img', loading: 'lazy', ref: imgDom })),
-        react_1.default.createElement("div", { className: 'list-content-listItem-info' },
-            react_1.default.createElement("div", { className: `${'list-content-listItem-info-title'} ${priceText ? 'list-content-listItem-info-nowrap' : ''}`, style: textStyles === null || textStyles === void 0 ? void 0 : textStyles.title }, title && title),
-            react_1.default.createElement("div", { className: 'list-content-listItem-info-price', style: textStyles === null || textStyles === void 0 ? void 0 : textStyles.price, hidden: !priceText }, priceText))));
-};
-function WaterfallList(_a) {
-    var _b, _c, _d, _e, _f, _g, _h;
-    var { reportTagsView } = _a, props = tslib_1.__rest(_a, ["reportTagsView"]);
-    const { waterFallData, getRecommendVideos, hashTagSize, loadingImage, isOpenHashTag } = (0, hooks_1.useSxpDataSource)();
-    const [list, setList] = (0, react_1.useState)();
-    const [data, setData] = (0, react_1.useState)();
-    const [isLoadingData, setIsLoadingData] = (0, react_1.useState)(false);
-    const containerRef = (0, react_1.useRef)(null);
-    const [isLoadMore, setIsLoadMore] = (0, react_1.useState)(false);
-    const loadMoreData = (0, react_1.useCallback)(() => {
-        if (isLoadMore)
-            return;
-        setIsLoadMore(true);
-        waterFallData &&
-            (getRecommendVideos === null || getRecommendVideos === void 0 ? void 0 : getRecommendVideos({
-                hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag,
-                'itemFilter.itemId': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemId,
-                'itemFilter.itemType': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemType
-            }).then((res) => {
-                var _a;
-                setList(list === null || list === void 0 ? void 0 : list.concat((_a = res === null || res === void 0 ? void 0 : res.recList) !== null && _a !== void 0 ? _a : []));
-                setIsLoadMore(false);
-            }));
-    }, [waterFallData, getRecommendVideos, list, isLoadMore]);
-    (0, react_1.useEffect)(() => {
-        var _a, _b;
-        setIsLoadingData(true);
-        waterFallData &&
-            (getRecommendVideos === null || getRecommendVideos === void 0 ? void 0 : getRecommendVideos({
-                hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag,
-                'itemFilter.itemId': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemId,
-                'itemFilter.itemType': waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.itemType,
-                defaultSize: hashTagSize
-            }).then((res) => {
-                var _a, _b;
-                setData(res);
-                setList((_b = (_a = res === null || res === void 0 ? void 0 : res.recList) === null || _a === void 0 ? void 0 : _a.filter((item) => (item === null || item === void 0 ? void 0 : item.video) !== null || (item === null || item === void 0 ? void 0 : item.product) !== null)) !== null && _b !== void 0 ? _b : []);
-                setIsLoadingData(false);
-            }));
-        if (isOpenHashTag) {
-            const res = preview_json_1.default;
-            setData(res);
-            setList((_b = (_a = res === null || res === void 0 ? void 0 : res.recList) === null || _a === void 0 ? void 0 : _a.filter((item) => (item === null || item === void 0 ? void 0 : item.video) !== null || (item === null || item === void 0 ? void 0 : item.product) !== null)) !== null && _b !== void 0 ? _b : []);
-            setIsLoadingData(false);
-        }
-    }, [waterFallData, getRecommendVideos, hashTagSize, isOpenHashTag]);
-    const handleClickLink = () => {
-        var _a, _b;
-        if ((_a = data === null || data === void 0 ? void 0 : data.tag) === null || _a === void 0 ? void 0 : _a.link) {
-            reportTagsView();
-            window.location.href = (_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.link;
-        }
-    };
-    return (react_1.default.createElement(react_1.default.Fragment, null, isLoadingData ? (react_1.default.createElement("div", { style: { height: '100%', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' } },
-        react_1.default.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } }))) : (react_1.default.createElement("div", { className: 'list' },
-        react_1.default.createElement("div", { className: 'list-scroll', ref: containerRef, style: {
-                bottom: ((_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.link) ? '100px' : 0
-            } },
-            react_1.default.createElement("div", { className: 'list-info', style: (_c = props === null || props === void 0 ? void 0 : props.textStyles) === null || _c === void 0 ? void 0 : _c.hashTagDesc }, (_d = data === null || data === void 0 ? void 0 : data.tag) === null || _d === void 0 ? void 0 : _d.info),
-            react_1.default.createElement("div", { hidden: !((_e = data === null || data === void 0 ? void 0 : data.tag) === null || _e === void 0 ? void 0 : _e.link), className: 'list-collection', onClick: handleClickLink, style: { marginBottom: props === null || props === void 0 ? void 0 : props.space } }, ((_f = data === null || data === void 0 ? void 0 : data.tag) === null || _f === void 0 ? void 0 : _f.linkTitle) || 'Shop the collection'),
-            react_1.default.createElement("div", { className: 'list-content' }, list === null || list === void 0 ? void 0 : list.map((item, ind) => {
-                return (react_1.default.createElement(WaterfallFlowItem, Object.assign({ key: ind, index: ind, rec: item, list: list, reportTagsView: reportTagsView }, props)));
-            })),
-            react_1.default.createElement("div", { hidden: !isLoadMore, style: { textAlign: 'center' } }, "loading...")),
-        react_1.default.createElement("div", { className: 'list-bottom', hidden: !((_g = data === null || data === void 0 ? void 0 : data.tag) === null || _g === void 0 ? void 0 : _g.link) },
-            react_1.default.createElement("button", { className: 'list-bottom-btn', style: props === null || props === void 0 ? void 0 : props.buttonStyle, onClick: handleClickLink }, ((_h = data === null || data === void 0 ? void 0 : data.tag) === null || _h === void 0 ? void 0 : _h.linkTitle) || 'Shop the collection'))))));
-}
-exports.default = WaterfallList;

package/lib/core/components/SxpPageRender/WaterFall/WaterfallList.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import './WaterfallList.less';
-import { IHashTagProps } from '../../../../materials/sxp/HashTag';
-export default function WaterfallList({ reportTagsView, ...props }: any & IHashTagProps): React.JSX.Element;