pb-sxp-ui 1.15.15-alpha.1 → 1.15.16-alpha.1

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

@@ -1,242 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
-const react_2 = require("swiper/react");
-const useIconLink_1 = require("../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);
-    (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) {
-                if (!videoRef.current)
-                    return;
-                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 handleVideoStart = (0, react_1.useCallback)(() => {
-        var _a;
-        (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
-    }, []);
-    const PAUSE_ICON = (0, useIconLink_1.useIconLink)('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
-    const handlePlaying = (0, react_1.useCallback)(() => {
-        var _a, _b, _c, _d, _e, _f;
-        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';
-            setIsFirstPlay(false);
-        }
-    }, [bffEventReport, data, index, isFirstPlay]);
-    const handleLoadedMetadata = (0, react_1.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 = (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) >= (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 = (0, react_1.useMemo)(() => {
-        return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
-    }, [videoPostConfig]);
-    const translateY = (0, react_1.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 handLoadeddata = (0, react_1.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());
-    }, []);
-    const handleTimeUpload = (0, react_1.useCallback)(() => {
-        var _a;
-        if (!videoRef.current)
-            return;
-        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);
-        onUpdateTimeLine === null || onUpdateTimeLine === void 0 ? void 0 : onUpdateTimeLine(index, localTime);
-        setTimeout(() => {
-            var _a, _b;
-            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)) {
-                slideSwiper();
-            }
-        });
-    }, []);
-    const slideSwiper = () => {
-        var _a, _b, _c, _d, _e, _f, _g;
-        (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
-        if (!loopPlayRef.current)
-            return;
-        if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
-            (_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.slideTo(0);
-        }
-        else {
-            const i = (_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.activeIndex;
-            (_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.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);
-    };
-    (0, react_1.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 = 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 = 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 = (0, react_1.useMemo)(() => {
-        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: 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 (!(rec === null || rec === void 0 ? void 0 : rec.mediaUrl)) {
-        return null;
-    }
-    return (react_1.default.createElement("div", { className: 'video-container', key: rec.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

@@ -1,51 +0,0 @@
-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;