pb-sxp-ui 1.0.93 → 1.0.95

package/dist/pb-ui.js

@@ -12910,11 +12910,15 @@ Made in Italy` })));
         }, [videoRef]);
         const PAUSE_ICON = useIconLink('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
         const handlePlaying = React.useCallback(() => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
             if (!videoRef)
                 return;
             setWaiting(false);
             setIsLoadFinish(true);
+        }, []);
+        const handleStartPlay = React.useCallback(() => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            if (!videoRef)
+                return;
             setIsPauseVideo(false);
             const item = data[index];
             if (item && (videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration)) {
@@ -12965,8 +12969,9 @@ Made in Italy` })));
         const handleLoadedmetadata = React.useCallback(() => {
             if (!videoRef)
                 return;
+            handleStartPlay();
             handLoadeddata();
-        }, [videoRef, handLoadeddata]);
+        }, [videoRef, handLoadeddata, handleStartPlay]);
         const handleClickVideo = React.useCallback((type) => () => {
             if (!videoRef)
                 return;
@@ -13056,6 +13061,7 @@ Made in Italy` })));
             videoRef.setAttribute('webkit-playsinline', 'true');
             videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('loadedmetadata', handleLoadedmetadata);
             videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('loadeddata', handLoadeddata);
+            videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('play', handleStartPlay);
             videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('playing', handlePlaying);
             videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('pause', handlePause);
             videoRef === null || videoRef === void 0 ? void 0 : videoRef.addEventListener('ended', handlePlay);
@@ -13066,9 +13072,11 @@ Made in Italy` })));
                 dom2 === null || dom2 === void 0 ? void 0 : dom2.appendChild(dom);
                 videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('loadedmetadata', handleLoadedmetadata);
                 videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('loadeddata', handLoadeddata);
+                videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('play', handleStartPlay);
                 videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('playing', handlePlaying);
                 videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('pause', handlePause);
                 videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('ended', handlePlay);
+                videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('canplay', handlePlay);
                 videoRef === null || videoRef === void 0 ? void 0 : videoRef.removeEventListener('waiting', handleWaiting);
             };
         }, [isActive, videoId, rec, videoRef]);
@@ -13120,7 +13128,14 @@ Made in Italy` })));
             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: 'placeholder image' }));
+            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: 'placeholder image' }));
         }, [isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
         const renderLoading = React.useMemo(() => {
             if (!waiting || !isLoadFinish)
@@ -13155,7 +13170,7 @@ Made in Italy` })));
             return null;
         }
         return (React.createElement(React.Fragment, null, blur ? (React.createElement("div", { className: 'video-container', key: rec === null || rec === void 0 ? void 0 : rec.video.itemId, onClick: handleClickVideo(), style: Object.assign({ position: 'relative', width: '100%', height, overflow: 'hidden' }, bgStyle) },
-            !isBgColor && (React.createElement(FormatImage$1, { src: blurBgSrc, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) })),
+            !isBgColor && isLoadFinish && blurBgSrc && (React.createElement(FormatImage$1, { src: blurBgSrc, style: Object.assign({ height: '100%', width: '100%', objectFit: 'cover' }, blurStyle) })),
             React.createElement("canvas", { ref: canvasRef, style: { display: 'none' } }),
             React.createElement("div", { style: {
                     position: 'absolute',
@@ -13232,7 +13247,7 @@ Made in Italy` })));
      * @Author: binruan@chatlabs.com
      * @Date: 2024-03-20 10:27:31
      * @LastEditors: binruan@chatlabs.com
-     * @LastEditTime: 2024-04-30 18:36:47
+     * @LastEditTime: 2024-06-24 10:37:19
      * @FilePath: \pb-sxp-ui\src\core\components\SxpPageRender\PictureGroup\Picture.tsx
      *
      */
@@ -13272,7 +13287,7 @@ Made in Italy` })));
                     transform: translateY,
                     left: 0,
                     right: 0
-                } }))));
+                }, onLoad: onShowFirstImage }))));
     };
 
     /*