pb-sxp-ui 1.0.0

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

@@ -0,0 +1,60 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import Modal from '../Modal';
+import { useEditor, useSxpDataSource } from '../../../../core/hooks';
+import withBindDataSource from '../../../../core/hoc/withBindDataSource';
+import { useEventReport } from '../../../../core/hooks/useEventReport';
+const Popup = () => {
+    const { schema, resolver, popup } = useEditor();
+    const { setPopupDetailData, popupDetailData, bffEventReport } = useSxpDataSource();
+    const { productView } = useEventReport();
+    const [visible, setVisible] = useState(false);
+    const curTimeRef = useRef(null);
+    useEffect(() => {
+        const initTime = () => {
+            curTimeRef.current = new Date();
+        };
+        initTime();
+        window.addEventListener('pageshow', initTime);
+        return () => {
+            window.removeEventListener('pageshow', initTime);
+        };
+    }, []);
+    useEffect(() => {
+        if (popup && popup !== '') {
+            curTimeRef.current = new Date();
+            setVisible(true);
+        }
+    }, [popup]);
+    const handleClose = () => {
+        var _a, _b, _c;
+        if (!popup || popup === '' || !visible || new Date() - curTimeRef.current < 1200) {
+            return;
+        }
+        setVisible(false);
+        const data = popupDetailData;
+        const product = (_a = data === null || data === void 0 ? void 0 : data.video) === null || _a === void 0 ? void 0 : _a.bindProduct;
+        const cta = (_c = (_b = data === null || data === void 0 ? void 0 : data.video) === null || _b === void 0 ? void 0 : _b.bindProduct) === null || _c === void 0 ? void 0 : _c.bindCta;
+        if (product && cta) {
+            productView(data, product, cta, curTimeRef.current);
+        }
+        setTimeout(() => {
+            window === null || window === void 0 ? void 0 : window.sxpPopup('');
+            setPopupDetailData === null || setPopupDetailData === void 0 ? void 0 : setPopupDetailData(null);
+        }, 1200);
+    };
+    const renderPopupDetail = 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;
+            if ((value === null || value === void 0 ? void 0 : value.id) === popup) {
+                const Component = withBindDataSource(resolver[(_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type]);
+                return (React.createElement(Component, Object.assign({ key: index, style: Object.assign(Object.assign({}, (_b = value === null || value === void 0 ? void 0 : value.item) === null || _b === void 0 ? void 0 : _b.style), { width: '100%', height: '80vh', overflow: 'auto' }), textStyle: (_c = value === null || value === void 0 ? void 0 : value.item) === null || _c === void 0 ? void 0 : _c.textStyle, bindDatas: (_e = (_d = value === null || value === void 0 ? void 0 : value.item) === null || _d === void 0 ? void 0 : _d.bindDatas) !== null && _e !== void 0 ? _e : [] }, (_f = value === null || value === void 0 ? void 0 : value.item) === null || _f === void 0 ? void 0 : _f.props, { event: ((_g = value === null || value === void 0 ? void 0 : value.item) === null || _g === void 0 ? void 0 : _g.event) || {}, schema: schema, id: value === null || value === void 0 ? void 0 : value.id })));
+            }
+            else {
+                return React.createElement(React.Fragment, null);
+            }
+        });
+    }, [schema, popup, resolver]);
+    return (React.createElement(Modal, { visible: !!visible, onClose: handleClose, padding: 0, modalStyle: { position: 'fixed' } }, renderPopupDetail));
+};
+export default Popup;

package/es/core/components/SxpPageRender/ProductInfo/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { RecItemType } from '../typing';
+interface IProductInfoProps {
+    data: RecItemType;
+    height: number;
+    width: number;
+    viewTime: any;
+    tipText?: {
+        foldText?: string;
+        unfoldText?: string;
+    };
+}
+declare const _default: React.NamedExoticComponent<IProductInfoProps>;
+export default _default;

package/es/core/components/SxpPageRender/ProductInfo/index.js

