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 2020/02/20 06:10:53 UTC

[openmeetings] branch csp updated: [OPENMEETINGS-2165] video-settings is converted

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

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


The following commit(s) were added to refs/heads/csp by this push:
     new 0024e34  [OPENMEETINGS-2165] video-settings is converted
0024e34 is described below

commit 0024e3422bf16283743a767d4038396cfbdebc1b
Author: Maxim Solodovnik <so...@gmail.com>
AuthorDate: Thu Feb 20 13:10:39 2020 +0700

    [OPENMEETINGS-2165] video-settings is converted
---
 .../web/common/tree/FileTreePanel.html             |   2 +-
 .../openmeetings/web/room/VideoSettings.html       | 131 +++++++++++----------
 .../openmeetings/web/room/VideoSettings.java       |  15 +--
 .../apache/openmeetings/web/room/raw-settings.js   |  99 ++++------------
 .../openmeetings/web/room/raw-video-manager.js     |   2 +-
 .../openmeetings/web/room/wb/raw-wb-area-base.js   |   2 +-
 .../web/user/calendar/AppointmentDialog.java       |   1 +
 .../apache/openmeetings/web/user/chat/raw-chat.js  |   2 +-
 openmeetings-web/src/main/webapp/css/raw-room.css  |  79 ++++++-------
 openmeetings-web/src/main/webapp/css/raw-tree.css  |   2 -
 10 files changed, 139 insertions(+), 196 deletions(-)

diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/common/tree/FileTreePanel.html b/openmeetings-web/src/main/java/org/apache/openmeetings/web/common/tree/FileTreePanel.html
index e71fdda..6d787f0 100644
--- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/common/tree/FileTreePanel.html
+++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/common/tree/FileTreePanel.html
@@ -29,7 +29,7 @@
 			<span wicket:id="refresh" class="refresh om-icon big align-left clickable" wicket:message="title:lbl.refresh"></span>
 			<span wicket:id="trash"></span>
 			<div class="clear"></div>
-			<div id="om-js-trash-confirm" class="modal om-confirm-dialog" tabindex="-1" data-backdrop="static" role="dialog" aria-labelledby="om-js-trash-confirm-header" aria-modal="true">
+			<div id="om-js-trash-confirm" class="modal om-confirm-dialog" tabindex="-1" data-backdrop="static" role="dialog" aria-labelledby="om-js-trash-confirm-header" aria-modal="true" aria-hidden="true">
 				<div class="modal-dialog">
 					<div class="modal-content">
 						<div class="modal-header">
diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/VideoSettings.html b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/VideoSettings.html
index 6b4258d..a01753d 100644
--- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/VideoSettings.html
+++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/VideoSettings.html
@@ -20,79 +20,88 @@
 <!DOCTYPE html>
 <html xmlns:wicket="http://wicket.apache.org">
 <wicket:panel>
-	<div id="video-settings" wicket:message="title:51, data-btn-save:144, data-btn-cancel:lbl.cancel" hidden="hidden">
-		<div class="title"><wicket:message key="758"/></div>
-		<div class="sett-container">
-			<div class="opt-block">
-				<div class="cam-row sett-row">
-					<div><wicket:message key="52"/></div>
-					<div>
-						<select class="cam"></select>
-					</div>
-				</div>
-				<div class="mic-row sett-row">
-					<div><wicket:message key="53"/></div>
-					<div>
-						<select class="mic"></select>
-					</div>
+	<div class="modal fade video" id="video-settings" data-backdrop="false" tabindex="-1" role="dialog" aria-labelledby="video-settings-title" aria-hidden="true">
+		<div class="modal-dialog" role="document">
+			<div class="modal-content">
+				<div class="modal-header p-0 pr-2 pl-2">
+					<h5 class="modal-title" id="video-settings-title"><wicket:message key="51"/></h5>
+					<button type="button" class="close p-0 pr-1 pl-1" data-dismiss="modal" aria-hidden="true" wicket:message="title:85,aria-label:85">
+						&times;
+					</button>
 				</div>
