ucservice 1.3.5 → 1.3.8

package/dist/ucservice.css

@@ -1 +1 @@
-.video-main{position:absolute;top:0;left:-25px;right:-12px;bottom:-18px}.video-main-full{position:absolute;top:1px;left:1px;right:1px;bottom:1px}.video-main-full>li,.video-main>li{border:1px solid #aaa;float:left;position:relative}.video-main-full>li.loading,.video-main>li.loading{background:#000}.video-main-full>li:hover,.video-main>li:hover{border:1px solid #ffb951}.video-main-full>li.sel,.video-main>li.sel{border:1px solid #ef8601}.video-main-full.mode-1>li,.video-main.mode-1>li{width:98.5%;height:98.5%;list-style:none}.video-main-full.mode-1>li .info,.video-main.mode-1>li .info{font-size:20px;bottom:40px}.video-main.mode-4>li{width:49%;height:49%;list-style:none}.video-main.mode-4>li .info{font-size:18px;bottom:20px}.video-main.mode-6>li{width:33.33%;height:33.33%}.video-main.mode-6>li .info{font-size:14px;bottom:13px}.video-main.mode-6 .screen-1{width:66.66%;height:66.65%}.video-main.mode-6 .screen-1 .info{font-size:18px;bottom:30px}.video-main.mode-9>li{width:32.5%;height:32.5%;list-style:none}.video-main.mode-9>li .info{font-size:12px;bottom:14px}.video-main.mode-16>li{width:24.5%;height:24.5%;list-style:none}.video-main.mode-16>li .info{font-size:8px;bottom:10px}.video-box{-o-object-fit:fill;object-fit:fill;display:none;width:100%;height:100%}.stream-loading{width:200px;height:30px;line-height:30px;position:absolute;top:50%;left:50%;margin-top:-15px;margin-left:-100px;color:#fff;font-size:16px;padding-left:30px}.info{color:#fff;left:10px;width:67%}.info,.operate-btn{position:absolute;float:left;z-index:1}.operate-btn{width:24px;height:24x;right:1px;bottom:2px;cursor:pointer}.send-audio-btn,.unsend-audio-btn{position:absolute;bottom:-8px;right:70px;border:0;width:48px;height:48px;float:left;background-size:100% 100%;background-color:transparent}.recv-audio-btn,.unrecv-audio-btn{bottom:-8px;right:30px;width:48px;height:48px}.close-btn,.recv-audio-btn,.unrecv-audio-btn{position:absolute;border:0;float:left;background-size:100% 100%;background-color:transparent}.close-btn{bottom:5px;right:5px;width:20px;height:20px}.operation{position:absolute;width:100%;height:12%;bottom:0;background:rgba(0,0,0,.3);color:#fff}.hide{display:none}
+.video-main{position:absolute;top:0;left:-25px;right:-12px;bottom:-18px}.video-main-full{position:absolute;top:1px;left:1px;right:1px;bottom:1px}.video-main-full>li,.video-main>li{border:1px solid #aaa;float:left;position:relative}.video-main-full>li.loading,.video-main>li.loading{background:#000}.video-main-full>li:hover,.video-main>li:hover{border:1px solid #ffb951}.video-main-full>li.sel,.video-main>li.sel{border:1px solid #ef8601}.video-main-full.mode-1>li,.video-main.mode-1>li{width:98.5%;height:98.5%;list-style:none}.video-main-full.mode-1>li .info,.video-main.mode-1>li .info{font-size:20px;bottom:40px}.video-main.mode-4>li{width:49%;height:49%;list-style:none}.video-main.mode-4>li .info{font-size:18px;bottom:20px}.video-main.mode-6>li{width:33.33%;height:33.33%}.video-main.mode-6>li .info{font-size:14px;bottom:13px}.video-main.mode-6 .screen-1{width:66.66%;height:66.65%}.video-main.mode-6 .screen-1 .info{font-size:18px;bottom:30px}.video-main.mode-9>li{width:32.5%;height:32.5%;list-style:none}.video-main.mode-9>li .info{font-size:12px;bottom:14px}.video-main.mode-16>li{width:24.5%;height:24.5%;list-style:none}.video-main.mode-16>li .info{font-size:8px;bottom:10px}.video-box{-o-object-fit:fill;object-fit:fill;display:none;width:100%;height:100%}.stream-loading{width:200px;height:30px;line-height:30px;position:absolute;top:50%;left:50%;margin-top:-15px;margin-left:-100px;color:#fff;font-size:16px;padding-left:30px}.info{color:#fff;left:10px;width:67%}.info,.operate-btn{position:absolute;float:left;z-index:1}.operate-btn{width:24px;height:24x;right:1px;bottom:2px;cursor:pointer}.send-audio-btn,.unsend-audio-btn{bottom:-8px;right:70px;width:48px;height:48px}.rotate-btn,.send-audio-btn,.unsend-audio-btn{position:absolute;border:0;float:left;background-size:100% 100%;background-color:transparent}.rotate-btn{bottom:1px;right:76px;width:28px;height:28px}.recv-audio-btn,.unrecv-audio-btn{bottom:-8px;right:30px;width:48px;height:48px}.close-btn,.recv-audio-btn,.unrecv-audio-btn{position:absolute;border:0;float:left;background-size:100% 100%;background-color:transparent}.close-btn{bottom:5px;right:5px;width:20px;height:20px}.operation{position:absolute;width:100%;height:12%;bottom:0;background:rgba(0,0,0,.3);color:#fff}.hide{display:none}

package/dist/ucservice.umd.js

@@ -12464,7 +12464,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
         windowNums: num
       });
       me._opts.windows = num;
