ucservice 1.3.7 → 1.4.0

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}.rotate-btn,.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

@@ -13473,7 +13473,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
       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);
+        if (rotateIndex != 0 && rotateIndex != 2) me.videoRotateSize(_li.eq(k)[0], rotateIndex);
       }
     },
 
@@ -13885,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,
@@ -13998,18 +14004,46 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
           //视频横向留白
           $(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)');
+          $(video).css('left', 'calc(' + liWidth + 'px / 2' + ' - ' + liHeight + 'px / 2)');
+          $(video).css('top', 'calc(-' + liHeight / 2 + ' / ' + vWidth + ' * ' + vHeight + 'px + ' + liHeight + 'px / 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)');
+          $(video).css('left', 'calc(' + liHeight + 'px / 2' + ' - ' + liWidth + 'px / 2)');
+          $(video).css('top', 'calc(-' + liWidth / 2 + ' / ' + vHeight + ' * ' + vWidth + 'px + ' + liWidth + 'px / 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;
+    },
+
     /**
      * 初始化按钮点击事件
      */
@@ -14065,7 +14099,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
         rotateIndex++;
         $(this).attr("rotate-index", rotateIndex % 4);
         let li = $(this).parent().parent()[0];
-        videoRotateSize(li, rotateIndex);
+        me.videoRotateSize(li, rotateIndex);
       }); //接收音频事件
 
       videoFlagObj.find("button[name='recvAudio']").click(function () {
@@ -14300,7 +14334,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
       let index = me._opts.windowsBeginIndex + 1;
 
       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>';
+        videoHtml += '<li class="screen-' + i + '" index="' + (i - 1) + '" draggable="true"><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="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>';