pixuireactcomponents 1.3.69 → 1.3.71

package/package.json

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

package/src/components/react/app/videoPlayer/VideoPlayer.d.ts

@@ -0,0 +1,25 @@
+import { h } from 'preact';
+export interface VideoPlayerProps {
+    playUrl: string;
+    autoPlay?: boolean;
+    playEvent: {
+        onPlay?: () => void;
+        onPause?: () => void;
+        onEnded?: () => void;
+        onFirstFrame?: () => void;
+    };
+    elementClass: {
+        playIcon?: string;
+        pauseIcon?: string;
+        reloadIcon?: string;
+    };
+    sliderBG: {
+        outerBG?: string;
+        innerBG?: string;
+        dotBG?: string;
+    };
+    durations: {
+        hideSliderDuration?: number;
+    };
+}
+export declare const VideoPlayer: (props: VideoPlayerProps) => h.JSX.Element;

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

@@ -0,0 +1,239 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { createRef, h } from 'preact';
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { Slider } from '../slider/Slider';
+var videoWrapperStyle = {
+    width: '100%',
+    height: '100%',
+    position: 'absolute',
+    // backgroundColor: '#FFF00066'
+};
+var screenClickerStyle = {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+};
+var loadingContainerStyle = {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+};
+// 4个视频播放态
+var VideoStatus;
+(function (VideoStatus) {
+    VideoStatus[VideoStatus["Loading"] = 0] = "Loading";
+    // LoadError,
+    VideoStatus[VideoStatus["Playing"] = 1] = "Playing";
+    VideoStatus[VideoStatus["Pause"] = 2] = "Pause";
+    VideoStatus[VideoStatus["End"] = 3] = "End";
+})(VideoStatus || (VideoStatus = {}));
+export var VideoPlayer = function (props) {
+    var playUrl = props.playUrl, _a = props.autoPlay, autoPlay = _a === void 0 ? true : _a, playEvent = props.playEvent, elementClass = props.elementClass, _b = props.durations, durations = _b === void 0 ? { hideSliderDuration: 3000 } : _b, sliderBG = props.sliderBG;
+    var refVideo = createRef();
+    var hideSliderDuration = 1000;
+    var _c = useState(VideoStatus.Loading), videoStatus = _c[0], setVideoStatus = _c[1];
+    var _d = useState(0), currentTime = _d[0], setCurrentTime = _d[1];
+    var _e = useState(0), totalTime = _e[0], setTotalTime = _e[1];
+    var _f = useState(false), showSlider = _f[0], setShowSlider = _f[1];
+    var sliderTimmer = useRef(null);
+    var updateInfoTimmer = useRef(null);
+    var updatePlayTime = function () {
+        console.log('updatePlayTime-----------------pp1', videoStatus);
+        console.log('updatePlayTime-----------------pp2', refVideo.current.currentTime);
+        console.log('updatePlayTime-----------------pp3', refVideo.current.duration);
+        if (videoStatus != VideoStatus.Playing)
+            return;
+        var playTime = refVideo.current.currentTime;
+        var currentSeconds = Math.floor(playTime / 1000 + 0.5);
+        var duration = refVideo.current.duration;
+        var totalSeconds = Math.floor(duration / 1000 + 0.5);
+        setCurrentTime(currentSeconds);
+        setTotalTime(totalSeconds);
+        console.log('updatePlayTime-----------------', 'currentSeconds:', currentSeconds, 'totalSeconds:', totalSeconds, Math.floor((currentTime / totalTime) * 100 + 0.5));
+    };
+    //用于更新函数环境
+    var updatePlayTimeRef = useRef(updatePlayTime);
+    useEffect(function () {
+        updatePlayTimeRef.current = updatePlayTime;
+    });
+    useEffect(function () {
+        updatePlayTimeRef.current = updatePlayTime;
+        updateInfoTimmer.current = setInterval(function () {
+            updatePlayTimeRef.current();
+        }, 1000);
+        return function () {
+            clearInterval(sliderTimmer.current);
+        };
+    }, []);
+    // 开始拖就长显Bar
+    var onSliderDragStart = function () {
+        console.log('onDragStart-----------------');
+        clearTimeout(sliderTimmer.current);
+        refVideo.current.pause();
+    };
+    var onSliderDrag = function (value) {
+        console.warn('value: ========================', value);
+        var totlaTime = (value / 100) * refVideo.current.duration;
+        var playSeconds = Math.floor(totlaTime / 1000 + 0.5);
+        setCurrentTime(playSeconds);
+    };
+    // 结束拖就3秒隐藏Bar
+    var onSliderDragEnd = function () {
+        console.warn('onDragEnd-----------------');
+        clearTimeout(sliderTimmer.current);
+        sliderTimmer.current = setTimeout(function () {
+            setShowSlider(false);
+        }, durations.hideSliderDuration);
+        refVideo.current.play();
+    };
+    var onplaying = function () {
+        // 加载第一帧画面
+        console.warn('-----------onplaying');
+        setVideoStatus(VideoStatus.Playing);
+        playEvent.onPlay && playEvent.onPlay();
+        clearInterval(updateInfoTimmer.current);
+        updateInfoTimmer.current = setInterval(function () {
+            updatePlayTimeRef.current();
+        }, 1000);
+    };
+    var onerror = function (error) {
+        console.error('----------onerror', JSON.stringify(error));
+        // 播放错误，比如给一个无法播放的url
+    };
+    var onpause = function () {
+        console.warn('-----------onpause');
+        setVideoStatus(VideoStatus.Pause);
+    };
+    var onended = function () {
+        // 视频播放结束
+        console.warn('-----------onended');
+        setVideoStatus(VideoStatus.End);
+        clearInterval(updateInfoTimmer.current);
+        setCurrentTime(0);
+        clearTimeout(sliderTimmer.current);
+        setShowSlider(true);
+        playEvent.onEnded && playEvent.onEnded();
+    };
+    var updateSliderHideTimmer = function () {
+        clearTimeout(sliderTimmer.current);
+        sliderTimmer.current = setTimeout(function () {
+            setShowSlider(false);
+        }, durations.hideSliderDuration);
+    };
+    var onScreenClick = function () {
+        clearTimeout(sliderTimmer.current);
+        if (showSlider) {
+            setShowSlider(false);
+        }
+        else {
+            setShowSlider(true);
+            updateSliderHideTimmer();
+        }
+    };
+    var onIconClick = function () {
+        switchPlayState();
+    };
+    var onPause = function () {
+        console.warn('onPause');
+        setVideoStatus(VideoStatus.Pause);
+        playEvent.onPause && playEvent.onPause();
+    };
+    var onFirstFrame = function () {
+        console.warn('onFirstFrame');
+        playEvent.onFirstFrame && playEvent.onFirstFrame();
+    };
+    var switchPlayState = function () {
+        console.log('switchPlayState ', videoStatus);
+        if (videoStatus == VideoStatus.Playing) {
+            refVideo.current.pause();
+        }
+        else if (videoStatus == VideoStatus.Pause) {
+            refVideo.current.play();
+            setShowSlider(false);
+            clearInterval(sliderTimmer.current);
+        }
+        else if (videoStatus == VideoStatus.End) {
+            refVideo.current.load();
+        }
+    };
+    console.log('currentTime', currentTime, 'totalTime', totalTime);
+    return (h("div", { style: {
+            width: '100%',
+            height: '100%',
+            position: 'absolute',
+            backgroundColor: 'rgba(0, 0, 0,1)',
+        } },
+        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 () {
+                console.warn('onloadstart');
+            }, onLoadedData: function () {
+                console.warn('onloadeddata');
+            }, onCanPlay: onplaying, 
+            //@ts-ignore
+            onfirstframe: onFirstFrame }),
+        h("div", { style: screenClickerStyle, onClick: function (e) {
+                console.log('screenClickerStyle click');
+                e.stopPropagation();
+                onScreenClick();
+            } }, showSlider ? (h("div", { className: videoStatus == VideoStatus.Playing
+                ? elementClass.pauseIcon
+                : videoStatus == VideoStatus.Pause
+                    ? elementClass.playIcon
+                    : elementClass.reloadIcon, onClick: function (e) {
+                e.stopPropagation();
+                onIconClick();
+            } })) : null),
+        showSlider ? (h("div", { style: {
+                width: '100%',
+                height: '15px',
+                fontSize: '18px',
+                color: '#FFFFFF',
+                flexDirection: 'row',
+                justifyContent: 'spaceAround',
+                alignItems: 'center',
+                position: 'absolute',
+                bottom: '10px',
+                margin: '10px',
+                marginBottom: '30px',
+            } },
+            h("text", null, FormatSecondCountDownTime(currentTime)),
+            h("div", { style: { marginRight: '30px', marginLeft: '30px' } },
+                h(Slider, __assign({}, progressData, { outerBg: sliderBG.outerBG || '', innerBg: sliderBG.innerBG || '', dotBg: sliderBG.dotBG || '', onDrag: onSliderDrag, onDragEnd: onSliderDragEnd, onDragStart: onSliderDragStart, discrete: totalTime > 0 ? Math.floor((currentTime / totalTime) * 100 + 0.5) : 0 }))),
+            h("text", null, FormatSecondCountDownTime(totalTime)))) : null));
+};
+var progressData = {
+    percent: 0,
+    wrapperHeight: 15,
+    wrapperWidth: window.innerWidth - 180,
+    height: 3,
+    dotWidth: 12,
+    dotHeight: 12,
+    dotWrapperWidth: 42,
+    dotWrapperHeight: 42,
+    isDiscrete: true,
+    maxDiscrete: 100,
+    outerBg: '',
+    innerBg: '',
+    dotBg: '',
+    onDragStart: null,
+    onDrag: null,
+    onDragEnd: null,
+};
+var FormatSecondCountDownTime = function (seconds) {
+    var minutes = Math.floor(seconds / 60);
+    var remainingSeconds = seconds % 60;
+    var formattedMinutes = minutes < 10 ? "0".concat(minutes) : "".concat(minutes);
+    var formattedSeconds = remainingSeconds < 10 ? "0".concat(remainingSeconds) : "".concat(remainingSeconds);
+    return "".concat(formattedMinutes, ":").concat(formattedSeconds);
+};