-      me._opts.extra = extra;
+      me._opts.extra = extra; //设置旋转了的视频样式
     },
 
     /**
@@ -13468,7 +13468,13 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
       this.dispatch('screenchange', {
         windowNums: num,
         flag: me._opts.flag
-      });
+      }); //设置旋转视频的样式
+
+      for (let k = 0; k < _li.length; k++) {
+        let rotateIndex = _li.eq(k).find('button[name=rotateVideo]').attr('rotate-index');
+
+        if (rotateIndex != 0 && rotateIndex != 2) videoRotateSize(_li.eq(k), rotateIndex);
+      }
     },
 
     /**
@@ -13879,7 +13885,13 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
     };
     */
     _init: function ($dom, opts) {
-      let me = this; //配置项
+      let me = this; //保存dom元素的selector用作后续所有子集对象的定位(在多组件对讲模式下有用)
+
+      if ($dom.length == 0 || !me.getDomSelector($dom)) {
+        console.error("父doom元素为空,无法进行视频初始化", $dom);
+        return;
+      } //配置项
+
 
       me._opts = {
         windows: 4,
@@ -13936,11 +13948,134 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
       me._dbClickFullScreen();
     },
 
+    videoRotateSize(li, rotateIndex) {
+      let video = li.querySelector('video');
+      let videoWidth = video.videoWidth;
+      let videoHeight = video.videoHeight;
+      let vWidth = video.offsetWidth;
+      let vHeight = video.offsetHeight;
+      let liWidth = li.offsetWidth;
+      let liHeight = li.offsetHeight;
+
+      if (rotateIndex == 0) {
+        //0
+        $(video).attr('class', 'video-box');
+        $(video).css('height', '');
+        $(video).css('width', 'auto');
+        video.style.position = 'static';
+        video.style.transform = 'none';
+        $(video).css('left', '');
+        $(video).css('top', '');
+      } else if (rotateIndex == 3) {
+        //3
+        $(video).attr('class', 'video-box');
+        video.style.position = 'absolute';
+        video.style.transform = 'rotate(270deg)';
+
+        if (videoWidth / videoHeight > liWidth / liHeight) {
+          //视频横向留白
+          $(video).css('width', liHeight);
+          $(video).css('height', 'auto');
+          $(video).css('left', 'calc(' + liWidth + ' / 2' + ' - ' + liHeight + ' / 2)');
+          $(video).css('top', 'calc(-' + liHeight / 2 + ' / ' + vWidth + ' * ' + vHeight + ' + ' + liHeight + ' / 2)');
+        } else {
+          //视频纵向留白
+          $(video).css('height', liWidth);
+          $(video).css('width', 'auto');
+          $(video).css('left', 'calc(' + liHeight + ' / 2' + ' - ' + liWidth + ' / 2)');
+          $(video).css('top', 'calc(-' + liWidth / 2 + ' / ' + vHeight + ' * ' + vWidth + ' + ' + liWidth + ' / 2)');
+        }
+      } else if (rotateIndex == 2) {
+        //2
+        $(video).attr('class', 'video-box');
+        $(video).css('height', '');
+        $(video).css('width', 'auto');
+        video.style.position = 'static';
+        video.style.transform = 'rotate(180deg)';
+        $(video).css('left', '');
+        $(video).css('top', '');
+      } else if (rotateIndex == 1) {
+        //1
+        $(video).attr('class', 'video-box');
+        video.style.position = 'absolute';
+        video.style.transform = 'rotate(90deg)';
+
+        if (videoWidth / videoHeight > liWidth / liHeight) {
+          //视频横向留白
+          $(video).css('width', liHeight);
+          $(video).css('height', 'auto');
+          $(video).css('left', 'calc(' + liWidth + ' / 2' + ' - ' + liHeight + ' / 2)');
+          $(video).css('top', 'calc(-' + liHeight / 2 + ' / ' + vWidth + ' * ' + vHeight + ' + ' + liHeight + ' / 2)');
+        } else {
+          //视频纵向留白
+          $(video).css('height', liWidth);
+          $(video).css('width', 'auto');
+          $(video).css('left', 'calc(' + liHeight + ' / 2' + ' - ' + liWidth + ' / 2)');
+          $(video).css('top', 'calc(-' + liWidth / 2 + ' / ' + vHeight + ' * ' + vWidth + ' + ' + liWidth + ' / 2)');
+        }
+      }
+    },
+
+    /**
+    * 获取父窗口传入dom的唯一selector(针对jquery高版本dom对象没有selector属性的问题)
+    * @param $dom
+    * @return {boolean}
+    */
+    getDomSelector: function ($dom) {
+      var me = this;
+
+      if ($dom.selector) {
+        me.selector = $dom.selector;
+      } else {
+        if ($dom.attr("id")) {
+          me.selector = "#" + $dom.attr("id");
+        } else {
+          if (!$dom.attr("class")) return false;
+          var classNames = $dom.attr("class").split(/\s+/);
+          $.each(classNames, function (i, className) {
+            if ($("." + className).length == 1) {
+              me.selector = "." + className;
+              return true;
+            }
+          });
+        }
+      }
+
+      if (!me.selector) return false;else return true;
+    },
+
     /**
      * 初始化按钮点击事件
      */
     _initBtnEvent: function () {
-      let me = this;
+      let me = this; // 设置视频窗可拖拽
+
+      var src = null;
+      $(me.selector + ' li').bind("dragstart", function (ev) {
+        src = $(this);
+      });
+      $(me.selector + ' li').bind("dragover", function (ev) {
+        ev.preventDefault();
+      });
+      $(me.selector + ' li').bind("drop", function (ev) {
+        ev.preventDefault();
+
+        if (src.prop("outerHTML") === $(this).prop("outerHTML")) {
+          return;
+        }
+
+        var target = $(this);
+        var srcIndex = src.index();
+        var targetIndex = target.index();
+
+        if (srcIndex > targetIndex) {
+          src.insertBefore(target);
+          target.insertAfter($(me.selector + ' .video-main li.screen').eq(srcIndex));
+        } else {
+          src.insertAfter(target);
+          target.insertBefore($(me.selector + ' .video-main li.screen').eq(srcIndex));
+        }
+      });
       let videoFlagObj = $('[video-flag="' + me._opts.windowsBeginIndex + '"]'); //锁定视频事件
 
       videoFlagObj.find("button[name='lockVideo']").click(function () {
@@ -13958,6 +14093,13 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
           me.VIDEO_DATA[index].isLockVideo = true;
           $(this).attr('class', 'lock-video-btn');
         }
+      });
+      videoFlagObj.find('button[name=rotateVideo]').click(function () {
+        let rotateIndex = Number($(this).attr("rotate-index"));
+        rotateIndex++;
+        $(this).attr("rotate-index", rotateIndex % 4);
+        let li = $(this).parent().parent()[0];
+        videoRotateSize(li, rotateIndex);
       }); //接收音频事件
 
       videoFlagObj.find("button[name='recvAudio']").click(function () {
@@ -14194,7 +14336,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
       for (let i = index; i < index + me._opts.windowsNum; i++) {
         videoHtml += '<li class="screen-' + i + '" index="' + (i - 1) + '"><video class="video-box" id="video-' + i + '" autoplay ></video>' + '<div class="info hide" id="info-' + i + '"></div>' + '<div class="operate-btn">'; //videoHtml +='<button type="button" class="unlock-video-btn hide" name="lockVideo"></button>';
 
-        checkUserMediaAvailable() && (videoHtml += '<button type="button" class="unsend-audio-btn hide" name="sendAudio"></button>');
+        checkUserMediaAvailable() && (videoHtml += '<button type="button" class="rotate-btn hide" name="rotateVideo" rotate-index="0"></button><button type="button" class="unsend-audio-btn hide" name="sendAudio"></button>');
         videoHtml += '<button type="button" class="unrecv-audio-btn hide" name="recvAudio"></button>' + '<button type="button" class="close-btn hide" name="closeVideo"></button>' + '</div>' + '</li>';
       }
 
@@ -28448,7 +28590,9 @@ let location_url_location = {
     requestParam: {
       mapId: '',
       //地图类型
-      layers: '' //设备类型
+      kw: '',
+      //关键字
+      layers: '' //设备类型 可选
 
     },
     responseParam: {