pb-sxp-ui 1.15.13-alpha.4 → 1.15.13-alpha.5

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.
Files changed (21) hide show
  1. package/dist/index.cjs +104 -49
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +104 -49
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.min.cjs +5 -5
  6. package/dist/index.min.cjs.map +1 -1
  7. package/dist/index.min.js +5 -5
  8. package/dist/index.min.js.map +1 -1
  9. package/dist/pb-ui.js +104 -49
  10. package/dist/pb-ui.js.map +1 -1
  11. package/dist/pb-ui.min.js +5 -5
  12. package/dist/pb-ui.min.js.map +1 -1
  13. package/es/core/components/DiyStoryPreview/VideoWidget.d.ts +9 -3
  14. package/es/core/components/DiyStoryPreview/VideoWidget.js +63 -21
  15. package/es/core/components/DiyStoryPreview/index.d.ts +19 -2
  16. package/es/core/components/DiyStoryPreview/index.js +39 -13
  17. package/lib/core/components/DiyStoryPreview/VideoWidget.d.ts +9 -3
  18. package/lib/core/components/DiyStoryPreview/VideoWidget.js +62 -20
  19. package/lib/core/components/DiyStoryPreview/index.d.ts +19 -2
  20. package/lib/core/components/DiyStoryPreview/index.js +38 -12
  21. package/package.json +1 -1
package/es/core/components/DiyStoryPreview/VideoWidget.d.ts CHANGED
@@ -11,9 +11,15 @@ interface IVideoWidgetProps {
11
11
  activeIndex?: number;
12
12
  videoPostConfig?: postConfigType;
13
13
  swiperRef?: any;
14
- loopPlay?: boolean;
15
14
  videoPlayIcon?: string;
16
- isPlay?: boolean;
15
+ handleUpdateTimeline?: (index: number, v: number) => void;
16
+ loopPlay: any;
17
17
  }
18
- declare const _default: React.NamedExoticComponent<IVideoWidgetProps>;
18
+ export interface IVideoWidgetRef {
19
+ play: () => void;
20
+ pause: () => void;
21
+ setLoopPlay: (v: boolean) => void;
22
+ isPlaying: () => boolean;
23
+ }
24
+ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<IVideoWidgetProps & React.RefAttributes<IVideoWidgetRef>>>;
19
25
  export default _default;
package/es/core/components/DiyStoryPreview/VideoWidget.js CHANGED
@@ -1,10 +1,10 @@
1
- import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
1
+ import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
2
2
  import { useSwiperSlide } from 'swiper/react';
3
3
  import { useIconLink } from '../SxpPageRender/useIconLink';
4
4
  import { mountVideoPlayerAtNode } from '../SxpPageRender/VideoWidget/VideoPlayer';
5
5
  import FormatImage from '../SxpPageRender/FormatImage';
6
6
  import { useSxpDataSource } from '../../../core/hooks';
