pb-sxp-ui 1.0.40 → 1.0.41

package/es/core/components/DiyPortalPreview/PictureGroup.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { RecItemType } from '../SxpPageRender/typing';
+import { postConfigType } from '../SxpPageRender';
+interface IPictureGroupProps {
+    imgUrls?: string[];
+    width: number;
+    height: number;
+    rec: RecItemType;
+    index: number;
+    imgUrlsPostConfig?: postConfigType;
+}
+declare const _default: React.NamedExoticComponent<IPictureGroupProps>;
+export default _default;

package/es/core/components/DiyPortalPreview/PictureGroup.js

@@ -0,0 +1,11 @@
+import React, { memo } from 'react';
+import { Autoplay, Pagination } from 'swiper/modules';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import Picture from '../SxpPageRender/PictureGroup/Picture';
+const PictureGroup = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index }) => {
+    return (React.createElement(Swiper, { defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: { clickable: true, bulletActiveClass: 'swipe-item-active-bullet' }, height: height, style: { width }, loop: true, autoplay: false }, imgUrls === null || imgUrls === void 0 ? void 0 : imgUrls.map((url) => {
+        return (React.createElement(SwiperSlide, { key: url },
+            React.createElement(Picture, { src: url, height: height, imgUrlsPostConfig: imgUrlsPostConfig })));
+    })));
+};
+export default memo(PictureGroup);

package/es/core/components/DiyPortalPreview/VideoWidget.d.ts

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

package/es/core/components/DiyPortalPreview/VideoWidget.js

