pb-sxp-ui 1.0.93 → 1.0.95

package/dist/index.cjs

@@ -12917,11 +12917,15 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
     }, [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)) {
@@ -12972,8 +12976,9 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
     const handleLoadedmetadata = React.useCallback(() => {
         if (!videoRef)
             return;
+        handleStartPlay();
         handLoadeddata();
-    }, [videoRef, handLoadeddata]);
+    }, [videoRef, handLoadeddata, handleStartPlay]);
     const handleClickVideo = React.useCallback((type) => () => {
         if (!videoRef)
             return;
@@ -13063,6 +13068,7 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
         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);
@@ -13073,9 +13079,11 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
             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]);
@@ -13127,7 +13135,14 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
         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)
@@ -13162,7 +13177,7 @@ const VideoWidget$2 = ({ rec, index, height, data, muted, activeIndex, videoPost
         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',
@@ -13239,7 +13254,7 @@ const FingerSwipeTip = ({ imageUrl, style }) => {
  * @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
  *
  */
@@ -13279,7 +13294,7 @@ const Picture = (props) => {
                 transform: translateY,
                 left: 0,
                 right: 0
-            } }))));
+            }, onLoad: onShowFirstImage }))));
 };
 
 /*