-				<div class="res-row sett-row">
-					<div class="clear">
-						<wicket:message key="1429"/>
-						<span class="warn ui-state-highlight" wicket:message="title:1430">
-							<span class="ui-icon ui-icon-alert"></span>
-						</span>
+				<div class="modal-body">
+					<div class="title"><wicket:message key="758"/></div>
+					<div class="sett-container">
+						<div class="opt-block">
+							<div class="cam-row sett-row">
+								<div><wicket:message key="52"/></div>
+								<div>
+									<select class="custom-select custom-select-sm cam"></select>
+								</div>
+							</div>
+							<div class="mic-row sett-row">
+								<div><wicket:message key="53"/></div>
+								<div>
+									<select class="custom-select custom-select-sm mic"></select>
+								</div>
+							</div>
+							<div class="res-row sett-row">
+								<div class="clear">
+									<wicket:message key="1429"/>
+									<i class="warn fas fa-exclamation-triangle text-warning" wicket:message="title:1430"></i>
+								</div>
+								<div>
+									<select class="custom-select custom-select-sm cam-resolution">
+										<option value="1" data-width="40" data-height="30">40x30 [4:3 (~6 KByte/sec)]</option>
+										<option value="2" data-width="80" data-height="60">80x60 [4:3 (~12 KByte/sec)]</option>
+										<option value="3" data-width="120" data-height="90" selected="selected">120x90 [4:3 (~20 KByte/sec)]</option>
+										<option value="4" data-width="160" data-height="120">160x120 [QQVGA 4:3 (~36 KByte/sec)]</option>
+										<option value="5" data-width="240" data-height="180">240x180 [4:3 (~40 KByte/sec)]</option>
+										<option value="6" data-width="320" data-height="240">320x240 [HVGA 4:3 (~56 KByte/sec)]</option>
+										<option value="7" data-width="480" data-height="360">480x360 [4:3  (~60 KByte/sec)]</option>
+										<option value="8" data-width="640" data-height="480">640x480 [4:3 (~68 KByte/sec)]</option>
+										<option value="9" data-width="1024" data-height="768">1024x768 [XGA 4:3]</option>
+										<option value="10" data-width="256" data-height="150">256x150 [16:9]</option>
+										<option value="11" data-width="432" data-height="240">432x240 [WQVGA 9:5]</option>
+										<option value="12" data-width="480" data-height="234">480x234 [pseudo 16:9]</option>
+										<option value="13" data-width="512" data-height="300">512x300 [16:9]</option>
+										<option value="14" data-width="640" data-height="360">640x360 [nHD 16:9]</option>
+										<option value="15" data-width="1024" data-height="600">1024x600 [16:9]</option>
+									</select>
+								</div>
+							</div>
+							<div class="sett-row right">
+								<div><button class="rec-start btn btn-outline-primary"><i class="fas fa-circle text-danger"></i>&nbsp;<wicket:message key="775"/></button></div>
+							</div>
+						</div>
+						<div class="vid-block">
+							<div class="video-conainer">
+								<video autoplay="autoplay"></video>
+							</div>
+							<canvas class="level-meter" data-orientation="horizontal" wicket:message="title:767" width="250" height="16"></canvas>
+							<div class="sett-row right">
+								<div class="timer badge badge-primary"><span class="time"></span>&nbsp;<wicket:message key="network.test.sec"/></div>
+								<div><button class="play btn btn-outline-primary"><i class="fas fa-play"></i>&nbsp;<wicket:message key="764"/></button></div>
+								<div class="clear"></div>
+							</div>
+						</div>
 					</div>
 					<div>
-						<select class="cam-resolution">
-							<option value="1" data-width="40" data-height="30" data-class="ui-icon-video">40x30 [4:3 (~6 KByte/sec)]</option>
-							<option value="2" data-width="80" data-height="60" data-class="ui-icon-video">80x60 [4:3 (~12 KByte/sec)]</option>
-							<option value="3" data-width="120" data-height="90" data-class="ui-icon-video" selected="selected">120x90 [4:3 (~20 KByte/sec)]</option>
-							<option value="4" data-width="160" data-height="120" data-class="ui-icon-video">160x120 [QQVGA 4:3 (~36 KByte/sec)]</option>
-							<option value="5" data-width="240" data-height="180" data-class="ui-icon-video">240x180 [4:3 (~40 KByte/sec)]</option>
-							<option value="6" data-width="320" data-height="240" data-class="ui-icon-video">320x240 [HVGA 4:3 (~56 KByte/sec)]</option>
-							<option value="7" data-width="480" data-height="360" data-class="ui-icon-video">480x360 [4:3  (~60 KByte/sec)]</option>
-							<option value="8" data-width="640" data-height="480" data-class="ui-icon-video">640x480 [4:3 (~68 KByte/sec)]</option>
-							<option value="9" data-width="1024" data-height="768" data-class="ui-icon-video">1024x768 [XGA 4:3]</option>
-							<option value="10" data-width="256" data-height="150" data-class="ui-icon-video">256x150 [16:9]</option>
-							<option value="11" data-width="432" data-height="240" data-class="ui-icon-video">432x240 [WQVGA 9:5]</option>
-							<option value="12" data-width="480" data-height="234" data-class="ui-icon-video">480x234 [pseudo 16:9]</option>
-							<option value="13" data-width="512" data-height="300" data-class="ui-icon-video">512x300 [16:9]</option>
-							<option value="14" data-width="640" data-height="360" data-class="ui-icon-video">640x360 [nHD 16:9]</option>
-							<option value="15" data-width="1024" data-height="600" data-class="ui-icon-video">1024x600 [16:9]</option>
-						</select>
+						<i class="fas fa-info-circle text-info"></i>&nbsp;<wicket:message key="765"/>
 					</div>
 				</div>
