pb-sxp-ui 1.0.105 → 1.1.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 +22 -18
- package/dist/index.css +1 -5
- package/dist/index.js +22 -18
- package/dist/index.min.cjs +3 -4
- package/dist/index.min.js +3 -4
- package/dist/pb-ui.js +22 -18
- package/dist/pb-ui.min.js +3 -4
- package/es/core/components/SxpPageRender/Hashtag/index.js +3 -1
- package/es/core/components/SxpPageRender/VideoWidget/index.js +10 -11
- package/es/core/components/SxpPageRender/index.d.ts +1 -0
- package/es/core/components/SxpPageRender/index.js +4 -4
- package/lib/core/components/SxpPageRender/Hashtag/index.js +3 -1
- package/lib/core/components/SxpPageRender/VideoWidget/index.js +10 -11
- package/lib/core/components/SxpPageRender/index.d.ts +1 -0
- package/lib/core/components/SxpPageRender/index.js +4 -4
- package/package.json +1 -1
- package/dist/index.cjs.map +0 -1
- package/dist/index.js.map +0 -1
- package/dist/index.min.cjs.map +0 -1
- package/dist/index.min.js.map +0 -1
- package/dist/pb-ui.js.map +0 -1
- package/dist/pb-ui.min.js.map +0 -1
@@ -4,6 +4,7 @@ import { useSxpDataSource } from '../../../../core/hooks';
|
|
4
4
|
import Scroll from '../../../../materials/sxp/template/components/Scroll';
|
5
5
|
import { setFontForText } from '../../../../core/utils/tool';
|
6
6
|
const Hashtag = ({ tags, itemId, itemType, index, rec, hashTagStyle }) => {
|
7
|
+
var _a;
|
7
8
|
const [isShowMore, setIsShowMore] = useState(false);
|
8
9
|
const { setWaterFallData, setOpenHashtag, setCacheActiveIndex, waterFallData, setIsFromHashtag } = useSxpDataSource();
|
9
10
|
const handleClickTag = (data) => {
|
@@ -35,7 +36,8 @@ const Hashtag = ({ tags, itemId, itemType, index, rec, hashTagStyle }) => {
|
|
35
36
|
}
|
36
37
|
return (React.createElement("span", { style: { textDecoration: 'underline', cursor: 'pointer', color: '#fff' }, onClick: () => setIsShowMore(!isShowMore) }, isShowMore ? 'show less' : 'show more'));
|
37
38
|
}, [isShowMore, tags]);
|
38
|
-
|
39
|
+
console.log(hashTagStyle, '111');
|
40
|
+
return (React.createElement("div", { className: 'clc-sxp-bottom-hashtag', style: { marginTop: `${(_a = hashTagStyle === null || hashTagStyle === void 0 ? void 0 : hashTagStyle.marginTop) !== null && _a !== void 0 ? _a : 16}px` } },
|
39
41
|
React.createElement(Scroll, null, tags === null || tags === void 0 ? void 0 : tags.map((item, index) => (React.createElement(SwiperSlide, { key: index, hidden: !isShowMore ? index >= 6 : false, className: 'clc-sxp-bottom-hashtag-item', style: hashTagStyle, onClick: () => handleClickTag(item) },
|
40
42
|
React.createElement("div", { dangerouslySetInnerHTML: { __html: setFontForText(`#${item}`, hashTagStyle) } })))))));
|
41
43
|
};
|
@@ -156,8 +156,6 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
|
|
156
156
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
157
157
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
158
158
|
return;
|
159
|
-
if (activeIndex !== index)
|
160
|
-
return;
|
161
159
|
const item = data[index];
|
162
160
|
const videoDuration = ((_b = (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
|
163
161
|
const videoCurrentTime = ((_d = (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
|
@@ -221,18 +219,19 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
|
|
221
219
|
(_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.addEventListener('canplay', handlePlay);
|
222
220
|
(_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.addEventListener('waiting', handleWaiting);
|
223
221
|
return () => {
|
224
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
222
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
223
|
+
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
|
225
224
|
if (hls)
|
226
225
|
hls === null || hls === void 0 ? void 0 : hls.destroy();
|
227
226
|
setIsLoadFinish(false);
|
228
|
-
(
|
229
|
-
(
|
230
|
-
(
|
231
|
-
(
|
232
|
-
(
|
233
|
-
(
|
234
|
-
(
|
235
|
-
(
|
227
|
+
(_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('loadedmetadata', handleLoadedmetadata);
|
228
|
+
(_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('loadeddata', handLoadeddata);
|
229
|
+
(_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('play', handleStartPlay);
|
230
|
+
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.removeEventListener('playing', handlePlaying);
|
231
|
+
(_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.removeEventListener('pause', handlePause);
|
232
|
+
(_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.removeEventListener('ended', handlePlay);
|
233
|
+
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('canplay', handlePlay);
|
234
|
+
(_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.removeEventListener('waiting', handleWaiting);
|
236
235
|
};
|
237
236
|
}, [isActive, videoId, rec]);
|
238
237
|
useEffect(() => {
|
@@ -219,17 +219,17 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
219
219
|
};
|
220
220
|
}, [isShowMore]);
|
221
221
|
const renderBottom = useCallback((rec, index) => {
|
222
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
222
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
223
223
|
if (rec === null || rec === void 0 ? void 0 : rec.video) {
|
224
224
|
return (React.createElement(React.Fragment, null,
|
225
225
|
((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.title) && !isShowMore && React.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
|
226
|
-
React.createElement("div", { className: 'clc-sxp-bottom' },
|
226
|
+
React.createElement("div", { className: 'clc-sxp-bottom', style: { paddingBottom: `${(_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.bottomInfoDist) !== null && _b !== void 0 ? _b : 40}px` } },
|
227
227
|
React.createElement(Nudge, { nudge: nudge }),
|
228
228
|
(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) ? (React.createElement("div", { className: 'clc-sxp-bottom-card' },
|
229
229
|
React.createElement(RenderCard, { rec: rec, index: index, tempMap: tempMap, resolver: resolver }))) : null,
|
230
230
|
React.createElement("div", null,
|
231
|
-
React.createElement(ExpandableText, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (
|
232
|
-
React.createElement(Hashtag, { index: activeIndex, tags: (
|
231
|
+
React.createElement(ExpandableText, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.title) !== null && _d !== void 0 ? _d : '', style: Object.assign(Object.assign({}, descStyle), { textShadow: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isOpenTextShadow) ? '2px 2px 4px rgba(0, 0, 0, 0.5)' : 'none' }), onChange: onExpandableChange }),
|
232
|
+
React.createElement(Hashtag, { index: activeIndex, tags: (_f = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.hashTags) !== null && _f !== void 0 ? _f : [], itemId: (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.itemId, itemType: ((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle })))));
|
233
233
|
}
|
234
234
|
return null;
|
235
235
|
}, [
|
@@ -7,6 +7,7 @@ const hooks_1 = require("../../../../core/hooks");
|
|
7
7
|
const Scroll_1 = tslib_1.__importDefault(require("../../../../materials/sxp/template/components/Scroll"));
|
8
8
|
const tool_1 = require("../../../../core/utils/tool");
|
9
9
|
const Hashtag = ({ tags, itemId, itemType, index, rec, hashTagStyle }) => {
|
10
|
+
var _a;
|
10
11
|
const [isShowMore, setIsShowMore] = (0, react_1.useState)(false);
|
11
12
|
const { setWaterFallData, setOpenHashtag, setCacheActiveIndex, waterFallData, setIsFromHashtag } = (0, hooks_1.useSxpDataSource)();
|
12
13
|
const handleClickTag = (data) => {
|
@@ -38,7 +39,8 @@ const Hashtag = ({ tags, itemId, itemType, index, rec, hashTagStyle }) => {
|
|
38
39
|
}
|
39
40
|
return (react_1.default.createElement("span", { style: { textDecoration: 'underline', cursor: 'pointer', color: '#fff' }, onClick: () => setIsShowMore(!isShowMore) }, isShowMore ? 'show less' : 'show more'));
|
40
41
|
}, [isShowMore, tags]);
|
41
|
-
|
42
|
+
console.log(hashTagStyle, '111');
|
43
|
+
return (react_1.default.createElement("div", { className: 'clc-sxp-bottom-hashtag', style: { marginTop: `${(_a = hashTagStyle === null || hashTagStyle === void 0 ? void 0 : hashTagStyle.marginTop) !== null && _a !== void 0 ? _a : 16}px` } },
|
42
44
|
react_1.default.createElement(Scroll_1.default, null, tags === null || tags === void 0 ? void 0 : tags.map((item, index) => (react_1.default.createElement(react_2.SwiperSlide, { key: index, hidden: !isShowMore ? index >= 6 : false, className: 'clc-sxp-bottom-hashtag-item', style: hashTagStyle, onClick: () => handleClickTag(item) },
|
43
45
|
react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: (0, tool_1.setFontForText)(`#${item}`, hashTagStyle) } })))))));
|
44
46
|
};
|
@@ -159,8 +159,6 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
|
|
159
159
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
160
160
|
if (!(videoRef === null || videoRef === void 0 ? void 0 : videoRef.current))
|
161
161
|
return;
|
162
|
-
if (activeIndex !== index)
|
163
|
-
return;
|
164
162
|
const item = data[index];
|
165
163
|
const videoDuration = ((_b = (_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 0).toFixed(2);
|
166
164
|
const videoCurrentTime = ((_d = (_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : 0).toFixed(2);
|
@@ -224,18 +222,19 @@ const VideoWidget = ({ rec, index, height, data, muted, activeIndex, videoPostCo
|
|
224
222
|
(_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.addEventListener('canplay', handlePlay);
|
225
223
|
(_k = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _k === void 0 ? void 0 : _k.addEventListener('waiting', handleWaiting);
|
226
224
|
return () => {
|
227
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
225
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
226
|
+
(_a = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
|
228
227
|
if (hls)
|
229
228
|
hls === null || hls === void 0 ? void 0 : hls.destroy();
|
230
229
|
setIsLoadFinish(false);
|
231
|
-
(
|
232
|
-
(
|
233
|
-
(
|
234
|
-
(
|
235
|
-
(
|
236
|
-
(
|
237
|
-
(
|
238
|
-
(
|
230
|
+
(_b = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('loadedmetadata', handleLoadedmetadata);
|
231
|
+
(_c = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('loadeddata', handLoadeddata);
|
232
|
+
(_d = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _d === void 0 ? void 0 : _d.removeEventListener('play', handleStartPlay);
|
233
|
+
(_e = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _e === void 0 ? void 0 : _e.removeEventListener('playing', handlePlaying);
|
234
|
+
(_f = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _f === void 0 ? void 0 : _f.removeEventListener('pause', handlePause);
|
235
|
+
(_g = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _g === void 0 ? void 0 : _g.removeEventListener('ended', handlePlay);
|
236
|
+
(_h = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _h === void 0 ? void 0 : _h.removeEventListener('canplay', handlePlay);
|
237
|
+
(_j = videoRef === null || videoRef === void 0 ? void 0 : videoRef.current) === null || _j === void 0 ? void 0 : _j.removeEventListener('waiting', handleWaiting);
|
239
238
|
};
|
240
239
|
}, [isActive, videoId, rec]);
|
241
240
|
(0, react_1.useEffect)(() => {
|
@@ -222,17 +222,17 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
|
|
222
222
|
};
|
223
223
|
}, [isShowMore]);
|
224
224
|
const renderBottom = (0, react_1.useCallback)((rec, index) => {
|
225
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
225
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
226
226
|
if (rec === null || rec === void 0 ? void 0 : rec.video) {
|
227
227
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
228
228
|
((_a = rec === null || rec === void 0 ? void 0 : rec.video) === null || _a === void 0 ? void 0 : _a.title) && !isShowMore && react_1.default.createElement("div", { className: 'clc-sxp-bottom-shadow' }),
|
229
|
-
react_1.default.createElement("div", { className: 'clc-sxp-bottom' },
|
229
|
+
react_1.default.createElement("div", { className: 'clc-sxp-bottom', style: { paddingBottom: `${(_b = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.bottomInfoDist) !== null && _b !== void 0 ? _b : 40}px` } },
|
230
230
|
react_1.default.createElement(Nudge_1.default, { nudge: nudge }),
|
231
231
|
(globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) === undefined || (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isShowCTA) ? (react_1.default.createElement("div", { className: 'clc-sxp-bottom-card' },
|
232
232
|
react_1.default.createElement(RenderCard_1.default, { rec: rec, index: index, tempMap: tempMap, resolver: resolver }))) : null,
|
233
233
|
react_1.default.createElement("div", null,
|
234
|
-
react_1.default.createElement(ExpandableText_1.default, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (
|
235
|
-
react_1.default.createElement(Hashtag_1.default, { index: activeIndex, tags: (
|
234
|
+
react_1.default.createElement(ExpandableText_1.default, { className: 'clc-sxp-bottom-text', isPost: true, foldText: tipText === null || tipText === void 0 ? void 0 : tipText.foldText, unfoldText: tipText === null || tipText === void 0 ? void 0 : tipText.unfoldText, text: (_d = (_c = rec === null || rec === void 0 ? void 0 : rec.video) === null || _c === void 0 ? void 0 : _c.title) !== null && _d !== void 0 ? _d : '', style: Object.assign(Object.assign({}, descStyle), { textShadow: (globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.isOpenTextShadow) ? '2px 2px 4px rgba(0, 0, 0, 0.5)' : 'none' }), onChange: onExpandableChange }),
|
235
|
+
react_1.default.createElement(Hashtag_1.default, { index: activeIndex, tags: (_f = (_e = rec === null || rec === void 0 ? void 0 : rec.video) === null || _e === void 0 ? void 0 : _e.hashTags) !== null && _f !== void 0 ? _f : [], itemId: (_g = rec === null || rec === void 0 ? void 0 : rec.video) === null || _g === void 0 ? void 0 : _g.itemId, itemType: ((_h = rec === null || rec === void 0 ? void 0 : rec.video) === null || _h === void 0 ? void 0 : _h.itemId) ? 'VIDEO' : null, rec: rec, hashTagStyle: hashTagStyle })))));
|
236
236
|
}
|
237
237
|
return null;
|
238
238
|
}, [
|