@@ -0,0 +1,236 @@
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import Hls from 'hls.js';
+import { useIconLink } from '../SxpPageRender/useIconLink';
+import FormatImage from '../SxpPageRender/FormatImage';
+import { useSxpDataSource } from '../../../core/hooks';
+const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, width }) => {
+    const [isPauseVideo, setIsPauseVideo] = useState(false);
+    const videoRef = useRef(null);
+    const { bffEventReport, sxpParameter, waterFallData, openHashtag } = useSxpDataSource();
+    const videoStartTime = useRef(0);
+    const [isLoadFinish, setIsLoadFinish] = useState(false);
+    const [isFirstPlay, setIsFirstPlay] = useState(true);
+    const canvasRef = useRef(null);
+    const [firstFrameSrc, setFirstFrameSrc] = useState('');
+    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 && ((_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 = isFirstPlay ? '0' : '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
+                }
+            });
+            setIsFirstPlay(false);
+        }
+    }, [bffEventReport, data, index, isFirstPlay]);
+    const handleLoadedMetadata = useCallback(() => {
+        setIsLoadFinish(true);
+    }, []);
+    const handleClickVideo = useCallback((type) => () => {
+        var _a, _b, _c, _d, _e;
+        if (!isLoadFinish)
+            return;
+        const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
+        switch (type) {
+            case 'start':
+                if (!isPause)
+                    return;
+                (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.play();
+                setIsPauseVideo(false);
+                break;
+            case 'pause':
+                if (isPause)
+                    return;
+                (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
+                setIsPauseVideo(true);
+                break;
+            default:
+                if (isPause) {
+                    (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
+                }
+                else {
+                    (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
+                }
+                setIsPauseVideo(!isPause);
+                break;
+        }
+    }, [isLoadFinish]);
+    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: index + '',
+                    contentFormat: 'video',
+                    traceInfo: (_o = item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
+                }
+            });
+        }
+    }, [data, index, bffEventReport]);
+    const blur = useMemo(() => {
+        return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
+    }, [videoPostConfig]);
+    const translateY = useMemo(() => {
+        var _a;
+        return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2'
+            ? `translateY(-${50 + ((_a = videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.offsetTop) !== null && _a !== void 0 ? _a : 0)}%) translate3d(0px, 0px, 0px)`
+            : 'translateY(-50%)';
+    }, [videoPostConfig]);
+    const blurBgSrc = useMemo(() => {
+        var _a;
+        return ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || firstFrameSrc;
+    }, [firstFrameSrc, rec]);
+    const handLoadeddata = useCallback(() => {
+        if (!canvasRef || !videoRef || !videoRef.current || !canvasRef.current)
+            return;
+        const video = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current;
+        const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
+        const ctx = canvas.getContext('2d');
+        const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
+        const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
+        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());
+    }, []);
+    useEffect(() => {
+        var _a, _b, _c, _d;
+        if (!videoRef.current)
+            return;
+        setIsPauseVideo(false);
+        if (!videoRef.current.src) {
+            const videoSrc = rec.video.url;
+            if (videoSrc.includes('.m3u8')) {
+                if (Hls.isSupported()) {
+                    const hls = new Hls();
+                    hls.loadSource(videoSrc);
+                    hls.attachMedia(videoRef.current);
+                }
+                else if (videoRef.current.canPlayType('application/vnd.apple.mpegurl')) {
+                    videoRef.current.src = videoSrc;
+                }
+                else {
+                    videoRef.current.src = videoSrc;
+                }
+            }
+            else {
+                videoRef.current.src = videoSrc;
+            }
+            videoRef.current.setAttribute('x5-playsinline', 'true');
+            videoRef.current.setAttribute('webkit-playsinline', 'true');
+        }
+        (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('loadedmetadata', handleLoadedMetadata);
+        (_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);
+        (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.addEventListener('loadeddata', handLoadeddata);
+        return () => {
+            var _a, _b, _c, _d;
+            (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('loadedmetadata', handleLoadedMetadata);
+            (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('canplay', handleLoadedMetadata);
+            (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('playing', handlePlaying);
+            (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('loadeddata', handLoadeddata);
+        };
+    }, [handleLoadedMetadata, handlePlaying, rec.video, handLoadeddata]);
+    const renderPoster = useMemo(() => {
+        if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
+            return null;
+        }
+        return (React.createElement("img", { style: { position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', objectFit: 'cover' }, src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image }));
+    }, [isLoadFinish, 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]);
+    const blurStyle = useMemo(() => {
+        return blur
+            ? {
+                filter: 'blur(10px)',
+                transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
+            }
+            : {};
+    }, [blur]);
+    if (!rec.video) {
+        return null;
+    }
+    return (React.createElement(React.Fragment, null, blur ? (React.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
+            position: 'relative',
+            width,
+            height,
+            overflow: 'hidden'
+        } },
+        React.createElement(FormatImage, { src: blurBgSrc, style: Object.assign({ height,
+                width, objectFit: 'cover' }, blurStyle) }),
+        React.createElement("canvas", { ref: canvasRef, style: { display: 'none' } }),
+        React.createElement("div", { style: {
+                position: 'absolute',
+                width,
+                height,
+                top: '50%',
+                transform: translateY,
+                left: 0,
+                right: 0
+            } },
+            React.createElement("div", { style: { position: 'relative', width, height: '100%' } },
+                React.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', ref: videoRef, crossOrigin: 'anonymous', muted: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart, style: {
+                        width: '100%',
+                        height,
+                        objectFit: 'contain'
+                    } }),
+                React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON }))),
+        renderPoster)) : (React.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
+            position: 'relative',
+            width,
+            height,
+            overflow: 'hidden'
+        } },
+        React.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', ref: videoRef, crossOrigin: 'anonymous', 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/DiyPortalPreview/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ISxpPageRenderProps } from '../SxpPageRender';
+declare const _default: React.NamedExoticComponent<ISxpPageRenderProps & {
+    appDomain?: string | undefined;
+}>;
+export default _default;

package/es/core/components/DiyPortalPreview/index.js

@@ -0,0 +1,112 @@
+import React, { memo, useMemo } from 'react';
+import Nudge from '../SxpPageRender/Nudge';
+import RenderCard from '../SxpPageRender/RenderCard';
+import ExpandableText from '../SxpPageRender/ExpandableText';
+import Hashtag from '../SxpPageRender/Hashtag';
+import LikeButton from '../SxpPageRender/LikeButton';
+import ToggleButton from '../SxpPageRender/ToggleButton';
+import { useIconLink } from '../SxpPageRender/useIconLink';
+import PictureGroup from './PictureGroup';
+import VideoWidget from './VideoWidget';
+import * as _materials_ from '../../../materials';
+import withBindDataSource from '../../../core/hoc/withBindDataSource';
+const RESOLVER = {};
+Object.values(_materials_).forEach((v) => {
+    RESOLVER[v.extend.type] = v;
+});
+const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
+const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
+const DiyPortalPreview = ({ data, globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain }) => {
+    const height = useMemo(() => {
+        return (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo) ? containerHeight - 45 : containerHeight;
+    }, [globalConfig, containerHeight]);
+    const renderContent = (rec, index) => {
+        var _a, _b, _c, _d;
+        if ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.url) {
+            return (React.createElement(VideoWidget, { rec: rec, index: index, muted: true, width: containerWidth, data: data !== null && data !== void 0 ? data : [], height: height, activeIndex: index, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost }));
+        }
+        if ((_b = rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
+            return (React.createElement(PictureGroup, { key: rec.video.itemId, imgUrls: rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
+        }
+        if (rec.product) {
+            if (rec.product && Array.isArray(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) && ((_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _c === void 0 ? void 0 : _c.length) > 0) {
+                return (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.productPost) === null || _d === void 0 ? void 0 : _d.map((value, idx) => {
+                    var _a, _b, _c, _d, _e, _f, _g, _h;
+                    const t = RESOLVER[(_a = value === null || value === void 0 ? void 0 : value.item) === null || _a === void 0 ? void 0 : _a.type];
+                    const Component = withBindDataSource(t);
+                    const defaulSetting = (_b = t === null || t === void 0 ? void 0 : t.extend) === null || _b === void 0 ? void 0 : _b.defaulSetting;
+                    return (React.createElement(Component, Object.assign({ key: `${index}${idx}`, textStyle: Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.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 : [] }, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.props, (_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) || {}, id: value === null || value === void 0 ? void 0 : value.id, rec: rec, isPost: true, tipText: tipText, style: Object.assign(Object.assign(Object.assign({}, defaulSetting === null || defaulSetting === void 0 ? void 0 : defaulSetting.style), (_h = value === null || value === void 0 ? void 0 : value.item) === null || _h === void 0 ? void 0 : _h.style), { width: containerWidth, height, overflow: 'auto' }), index: index })));
+                });
+            }
+        }
+    };
+    const renderLogo = useMemo(() => {
+        if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
+            return (React.createElement("div", { className: 'clc-sxp-logo-banner', style: { backgroundColor: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.color } },
+                React.createElement("img", { src: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl, alt: 'logo' })));
+        }
+        return null;
+    }, [globalConfig]);
+    const renderBottom = (rec, index) => {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (rec.video) {
+            return (React.createElement(React.Fragment, null,
+                ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.title) && React.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
+                React.createElement("div", { className: 'clc-sxp-bottom' },
+                    React.createElement(Nudge, { nudge: nudge }),
+                    React.createElement("div", { className: 'clc-sxp-bottom-card' },
+                        React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER })),
+                    React.createElement("div", null,
+                        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: (_c = (_b = rec.video) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : '', 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' }) })),
+                    React.createElement(Hashtag, { index: index, tags: (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.hashTags) !== null && _e !== void 0 ? _e : [], itemId: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.itemId, itemType: ((_g = rec.video) === null || _g === void 0 ? void 0 : _g.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle }))));
+        }
+        return null;
+    };
+    const likeIcon = useIconLink(defaultLikeIconPath, appDomain);
+    const unlikeIcon = useIconLink(defaultUnLikeIconPath, appDomain);
+    const renderLikeButton = (rec, index) => {
+        var _a, _b, _c, _d;
+        if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike))
+            return;
+        let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconY) !== null && _a !== void 0 ? _a : 400;
+        if (top < 40) {
+            top += 40;
+        }
+        if (rec.video) {
+            return (React.createElement(LikeButton, { key: rec.position, activeIcon: (_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIcon) !== null && _b !== void 0 ? _b : likeIcon, unActicveIcon: (_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unlikeIcon) !== null && _c !== void 0 ? _c : unlikeIcon, position: index, active: rec.isCollected, recData: rec, className: 'clc-sxp-like-button', style: {
+                    top,
+                    right: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconX) !== null && _d !== void 0 ? _d : 0
+                } }));
+        }
+        return null;
+    };
+    const mutedIcon = useIconLink('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png', appDomain);
+    const unmutedIcon = useIconLink('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png', appDomain);
+    const renderView = (rec, index) => {
+        var _a, _b, _c, _d;
+        return (React.createElement("div", { style: { position: 'relative' } },
+            renderLogo,
+            React.createElement(ToggleButton, { style: {
+                    position: 'absolute',
+                    right: (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _a !== void 0 ? _a : 0,
+                    visibility: ((_c = (_b = data === null || data === void 0 ? void 0 : data[index]) === null || _b === void 0 ? void 0 : _b.video) === null || _c === void 0 ? void 0 : _c.url) ? 'visible' : 'hidden',
+                    bottom: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _d !== void 0 ? _d : 23,
+                    zIndex: 999
+                }, defaultValue: true, activeIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.unMuteIcon : mutedIcon, unactiveIcon: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon) ? globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIcon : unmutedIcon }),
+            renderContent(rec, index),
+            renderBottom(rec, index),
+            renderLikeButton(rec, index)));
+    };
+    return (React.createElement("div", { style: {
+            width: '100%',
+            height: containerHeight,
+            display: 'flex',
+            boxSizing: 'border-box',
+            gap: 16,
+            pointerEvents: 'none',
+            userSelect: 'none'
+        } }, data === null || data === void 0 ? void 0 : data.map((rec, index) => {
+        return renderView(rec, index);
+    })));
+};
+export default memo(DiyPortalPreview);

