pb-sxp-ui 1.15.21 → 1.15.22-alpha.2

package/lib/core/components/DiyStoryPreview/VideoWidget.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { postConfigType } from '../SxpPageRender';
+import { RecItemType } from '../SxpPageRender/typing';
+interface IVideoWidgetProps {
+    rec: RecItemType;
+    index: number;
+    height: number;
+    width: number;
+    data: RecItemType[];
+    muted: boolean;
+    activeIndex?: number;
+    videoPostConfig?: postConfigType;
+    swiperRef?: any;
+    videoPlayIcon?: string;
+    onUpdateTimeLine?: (index: number, v: number) => void;
+    loopPlay: any;
+    onPlay?: (index: number, v: number) => void;
+    onPause?: () => void;
+}
+export interface IVideoWidgetRef {
+    play: () => void;
+    pause: () => void;
+    setLoopPlay: (v: boolean) => void;
+    isPlaying: () => boolean;
+}
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<IVideoWidgetProps & React.RefAttributes<IVideoWidgetRef>>>;
+export default _default;

package/lib/core/components/DiyStoryPreview/VideoWidget.js

@@ -0,0 +1,200 @@
+"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("../SxpPageRender/useIconLink");
+const VideoPlayer_1 = require("../SxpPageRender/VideoWidget/VideoPlayer");
+const FormatImage_1 = tslib_1.__importDefault(require("../SxpPageRender/FormatImage"));
+const hooks_1 = require("../../../core/hooks");
+const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted, activeIndex, videoPostConfig, width, swiperRef, videoPlayIcon, onUpdateTimeLine, loopPlay, onPlay, onPause }, ref) => {
+    const { isActive } = (0, react_2.useSwiperSlide)();
+    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 [isLoadFinish, setIsLoadFinish] = (0, react_1.useState)(false);
+    const [isFirstPlay, setIsFirstPlay] = (0, react_1.useState)(true);
+    const canvasRef = (0, react_1.useRef)(null);
+    const [firstFrameSrc, setFirstFrameSrc] = (0, react_1.useState)('');
+    const videoId = `pb-cache-video-${index}`;
+    const hlsRef = (0, react_1.useRef)(null);
+    const loopPlayRef = (0, react_1.useRef)(loopPlay);
+    const scene = rec.video.scene;
+    (0, react_1.useEffect)(() => {
+        loopPlayRef.current = loopPlay;
+    }, [loopPlay]);
+    (0, react_1.useImperativeHandle)(ref, () => {
+        return {
+            play() {
+                var _a;
+                if (!videoRef.current)
+                    return;
+                handleTimeUpload();
+                (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
+                setIsPauseVideo(false);
+            },
+            pause() {
+                var _a;
+                if (!videoRef.current)
+                    return;
+                (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
+                setIsPauseVideo(true);
+            },
+            setLoopPlay(v) {
+                loopPlayRef.current = v;
+            },
+            isPlaying() {
+                var _a;
+                return !((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused);
+            }
+        };
+    });
+    (0, react_1.useEffect)(() => {
+        if (!videoRef.current)
+            return;
+        videoRef.current.muted = muted;
+    }, [muted]);
+    const PAUSE_ICON = (0, useIconLink_1.useIconLink)('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
+    const handleLoadedMetadata = (0, react_1.useCallback)(() => {
+        var _a;
+        videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
+        (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
+        setIsLoadFinish(true);
+    }, []);
+    const handleClickVideo = (0, react_1.useCallback)((type) => () => {
+        var _a, _b, _c, _d, _e, _f;
+        if (!isActive || !(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !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) {
+                    if (((_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.currentTime) >= (scene === null || scene === void 0 ? void 0 : scene.endTime)) {
+                        videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
+                    }
+                    (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
+                }
+                else {
+                    (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.pause();
+                }
+                setIsPauseVideo(!isPause);
+                break;
+        }
+    }, [isLoadFinish]);
+    const blur = (0, react_1.useMemo)(() => {
+        return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
+    }, [videoPostConfig]);
+    const handleTimeUpload = () => {
+        if (!videoRef.current)
+            return;
+        setTimeout(() => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            if (((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) >= ((_b = scene === null || scene === void 0 ? void 0 : scene.endTime) !== null && _b !== void 0 ? _b : 0)) {
+                (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
+                if (!loopPlayRef.current)
+                    return;
+                if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
+                    (_e = (_d = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _d === void 0 ? void 0 : _d.swiper) === null || _e === void 0 ? void 0 : _e.slideTo(0);
+                }
+                else {
+                    const i = (_g = (_f = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _f === void 0 ? void 0 : _f.swiper) === null || _g === void 0 ? void 0 : _g.activeIndex;
+                    (_j = (_h = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _h === void 0 ? void 0 : _h.swiper) === null || _j === void 0 ? void 0 : _j.slideTo(i + 1);
+                }
+            }
+        });
+    };
+    const handlePause = () => {
+        setIsPauseVideo(true);
+        onPause === null || onPause === void 0 ? void 0 : onPause();
+    };
+    const handlePlay = () => {
+        var _a;
+        const localTime = ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) - (scene === null || scene === void 0 ? void 0 : scene.startTime);
+        onPlay === null || onPlay === void 0 ? void 0 : onPlay(index, localTime);
+    };
+    (0, react_1.useEffect)(() => {
+        var _a, _b, _c, _d;
+        if (!isActive)
+            return;
+        const videoSrc = scene === null || scene === void 0 ? void 0 : scene.mediaUrl;
+        if (!videoSrc)
+            return;
+        setIsPauseVideo(false);
+        const videoPlayerWrapperNode = document.querySelector(`#${videoId}`);
+        if (!videoPlayerWrapperNode)
+            return;
+        videoRef.current = VideoPlayer_1.mountVideoPlayerAtNode === null || VideoPlayer_1.mountVideoPlayerAtNode === void 0 ? void 0 : (0, VideoPlayer_1.mountVideoPlayerAtNode)(videoPlayerWrapperNode);
+        if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
+            return;
+        const Hls = window === null || window === void 0 ? void 0 : window.Hls;
+        let hls = hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current;
+        if (videoSrc.includes('.m3u8') && Hls && Hls.isSupported()) {
+            hls = new Hls();
+            hls === null || hls === void 0 ? void 0 : hls.loadSource(videoSrc);
+            hls === null || hls === void 0 ? void 0 : hls.attachMedia(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current);
+            hls === null || hls === void 0 ? void 0 : hls.on(Hls.Events.MANIFEST_PARSED, function () {
+                var _a;
+                videoRef.current.currentTime = scene === null || scene === void 0 ? void 0 : scene.startTime;
+                (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
+            });
+        }
+        else {
+            videoRef.current.src = videoSrc;
+        }
+        (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('loadedmetadata', handleLoadedMetadata);
+        (_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('pause', handlePause);
+        (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener('play', handlePlay);
+        (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.addEventListener('timeupdate', handleTimeUpload);
+        return () => {
+            var _a, _b, _c, _d, _e;
+            if (hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current)
+                (_a = hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
+            setIsLoadFinish(false);
+            (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('loadedmetadata', handleLoadedMetadata);
+            (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('pause', handlePause);
+            (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('play', handlePlay);
+            (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.removeEventListener('timeupdate', handleTimeUpload);
+        };
+    }, [isActive]);
+    const renderPoster = (0, react_1.useMemo)(() => {
+        var _a;
+        if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
+            return null;
+        }
+        return (react_1.default.createElement("img", { style: { position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', objectFit: 'cover' }, src: ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || (sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image), alt: 'video poster' }));
+    }, [isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
+    const blurStyle = (0, react_1.useMemo)(() => {
+        return blur
+            ? {
+                filter: 'blur(10px)',
+                transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
+            }
+            : {};
+    }, [blur]);
+    if (!(scene === null || scene === void 0 ? void 0 : scene.mediaUrl)) {
+        return null;
+    }
+    return (react_1.default.createElement("div", { className: 'video-container', key: scene.itemId, style: {
+            position: 'relative',
+            width: '100%',
+            height,
+            overflow: 'hidden'
+        }, onClick: handleClickVideo() },
+        react_1.default.createElement("div", { className: 'n-full-screen', id: videoId, style: { width: '100%', height: '100%' } }),
+        renderPoster,
+        isPauseVideo && react_1.default.createElement(FormatImage_1.default, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })));
+});
+exports.default = (0, react_1.memo)(VideoWidget);

package/lib/core/components/DiyStoryPreview/index.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { ISxpPageRenderProps } from '../SxpPageRender';
+import '../SxpPageRender/index.less';
+export type DiyStoryPreviewType = ISxpPageRenderProps & {
+    appDomain?: string;
+    activeIndex?: number;
+    onActiveChange?: (v: number) => void;
+    loopPlay?: boolean;
+    pointerEvents?: any;
+    onUpdateTimeLine: (index: number, curTime: number) => void;
+    onPlay: (index: number, curTime: number) => void;
+    onPause: () => void;
+    disabledListener?: boolean;
+};
+export interface IDiyStoryPreviewRef {
+    play: () => void;
+    pause: () => void;
+    slideTo: (n: number) => void;
+    isPlaying: () => boolean;
+}
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<ISxpPageRenderProps & {
+    appDomain?: string | undefined;
+    activeIndex?: number | undefined;
+    onActiveChange?: ((v: number) => void) | undefined;
+    loopPlay?: boolean | undefined;
+    pointerEvents?: any;
+    onUpdateTimeLine: (index: number, curTime: number) => void;
+    onPlay: (index: number, curTime: number) => void;
+    onPause: () => void;
+    disabledListener?: boolean | undefined;
+} & React.RefAttributes<IDiyStoryPreviewRef>>>;
+export default _default;

package/lib/core/components/DiyStoryPreview/index.js

@@ -0,0 +1,235 @@
+"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 lodash_1 = require("lodash");
+const RenderCard_1 = tslib_1.__importDefault(require("../SxpPageRender/RenderCard"));
+const ExpandableText_1 = tslib_1.__importDefault(require("../SxpPageRender/ExpandableText"));
+const LikeButton_1 = tslib_1.__importDefault(require("../SxpPageRender/LikeButton"));
+const useIconLink_1 = require("../SxpPageRender/useIconLink");
+const ToggleButton_1 = tslib_1.__importDefault(require("../SxpPageRender/ToggleButton"));
+const PictureGroup_1 = tslib_1.__importDefault(require("./PictureGroup"));
+const VideoWidget_1 = tslib_1.__importDefault(require("./VideoWidget"));
+const _materials_ = tslib_1.__importStar(require("../../../materials"));
+require("../SxpPageRender/index.less");
+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 DiyStoryPreview = (0, react_1.forwardRef)(({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [], onActiveChange, activeIndex, loopPlay = false, pointerEvents = 'none', onUpdateTimeLine, disabledListener, onPlay, onPause }, ref) => {
+    const videoWidgetRef = (0, react_1.useRef)(null);
+    const swiperRef = (0, react_1.useRef)(null);
+    const [curIndex, setCurIndex] = (0, react_1.useState)(0);
+    const height = (0, react_1.useMemo)(() => {
+        let minusHeight = 0;
+        if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
+            minusHeight += 45;
+        }
+        if (tagList.length > 0) {
+            minusHeight += 45;
+        }
+        return containerHeight - minusHeight;
+    }, [globalConfig, containerHeight, tagList]);
+    (0, react_1.useImperativeHandle)(ref, () => {
+        return {
+            play() {
+                var _a;
+                (_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.play();
+            },
+            pause() {
+                var _a;
+                (_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.pause();
+            },
+            slideTo(n) {
+                var _a, _b;
+                if (!(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current))
+                    return;
+                (_b = (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.slideTo(n);
+            },
+            isPlaying() {
+                var _a, _b;
+                return (_b = (_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.isPlaying()) !== null && _b !== void 0 ? _b : false;
+            }
+        };
+    });
+    const isVideoUrl = (url) => {
+        if (url && url !== '' && typeof url === 'string') {
+            const imageExtensions = ['.mp4', '.m3u8'];
+            const lowerCaseUrl = url === null || url === void 0 ? void 0 : url.toLowerCase();
+            return imageExtensions.some((ext) => lowerCaseUrl === null || lowerCaseUrl === void 0 ? void 0 : lowerCaseUrl.endsWith(ext));
+        }
+        else {
+            return false;
+        }
+    };
+    const renderContent = (rec, index) => {
+        var _a, _b;
+        const scene = (_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.scene;
+        const isVideo = isVideoUrl(scene === null || scene === void 0 ? void 0 : scene.mediaUrl);
+        if (isVideo) {
+            return (react_1.default.createElement(VideoWidget_1.default, Object.assign({ key: index }, (curIndex === index && { ref: videoWidgetRef }), { rec: rec, index: index, muted: true, width: containerWidth, data: data, height: containerHeight, activeIndex: index, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoPlayIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon, swiperRef: swiperRef, loopPlay: loopPlay, onUpdateTimeLine: onUpdateTimeLine, onPlay: onPlay, onPause: onPause })));
+        }
+        else {
+            return (react_1.default.createElement(PictureGroup_1.default, { key: index, imgUrls: [(_b = scene === null || scene === void 0 ? void 0 : scene.mediaUrl) !== null && _b !== void 0 ? _b : ''], width: containerWidth, height: containerHeight, rec: rec, index: index, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost, data: data, swiperRef: swiperRef }));
+        }
+    };
+    const renderLogo = (0, react_1.useMemo)(() => {
+        if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
+            return (react_1.default.createElement("div", { className: 'clc-sxp-logo-banner', style: { backgroundColor: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.color } },
+                react_1.default.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, _h, _j;
+        if (rec === null || rec === void 0 ? void 0 : rec.video) {
+            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];
+            return (react_1.default.createElement(react_1.default.Fragment, null,
+                ((_f = rec === null || rec === void 0 ? void 0 : rec.video) === null || _f === void 0 ? void 0 : _f.title) && (react_1.default.createElement("div", { style: {
+                        background: 'repeating-linear-gradient(0deg, rgba(26, 26, 25, 0.7), hsla(0, 0%, 100%, 0))',
+                        height: '130px',
+                        position: 'absolute',
+                        bottom: 0,
+                        width: '100%',
+                        willChange: 'transform',
+                        zIndex: 2,
+                        pointerEvents
+                    } })),
+                react_1.default.createElement("div", { style: {
+                        marginBottom: `${(_g = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.bottomInfoDist) !== null && _g !== void 0 ? _g : 40}px`,
+                        zIndex: 999,
+                        position: 'absolute',
+                        bottom: 0,
+                        left: 0,
+                        right: 0,
+                        paddingTop: '20px'
+                    } },
+                    (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) ? (react_1.default.createElement("div", { style: {} },
+                        react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER, isActive: index === activeIndex, value: value }))) : null,
+                    react_1.default.createElement("div", null,
+                        react_1.default.createElement(ExpandableText_1.default, { isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_j = (_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.title) !== null && _j !== void 0 ? _j : '', style: Object.assign(Object.assign({}, descStyle), { textShadow: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isOpenTextShadow) ? '2px 2px 4px rgba(0, 0, 0, 0.5)' : 'none', padding: '0 20px', fontSize: '12px' }) }),
+                        react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER, includesCtaType: ['AniLink'], isActive: index === activeIndex, value: value }))),
+                react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER, includesCtaType: ['AniLinkPopup'], isActive: index === activeIndex, value: value })));
+        }
+        return null;
+    };
+    const likeIcon = (0, useIconLink_1.useIconLink)(defaultLikeIconPath, appDomain);
+    const unlikeIcon = (0, useIconLink_1.useIconLink)(defaultUnLikeIconPath, appDomain);
+    const renderLikeButton = (rec, index) => {
+        var _a, _b, _c, _d;
+        if (!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLike))
+            return null;
+        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 === null || rec === void 0 ? void 0 : rec.video) {
+            return (react_1.default.createElement(LikeButton_1.default, { 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, style: {
+                    top,
+                    right: (_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.likeIconX) !== null && _d !== void 0 ? _d : 0,
+                    position: 'absolute',
+                    zIndex: 999,
+                    backgroundColor: 'transparent',
+                    width: '50px',
+                    height: '50px',
+                    outline: 'none',
+                    border: 'none',
+                    boxSizing: 'content-box',
+                    padding: 0,
+                    transform: 'translate3d(0px, 0px, 0px)'
+                } }));
+        }
+        return null;
+    };
+    const mutedIcon = (0, useIconLink_1.useIconLink)('/pb_static/5beaaa5ce7f3477b99db3838619cc471.png', appDomain);
+    const unmutedIcon = (0, useIconLink_1.useIconLink)('/pb_static/fea8668a8a894e4aa3a86bcc775e895e.png', appDomain);
+    const renderToggleButton = (visible) => {
+        var _a, _b, _c, _d;
+        if (!visible)
+            return null;
+        let top = (_a = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconY) !== null && _a !== void 0 ? _a : 23;
+        if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) === 'top') {
+            top += 45;
+        }
+        return (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowMute) === true ? (react_1.default.createElement(ToggleButton_1.default, { style: {
+                position: 'absolute',
+                visibility: 'visible',
+                zIndex: 999,
+                transform: 'translate3d(0px,0px,0px)',
+                [(_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconXPosit) !== null && _b !== void 0 ? _b : 'right']: (_c = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconX) !== null && _c !== void 0 ? _c : 0,
+                [(_d = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconYPosit) !== null && _d !== void 0 ? _d : 'bottom']: top,
+                backgroundColor: 'transparent',
+                width: '50px',
+                height: '50px',
+                outline: 'none',
+                border: 'none',
+                boxSizing: 'content-box',
+                padding: 0
+            }, 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 })) : null;
+    };
+    const renderView = (item, index) => {
+        var _a, _b, _c, _d;
+        return (react_1.default.createElement("div", { style: { position: 'relative' } },
+            react_1.default.createElement(react_2.SwiperSlide, { key: index, virtualIndex: index, style: { overflow: 'hidden', position: 'relative' } },
+                renderBottom(item, index),
+                renderLikeButton(item, index),
+                renderToggleButton(!(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.muteIconFixed)),
+                react_1.default.createElement(ToggleButton_1.default, { 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(item, index))));
+    };
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        if (!(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current))
+            return;
+        (_b = (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.slideTo(activeIndex);
+    }, [activeIndex]);
+    const handleSessionExpire = (0, react_1.useCallback)((0, lodash_1.debounce)(() => {
+        var _a;
+        (_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
+    }, 1000), []);
+    (0, react_1.useEffect)(() => {
+        if (disabledListener)
+            return;
+        const events = ['touchstart', 'touchcancel'];
+        events.forEach((event) => {
+            window.addEventListener(event, handleSessionExpire);
+        });
+        return () => {
+            events.forEach((event) => {
+                window.removeEventListener(event, handleSessionExpire);
+            });
+        };
+    }, [handleSessionExpire, disabledListener]);
+    return (react_1.default.createElement("div", { id: 'sxp-render', style: { height: containerHeight, position: 'relative', pointerEvents } },
+        react_1.default.createElement(react_2.Swiper, { ref: swiperRef, allowTouchMove: pointerEvents !== 'none', onSlideChange: () => {
+                swiperRef.current.swiper.allowTouchMove = false;
+                setTimeout(() => {
+                    swiperRef.current.swiper.allowTouchMove = true;
+                }, 500);
+            }, onActiveIndexChange: (swiper) => {
+                setCurIndex(swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex);
+                onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(swiper.activeIndex);
+            }, direction: 'vertical', style: { overflow: 'hidden', height: containerHeight }, height: containerHeight }, data === null || data === void 0 ? void 0 : data.map((rec, index) => {
+            return renderView(rec, index);
+        }))));
+});
+exports.default = (0, react_1.memo)(DiyStoryPreview);

package/lib/core/components/SxpPageCore/index.js

@@ -12,7 +12,8 @@ Object.values(_materials_).forEach((v) => {
     RESOLVER[v.extend.type] = v;
 });
 const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain, enabledMetaConversionApi, dataList }) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
+    const isDiyH5 = ((_a = data === null || data === void 0 ? void 0 : data.page_type) === null || _a === void 0 ? void 0 : _a.path_type) === 5;
     const utmVal = (0, react_1.useMemo)(() => {
         var _a;
         const searchParams = (location === null || location === void 0 ? void 0 : location.search) ? (_a = location === null || location === void 0 ? void 0 : location.search) === null || _a === void 0 ? void 0 : _a.replace('?', '') : '';
@@ -21,7 +22,7 @@ const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, l
     const [_schema, setSchema] = (0, react_1.useState)(data === null || data === void 0 ? void 0 : data.data);
     const [channel, setChannel] = (0, react_1.useState)();
     return (react_1.default.createElement(core_1.EditorCore, { resolver: RESOLVER, enableDataSource: false, schema: _schema, utmVal: channel || utmVal },
-        react_1.default.createElement(SxpDataSourceProvider_1.default, { utmVal: utmVal, dataSources: data === null || data === void 0 ? void 0 : data.data_sources, sxpParameter: data === null || data === void 0 ? void 0 : data.sxp_parameter, maxSize: (_b = (_a = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _a === void 0 ? void 0 : _a.personalized_recommend) !== null && _b !== void 0 ? _b : maxSize, defaultSize: (_d = (_c = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _c === void 0 ? void 0 : _c.default_recommend) !== null && _d !== void 0 ? _d : defaultSize, hashTagSize: (_f = (_e = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _e === void 0 ? void 0 : _e.hash_tag_size) !== null && _f !== void 0 ? _f : hashTagSize, loadingImage: loadingImage, appDomain: appDomain, enabledMetaConversionApi: enabledMetaConversionApi, utmParameter: data === null || data === void 0 ? void 0 : data.utm_parameter, data: data, dataList: dataList, onUpdateSchema: (d) => setSchema(d), onUpdateChannel: (d) => setChannel(d), render: ({ rtcList, tagList, pageData }) => {
+        react_1.default.createElement(SxpDataSourceProvider_1.default, { utmVal: utmVal, dataSources: data === null || data === void 0 ? void 0 : data.data_sources, sxpParameter: data === null || data === void 0 ? void 0 : data.sxp_parameter, maxSize: (_c = (_b = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _b === void 0 ? void 0 : _b.personalized_recommend) !== null && _c !== void 0 ? _c : maxSize, defaultSize: (_e = (_d = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _d === void 0 ? void 0 : _d.default_recommend) !== null && _e !== void 0 ? _e : defaultSize, hashTagSize: (_g = (_f = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _f === void 0 ? void 0 : _f.hash_tag_size) !== null && _g !== void 0 ? _g : hashTagSize, loadingImage: loadingImage, appDomain: appDomain, enabledMetaConversionApi: enabledMetaConversionApi, utmParameter: data === null || data === void 0 ? void 0 : data.utm_parameter, data: data, dataList: dataList, isDiyH5: isDiyH5, onUpdateSchema: (d) => setSchema(d), onUpdateChannel: (d) => setChannel(d), render: ({ rtcList, tagList, pageData }) => {
                 var _a;
                 return (react_1.default.createElement(react_1.default.Fragment, null,
                     react_1.default.createElement(SxpPageRender_1.default, Object.assign({ defaultData: data }, (_a = pageData === null || pageData === void 0 ? void 0 : pageData.data) === null || _a === void 0 ? void 0 : _a.sxpPageConf, { tagList: tagList, data: rtcList, resolver: RESOLVER })),

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

@@ -10,6 +10,11 @@ interface IVideoWidgetProps {
     activeIndex?: number;
     videoPostConfig?: postConfigType;
     videoPlayIcon?: string;
+    loopPlay: any;
+    swiperRef?: any;
 }
-declare const _default: React.NamedExoticComponent<IVideoWidgetProps>;
+export interface IVideoWidgetRef {
+    setLoopPlay: (v: boolean) => void;
+}
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<IVideoWidgetProps & React.RefAttributes<IVideoWidgetRef>>>;
 export default _default;