pixuireactcomponents 1.4.4 → 1.4.6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pixuireactcomponents",
-    "version": "1.4.4",
+    "version": "1.4.6",
     "description": "pixui react components",
     "main": "index.js",
     "scripts": {

package/src/components/react/app/loadChecker/LoadChecker.js

@@ -12,8 +12,9 @@ import { useEffect, useRef, useState } from 'preact/hooks';
 export var LoadChecker = function (props) {
     var children = props.children, _a = props.rootClass, rootClass = _a === void 0 ? '' : _a, _b = props.timeoutPeriod, timeoutPeriod = _b === void 0 ? 500 : _b, onLoad = props.onLoad;
     var _c = useState(false), loaded = _c[0], setLoaded = _c[1];
-    var _d = useState(0), total = _d[0], setTotal = _d[1];
+    var _d = useState(false), collectFinish = _d[0], setCollectFinish = _d[1];
     var _e = useState([]), loadedElements = _e[0], setLoadedElements = _e[1];
+    var _f = useState([]), collectSrcs = _f[0], setCollectSrcs = _f[1];
     var ref = useRef(null);
     //0.5s后直接显示
     useEffect(function () {
@@ -25,42 +26,60 @@ export var LoadChecker = function (props) {
             setLoaded(true);
             return;
         }
-        setTotal(getLoadCount(node, 0));
+        getLoadCount(node);
+        setCollectFinish(true);
         return function () {
             clearTimeout(timer);
         };
     }, []);
-    var getLoadCount = function (node, preCount) {
+    useEffect(function () {
+        if (!collectFinish)
+            return;
+        if (collectSrcs.length == 0 || loadedElements.length >= collectSrcs.length) {
+            setLoaded(true);
+            onLoad && onLoad();
+        }
+    }, [loadedElements, collectFinish]);
+    var getLoadCount = function (node) {
         if (!node)
-            return preCount;
-        var temp = 0;
+            return;
         if (node.tagName.toLowerCase() === 'img' || (node.style && node.style.backgroundImage)) {
-            temp++;
-            //   console.log(node.id);
+            // node.id = 'img_' + cnt++;
+            setCollectSrcs(function (prevRecords) {
+                var src = getEleSrc(node);
+                if (src == '' || prevRecords.includes(src)) {
+                    return prevRecords;
+                }
+                else {
+                    return __spreadArray(__spreadArray([], prevRecords, true), [src], false);
+                }
+            });
             node.addEventListener('load', handleLoad);
         }
         node.childNodes &&
             node.childNodes.forEach(function (child) {
-                temp += getLoadCount(child, temp);
+                getLoadCount(child);
             });
-        return temp;
+        return;
     };
-    useEffect(function () {
-        if (loaded && onLoad) {
-            onLoad();
+    var getEleSrc = function (node) {
+        if (node.tagName.toLowerCase() === 'img' || (node.style && node.style.backgroundImage)) {
+            var src = node.src || node.style.backgroundImage || '';
+            if (src.startsWith('url(')) {
+                src = src.substring(4, src.length - 1);
+            }
+            return src;
         }
-    }, [loaded]);
+        return '';
+    };
     var handleLoad = function (event) {
         setLoadedElements(function (prevElements) {
-            if (prevElements.includes(event.target)) {
+            var src = getEleSrc(event.target);
+            if (src == '' || prevElements.includes(src)) {
                 return prevElements;
             }
             else {
-                var newElements = __spreadArray(__spreadArray([], prevElements, true), [event.target], false);
-                if (newElements.length >= total) {
-                    setLoaded(true);
-                }
-                return newElements;
+                return __spreadArray(__spreadArray([], prevElements, true), [src], false);
             }
         });
     };

package/src/components/react/app/videoPlayer/VideoPlayer.js

@@ -52,7 +52,7 @@ export var VideoPlayer = function (props) {
     var _b = props.playUrl, playUrl = _b === void 0 ? '' : _b, _c = props.autoPlay, autoPlay = _c === void 0 ? true : _c, playEvent = props.playEvent, elementClass = props.elementClass, _d = props.hideSliderDuration, hideSliderDuration = _d === void 0 ? 3000 : _d, sliderBG = props.sliderBG, videoDuration = props.videoDuration, compRef = props.compRef, rootClassName = props.rootClassName;
     var isStreaming = !playUrl.endsWith('.mp4');
     var refVideo = useRef(null);
-    var _e = useState(VideoStatus.Pause), videoStatus = _e[0], setVideoStatus = _e[1];
+    var _e = useState(VideoStatus.Loading), videoStatus = _e[0], setVideoStatus = _e[1];
     var _f = useState(0), currentTime = _f[0], setCurrentTime = _f[1];
     var _g = useState(0), totalTime = _g[0], setTotalTime = _g[1];
     var _h = useState(false), showSlider = _h[0], setShowSlider = _h[1];
@@ -155,6 +155,10 @@ export var VideoPlayer = function (props) {
         videoLog('-----------onpause');
         setVideoStatus(VideoStatus.Pause);
     };
+    var onwaiting = function () {
+        videoLog('-----------onwaiting');
+        setVideoStatus(VideoStatus.Loading);
+    };
     var onended = function () {
         // 视频播放结束
         videoLog('-----------onended');
@@ -226,7 +230,7 @@ export var VideoPlayer = function (props) {
     }
     videoLog('currentTime', currentTime, 'totalTime', totalTime);
     return (h("div", { className: rootClassName, ref: rootRef },
-        h("video", { ref: refVideo, src: playUrl, "object-fit": "no", autoPlay: autoPlay, style: { width: '100%', height: '100%' }, onPlaying: onplaying, onPlay: onplaying, onError: onerror, onEnded: onended, onPause: onpause, onLoadStart: function () {
+        h("video", { ref: refVideo, src: playUrl, "object-fit": "no", autoPlay: autoPlay, style: { width: '100%', height: '100%' }, onPlaying: onplaying, onPlay: onplaying, onError: onerror, onEnded: onended, onPause: onpause, onWaiting: onwaiting, onLoadStart: function () {
                 console.warn('onloadstart');
             }, onLoadedData: function () {
                 console.warn('onloadeddata');