ezuikit-js 0.4.8 → 0.5.1

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+V 0.5.1  
+
+Date: 2022年3月31日 19:39:49  
+
+[feat]支持切换主题  
+
+[fix]修复对讲结束问题问题  
+
+[feat]移动端主题支持隐藏回放时间轴  
+

package/demos/react-demo/package.json

@@ -7,7 +7,6 @@
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
     "axios": "^0.19.2",
-    "ezuikit-js": "0.1.7",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.1"

package/ezuikit.js

@@ -32,6 +32,8 @@ const addJs = (filepath, callback, isReadyFun) => {
     oJs.setAttribute("src", filepath);
     oJs.onload = callback;
     document.getElementsByTagName("head")[0].appendChild(oJs);
+  } else {
+    callback();
   }
 };
 const addCss = (filepath, callback) => {
@@ -324,10 +326,17 @@ class Status {
   constructor(jSPlugin,id) {
     this.id = id;
     this.jSPlugin = jSPlugin;
+    this.state = {
+      play: false,
+      loading: false,
+    };
   }
   toString() {
     return `${this.coreX}-${this.coreY}`;
   }
+  setPlayStatus(options) {
+    this.state = Object.assign(this.state, options);
+  }
   loadingStart(id) {
     var oS = document.createElement('style');
     document.getElementsByTagName("head")[0].appendChild(oS);
@@ -390,6 +399,7 @@ class Status {
     loadingContainerDOM.appendChild(loadingItemContainer);
   }
   loadingSetText(opt) {
+    this.loadingClearText();
     if (document.getElementById(`${this.id}-loading-item-0`)) {
       var textElement = document.getElementById(`${this.id}-loading-item-0`).childNodes[1];
       if(!textElement) {
@@ -399,9 +409,13 @@ class Status {
         loadingItemContainer.appendChild(textElement);
       }
       textElement.innerHTML = opt.text;
-      if (opt.color) {
-        textElement.style.color = opt.color;
-      }
+      textElement.style.color = opt.color || "#FFFFFF";
+    }
+  }
+  loadingClearText() {
+    var elements = document.getElementById(`${this.id}-loading-item-0`).childNodes;
+    if(elements.length > 1) {
+      elements[1].parentNode.removeChild(elements[1]);
     }
   }
   loadingClear() {
@@ -24242,7 +24256,7 @@ TimeLine.prototype.setDateLine = function (news, defaultIndex) {
 
     this.primaryOffsetH();
     // 将当前播放时间片段传给父组件
-    this.getPalyParam({ current: news[defaultIndex].st });
+    //this.getPalyParam({ current: news[defaultIndex].st });
   } else {
     this.setState({
       availTimeLine: []
@@ -24832,10 +24846,13 @@ class MobileRec {
       this.jSPlugin.changePlayUrl({
         begin: date,
         type: this.type
+      }).then(()=> {
+        this.syncTimeLine();
       });
     };
     const ontouchstart = () => {
       this.operating = true;
+      this.unSyncTimeLine();
       // if (currentTimer) {
       //   clearInterval(currentTimer)
       // }
@@ -24880,38 +24897,22 @@ class MobileRec {
       this.fetchDeviceRec();
       this.jSPlugin.changePlayUrl({
         type: this.type,
-        begin: `${new Date(this.date).Format('yyyMMdd000000')}`
+        begin: `${new Date(this.date).Format('yyyyMMdd')}000000`
+      })
+      .then(()=>{
+        console.log("切换类型成功");
+        this.syncTimeLine();
+      },(err)=>{
+        console.log("err",err);
+      })
+      .catch(err=>{
+        console.log(err);
       });
       // document.getElementById("cloudType").setAttribute("checked", true);
       // $("#cloudType").attr("checked", recType == '2');
       // $("#cloudType .device svg").attr("checked", recType == '2');
     });
-    var dateFormat = function (now) {
-      var time = new Date(now);
-      var h = time.getHours();     //返回日期中的小时数（0到23）
-      var m = time.getMinutes(); //返回日期中的分钟数（0到59）
-      var s = time.getSeconds(); //返回日期中的秒数（0到59）
-      return (h > 9 ? h : '0' + h) + ':' + (m > 9 ? m : '0' + m) + ':' + (s > 9 ? s : '0' + s);
-    };
-    this.timer = setInterval(() => {
-      // 定时器
-      console.log("定时器", this.jSPlugin.getOSDTime());
-      if (this.operating) {
-        console.log("操作中");
-        return false;
-      }
-      this.jSPlugin.getOSDTime()
-        .then((data)=>{
-          if (data.data > 0) {
-            this.TimeLineOBJ.stepScrollTimeLine(dateFormat(data.data * 1000));
-          } else {
-            console.log("未找到当前获取播放时间，等待中...");
-          }
-        })
-        .catch((err)=>{
-          console.log("未找到当前获取播放时间，等待中...");
-        });
-    }, 1000);
+    this.syncTimeLine();
   }
   fetchDeviceRec() {
     const doRender = (result) => {
@@ -24957,23 +24958,32 @@ class MobileRec {
   }
 
   syncTimeLine() {
+    var dateFormat = function (now) {
+      var time = new Date(now);
+      var h = time.getHours();     //返回日期中的小时数（0到23）
+      var m = time.getMinutes(); //返回日期中的分钟数（0到59）
+      var s = time.getSeconds(); //返回日期中的秒数（0到59）
+      return (h > 9 ? h : '0' + h) + ':' + (m > 9 ? m : '0' + m) + ':' + (s > 9 ? s : '0' + s);
+    };
     if (this.timer) {
       clearInterval(this.timer);
     }
     this.timer = setInterval(() => {
-      var getOSDTimePromise = this.jSPlugin.getOSDTime();
-      getOSDTimePromise.then((v) => {
-        if (v == -1) {
-          console.log("获取播放时间错误");
-        } else {
-          if (v > 0) {
-            //console.log("获取播放时间", v, this.timeLine.run);
-            this.timeLine.run({ time: new Date(v > 1000000000000 ? v : v * 1000) });
-            //$(".current-time").text(new Date(new Date(v > 1000000000000 ? v : v * 1000)).Format('yyyy-MM-dd hh:mm:ss'))
+      // 定时器
+      if (this.operating) {
+        console.log("操作中");
+        return false;
+      }
+      this.jSPlugin.getOSDTime()
+        .then((res)=>{
+          if (res.data > 0) {
+            this.TimeLineOBJ.stepScrollTimeLine(dateFormat(res.data * 1000));
+          } else {
+            console.log("未找到当前获取播放时间，等待中...");
           }
-        }
-      })
-        .catch((err) => {
+        })
+        .catch((err)=>{
+          console.log("未找到当前获取播放时间，等待中...");
         });
     }, 1000);
   }
@@ -26160,6 +26170,44 @@ class Theme {
         this.renderThemeData();
       });
   }
+  changeTheme(options) {
+    if(typeof options === 'string') {
+      switch (this.jSPlugin.themeId) {
+        case 'pcLive':
+          this.themeData = pcLiveData.data;
+          this.initThemeData();
+          this.renderThemeData();
+          break;
+        case 'pcRec':
+          this.themeData = pcRecData.data;
+          this.initThemeData();
+          this.renderThemeData();
+          break;
+        case 'mobileLive':
+          this.themeData = mobileLiveData.data;
+          this.initThemeData();
+          this.renderThemeData();
+          break;
+        case 'mobileRec':
+          this.themeData = mobileRecData.data;
+          this.initThemeData();
+          this.renderThemeData();
+          break;
+        case 'themeData':
+          this.themeData = this.jSPlugin.params.themeData;
+          this.initThemeData();
+          this.renderThemeData();
+          break;
+        default:
+          this.fetchThemeData(options);
+          break;
+        }
+    } else if (typeof options === 'object') {
+      this.themeData = options;
+      this.initThemeData();
+      this.renderThemeData();
+    }
+  }
   renderThemeData() {
     const { header, footer } = this.themeData;
     if (this.isNeedRenderHeader && header) {
@@ -26880,10 +26928,10 @@ class Theme {
     this.header = defaultTheme.header;
     this.footer = defaultTheme.footer;
     this.isNeedRenderHeader = lodash.findIndex(header.btnList, (v)=>{
-      return v.isrender === 1;
+      return v.isrender > 0;
     }) >= 0;
     this.isNeedRenderFooter = lodash.findIndex(footer.btnList, (v)=>{
-      return v.isrender === 1;
+      return v.isrender > 0;
     }) >= 0;
     if (this.isNeedRenderHeader) {
       if (!document.getElementById(`${this.jSPlugin.id}-headControl`)) {
@@ -26962,9 +27010,9 @@ class Theme {
         }
       });
     }
-    var isNeedRenderTimeLine = lodash.findIndex(this.themeData.header.btnList, (v)=>{
+    var isNeedRenderTimeLine = (lodash.findIndex(this.themeData.header.btnList, (v)=>{
       return (v.iconId === 'cloudRec' && v.isrender === 1) ||  (v.iconId === 'rec' && v.isrender === 1) ;
-    }) >= 0 || (this.isMobile &&matchEzopenUrl(jSPlugin.url).type.indexOf('rec') !== -1);
+    }) >= 0 || (this.isMobile && matchEzopenUrl(this.jSPlugin.url).type.indexOf('rec') !== -1)) && !this.jSPlugin.disabledTimeLine;
     if (isNeedRenderTimeLine) {
       if (this.isMobile) {
         this.Rec = new MobileRec(this.jSPlugin);
@@ -27623,6 +27671,9 @@ class Monitor {
                 }
               }
               EZUIKit.opt = _this.opt;
+              if(window.EZUIKit) {
+                window.EZUIKit.opt = _this.opt;
+              }
             }
             request(_this.opt.apiDomain, 'POST', {
               accessToken: _this.opt.accessToken,
@@ -28236,7 +28287,7 @@ class Monitor {
               break;
               case 'stopTalk':
                 // window.stopTalk()
-                // params.stopTalk();
+                _this.stopTalk();
                 _this.openSound();
                 break;
               case 'clickEventHandle':
@@ -28581,6 +28632,9 @@ class Monitor {
     console.log(this.opt);
     var _this = this;
     EZUIKit.opt = this.opt;
+    if(window.EZUIKit) {
+      window.EZUIKit.opt = this.opt;
+    }
     var apiSuccess = function(data) {
       if (data.code == 200) {
         var apiResult = data.data;
@@ -29340,6 +29394,7 @@ class EZUIKitPlayer {
       this.audio = true;
       this.poster = params.poster;
       this.speed = 1;
+      this.disabledTimeLine = false;
       this.env = {
         domain: "https://open.ys7.com"
       };
@@ -29350,6 +29405,9 @@ class EZUIKitPlayer {
       if (typeof params.audio !== 'undefined') {
         this.audio = params.audio;
       }
+      if (typeof params.disabledTimeLine !== 'undefined') {
+        this.disabledTimeLine = params.disabledTimeLine;
+      }
       addJs(`${this.staticPath}/js/jsPlugin-4.0.2.min.js`, () => {
         if (autoplay) {
           this.initTime = new Date().getTime();
@@ -29841,6 +29899,7 @@ class EZUIKitPlayer {
     this.jSPlugin.JS_Play(wsUrl, wsParams, 0).then(() => {
       console.log("播放成功");
       this.pluginStatus.loadingClear();
+      this.pluginStatus.setPlayStatus({play: true, loading: false});
       if (this.Theme) {
         this.Theme.setDecoderState({ play: true });
       }
@@ -29888,6 +29947,7 @@ class EZUIKitPlayer {
     });
   }
   play(options) {
+    this.pluginStatus.setPlayStatus({play: false, loading: true});
     this.playStartTime = new Date().getTime();
     this.Monitor.dclog({
       url: this.url,
@@ -29931,8 +29991,10 @@ class EZUIKitPlayer {
     return promise;
   }
   stop() {
+    this.pluginStatus.setPlayStatus({loading: true});
     return this.jSPlugin.JS_Stop(0).then(() => {
       console.log("停止成功");
+      this.pluginStatus.setPlayStatus({play: false,loading: false});
       if (this.Theme) {
         this.Theme.setDecoderState({ play: false });
       }
@@ -29951,11 +30013,18 @@ class EZUIKitPlayer {
             return this.play({
               accessToken: options.accessToken,
               url: url
+            }).then(() => {
+              resolve(url);
+            }).catch((err) => {
+              reject(url);
             });
           }
           this.play(url)
             .then(() => {
               resolve(url);
+            })
+            .catch((err) => {
+              reject(url);
             });
         })
         .catch((err) => {
@@ -29965,11 +30034,17 @@ class EZUIKitPlayer {
             return this.play({
               accessToken: options.accessToken,
               url: url
+            }).then(() => {
+              resolve(url);
+            }).catch((err) => {
+              reject(url);
             });
           }
           this.play(url)
             .then(() => {
               resolve(url);
+            }).catch((err) => {
+              reject(url);
             });
         });
     });
@@ -30318,7 +30393,7 @@ class EZUIKitPlayer {
     this.Talk.startTalk();
   }
   stopTalk() {
-    this.Talk.startTalk();
+    this.Talk.stopTalk();
   }
   destroy() {
     var destroyRT = this.jSPlugin.JS_DestroyWorker(0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ezuikit-js",
-  "version": "0.4.8",
+  "version": "0.5.1",
   "description": "ezuikit javascript for npm",
   "main": "ezuikit.js",
   "scripts": {