pb-sxp-ui 1.0.23 → 1.0.25

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

@@ -4,14 +4,16 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const react_2 = require("swiper/react");
 const useIconLink_1 = require("../useIconLink");
+const FormatImage_1 = tslib_1.__importDefault(require("../FormatImage"));
 const hooks_1 = require("../../../../core/hooks");
 const event_1 = tslib_1.__importStar(require("../../../../core/utils/event"));
-const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
+const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig }) => {
     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 [isLoad, setIsLoad] = (0, react_1.useState)(false);
+    const [isLoadFinish, setIsLoadFinish] = (0, react_1.useState)(false);
+    const [isFirstPlay, setIsFirstPlay] = (0, react_1.useState)(true);
     const { isActive } = (0, react_2.useSwiperSlide)();
     (0, react_1.useEffect)(() => {
         if (!videoRef.current)
@@ -27,11 +29,11 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
         setIsPauseVideo(false);
         const item = data[index];
-        if (item && isLoad && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
+        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 = '1';
+            const playType = isFirstPlay ? '0' : '1';
             bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
                 eventInfo: {
                     eventSubject: 'playVideo',
@@ -47,72 +49,41 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
                     traceInfo: (_o = item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
                 }
             });
+            setIsFirstPlay(false);
         }
-        if (!isLoad) {
-            setIsLoad(true);
-        }
-    }, [bffEventReport, data, index, isLoad]);
+    }, [bffEventReport, data, index, isFirstPlay]);
     const handleLoadedMetadata = (0, react_1.useCallback)(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-        const item = data[index];
-        if (item && !isLoad && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
-            videoStartTime.current = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.currentTime) || 0;
-            const videoDuration = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 0).toFixed(2);
-            const videoCurrentTime = ((_f = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime) !== null && _f !== void 0 ? _f : 0).toFixed(2);
-            const playType = '0';
-            bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
-                eventInfo: {
-                    eventSubject: 'playVideo',
-                    eventDescription: 'User played the video',
-                    contentId: (_h = (_g = item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '',
-                    contentName: (_k = (_j = item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '',
-                    playType,
-                    startTime: videoCurrentTime,
-                    videoDuration,
-                    contentTags: JSON.stringify((_m = (_l = item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []),
-                    position: index + '',
-                    contentFormat: 'video',
-                    traceInfo: (_o = item.video) === null || _o === void 0 ? void 0 : _o.traceInfo
-                }
-            });
-        }
-        setTimeout(() => {
-            var _a;
-            (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
-        }, 0);
-    }, [index, bffEventReport, data, isLoad]);
+        setIsLoadFinish(true);
+    }, []);
     const handleClickVideo = (0, react_1.useCallback)((type) => () => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        if (!isLoad)
+        var _a, _b, _c, _d, _e;
+        if (!isLoadFinish)
             return;
-        const item = data[index];
-        const videoDuration = ((_b = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
-        const videoCurrentTime = ((_d = (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
-        const isPause = (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.paused;
+        const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
         switch (type) {
             case 'start':
                 if (!isPause)
                     return;
-                (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.play();
+                (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.play();
                 setIsPauseVideo(false);
                 break;
             case 'pause':
                 if (isPause)
                     return;
-                (_g = videoRef.current) === null || _g === void 0 ? void 0 : _g.pause();
+                (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
                 setIsPauseVideo(true);
                 break;
             default:
                 if (isPause) {
-                    (_h = videoRef.current) === null || _h === void 0 ? void 0 : _h.play();
+                    (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
                 }
                 else {
-                    (_j = videoRef.current) === null || _j === void 0 ? void 0 : _j.pause();
+                    (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
                 }
                 setIsPauseVideo(!isPause);
                 break;
         }
-    }, [data, index, isLoad]);
+    }, [isLoadFinish]);
     const onPause = (0, react_1.useCallback)(() => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
         const item = data[index];
@@ -138,38 +109,40 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
         }
     }, [data, index, bffEventReport]);
     (0, react_1.useEffect)(() => {
-        var _a, _b, _c;
-        if (data.length <= 0)
-            return;
+        var _a, _b;
         if (!videoRef.current)
             return;
         setIsPauseVideo(false);
-        if (!isActive) {
-            (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
-            return;
-        }
         if (!videoRef.current.src) {
             const videoSrc = rec.video.url;
             videoRef.current.src = videoSrc;
             videoRef.current.setAttribute('x5-playsinline', 'true');
             videoRef.current.setAttribute('webkit-playsinline', 'true');
         }
-        else {
-            videoRef.current.play();
-        }
-        (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('canplay', handleLoadedMetadata);
-        (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener('playing', handlePlaying);
+        (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('canplay', handleLoadedMetadata);
+        (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('playing', handlePlaying);
         return () => {
             var _a, _b;
             (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('canplay', handleLoadedMetadata);
             (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('playing', handlePlaying);
         };
-    }, [data, handleLoadedMetadata, handlePlaying, isActive, isLoad, rec.video]);
+    }, [handleLoadedMetadata, handlePlaying, rec.video]);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
+            return;
+        if (isActive) {
+            videoRef.current.play();
+        }
+        else {
+            (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
+        }
+    }, [isActive, isLoadFinish]);
     (0, react_1.useEffect)(() => {
         var _a, _b, _c;
-        const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
-        if (!isActive)
+        if (!isActive || !(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
             return;
+        const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
         if (!isPause && openHashtag) {
             (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.pause();
         }
@@ -190,11 +163,11 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
         };
     }, [handleClickVideo, isActive]);
     const renderPoster = (0, react_1.useMemo)(() => {
-        if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image)) {
+        if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
             return null;
         }
-        return (react_1.default.createElement("img", { hidden: isLoad, style: { position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', objectFit: 'cover' }, src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image }));
-    }, [isLoad, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
+        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 }));
+    }, [isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
     (0, react_1.useEffect)(() => {
         const handleBeforeUnload = () => {
             var _a, _b;
@@ -207,16 +180,53 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex }) => {
             window.removeEventListener('beforeunload', handleBeforeUnload);
         };
     }, [activeIndex, index, rec, videoRef, handleClickVideo, isPauseVideo]);
+    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)}%)`
+            : 'translateY(-50%)';
+    }, [videoPostConfig]);
     if (!rec.video) {
         return null;
     }
-    return (react_1.default.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
+    return (react_1.default.createElement(react_1.default.Fragment, null, blur ? (react_1.default.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
+            position: 'relative',
+            width: '100%',
+            height
+        } },
+        react_1.default.createElement(FormatImage_1.default, { src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, style: {
+                height: '100%',
+                width: '100%',
+                objectFit: 'cover',
+                filter: blur ? 'blur(10px)' : 'none',
+                transform: blur ? 'scale(1.2)' : 'none'
+            } }),
+        react_1.default.createElement("div", { style: {
+                position: 'absolute',
+                width: '100%',
+                height: 'auto',
+                top: '50%',
+                transform: translateY,
+                left: 0,
+                right: 0
+            } },
+            react_1.default.createElement("div", { style: { position: 'relative' } },
+                react_1.default.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', ref: videoRef, poster: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, muted: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart, style: {
+                        width: '100%',
+                        height: 'auto',
+                        objectFit: 'contain'
+                    } }),
+                renderPoster,
+                react_1.default.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON }))))) : (react_1.default.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
             position: 'relative',
             width: '100%',
             height
         } },
         react_1.default.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', ref: videoRef, poster: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, muted: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart }),
         renderPoster,
-        react_1.default.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })));
+        react_1.default.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })))));
 };
 exports.default = (0, react_1.memo)(VideoWidget);

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

@@ -1,7 +1,12 @@
 import { CSSProperties, FC } from 'react';
 import { RecItemType } from './typing';
 import './index.less';
-interface ISxpPageRenderProps {
+export type postConfigType = {
+    mode?: '1' | '2';
+    offsetTop?: number;
+    delay?: number;
+};
+export interface ISxpPageRenderProps {
     globalConfig?: {
         isShowLogo?: boolean;
         logoUrl?: string;
@@ -19,6 +24,8 @@ interface ISxpPageRenderProps {
         swipeTipIcon?: string;
         hashTag?: any[];
         isOpenTextShadow?: boolean;
+        videoPost?: postConfigType;
+        imgUrlsPost?: postConfigType;
     };
     descStyle?: CSSProperties;
     tipText?: {

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

@@ -156,10 +156,10 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     const renderContent = (0, react_1.useCallback)((rec, index) => {
         var _a, _b, _c, _d;
         if ((_a = rec.video) === null || _a === void 0 ? void 0 : _a.url) {
-            return (react_1.default.createElement(VideoWidget_1.default, { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex }));
+            return (react_1.default.createElement(VideoWidget_1.default, { rec: rec, index: index, muted: isMuted, data: data, height: height, activeIndex: activeIndex, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost }));
         }
         if ((_b = rec.video) === null || _b === void 0 ? void 0 : _b.imgUrls) {
-            return (react_1.default.createElement(PictureGroup_1.default, { key: rec.video.itemId, imgUrls: rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onReportViewImageEnd: handleReportViewImageEnd, onViewImageStartEvent: handleViewImageStartEvent }));
+            return (react_1.default.createElement(PictureGroup_1.default, { key: rec.video.itemId, imgUrls: rec.video.imgUrls, width: containerWidth, height: height, rec: rec, index: index, onReportViewImageEnd: handleReportViewImageEnd, onViewImageStartEvent: handleViewImageStartEvent, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost }));
         }
         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) => {
@@ -196,7 +196,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
                     react_1.default.createElement("div", { className: 'clc-sxp-bottom-card' },
                         react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: resolver })),
                     react_1.default.createElement("div", null,
-                        react_1.default.createElement(ExpandableText_1.default, { 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({}, descStyle), onChange: onExpandableChange }),
+                        react_1.default.createElement(ExpandableText_1.default, { 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' }), onChange: onExpandableChange }),
                         react_1.default.createElement(Hashtag_1.default, { index: activeIndex, 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;

package/lib/materials/sxp/template/components/Img.js

@@ -18,7 +18,7 @@ const Img = ({ src, rec, item, index }) => {
             }, rec, item, index);
         }
     }, [isOnScreen, src, ref, rec, ctaEvent, item, index]);
-    return (react_1.default.createElement("div", { ref: ref, hidden: !src },
+    return (react_1.default.createElement("div", { ref: ref, hidden: !src, className: (0, css_1.css)({ width: '100%', height: '100%' }) },
         react_1.default.createElement(FormatImage_1.default, { className: (0, css_1.css)({ width: '100%', objectFit: 'cover', height: '100%', display: 'block' }), src: src })));
 };
 exports.default = (0, react_1.memo)(Img);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pb-sxp-ui",
-  "version": "1.0.23",
+  "version": "1.0.25",
   "description": "React enterprise-class UI components",
   "main": "dist/index.cjs",
   "module": "dist/index.js",