pixuireactcomponents 1.3.81 → 1.3.83

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pixuireactcomponents",
-    "version": "1.3.81",
+    "version": "1.3.83",
     "description": "pixui react components",
     "main": "index.js",
     "scripts": {
@@ -12,7 +12,6 @@
     "dependencies": {
         "animate.css": "^3.7.2",
         "babel-plugin-transform-decorators-legacy": "^1.3.5",
-        "cheerio": "1.0.0-rc.12",
         "cpx": "^1.5.0",
         "gamelet-pixui-frame": "0.4.9",
         "google-protobuf": "^3.8.0",

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

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

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

@@ -9,6 +9,15 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 import { createRef, h } from 'preact';
 import { useEffect, useRef, useState } from 'preact/hooks';
 import { Slider } from '../slider/Slider';
@@ -39,59 +48,71 @@ var VideoStatus;
     VideoStatus[VideoStatus["Pause"] = 2] = "Pause";
     VideoStatus[VideoStatus["End"] = 3] = "End";
 })(VideoStatus || (VideoStatus = {}));
+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 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 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, _c = props.isStreaming, isStreaming = _c === void 0 ? false : _c;
     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];
+    // const hideSliderDuration = 1000;
+    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 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)
+        // 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 = refVideo.current.duration;
+        var duration = videoDuration || 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));
+        videoLog('updatePlayTime-----------------', 'currentSeconds:', currentSeconds, 'totalSeconds:', totalSeconds, Math.floor((currentTime / totalTime) * 100 + 0.5));
     };
+    useEffect(function () {
+        videoLog('Video Status changed: ', videoStatus);
+    }, [videoStatus]);
     //用于更新函数环境
