pixuireactcomponents 1.5.48 → 1.5.49

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pixuireactcomponents",
-    "version": "1.5.48",
+    "version": "1.5.49",
     "description": "pixui react components",
     "main": "index.js",
     "sideEffects": false,

package/src/components/react/app/slider/Slider.d.ts

@@ -18,7 +18,7 @@ export interface SliderProps {
     vertical?: boolean;
     range?: boolean | range;
     onChangeStart?: (value: any) => void;
-    onChange?: (value: any) => void;
+    onChange?: (value: any, isClick?: any) => void;
     onChangeComplete?: (value: any) => void;
     element?: sliderElement;
 }

package/src/components/react/app/slider/Slider.js

@@ -133,6 +133,9 @@ export var Slider = function (props) {
                 if (status == 'move') {
                     onChange && onChange(newValue);
                 }
+                if (status == 'click') {
+                    onChange && onChange(newValue, true);
+                }
             }
             // start和end一定要发
             if (status == 'start') {
@@ -155,6 +158,12 @@ export var Slider = function (props) {
         }
         return newValue;
     };
+    var onRailClick = function (event) {
+        event.stopPropagation();
+        if (!draging.current) { // 避免与drag冲突
+            setValueByPos(event.clientX, event.clientY, 'click');
+        }
+    };
     var onDragStart = function (event) {
         event.stopPropagation();
         draging.current = true;
@@ -179,7 +188,7 @@ export var Slider = function (props) {
     var elementStyleOrClass = getElementStyleOrClass();
     var handleStyle = __assign(__assign({}, (typeof elementStyleOrClass.handle === 'object' ? elementStyleOrClass.handle : undefined)), (vertical ? { top: -handleSize / 2 } : { left: '100%', marginLeft: -handleSize / 2 }));
     return (h("div", { id: id, className: rootClassName, style: __assign({}, rowCenterCenter) },
-        h("div", { ref: refRail, className: typeof elementStyleOrClass.rail === 'string' ? elementStyleOrClass.rail : '', style: __assign({}, (typeof elementStyleOrClass.rail === 'object' ? elementStyleOrClass.rail : undefined)), draggable: true, onDragStart: onDragStart, onDrag: onDrag, onDragEnd: onDragEnd }, refRail.current &&
+        h("div", { ref: refRail, className: typeof elementStyleOrClass.rail === 'string' ? elementStyleOrClass.rail : '', style: __assign({}, (typeof elementStyleOrClass.rail === 'object' ? elementStyleOrClass.rail : undefined)), draggable: true, onDragStart: onDragStart, onDrag: onDrag, onDragEnd: onDragEnd, onClick: onRailClick }, refRail.current &&
             h("div", { className: typeof elementStyleOrClass.track === 'string' ? elementStyleOrClass.track : '', style: trackStyle },
                 h("div", { ref: handleRef, className: typeof elementStyleOrClass.handle === 'string' ? elementStyleOrClass.handle : '', style: __assign(__assign({}, handleStyle), { position: 'absolute' }) })))));
 };

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

@@ -26,5 +26,6 @@ export interface VideoPlayerProps {
     videoDuration?: number;
     compRef?: any;
     maskComponent?: preact.ComponentChild | (() => preact.ComponentChild);
+    openLog?: boolean;
 }
 export declare const VideoPlayer: (props: VideoPlayerProps) => h.JSX.Element;

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

@@ -45,7 +45,7 @@ var defaultIconStyle = [
         position: 'relative', left: '-45%', top: '42%', width: '5%', paddingTop: '5%', backgroundImage: 'url(https://game.gtimg.cn/images/gamelet/cp/pixui-components/new_video_pause.png)', backgroundSize: '100% 100%'
     },
     {
-        position: 'relative', left: '-45%', top: '42%', width: '5%', paddingTop: '5%', backgroundImage: 'url(https://game.gtimg.cn/images/gamelet/cp/pixui-components/video_loading.png)', backgroundSize: '100% 100%'
+        position: 'relative', left: '-45%', top: '42%', width: '5%', paddingTop: '5%', backgroundImage: 'url(https://game.gtimg.cn/images/gamelet/cp/pixui-components/new_video_loading.png)', backgroundSize: '100% 100%'
     },
     {
         position: 'relative', left: '-45%', top: '42%', width: '5%', paddingTop: '5%', backgroundImage: 'url(https://game.gtimg.cn/images/gamelet/cp/pixui-components/new_video_reload.png)', backgroundSize: '100% 100%'
@@ -76,29 +76,28 @@ var defaultSliderStyle = {
         height: '200%',
     },
 };
-var openLog = false;
-var videoLog = function () {
-    var msg = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        msg[_i] = arguments[_i];
-    }
-    if (openLog) {
-        console.log.apply(console, __spreadArray(['VideoPlayer: '], msg, false));
-    }
-};
 export var VideoPlayer = function (props) {
-    var rootId = props.rootId, rootClassName = props.rootClassName, _a = props.playUrl, playUrl = _a === void 0 ? '' : _a, _b = props.autoPlay, autoPlay = _b === void 0 ? true : _b, playEvent = props.playEvent, iconElement = props.iconElement, _c = props.hideSliderDuration, hideSliderDuration = _c === void 0 ? 3000 : _c, sliderElement = props.sliderElement, videoDuration = props.videoDuration, compRef = props.compRef;
+    var rootId = props.rootId, rootClassName = props.rootClassName, _a = props.playUrl, playUrl = _a === void 0 ? '' : _a, _b = props.autoPlay, autoPlay = _b === void 0 ? true : _b, playEvent = props.playEvent, iconElement = props.iconElement, _c = props.hideSliderDuration, hideSliderDuration = _c === void 0 ? 3000 : _c, sliderElement = props.sliderElement, videoDuration = props.videoDuration, compRef = props.compRef, _d = props.openLog, openLog = _d === void 0 ? false : _d;
     var isStreaming = !playUrl.split('?')[0].endsWith('.mp4');
     var refVideo = useRef(null);
-    var _d = useState(VideoStatus.Loading), 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 _h = useState(1.0), currentVolume = _h[0], setCurrentVolume = _h[1]; //视频音量范围0.0~1.0
-    var _j = useState(false), isMuted = _j[0], setIsMuted = _j[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];
+    var _j = useState(1.0), currentVolume = _j[0], setCurrentVolume = _j[1]; //视频音量范围0.0~1.0
+    var _k = useState(false), isMuted = _k[0], setIsMuted = _k[1];
     var sliderTimmer = useRef(null);
     var rootRef = useRef();
     var isDragingRef = useRef(false);
+    var videoLog = function () {
+        var msg = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            msg[_i] = arguments[_i];
+        }
+        if (openLog) {
+            console.log.apply(console, __spreadArray(['VideoPlayer: '], msg, false));
+        }
+    };
     // 在开发setCurrentTime功能时，发现seek视频后立刻pause, 视频会在onpause回调执行后，
     // 又执行一遍onwating, onplaying回调，导致videoStatus被错误设置成播放状态。
     // 暂时使用isPauseSeekingRef来标记是否在暂停状态下setCurrentTime触发，在onplaying中将状态设回Pause
@@ -163,14 +162,20 @@ export var VideoPlayer = function (props) {
         clearTimeout(sliderTimmer.current);
         refVideo.current.pause();
     };
-    var onSliderDrag = function (value) {
-        // console.warn('isDragingRef: ', isDragingRef.current)
+    var onSliderDrag = function (value, isClick) {
+        if (isClick && !isDragingRef.current) {
+            onSliderDragStart();
+        }
         if (isDragingRef.current) {
-            console.log('value: ', value, getDuration());
+            videoLog('value: ', value, getDuration());
             var totalTime_1 = value * getDuration();
             var playSeconds = Math.floor(totalTime_1 / 1000 + 0.5);
             videoLog('onSliderDrag, set currentTime:', playSeconds);
             setCurrentTime(playSeconds);
+            // 如果是点击操作，立即完成
+            if (isClick) {
+                completeSliderAction(playSeconds);
+            }
         }
     };
     var setShowUI = function (show, direct) {
@@ -182,18 +187,25 @@ export var VideoPlayer = function (props) {
     };
     // 结束拖就3秒隐藏Bar
     var onSliderDragEnd = function (value) {
-        console.log('onSliderDragEnd======');
+        videoLog('onSliderDragEnd======');
         if (isDragingRef.current) {
-            isDragingRef.current = false;
-            videoLog('onDragEnd-----------------, ', value * getDuration());
-            if (hideSliderDuration > 0) {
-                clearTimeout(sliderTimmer.current);
-                sliderTimmer.current = setTimeout(function () {
-                    setShowUI(false);
-                }, hideSliderDuration);
-            }
-            refVideo.current.seek(currentTime);
-            refVideo.current.play();
+            var totalTime_2 = value * getDuration();
+            var playSeconds = Math.floor(totalTime_2 / 1000 + 0.5);
+            completeSliderAction(playSeconds);
+        }
+    };
+    var completeSliderAction = function (targetSeconds) {
+        videoLog('完成动作, 跳转到:', targetSeconds);
+        refVideo.current.seek(targetSeconds);
+        refVideo.current.play();
+        // 重置拖拽状态
+        isDragingRef.current = false;
+        // 设置UI隐藏计时器
+        if (hideSliderDuration > 0) {
+            clearTimeout(sliderTimmer.current);
+            sliderTimmer.current = setTimeout(function () {
+                setShowUI(false);
+            }, hideSliderDuration);
         }
     };
     var onplaying = function () {
@@ -248,7 +260,7 @@ export var VideoPlayer = function (props) {
         updateSliderHideTimmer();
     };
     var onFirstFrame = function () {
-        console.warn('onFirstFrame');
+        videoLog('onFirstFrame');
         (playEvent === null || playEvent === void 0 ? void 0 : playEvent.onFirstFrame) && playEvent.onFirstFrame();
     };
     var switchPlayState = function () {
@@ -346,9 +358,9 @@ export var VideoPlayer = function (props) {
     var iconStyleOrClass = getIconStyleOrClass(videoStatus);
     return (h("div", { id: rootId, 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, onWaiting: onwaiting, onLoadStart: function () {
-                console.warn('onloadstart');
+                videoLog('onloadstart');
             }, onLoadedData: function () {
-                console.warn('onloadeddata');
+                videoLog('onloadeddata');
             }, onCanPlay: onplaying, 
             //@ts-ignore
             onfirstframe: onFirstFrame, controls: true }),