ezuikit-js 0.5.1 → 0.5.2

package/demos/react-demo/package.json

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

package/demos/react-demo/src/App.js

@@ -10,26 +10,20 @@ class App extends React.Component{
     this.playr = null; //定义播放器
   }
   componentDidMount(){
-    this.playr = new EZUIKit.EZUIKitPlayer({
-      id: 'video-container', // 视频容器ID
-      accessToken: 'at.9ymd5rys4lk1zv6o2rtr51a624s9gl56-5fitodjuss-0tkvm8j-hras1ewfu',
-      url: 'ezopen://open.ys7.com/203751922/1.live',
-      template: 'security', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；  
-      // 视频上方头部控件
-      // header: ['capturePicture','save','zoom'],            // 如果templete参数不为simple,该字段将被覆盖
-      // // 视频下方底部控件
-      // footer: ['talk','broadcast','hd','fullScreen'],      // 如果template参数不为simple,该字段将被覆盖
-      audio: 1, // 是否默认开启声音 0 - 关闭 1 - 开启
-      openSoundCallBack: (data) => console.log("开启声音回调",data),
-      closeSoundCallBack: (data) => console.log("关闭声音回调",data),
-      startSaveCallBack: (data) => console.log("开始录像回调",data),
-      stopSaveCallBack: (data) => console.log("录像回调",data),
-      capturePictureCallBack: (data) => console.log("截图成功回调",data),
-      fullScreenCallBack: (data) => console.log("全屏回调",data),
-      getOSDTimeCallBack: (data) => console.log("获取OSDTime回调",data),
-      width:600,
-      height:400,
-    })
+    fetch('https://open.ys7.com/jssdk/ezopen/demo/token')
+    .then(response => response.json())
+    .then(res => {
+      var accessToken = res.data.accessToken;
+      this.player = new EZUIKit.EZUIKitPlayer({
+        id: 'video-container', // 视频容器ID
+        accessToken: accessToken,
+        url: 'ezopen://open.ys7.com/G39444019/1.live',
+        template: 'simple', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版; theme-可配置主题；
+        plugin: ['talk'],                       // 加载插件，talk-对讲
+        width: 600,
+        height: 400,
+      });
+    });
   }
   render(){
     return(

package/demos/vue-demo/package.json

@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "core-js": "^3.6.4",
-    "ezuikit-js": "0.1.7",
+    "ezuikit-js": "^0.5.2",
     "vue": "^2.6.11"
   },
   "devDependencies": {

package/demos/vue-demo/src/components/EZUIKitJs.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="hello-ezuikit-js">
-    <div id="video-container" style="width:600px;height:600px"></div>
-      <button @click="change">按钮</button>
+    <div id="video-container" style="width:600px;height:400px"></div>
   </div>
 </template>
 
@@ -21,32 +20,20 @@ export default {
   },
   mounted: () => {
     console.group("mounted 组件挂载完毕状态===============》");
-     player =  new EZUIKit.EZUIKitPlayer({
-      autoplay: true,
-      id: "video-container",
-      accessToken:"at.ciwomi1k3lklzen416tqflyu4fm7cqvc-32g97d9qk2-15iad60-l2vw2olyd",
-      url: "ezopen://open.ys7.com/244640009/1.rec",
-      template: "simple", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
-      // 视频上方头部控件
-      //header: ["capturePicture", "save", "zoom"], // 如果templete参数不为simple,该字段将被覆盖
-      //plugin: ['talk'],                       // 加载插件，talk-对讲
-      // 视频下方底部控件
-      // footer: ["talk", "broadcast", "hd", "fullScreen"], // 如果template参数不为simple,该字段将被覆盖
-      // audio: 1, // 是否默认开启声音 0 - 关闭 1 - 开启
-      // openSoundCallBack: data => console.log("开启声音回调", data),
-      // closeSoundCallBack: data => console.log("关闭声音回调", data),
-      // startSaveCallBack: data => console.log("开始录像回调", data),
-      // stopSaveCallBack: data => console.log("录像回调", data),
-      // capturePictureCallBack: data => console.log("截图成功回调", data),
-      // fullScreenCallBack: data => console.log("全屏回调", data),
-      // getOSDTimeCallBack: data => console.log("获取OSDTime回调", data),
-      width: 600,
-      height: 400
-    });
-    // console.log("player",player);
-    // setTimeout(()=>{
-    //   player.stop(); // 方法调用示例，10秒后关闭视频
-    // },10000)
+    fetch('https://open.ys7.com/jssdk/ezopen/demo/token')
+      .then(response => response.json())
+      .then(res => {
+        var accessToken = res.data.accessToken;
+        player = new EZUIKit.EZUIKitPlayer({
+          id: 'video-container', // 视频容器ID
+          accessToken: accessToken,
+          url: 'ezopen://open.ys7.com/G39444019/1.live',
+          template: 'simple', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版; theme-可配置主题；
+          plugin: ['talk'],                       // 加载插件，talk-对讲
+          width: 600,
+          height: 400,
+        });
+      });
   },
   methods: {
     change() {

package/ezuikit.js

@@ -25448,6 +25448,7 @@ class MobilePtz {
     mobileContainer.style = `display:inline-block;width: ${this.jSPlugin.width}px;text-align:center;`;
     var mobileContainerTitle = document.createElement('div');
     mobileContainerTitle.className = "live-ptz-title";
+    mobileContainerTitle.id = "live-ptz-title";
     mobileContainerTitle.innerHTML = "云台控制";
     const ptzWrap = document.createElement('div');
     ptzWrap.id = "mobile-ez-ptz-item";
@@ -26134,14 +26135,6 @@ class Theme {
     if (!this.jSPlugin.Talk) {
       this.jSPlugin.Talk = new Talk(this.jSPlugin);
     }
-    if (matchEzopenUrl(jSPlugin.url).type === 'live') {
-      if (this.isMobile) {
-        this.MobilePtz = new MobilePtz(jSPlugin);
-        this.Ptz = new Ptz(jSPlugin);
-      } else {
-        this.Ptz = new Ptz(jSPlugin);
-      }
-    }
   }
   fetchThemeData(themeId) {
     const url = `${this.jSPlugin.env.domain}/jssdk/ezopen/template/getDetail?accessToken=${this.jSPlugin.accessToken}&id=${themeId}`;
@@ -26172,6 +26165,7 @@ class Theme {
   }
   changeTheme(options) {
     if(typeof options === 'string') {
+      this.jSPlugin.themeId = options;
       switch (this.jSPlugin.themeId) {
         case 'pcLive':
           this.themeData = pcLiveData.data;
@@ -26933,6 +26927,11 @@ class Theme {
     this.isNeedRenderFooter = lodash.findIndex(footer.btnList, (v)=>{
       return v.isrender > 0;
     }) >= 0;
+    ["date-switch-container-wrap","rec-type-container-wrap","mobile-rec-wrap","mobile-ez-ptz-container"].forEach((item,index)=> {
+      if(document.getElementById(item)) {
+        document.getElementById(item).parentElement.removeChild(document.getElementById(item));
+      }
+    });
     if (this.isNeedRenderHeader) {
       if (!document.getElementById(`${this.jSPlugin.id}-headControl`)) {
         const headerContainer = document.createElement('div');
@@ -27020,6 +27019,15 @@ class Theme {
         this.Rec = new Rec(this.jSPlugin);
       }
     }
+    var isNeedRenderPTZ = (lodash.findIndex(this.themeData.header.btnList, (v)=>{
+      return (v.iconId === 'pantile' && v.isrender === 1);
+    }) >= 0 || (this.isMobile && matchEzopenUrl(this.jSPlugin.url).type.indexOf('live') !== -1)) && !this.jSPlugin.disabledPTZ;
+    if (isNeedRenderPTZ) {
+      this.MobilePtz = new MobilePtz(this.jSPlugin);
+      this.Ptz = new Ptz(this.jSPlugin);
+    } else {
+      this.Ptz = new Ptz(this.jSPlugin);
+    }
     //  监听全屏事件触发
     const fullscreenchange = () => {
       const { expend, webExpend } = this.decoderState.state;

package/package.json

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