ucservice 1.3.5 → 1.3.8

package/dist/ucservice.common.js

@@ -12455,7 +12455,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; //设置旋转了的视频样式
     },
 
     /**
@@ -13459,7 +13459,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);
+      }
     },
 
     /**
@@ -13870,7 +13876,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,
@@ -13927,11 +13939,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 () {
@@ -13949,6 +14084,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 () {
@@ -14185,7 +14327,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>';
       }
 
@@ -28439,7 +28581,9 @@ let location_url_location = {
     requestParam: {
       mapId: '',
       //地图类型
-      layers: '' //设备类型
+      kw: '',
+      //关键字
+      layers: '' //设备类型 可选
 
     },
     responseParam: {