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.
Files changed (51) hide show
  1. package/dist/index.cjs +135 -781
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +134 -779
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.min.cjs +6 -6
  6. package/dist/index.min.cjs.map +1 -1
  7. package/dist/index.min.js +6 -6
  8. package/dist/index.min.js.map +1 -1
  9. package/dist/pb-ui.js +135 -781
  10. package/dist/pb-ui.js.map +1 -1
  11. package/dist/pb-ui.min.js +6 -6
  12. package/dist/pb-ui.min.js.map +1 -1
  13. package/es/core/components/SxpPageCore/index.d.ts +0 -1
  14. package/es/core/components/SxpPageCore/index.js +7 -7
  15. package/es/core/components/SxpPageRender/ExpandableText.js +2 -10
  16. package/es/core/components/SxpPageRender/RenderCard.js +4 -4
  17. package/es/core/context/EditorContext.js +1 -1
  18. package/es/core/context/SxpDataSourceProvider.d.ts +1 -1
  19. package/es/core/context/SxpDataSourceProvider.js +47 -28
  20. package/es/index.d.ts +0 -1
  21. package/es/index.js +0 -1
  22. package/es/materials/sxp/template/MultiCommodity/index.js +1 -1
  23. package/es/materials/sxp/template/MultiCommodityDiro/index.js +1 -2
  24. package/es/materials/sxp/template/MultiCommodityDiroNew/index.js +1 -2
  25. package/es/materials/sxp/template/components/EventProvider.js +2 -2
  26. package/lib/core/components/SxpPageCore/index.d.ts +0 -1
  27. package/lib/core/components/SxpPageCore/index.js +7 -7
  28. package/lib/core/components/SxpPageRender/ExpandableText.js +2 -10
  29. package/lib/core/components/SxpPageRender/RenderCard.js +4 -4
  30. package/lib/core/context/EditorContext.js +1 -1
  31. package/lib/core/context/SxpDataSourceProvider.d.ts +1 -1
  32. package/lib/core/context/SxpDataSourceProvider.js +47 -28
  33. package/lib/index.d.ts +0 -1
  34. package/lib/index.js +1 -3
  35. package/lib/materials/sxp/template/MultiCommodity/index.js +1 -1
  36. package/lib/materials/sxp/template/MultiCommodityDiro/index.js +1 -2
  37. package/lib/materials/sxp/template/MultiCommodityDiroNew/index.js +1 -2
  38. package/lib/materials/sxp/template/components/EventProvider.js +2 -2
  39. package/package.json +1 -1
  40. package/es/core/components/DiyStoryPreview/PictureGroup.d.ts +0 -16
  41. package/es/core/components/DiyStoryPreview/PictureGroup.js +0 -34
  42. package/es/core/components/DiyStoryPreview/VideoWidget.d.ts +0 -27
  43. package/es/core/components/DiyStoryPreview/VideoWidget.js +0 -195
  44. package/es/core/components/DiyStoryPreview/index.d.ts +0 -51
  45. package/es/core/components/DiyStoryPreview/index.js +0 -411
  46. package/lib/core/components/DiyStoryPreview/PictureGroup.d.ts +0 -16
  47. package/lib/core/components/DiyStoryPreview/PictureGroup.js +0 -37
  48. package/lib/core/components/DiyStoryPreview/VideoWidget.d.ts +0 -27
  49. package/lib/core/components/DiyStoryPreview/VideoWidget.js +0 -198
  50. package/lib/core/components/DiyStoryPreview/index.d.ts +0 -51
  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;