ucservice 1.3.5 → 1.3.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ucservice",
   "private": false,
-  "version": "1.3.5",
+  "version": "1.3.8",
   "description": "统一通信服务",
   "main": "dist/ucservice.common.js",
   "style": "ucservice.css",

package/src/css/scooper.video.css

@@ -149,6 +149,18 @@
     background-size: 100% 100%;
     background-color: rgba(0,0,0,0);
 }
+.rotate-btn {
+	position: absolute;
+	bottom: 1px;
+	right: 76px;
+	border: 0;
+	width: 28px;
+	height: 28px;
+	float: left;
+/* background-image: url("~@/img/yy_gb.png"); */
+	background-size: 100% 100%;
+	background-color: rgba(0,0,0,0);
+}
 .recv-audio-btn {
 	position: absolute;
 	bottom: -8px;

package/src/net_url/location_url.js

@@ -189,7 +189,8 @@ let location = {
     method: 'POST',
     requestParam: {
       mapId: '',  //地图类型
-      layers: '' //设备类型
+      kw: '', //关键字
+      layers: '' //设备类型 可选
     },
     responseParam: {
       code: '', //返回结果状态码

package/src/scooper.video.js

@@ -612,7 +612,9 @@
 							me.dispatch('screenchange',{windowNums: num});
 							me._opts.windows = num;
 							me._opts.extra = extra;
-	
+						
+						//设置旋转了的视频样式
+
 					},
 					
 					/**
@@ -1583,14 +1585,21 @@
 						me.setChoiceWindow(me._getMinIndexFreeWindow());
 					}
 					
-				$('[video-flag="'+me._opts.windowsBeginIndex+'"]').removeClass("mode-" + me._opts.windows).addClass("mode-" + num);
-				let _li = $('[video-flag="'+me._opts.windowsBeginIndex+'"]>li').hide();
-				me._opts.windows = num;
-				for(let i = 0; i < num; i++){
-					_li.eq(i).show();
-				}
-				//分屏切换事件
-				this.dispatch('screenchange', {windowNums:num, flag:me._opts.flag});
+					$('[video-flag="'+me._opts.windowsBeginIndex+'"]').removeClass("mode-" + me._opts.windows).addClass("mode-" + num);
+					let _li = $('[video-flag="'+me._opts.windowsBeginIndex+'"]>li').hide();
+					me._opts.windows = num;
+					for(let i = 0; i < num; i++){
+						_li.eq(i).show();
+					}
+					//分屏切换事件
+					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);
+					}
 				},
 					
 					/**
@@ -2004,6 +2013,11 @@
 				 */
 					_init: function($dom,opts){
 						let me = this;
+						//保存dom元素的selector用作后续所有子集对象的定位(在多组件对讲模式下有用)
+						if($dom.length == 0 || !me.getDomSelector($dom)) {
+							console.error("父doom元素为空,无法进行视频初始化", $dom);
+							return ;
+						}
 						//配置项
 							me._opts = {
 									windows: 4,
@@ -2049,12 +2063,126 @@
 							//双击某个视频全屏
 							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;
+
+						// 设置视频窗可拖拽
+            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+'"]');
 						
 				//锁定视频事件
@@ -2074,6 +2202,13 @@
 								$(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(){
@@ -2303,7 +2438,7 @@
 							'<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>' +