@@ -0,0 +1,55 @@
+import React, { useMemo, useState } from 'react';
+import { Pagination, Autoplay } from 'swiper/modules';
+import { SwiperSlide, Swiper } from 'swiper/react';
+import ExpandableText from '../ExpandableText';
+import Modal from '../Modal';
+import { useEventReport } from '../../../../core/hooks/useEventReport';
+const ProductInfo = ({ data, height, width, viewTime, tipText }) => {
+    var _a, _b;
+    const product = data === null || data === void 0 ? void 0 : data.product;
+    const cta = (_a = data === null || data === void 0 ? void 0 : data.product) === null || _a === void 0 ? void 0 : _a.bindCta;
+    const [showModal, setShowModal] = useState(false);
+    const { jumpToWeb } = useEventReport();
+    const priceText = useMemo(() => {
+        var _a, _b, _c, _d, _e;
+        if ((product === null || product === void 0 ? void 0 : product.currency) && (product === null || product === void 0 ? void 0 : product.price)) {
+            return `${(_c = (_b = (_a = product === null || product === void 0 ? void 0 : product.currency) === null || _a === void 0 ? void 0 : _a.split('-')[1]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== null && _c !== void 0 ? _c : ''}${(_e = (_d = product === null || product === void 0 ? void 0 : product.price) === null || _d === void 0 ? void 0 : _d.toLocaleString('zh', {
+                minimumFractionDigits: 0
+            })) !== null && _e !== void 0 ? _e : ''}`;
+        }
+        else {
+            return '$7,000';
+        }
+    }, [product === null || product === void 0 ? void 0 : product.price, product === null || product === void 0 ? void 0 : product.currency]);
+    const handleLInk = (link) => {
+        if (link) {
+            jumpToWeb(data, product, cta);
+            window.location.href = window.getJointUtmLink(link);
+        }
+    };
+    return (React.createElement("div", { style: { height, width: '100%' } },
+        React.createElement(Swiper, { height: height * 0.5, modules: [Pagination, Autoplay], pagination: { clickable: true, bulletActiveClass: 'swipe-item-active-bullet' }, loop: true, autoplay: {
+                delay: 3000
+            } }, (_b = product === null || product === void 0 ? void 0 : product.homePage) === null || _b === void 0 ? void 0 : _b.map((src) => {
+            return (React.createElement(SwiperSlide, { key: src },
+                React.createElement("div", { style: {
+                        overflow: 'hidden',
+                        width,
+                        height: height * 0.5
+                    } },
+                    React.createElement("img", { src: src, style: { height: '100%', width: '100%', objectFit: 'cover' } }))));
+        })),
+        React.createElement("div", { className: 'product-info' },
+            React.createElement("div", { className: 'collection' }, product === null || product === void 0 ? void 0 : product.collection),
+            React.createElement("div", { className: 'title' }, product === null || product === void 0 ? void 0 : product.title),
+            React.createElement("div", { className: 'price' }, priceText),
+            React.createElement(ExpandableText, { foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, onClick: () => setShowModal(true), className: 'info', text: (product === null || product === void 0 ? void 0 : product.info) || '', maxStr: 79 }),
+            React.createElement("a", { target: '_blank', className: 'pb-modal-btn', onClick: () => handleLInk(product === null || product === void 0 ? void 0 : product.link) }, cta === null || cta === void 0 ? void 0 : cta.enTitle)),
+        React.createElement(Modal, { visible: showModal, onClose: () => setShowModal(false) },
+            React.createElement("div", { className: 'modal-collection' }, product === null || product === void 0 ? void 0 : product.collection),
+            React.createElement("div", { className: 'modal-title' }, product === null || product === void 0 ? void 0 : product.title),
+            React.createElement("div", { className: 'modal-price' }, priceText),
+            React.createElement("div", { className: 'modal-info' }, product === null || product === void 0 ? void 0 : product.info),
+            (product === null || product === void 0 ? void 0 : product.link) && (React.createElement("a", { target: '_blank', className: 'pb-modal-btn', onClick: () => handleLInk(product === null || product === void 0 ? void 0 : product.link) }, cta === null || cta === void 0 ? void 0 : cta.enTitle)))));
+};
+export default React.memo(ProductInfo);

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

@@ -0,0 +1,11 @@
+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/es/core/components/SxpPageRender/RenderCard.js

