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 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
- var _a;
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 _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
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 && ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration)) {
17766
- videoStartTime.current = ((_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.currentTime) || 0;
17767
- const videoDuration = ((_d = (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 0).toFixed(2);
17768
- const videoCurrentTime = ((_f = (_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.currentTime) !== null && _f !== void 0 ? _f : 0).toFixed(2);
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: (_h = (_g = item === null || item === void 0 ? void 0 : item.video) === null || _g === void 0 ? void 0 : _g.itemId) !== null && _h !== void 0 ? _h : '', contentName: (_k = (_j = item === null || item === void 0 ? void 0 : item.video) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : '', playType, startTime: videoCurrentTime, videoDuration, contentTags: JSON.stringify((_m = (_l = item === null || item === void 0 ? void 0 : item.video) === null || _l === void 0 ? void 0 : _l.tags) !== null && _m !== void 0 ? _m : []), position: index + '', contentFormat: 'video', traceInfo: (_o = item === null || item === void 0 ? void 0 : item.video) === null || _o === void 0 ? void 0 : _o.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) + '' }))
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 (((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.cover) || !canvasRef || !canvasRef.current || isBgColor)
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 = rec === null || rec === void 0 ? void 0 : rec.video.url;
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
- var _a, _b;
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: ((_b = rec === null || rec === void 0 ? void 0 : rec.video) === null || _b === void 0 ? void 0 : _b.cover) || (sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image), alt: 'placeholder image' }));
18013
- }, [rec, isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
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
- var _a;
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
  };