You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@openmeetings.apache.org by so...@apache.org on 2019/08/17 00:15:40 UTC

[openmeetings] branch master updated: [OPENMEETINGS-2045] video window sizes are CSS based

This is an automated email from the ASF dual-hosted git repository.

solomax pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/openmeetings.git


The following commit(s) were added to refs/heads/master by this push:
     new 2603447  [OPENMEETINGS-2045] video window sizes are CSS based
2603447 is described below

commit 2603447c094388f920dc7aa3037447facf085ad9
Author: Maxim Solodovnik <so...@gmail.com>
AuthorDate: Sat Aug 17 07:15:29 2019 +0700

    [OPENMEETINGS-2045] video window sizes are CSS based
---
 .../apache/openmeetings/web/room/RoomPanel.java    |   3 +
 .../org/apache/openmeetings/web/room/raw-video.js  |  32 +-----
 openmeetings-web/src/main/webapp/css/raw-room.css  | 126 ++++++++++++---------
 .../src/main/webapp/css/raw-variables.css          |   5 +
 4 files changed, 85 insertions(+), 81 deletions(-)

diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/RoomPanel.java b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/RoomPanel.java
index c6f85ca..2326dfc 100644
--- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/RoomPanel.java
+++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/RoomPanel.java
@@ -797,6 +797,9 @@ public class RoomPanel extends BasePanel {
 		if (r.isHidden(RoomElement.Chat)) {
 			clazz += " no-chat";
 		}
+		if (!r.isHidden(RoomElement.MicrophoneStatus)) {
+			clazz += " mic-status";
+		}
 		return clazz;
 	}
 }
diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/raw-video.js b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/raw-video.js
index 96f0d81..7e7d0f5 100644
--- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/raw-video.js
+++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/raw-video.js
@@ -6,33 +6,13 @@ var Video = (function() {
 		, lastVolume = 50, muted = false, aCtx, aSrc, aDest, gainNode, analyser
 		, lm, level, userSpeaks = false, muteOthers;
 
-	function _getExtra() {
-		return t.height() + 2 + (f.is(':visible') ? f.height() : 0);
-	}
 	function _resizeDlgArea(_w, _h) {
-		if (v.dialog('instance')) {
-			v.dialog('option', 'width', _w).dialog('option', 'height', _h);
-		}
-		const h = _h - _getExtra();
-		_resize(_w, h);
 		if (Room.getOptions().interview) {
 			VideoUtil.setPos(v, VideoUtil.getPos());
+		} else if (v.dialog('instance')) {
+			v.dialog('option', 'width', _w).dialog('option', 'height', _h);
 		}
 	}
-	function _resizePod() {
-		const p = v.parents('.pod,.pod-big')
-			, pw = p.width(), ph = p.height();
-		_resizeDlgArea(pw, ph);
-	}
-	function _resizeLm(h) {
-		lm && lm.attr('height', h).height(h);
-		return lm;
-	}
-	function _resize(w, h) {
-		vc.width(w).height(h);
-		_resizeLm(h - 10);
-		video && video.width(w).height(h);
-	}
 	function _micActivity(level) {
 		const speaks = level > 5;
 		if (speaks !== userSpeaks) {
@@ -95,7 +75,6 @@ var Video = (function() {
 					if (stream.getAudioTracks().length !== 0) {
 						vol.show();
 						lm = vc.find('.level-meter');
-						_resizeLm(vc.height() - 10).show();
 						aCtx = new AudioCtx();
 						gainNode = aCtx.createGain();
 						analyser = aCtx.createAnalyser();
@@ -286,12 +265,6 @@ var Video = (function() {
 		} else {
 			v.dialog('option', 'draggable', true);
 			v.dialog('option', 'resizable', true);
-			v.on('dialogresizestop', function(event, ui) {
-				const w = ui.size.width - 2
-					, h = ui.size.height - t.height() - 4 - (f.is(':visible') ? f.height() : 0);
-				size = {width: w, height: h};
-				_resize(w, h);
-			});
 			if (VideoUtil.isSharing(sd)) {
 				v.on('dialogclose', function() {
 					VideoManager.close(sd.uid, true);
@@ -531,7 +504,6 @@ var Video = (function() {
 			, luid: sd.self ? sd.uid : opts.uid
 		});
 	};
-	self.resizePod = _resizePod;
 	self.reattachStream = _reattachStream;
 	return self;
 });
diff --git a/openmeetings-web/src/main/webapp/css/raw-room.css b/openmeetings-web/src/main/webapp/css/raw-room.css
index c9caca7..aee382b 100644
--- a/openmeetings-web/src/main/webapp/css/raw-room.css
+++ b/openmeetings-web/src/main/webapp/css/raw-room.css
@@ -240,18 +240,6 @@ html[dir="rtl"] .room-block .sidebar {
 	font-weight: bold;
 	background-color: #00FF00;
 }
-.ui-dialog.video, .ui-dialog.video .ui-dialog-titlebar, .ui-dialog.video .ui-dialog-content {
-	padding: 0;
-}
-.ui-dialog.video .ui-dialog-content {
-	overflow: hidden;
-}
-.ui-dialog.video .ui-dialog-titlebar {
-	padding-left: 10px
-}
-.ui-dialog.video.user-video.user-speaks{
-	box-shadow: 3px 3px 4px green;
-}
 .dropdown-menu.video.volume, .dropdown-menu.video.volume li {
 	width: 20px;
 	min-width: 20px;
@@ -286,45 +274,6 @@ ul.settings-menu {
 	float: right;
 	margin-right: .3em;
 }
-.ui-dialog.user-video .level-meter {
-	display: inline-block;
-	position: absolute;
-	bottom: 5px;
-	left: 5px;
-	width: 10px;
-}
-.ui-dialog.video .sett-container {
-	position: relative;
-	min-height: 250px;
-}
-.ui-dialog.video .sett-row {
-	padding-top: 10px;
-}
-.ui-dialog.video .sett-row.right {
-	text-align: right;
-}
-.ui-dialog.video .vid-block .video-conainer {
-	overflow: auto;
-	max-height: 300px;
-	position: relative;
-}
-.sett-container .vid-block .timer {
-	float: left;
-	padding: 2px 4px;
-}
-.ui-dialog.video .ui-dialog-titlebar-collapse span
-, .ui-dialog.video .ui-dialog-titlebar-volume span
-, .ui-dialog.video .ui-dialog-titlebar-refresh span
-{
-	display: block;
-	margin: 1px;
-}
-.ui-dialog.video .footer {
-	display: none;
-}
-.ui-dialog.video.mic-status .footer {
-	display: block;
-}
 .input .select2-container {
 	max-height: 100px;
 	overflow-y: auto;
@@ -401,6 +350,57 @@ ul.settings-menu {
 	border-radius: 10px;
 }
 /************ VIDEO **************/
+.ui-dialog.video, .ui-dialog.video .ui-dialog-titlebar, .ui-dialog.video .ui-dialog-content {
+	padding: 0;
+}
+.ui-dialog.video .ui-dialog-content {
+	overflow: hidden;
+}
+.ui-dialog.video .ui-dialog-titlebar {
+	padding-left: 10px
+}
+.ui-dialog.video.user-video.user-speaks {
+	box-shadow: 3px 3px 4px green;
+}
+.ui-dialog.user-video .level-meter {
+	display: inline-block;
+	position: absolute;
+	bottom: 5px;
+	left: 5px;
+	width: 10px;
+}
+.ui-dialog.video .sett-container {
+	position: relative;
+	min-height: 250px;
+}
+.ui-dialog.video .sett-row {
+	padding-top: 10px;
+}
+.ui-dialog.video .sett-row.right {
+	text-align: right;
+}
+.ui-dialog.video .vid-block .video-conainer {
+	overflow: auto;
+	max-height: 300px;
+	position: relative;
+}
+.sett-container .vid-block .timer {
+	float: left;
+	padding: 2px 4px;
+}
+.ui-dialog.video .ui-dialog-titlebar-collapse span
+, .ui-dialog.video .ui-dialog-titlebar-volume span
+, .ui-dialog.video .ui-dialog-titlebar-refresh span
+{
+	display: block;
+	margin: 1px;
+}
+.ui-dialog.video .footer {
+	display: none;
+}
+.ui-dialog.video.mic-status .footer {
+	display: block;
+}
 .room-block .container .user-video {
 	display: inline-block !important;
 }
@@ -493,6 +493,12 @@ ul.settings-menu {
 }
 .pod-area .pod {
 }
+.pod-area .pod .user-video.ui-dialog
+, .pod-area .pod-big .user-video.ui-dialog
+{
+	height: calc(100% - var(--buffer-size)) !important;
+	width:  calc(100% - var(--buffer-size)) !important;
+}
 .pod-area .pod.ui-sortable-placeholder {
 	background-color: whitesmoke;
 	visibility: visible !important;
@@ -591,6 +597,24 @@ ul.settings-menu {
 .video:hover .mute-others.enabled {
 	display: block;
 }
+.user-video.ui-dialog .ui-dialog-content {
+	height: calc(100% - var(--vdialog-titlebar-height)) !important;
+	width: 100% !important;
+}
+.user-video.ui-dialog .ui-dialog-content .video {
+	height: calc(100% - var(--vdialog-footer-height)) !important;
+	width: 100%  !important;
+}
+.user-video.ui-dialog .ui-dialog-content .video video, .user-video.ui-dialog .ui-dialog-content .video audio {
+	height: 100% !important;
+	width: 100% !important;
+}
+.user-video.ui-dialog .ui-dialog-content .video .level-meter {
+	height: calc(100% - 10px) !important;
+}
+.user-video.ui-dialog .ui-dialog-content .footer {
+	height: var(--vdialog-footer-height) !important;
+}
 @media screen and (max-width: 1280px) {
 	.room-block .sidebar .tab.om-icon.big {
 		max-width: 0px;
diff --git a/openmeetings-web/src/main/webapp/css/raw-variables.css b/openmeetings-web/src/main/webapp/css/raw-variables.css
index a8d110a..10ea9fb 100644
--- a/openmeetings-web/src/main/webapp/css/raw-variables.css
+++ b/openmeetings-web/src/main/webapp/css/raw-variables.css
@@ -49,6 +49,8 @@ body.no-menu {
 	--chat-width: 20px;
 	--chat-height: calc(100% - var(--room-menu-height));
 	--activities-height: 20px;
+	--vdialog-titlebar-height: 27px;
+	--vdialog-footer-height: 0px;
 }
 .main.room.interview {
 	--rec-btn-height: 40px;
@@ -62,6 +64,9 @@ body.no-menu {
 .main.room.no-chat {
 	--chat-width: 0px;
 }
+.main.room.mic-status {
+	--vdialog-footer-height: 22px;
+}
 @media screen and (max-width: 1280px) {
 	.main.room {
 		--room-sidebar-width: 155px;