pb-sxp-ui 1.0.14 → 1.0.15

package/es/core/components/SxpPageRender/PictureGroup/Picture.js

@@ -1,10 +1,13 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useSxpDataSource } from '../../../../core/hooks';
 const Picture = (props) => {
     const { src, height, width } = props;
     const [blur, setBlur] = useState(false);
     const imgDom = useRef(null);
     const { sxpParameter } = useSxpDataSource();
+    const getAvifToPng = useCallback((src) => {
+        return src.indexOf('avif') !== -1 ? `${src}?imageMogr2/format/png` : src;
+    }, []);
     useEffect(() => {
         if (imgDom.current === null || src === '') {
             return;
@@ -19,22 +22,22 @@ const Picture = (props) => {
                 setBlur(true);
             }
         };
-        imgDom.current.src = src;
-    }, [src]);
+        imgDom.current.src = getAvifToPng(src);
+    }, [src, getAvifToPng]);
     return (React.createElement("div", { style: {
             overflow: 'hidden',
             height,
             width: '100%',
             position: 'relative'
         } },
-        React.createElement("img", { ref: imgDom, loading: 'lazy', src: src !== null && src !== void 0 ? src : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, style: {
+        React.createElement("img", { ref: imgDom, loading: 'lazy', src: src ? getAvifToPng(src) : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, style: {
                 height: '100%',
                 width: '100%',
                 objectFit: 'cover',
                 filter: blur ? 'blur(10px)' : 'none',
                 transform: blur ? 'scale(1.2)' : 'none'
             } }),
-        blur && (React.createElement("img", { ref: imgDom, src: src, loading: 'lazy', style: {
+        blur && (React.createElement("img", { ref: imgDom, src: getAvifToPng(src), loading: 'lazy', style: {
                 width: '100%',
                 objectFit: 'contain',
                 position: 'absolute',

package/es/core/components/SxpPageRender/index.js

@@ -35,7 +35,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData } = useSxpDataSource();
     const { productView } = useEventReport();
     const isShowFingerTip = useMemo(() => {
-        return data.length > 0 && !loading && !getFeUserId;
+        return data.length > 0 && !loading && getFeUserId();
     }, [data, loading]);
     const handleH5EnterLink = useCallback(() => {
         if (data.length <= 0) {

package/es/core/utils/localStore.d.ts

@@ -1,4 +1,5 @@
 export declare const FAKE_USER_KEY = "SXP_FAKE_USER_ID";
+export declare const FAKE_USER_STATE = "FAKE_USER_STATE";
 export declare const storeAndLoadFeUserId: () => string;
 export declare const removeFeUserId: () => void;
 export declare const getFeUserId: () => boolean;

package/es/core/utils/localStore.js

@@ -1,6 +1,7 @@
 import { isEmpty } from 'lodash';
 import { uuid } from './tool';
 export const FAKE_USER_KEY = 'SXP_FAKE_USER_ID';
+export const FAKE_USER_STATE = 'FAKE_USER_STATE';
 export const storeAndLoadFeUserId = () => {
     let fakeUserId = window.localStorage.getItem(FAKE_USER_KEY);
     if (isEmpty(fakeUserId)) {
@@ -13,6 +14,9 @@ export const removeFeUserId = () => {
     window.localStorage.removeItem(FAKE_USER_KEY);
 };
 export const getFeUserId = () => {
-    const fakeUserId = window.localStorage.getItem(FAKE_USER_KEY);
-    return isEmpty(fakeUserId);
+    const fakeUserState = window.localStorage.getItem(FAKE_USER_STATE);
+    if (isEmpty(fakeUserState)) {
+        window.localStorage.setItem(FAKE_USER_STATE, 'true');
+    }
+    return isEmpty(fakeUserState);
 };

package/lib/core/components/SxpPageRender/PictureGroup/Picture.js

@@ -8,6 +8,9 @@ const Picture = (props) => {
     const [blur, setBlur] = (0, react_1.useState)(false);
     const imgDom = (0, react_1.useRef)(null);
     const { sxpParameter } = (0, hooks_1.useSxpDataSource)();
+    const getAvifToPng = (0, react_1.useCallback)((src) => {
+        return src.indexOf('avif') !== -1 ? `${src}?imageMogr2/format/png` : src;
+    }, []);
     (0, react_1.useEffect)(() => {
         if (imgDom.current === null || src === '') {
             return;
@@ -22,22 +25,22 @@ const Picture = (props) => {
                 setBlur(true);
             }
         };
-        imgDom.current.src = src;
-    }, [src]);
+        imgDom.current.src = getAvifToPng(src);
+    }, [src, getAvifToPng]);
     return (react_1.default.createElement("div", { style: {
             overflow: 'hidden',
             height,
             width: '100%',
             position: 'relative'
         } },
-        react_1.default.createElement("img", { ref: imgDom, loading: 'lazy', src: src !== null && src !== void 0 ? src : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, style: {
+        react_1.default.createElement("img", { ref: imgDom, loading: 'lazy', src: src ? getAvifToPng(src) : sxpParameter === null || sxpParameter === void 0 ? void 0 : sxpParameter.placeholder_image, style: {
                 height: '100%',
                 width: '100%',
                 objectFit: 'cover',
                 filter: blur ? 'blur(10px)' : 'none',
                 transform: blur ? 'scale(1.2)' : 'none'
             } }),
-        blur && (react_1.default.createElement("img", { ref: imgDom, src: src, loading: 'lazy', style: {
+        blur && (react_1.default.createElement("img", { ref: imgDom, src: getAvifToPng(src), loading: 'lazy', style: {
                 width: '100%',
                 objectFit: 'contain',
                 position: 'absolute',

package/lib/core/components/SxpPageRender/index.js

@@ -38,7 +38,7 @@ const SxpPageRender = ({ globalConfig, descStyle, containerHeight = window.inner
     const { loadVideos, bffEventReport, loading, setPopupDetailData, ctaEvent, swiperRef, waterFallData, setOpenHashtag, appDomain, openHashtag, loadingImage, isFromHashtag, popupDetailData } = (0, hooks_1.useSxpDataSource)();
     const { productView } = (0, useEventReport_1.useEventReport)();
     const isShowFingerTip = (0, react_1.useMemo)(() => {
-        return data.length > 0 && !loading && !localStore_1.getFeUserId;
+        return data.length > 0 && !loading && (0, localStore_1.getFeUserId)();
     }, [data, loading]);
     const handleH5EnterLink = (0, react_1.useCallback)(() => {
         if (data.length <= 0) {

package/lib/core/utils/localStore.d.ts

@@ -1,4 +1,5 @@
 export declare const FAKE_USER_KEY = "SXP_FAKE_USER_ID";
+export declare const FAKE_USER_STATE = "FAKE_USER_STATE";
 export declare const storeAndLoadFeUserId: () => string;
 export declare const removeFeUserId: () => void;
 export declare const getFeUserId: () => boolean;

package/lib/core/utils/localStore.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getFeUserId = exports.removeFeUserId = exports.storeAndLoadFeUserId = exports.FAKE_USER_KEY = void 0;
+exports.getFeUserId = exports.removeFeUserId = exports.storeAndLoadFeUserId = exports.FAKE_USER_STATE = exports.FAKE_USER_KEY = void 0;
 const lodash_1 = require("lodash");
 const tool_1 = require("./tool");
 exports.FAKE_USER_KEY = 'SXP_FAKE_USER_ID';
+exports.FAKE_USER_STATE = 'FAKE_USER_STATE';
 const storeAndLoadFeUserId = () => {
     let fakeUserId = window.localStorage.getItem(exports.FAKE_USER_KEY);
     if ((0, lodash_1.isEmpty)(fakeUserId)) {
@@ -18,7 +19,10 @@ const removeFeUserId = () => {
 };
 exports.removeFeUserId = removeFeUserId;
 const getFeUserId = () => {
-    const fakeUserId = window.localStorage.getItem(exports.FAKE_USER_KEY);
-    return (0, lodash_1.isEmpty)(fakeUserId);
+    const fakeUserState = window.localStorage.getItem(exports.FAKE_USER_STATE);
+    if ((0, lodash_1.isEmpty)(fakeUserState)) {
+        window.localStorage.setItem(exports.FAKE_USER_STATE, 'true');
+    }
+    return (0, lodash_1.isEmpty)(fakeUserState);
 };
 exports.getFeUserId = getFeUserId;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pb-sxp-ui",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "description": "React enterprise-class UI components",
   "main": "dist/index.cjs",
   "module": "dist/index.js",