@@ -0,0 +1,40 @@
+import React, { memo, useMemo } from 'react';
+import './index.less';
+import withBindDataSource from '../../../core/hoc/withBindDataSource';
+import { useEditor } from '../../../core/hooks';
+const RenderCard = ({ rec, index, tempMap, resolver }) => {
+    const { schema } = useEditor();
+    const renderComp = 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;
+        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 Component = withBindDataSource(resolver[(_w = value === null || value === void 0 ? void 0 : value.item) === null || _w === void 0 ? void 0 : _w.type]);
+            return (React.createElement(Component, Object.assign({ style: Object.assign(Object.assign({}, (_x = value === null || value === void 0 ? void 0 : value.item) === null || _x === void 0 ? void 0 : _x.style), { zIndex: 50, marginLeft: '20px' }), textStyle: (_y = value === null || value === void 0 ? void 0 : value.item) === null || _y === void 0 ? void 0 : _y.textStyle, bindDatas: (_0 = (_z = value === null || value === void 0 ? void 0 : value.item) === null || _z === void 0 ? void 0 : _z.bindDatas) !== null && _0 !== void 0 ? _0 : [] }, (_1 = value === null || value === void 0 ? void 0 : value.item) === null || _1 === void 0 ? void 0 : _1.props, { event: ((_2 = value === null || value === void 0 ? void 0 : value.item) === null || _2 === void 0 ? void 0 : _2.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 })));
+        }
+        else {
+            return null;
+        }
+    }, [rec, resolver, tempMap, schema]);
+    return React.createElement(React.Fragment, null, renderComp);
+};
+export default memo(RenderCard);

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

@@ -0,0 +1,10 @@
+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/es/core/components/SxpPageRender/ToggleButton/index.js

@@ -0,0 +1,13 @@
+import React, { memo, useState } from 'react';
+const ToggleButton = ({ defaultValue, activeIcon, unactiveIcon, onChange, style }) => {
+    const [isTrue, setIsTure] = useState(defaultValue);
+    const handleClick = (e) => {
+        e.stopPropagation();
+        const result = !isTrue;
+        setIsTure(result);
+        onChange === null || onChange === void 0 ? void 0 : onChange(result);
+    };
+    return (React.createElement("button", { style: style, className: 'pb-toggle-button', onClick: handleClick },
+        React.createElement("img", { className: 'pb-toggle-button-icon', src: isTrue ? activeIcon : unactiveIcon })));
+};
+export default memo(ToggleButton);

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

@@ -0,0 +1,12 @@
+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/es/core/components/SxpPageRender/VideoWidget/index.js

@@ -0,0 +1,219 @@
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useSwiperSlide } from 'swiper/react';
+import { useIconLink } from '../useIconLink';
+import { useSxpDataSource } from '../../../../core/hooks';
+import SXP_EVENT_BUS, { SXP_EVENT_TYPE } from '../../../../core/utils/event';
+const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
+    const [isPauseVideo, setIsPauseVideo] = useState(false);
+    const videoRef = useRef(null);
+    const { bffEventReport, sxpParameter, waterFallData, openHashtag } = useSxpDataSource();
+    const videoStartTime = useRef(0);
+    const [isLoad, setIsLoad] = useState(false);
+    const { isActive } = useSwiperSlide();
+    useEffect(() => {
+        if (!videoRef.current)
+            return;
+        videoRef.current.muted = muted;
+    }, [muted]);
+    const handleVideoStart = useCallback(() => {
+        var _a;
+        (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
+    }, []);
+    const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
+    const handlePlaying = 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: item.position,
+                    contentFormat: 'video',
+                    traceInfo: (_o = item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
+                }
+            });
+        }
+        if (!isLoad) {
+            setIsLoad(true);
+        }
+    }, [bffEventReport, data, index, isLoad]);
+    const handleLoadedMetadata = 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: item.position,
+                    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 = 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 = 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: item.position,
+                    contentFormat: 'video',
+                    traceInfo: (_o = item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
+                }
+            });
+        }
+    }, [data, index, bffEventReport]);
+    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]);
+    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]);
+    useEffect(() => {
+        if (!isActive)
+            return;
+        const onShow = handleClickVideo('start');
+        const onHide = handleClickVideo('pause');
+        SXP_EVENT_BUS.on(SXP_EVENT_TYPE.PAGE_DID_SHOW, onShow);
+        SXP_EVENT_BUS.on(SXP_EVENT_TYPE.PAGE_DID_HIDE, onHide);
+        return () => {
+            SXP_EVENT_BUS.off(SXP_EVENT_TYPE.PAGE_DID_SHOW, onShow);
+            SXP_EVENT_BUS.off(SXP_EVENT_TYPE.PAGE_DID_HIDE, onHide);
+        };
+    }, [handleClickVideo, isActive]);
+    const renderPoster = useMemo(() => {
+        if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image)) {
+            return null;
+        }
+        return (React.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]);
+    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.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
+            position: 'relative',
+            width: '100%',
+            height
+        } },
+        React.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.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })));
+};
+export default memo(VideoWidget);

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import './List.less';
+export default function WaterfallList({ reportTagsView }: any): React.JSX.Element;

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