7
- const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, width, swiperRef, loopPlay, videoPlayIcon, isPlay }) => {
7
+ const VideoWidget = forwardRef(({ rec, index, height, data, muted, activeIndex, videoPostConfig, width, swiperRef, videoPlayIcon, handleUpdateTimeline, loopPlay }, ref) => {
8
8
  const { isActive } = useSwiperSlide();
9
9
  const [isPauseVideo, setIsPauseVideo] = useState(false);
10
10
  const videoRef = useRef(null);
@@ -16,6 +16,38 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
16
16
  const [firstFrameSrc, setFirstFrameSrc] = useState('');
17
17
  const videoId = `pb-cache-video-${index}`;
18
18
  const hlsRef = useRef(null);
19
+ const loopPlayRef = useRef(loopPlay);
20
+ useEffect(() => {
21
+ loopPlayRef.current = loopPlay;
22
+ }, [loopPlay]);
23
+ useImperativeHandle(ref, () => {
24
+ return {
25
+ play() {
26
+ var _a;
27
+ if (!videoRef.current)
28
+ return;
29
+ handleTimeUpload();
30
+ (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
31
+ setIsPauseVideo(false);
32
+ },
33
+ pause() {
34
+ var _a;
35
+ if (!videoRef.current)
36
+ return;
37
+ (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
38
+ setIsPauseVideo(true);
39
+ },
40
+ setLoopPlay(v) {
41
+ if (!videoRef.current)
42
+ return;
43
+ loopPlayRef.current = v;
44
+ },
45
+ isPlaying() {
46
+ var _a;
47
+ return !((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused);
48
+ }
49
+ };
50
+ });
19
51
  useEffect(() => {
20
52
  if (!videoRef.current)
21
53
  return;
@@ -45,8 +77,8 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
45
77
  setIsLoadFinish(true);
46
78
  }, []);
47
79
  const handleClickVideo = useCallback((type) => () => {
48
- var _a, _b, _c, _d, _e;
49
- if (!isLoadFinish)
80
+ var _a, _b, _c, _d, _e, _f;
81
+ if (!isActive || !(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
50
82
  return;
51
83
  const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
52
84
  switch (type) {
@@ -64,10 +96,13 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
64
96
  break;
65
97
  default:
66
98
  if (isPause) {
67
- (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
99
+ if (((_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.currentTime) >= (rec === null || rec === void 0 ? void 0 : rec.endTime)) {
100
+ videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
101
+ }
102
+ (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
68
103
  }
69
104
  else {
70
- (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
105
+ (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.pause();
71
106
  }
72
107
  setIsPauseVideo(!isPause);
73
108
  break;
@@ -105,27 +140,34 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
105
140
  setFirstFrameSrc(canvas.toDataURL());
106
141
  }, []);
107
142
  const handleTimeUpload = useCallback(() => {
108
- var _a, _b, _c;
143
+ var _a;
109
144
  if (!videoRef.current)
110
145
  return;
111
- if (((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) >= ((_b = rec === null || rec === void 0 ? void 0 : rec.endTime) !== null && _b !== void 0 ? _b : 0)) {
112
- (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
113
- }
146
+ const localTime = ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) - (rec === null || rec === void 0 ? void 0 : rec.startTime);
147
+ handleUpdateTimeline === null || handleUpdateTimeline === void 0 ? void 0 : handleUpdateTimeline(index, localTime);
148
+ setTimeout(() => {
149
+ var _a, _b;
150
+ if (((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) >= ((_b = rec === null || rec === void 0 ? void 0 : rec.endTime) !== null && _b !== void 0 ? _b : 0)) {
151
+ slideSwiper();
152
+ }
153
+ });
114
154
  }, []);
115
- const handlePause = () => {
116
- var _a, _b, _c, _d, _e, _f;
117
- if (!videoRef.current || !isActive)
118
- return;
119
- if (!loopPlay)
155
+ const slideSwiper = () => {
156
+ var _a, _b, _c, _d, _e, _f, _g;
157
+ (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
158
+ if (!loopPlayRef.current)
120
159
  return;
121
160
  if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
122
- (_b = (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.slideTo(0);
161
+ (_c = (_b = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _b === void 0 ? void 0 : _b.swiper) === null || _c === void 0 ? void 0 : _c.slideTo(0);
123
162
  }
124
163
  else {
125
- const i = (_d = (_c = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _c === void 0 ? void 0 : _c.swiper) === null || _d === void 0 ? void 0 : _d.activeIndex;
126
- (_f = (_e = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _e === void 0 ? void 0 : _e.swiper) === null || _f === void 0 ? void 0 : _f.slideTo(i + 1);
164
+ const i = (_e = (_d = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _d === void 0 ? void 0 : _d.swiper) === null || _e === void 0 ? void 0 : _e.activeIndex;
165
+ (_g = (_f = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _f === void 0 ? void 0 : _f.swiper) === null || _g === void 0 ? void 0 : _g.slideTo(i + 1);
127
166
  }
128
167
  };
168
+ const handlePause = () => {
169
+ setIsPauseVideo(true);
170
+ };
129
171
  useEffect(() => {
130
172
  var _a, _b, _c;
131
173
  if (!isActive)
@@ -167,7 +209,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
167
209
  (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('pause', handlePause);
168
210
  (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('timeupdate', handleTimeUpload);
169
211
  };
170
- }, [handleLoadedMetadata, handlePlaying, rec, handLoadeddata, isActive, loopPlay]);
212
+ }, [isActive]);
171
213
  const renderPoster = useMemo(() => {
172
214
  if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
173
215
  return null;
@@ -190,9 +232,9 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
190
232
  width: '100%',
191
233
  height,
192
234
  overflow: 'hidden'
193
- } },
235
+ }, onClick: handleClickVideo() },
194
236
  React.createElement("div", { className: 'n-full-screen', id: videoId, style: { width: '100%', height: '100%' } }),
195
237
  renderPoster,
196
238
  isPauseVideo && React.createElement(FormatImage, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })));
197
- };
239
+ });
198
240
  export default memo(VideoWidget);
package/es/core/components/DiyStoryPreview/index.d.ts CHANGED
@@ -25,7 +25,24 @@ export type DiyStoryPreviewType = ISxpPageRenderProps & {
25
25
  onActiveChange?: (v: number) => void;
26
26
  loopPlay?: boolean;
27
27
  pointerEvents?: any;
28
- isPlay?: boolean;
28
+ onUpdateTimeLine: (index: number, curTime: number) => void;
29
+ disabledListener?: boolean;
29
30
  };
30
- declare const _default: React.NamedExoticComponent<DiyStoryPreviewType>;
31
+ export interface IDiyStoryPreviewRef {
32
+ play: () => void;
33
+ pause: () => void;
34
+ slideTo: (n: number) => void;
35
+ isPlaying: () => boolean;
36
+ setLoopPlay: (v: boolean) => void;
37
+ }
38
+ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<ISxpPageRenderProps & {
39
+ appDomain?: string | undefined;
40
+ scenes?: ScenesType | undefined;
41
+ activeIndex?: number | undefined;
42
+ onActiveChange?: ((v: number) => void) | undefined;
43
+ loopPlay?: boolean | undefined;
44
+ pointerEvents?: any;
45
+ onUpdateTimeLine: (index: number, curTime: number) => void;
46
+ disabledListener?: boolean | undefined;
47
+ } & React.RefAttributes<IDiyStoryPreviewRef>>>;
31
48
  export default _default;
package/es/core/components/DiyStoryPreview/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
1
+ import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
2
2
  import { Swiper, SwiperSlide } from 'swiper/react';
3
3
  import { cloneDeep, debounce } from 'lodash';
4
4
  import RenderCard from '../SxpPageRender/RenderCard';
@@ -194,9 +194,10 @@ Object.values(_materials_).forEach((v) => {
194
194
  });
195
195
  const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
196
196
  const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
197
- const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [], scenes, onActiveChange, activeIndex, loopPlay = false, pointerEvents = 'none', isPlay }) => {
198
- const [loopPlaySwiper, setLooPlaySwiper] = useState(loopPlay);
197
+ const DiyStoryPreview = forwardRef(({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [], scenes, onActiveChange, activeIndex, loopPlay = false, pointerEvents = 'none', onUpdateTimeLine, disabledListener }, ref) => {
198
+ const videoWidgetRef = useRef(null);
199
199
  const swiperRef = useRef(null);
200
+ const [curIndex, setCurIndex] = useState(0);
200
201
  const height = useMemo(() => {
201
202
  let minusHeight = 0;
202
203
  if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
@@ -207,6 +208,32 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
207
208
  }
208
209
  return containerHeight - minusHeight;
209
210
  }, [globalConfig, containerHeight, tagList]);
211
+ useImperativeHandle(ref, () => {
212
+ return {
213
+ play() {
214
+ var _a;
215
+ (_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.play();
216
+ },
217
+ pause() {
218
+ var _a;
219
+ (_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.pause();
220
+ },
221
+ slideTo(n) {
222
+ var _a, _b;
223
+ if (!(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current))
224
+ return;
225
+ (_b = (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.slideTo(n);
226
+ },
227
+ isPlaying() {
228
+ var _a, _b;
229
+ return (_b = (_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.isPlaying()) !== null && _b !== void 0 ? _b : false;
230
+ },
231
+ setLoopPlay(v) {
232
+ var _a;
233
+ (_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(v);
234
+ }
235
+ };
236
+ });
210
237
  const isVideoUrl = (url) => {
211
238
  if (url && url !== '' && typeof url === 'string') {
212
239
  const imageExtensions = ['.mp4', '.m3u8'];
@@ -220,10 +247,10 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
220
247
  const renderContent = (rec, index) => {
221
248
  const isVideo = isVideoUrl(rec === null || rec === void 0 ? void 0 : rec.mediaUrl);
222
249
  if (isVideo) {
223
- return (React.createElement(VideoWidget, { isPlay: isPlay, rec: rec, index: index, muted: true, width: containerWidth, data: scenes !== null && scenes !== void 0 ? scenes : [], height: containerHeight, activeIndex: index, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoPlayIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon, swiperRef: swiperRef, loopPlay: loopPlaySwiper }));
250
+ return (React.createElement(VideoWidget, Object.assign({ key: index }, (curIndex === index && { ref: videoWidgetRef }), { rec: rec, index: index, muted: true, width: containerWidth, data: scenes !== null && scenes !== void 0 ? scenes : [], height: containerHeight, activeIndex: index, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoPlayIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon, swiperRef: swiperRef, loopPlay: loopPlay, handleUpdateTimeline: onUpdateTimeLine })));
224
251
  }
225
252
  else {
226
- return (React.createElement(PictureGroup, { key: rec.itemId, imgUrls: [rec === null || rec === void 0 ? void 0 : rec.mediaUrl], width: containerWidth, height: containerHeight, rec: rec, index: index, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost, data: scenes !== null && scenes !== void 0 ? scenes : [], swiperRef: swiperRef, loopPlay: loopPlaySwiper }));
253
+ return (React.createElement(PictureGroup, { key: rec.itemId, imgUrls: [rec === null || rec === void 0 ? void 0 : rec.mediaUrl], width: containerWidth, height: containerHeight, rec: rec, index: index, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost, data: scenes !== null && scenes !== void 0 ? scenes : [], swiperRef: swiperRef }));
227
254
  }
228
255
  };
229
256
  const renderLogo = useMemo(() => {
@@ -355,15 +382,13 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
355
382
  return;
356
383
  (_b = (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.slideTo(activeIndex);
357
384
  }, [activeIndex]);
358
- useEffect(() => {
359
- if (!(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current))
360
- return;
361
- setLooPlaySwiper(loopPlay);
362
- }, [loopPlay]);
363
385
  const handleSessionExpire = useCallback(debounce(() => {
364
- setLooPlaySwiper(false);
386
+ var _a;
387
+ (_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
365
388
  }, 1000), []);
366
389
  useEffect(() => {
390
+ if (disabledListener)
391
+ return;
367
392
  const events = ['touchstart', 'touchcancel'];
368
393
  events.forEach((event) => {
369
394
  window.addEventListener(event, handleSessionExpire);
@@ -373,7 +398,7 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
373
398
  window.removeEventListener(event, handleSessionExpire);
374
399
  });
375
400
  };
376
- }, [handleSessionExpire]);
401
+ }, [handleSessionExpire, disabledListener]);
377
402
  return (React.createElement("div", { id: 'sxp-render', style: { height: containerHeight, position: 'relative', pointerEvents } },
378
403
  React.createElement(Swiper, { ref: swiperRef, allowTouchMove: pointerEvents !== 'none', onSlideChange: () => {
379
404
  swiperRef.current.swiper.allowTouchMove = false;
@@ -381,9 +406,10 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
381
406
  swiperRef.current.swiper.allowTouchMove = true;
382
407
  }, 500);
383
408
  }, onActiveIndexChange: (swiper) => {
409
+ setCurIndex(swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex);
384
410
  onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(swiper.activeIndex);
385
411
  }, direction: 'vertical', style: { overflow: 'hidden', height: containerHeight }, height: containerHeight }, scenes === null || scenes === void 0 ? void 0 : scenes.map((rec, index) => {
386
412
  return renderView(rec, index);
387
413
  }))));
388
- };
414
+ });
389
415
  export default memo(DiyStoryPreview);
package/lib/core/components/DiyStoryPreview/VideoWidget.d.ts CHANGED
@@ -11,9 +11,15 @@ interface IVideoWidgetProps {
11
11
  activeIndex?: number;
12
12
  videoPostConfig?: postConfigType;
13
13
  swiperRef?: any;
14
- loopPlay?: boolean;
15
14
  videoPlayIcon?: string;
16
- isPlay?: boolean;
15
+ handleUpdateTimeline?: (index: number, v: number) => void;
16
+ loopPlay: any;
17
17
  }
18
- declare const _default: React.NamedExoticComponent<IVideoWidgetProps>;
18
+ export interface IVideoWidgetRef {
19
+ play: () => void;
20
+ pause: () => void;
21
+ setLoopPlay: (v: boolean) => void;
22
+ isPlaying: () => boolean;
23
+ }
24
+ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<IVideoWidgetProps & React.RefAttributes<IVideoWidgetRef>>>;
19
25
  export default _default;
package/lib/core/components/DiyStoryPreview/VideoWidget.js CHANGED
@@ -7,7 +7,7 @@ const useIconLink_1 = require("../SxpPageRender/useIconLink");
7
7
  const VideoPlayer_1 = require("../SxpPageRender/VideoWidget/VideoPlayer");
8
8
  const FormatImage_1 = tslib_1.__importDefault(require("../SxpPageRender/FormatImage"));
9
9
  const hooks_1 = require("../../../core/hooks");
10
- const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, width, swiperRef, loopPlay, videoPlayIcon, isPlay }) => {
10
+ const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted, activeIndex, videoPostConfig, width, swiperRef, videoPlayIcon, handleUpdateTimeline, loopPlay }, ref) => {
11
11
  const { isActive } = (0, react_2.useSwiperSlide)();
12
12
  const [isPauseVideo, setIsPauseVideo] = (0, react_1.useState)(false);
13
13
  const videoRef = (0, react_1.useRef)(null);
@@ -19,6 +19,38 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
19
19
  const [firstFrameSrc, setFirstFrameSrc] = (0, react_1.useState)('');
20
20
  const videoId = `pb-cache-video-${index}`;
21
21
  const hlsRef = (0, react_1.useRef)(null);
22
+ const loopPlayRef = (0, react_1.useRef)(loopPlay);
23
+ (0, react_1.useEffect)(() => {
24
+ loopPlayRef.current = loopPlay;
25
+ }, [loopPlay]);
26
+ (0, react_1.useImperativeHandle)(ref, () => {
27
+ return {
28
+ play() {
29
+ var _a;
30
+ if (!videoRef.current)
31
+ return;
32
+ handleTimeUpload();
33
+ (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
34
+ setIsPauseVideo(false);
35
+ },
36
+ pause() {
37
+ var _a;
38
+ if (!videoRef.current)
39
+ return;
40
+ (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
41
+ setIsPauseVideo(true);
42
+ },
43
+ setLoopPlay(v) {
44
+ if (!videoRef.current)
45
+ return;
46
+ loopPlayRef.current = v;
47
+ },
48
+ isPlaying() {
49
+ var _a;
50
+ return !((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused);
51
+ }
52
+ };
53
+ });
22
54
  (0, react_1.useEffect)(() => {
23
55
  if (!videoRef.current)
24
56
  return;
@@ -48,8 +80,8 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
48
80
  setIsLoadFinish(true);
49
81
  }, []);
50
82
  const handleClickVideo = (0, react_1.useCallback)((type) => () => {
51
- var _a, _b, _c, _d, _e;
52
- if (!isLoadFinish)
83
+ var _a, _b, _c, _d, _e, _f;
84
+ if (!isActive || !(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
53
85
  return;
54
86
  const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
55
87
  switch (type) {
@@ -67,10 +99,13 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
67
99
  break;
68
100
  default:
69
101
  if (isPause) {
70
- (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.play();
102
+ if (((_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.currentTime) >= (rec === null || rec === void 0 ? void 0 : rec.endTime)) {
103
+ videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
104
+ }
105
+ (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
71
106
  }
72
107
  else {
73
- (_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.pause();
108
+ (_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.pause();
74
109
  }
75
110
  setIsPauseVideo(!isPause);
76
111
  break;
@@ -108,27 +143,34 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
108
143
  setFirstFrameSrc(canvas.toDataURL());
109
144
  }, []);
110
145
  const handleTimeUpload = (0, react_1.useCallback)(() => {
111
- var _a, _b, _c;
146
+ var _a;
112
147
  if (!videoRef.current)
113
148
  return;
114
- if (((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) >= ((_b = rec === null || rec === void 0 ? void 0 : rec.endTime) !== null && _b !== void 0 ? _b : 0)) {
115
- (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
116
- }
149
+ const localTime = ((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) - (rec === null || rec === void 0 ? void 0 : rec.startTime);
150
+ handleUpdateTimeline === null || handleUpdateTimeline === void 0 ? void 0 : handleUpdateTimeline(index, localTime);
151
+ setTimeout(() => {
152
+ var _a, _b;
153
+ if (((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) >= ((_b = rec === null || rec === void 0 ? void 0 : rec.endTime) !== null && _b !== void 0 ? _b : 0)) {
154
+ slideSwiper();
155
+ }
156
+ });
117
157
  }, []);
118
- const handlePause = () => {
119
- var _a, _b, _c, _d, _e, _f;
120
- if (!videoRef.current || !isActive)
121
- return;
122
- if (!loopPlay)
158
+ const slideSwiper = () => {
159
+ var _a, _b, _c, _d, _e, _f, _g;
160
+ (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
161
+ if (!loopPlayRef.current)
123
162
  return;
124
163
  if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
125
- (_b = (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.slideTo(0);
164
+ (_c = (_b = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _b === void 0 ? void 0 : _b.swiper) === null || _c === void 0 ? void 0 : _c.slideTo(0);
126
165
  }
127
166
  else {
128
- const i = (_d = (_c = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _c === void 0 ? void 0 : _c.swiper) === null || _d === void 0 ? void 0 : _d.activeIndex;
129
- (_f = (_e = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _e === void 0 ? void 0 : _e.swiper) === null || _f === void 0 ? void 0 : _f.slideTo(i + 1);
167
+ const i = (_e = (_d = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _d === void 0 ? void 0 : _d.swiper) === null || _e === void 0 ? void 0 : _e.activeIndex;
168
+ (_g = (_f = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _f === void 0 ? void 0 : _f.swiper) === null || _g === void 0 ? void 0 : _g.slideTo(i + 1);
130
169
  }
131
170
  };
171
+ const handlePause = () => {
172
+ setIsPauseVideo(true);
173
+ };
132
174
  (0, react_1.useEffect)(() => {
133
175
  var _a, _b, _c;
134
176
  if (!isActive)
@@ -170,7 +212,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
170
212
  (_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('pause', handlePause);
171
213
  (_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('timeupdate', handleTimeUpload);
172
214
  };
173
- }, [handleLoadedMetadata, handlePlaying, rec, handLoadeddata, isActive, loopPlay]);
215
+ }, [isActive]);
174
216
  const renderPoster = (0, react_1.useMemo)(() => {
175
217
  if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
176
218
  return null;
@@ -193,9 +235,9 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
193
235
  width: '100%',
194
236
  height,
195
237
  overflow: 'hidden'
196
- } },
238
+ }, onClick: handleClickVideo() },
197
239
  react_1.default.createElement("div", { className: 'n-full-screen', id: videoId, style: { width: '100%', height: '100%' } }),
198
240
  renderPoster,
199
241
  isPauseVideo && react_1.default.createElement(FormatImage_1.default, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })));
200
- };
242
+ });
201
243
  exports.default = (0, react_1.memo)(VideoWidget);
package/lib/core/components/DiyStoryPreview/index.d.ts CHANGED
@@ -25,7 +25,24 @@ export type DiyStoryPreviewType = ISxpPageRenderProps & {
25
25
  onActiveChange?: (v: number) => void;
26
26
  loopPlay?: boolean;
27
27
  pointerEvents?: any;
28
- isPlay?: boolean;
28
+ onUpdateTimeLine: (index: number, curTime: number) => void;
29
+ disabledListener?: boolean;
29
30
  };
30
- declare const _default: React.NamedExoticComponent<DiyStoryPreviewType>;
31
+ export interface IDiyStoryPreviewRef {
32
+ play: () => void;
33
+ pause: () => void;
34
+ slideTo: (n: number) => void;
35
+ isPlaying: () => boolean;
36
+ setLoopPlay: (v: boolean) => void;
37
+ }
38
+ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<ISxpPageRenderProps & {
39
+ appDomain?: string | undefined;
40
+ scenes?: ScenesType | undefined;
41
+ activeIndex?: number | undefined;
42
+ onActiveChange?: ((v: number) => void) | undefined;
43
+ loopPlay?: boolean | undefined;
44
+ pointerEvents?: any;
45
+ onUpdateTimeLine: (index: number, curTime: number) => void;
46
+ disabledListener?: boolean | undefined;
47
+ } & React.RefAttributes<IDiyStoryPreviewRef>>>;
31
48
  export default _default;
package/lib/core/components/DiyStoryPreview/index.js CHANGED
@@ -197,9 +197,10 @@ Object.values(_materials_).forEach((v) => {
197
197
  });
198
198
  const defaultUnLikeIconPath = '/pb_static/f71266d2c64446c5ae6a5a7f5489cc0a.png';
199
199
  const defaultLikeIconPath = '/pb_static/f07900fe3f0f4ae188ea1611d4801a44.png';
200
- const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [], scenes, onActiveChange, activeIndex, loopPlay = false, pointerEvents = 'none', isPlay }) => {
201
- const [loopPlaySwiper, setLooPlaySwiper] = (0, react_1.useState)(loopPlay);
200
+ const DiyStoryPreview = (0, react_1.forwardRef)(({ data = [], globalConfig, tipText, nudge, tempMap, descStyle, hashTagStyle, containerHeight = 664, containerWidth = 375, appDomain, tagList = [], scenes, onActiveChange, activeIndex, loopPlay = false, pointerEvents = 'none', onUpdateTimeLine, disabledListener }, ref) => {
201
+ const videoWidgetRef = (0, react_1.useRef)(null);
202
202
  const swiperRef = (0, react_1.useRef)(null);
203
+ const [curIndex, setCurIndex] = (0, react_1.useState)(0);
203
204
  const height = (0, react_1.useMemo)(() => {
204
205
  let minusHeight = 0;
205
206
  if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.logoUrl) && (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowLogo)) {
@@ -210,6 +211,32 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
210
211
  }
211
212
  return containerHeight - minusHeight;
212
213
  }, [globalConfig, containerHeight, tagList]);
214
+ (0, react_1.useImperativeHandle)(ref, () => {
215
+ return {
216
+ play() {
217
+ var _a;
218
+ (_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.play();
219
+ },
220
+ pause() {
221
+ var _a;
222
+ (_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.pause();
223
+ },
224
+ slideTo(n) {
225
+ var _a, _b;
226
+ if (!(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current))
227
+ return;
228
+ (_b = (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.slideTo(n);
229
+ },
230
+ isPlaying() {
231
+ var _a, _b;
232
+ return (_b = (_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.isPlaying()) !== null && _b !== void 0 ? _b : false;
233
+ },
234
+ setLoopPlay(v) {
235
+ var _a;
236
+ (_a = videoWidgetRef === null || videoWidgetRef === void 0 ? void 0 : videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(v);
237
+ }
238
+ };
239
+ });
213
240
  const isVideoUrl = (url) => {
214
241
  if (url && url !== '' && typeof url === 'string') {
215
242
  const imageExtensions = ['.mp4', '.m3u8'];
@@ -223,10 +250,10 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
223
250
  const renderContent = (rec, index) => {
224
251
  const isVideo = isVideoUrl(rec === null || rec === void 0 ? void 0 : rec.mediaUrl);
225
252
  if (isVideo) {
226
- return (react_1.default.createElement(VideoWidget_1.default, { isPlay: isPlay, rec: rec, index: index, muted: true, width: containerWidth, data: scenes !== null && scenes !== void 0 ? scenes : [], height: containerHeight, activeIndex: index, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoPlayIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon, swiperRef: swiperRef, loopPlay: loopPlaySwiper }));
253
+ return (react_1.default.createElement(VideoWidget_1.default, Object.assign({ key: index }, (curIndex === index && { ref: videoWidgetRef }), { rec: rec, index: index, muted: true, width: containerWidth, data: scenes !== null && scenes !== void 0 ? scenes : [], height: containerHeight, activeIndex: index, videoPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPost, videoPlayIcon: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.videoPlayIcon, swiperRef: swiperRef, loopPlay: loopPlay, handleUpdateTimeline: onUpdateTimeLine })));
227
254
  }
228
255
  else {
229
- return (react_1.default.createElement(PictureGroup_1.default, { key: rec.itemId, imgUrls: [rec === null || rec === void 0 ? void 0 : rec.mediaUrl], width: containerWidth, height: containerHeight, rec: rec, index: index, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost, data: scenes !== null && scenes !== void 0 ? scenes : [], swiperRef: swiperRef, loopPlay: loopPlaySwiper }));
256
+ return (react_1.default.createElement(PictureGroup_1.default, { key: rec.itemId, imgUrls: [rec === null || rec === void 0 ? void 0 : rec.mediaUrl], width: containerWidth, height: containerHeight, rec: rec, index: index, imgUrlsPostConfig: globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.imgUrlsPost, data: scenes !== null && scenes !== void 0 ? scenes : [], swiperRef: swiperRef }));
230
257
  }
231
258
  };
232
259
  const renderLogo = (0, react_1.useMemo)(() => {
@@ -358,15 +385,13 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
358
385
  return;
359
386
  (_b = (_a = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _a === void 0 ? void 0 : _a.swiper) === null || _b === void 0 ? void 0 : _b.slideTo(activeIndex);
360
387
  }, [activeIndex]);
361
- (0, react_1.useEffect)(() => {
362
- if (!(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current))
363
- return;
364
- setLooPlaySwiper(loopPlay);
365
- }, [loopPlay]);
366
388
  const handleSessionExpire = (0, react_1.useCallback)((0, lodash_1.debounce)(() => {
367
- setLooPlaySwiper(false);
389
+ var _a;
390
+ (_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
368
391
  }, 1000), []);
369
392
  (0, react_1.useEffect)(() => {
393
+ if (disabledListener)
394
+ return;
370
395
  const events = ['touchstart', 'touchcancel'];
371
396
  events.forEach((event) => {
372
397
  window.addEventListener(event, handleSessionExpire);
@@ -376,7 +401,7 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
376
401
  window.removeEventListener(event, handleSessionExpire);
377
402
  });
378
403
  };
379
- }, [handleSessionExpire]);
404
+ }, [handleSessionExpire, disabledListener]);
380
405
  return (react_1.default.createElement("div", { id: 'sxp-render', style: { height: containerHeight, position: 'relative', pointerEvents } },
381
406
  react_1.default.createElement(react_2.Swiper, { ref: swiperRef, allowTouchMove: pointerEvents !== 'none', onSlideChange: () => {
382
407
  swiperRef.current.swiper.allowTouchMove = false;
@@ -384,9 +409,10 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
384
409
  swiperRef.current.swiper.allowTouchMove = true;
385
410
  }, 500);
386
411
  }, onActiveIndexChange: (swiper) => {
412
+ setCurIndex(swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex);
387
413
  onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(swiper.activeIndex);
388
414
  }, direction: 'vertical', style: { overflow: 'hidden', height: containerHeight }, height: containerHeight }, scenes === null || scenes === void 0 ? void 0 : scenes.map((rec, index) => {
389
415
  return renderView(rec, index);
390
416
  }))));
391
- };
417
+ });
392
418
  exports.default = (0, react_1.memo)(DiyStoryPreview);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pb-sxp-ui",
3
- "version": "1.15.13-alpha.4",
3
+ "version": "1.15.13-alpha.5",
4
4
  "description": "React enterprise-class UI components",
5
5
  "main": "dist/index.cjs",
6
6
  "module": "dist/index.js",