-				<div class="sett-row right">
-					<div><button class="rec-start"><wicket:message key="775"/></button></div>
+				<div class="modal-footer">
+					<button class="btn-save btn btn-outline-primary"><i class="fas fa-save"></i>&nbsp;<wicket:message key="144"/></button>
+					<button class="btn-cancel btn btn-outline-secondary"><wicket:message key="lbl.cancel"/></button>
 				</div>
 			</div>
-			<div class="vid-block">
-				<div class="video-conainer">
-					<video autoplay="autoplay"></video>
-				</div>
-				<canvas class="level-meter" data-orientation="horizontal" wicket:message="title:767" width="250" height="16"></canvas>
-				<div class="sett-row right">
-					<div class="timer ui-widget-header"><span class="time"></span>&nbsp;<wicket:message key="network.test.sec"/></div>
-					<div><button class="play"><wicket:message key="764"/></button></div>
-					<div class="clear"></div>
-				</div>
-			</div>
-		</div>
-		<div>
-			<span class="p-2">
-				<span class="ui-icon ui-icon-info"></span>
-			</span>
-			<wicket:message key="765"/>
 		</div>
 	</div>
-	<div id="jsInfo"></div>
-	<div id="jsNotifications"></div>
 	<div wicket:id="ws-panel" hidden="hidden"></div>
 	<div hidden="hidden">
 		<select>
-			<option id="settings-option-loading" value="-2" data-class="ui-icon-refresh"><wicket:message key="230"/></option>
-			<option id="settings-option-disabled" value="-1" data-class="ui-icon-closethick"><wicket:message key="159"/></option>
+			<option id="settings-option-loading" value="-2"><wicket:message key="230"/></option>
+			<option id="settings-option-disabled" value="-1"><wicket:message key="159"/></option>
 		</select>
 		<div id="settings-https-required"><wicket:message key="video.settings.https.required"/></div>
 	</div>
diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/VideoSettings.java b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/VideoSettings.java
index 2561749..7a648d2 100644
--- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/VideoSettings.java
+++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/VideoSettings.java
@@ -20,9 +20,6 @@ package org.apache.openmeetings.web.room;
 
 import static org.apache.openmeetings.util.OpenmeetingsVariables.getRoomSettings;
 
-import java.util.List;
-
-import org.apache.wicket.markup.head.HeaderItem;
 import org.apache.wicket.markup.head.IHeaderResponse;
 import org.apache.wicket.markup.head.JavaScriptHeaderItem;
 import org.apache.wicket.markup.head.PriorityHeaderItem;
@@ -32,20 +29,10 @@ import org.apache.wicket.request.resource.JavaScriptResourceReference;
 import org.apache.wicket.request.resource.ResourceReference;
 
 import com.github.openjson.JSONObject;