package/es/core/components/SxpPageRender/PictureGroup/Picture.js

@@ -28,6 +28,7 @@ const Picture = (props) => {
         React.createElement(FormatImage, { src: src, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) }),
         blur && (React.createElement(FormatImage, { src: src, style: {
                 width: '100%',
+                height: '100%',
                 objectFit: 'contain',
                 position: 'absolute',
                 top: '50%',

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

@@ -14,13 +14,12 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
     const { isActive } = useSwiperSlide();
     const canvasRef = useRef(null);
     const [firstFrameSrc, setFirstFrameSrc] = useState('');
-    const videoId = `pb-video-${index}`;
     useEffect(() => {
         if (!videoRef.current)
             return;
-        videoRef.current.muted(muted);
+        videoRef.current.muted = muted;
     }, [muted]);
-    const handleEnded = useCallback(() => {
+    const handleVideoStart = useCallback(() => {
         var _a;
         (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
     }, []);
@@ -29,10 +28,10 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
         setIsPauseVideo(false);
         const item = data[index];
-        if (item && ((_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);
+        if (item && ((_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 = isFirstPlay ? '0' : '1';
             bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
                 eventInfo: {
@@ -52,15 +51,14 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
             setIsFirstPlay(false);
         }
     }, [bffEventReport, data, index, isFirstPlay]);
-    const handleCanplay = useCallback(() => {
-        handLoadeddata();
+    const handleLoadedMetadata = useCallback(() => {
         setIsLoadFinish(true);
     }, []);
     const handleClickVideo = useCallback((type) => () => {
         var _a, _b, _c, _d, _e;
         if (!isLoadFinish)
             return;
-        const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused();
+        const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
         switch (type) {
             case 'start':
                 if (!isPause)
@@ -85,13 +83,13 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
                 break;
         }
     }, [isLoadFinish]);
-    const handlePause = useCallback(() => {
+    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);
+        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',
@@ -123,64 +121,41 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
         return ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || firstFrameSrc;
     }, [firstFrameSrc, rec]);
     const handLoadeddata = useCallback(() => {
-        var _a;
-        const videoDomRef = document.getElementById(`${videoId}_html5_api`);
-        if (((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || !canvasRef || !videoDomRef || !canvasRef.current)
+        if (!canvasRef || !videoRef || !videoRef.current || !canvasRef.current)
             return;
-        const setFrameImg = () => {
-            const video = videoDomRef;
-            const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
-            const ctx = canvas.getContext('2d');
-            const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
-            const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
-            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());
-        };
-        setFrameImg();
-        setTimeout(() => {
-            setFrameImg();
-        }, 500);
+        const video = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current;
+        const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
+        const ctx = canvas.getContext('2d');
+        const targetWidth = window === null || window === void 0 ? void 0 : window.innerWidth;
+        const targetHeight = window === null || window === void 0 ? void 0 : window.innerHeight;
+        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());
     }, []);
     useEffect(() => {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d;
+        if (!videoRef.current)
+            return;
         setIsPauseVideo(false);
-        const videoSrc = rec.video.url;
-        if (videoSrc && typeof TCPlayer === 'function') {
-            videoRef.current = TCPlayer(videoId, {
-                sources: [
-                    {
-                        src: videoSrc
-                    }
-                ],
-                licenseUrl: 'https://license.vod2.myqcloud.com/license/v2/1325816236_1/v_cube.license',
-                controls: false,
-                autoplay: false,
-                loop: false,
-                muted: true,
-                preload: 'auto',
-                posterImage: false,
-                bigPlayButton: true
-            });
-            videoRef.current.play();
-            videoRef.current.pause();
+        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');
         }
-        (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.on('loadedmetadata', handleCanplay);
-        (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.on('canplay', handleCanplay);
-        (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.on('playing', handlePlaying);
-        (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.on('pause', handlePause);
-        (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.on('ended', handleEnded);
+        (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('loadedmetadata', handleLoadedMetadata);
+        (_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);
+        (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.addEventListener('loadeddata', handLoadeddata);
         return () => {
-            var _a, _b, _c, _d, _e;
-            (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.off('loadedmetadata', handleCanplay);
-            (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.off('canplay', handleCanplay);
-            (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.off('playing', handlePlaying);
-            (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.off('pause', handlePause);
-            (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.off('ended', handleEnded);
-            videoRef.current.dispose();
+            var _a, _b, _c, _d;
+            (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('loadedmetadata', handleLoadedMetadata);
+            (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('canplay', handleLoadedMetadata);
+            (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('playing', handlePlaying);
+            (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('loadeddata', handLoadeddata);
         };
-    }, []);
+    }, [handleLoadedMetadata, handlePlaying, rec.video, handLoadeddata]);
     useEffect(() => {
         var _a;
         if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
@@ -263,27 +238,19 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
                 right: 0
             } },
             React.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' } },
-                React.createElement("video", { id: `pb-video-${index}`, playsInline: true, crossOrigin: 'anonymous', style: {
+                React.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', ref: videoRef, crossOrigin: 'anonymous', muted: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart, style: {
                         width: '100%',
                         height: '100%',
-                        objectFit: 'contain',
-                        backgroundColor: 'transparent',
-                        pointerEvents: 'none'
+                        objectFit: 'contain'
                     } }),
                 React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON }))),
-        renderPoster)) : (React.createElement("div", { className: 'video-container', key: rec.video.itemId, style: {
+        renderPoster)) : (React.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
             position: 'relative',
             width: '100%',
             height,
             overflow: 'hidden'
-        }, onClick: handleClickVideo() },
-        React.createElement("video", { id: `pb-video-${index}`, playsInline: true, crossOrigin: 'anonymous', style: {
-                backgroundColor: 'transparent',
-                width: '100%',
-                height: '100%',
-                objectFit: 'cover',
-                pointerEvents: 'none'
-            } }),
+        } },
+        React.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', ref: videoRef, crossOrigin: 'anonymous', 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 })))));
 };

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

@@ -63,7 +63,7 @@ const WaterFall = (props) => {
         }
         bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
             eventInfo: {
-                relatedContentId: (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.itemId,
+                contentId: (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.itemId,
                 position: cacheActiveIndex + '',
                 contentTags: JSON.stringify((_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.tags),
                 traceInfo: (_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.traceInfo,