package/src/components/tools/assetCache.d.ts

@@ -8,10 +8,10 @@ export declare namespace assetCache {
      * @param force 是否强制缓存，如果为true，会强制重新下载并覆盖本地缓存
      * @returns 返回本地缓存文件路径
      */
-    const cache: (url: string, force?: boolean) => Promise<string>;
+    const cache: (url: string, force?: boolean, retryTimes?: number) => Promise<string>;
     /**
      * 返回url在本地的缓存文件路径，无缓存时返回空字符串
      */
     const getAssetPath: (url: string) => string;
-    const download: (url: string, responseType: 'arraybuffer' | 'json' | 'text') => Promise<string>;
+    const download: (url: string, responseType: 'arraybuffer' | 'json' | 'text', retryTimes?: number) => Promise<string>;
 }

package/src/components/tools/assetCache.js

@@ -54,51 +54,66 @@ export var assetCache;
      * @param force 是否强制缓存，如果为true，会强制重新下载并覆盖本地缓存
      * @returns 返回本地缓存文件路径
      */
-    assetCache.cache = function (url, force) { return __awaiter(_this, void 0, void 0, function () {
-        var _this = this;
-        return __generator(this, function (_a) {
-            console.log('cacheAsset---', url);
-            return [2 /*return*/, new Promise(function (resolve, reject) {
-                    if (!isJssdkEnv()) {
-                        console.log('非jssdk环境');
-                        reject();
-                        return;
-                    }
-                    var lib = LibMgr.getInstance().getMainLib();
-                    var localPath = getLocalPath(url);
-                    if (!force) {
-                        if (lib.fileExists(localPath)) {
-                            console.log('cacheAsset file exist', localPath);
-                            resolve(localPath);
+    assetCache.cache = function (url, force, retryTimes) {
+        if (retryTimes === void 0) { retryTimes = 3; }
+        return __awaiter(_this, void 0, void 0, function () {
+            var _this = this;
+            return __generator(this, function (_a) {
+                console.log('cacheAsset---', url);
+                return [2 /*return*/, new Promise(function (resolve, reject) {
+                        if (!isJssdkEnv()) {
+                            console.log('非jssdk环境');
+                            reject();
                             return;
                         }
-                    }
-                    var xhr = new XMLHttpRequest();
-                    xhr.open('GET', url, true);
-                    xhr.responseType = 'arraybuffer';
-                    xhr.onload = function () { return __awaiter(_this, void 0, void 0, function () {
-                        var buf;
-                        return __generator(this, function (_a) {
-                            if (xhr.status === 200) {
-                                buf = Buffer.from(xhr.response, 'binary').buffer;
-                                lib.saveToFile(localPath, buf);
+                        var lib = LibMgr.getInstance().getMainLib();
+                        var localPath = getLocalPath(url);
+                        if (!force) {
+                            if (lib.fileExists(localPath)) {
+                                console.log('cacheAsset file exist', localPath);
                                 resolve(localPath);
+                                return;
+                            }
+                        }
+                        var xhr = new XMLHttpRequest();
+                        xhr.open('GET', url, true);
+                        xhr.responseType = 'arraybuffer';
+                        xhr.onload = function () { return __awaiter(_this, void 0, void 0, function () {
+                            var buf;
+                            return __generator(this, function (_a) {
+                                if (xhr.status === 200) {
+                                    buf = Buffer.from(xhr.response, 'binary').buffer;
+                                    lib.saveToFile(localPath, buf);
+                                    resolve(localPath);
+                                }
+                                else {
+                                    console.warn('cacheAsset xhr statue!=200', xhr.status);
+                                    if (retryTimes > 0) {
+                                        console.log('retry cacheAsset', retryTimes);
+                                        assetCache.cache(url, force, retryTimes - 1).then(resolve, reject);
+                                    }
+                                    else {
+                                        reject();
+                                    }
+                                }
+                                return [2 /*return*/];
+                            });
+                        }); };
+                        xhr.onerror = function () {
+                            console.warn('cacheAsset XHR error', xhr.status);
+                            if (retryTimes > 0) {
+                                console.log('retry cacheAsset', retryTimes);
+                                assetCache.cache(url, force, retryTimes - 1).then(resolve, reject);
                             }
                             else {
-                                console.warn('cacheAsset xhr statue!=200', xhr.status);
                                 reject();
                             }
-                            return [2 /*return*/];
-                        });
-                    }); };
-                    xhr.onerror = function () {
-                        console.warn('cacheAsset XHR error', xhr.status);
-                        reject();
-                    };
-                    xhr.send();
-                })];
+                        };
+                        xhr.send();
+                    })];
+            });
         });
-    }); };
+    };
     /**
      * 返回url在本地的缓存文件路径，无缓存时返回空字符串
      */
@@ -115,7 +130,8 @@ export var assetCache;
         }
         return localPath;
     };
-    assetCache.download = function (url, responseType) {
+    assetCache.download = function (url, responseType, retryTimes) {
+        if (retryTimes === void 0) { retryTimes = 3; }
         console.log('download---', url);
         return new Promise(function (resolve, reject) {
             var xhr = new XMLHttpRequest();
@@ -128,14 +144,26 @@ export var assetCache;
                     }
                     else {
                         console.warn('cacheAsset xhr statue!=200', xhr.status);
-                        reject();
+                        if (retryTimes > 0) {
+                            console.log('retry cacheAsset', retryTimes);
+                            assetCache.download(url, responseType, retryTimes - 1).then(resolve, reject);
+                        }
+                        else {
+                            reject();
+                        }
                     }
                     return [2 /*return*/];
                 });
             }); };
             xhr.onerror = function () {
                 console.warn('cacheAsset XHR error', xhr.status);
-                reject();
+                if (retryTimes > 0) {
+                    console.log('retry cacheAsset', retryTimes);
+                    assetCache.download(url, responseType, retryTimes - 1).then(resolve, reject);
+                }
+                else {
+                    reject();
+                }
             };
             xhr.send();
         });