pixuireactcomponents 1.4.0 → 1.4.1

package/package.json

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

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

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

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

@@ -21,12 +21,6 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 import { 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%',
@@ -34,11 +28,6 @@ var screenClickerStyle = {
     alignItems: 'center',
     justifyContent: 'center',
 };
-var loadingContainerStyle = {
-    position: 'absolute',
-    width: '100%',
-    height: '100%',
-};
 // 4个视频播放态
 var VideoStatus;
 (function (VideoStatus) {
@@ -48,7 +37,7 @@ var VideoStatus;
     VideoStatus[VideoStatus["Pause"] = 2] = "Pause";
     VideoStatus[VideoStatus["End"] = 3] = "End";
 })(VideoStatus || (VideoStatus = {}));
-var openLog = false;
+var openLog = true;
 var videoLog = function () {
     var msg = [];
     for (var _i = 0; _i < arguments.length; _i++) {
@@ -59,27 +48,39 @@ var videoLog = function () {
     }
 };
 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, videoDuration = props.videoDuration, isStreaming = props.isStreaming;
+    var _a;
+    var playUrl = props.playUrl, _b = props.autoPlay, autoPlay = _b === void 0 ? true : _b, playEvent = props.playEvent, elementClass = props.elementClass, _c = props.hideSliderDuration, hideSliderDuration = _c === void 0 ? 3000 : _c, sliderBG = props.sliderBG, videoDuration = props.videoDuration, compRef = props.compRef, rootClassName = props.rootClassName;
+    var isStreaming = !playUrl.endsWith('.mp4');
     var refVideo = useRef(null);
-    // const 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 _d = useState(VideoStatus.Pause), videoStatus = _d[0], setVideoStatus = _d[1];
+    var _e = useState(0), currentTime = _e[0], setCurrentTime = _e[1];
+    var _f = useState(0), totalTime = _f[0], setTotalTime = _f[1];
+    var _g = useState(false), showSlider = _g[0], setShowSlider = _g[1];
     var sliderTimmer = useRef(null);
+    var rootRef = useRef();
     var updatePlayTime = function () {
-        // videoLog('updatePlayTime----------------');
-        // videoLog('updatePlayTime-----------------pp3', refVideo.current.duration);
         if (videoStatus != VideoStatus.Playing || isStreaming)
             return;
         var playTime = refVideo.current.currentTime;
         var currentSeconds = Math.floor(playTime / 1000 + 0.5);
-        var duration = videoDuration || refVideo.current.duration;
+        var duration = getDuration();
+        if (duration == undefined) {
+            console.error('该版本的pixui不支持自动获取视频时长，请使用videoDuration设置视频时长');
+        }
         var totalSeconds = Math.floor(duration / 1000 + 0.5);
         setCurrentTime(currentSeconds);
         setTotalTime(totalSeconds);
         videoLog('updatePlayTime-----------------', 'currentSeconds:', currentSeconds, 'totalSeconds:', totalSeconds, Math.floor((currentTime / totalTime) * 100 + 0.5));
     };
+    var getDuration = function () {
+        try {
+            return videoDuration || refVideo.current.duration;
+        }
+        catch (e) {
+            console.error('该版本的pixui不支持自动获取视频时长，请手动传入videoDuration');
+            return 0;
+        }
+    };
     useEffect(function () {
         videoLog('Video Status changed: ', videoStatus);
     }, [videoStatus]);
@@ -93,6 +94,17 @@ export var VideoPlayer = function (props) {
         var interval = setInterval(function () {
             updatePlayTimeFunRef.current();
         }, 1000);
+        if (isStreaming)
+            return;
+        var playTime = refVideo.current.currentTime;
+        var currentSeconds = Math.floor(playTime / 1000 + 0.5);
+        var duration = getDuration();
+        if (duration == undefined) {
+            console.error('该版本的pixui不支持自动获取视频时长，请手动传入videoDuration');
+        }
+        var totalSeconds = Math.floor(duration / 1000 + 0.5);
+        setCurrentTime(currentSeconds);
+        setTotalTime(totalSeconds);
         return function () {
             clearInterval(interval);
             clearInterval(sliderTimmer.current);
@@ -105,18 +117,28 @@ export var VideoPlayer = function (props) {
         refVideo.current.pause();
     };
     var onSliderDrag = function (value) {
-        console.warn('value: ========================', value);
-        var totlaTime = (value / 100) * (videoDuration || refVideo.current.duration);
+        var totlaTime = (value / 100) * getDuration();
         var playSeconds = Math.floor(totlaTime / 1000 + 0.5);
+        console.log('onSliderDrag, set currentTime:', playSeconds);
         setCurrentTime(playSeconds);
+        refVideo.current.currentTime = totlaTime / 1000;
+    };
+    var setShowUI = function (show, direct) {
+        if (direct === void 0) { direct = false; }
+        if (!direct && hideSliderDuration <= 0) {
+            return;
+        }
+        setShowSlider(show);
     };
     // 结束拖就3秒隐藏Bar
     var onSliderDragEnd = function () {
         videoLog('onDragEnd-----------------');
-        clearTimeout(sliderTimmer.current);
-        sliderTimmer.current = setTimeout(function () {
-            setShowSlider(false);
-        }, durations.hideSliderDuration);
+        if (hideSliderDuration > 0) {
+            clearTimeout(sliderTimmer.current);
+            sliderTimmer.current = setTimeout(function () {
+                setShowUI(false);
+            }, hideSliderDuration);
+        }
         refVideo.current.play();
     };
     var onplaying = function () {
@@ -139,28 +161,35 @@ export var VideoPlayer = function (props) {
         setVideoStatus(VideoStatus.End);
         setCurrentTime(0);
         clearTimeout(sliderTimmer.current);
-        setShowSlider(true);
+        setShowUI(true);
         (playEvent === null || playEvent === void 0 ? void 0 : playEvent.onEnded) && playEvent.onEnded();
     };
     var updateSliderHideTimmer = function () {
         clearTimeout(sliderTimmer.current);
-        sliderTimmer.current = setTimeout(function () {
-            setShowSlider(false);
-        }, durations.hideSliderDuration);
+        if (hideSliderDuration > 0) {
+            sliderTimmer.current = setTimeout(function () {
+                setShowUI(false);
+            }, hideSliderDuration);
+        }
     };
     var onScreenClick = function () {
         clearTimeout(sliderTimmer.current);
         if (showSlider) {
-            setShowSlider(false);
+            setShowUI(false, true);
         }
         else {
-            setShowSlider(true);
-            updateSliderHideTimmer();
+            setShowUI(true, true);
         }
+        updateSliderHideTimmer();
     };
-    var onIconClick = function () {
-        switchPlayState();
-    };
+    if (compRef) {
+        compRef.current = {
+            clickComp: onScreenClick,
+            setShowUI: function (show) {
+                setShowUI(show, true);
+            },
+        };
+    }
     var onPause = function () {
         console.warn('onPause');
         setVideoStatus(VideoStatus.Pause);
@@ -177,7 +206,7 @@ export var VideoPlayer = function (props) {
         }
         else if (videoStatus == VideoStatus.Pause) {
             refVideo.current.play();
-            setShowSlider(false);
+            // setShowUI(false);
             clearInterval(sliderTimmer.current);
         }
         else if (videoStatus == VideoStatus.End) {
@@ -185,12 +214,7 @@ export var VideoPlayer = function (props) {
         }
     };
     videoLog('currentTime', currentTime, 'totalTime', totalTime);
-    return (h("div", { style: {
-            width: '100%',
-            height: '100%',
-            position: 'absolute',
-            backgroundColor: 'rgba(0, 0, 0,1)',
-        } },
+    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 () {
                 console.warn('onloadstart');
             }, onLoadedData: function () {
@@ -208,7 +232,7 @@ export var VideoPlayer = function (props) {
                     ? elementClass === null || elementClass === void 0 ? void 0 : elementClass.playIcon
                     : elementClass === null || elementClass === void 0 ? void 0 : elementClass.reloadIcon, onClick: function (e) {
                 e.stopPropagation();
-                onIconClick();
+                switchPlayState();
             } })) : null),
         showSlider && !isStreaming ? (h("div", { style: {
                 width: '100%',
@@ -225,7 +249,7 @@ export var VideoPlayer = function (props) {
             } },
             h("text", null, FormatSecondCountDownTime(currentTime)),
             h("div", { style: { marginRight: '30px', marginLeft: '30px' } },
-                h(Slider, __assign({}, progressData, { outerBg: (sliderBG === null || sliderBG === void 0 ? void 0 : sliderBG.outerBG) || '', innerBg: (sliderBG === null || sliderBG === void 0 ? void 0 : sliderBG.innerBG) || '', dotBg: (sliderBG === null || sliderBG === void 0 ? void 0 : sliderBG.dotBG) || '', onDrag: onSliderDrag, onDragEnd: onSliderDragEnd, onDragStart: onSliderDragStart, discrete: totalTime > 0 ? Math.floor((currentTime / totalTime) * 100 + 0.5) : 0 }))),
+                h(Slider, __assign({}, progressData, { wrapperWidth: ((_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) - 180, outerBg: (sliderBG === null || sliderBG === void 0 ? void 0 : sliderBG.outerBG) || '', innerBg: (sliderBG === null || sliderBG === void 0 ? void 0 : sliderBG.innerBG) || '', dotBg: (sliderBG === null || sliderBG === void 0 ? void 0 : 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 = {