-import com.googlecode.wicket.jquery.ui.settings.JQueryUILibrarySettings;
 
 public class VideoSettings extends Panel {
 	private static final long serialVersionUID = 1L;
-	private static final ResourceReference SETTINGS_JS_REFERENCE = new JavaScriptResourceReference(VideoSettings.class, "settings.js") {
-		private static final long serialVersionUID = 1L;
-
-		@Override
-		public List<HeaderItem> getDependencies() {
-			List<HeaderItem> list = super.getDependencies();
-			list.add(JavaScriptHeaderItem.forReference(JQueryUILibrarySettings.get().getJavaScriptReference()));
-			return list;
-		}
-	};
+	private static final ResourceReference SETTINGS_JS_REFERENCE = new JavaScriptResourceReference(VideoSettings.class, "settings.js");
 	public static final String URL = "url";
 	public static final String FALLBACK = "fallback";
 
diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/raw-settings.js b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/raw-settings.js
index b5ea7c5..7b566a9 100644
--- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/raw-settings.js
+++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/raw-settings.js
@@ -2,20 +2,6 @@
 if (window.hasOwnProperty('isSecureContext') === false) {
 	window.isSecureContext = window.location.protocol == 'https:' || ["localhost", "127.0.0.1"].indexOf(window.location.hostname) !== -1;
 }
-$.widget('openmeetings.iconselectmenu', $.ui.selectmenu, {
-	_renderItem: function(ul, item) {
-		ul.addClass('settings-menu');
-		const li = $('<li>'), wrapper = $('<div>', {text: item.label});
-		if (item.disabled) {
-			li.addClass('ui-state-disabled');
-		}
-		$('<span>', {
-			style: item.element.attr('data-style')
-			, 'class': 'ui-icon ' + (item.element.attr('data-class') || 'ui-icon-blank')
-		}).appendTo(wrapper);
-		return li.append(wrapper).appendTo(ul);
-	}
-});
 var RingBuffer = (function(length) {
 	const buffer = [];
 	let pos = 0;
@@ -183,81 +169,52 @@ var VideoSettings = (function() {
 		}
 		vs = $('#video-settings');
 		lm = vs.find('.level-meter');
-		cam = vs.find('select.cam').iconselectmenu({
-			appendTo: '.cam-row'
-			, change: function() {
-				_readValues();
-			}
+		cam = vs.find('select.cam').change(function() {
+			_readValues();
 		});
-		mic = vs.find('select.mic').iconselectmenu({
-			appendTo: '.mic-row'
-			, change: function() {
-				_readValues();
-			}
+		mic = vs.find('select.mic').change(function() {
+			_readValues();
 		});
-		res = vs.find('select.cam-resolution').iconselectmenu({
-			appendTo: '.res-row'
-			, change: function() {
-				_readValues();
-			}
+		res = vs.find('select.cam-resolution').change(function() {
+			_readValues();
 		});
 		vidScroll = vs.find('.vid-block .video-conainer');
 		timer = vs.find('.timer');
 		vid = vidScroll.find('video');
 		recBtn = vs.find('.rec-start')
-			.button({icon: "ui-icon-bullet"})
 			.click(function() {
-				recBtn.prop('disabled', true).button('refresh');
+				recBtn.prop('disabled', true);
 				_setEnabled(true);
 				OmUtil.sendMessage({
 					id : 'wannaRecord'
 				}, MsgBase);
 			});
 		playBtn = vs.find('.play')
-			.button({icon: "ui-icon-play"})
 			.click(function() {
-				recBtn.prop('disabled', true).button('refresh');
+				recBtn.prop('disabled', true);
 				_setEnabled(true);
 				OmUtil.sendMessage({
 					id : 'wannaPlay'
 				}, MsgBase);
 			});
-		vs.dialog({
-			classes: {
-				'ui-dialog': 'ui-corner-all video'
-			}
-			, width: 640
-			, autoOpen: false
-			, buttons: [
-				{
-					text: vs.data('btn-save')
-					, icons: {
-						primary: "ui-icon-disk"
-					}
-					, click: function() {
-						_save(true);
-						_close();
-						vs.dialog("close");
-					}
-				}
-				, {
-					text: vs.data('btn-cancel')
-					, click: function() {
-						_close();
-						vs.dialog("close");
-					}
-				}
-			]
-			, close: function() {
-				_close();
-			}
+		vs.find('.btn-save').off().click(function() {
+			_save(true);
+			_close();
+			vs.modal("hide");
+		});
+		vs.find('.btn-cancel').off().click(function() {
+			_close();
+			vs.modal("hide");
+		});
+		vs.off().on('hidden.bs.modal', function (e) {
+			_close();
 		});
 		o.width = 300;
 		o.height = 200;
 		o.mode = 'settings';
 		o.rights = (o.rights || []).join();
 		delete o.keycode;
-		vs.find('input, button').prop('disabled', true);
+		vs.find('.modal-body input, .modal-body button').prop('disabled', true);
 		const rr = vs.find('.cam-resolution').parents('.sett-row');
 		if (!o.interview) {
 			rr.show();
@@ -268,7 +225,7 @@ var VideoSettings = (function() {
 		_save(); // trigger settings update
 	}
 	function _updateRec() {
-		recBtn.prop('disabled', !recAllowed || (s.video.cam < 0 && s.video.mic < 0)).button('refresh');
+		recBtn.prop('disabled', !recAllowed || (s.video.cam < 0 && s.video.mic < 0));
 	}
 	function _setCntsDimensions(cnts) {
 		const b = kurentoUtils.WebRtcPeer.browser;
@@ -381,13 +338,11 @@ var VideoSettings = (function() {
 	function _setLoading(el) {
 		el.find('option').remove();
 		el.append(OmUtil.tmpl('#settings-option-loading'));
-		el.iconselectmenu('refresh');
 	}
 	function _setDisabled(els) {
 		els.forEach(function(el) {
 			el.find('option').remove();
 			el.append(OmUtil.tmpl('#settings-option-disabled'));
-			el.iconselectmenu('refresh');
 		});
 	}
 	function _setSelectedDevice(dev, devIdx) {
@@ -462,8 +417,6 @@ var VideoSettings = (function() {
 					});
 					_setSelectedDevice(cam, s.video.cam);
 					_setSelectedDevice(mic, s.video.mic);
-					cam.iconselectmenu('refresh');
-					mic.iconselectmenu('refresh');
 					res.find('option').each(function() {
 						const o = $(this).data();
 						if (o.width === s.video.width && o.height === s.video.height) {
@@ -483,13 +436,13 @@ var VideoSettings = (function() {
 		Wicket.Event.subscribe('/websocket/message', _onWsMessage);
 		recAllowed = false;
 		timer.hide();
-		playBtn.prop('disabled', true).button('refresh');
-		vs.dialog('open');
+		playBtn.prop('disabled', true);
+		vs.modal('show');
 		_load();
 		_initDevices();
 	}
 	function _setEnabled(enabled) {
-		playBtn.prop('disabled', enabled).button('refresh');
+		playBtn.prop('disabled', enabled);
 		cam.prop('disabled', enabled);
 		mic.prop('disabled', enabled);
 		res.prop('disabled', enabled);
@@ -585,7 +538,7 @@ var VideoSettings = (function() {
 			if (msg instanceof Blob) {
 				return; //ping
 			}
-			const m = jQuery.parseJSON(msg);
+			const m = JSON.parse(msg);
 			if (m && 'kurento' === m.type) {
 				if ('test' === m.mode) {
 					_onKMessage(m);
@@ -607,7 +560,7 @@ var VideoSettings = (function() {
 		, open: _open
 		, close: function() {
 			_close();
-			vs && vs.dialog('close');
+			vs && vs.modal('hide');
 		}
 		, load: _load
 		, save: _save
diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/raw-video-manager.js b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/raw-video-manager.js
index efd00d1..2692507 100644
--- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/raw-video-manager.js
+++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/raw-video-manager.js
@@ -105,7 +105,7 @@ var VideoManager = (function() {
 			if (msg instanceof Blob) {
 				return; //ping
 			}
-			const m = jQuery.parseJSON(msg);
+			const m = JSON.parse(msg);
 			if (!m) {
 				return;
 			}
diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/raw-wb-area-base.js b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/raw-wb-area-base.js
index 6a0f4b6..fbe5b9b 100644
--- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/raw-wb-area-base.js
+++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/raw-wb-area-base.js
@@ -8,7 +8,7 @@ var BaseWbArea = function() {
 			if (msg instanceof Blob) {
 				return; //ping
 			}
-			const m = jQuery.parseJSON(msg);
+			const m = JSON.parse(msg);
 			if (m && 'wb' === m.type && typeof(WbArea) !== 'undefined' && !!m.func) {
 				WbArea[m.func](m.param);
 			}
diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/calendar/AppointmentDialog.java b/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/calendar/AppointmentDialog.java
index 132e2cb..147950a 100644
--- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/calendar/AppointmentDialog.java
+++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/calendar/AppointmentDialog.java
@@ -222,6 +222,7 @@ public class AppointmentDialog extends Modal<Appointment> {
 				RoomEnterBehavior.roomEnter((MainPage)getPage(), handler, AppointmentDialog.this.getModelObject().getRoom().getId());
 			}
 		});
+		enterRoom.setOutputMarkupId(true).setOutputMarkupPlaceholderTag(true);
 		delete = new BootstrapAjaxLink<>("button", null, Buttons.Type.Outline_Danger, new ResourceModel("80")) {
 			private static final long serialVersionUID = 1L;
 
diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/raw-chat.js b/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/raw-chat.js
index ccc2ce2..40818e4 100644
--- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/raw-chat.js
+++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/raw-chat.js
@@ -456,7 +456,7 @@ $(function() {
 			if (msg instanceof Blob) {
 				return; //ping
 			}
-			const m = jQuery.parseJSON(msg);
+			const m = JSON.parse(msg);
 			if (m) {
 				switch(m.type) {
 					case "chat":
diff --git a/openmeetings-web/src/main/webapp/css/raw-room.css b/openmeetings-web/src/main/webapp/css/raw-room.css
index 8eec1e6..f45c347 100644
--- a/openmeetings-web/src/main/webapp/css/raw-room.css
+++ b/openmeetings-web/src/main/webapp/css/raw-room.css
@@ -147,14 +147,13 @@ html[dir="rtl"] .room-block .sidebar {
 .room-block .sidebar .icon-undock::before {
 	content: "\f100";
 }
-.room-block .sidebar #room-sidebar-tab-users
-, .room-block .sidebar #room-sidebar-tab-files
-{
+.room-block .sidebar #room-sidebar-tabs .tab-content {
 	height: calc(100% - 44px);
 }
-.room-block .sidebar.closed #room-sidebar-tab-users
-, .room-block .sidebar.closed #room-sidebar-tab-files
-{
+.room-block .sidebar #room-sidebar-tabs .tab-content .tab-pane {
+	height: 100%;
+}
+.room-block .sidebar.closed .tab-content .tab-pane {
 	display: none;
 }
 .audio-activity.ui-icon {
@@ -268,30 +267,6 @@ html[dir="rtl"] .room-block .sidebar {
 	top: -50px;
 	background-color: transparent;
 }
-#video-settings {
-	padding: 5px 10px;
-}
-ul.settings-menu {
-	max-height: 130px;
-}
-.ui-dialog.video .title {
-	font-weight: bold;
-}
-.ui-dialog.video .opt-block {
-	width: 300px;
-	display: inline-block;
-	position: absolute;
-	top: 0;
-	left: 0;
-}
-.ui-dialog.video .vid-block {
-	min-width: 300px;
-	padding-left: 305px;
-}
-.ui-dialog.video .warn {
-	float: right;
-	margin-right: .3em;
-}
 .input .select2-container {
 	max-height: 100px;
 	overflow-y: auto;
@@ -361,17 +336,41 @@ ul.settings-menu {
 	left: 5px;
 	width: 10px;
 }
-.ui-dialog.video .sett-container {
+#video-settings {
+	padding: 5px 10px;
+}
+#video-settings.video .modal-dialog {
+	max-width: 640px;
+}
+.modal.video .title {
+	font-weight: bold;
+}
+.modal.video .opt-block {
+	width: 300px;
+	display: inline-block;
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+.modal.video .vid-block {
+	min-width: 300px;
+	padding-left: 305px;
+}
+.modal.video .warn {
+	float: right;
+	margin-right: .3em;
+}
+.modal.video .sett-container {
 	position: relative;
 	min-height: 250px;
 }
-.ui-dialog.video .sett-row {
+.modal.video .sett-row {
 	padding-top: 10px;
 }
-.ui-dialog.video .sett-row.right {
+.modal.video .sett-row.right {
 	text-align: right;
 }
-.ui-dialog.video .vid-block .video-conainer {
+.modal.video .vid-block .video-conainer {
 	overflow: auto;
 	max-height: 300px;
 	position: relative;
@@ -380,17 +379,13 @@ ul.settings-menu {
 	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;
+#video-settings .close {
+	margin: 0 0 0 auto;
 }
-.ui-dialog.video .footer {
+.modal.video .footer {
 	display: none;
 }
-.ui-dialog.video.mic-status .footer {
+.modal.video.mic-status .footer {
 	display: block;
 }
 .room-block .room-container .user-video {
diff --git a/openmeetings-web/src/main/webapp/css/raw-tree.css b/openmeetings-web/src/main/webapp/css/raw-tree.css
index bb1afa9..f29c5bb 100644
--- a/openmeetings-web/src/main/webapp/css/raw-tree.css
+++ b/openmeetings-web/src/main/webapp/css/raw-tree.css
@@ -1,8 +1,6 @@
 /* Licensed under the Apache License, Version 2.0 (the "License") http://www.apache.org/licenses/LICENSE-2.0 */
 .file-tree {
 	vertical-align: top;
-	border: 1px solid #ccc;
-	border-radius: 5px;
 	max-width: 350px;
 	height: 100%;
 	width: 100%;