pb-sxp-ui 1.0.26 → 1.0.28

package/dist/pb-ui.js

@@ -12085,13 +12085,24 @@ Made in Italy` })));
                 });
             }
         }, [data, index, bffEventReport]);
+        const blur = React.useMemo(() => {
+            return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
+        }, [videoPostConfig]);
+        const translateY = React.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]);
+        const blurBgSrc = React.useMemo(() => {
+            var _a;
+            return ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || firstFrameSrc;
+        }, [firstFrameSrc, rec]);
         const handLoadeddata = React.useCallback(() => {
-            const video = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current;
-            if (!video)
+            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;
-            if (!canvas)
-                return;
             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;
@@ -12099,10 +12110,9 @@ Made in Italy` })));
             canvas.width = targetWidth;
             ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
             setFirstFrameSrc(canvas.toDataURL());
-            canvas.remove();
         }, []);
         React.useEffect(() => {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             if (!videoRef.current)
                 return;
             setIsPauseVideo(false);
@@ -12125,14 +12135,16 @@ Made in Italy` })));
                 videoRef.current.setAttribute('x5-playsinline', 'true');
                 videoRef.current.setAttribute('webkit-playsinline', 'true');
             }
-            (_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);
-            (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener('loadeddata', handLoadeddata);
+            (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('loadedmetadata', handleLoadedMetadata);
+            (_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);
+            (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.addEventListener('loadeddata', handLoadeddata);
             return () => {
-                var _a, _b, _c;
-                (_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);
-                (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('loadeddata', handLoadeddata);
+                var _a, _b, _c, _d;
+                (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('loadedmetadata', handleLoadedMetadata);
+                (_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('canplay', handleLoadedMetadata);
+                (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('playing', handlePlaying);
+                (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('loadeddata', handLoadeddata);
             };
         }, [handleLoadedMetadata, handlePlaying, rec.video, handLoadeddata]);
         React.useEffect(() => {
@@ -12191,19 +12203,6 @@ Made in Italy` })));
                 window.removeEventListener('beforeunload', handleBeforeUnload);
             };
         }, [activeIndex, index, rec, videoRef, handleClickVideo, isPauseVideo]);
-        const blur = React.useMemo(() => {
-            return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
-        }, [videoPostConfig]);
-        const translateY = React.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]);
-        const blurBgSrc = React.useMemo(() => {
-            var _a;
-            return ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || firstFrameSrc;
-        }, [firstFrameSrc, rec]);
         if (!rec.video) {
             return null;
         }
@@ -12231,19 +12230,23 @@ Made in Italy` })));
                     right: 0
                 } },
                 React.createElement("div", { style: { position: 'relative' } },
-                    React.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', ref: videoRef, crossOrigin: 'anonymous', poster: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, muted: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart, style: {
+                    React.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', ref: videoRef, crossOrigin: 'anonymous', 
+                        // poster={sxpParameter?.placeholder_image}
+                        muted: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart, style: {
                             width: '100%',
                             height: 'auto',
                             objectFit: 'contain'
                         } }),
-                    renderPoster,
-                    React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON }))))) : (React.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
+                    React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON }))),
+            renderPoster)) : (React.createElement("div", { className: 'video-container', key: rec.video.itemId, onClick: handleClickVideo(), style: {
                 position: 'relative',
                 width: '100%',
                 height,
                 overflow: 'hidden'
             } },
-            React.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', ref: videoRef, crossOrigin: 'anonymous', poster: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, muted: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart }),
+            React.createElement("video", { id: `pb-video-${index}`, className: 'clc-pb-video', ref: videoRef, crossOrigin: 'anonymous', 
+                // poster={sxpParameter?.placeholder_image}
+                muted: true, controls: false, playsInline: true, preload: 'auto', onPause: onPause, onEnded: handleVideoStart }),
             renderPoster,
             React.createElement("img", { hidden: !isPauseVideo, className: 'clc-pb-video-pause', src: PAUSE_ICON })))));
     };