pb-sxp-ui 1.15.15-alpha.2 → 1.15.16-alpha.1
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 +135 -781
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +134 -779
- 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 +135 -781
- 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/SxpPageCore/index.d.ts +0 -1
- package/es/core/components/SxpPageCore/index.js +7 -7
- package/es/core/components/SxpPageRender/ExpandableText.js +2 -10
- package/es/core/components/SxpPageRender/RenderCard.js +4 -4
- package/es/core/context/EditorContext.js +1 -1
- package/es/core/context/SxpDataSourceProvider.d.ts +1 -1
- package/es/core/context/SxpDataSourceProvider.js +47 -28
- package/es/index.d.ts +0 -1
- package/es/index.js +0 -1
- package/es/materials/sxp/template/MultiCommodity/index.js +1 -1
- package/es/materials/sxp/template/MultiCommodityDiro/index.js +1 -2
- package/es/materials/sxp/template/MultiCommodityDiroNew/index.js +1 -2
- package/es/materials/sxp/template/components/EventProvider.js +2 -2
- package/lib/core/components/SxpPageCore/index.d.ts +0 -1
- package/lib/core/components/SxpPageCore/index.js +7 -7
- package/lib/core/components/SxpPageRender/ExpandableText.js +2 -10
- package/lib/core/components/SxpPageRender/RenderCard.js +4 -4
- package/lib/core/context/EditorContext.js +1 -1
- package/lib/core/context/SxpDataSourceProvider.d.ts +1 -1
- package/lib/core/context/SxpDataSourceProvider.js +47 -28
- package/lib/index.d.ts +0 -1
- package/lib/index.js +1 -3
- package/lib/materials/sxp/template/MultiCommodity/index.js +1 -1
- package/lib/materials/sxp/template/MultiCommodityDiro/index.js +1 -2
- package/lib/materials/sxp/template/MultiCommodityDiroNew/index.js +1 -2
- package/lib/materials/sxp/template/components/EventProvider.js +2 -2
- package/package.json +1 -1
- package/es/core/components/DiyStoryPreview/PictureGroup.d.ts +0 -16
- package/es/core/components/DiyStoryPreview/PictureGroup.js +0 -34
- package/es/core/components/DiyStoryPreview/VideoWidget.d.ts +0 -27
- package/es/core/components/DiyStoryPreview/VideoWidget.js +0 -195
- package/es/core/components/DiyStoryPreview/index.d.ts +0 -51
- package/es/core/components/DiyStoryPreview/index.js +0 -411
- package/lib/core/components/DiyStoryPreview/PictureGroup.d.ts +0 -16
- package/lib/core/components/DiyStoryPreview/PictureGroup.js +0 -37
- package/lib/core/components/DiyStoryPreview/VideoWidget.d.ts +0 -27
- package/lib/core/components/DiyStoryPreview/VideoWidget.js +0 -198
- package/lib/core/components/DiyStoryPreview/index.d.ts +0 -51
- package/lib/core/components/DiyStoryPreview/index.js +0 -414
@@ -1,198 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
-
const tslib_1 = require("tslib");
|
4
|
-
const react_1 = tslib_1.__importStar(require("react"));
|
5
|
-
const react_2 = require("swiper/react");
|
6
|
-
const useIconLink_1 = require("../SxpPageRender/useIconLink");
|
7
|
-
const VideoPlayer_1 = require("../SxpPageRender/VideoWidget/VideoPlayer");
|
8
|
-
const FormatImage_1 = tslib_1.__importDefault(require("../SxpPageRender/FormatImage"));
|
9
|
-
const hooks_1 = require("../../../core/hooks");
|
10
|
-
const VideoWidget = (0, react_1.forwardRef)(({ rec, index, height, data, muted, activeIndex, videoPostConfig, width, swiperRef, videoPlayIcon, onUpdateTimeLine, loopPlay, onPlay, onPause }, ref) => {
|
11
|
-
const { isActive } = (0, react_2.useSwiperSlide)();
|
12
|
-
const [isPauseVideo, setIsPauseVideo] = (0, react_1.useState)(false);
|
13
|
-
const videoRef = (0, react_1.useRef)(null);
|
14
|
-
const { bffEventReport, sxpParameter, waterFallData, openHashtag } = (0, hooks_1.useSxpDataSource)();
|
15
|
-
const videoStartTime = (0, react_1.useRef)(0);
|
16
|
-
const [isLoadFinish, setIsLoadFinish] = (0, react_1.useState)(false);
|
17
|
-
const [isFirstPlay, setIsFirstPlay] = (0, react_1.useState)(true);
|
18
|
-
const canvasRef = (0, react_1.useRef)(null);
|
19
|
-
const [firstFrameSrc, setFirstFrameSrc] = (0, react_1.useState)('');
|
20
|
-
const videoId = `pb-cache-video-${index}`;
|
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
|
-
loopPlayRef.current = v;
|
45
|
-
},
|
46
|
-
isPlaying() {
|
47
|
-
var _a;
|
48
|
-
return !((_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.paused);
|
49
|
-
}
|
50
|
-
};
|
51
|
-
});
|
52
|
-
(0, react_1.useEffect)(() => {
|
53
|
-
if (!videoRef.current)
|
54
|
-
return;
|
55
|
-
videoRef.current.muted = muted;
|
56
|
-
}, [muted]);
|
57
|
-
const PAUSE_ICON = (0, useIconLink_1.useIconLink)('/pb_static/06f28a2025c74c1cb49be6767316d827.png');
|
58
|
-
const handleLoadedMetadata = (0, react_1.useCallback)(() => {
|
59
|
-
var _a;
|
60
|
-
videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
|
61
|
-
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
62
|
-
setIsLoadFinish(true);
|
63
|
-
}, []);
|
64
|
-
const handleClickVideo = (0, react_1.useCallback)((type) => () => {
|
65
|
-
var _a, _b, _c, _d, _e, _f;
|
66
|
-
if (!isActive || !(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) || !isLoadFinish)
|
67
|
-
return;
|
68
|
-
const isPause = (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.paused;
|
69
|
-
switch (type) {
|
70
|
-
case 'start':
|
71
|
-
if (!isPause)
|
72
|
-
return;
|
73
|
-
(_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.play();
|
74
|
-
setIsPauseVideo(false);
|
75
|
-
break;
|
76
|
-
case 'pause':
|
77
|
-
if (isPause)
|
78
|
-
return;
|
79
|
-
(_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
|
80
|
-
setIsPauseVideo(true);
|
81
|
-
break;
|
82
|
-
default:
|
83
|
-
if (isPause) {
|
84
|
-
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)) {
|
85
|
-
videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
|
86
|
-
}
|
87
|
-
(_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.play();
|
88
|
-
}
|
89
|
-
else {
|
90
|
-
(_f = videoRef.current) === null || _f === void 0 ? void 0 : _f.pause();
|
91
|
-
}
|
92
|
-
setIsPauseVideo(!isPause);
|
93
|
-
break;
|
94
|
-
}
|
95
|
-
}, [isLoadFinish]);
|
96
|
-
const blur = (0, react_1.useMemo)(() => {
|
97
|
-
return (videoPostConfig === null || videoPostConfig === void 0 ? void 0 : videoPostConfig.mode) === '2';
|
98
|
-
}, [videoPostConfig]);
|
99
|
-
const handleTimeUpload = () => {
|
100
|
-
if (!videoRef.current)
|
101
|
-
return;
|
102
|
-
setTimeout(() => {
|
103
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
104
|
-
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)) {
|
105
|
-
(_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.pause();
|
106
|
-
if (!loopPlayRef.current)
|
107
|
-
return;
|
108
|
-
if (index === (data === null || data === void 0 ? void 0 : data.length) - 1) {
|
109
|
-
(_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.slideTo(0);
|
110
|
-
}
|
111
|
-
else {
|
112
|
-
const i = (_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.activeIndex;
|
113
|
-
(_j = (_h = swiperRef === null || swiperRef === void 0 ? void 0 : swiperRef.current) === null || _h === void 0 ? void 0 : _h.swiper) === null || _j === void 0 ? void 0 : _j.slideTo(i + 1);
|
114
|
-
}
|
115
|
-
}
|
116
|
-
});
|
117
|
-
};
|
118
|
-
const handlePause = () => {
|
119
|
-
setIsPauseVideo(true);
|
120
|
-
onPause === null || onPause === void 0 ? void 0 : onPause();
|
121
|
-
};
|
122
|
-
const handlePlay = () => {
|
123
|
-
var _a;
|
124
|
-
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);
|
125
|
-
onPlay === null || onPlay === void 0 ? void 0 : onPlay(index, localTime);
|
126
|
-
};
|
127
|
-
(0, react_1.useEffect)(() => {
|
128
|
-
var _a, _b, _c, _d;
|
129
|
-
if (!isActive)
|
130
|
-
return;
|
131
|
-
const videoSrc = rec === null || rec === void 0 ? void 0 : rec.mediaUrl;
|
132
|
-
if (!videoSrc)
|
133
|
-
return;
|
134
|
-
setIsPauseVideo(false);
|
135
|
-
const videoPlayerWrapperNode = document.querySelector(`#${videoId}`);
|
136
|
-
if (!videoPlayerWrapperNode)
|
137
|
-
return;
|
138
|
-
videoRef.current = VideoPlayer_1.mountVideoPlayerAtNode === null || VideoPlayer_1.mountVideoPlayerAtNode === void 0 ? void 0 : (0, VideoPlayer_1.mountVideoPlayerAtNode)(videoPlayerWrapperNode);
|
139
|
-
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
140
|
-
return;
|
141
|
-
const Hls = window === null || window === void 0 ? void 0 : window.Hls;
|
142
|
-
let hls = hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current;
|
143
|
-
if (videoSrc.includes('.m3u8') && Hls && Hls.isSupported()) {
|
144
|
-
hls = new Hls();
|
145
|
-
hls === null || hls === void 0 ? void 0 : hls.loadSource(videoSrc);
|
146
|
-
hls === null || hls === void 0 ? void 0 : hls.attachMedia(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current);
|
147
|
-
hls === null || hls === void 0 ? void 0 : hls.on(Hls.Events.MANIFEST_PARSED, function () {
|
148
|
-
var _a;
|
149
|
-
videoRef.current.currentTime = rec === null || rec === void 0 ? void 0 : rec.startTime;
|
150
|
-
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.play();
|
151
|
-
});
|
152
|
-
}
|
153
|
-
else {
|
154
|
-
videoRef.current.src = videoSrc;
|
155
|
-
}
|
156
|
-
(_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('loadedmetadata', handleLoadedMetadata);
|
157
|
-
(_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('pause', handlePause);
|
158
|
-
(_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.addEventListener('play', handlePlay);
|
159
|
-
(_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.addEventListener('timeupdate', handleTimeUpload);
|
160
|
-
return () => {
|
161
|
-
var _a, _b, _c, _d, _e;
|
162
|
-
if (hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current)
|
163
|
-
(_a = hlsRef === null || hlsRef === void 0 ? void 0 : hlsRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
|
164
|
-
setIsLoadFinish(false);
|
165
|
-
(_b = videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('loadedmetadata', handleLoadedMetadata);
|
166
|
-
(_c = videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('pause', handlePause);
|
167
|
-
(_d = videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('play', handlePlay);
|
168
|
-
(_e = videoRef.current) === null || _e === void 0 ? void 0 : _e.removeEventListener('timeupdate', handleTimeUpload);
|
169
|
-
};
|
170
|
-
}, [isActive]);
|
171
|
-
const renderPoster = (0, react_1.useMemo)(() => {
|
172
|
-
if (!(sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image) || isLoadFinish) {
|
173
|
-
return null;
|
174
|
-
}
|
175
|
-
return (react_1.default.createElement("img", { style: { position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', objectFit: 'cover' }, src: sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, alt: 'video poster' }));
|
176
|
-
}, [isLoadFinish, sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image]);
|
177
|
-
const blurStyle = (0, react_1.useMemo)(() => {
|
178
|
-
return blur
|
179
|
-
? {
|
180
|
-
filter: 'blur(10px)',
|
181
|
-
transform: 'translate3d(0px, 0px, 0px) scale(1.2)'
|
182
|
-
}
|
183
|
-
: {};
|
184
|
-
}, [blur]);
|
185
|
-
if (!(rec === null || rec === void 0 ? void 0 : rec.mediaUrl)) {
|
186
|
-
return null;
|
187
|
-
}
|
188
|
-
return (react_1.default.createElement("div", { className: 'video-container', key: rec.itemId, style: {
|
189
|
-
position: 'relative',
|
190
|
-
width: '100%',
|
191
|
-
height,
|
192
|
-
overflow: 'hidden'
|
193
|
-
}, onClick: handleClickVideo() },
|
194
|
-
react_1.default.createElement("div", { className: 'n-full-screen', id: videoId, style: { width: '100%', height: '100%' } }),
|
195
|
-
renderPoster,
|
196
|
-
isPauseVideo && react_1.default.createElement(FormatImage_1.default, { className: 'clc-pb-video-pause', src: videoPlayIcon !== null && videoPlayIcon !== void 0 ? videoPlayIcon : PAUSE_ICON, alt: 'pause' })));
|
197
|
-
});
|
198
|
-
exports.default = (0, react_1.memo)(VideoWidget);
|
@@ -1,51 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import { ISxpPageRenderProps } from '../SxpPageRender';
|
3
|
-
import '../SxpPageRender/index.less';
|
4
|
-
export interface IScene {
|
5
|
-
blueprintStep: number;
|
6
|
-
endTime: number;
|
7
|
-
itemId: string;
|
8
|
-
mediaFileNo: string;
|
9
|
-
mediaUrl: string;
|
10
|
-
position: number;
|
11
|
-
postId: string;
|
12
|
-
sceneId: string;
|
13
|
-
sceneInfo: string;
|
14
|
-
sceneTag: string;
|
15
|
-
startTime: number;
|
16
|
-
traceInfo: string;
|
17
|
-
bindProducts?: any[];
|
18
|
-
title?: string;
|
19
|
-
}
|
20
|
-
export type ScenesType = IScene[];
|
21
|
-
export type DiyStoryPreviewType = ISxpPageRenderProps & {
|
22
|
-
appDomain?: string;
|
23
|
-
scenes?: ScenesType;
|
24
|
-
activeIndex?: number;
|
25
|
-
onActiveChange?: (v: number) => void;
|
26
|
-
loopPlay?: boolean;
|
27
|
-
pointerEvents?: any;
|
28
|
-
onUpdateTimeLine: (index: number, curTime: number) => void;
|
29
|
-
onPlay: (index: number, curTime: number) => void;
|
30
|
-
onPause: () => void;
|
31
|
-
disabledListener?: boolean;
|
32
|
-
};
|
33
|
-
export interface IDiyStoryPreviewRef {
|
34
|
-
play: () => void;
|
35
|
-
pause: () => void;
|
36
|
-
slideTo: (n: number) => void;
|
37
|
-
isPlaying: () => boolean;
|
38
|
-
}
|
39
|
-
declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<ISxpPageRenderProps & {
|
40
|
-
appDomain?: string | undefined;
|
41
|
-
scenes?: ScenesType | undefined;
|
42
|
-
activeIndex?: number | undefined;
|
43
|
-
onActiveChange?: ((v: number) => void) | undefined;
|
44
|
-
loopPlay?: boolean | undefined;
|
45
|
-
pointerEvents?: any;
|
46
|
-
onUpdateTimeLine: (index: number, curTime: number) => void;
|
47
|
-
onPlay: (index: number, curTime: number) => void;
|
48
|
-
onPause: () => void;
|
49
|
-
disabledListener?: boolean | undefined;
|
50
|
-
} & React.RefAttributes<IDiyStoryPreviewRef>>>;
|
51
|
-
export default _default;
|