@@ -0,0 +1,173 @@
+import React, { useState, useEffect, useMemo, useRef, useCallback } from 'react';
+import './List.less';
+import { useSxpDataSource } from '../../../../core/hooks';
+const WaterfallFlowItem = (props) => {
+    const { rec, index, list, reportTagsView } = props;
+    const { swiperRef, setRtcList, setOpenHashtag, bffEventReport, sxpParameter } = useSxpDataSource();
+    const [showVideo, setShowVideo] = useState(false);
+    const imgDom = useRef(null);
+    const videoDom = useRef(null);
+    const canvasRef = useRef(null);
+    const [firstFrameSrc, setFirstFrameSrc] = useState('');
+    const src = 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 = 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 = 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]);
+    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;
+    };
+    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.createElement("div", { className: 'list-content-listItem', key: index, onClick: handleClickToDetail },
+        React.createElement("div", { className: 'list-content-listItem-picture' },
+            showVideo && (React.createElement("div", { style: { display: 'none' } },
+                React.createElement("video", { ref: videoDom, crossOrigin: 'anonymous', className: 'list-content-listItem-picture-img' }),
+                React.createElement("canvas", { ref: canvasRef }))),
+            React.createElement("img", { className: 'list-content-listItem-picture-img', loading: 'lazy', ref: imgDom })),
+        React.createElement("div", { className: 'list-content-listItem-info' },
+            React.createElement("div", { className: `${'list-content-listItem-info-title'} ${priceText ? 'list-content-listItem-info-nowrap' : ''}` }, title && title),
+            React.createElement("div", { className: 'list-content-listItem-info-price', hidden: !priceText }, priceText))));
+};
+export default function WaterfallList({ reportTagsView }) {
+    var _a, _b, _c, _d, _e, _f;
+    const { waterFallData, getRecommendVideos, hashTagSize, loadingImage } = useSxpDataSource();
+    const [list, setList] = useState();
+    const [data, setData] = useState();
+    const [isLoadingData, setIsLoadingData] = useState(false);
+    const containerRef = useRef(null);
+    const [isLoadMore, setIsLoadMore] = useState(false);
+    const loadMoreData = 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]);
+    useEffect(() => {
+        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);
+            }));
+    }, [waterFallData, getRecommendVideos, hashTagSize]);
+    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.createElement(React.Fragment, null, isLoadingData ? (React.createElement("div", { style: { height: '100%', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' } },
+        React.createElement("img", { width: 64, height: 64, src: loadingImage, alt: 'loading...', style: { objectFit: 'contain' } }))) : (React.createElement("div", { className: 'list' },
+        React.createElement("div", { className: 'list-scroll', ref: containerRef, style: {
+                bottom: ((_a = data === null || data === void 0 ? void 0 : data.tag) === null || _a === void 0 ? void 0 : _a.link) ? '100px' : 0
+            } },
+            React.createElement("div", { className: 'list-info' }, (_b = data === null || data === void 0 ? void 0 : data.tag) === null || _b === void 0 ? void 0 : _b.info),
+            React.createElement("div", { hidden: !((_c = data === null || data === void 0 ? void 0 : data.tag) === null || _c === void 0 ? void 0 : _c.link), className: 'list-collection', onClick: handleClickLink }, ((_d = data === null || data === void 0 ? void 0 : data.tag) === null || _d === void 0 ? void 0 : _d.linkTitle) || 'Shop the collection'),
+            React.createElement("div", { className: 'list-content' }, list === null || list === void 0 ? void 0 : list.map((item, ind) => {
+                return (React.createElement(WaterfallFlowItem, { key: ind, index: ind, rec: item, list: list, reportTagsView: reportTagsView }));
+            })),
+            React.createElement("div", { hidden: !isLoadMore, style: { textAlign: 'center' } }, "loading...")),
+        React.createElement("div", { className: 'list-bottom', hidden: !((_e = data === null || data === void 0 ? void 0 : data.tag) === null || _e === void 0 ? void 0 : _e.link) },
+            React.createElement("button", { className: 'list-bottom-btn', onClick: handleClickLink }, ((_f = data === null || data === void 0 ? void 0 : data.tag) === null || _f === void 0 ? void 0 : _f.linkTitle) || 'Shop the collection'))))));
+}

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import './WaterfallList.less';
+export default function WaterfallList({ reportTagsView }: any): React.JSX.Element;