pb-sxp-ui 1.15.22-alpha.3 → 1.15.22-alpha.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +19 -17
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +19 -17
- package/dist/index.js.map +1 -1
- package/dist/index.min.cjs +4 -4
- package/dist/index.min.cjs.map +1 -1
- package/dist/index.min.js +4 -4
- package/dist/index.min.js.map +1 -1
- package/dist/pb-ui.js +19 -17
- package/dist/pb-ui.js.map +1 -1
- package/dist/pb-ui.min.js +4 -4
- package/dist/pb-ui.min.js.map +1 -1
- package/es/core/components/SxpPageRender/VideoWidget/index.js +19 -17
- package/lib/core/components/SxpPageRender/VideoWidget/index.js +19 -17
- package/package.json +1 -1
package/dist/pb-ui.js
CHANGED
@@ -17677,6 +17677,7 @@ Made in Italy` })));
|
|
17677
17677
|
})();
|
17678
17678
|
|
17679
17679
|
const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon, loopPlay, swiperRef }, ref) => {
|
17680
|
+
var _a, _b, _c, _d, _e;
|
17680
17681
|
const [isPauseVideo, setIsPauseVideo] = React.useState(false);
|
17681
17682
|
const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport, isDiyH5 } = useSxpDataSource();
|
17682
17683
|
const videoStartTime = React.useRef(0);
|
@@ -17694,6 +17695,11 @@ Made in Italy` })));
|
|
17694
17695
|
const isFirstPlayRef = React.useRef(true);
|
17695
17696
|
const loopPlayRef = React.useRef(loopPlay);
|
17696
17697
|
const scene = rec.video.scene;
|
17698
|
+
const videoUrl = (scene === null || scene === void 0 ? void 0 : scene.mediaUrl) || ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url);
|
17699
|
+
const videoCover = (scene === null || scene === void 0 ? void 0 : scene.mediaUrl) ? scene === null || scene === void 0 ? void 0 : scene.cover : (_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.cover;
|
17700
|
+
const videoPoster = (scene === null || scene === void 0 ? void 0 : scene.mediaUrl)
|
17701
|
+
? (_c = scene === null || scene === void 0 ? void 0 : scene.cover) !== null && _c !== void 0 ? _c : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image
|
17702
|
+
: (_e = (_d = rec === null || rec === void 0 ? void 0 : rec.video) === null || _d === void 0 ? void 0 : _d.cover) !== null && _e !== void 0 ? _e : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image;
|
17697
17703
|
React.useImperativeHandle(ref, () => {
|
17698
17704
|
return {
|
17699
17705
|
setLoopPlay(v) {
|
@@ -17714,8 +17720,7 @@ Made in Italy` })));
|
|
17714
17720
|
: 'translateY(-50%)';
|
17715
17721
|
}, [videoPostConfig]);
|
17716
17722
|
const blurBgSrc = React.useMemo(() => {
|
17717
|
-
|
17718
|
-
return ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || firstFrameSrc;
|
17723
|
+
return videoCover || firstFrameSrc;
|
17719
17724
|
}, [firstFrameSrc, rec]);
|
17720
17725
|
const blurStyle = React.useMemo(() => {
|
17721
17726
|
return blur
|
@@ -17750,28 +17755,27 @@ Made in Italy` })));
|
|
17750
17755
|
setIsLoadFinish(true);
|
17751
17756
|
}, []);
|
17752
17757
|
const handleStartPlay = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
|
17753
|
-
var
|
17758
|
+
var _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
|
17754
17759
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
17755
17760
|
return;
|
17756
17761
|
setIsPauseVideo(false);
|
17757
17762
|
const item = data[index];
|
17758
|
-
if (item && ((
|
17759
|
-
videoStartTime.current = ((
|
17760
|
-
const videoDuration = ((
|
17761
|
-
const videoCurrentTime = ((
|
17763
|
+
if (item && ((_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.duration)) {
|
17764
|
+
videoStartTime.current = ((_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.currentTime) || 0;
|
17765
|
+
const videoDuration = ((_j = (_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.duration) !== null && _j !== void 0 ? _j : 0).toFixed(2);
|
17766
|
+
const videoCurrentTime = ((_l = (_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.currentTime) !== null && _l !== void 0 ? _l : 0).toFixed(2);
|
17762
17767
|
const playType = (isFirstPlayRef === null || isFirstPlayRef === void 0 ? void 0 : isFirstPlayRef.current) ? '0' : '1';
|
17763
17768
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
17764
|
-
eventInfo: Object.assign({ eventSubject: 'playVideo', eventDescription: 'User played the video', contentId: (
|
17769
|
+
eventInfo: Object.assign({ eventSubject: 'playVideo', eventDescription: 'User played the video', contentId: (_o = (_m = item === null || item === void 0 ? void 0 : item.video) === null || _m === void 0 ? void 0 : _m.itemId) !== null && _o !== void 0 ? _o : '', contentName: (_q = (_p = item === null || item === void 0 ? void 0 : item.video) === null || _p === void 0 ? void 0 : _p.title) !== null && _q !== void 0 ? _q : '', playType, startTime: videoCurrentTime, videoDuration, contentTags: JSON.stringify((_s = (_r = item === null || item === void 0 ? void 0 : item.video) === null || _r === void 0 ? void 0 : _r.tags) !== null && _s !== void 0 ? _s : []), position: index + '', contentFormat: 'video', traceInfo: (_t = item === null || item === void 0 ? void 0 : item.video) === null || _t === void 0 ? void 0 : _t.traceInfo }, ((isFirstPlayRef === null || isFirstPlayRef === void 0 ? void 0 : isFirstPlayRef.current) && { loadTime: (loadedTimeRef === null || loadedTimeRef === void 0 ? void 0 : loadedTimeRef.current) - (initTimeRef === null || initTimeRef === void 0 ? void 0 : initTimeRef.current) + '' }))
|
17765
17770
|
});
|
17766
17771
|
isFirstPlayRef.current = false;
|
17767
17772
|
}
|
17768
17773
|
}), [bffEventReport, data, index, isFirstPlayRef, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
17769
17774
|
const handLoadeddata = React.useCallback(() => {
|
17770
|
-
var _a;
|
17771
17775
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || firstFrameSrc || !blur)
|
17772
17776
|
return;
|
17773
17777
|
videoRef.current.style.objectFit = 'contain';
|
17774
|
-
if (
|
17778
|
+
if (videoCover || !canvasRef || !canvasRef.current || isBgColor)
|
17775
17779
|
return;
|
17776
17780
|
const setFrameImg = () => {
|
17777
17781
|
const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
|
@@ -17887,7 +17891,7 @@ Made in Italy` })));
|
|
17887
17891
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
17888
17892
|
if (!isActive)
|
17889
17893
|
return;
|
17890
|
-
const videoSrc =
|
17894
|
+
const videoSrc = videoUrl;
|
17891
17895
|
if (!videoSrc)
|
17892
17896
|
return;
|
17893
17897
|
const videoPlayerWrapperNode = document.querySelector(`#${videoId}`);
|
@@ -17991,8 +17995,7 @@ Made in Italy` })));
|
|
17991
17995
|
};
|
17992
17996
|
}, [handleClickVideo, isActive]);
|
17993
17997
|
const renderPoster = React.useMemo(() => {
|
17994
|
-
|
17995
|
-
if ((!((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) && !(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image)) || isLoadFinish) {
|
17998
|
+
if (!videoPoster || isLoadFinish) {
|
17996
17999
|
return null;
|
17997
18000
|
}
|
17998
18001
|
return (React.createElement("img", { style: {
|
@@ -18002,8 +18005,8 @@ Made in Italy` })));
|
|
18002
18005
|
width: '100%',
|
18003
18006
|
height: '100%',
|
18004
18007
|
objectFit: 'cover'
|
18005
|
-
}, src:
|
18006
|
-
}, [
|
18008
|
+
}, src: videoPoster, alt: 'placeholder image' }));
|
18009
|
+
}, [isLoadFinish]);
|
18007
18010
|
const renderLoading = React.useMemo(() => {
|
18008
18011
|
if (!waiting || !isLoadFinish)
|
18009
18012
|
return;
|
@@ -18023,8 +18026,7 @@ Made in Italy` })));
|
|
18023
18026
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
18024
18027
|
return;
|
18025
18028
|
const handleBeforeUnload = () => {
|
18026
|
-
|
18027
|
-
if (activeIndex === index && ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.url) && (videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) && !isPauseVideo) {
|
18029
|
+
if (activeIndex === index && videoUrl && (videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) && !isPauseVideo) {
|
18028
18030
|
handleClickVideo('pause')();
|
18029
18031
|
}
|
18030
18032
|
};
|