pb-sxp-ui 1.15.13-alpha.3 → 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.
- package/dist/index.cjs +203 -112
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +203 -112
- package/dist/index.js.map +1 -1
- package/dist/index.min.cjs +6 -6
- package/dist/index.min.cjs.map +1 -1
- package/dist/index.min.js +6 -6
- package/dist/index.min.js.map +1 -1
- package/dist/pb-ui.js +203 -112
- package/dist/pb-ui.js.map +1 -1
- package/dist/pb-ui.min.js +6 -6
- package/dist/pb-ui.min.js.map +1 -1
- package/es/core/components/DiyStoryPreview/VideoWidget.d.ts +10 -2
- package/es/core/components/DiyStoryPreview/VideoWidget.js +68 -24
- package/es/core/components/DiyStoryPreview/index.d.ts +20 -1
- package/es/core/components/DiyStoryPreview/index.js +51 -20
- package/es/core/components/SxpPageCore/index.js +5 -5
- package/es/core/context/EditorContext.js +1 -1
- package/es/core/context/SxpDataSourceProvider.d.ts +1 -1
- package/es/core/context/SxpDataSourceProvider.js +21 -22
- package/lib/core/components/DiyStoryPreview/VideoWidget.d.ts +10 -2
- package/lib/core/components/DiyStoryPreview/VideoWidget.js +67 -23
- package/lib/core/components/DiyStoryPreview/index.d.ts +20 -1
- package/lib/core/components/DiyStoryPreview/index.js +49 -18
- package/lib/core/components/SxpPageCore/index.js +5 -5
- package/lib/core/context/EditorContext.js +1 -1
- package/lib/core/context/SxpDataSourceProvider.d.ts +1 -1
- package/lib/core/context/SxpDataSourceProvider.js +21 -22
- package/package.json +1 -1
@@ -11,7 +11,15 @@ interface IVideoWidgetProps {
|
|
11
11
|
activeIndex?: number;
|
12
12
|
videoPostConfig?: postConfigType;
|
13
13
|
swiperRef?: any;
|
14
|
-
|
14
|
+
videoPlayIcon?: string;
|
15
|
+
handleUpdateTimeline?: (index: number, v: number) => void;
|
16
|
+
loopPlay: any;
|
15
17
|
}
|
16
|
-
|
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>>>;
|
17
25
|
export default _default;
|
@@ -1,9 +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
|
+
import FormatImage from '../SxpPageRender/FormatImage';
|
5
6
|
import { useSxpDataSource } from '../../../core/hooks';
|
6
|
-
const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostConfig, width, swiperRef, loopPlay }) => {
|
7
|
+
const VideoWidget = forwardRef(({ rec, index, height, data, muted, activeIndex, videoPostConfig, width, swiperRef, videoPlayIcon, handleUpdateTimeline, loopPlay }, ref) => {
|
7
8
|
const { isActive } = useSwiperSlide();
|
8
9
|
const [isPauseVideo, setIsPauseVideo] = useState(false);
|
9
10
|
const videoRef = useRef(null);
|
@@ -15,6 +16,38 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
|
|
15
16
|
const [firstFrameSrc, setFirstFrameSrc] = useState('');
|
16
17
|
const videoId = `pb-cache-video-${index}`;
|
17
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
|
+
});
|
18
51
|
useEffect(() => {
|
19
52
|
if (!videoRef.current)
|
20
53
|
return;
|
@@ -44,8 +77,8 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
|
|
44
77
|
setIsLoadFinish(true);
|
45
78
|
}, []);
|
46
79
|
const handleClickVideo = useCallback((type) => () => {
|
47
|
-
var _a, _b, _c, _d, _e;
|
48
|
-
if (!isLoadFinish)
|
80
|
+
var _a, _b, _c, _d, _e, _f;
|
81
|
+
if (!isActive || !(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
|
49
82
|
return;
|
50
83
|
const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
|
51
84
|
switch (type) {
|
@@ -63,10 +96,13 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
|
|
63
96
|
break;
|
64
97
|
default:
|
65
98
|
if (isPause) {
|
66
|
-
(_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.
|
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();
|
67
103
|
}
|
68
104
|
else {
|
69
|
-
(
|
105
|
+
(_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.pause();
|
70
106
|
}
|
71
107
|
setIsPauseVideo(!isPause);
|
72
108
|
break;
|
@@ -104,27 +140,34 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
|
|
104
140
|
setFirstFrameSrc(canvas.toDataURL());
|
105
141
|
}, []);
|
106
142
|
const handleTimeUpload = useCallback(() => {
|
107
|
-
var _a
|
143
|
+
var _a;
|
108
144
|
if (!videoRef.current)
|
109
145
|
return;
|
110
|
-
|
111
|
-
|
112
|
-
|
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
|
+
});
|
113
154
|
}, []);
|
114
|
-
const
|
115
|
-
var _a, _b, _c, _d, _e, _f;
|
116
|
-
|
117
|
-
|
118
|
-
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)
|
119
159
|
return;
|
120
160
|
if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
|
121
|
-
(
|
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);
|
122
162
|
}
|
123
163
|
else {
|
124
|
-
const i = (
|
125
|
-
(
|
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);
|
126
166
|
}
|
127
167
|
};
|
168
|
+
const handlePause = () => {
|
169
|
+
setIsPauseVideo(true);
|
170
|
+
};
|
128
171
|
useEffect(() => {
|
129
172
|
var _a, _b, _c;
|
130
173
|
if (!isActive)
|
@@ -166,7 +209,7 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
|
|
166
209
|
(_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('pause', handlePause);
|
167
210
|
(_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('timeupdate', handleTimeUpload);
|
168
211
|
};
|
169
|
-
}, [
|
212
|
+
}, [isActive]);
|
170
213
|
const renderPoster = useMemo(() => {
|
171
214
|
if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
|
172
215
|
return null;
|
@@ -188,9 +231,10 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
|
|
188
231
|
position: 'relative',
|
189
232
|
width: '100%',
|
190
233
|
height,
|
191
|
-
overflow: 'hidden'
|
192
|
-
|
193
|
-
} },
|
194
|
-
|
195
|
-
};
|
234
|
+
overflow: 'hidden'
|
235
|
+
}, onClick: handleClickVideo() },
|
236
|
+
React.createElement("div", { className: 'n-full-screen', id: videoId, style: { width: '100%', height: '100%' } }),
|
237
|
+
renderPoster,
|
238
|
+
isPauseVideo && React.createElement(FormatImage, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })));
|
239
|
+
});
|
196
240
|
export default memo(VideoWidget);
|
@@ -15,6 +15,7 @@ export interface IScene {
|
|
15
15
|
startTime: number;
|
16
16
|
traceInfo: string;
|
17
17
|
bindProducts?: any[];
|
18
|
+
title?: string;
|
18
19
|
}
|
19
20
|
export type ScenesType = IScene[];
|
20
21
|
export type DiyStoryPreviewType = ISxpPageRenderProps & {
|
@@ -24,6 +25,24 @@ export type DiyStoryPreviewType = ISxpPageRenderProps & {
|
|
24
25
|
onActiveChange?: (v: number) => void;
|
25
26
|
loopPlay?: boolean;
|
26
27
|
pointerEvents?: any;
|
28
|
+
onUpdateTimeLine: (index: number, curTime: number) => void;
|
29
|
+
disabledListener?: boolean;
|
27
30
|
};
|
28
|
-
|
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>>>;
|
29
48
|
export default _default;
|
@@ -1,6 +1,6 @@
|
|
1
|
-
import React, { memo, 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
|
-
import { cloneDeep } from 'lodash';
|
3
|
+
import { cloneDeep, debounce } from 'lodash';
|
4
4
|
import RenderCard from '../SxpPageRender/RenderCard';
|
5
5
|
import ExpandableText from '../SxpPageRender/ExpandableText';
|
6
6
|
import LikeButton from '../SxpPageRender/LikeButton';
|
@@ -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' }) => {
|
198
|
-
const
|
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, { 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, swiperRef: swiperRef, loopPlay:
|
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
|
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(() => {
|
@@ -233,14 +260,6 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
|
|
233
260
|
}
|
234
261
|
return null;
|
235
262
|
}, [globalConfig]);
|
236
|
-
const CTA = (rec, index) => {
|
237
|
-
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA)) {
|
238
|
-
console.log(globalConfig, rec, '111');
|
239
|
-
return (React.createElement("div", { className: 'clc-sxp-bottom-card' },
|
240
|
-
React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: RESOLVER })));
|
241
|
-
}
|
242
|
-
return null;
|
243
|
-
};
|
244
263
|
const renderBottom = (rec, index) => {
|
245
264
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
246
265
|
if (rec === null || rec === void 0 ? void 0 : rec.video) {
|
@@ -342,6 +361,7 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
|
|
342
361
|
var _a, _b, _c, _d;
|
343
362
|
const rec = cloneDeep(recData);
|
344
363
|
rec.video.bindProducts = item === null || item === void 0 ? void 0 : item.bindProducts;
|
364
|
+
rec.video.title = (item === null || item === void 0 ? void 0 : item.title) || '';
|
345
365
|
return (React.createElement("div", { style: { position: 'relative' } },
|
346
366
|
React.createElement(SwiperSlide, { key: index, virtualIndex: index, style: { overflow: 'hidden', position: 'relative' } },
|
347
367
|
renderBottom(rec, index),
|
@@ -362,23 +382,34 @@ const DiyStoryPreview = ({ data = [], globalConfig, tipText, nudge, tempMap, des
|
|
362
382
|
return;
|
363
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);
|
364
384
|
}, [activeIndex]);
|
385
|
+
const handleSessionExpire = useCallback(debounce(() => {
|
386
|
+
var _a;
|
387
|
+
(_a = videoWidgetRef.current) === null || _a === void 0 ? void 0 : _a.setLoopPlay(false);
|
388
|
+
}, 1000), []);
|
365
389
|
useEffect(() => {
|
366
|
-
|
367
|
-
if (!(swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current))
|
390
|
+
if (disabledListener)
|
368
391
|
return;
|
369
|
-
|
370
|
-
|
392
|
+
const events = ['touchstart', 'touchcancel'];
|
393
|
+
events.forEach((event) => {
|
394
|
+
window.addEventListener(event, handleSessionExpire);
|
395
|
+
});
|
396
|
+
return () => {
|
397
|
+
events.forEach((event) => {
|
398
|
+
window.removeEventListener(event, handleSessionExpire);
|
399
|
+
});
|
400
|
+
};
|
401
|
+
}, [handleSessionExpire, disabledListener]);
|
371
402
|
return (React.createElement("div", { id: 'sxp-render', style: { height: containerHeight, position: 'relative', pointerEvents } },
|
372
403
|
React.createElement(Swiper, { ref: swiperRef, allowTouchMove: pointerEvents !== 'none', onSlideChange: () => {
|
373
|
-
setLooPlaySwiper(false);
|
374
404
|
swiperRef.current.swiper.allowTouchMove = false;
|
375
405
|
setTimeout(() => {
|
376
406
|
swiperRef.current.swiper.allowTouchMove = true;
|
377
407
|
}, 500);
|
378
408
|
}, onActiveIndexChange: (swiper) => {
|
409
|
+
setCurIndex(swiper === null || swiper === void 0 ? void 0 : swiper.activeIndex);
|
379
410
|
onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(swiper.activeIndex);
|
380
411
|
}, direction: 'vertical', style: { overflow: 'hidden', height: containerHeight }, height: containerHeight }, scenes === null || scenes === void 0 ? void 0 : scenes.map((rec, index) => {
|
381
412
|
return renderView(rec, index);
|
382
413
|
}))));
|
383
|
-
};
|
414
|
+
});
|
384
415
|
export default memo(DiyStoryPreview);
|
@@ -9,19 +9,19 @@ Object.values(_materials_).forEach((v) => {
|
|
9
9
|
RESOLVER[v.extend.type] = v;
|
10
10
|
});
|
11
11
|
const SxpPageCore = ({ data, maxSize = 10, defaultSize = 10, hashTagSize = 20, loadingImage, appDomain, enabledMetaConversionApi, dataList, pointerEvents }) => {
|
12
|
-
var _a, _b, _c, _d, _e, _f;
|
12
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
13
13
|
const utmVal = useMemo(() => {
|
14
14
|
var _a;
|
15
15
|
const searchParams = (location === null || location === void 0 ? void 0 : location.search) ? (_a = location === null || location === void 0 ? void 0 : location.search) === null || _a === void 0 ? void 0 : _a.replace('?', '') : '';
|
16
16
|
return searchParams;
|
17
17
|
}, []);
|
18
|
-
const [_schema, setSchema] = useState(data === null || data === void 0 ? void 0 : data.data);
|
18
|
+
const [_schema, setSchema] = useState((_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.data);
|
19
19
|
const [channel, setChannel] = useState();
|
20
20
|
return (React.createElement(EditorCore, { resolver: RESOLVER, enableDataSource: false, schema: _schema, utmVal: channel || utmVal },
|
21
|
-
React.createElement(SxpDataSourceProvider, { utmVal: utmVal, dataSources: data === null || data === void 0 ? void 0 : data.data_sources, sxpParameter: data === null || data === void 0 ? void 0 : data.sxp_parameter, maxSize: (
|
22
|
-
var _a;
|
21
|
+
React.createElement(SxpDataSourceProvider, { utmVal: utmVal, dataSources: data === null || data === void 0 ? void 0 : data.data_sources, sxpParameter: data === null || data === void 0 ? void 0 : data.sxp_parameter, maxSize: (_c = (_b = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _b === void 0 ? void 0 : _b.personalized_recommend) !== null && _c !== void 0 ? _c : maxSize, defaultSize: (_e = (_d = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _d === void 0 ? void 0 : _d.default_recommend) !== null && _e !== void 0 ? _e : defaultSize, hashTagSize: (_g = (_f = data === null || data === void 0 ? void 0 : data.sxp_parameter) === null || _f === void 0 ? void 0 : _f.hash_tag_size) !== null && _g !== void 0 ? _g : hashTagSize, loadingImage: loadingImage, appDomain: appDomain, enabledMetaConversionApi: enabledMetaConversionApi, utmParameter: data === null || data === void 0 ? void 0 : data.utm_parameter, data: Object.assign(Object.assign({}, data), { data: (_h = data === null || data === void 0 ? void 0 : data.data) === null || _h === void 0 ? void 0 : _h.data }), dataList: dataList, onUpdateSchema: (d) => setSchema(d), onUpdateChannel: (d) => setChannel(d), render: ({ rtcList, tagList, pageData }) => {
|
22
|
+
var _a, _b;
|
23
23
|
return (React.createElement(React.Fragment, null,
|
24
|
-
React.createElement(DiyStoryPreview, Object.assign({ defaultData: data }, (
|
24
|
+
React.createElement(DiyStoryPreview, Object.assign({ defaultData: Object.assign(Object.assign({}, data), { data: (_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a.data }) }, (_b = pageData === null || pageData === void 0 ? void 0 : pageData.data) === null || _b === void 0 ? void 0 : _b.sxpPageConf, { tagList: tagList, scenes: rtcList, resolver: RESOLVER, containerHeight: window === null || window === void 0 ? void 0 : window.innerHeight, pointerEvents: pointerEvents, loopPlay: true })),
|
25
25
|
React.createElement(Popup, null)));
|
26
26
|
} })));
|
27
27
|
};
|
@@ -1,8 +1,8 @@
|
|
1
1
|
import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState, useMemo } from 'react';
|
2
2
|
import { cloneDeep } from 'lodash';
|
3
|
+
import { setSlideSkipState } from '../utils/localStore';
|
3
4
|
import DataSourceProvider from './DataSourceProvider';
|
4
5
|
import { uuid } from '../../core/utils/tool';
|
5
|
-
import { setSlideSkipState } from '../utils/localStore';
|
6
6
|
const item = {
|
7
7
|
id: uuid(6, 10),
|
8
8
|
item: {
|
@@ -131,7 +131,7 @@ export interface SxpDataSourceProviderProps {
|
|
131
131
|
isEditor?: boolean;
|
132
132
|
utmParameter?: PageData['utm_parameter'];
|
133
133
|
channelQueryList?: any[];
|
134
|
-
data?:
|
134
|
+
data?: any;
|
135
135
|
dataList?: PageData[];
|
136
136
|
onUpdateSchema?: (d: PageData['data']) => void;
|
137
137
|
onUpdateChannel?: (d: string) => void;
|
@@ -144,16 +144,16 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
144
144
|
.catch((err) => Promise.reject(err));
|
145
145
|
}, [bffDataSource]);
|
146
146
|
const getRecommendVideos = useCallback((query) => __awaiter(void 0, void 0, void 0, function* () {
|
147
|
-
var _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s
|
148
|
-
query = Object.assign({ maxSize:
|
147
|
+
var _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
|
148
|
+
query = Object.assign({ maxSize: 50, defaultSize: 50, hashTag: query === null || query === void 0 ? void 0 : query.hashTag, traceInfo: query === null || query === void 0 ? void 0 : query.traceInfo, themeTag: query === null || query === void 0 ? void 0 : query.themeTag, pageNum: query === null || query === void 0 ? void 0 : query.pageNum, contentFilter: query === null || query === void 0 ? void 0 : query.contentFilter, productFilter: query === null || query === void 0 ? void 0 : query.productFilter }, (chatlabsId && { chatlabsId }));
|
149
149
|
if (channel) {
|
150
150
|
query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(channel) });
|
151
151
|
}
|
152
152
|
else if (utmVal) {
|
153
|
-
const val = (
|
153
|
+
const val = (_h = (_g = (_f = splitUrlParams(utmVal)) === null || _f === void 0 ? void 0 : _f.filter((val) => {
|
154
154
|
const key = val.split('=')[0];
|
155
155
|
return key;
|
156
|
-
})) === null ||
|
156
|
+
})) === null || _g === void 0 ? void 0 : _g.join('&')) !== null && _h !== void 0 ? _h : '';
|
157
157
|
if (val)
|
158
158
|
query = Object.assign(Object.assign({}, query), { channel: decodeURIComponent(val) });
|
159
159
|
}
|
@@ -167,19 +167,19 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
167
167
|
let list = [];
|
168
168
|
let result = null;
|
169
169
|
const recurveRecList = (query) => __awaiter(void 0, void 0, void 0, function* () {
|
170
|
-
var _v, _w, _x, _y
|
170
|
+
var _t, _u, _v, _w, _x, _y;
|
171
171
|
query.pageNum = pageNum;
|
172
172
|
result = yield (bffFetchAdmin === null || bffFetchAdmin === void 0 ? void 0 : bffFetchAdmin('recommend/direct_page', { method: 'POST', body: query }));
|
173
173
|
if (!(result === null || result === void 0 ? void 0 : result.success)) {
|
174
174
|
return undefined;
|
175
175
|
}
|
176
176
|
setLoading(false);
|
177
|
-
list = list.concat((
|
177
|
+
list = list.concat((_w = (_v = (_u = (_t = result === null || result === void 0 ? void 0 : result.data) === null || _t === void 0 ? void 0 : _t.recList) === null || _u === void 0 ? void 0 : _u.filter) === null || _v === void 0 ? void 0 : _v.call(_u, (item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video))) !== null && _w !== void 0 ? _w : []);
|
178
178
|
if ((rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) === 0) {
|
179
179
|
setRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
180
180
|
setCacheRtcList(getFilterRecList(Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list })));
|
181
181
|
}
|
182
|
-
const isNotNullList = (
|
182
|
+
const isNotNullList = (_y = (_x = result === null || result === void 0 ? void 0 : result.data) === null || _x === void 0 ? void 0 : _x.recList) === null || _y === void 0 ? void 0 : _y.some((item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video));
|
183
183
|
if (isNotNullList) {
|
184
184
|
pageNum = pageNum + 1;
|
185
185
|
yield recurveRecList(query);
|
@@ -187,11 +187,11 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
187
187
|
});
|
188
188
|
yield recurveRecList(query);
|
189
189
|
if (!(query === null || query === void 0 ? void 0 : query.hashTag) && result)
|
190
|
-
setCurReqInfo({ rtc: (
|
190
|
+
setCurReqInfo({ rtc: (_j = result === null || result === void 0 ? void 0 : result.data) === null || _j === void 0 ? void 0 : _j.rtc, requestId: (_k = result === null || result === void 0 ? void 0 : result.data) === null || _k === void 0 ? void 0 : _k.requestId });
|
191
191
|
return Object.assign(Object.assign({}, result === null || result === void 0 ? void 0 : result.data), { recList: list });
|
192
192
|
}
|
193
193
|
if (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) {
|
194
|
-
query = Object.assign(Object.assign({}, query), { directPage: true, level: 1, pageNum: (
|
194
|
+
query = Object.assign(Object.assign({}, query), { directPage: true, level: 1, pageNum: (_l = query === null || query === void 0 ? void 0 : query.pageNum) !== null && _l !== void 0 ? _l : 1 });
|
195
195
|
}
|
196
196
|
const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v3/recommend/direct', { method: 'POST', body: query }));
|
197
197
|
if (!(result === null || result === void 0 ? void 0 : result.success)) {
|
@@ -201,8 +201,8 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
201
201
|
setCurReqInfo({ rtc: result.data.rtc, requestId: result.data.requestId });
|
202
202
|
if ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) && !isEditor) {
|
203
203
|
let list = [];
|
204
|
-
list = list.concat((
|
205
|
-
const isNotNullList = (
|
204
|
+
list = list.concat((_q = (_p = (_o = (_m = result === null || result === void 0 ? void 0 : result.data) === null || _m === void 0 ? void 0 : _m.recList) === null || _o === void 0 ? void 0 : _o.filter) === null || _p === void 0 ? void 0 : _p.call(_o, (item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video))) !== null && _q !== void 0 ? _q : []);
|
205
|
+
const isNotNullList = (_s = (_r = result === null || result === void 0 ? void 0 : result.data) === null || _r === void 0 ? void 0 : _r.recList) === null || _s === void 0 ? void 0 : _s.some((item) => (item === null || item === void 0 ? void 0 : item.product) || (item === null || item === void 0 ? void 0 : item.video));
|
206
206
|
if (!isNotNullList) {
|
207
207
|
setIsNoMoreData(true);
|
208
208
|
}
|
@@ -211,12 +211,12 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
211
211
|
return result === null || result === void 0 ? void 0 : result.data;
|
212
212
|
}), [bffFetch, utmVal, maxSize, defaultSize, channelQueryList, channel, chatlabsId, bffFetchAdmin]);
|
213
213
|
const loadVideos = useCallback((pageNum) => __awaiter(void 0, void 0, void 0, function* () {
|
214
|
-
var
|
214
|
+
var _z, _0, _1, _2;
|
215
215
|
if (rtcList.length <= 0) {
|
216
216
|
return;
|
217
217
|
}
|
218
218
|
const lastItem = rtcList === null || rtcList === void 0 ? void 0 : rtcList[(rtcList === null || rtcList === void 0 ? void 0 : rtcList.length) - 1];
|
219
|
-
const data = yield getRecommendVideos(Object.assign(Object.assign(Object.assign(Object.assign({ hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag }, (((
|
219
|
+
const data = yield getRecommendVideos(Object.assign(Object.assign(Object.assign(Object.assign({ hashTag: waterFallData === null || waterFallData === void 0 ? void 0 : waterFallData.hashTag }, (((_z = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _z === void 0 ? void 0 : _z.itemId) && { productFilter: [(_0 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.product) === null || _0 === void 0 ? void 0 : _0.itemId] })), (((_1 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _1 === void 0 ? void 0 : _1.itemId) && { contentFilter: [(_2 = lastItem === null || lastItem === void 0 ? void 0 : lastItem.video) === null || _2 === void 0 ? void 0 : _2.itemId] })), { themeTag: themeTag.current }), ((globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.enablePreview) && !isEditor && { pageNum })));
|
220
220
|
setRtcList(rtcList.concat(getFilterRecList(data)));
|
221
221
|
setCacheRtcList(cacheRtcList.concat(getFilterRecList(data)));
|
222
222
|
return data;
|
@@ -375,18 +375,18 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
375
375
|
return res === null || res === void 0 ? void 0 : res.success;
|
376
376
|
}), [bffFetch]);
|
377
377
|
const bffGetTagList = useCallback((data) => __awaiter(void 0, void 0, void 0, function* () {
|
378
|
-
var _5, _6, _7, _8, _9, _10
|
379
|
-
const isShowTag = !!((
|
378
|
+
var _3, _4, _5, _6, _7, _8, _9, _10;
|
379
|
+
const isShowTag = !!((_5 = (_4 = (_3 = data === null || data === void 0 ? void 0 : data.data) === null || _3 === void 0 ? void 0 : _3.sxpPageConf) === null || _4 === void 0 ? void 0 : _4.globalConfig) === null || _5 === void 0 ? void 0 : _5.isShowTag);
|
380
380
|
if (!utmVal || !isShowTag)
|
381
381
|
return;
|
382
382
|
try {
|
383
|
-
const val = (
|
383
|
+
const val = (_8 = (_7 = (_6 = splitUrlParams(utmVal)) === null || _6 === void 0 ? void 0 : _6.filter((val) => {
|
384
384
|
var _a, _b;
|
385
385
|
const key = val.split('=')[0];
|
386
386
|
return (_b = ((_a = utmParameter === null || utmParameter === void 0 ? void 0 : utmParameter.channels) !== null && _a !== void 0 ? _a : [])) === null || _b === void 0 ? void 0 : _b.includes(key);
|
387
|
-
})) === null ||
|
387
|
+
})) === null || _7 === void 0 ? void 0 : _7.join('&')) !== null && _8 !== void 0 ? _8 : '';
|
388
388
|
const result = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/tag/list', { method: 'GET', query: { channel: decodeURIComponent(val) } }));
|
389
|
-
setTagList((
|
389
|
+
setTagList((_10 = (_9 = result === null || result === void 0 ? void 0 : result.data) === null || _9 === void 0 ? void 0 : _9.tags) !== null && _10 !== void 0 ? _10 : []);
|
390
390
|
}
|
391
391
|
catch (e) {
|
392
392
|
console.log('e', e);
|
@@ -446,10 +446,10 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
446
446
|
});
|
447
447
|
}, [bffEventReport]);
|
448
448
|
const getAccount = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
|
449
|
-
var
|
449
|
+
var _11, _12;
|
450
450
|
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/account', { method: 'GET' }));
|
451
|
-
setChatlabsId((
|
452
|
-
return ((
|
451
|
+
setChatlabsId((_11 = res === null || res === void 0 ? void 0 : res.data) === null || _11 === void 0 ? void 0 : _11.chatLabsId);
|
452
|
+
return ((_12 = res === null || res === void 0 ? void 0 : res.data) === null || _12 === void 0 ? void 0 : _12.consentResult) === 'true';
|
453
453
|
}), [bffFetch]);
|
454
454
|
const accountSonsent = useCallback((consentResult) => __awaiter(void 0, void 0, void 0, function* () {
|
455
455
|
const res = yield (bffFetch === null || bffFetch === void 0 ? void 0 : bffFetch('v1/account/consent', {
|
@@ -464,7 +464,6 @@ const SxpDataSourceProvider = ({ render, dataSources, utmVal, enableReportEvent
|
|
464
464
|
if (!isShowConsent)
|
465
465
|
h5EnterLink();
|
466
466
|
}, [isShowConsent]);
|
467
|
-
console.log(data, '111');
|
468
467
|
useEffect(() => {
|
469
468
|
if (isShowConsent || isPreview)
|
470
469
|
return;
|
@@ -11,7 +11,15 @@ interface IVideoWidgetProps {
|
|
11
11
|
activeIndex?: number;
|
12
12
|
videoPostConfig?: postConfigType;
|
13
13
|
swiperRef?: any;
|
14
|
-
|
14
|
+
videoPlayIcon?: string;
|
15
|
+
handleUpdateTimeline?: (index: number, v: number) => void;
|
16
|
+
loopPlay: any;
|
15
17
|
}
|
16
|
-
|
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>>>;
|
17
25
|
export default _default;
|