pb-sxp-ui 1.15.14 → 1.15.15-alpha.2

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { postConfigType } from '../SxpPageRender';
+import { IScene, ScenesType } from '.';
+interface IPictureGroupProps {
+    imgUrls?: string[];
+    width: number;
+    height: number;
+    rec: IScene;
+    index: number;
+    imgUrlsPostConfig?: postConfigType;
+    swiperRef?: any;
+    data?: ScenesType;
+    loopPlay?: boolean;
+}
+declare const _default: React.NamedExoticComponent<IPictureGroupProps>;
+export default _default;

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

@@ -0,0 +1,34 @@
+import React, { memo, useEffect, useState } from 'react';
+import { Autoplay, Pagination } from 'swiper/modules';
+import { Swiper, SwiperSlide, useSwiperSlide } from 'swiper/react';
+import Picture from '../SxpPageRender/PictureGroup/Picture';
+const PictureGroup = ({ imgUrls, width, height, imgUrlsPostConfig, rec, index, swiperRef, data = [], loopPlay }) => {
+    const { isActive } = useSwiperSlide();
+    const [isload, setIsLoad] = useState(false);
+    useEffect(() => {
+        if (isActive && isload && loopPlay) {
+            setTimeout(() => {
+                var _a, _b, _c, _d;
+                if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
+                    (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper.slideTo(0);
+                }
+                else {
+                    const i = (_c = (_b = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _b === void 0 ? void 0 : _b.swiper) === null || _c === void 0 ? void 0 : _c.activeIndex;
+                    (_d = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _d === void 0 ? void 0 : _d.swiper.slideTo(i + 1);
+                }
+            }, 3000);
+        }
+    }, [isActive, isload, data, index, swiperRef, loopPlay]);
+    const loadFinishImage = () => {
+        setIsLoad(true);
+    };
+    return (React.createElement(Swiper, { defaultValue: 0, direction: 'horizontal', modules: [Pagination, Autoplay], pagination: {
+            clickable: true,
+            bulletActiveClass: 'swipe-item-active-bullet',
+            bulletElement: 'button'
+        }, 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, onShowFirstImage: loadFinishImage })));
+    })));
+};
+export default memo(PictureGroup);

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { postConfigType } from '../SxpPageRender';
+import { IScene, ScenesType } from '.';
+interface IVideoWidgetProps {
+    rec: IScene;
+    index: number;
+    height: number;
+    width: number;
+    data: ScenesType;
+    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/es/core/components/DiyStoryPreview/VideoWidget.js

@@ -0,0 +1,195 @@
+import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { useSwiperSlide } from 'swiper/react';
+import { useIconLink } from '../SxpPageRender/useIconLink';
+import { mountVideoPlayerAtNode } from '../SxpPageRender/VideoWidget/VideoPlayer';
+import FormatImage from '../SxpPageRender/FormatImage';
+import { useSxpDataSource } from '../../../core/hooks';
+const VideoWidget = forwardRef(({ rec, index, height, data, muted, activeIndex, videoPostConfig, width, swiperRef, videoPlayIcon, onUpdateTimeLine, loopPlay, onPlay, onPause }, ref) => {
+    const { isActive } = useSwiperSlide();
+    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('');
+    const videoId = `pb-cache-video-${index}`;
+    const hlsRef = useRef(null);
+    const loopPlayRef = useRef(loopPlay);
+    useEffect(() => {
+        loopPlayRef.current = loopPlay;
+    }, [loopPlay]);
+    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);
+            }
+        };
+    });
+    useEffect(() => {
+        if (!videoRef.current)
+            return;
+        videoRef.current.muted = muted;
+    }, [muted]);
+    const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
+    const handleLoadedMetadata = useCallback(() => {
+        var _a;
+        videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
+        (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
+        setIsLoadFinish(true);
+    }, []);
+    const handleClickVideo = 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) >= (rec === null || rec === void 0 ? void 0 : rec.endTime)) {
+                        videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.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 = 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 = rec === null || rec === void 0 ? void 0 : rec.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) - (rec === null || rec === void 0 ? void 0 : rec.startTime);
+        onPlay === null || onPlay === void 0 ? void 0 : onPlay(index, localTime);
+    };
+    useEffect(() => {
+        var _a, _b, _c, _d;
+        if (!isActive)
+            return;
+        const videoSrc = rec === null || rec === void 0 ? void 0 : rec.mediaUrl;
+        if (!videoSrc)
+            return;
+        setIsPauseVideo(false);
+        const videoPlayerWrapperNode = document.querySelector(`#${videoId}`);
+        if (!videoPlayerWrapperNode)
+            return;
+        videoRef.current = mountVideoPlayerAtNode === null || mountVideoPlayerAtNode === void 0 ? void 0 : 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 = rec === null || rec === void 0 ? void 0 : rec.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 = 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, alt: 'video poster' }));
+    }, [isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
+    const blurStyle = useMemo(() => {
+        return blur
+            ? {
+                filter: 'blur(10px)',
+                transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
+            }
+            : {};
+    }, [blur]);
+    if (!(rec === null || rec === void 0 ? void 0 : rec.mediaUrl)) {
+        return null;
+    }
+    return (React.createElement("div", { className: 'video-container', key: rec.itemId, style: {
+            position: 'relative',
+            width: '100%',
+            height,
+            overflow: 'hidden'
+        }, onClick: handleClickVideo() },
+        React.createElement("div", { className: 'n-full-screen', id: videoId, style: { width: '100%', height: '100%' } }),
+        renderPoster,
+        isPauseVideo && React.createElement(FormatImage, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })));
+});
+export default memo(VideoWidget);

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import { ISxpPageRenderProps } from '../SxpPageRender';
+import '../SxpPageRender/index.less';
+export interface IScene {
+    blueprintStep: number;
+    endTime: number;
+    itemId: string;
+    mediaFileNo: string;
+    mediaUrl: string;
+    position: number;
+    postId: string;
+    sceneId: string;
+    sceneInfo: string;
+    sceneTag: string;
+    startTime: number;
+    traceInfo: string;
+    bindProducts?: any[];
+    title?: string;
+}
+export type ScenesType = IScene[];
+export type DiyStoryPreviewType = ISxpPageRenderProps & {
+    appDomain?: string;
+    scenes?: ScenesType;
+    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;
+    scenes?: ScenesType | 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;