This is an automated email from the ASF dual-hosted git repository.
solomax pushed a commit to branch 4.0.x
in repository https://gitbox.apache.org/repos/asf/openmeetings.git
The following commit(s) were added to refs/heads/4.0.x by this push:
new b19f951 [OPENMEETINGS-1142] settings dialog is improved
b19f951 is described below
commit b19f95198053f61ee0a51e523a8c6afc70850c6c
Author: Maxim Solodovnik <[email protected]>
AuthorDate: Wed Jul 25 22:50:10 2018 +0700
[OPENMEETINGS-1142] settings dialog is improved
---
.../openmeetings/web/room/VideoSettings.html | 50 +++++++--------
.../org/apache/openmeetings/web/room/settings.js | 72 ++++++++++++++++------
openmeetings-web/src/main/webapp/css/menu.css | 12 ++--
openmeetings-web/src/main/webapp/css/room.css | 3 +
4 files changed, 87 insertions(+), 50 deletions(-)
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 f37a2fa..5942004 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
@@ -23,23 +23,19 @@
<div class="title"><wicket:message key="758"/></div>
<div class="sett-container">
<div class="opt-block">
- <div class="sett-row">
+ <div class="cam-row sett-row">
<div><wicket:message key="52"/></div>
<div>
- <select class="cam">
- <option
value="-1"><wicket:message key="159"/></option>
- </select>
+ <select class="cam"></select>
</div>
</div>
- <div class="sett-row">
+ <div class="mic-row sett-row">
<div><wicket:message key="53"/></div>
<div>
- <select class="mic">
- <option
value="-1"><wicket:message key="159"/></option>
- </select>
+ <select class="mic"></select>
</div>
</div>
- <div class="sett-row">
+ <div class="res-row sett-row">
<div class="clear">
<wicket:message key="1429"/>
<span class="warn
ui-state-highlight" wicket:message="title:1430">
@@ -48,21 +44,21 @@
</div>
<div>
<select class="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>
+ <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>
</div>
</div>
@@ -86,5 +82,11 @@
</div>
</div>
<span id="jsNotifications"></span>
+ <div style="display: none">
+ <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>
+ </select>
+ </div>
</wicket:panel>
</html>
diff --git
a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/settings.js
b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/settings.js
index 15836bc..a7b974b 100644
---
a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/settings.js
+++
b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/settings.js
@@ -1,4 +1,18 @@
/* Licensed under the Apache License, Version 2.0 (the "License")
http://www.apache.org/licenses/LICENSE-2.0 */
+$.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 VideoSettings = (function() {
let vs, lm, swf, s, cam, mic, res, o
, vidScroll, recBtn, playBtn, recAllowed = false;
@@ -36,9 +50,27 @@ var VideoSettings = (function() {
}));
vs = $('#video-settings');
lm = vs.find('.level-meter');
- cam = vs.find('select.cam');
- mic = vs.find('select.mic');
- res = vs.find('select.cam-resolution');
+ cam = vs.find('select.cam').iconselectmenu({
+ appendTo: '.cam-row'
+ , change: function(event, ui) {
+ _readValues();
+ swf.camChanged(s.video.cam);
+ }
+ });
+ mic = vs.find('select.mic').iconselectmenu({
+ appendTo: '.mic-row'
+ , change: function(event, ui) {
+ _readValues();
+ swf.micChanged(s.video.mic);
+ }
+ });
+ res = vs.find('select.cam-resolution').iconselectmenu({
+ appendTo: '.res-row'
+ , change: function(event, ui) {
+ _readValues();
+ swf.resChanged(s.video.width, s.video.height);
+ }
+ });
vidScroll = vs.find('.vid-block .video-conainer');
recBtn = vs.find('.rec-start').click(function() {
recBtn.prop('disabled', true).button('refresh'); //TODO
disable drop-downs
@@ -116,13 +148,18 @@ var VideoSettings = (function() {
function _micActivity(level) {
lm.progressbar('value', Math.max(0, level));
}
+ function _setLoading(el) {
+ el.find('option').remove();
+
el.append(OmUtil.tmpl('#settings-option-loading'));//!settings-option-disabled
+ el.iconselectmenu('refresh');
+ }
function _initDevices() {
if (!navigator.mediaDevices ||
!navigator.mediaDevices.enumerateDevices) {
OmUtil.error('enumerateDevices() not supported.');
return;
}
- cam.find('option[value!="-1"]').remove();
- mic.find('option[value!="-1"]').remove();
+ _setLoading(cam);
+ _setLoading(mic);
navigator.mediaDevices.getUserMedia({video:true, audio:true})
.then(function(stream) {
const devices =
navigator.mediaDevices.enumerateDevices()
@@ -138,11 +175,16 @@ var VideoSettings = (function() {
})
.then(function(devices) {
let cCount = 0, mCount = 0;
+ _load();
+ cam.find('option').remove();
+
cam.append(OmUtil.tmpl('#settings-option-disabled'));
+ mic.find('option').remove();
+
mic.append(OmUtil.tmpl('#settings-option-disabled'));
devices.forEach(function(device) {
if ('audioinput' === device.kind) {
const o =
$('<option></option>').attr('value', mCount).text(device.label)
.data('device-id',
device.deviceId);
- if (mCount === s.video.cam) {
+ if (mCount === s.video.mic) {
o.prop('selected',
true);
}
mic.append(o);
@@ -157,18 +199,8 @@ var VideoSettings = (function() {
cCount++;
}
});
- cam.prop('disabled',
false).off().change(function() {
- _readValues();
- swf.camChanged(s.video.cam);
- });
- mic.prop('disabled',
false).off().change(function() {
- _readValues();
- swf.micChanged(s.video.mic);
- });
- res.off().change(function() {
- _readValues();
- swf.resChanged(s.video.width,
s.video.height);
- });
+ 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) {
@@ -177,6 +209,8 @@ var VideoSettings = (function() {
}
});
_readValues();
+ swf.init(s.video.cam, s.video.mic
+ , o.interview ? 320 :
s.video.width, o.interview ? 260 : s.video.height);
})
.catch(function(err) {
OmUtil.error(err);
@@ -185,8 +219,6 @@ var VideoSettings = (function() {
function _initSwf() {
_initDevices();
_readValues();
- swf.init(s.video.cam, s.video.mic
- , o.interview ? 320 : s.video.width, o.interview ? 260
: s.video.height);
}
function _open() {
recAllowed = false;
diff --git a/openmeetings-web/src/main/webapp/css/menu.css
b/openmeetings-web/src/main/webapp/css/menu.css
index 97ce298..24b0e2b 100644
--- a/openmeetings-web/src/main/webapp/css/menu.css
+++ b/openmeetings-web/src/main/webapp/css/menu.css
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-.ui-menu:after {
+#menu .ui-menu:after {
content: ".";
display: block;
clear: both;
@@ -24,24 +24,24 @@
line-height: 0;
height: 0;
}
-.ui-menu .ui-menu-item {
+#menu .ui-menu .ui-menu-item {
display: inline-block;
margin: 0;
line-height: 1.2em !important;
padding: .2em 2.1em .2em 1em;
font-weight: normal;
}
-.ui-menu .ui-menu-item, .ui-menu .ui-menu-item .ui-state-active {
+#menu .ui-menu .ui-menu-item, #menu .ui-menu .ui-menu-item .ui-state-active {
font-weight: bold;
}
-.ui-menu .ui-menu-item.sub {
+#menu .ui-menu .ui-menu-item.sub {
width: 280px;
display: block;
}
-.ui-menu .ui-menu-item.top {
+#menu .ui-menu .ui-menu-item.top {
border: 0 !important;
}
-.ui-menu.ui-widget.ui-widget-content.ui-menu-icons {
+#menu .ui-menu.ui-widget.ui-widget-content.ui-menu-icons {
border: 0;
}
#menu .ui-menu {
diff --git a/openmeetings-web/src/main/webapp/css/room.css
b/openmeetings-web/src/main/webapp/css/room.css
index 2e2ba52..7e34ed3 100644
--- a/openmeetings-web/src/main/webapp/css/room.css
+++ b/openmeetings-web/src/main/webapp/css/room.css
@@ -311,6 +311,9 @@
#video-settings {
padding: 5px 10px;
}
+ul.settings-menu {
+ max-height: 130px;
+}
.ui-dialog.video .title {
font-weight: bold;
}