-    var updatePlayTimeRef = useRef(updatePlayTime);
+    var updatePlayTimeFunRef = useRef(updatePlayTime);
     useEffect(function () {
-        updatePlayTimeRef.current = updatePlayTime;
+        updatePlayTimeFunRef.current = updatePlayTime;
     });
     useEffect(function () {
-        updatePlayTimeRef.current = updatePlayTime;
-        updateInfoTimmer.current = setInterval(function () {
-            updatePlayTimeRef.current();
+        updatePlayTimeFunRef.current = updatePlayTime;
+        var interval = setInterval(function () {
+            updatePlayTimeFunRef.current();
         }, 1000);
         return function () {
+            clearInterval(interval);
             clearInterval(sliderTimmer.current);
         };
     }, []);
     // 开始拖就长显Bar
     var onSliderDragStart = function () {
-        console.log('onDragStart-----------------');
+        videoLog('onDragStart-----------------');
         clearTimeout(sliderTimmer.current);
         refVideo.current.pause();
     };
     var onSliderDrag = function (value) {
         console.warn('value: ========================', value);
-        var totlaTime = (value / 100) * refVideo.current.duration;
+        var totlaTime = (value / 100) * (videoDuration || refVideo.current.duration);
         var playSeconds = Math.floor(totlaTime / 1000 + 0.5);
         setCurrentTime(playSeconds);
     };
     // 结束拖就3秒隐藏Bar
     var onSliderDragEnd = function () {
-        console.warn('onDragEnd-----------------');
+        videoLog('onDragEnd-----------------');
         clearTimeout(sliderTimmer.current);
         sliderTimmer.current = setTimeout(function () {
             setShowSlider(false);
@@ -100,31 +121,26 @@ export var VideoPlayer = function (props) {
     };
     var onplaying = function () {
         // 加载第一帧画面
-        console.warn('-----------onplaying');
+        videoLog('-----------onplaying');
         setVideoStatus(VideoStatus.Playing);
-        playEvent.onPlay && playEvent.onPlay();
-        clearInterval(updateInfoTimmer.current);
-        updateInfoTimmer.current = setInterval(function () {
-            updatePlayTimeRef.current();
-        }, 1000);
+        (playEvent === null || playEvent === void 0 ? void 0 : playEvent.onPlay) && playEvent.onPlay();
     };
     var onerror = function (error) {
         console.error('----------onerror', JSON.stringify(error));
         // 播放错误，比如给一个无法播放的url
     };
     var onpause = function () {
-        console.warn('-----------onpause');
+        videoLog('-----------onpause');
         setVideoStatus(VideoStatus.Pause);
     };
     var onended = function () {
         // 视频播放结束
-        console.warn('-----------onended');
+        videoLog('-----------onended');
         setVideoStatus(VideoStatus.End);
-        clearInterval(updateInfoTimmer.current);
         setCurrentTime(0);
         clearTimeout(sliderTimmer.current);
         setShowSlider(true);
-        playEvent.onEnded && playEvent.onEnded();
+        (playEvent === null || playEvent === void 0 ? void 0 : playEvent.onEnded) && playEvent.onEnded();
     };
     var updateSliderHideTimmer = function () {
         clearTimeout(sliderTimmer.current);
@@ -148,14 +164,14 @@ export var VideoPlayer = function (props) {
     var onPause = function () {
         console.warn('onPause');
         setVideoStatus(VideoStatus.Pause);
-        playEvent.onPause && playEvent.onPause();
+        (playEvent === null || playEvent === void 0 ? void 0 : playEvent.onPause) && playEvent.onPause();
     };
     var onFirstFrame = function () {
         console.warn('onFirstFrame');
-        playEvent.onFirstFrame && playEvent.onFirstFrame();
+        (playEvent === null || playEvent === void 0 ? void 0 : playEvent.onFirstFrame) && playEvent.onFirstFrame();
     };
     var switchPlayState = function () {
-        console.log('switchPlayState ', videoStatus);
+        videoLog('switchPlayState ', videoStatus);
         if (videoStatus == VideoStatus.Playing) {
             refVideo.current.pause();
         }
@@ -168,7 +184,7 @@ export var VideoPlayer = function (props) {
             refVideo.current.load();
         }
     };
-    console.log('currentTime', currentTime, 'totalTime', totalTime);
+    videoLog('currentTime', currentTime, 'totalTime', totalTime);
     return (h("div", { style: {
             width: '100%',
             height: '100%',
@@ -183,18 +199,18 @@ export var VideoPlayer = function (props) {
             //@ts-ignore
             onfirstframe: onFirstFrame }),
         h("div", { style: screenClickerStyle, onClick: function (e) {
-                console.log('screenClickerStyle click');
+                videoLog('screenClickerStyle click');
                 e.stopPropagation();
                 onScreenClick();
             } }, showSlider ? (h("div", { className: videoStatus == VideoStatus.Playing
-                ? elementClass.pauseIcon
+                ? elementClass === null || elementClass === void 0 ? void 0 : elementClass.pauseIcon
                 : videoStatus == VideoStatus.Pause
-                    ? elementClass.playIcon
-                    : elementClass.reloadIcon, onClick: function (e) {
+                    ? elementClass === null || elementClass === void 0 ? void 0 : elementClass.playIcon
+                    : elementClass === null || elementClass === void 0 ? void 0 : elementClass.reloadIcon, onClick: function (e) {
                 e.stopPropagation();
                 onIconClick();
             } })) : null),
-        showSlider ? (h("div", { style: {
+        showSlider && !isStreaming ? (h("div", { style: {
                 width: '100%',
                 height: '15px',
                 fontSize: '18px',
@@ -209,7 +225,7 @@ export var VideoPlayer = function (props) {
             } },
             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(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("text", null, FormatSecondCountDownTime(totalTime)))) : null));
 };
 var progressData = {

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

@@ -5,17 +5,4 @@ export declare namespace tools {
      * 哈希生成一个长度20的字符串
      */
     const getHashStr: (str: string) => string;
-    /**
-     * 旧的富文本组件，请使用ConvertRichTextToPixuiStyle
-     * @param str
-     * @returns
-     */
-    const convertRichText: (str: string) => string;
-    /**
-     * 富文本组件，将富文本转换成pixui的innerHtml可以使用的格式
-     * @param str 管理端下发的富文本
-     * @param aLabelData 返回的富文本中的a标签的跳转数据，[id:string]:jumpdata
-     * @returns pixui的innerHtml可以使用的格式
-     */
-    const convertRichTextToPixuiStyle: (str: string, aLabelData?: object[]) => string;
 }

package/src/components/tools/tools.js

@@ -36,7 +36,6 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 import { GameletAPI } from 'gamelet-pixui-frame';
 import { sha1 } from './Sha1';
-import * as cheerio from 'cheerio';
 export var tools;
 (function (tools) {
     tools.writeCookie = function (key, value) {
@@ -77,194 +76,4 @@ export var tools;
     tools.getHashStr = function (str) {
         return sha1(str).substring(0, 20);
     };
-    /**
-     * 旧的富文本组件，请使用ConvertRichTextToPixuiStyle
-     * @param str
-     * @returns
-     */
-    tools.convertRichText = function (str) {
-        var res = str
-            .replaceAll(/<img([^>]*)>/g, '<img$1></img>') //传过来的这两个标签会少结束标签
-            .replaceAll(/<h[1,2,3,4,5,6]><br><\/h[1,2,3,4,5,6]>/g, '<br /><div style = "width:50px;height:15px;" ></div>')
-            .replaceAll(/<p><br><\/p>/g, '<br /><div style = "width:50px;height:15px;" ></div>')
-            .replaceAll(/<p/g, '<text')
-            .replaceAll(/<\/p>/g, '</text>') //包text否则会丢break word
-            .replaceAll(/<span/g, '<text')
-            .replaceAll(/<\/span>/g, '</text>') //包text否则会丢break word
-            .replaceAll(/&nbsp;/g, ' '); //单一行只有nbsp的时候，会整个解析不出来，pixui innerHtml bug
-        for (var i = 1; i <= 6; i++) {
-            res = res.replaceAll(/(<h${i}\s[^>]*>)([^<]*)(<\/h${i}>)/g, '$1<text>$2</text>$3'); //h1-h6的内容包 text
-        }
-        res = res.replaceAll(/<br>/g, '<br /><div style = "width:50px;height:15px;" ></div>');
-        for (var i = 1; i < 10; i++) {
-            res = res.replaceAll("class=\"ql-indent-".concat(i, "\""), " style=\"padding-left: ".concat(i * 2, "rem;\""));
-        }
-        return res;
-    };
-    /**
-     * 富文本组件，将富文本转换成pixui的innerHtml可以使用的格式
-     * @param str 管理端下发的富文本
-     * @param aLabelData 返回的富文本中的a标签的跳转数据，[id:string]:jumpdata
-     * @returns pixui的innerHtml可以使用的格式
-     */
-    tools.convertRichTextToPixuiStyle = function (str, aLabelData) {
-        var $ = cheerio.load(str, null, false);
-        var _loop_1 = function (i) {
-            var indent = "ql-indent-".concat(i);
-            var extStyle = "padding-left: ".concat(i * 2, "rem;");
-            $(".".concat(indent)).each(function () {
-                var oriStyle = $(this).attr('style') || '';
-                $(this).attr('style', "".concat(oriStyle, " ").concat(extStyle));
-                $(this).removeClass(indent);
-            });
-        };
-        //合并ql-indent class到style中
-        for (var i = 1; i <= 10; i++) {
-            _loop_1(i);
-        }
-        //每个 p 节点后添加一个 br 节点
-        $('p').each(function () {
-            $(this).after('<br>');
-        });
-        //将所有的<p><br></p>改成<br>,否则之后 br 会被套在 div 里失效
-        $('p').each(function () {
-            if (($(this).html() || '').trim() === '<br>') {
-                $(this).replaceWith('<br>');
-            }
-        });
-        //找到所有的文字节点，外层包裹text标签
-        $('*').each(function () {
-            $(this)
-                .contents()
-                .each(function () {
-                if (this.type === 'text') {
-                    var text = this.data.trim();
-                    if (text.length > 0) {
-                        $(this).replaceWith("<text style=\"word-break: break-word;flex-shrink: 0;\">".concat(text, "</text>"));
-                    }
-                }
-            });
-        });
-        //将strong em u s标签替换成text标签
-        $('strong').each(function () {
-            var html = $(this).html();
-            var style = $(this).attr('style') || '';
-            $(this).replaceWith("<text style=\"".concat(style, " font-weight: bold;flex-shrink: 0;\">").concat(html, "</text>"));
-        });
-        $('em').each(function () {
-            var html = $(this).html();
-            var style = $(this).attr('style') || '';
-            $(this).replaceWith("<text style=\"".concat(style, " font-style: italic;flex-shrink: 0;\">").concat(html, "</text>"));
-        });
-        $('u').each(function () {
-            var html = $(this).html();
-            var style = $(this).attr('style') || '';
-            $(this).replaceWith("<text style=\"".concat(style, " text-decoration: underline;flex-shrink: 0;\">").concat(html, "</text>"));
-        });
-        $('s').each(function () {
-            var html = $(this).html();
-            var style = $(this).attr('style') || '';
-            $(this).replaceWith("<text style=\"".concat(style, " text-decoration: line-through;flex-shrink: 0;\">").concat(html, "</text>"));
-        });
-        $('span').each(function () {
-            var html = $(this).html();
-            var style = $(this).attr('style') || '';
-            $(this).replaceWith("<text style=\"".concat(style, " flex-shrink: 0;\">").concat(html, "</text>"));
-        });
-        //p换成div
-        $('p').each(function () {
-            var html = $(this).html();
-            var style = $(this).attr('style') || '';
-            $(this).replaceWith("<div style=\"".concat(style, " ;flex-shrink: 0;\">").concat(html, "</div>"));
-        });
-        //pixui 连续的 br 会被吃掉，用 div 占位
-        $('br').each(function () {
-            $(this).replaceWith("<br><div style = \"width:50px; height:15px; flex-shrink: 0;\" />");
-        });
-        //补充 flex-shrink: 0
-        ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'a', 'img'].forEach(function (tag) {
-            $("".concat(tag)).each(function () {
-                var style = $(this).attr('style') || '';
-                $(this).attr('style', "".concat(style, " flex-shrink: 0;"));
-            });
-        });
-        //将嵌套的text节点合并，同时合并内外的style
-        while ($('text > text').length > 0) {
-            $('text').each(function () {
-                var $this = $(this);
-                var parentStyle = $this.attr('style') || '';
-                $this.children('text').each(function () {
-                    var $child = $(this);
-                    var childStyle = $child.attr('style') || '';
-                    // 合并style属性
-                    var mergedStyle = "".concat(parentStyle, "; ").concat(childStyle);
-                    // 更新子元素的style属性
-                    $child.attr('style', mergedStyle);
-                });
-                //去掉父节点
-                if ($this.children('text').length > 0) {
-                    $this.replaceWith($this.html() || '');
-                }
-            });
-        }
-        //去除空的text节点
-        $('text').each(function () {
-            var t = $(this).html() || '';
-            if (t.trim() == '') {
-                $(this).remove();
-            }
-        });
-        //!!并列的text节点在父节点为flexDirection:row时无法正确换行，将其修改为div，外层再包一个text节点
-        ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div'].map(function (tag) {
-            $("".concat(tag)).each(function () {
-                $(this)
-                    .children('text')
-                    .each(function () {
-                    var text = $(this).html();
-                    var style = $(this).attr('style') || '';
-                    $(this).replaceWith("<div style=\"".concat(style, "\">").concat(text, "</div>"));
-                });
-                var taghtml = $(this).html();
-                var tagstyle = $(this).attr('style') || '';
-                //自己的子节点外套一个text，自己不变
-                $(this).replaceWith("<".concat(tag, " style=\"").concat(tagstyle, "\"><text>").concat(taghtml, "</text></").concat(tag, ">"));
-            });
-        });
-        //pixui 的 line-height只在 text 上生效，所以将所有的 div 上的 line-height 转移到父 text 上
-        //当前的结构为 div > text > div,只处理一层就行
-        //遍历每个 text 的子 div，将其中最大的 line-height 转移到 text 上
-        $('text').each(function () {
-            var $text = $(this);
-            var maxLineHeight = 0;
-            $text.children('div').each(function () {
-                var lineHeight = $(this).css('line-height') || '0';
-                var lineHeightNum = parseInt(lineHeight);
-                if (lineHeightNum > maxLineHeight) {
-                    maxLineHeight = lineHeightNum;
-                }
-                // $(this).css('line-height', '0');
-            });
-            if (maxLineHeight > 0) {
-                // pixui 中的实际显示的距离与网页中实际显示的距离差距较大，暂时*5rem
-                $text.css('line-height', maxLineHeight * 5 + 'rem');
-            }
-        });
-        if (aLabelData) {
-            $('a').each(function (i, ele) {
-                var id = "PA_RichTextATagId_".concat(i);
-                $(this).attr('id', id);
-                aLabelData[id] = $(this).attr('href');
-                $(this).attr('href', '');
-            });
-        }
-        //手动处理标签的结尾符
-        var res = $.html();
-        res = res
-            .replaceAll(/<br>/g, '<br />')
-            .replaceAll(/<img([^>]+)>/g, '<img$1 />')
-            .replaceAll(/&nbsp;/g, ' ');
-        // console.log('rrrr', res);
-        res = "<div style=\"display:flex;flex-direction:column;width:100%;\">".concat(res, "</div>");
-        return res;
-    };
 })(tools || (tools = {}));