ucservice 1.4.2 → 1.4.5

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{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}
+.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:1.5rem;height:1.5rem;right:1px;bottom:2px;cursor:pointer}.send-audio-btn,.unsend-audio-btn{bottom:-8px;right:70px;width:3rem;height:3rem}.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:1.75rem;height:1.75rem}.recv-audio-btn,.unrecv-audio-btn{bottom:-8px;right:30px;width:3rem;height:3rem}.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:1.25rem;height:1.25rem}.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

@@ -13960,56 +13960,64 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
       if (rotateIndex == 0) {
         //0
         $(video).attr('class', 'video-box');
-        $(video).css('height', '');
+        $(video).css('height', 'auto');
         $(video).css('width', 'auto');
-        video.style.position = 'static';
-        video.style.transform = 'none';
-        $(video).css('left', '');
-        $(video).css('top', '');
+        $(video).css('max-height', '100%');
+        $(video).css('max-width', '100%');
+        video.style.position = 'absolute';
+        $(video).css('left', '50%');
+        $(video).css('top', '50%');
+        video.style.transform = 'translate(-50%, -50%)';
       } else if (rotateIndex == 3) {
         //3
         $(video).attr('class', 'video-box');
         video.style.position = 'absolute';
         video.style.transform = 'rotate(270deg)';
+        $(video).css('max-height', 'none');
+        $(video).css('max-width', 'none');
 
-        if (videoWidth / videoHeight > liWidth / liHeight) {
+        if (videoHeight * liHeight / videoWidth < liWidth) {
           //视频横向留白
-          $(video).css('width', 'auto');
-          $(video).css('height', liWidth);
+          $(video).css('width', liHeight);
+          $(video).css('height', 'auto');
           $(video).css('left', 'calc(' + liHeight + 'px / 2' + ' - ' + liWidth + 'px / 2)');
           $(video).css('top', 'calc(-' + liWidth / 2 + ' / ' + vHeight + ' * ' + vWidth + 'px + ' + liWidth + 'px / 2)');
         } else {
           //视频纵向留白
-          $(video).css('width', liHeight);
-          $(video).css('height', 'auto');
+          $(video).css('width', 'auto');
+          $(video).css('height', liWidth);
           $(video).css('left', 'calc(' + liWidth + 'px / 2' + ' - ' + liHeight + 'px / 2)');
           $(video).css('top', 'calc(-' + liHeight / 2 + ' / ' + vWidth + ' * ' + vHeight + 'px + ' + liHeight + 'px / 2)');
         }
       } else if (rotateIndex == 2) {
         //2
         $(video).attr('class', 'video-box');
-        $(video).css('height', '');
+        $(video).css('height', 'auto');
         $(video).css('width', 'auto');
-        video.style.position = 'static';
-        video.style.transform = 'rotate(180deg)';
-        $(video).css('left', '');
-        $(video).css('top', '');
+        $(video).css('max-height', '100%');
+        $(video).css('max-width', '100%');
+        video.style.position = 'absolute';
+        $(video).css('left', '50%');
+        $(video).css('top', '50%');
+        video.style.transform = 'translate(-50%, -50%) rotate(180deg)';
       } else if (rotateIndex == 1) {
         //1
         $(video).attr('class', 'video-box');
         video.style.position = 'absolute';
         video.style.transform = 'rotate(90deg)';
+        $(video).css('max-height', 'none');
+        $(video).css('max-width', 'none');
 
-        if (videoWidth / videoHeight > liWidth / liHeight) {
+        if (videoHeight * liHeight / videoWidth < liWidth) {
           //视频横向留白
-          $(video).css('width', 'auto');
-          $(video).css('height', liWidth);
+          $(video).css('width', liHeight);
+          $(video).css('height', 'auto');
           $(video).css('left', 'calc(' + liHeight + 'px / 2' + ' - ' + liWidth + 'px / 2)');
           $(video).css('top', 'calc(-' + liWidth / 2 + ' / ' + vHeight + ' * ' + vWidth + 'px + ' + liWidth + 'px / 2)');
         } else {
           //视频纵向留白
-          $(video).css('width', liHeight);
-          $(video).css('height', 'auto');
+          $(video).css('width', 'auto');
+          $(video).css('height', liWidth);
           $(video).css('left', 'calc(' + liWidth + 'px / 2' + ' - ' + liHeight + 'px / 2)');
           $(video).css('top', 'calc(-' + liHeight / 2 + ' / ' + vWidth + ' * ' + vHeight + 'px + ' + liHeight + 'px / 2)');
         }
@@ -14097,7 +14105,8 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
       videoFlagObj.find('button[name=rotateVideo]').click(function () {
         let rotateIndex = Number($(this).attr("rotate-index"));
         rotateIndex++;
-        $(this).attr("rotate-index", rotateIndex % 4);
+        rotateIndex %= 4;
+        $(this).attr("rotate-index", rotateIndex);
         let li = $(this).parent().parent()[0];
         me.videoRotateSize(li, rotateIndex);
       }); //接收音频事件
@@ -14336,7 +14345,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) + '" 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>');
+        checkUserMediaAvailable() && (videoHtml += '<button type="button" class="rotate-btn hide" name="rotateVideo" rotate-index="0" title="视频旋转"></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>';
       }