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/index.cjs
CHANGED
@@ -17684,6 +17684,7 @@ const mountVideoPlayerAtNode = (() => {
|
|
17684
17684
|
})();
|
17685
17685
|
|
17686
17686
|
const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activeIndex, videoPostConfig, videoPlayIcon, loopPlay, swiperRef }, ref) => {
|
17687
|
+
var _a, _b, _c, _d, _e;
|
17687
17688
|
const [isPauseVideo, setIsPauseVideo] = React.useState(false);
|
17688
17689
|
const { bffEventReport, sxpParameter, waterFallData, openHashtag, bffFbReport, isDiyH5 } = useSxpDataSource();
|
17689
17690
|
const videoStartTime = React.useRef(0);
|
@@ -17701,6 +17702,11 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
17701
17702
|
const isFirstPlayRef = React.useRef(true);
|
17702
17703
|
const loopPlayRef = React.useRef(loopPlay);
|
17703
17704
|
const scene = rec.video.scene;
|
17705
|
+
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);
|
17706
|
+
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;
|
17707
|
+
const videoPoster = (scene === null || scene === void 0 ? void 0 : scene.mediaUrl)
|
17708
|
+
? (_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
|
17709
|
+
: (_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;
|
17704
17710
|
React.useImperativeHandle(ref, () => {
|
17705
17711
|
return {
|
17706
17712
|
setLoopPlay(v) {
|
@@ -17721,8 +17727,7 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
17721
17727
|
: 'translateY(-50%)';
|
17722
17728
|
}, [videoPostConfig]);
|
17723
17729
|
const blurBgSrc = React.useMemo(() => {
|
17724
|
-
|
17725
|
-
return ((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || firstFrameSrc;
|
17730
|
+
return videoCover || firstFrameSrc;
|
17726
17731
|
}, [firstFrameSrc, rec]);
|
17727
17732
|
const blurStyle = React.useMemo(() => {
|
17728
17733
|
return blur
|
@@ -17757,28 +17762,27 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
17757
17762
|
setIsLoadFinish(true);
|
17758
17763
|
}, []);
|
17759
17764
|
const handleStartPlay = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
|
17760
|
-
var
|
17765
|
+
var _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
|
17761
17766
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
17762
17767
|
return;
|
17763
17768
|
setIsPauseVideo(false);
|
17764
17769
|
const item = data[index];
|
17765
|
-
if (item && ((
|
17766
|
-
videoStartTime.current = ((
|
17767
|
-
const videoDuration = ((
|
17768
|
-
const videoCurrentTime = ((
|
17770
|
+
if (item && ((_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.duration)) {
|
17771
|
+
videoStartTime.current = ((_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.currentTime) || 0;
|
17772
|
+
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);
|
17773
|
+
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);
|
17769
17774
|
const playType = (isFirstPlayRef === null || isFirstPlayRef === void 0 ? void 0 : isFirstPlayRef.current) ? '0' : '1';
|
17770
17775
|
bffEventReport === null || bffEventReport === void 0 ? void 0 : bffEventReport({
|
17771
|
-
eventInfo: Object.assign({ eventSubject: 'playVideo', eventDescription: 'User played the video', contentId: (
|
17776
|
+
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) + '' }))
|
17772
17777
|
});
|
17773
17778
|
isFirstPlayRef.current = false;
|
17774
17779
|
}
|
17775
17780
|
}), [bffEventReport, data, index, isFirstPlayRef, videoRef === null || videoRef === void 0 ? void 0 : videoRef.current]);
|
17776
17781
|
const handLoadeddata = React.useCallback(() => {
|
17777
|
-
var _a;
|
17778
17782
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || firstFrameSrc || !blur)
|
17779
17783
|
return;
|
17780
17784
|
videoRef.current.style.objectFit = 'contain';
|
17781
|
-
if (
|
17785
|
+
if (videoCover || !canvasRef || !canvasRef.current || isBgColor)
|
17782
17786
|
return;
|
17783
17787
|
const setFrameImg = () => {
|
17784
17788
|
const canvas = canvasRef === null || canvasRef === void 0 ? void 0 : canvasRef.current;
|
@@ -17894,7 +17898,7 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
17894
17898
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
17895
17899
|
if (!isActive)
|
17896
17900
|
return;
|
17897
|
-
const videoSrc =
|
17901
|
+
const videoSrc = videoUrl;
|
17898
17902
|
if (!videoSrc)
|
17899
17903
|
return;
|
17900
17904
|
const videoPlayerWrapperNode = document.querySelector(`#${videoId}`);
|
@@ -17998,8 +18002,7 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
17998
18002
|
};
|
17999
18003
|
}, [handleClickVideo, isActive]);
|
18000
18004
|
const renderPoster = React.useMemo(() => {
|
18001
|
-
|
18002
|
-
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) {
|
18005
|
+
if (!videoPoster || isLoadFinish) {
|
18003
18006
|
return null;
|
18004
18007
|
}
|
18005
18008
|
return (React.createElement("img", { style: {
|
@@ -18009,8 +18012,8 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
18009
18012
|
width: '100%',
|
18010
18013
|
height: '100%',
|
18011
18014
|
objectFit: 'cover'
|
18012
|
-
}, src:
|
18013
|
-
}, [
|
18015
|
+
}, src: videoPoster, alt: 'placeholder image' }));
|
18016
|
+
}, [isLoadFinish]);
|
18014
18017
|
const renderLoading = React.useMemo(() => {
|
18015
18018
|
if (!waiting || !isLoadFinish)
|
18016
18019
|
return;
|
@@ -18030,8 +18033,7 @@ const VideoWidget$4 = React.forwardRef(({ rec, index, height, data, muted, activ
|
|
18030
18033
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
18031
18034
|
return;
|
18032
18035
|
const handleBeforeUnload = () => {
|
18033
|
-
|
18034
|
-
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) {
|
18036
|
+
if (activeIndex === index && videoUrl && (videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) && !isPauseVideo) {
|
18035
18037
|
handleClickVideo('pause')();
|
18036
18038
|
}
|
18037
18039
|
};
|