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 44e6ae8 [OPENMEETINGS-2155] volume is moved to separate component
44e6ae8 is described below
commit 44e6ae8bbf048e7efbf02e5c9d49f0ea219e909a
Author: Maxim Solodovnik <[email protected]>
AuthorDate: Sun Mar 22 10:54:36 2020 +0700
[OPENMEETINGS-2155] volume is moved to separate component
---
.../apache/openmeetings/web/room/RoomPanel.html | 12 ---
.../org/apache/openmeetings/web/room/raw-room.js | 4 +-
.../apache/openmeetings/web/room/raw-video-util.js | 114 +++++++++++++++++++++
.../org/apache/openmeetings/web/room/raw-video.js | 113 ++++----------------
.../openmeetings/web/room/sidebar/RoomSidebar.html | 20 ++--
.../src/main/webapp/css/raw-activities.css | 3 -
.../src/main/webapp/css/raw-general.css | 2 +-
openmeetings-web/src/main/webapp/css/raw-menu.css | 2 +-
openmeetings-web/src/main/webapp/css/raw-room.css | 78 ++++++++++----
9 files changed, 213 insertions(+), 135 deletions(-)
diff --git
a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/RoomPanel.html
b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/RoomPanel.html
index 2c32a60..f33bcf5 100644
---
a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/RoomPanel.html
+++
b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/RoomPanel.html
@@ -72,18 +72,6 @@
<span class="ui-icon
ui-icon-refresh"><wicket:message key="lbl.refresh"/></span>
</a>
</div>
- <div id="video-volume-btn">
- <a class="ui-dialog-titlebar-volume ui-corner-all
ui-state-default" href="#" wicket:message="title:volume.label" role="button"
data-toggle="dropdown">
- <span class="ui-icon
ui-icon-volume-on"><wicket:message key="volume.label"/></span>
- </a>
- <ul class="dropdown-menu video volume">
- <li>
- <div class="slider"
wicket:message="title:volume.label">
- <div class="ui-slider-handle
handle"></div>
- </div>
- </li>
- </ul>
- </div>
<div id="muteothers-confirm"
wicket:message="title:ulist.right.muteothers.grant, data-btn-ok:54,
data-btn-cancel:lbl.cancel">
<div class="ui-state-highlight ui-corner-all p-1">
<span class="ui-icon ui-icon-alert align-left
mr-2 mt-2 mb-3 ml-0"></span><wicket:message
key="ulist.user.muteothers.confirm"/>
diff --git
a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/raw-room.js
b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/raw-room.js
index 8c8a148..c257ede 100644
---
a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/raw-room.js
+++
b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/raw-room.js
@@ -111,9 +111,9 @@ var Room = (function() {
, holder = $('.room-block');
($('.main.room')[0]).style.setProperty('--room-sidebar-width',
sbW + 'px');
if (sbW > 285) {
- holder.addClass('big').removeClass('small');
+ holder.addClass('big').removeClass('narrow');
} else {
- holder.removeClass('big').addClass('small');
+ holder.removeClass('big').addClass('narrow');
}
}
function _reload() {
diff --git
a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/raw-video-util.js
b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/raw-video-util.js
index 191573c..ac18fbe 100644
---
a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/raw-video-util.js
+++
b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/raw-video-util.js
@@ -213,3 +213,117 @@ var VideoUtil = (function() {
self.highlight = _highlight;
return self;
})();
+var Volume = (function() {
+ let video, vol, drop, slider, handleEl, hideTimer = null
+ , lastVolume = 50, muted = false;
+
+ function __cancelHide() {
+ if (hideTimer) {
+ clearTimeout(hideTimer);
+ hideTimer = null;
+ }
+ }
+ function __hideDrop() {
+ __cancelHide();
+ hideTimer = setTimeout(() => {
+ drop.hide();
+ hideTimer = null;
+ }, 3000);
+ }
+
+ function _create(_video) {
+ video = _video;
+ const uid = video.stream().uid
+ , volId = 'volume-' + uid;
+ vol = OmUtil.tmpl('#volume-control-stub', volId)
+ slider = vol.find('.slider');
+ drop = vol.find('.dropdown-menu');
+ vol.on('mouseenter', function(e) {
+ e.stopImmediatePropagation();
+ drop.show();
+ __hideDrop()
+ })
+ .click(function(e) {
+ e.stopImmediatePropagation();
+ OmUtil.roomAction({action: 'mute', uid: uid,
mute: !muted});
+ _mute(!muted);
+ drop.hide();
+ return false;
+ }).dblclick(function(e) {
+ e.stopImmediatePropagation();
+ return false;
+ });
+ drop.on('mouseenter', function() {
+ __cancelHide();
+ });
+ drop.on('mouseleave', function() {
+ __hideDrop();
+ });
+ handleEl = vol.find('.handle');
+ slider.slider({
+ orientation: 'vertical'
+ , range: 'min'
+ , min: 0
+ , max: 100
+ , value: lastVolume
+ , create: function() {
+ handleEl.text($(this).slider('value'));
+ }
+ , slide: function(event, ui) {
+ _handle(ui.value);
+ }
+ });
+ _handle(lastVolume);
+ _mute(muted);
+ return vol.hide();
+ }
+ function _handle(val) {
+ handleEl.text(val);
+ const vidEl = video.video()
+ , data = vidEl.data();
+ if (video.stream().self) {
+ if (data.gainNode) {
+ data.gainNode.gain.value = val / 100;
+ }
+ } else {
+ vidEl[0].volume = val / 100;
+ }
+ const ico = vol.find('a');
+ if (val > 0 && ico.hasClass('volume-off')) {
+ ico.toggleClass('volume-off volume-on');
+ video.handleMicStatus(true);
+ } else if (val === 0 && ico.hasClass('volume-on')) {
+ ico.toggleClass('volume-on volume-off');
+ video.handleMicStatus(false);
+ }
+ }
+ function _mute(mute) {
+ if (!slider) {
+ return;
+ }
+ muted = mute;
+ if (mute) {
+ const val = slider.slider('option', 'value');
+ if (val > 0) {
+ lastVolume = val;
+ }
+ slider.slider('option', 'value', 0);
+ _handle(0);
+ } else {
+ slider.slider('option', 'value', lastVolume);
+ _handle(lastVolume);
+ }
+ }
+
+ return {
+ create: _create
+ , handle: _handle
+ , mute: _mute
+ , muted: function() {
+ return muted;
+ }
+ , destroy: function() {
+ vol.remove();
+ }
+ };
+});
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 5fcc11c..73d3a73 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
@@ -2,8 +2,7 @@
var Video = (function() {
const self = {}
, AudioCtx = window.AudioContext || window.webkitAudioContext;
- let sd, v, vc, t, f, size, vol, slider, handle, video, iceServers
- , lastVolume = 50, muted = false
+ let sd, v, vc, t, f, size, vol, video, iceServers
, lm, level, userSpeaks = false, muteOthers;
function _resizeDlgArea(_w, _h) {
@@ -72,9 +71,7 @@ var Video = (function() {
navigator.mediaDevices.getUserMedia(cnts)
.then(function(stream) {
let _stream = stream;
- __createVideo();
if (stream.getAudioTracks().length !==
0) {
- vol.show();
lm = vc.find('.level-meter');
lm.show();
const data = {};
@@ -95,8 +92,7 @@ var Video = (function() {
_stream.addTrack(track);
});
}
- video.data(data);
- _handleVolume(lastVolume);
+ __createVideo(data);
}
callback(msg, cnts, _stream);
})
@@ -204,44 +200,6 @@ var Video = (function() {
t.removeClass('ui-state-highlight');
}
}
- function _handleVolume(val) {
- handle.text(val);
- if (sd.self) {
- const data = video.data();
- if (data.gainNode) {
- data.gainNode.gain.value = val / 100;
- }
- } else {
- video[0].volume = val / 100;
- }
- const ico = vol.find('.ui-icon');
- if (val > 0 && ico.hasClass('ui-icon-volume-off')) {
- ico.toggleClass('ui-icon-volume-off ui-icon-volume-on');
- vol.removeClass('ui-state-error');
- _handleMicStatus(true);
- } else if (val === 0 && ico.hasClass('ui-icon-volume-on')) {
- ico.toggleClass('ui-icon-volume-on ui-icon-volume-off');
- vol.addClass('ui-state-error');
- _handleMicStatus(false);
- }
- }
- function _mute(mute) {
- if (!slider) {
- return;
- }
- muted = mute;
- if (mute) {
- const val = slider.slider('option', 'value');
- if (val > 0) {
- lastVolume = val;
- }
- slider.slider('option', 'value', 0);
- _handleVolume(0);
- } else {
- slider.slider('option', 'value', lastVolume);
- _handleVolume(lastVolume);
- }
- }
function _initContainer(_id, name, opts) {
let contSel;
if (opts.interview) {
@@ -290,25 +248,7 @@ var Video = (function() {
}
function _initCamDialog() {
v.parent().find('.ui-dialog-titlebar-buttonpane')
- .append($('#video-volume-btn').children().clone())
.append($('#video-refresh-btn').children().clone());
- const volume = v.parent().find('.dropdown-menu.video.volume');
- slider = v.parent().find('.slider');
- vol = v.parent().find('.ui-dialog-titlebar-volume')
- .on('mouseenter', function(e) {
- e.stopImmediatePropagation();
- volume.toggle();
- })
- .click(function(e) {
- e.stopImmediatePropagation();
- OmUtil.roomAction({action: 'mute', uid: sd.uid,
mute: !muted});
- _mute(!muted);
- volume.hide();
- return false;
- }).dblclick(function(e) {
- e.stopImmediatePropagation();
- return false;
- });
v.parent().find('.ui-dialog-titlebar-refresh')
.click(function(e) {
e.stopImmediatePropagation();
@@ -318,27 +258,10 @@ var Video = (function() {
e.stopImmediatePropagation();
return false;
});
- volume.on('mouseleave', function() {
- $(this).hide();
- });
- handle = v.parent().find('.slider .handle');
- slider.slider({
- orientation: 'vertical'
- , range: 'min'
- , min: 0
- , max: 100
- , value: lastVolume
- , create: function() {
- handle.text($(this).slider('value'));
- }
- , slide: function(event, ui) {
- _handleVolume(ui.value);
- }
- });
- vol.hide();
}
function _init(msg) {
sd = msg.stream;
+ vol = Volume();
iceServers = msg.iceServers;
sd.activities = sd.activities.sort();
size = {width: sd.width, height: sd.height};
@@ -401,7 +324,7 @@ var Video = (function() {
_refresh();
}
}
- function __createVideo() {
+ function __createVideo(data) {
const _id = VideoUtil.getVid(sd.uid);
const hasVideo = VideoUtil.hasVideo(sd) ||
VideoUtil.isSharing(sd) || VideoUtil.isRecording(sd);
_resizeDlgArea(hasVideo ? size.width : 120
@@ -409,6 +332,9 @@ var Video = (function() {
video = $(hasVideo ? '<video>' : '<audio>').attr('id', 'vid' +
_id)
.width(vc.width()).height(vc.height())
.prop('autoplay', true).prop('controls', false);
+ if (data) {
+ video.data(data);
+ }
if (hasVideo) {
vc.removeClass('audio-only').css('background-image',
'');;
vc.parents('.ui-dialog').removeClass('audio-only');
@@ -418,14 +344,11 @@ var Video = (function() {
vc.addClass('audio-only').css('background-image',
'url(' + sd.user.pictureUri + ')');
}
vc.append(video);
- if (vol) {
- if (VideoUtil.hasAudio(sd)) {
- vol.show();
- _mute(muted);
- } else {
- vol.hide();
-
v.parent().find('.dropdown-menu.video.volume').hide();
- }
+ if (VideoUtil.hasAudio(sd)) {
+ v.parent().find('.ui-dialog-titlebar-buttonpane')
+ .append(vol.create(self));
+ } else {
+ vol.destroy();
}
}
function _refresh(_msg) {
@@ -508,8 +431,12 @@ var Video = (function() {
self.update = _update;
self.refresh = _refresh;
- self.mute = _mute;
- self.isMuted = function() { return muted; };
+ self.mute = function(_mute) {
+ vol.mute(_mute);
+ };
+ self.isMuted = function() {
+ return vol.muted();
+ };
self.init = _init;
self.stream = function() { return sd; };
self.setRights = _setRights;
@@ -525,5 +452,9 @@ var Video = (function() {
});
};
self.reattachStream = _reattachStream;
+ self.video = function() {
+ return video;
+ };
+ self.handleMicStatus = _handleMicStatus;
return self;
});
diff --git
a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/sidebar/RoomSidebar.html
b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/sidebar/RoomSidebar.html
index cf4eb35..0988a8f 100644
---
a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/sidebar/RoomSidebar.html
+++
b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/sidebar/RoomSidebar.html
@@ -64,20 +64,26 @@
<div wicket:id="settings" />
<div hidden="hidden">
<div id="user-entry-stub" class="user entry clearfix" >
- <span class="om-icon user-status align-right "
wicket:message="data-mod:679,data-wb:678,data-user:677"></span>
+ <span class="om-icon ulist-small user-status
align-right " wicket:message="data-mod:679,data-wb:678,data-user:677"></span>
<span class="align-right typing-activity">
<i class="fas fa-pen-fancy"></i>
</span>
<div class="user name"></div>
- <span class="om-icon audio-activity"
wicket:message="data-speaks:ulist.user.speaks,data-mute:ulist.user.muteothers"></span>
+ <span class="om-icon ulist-small audio-activity"
wicket:message="data-speaks:ulist.user.speaks,data-mute:ulist.user.muteothers"></span>
<div class="user actions clearfix">
</div>
</div>
- <div id="user-av-restart">
- <span class="om-icon align-right restart clickable"
wicket:message="title:lbl.refresh">
- <i class="fas fa-sync-alt"></i>
- </span>
- </div>
+ <span id="volume-control-stub" class="om-icon dropdown
dropright volume-control align-right">
+ <a class="fas volume-on" type="button" href="#"
wicket:message="title:volume.label"></a>
+ <div class="dropdown-menu">
+ <div class="slider"
wicket:message="title:volume.label">
+ <div class="ui-slider-handle
handle"></div>
+ </div>
+ </div>
+ </span>
+ <span id="user-av-restart" class="om-icon align-right restart
clickable" wicket:message="title:lbl.refresh">
+ <i class="fas fa-sync-alt"></i>
+ </span>
<div id="user-actions-stub">
<span class="om-icon align-left right camera clickable"
wicket:message="data-request:ulist.right.video.request,data-revoke:ulist.right.video.revoke,data-grant:ulist.right.video.grant">
<i class="fas"></i>
diff --git a/openmeetings-web/src/main/webapp/css/raw-activities.css
b/openmeetings-web/src/main/webapp/css/raw-activities.css
index ceceaf0..681a59d 100644
--- a/openmeetings-web/src/main/webapp/css/raw-activities.css
+++ b/openmeetings-web/src/main/webapp/css/raw-activities.css
@@ -3,9 +3,6 @@
height: var(--activities-height);
overflow: hidden;
}
-.room-block.small #activities {
- font-size: 120%;
-}
#activities .ui-resizable-handle {
width: 100%;
}
diff --git a/openmeetings-web/src/main/webapp/css/raw-general.css
b/openmeetings-web/src/main/webapp/css/raw-general.css
index f6c8f86..75ac894 100644
--- a/openmeetings-web/src/main/webapp/css/raw-general.css
+++ b/openmeetings-web/src/main/webapp/css/raw-general.css
@@ -224,7 +224,7 @@ html, body {
vertical-align: text-bottom;
}
.om-icon.big::before {
- font-size: 2.2em;
+ font-size: 2.0em;
line-height: 1.2em;
}
.add.om-icon::before {
diff --git a/openmeetings-web/src/main/webapp/css/raw-menu.css
b/openmeetings-web/src/main/webapp/css/raw-menu.css
index 080cdff..3565289 100644
--- a/openmeetings-web/src/main/webapp/css/raw-menu.css
+++ b/openmeetings-web/src/main/webapp/css/raw-menu.css
@@ -45,7 +45,7 @@
position: relative;
}
.room-block .menu .details .detail-btn i::before {
- font-size: 2.2em;
+ font-size: 2.0em;
line-height: 1.2em;
}
.room-block .menu .details .detail-btn.shared {
diff --git a/openmeetings-web/src/main/webapp/css/raw-room.css
b/openmeetings-web/src/main/webapp/css/raw-room.css
index 69bb62f..b183cc8 100644
--- a/openmeetings-web/src/main/webapp/css/raw-room.css
+++ b/openmeetings-web/src/main/webapp/css/raw-room.css
@@ -5,10 +5,6 @@
}
.room-block .sidebar .user-list .user .om-icon.user-status {
border-radius: 50%;
- width: 14px;
- height: 14px;
- min-height: 14px;
- margin-right: 2px;
}
.room-block .sidebar .user-list .user .om-icon.user-status.user {
background-color: var(--success);
@@ -47,7 +43,7 @@
padding: 5px 0 0 0;
}
.room-block .sidebar .tab i {
- font-size: 2.2em;
+ font-size: 2.0em;
vertical-align: top;
}
html[dir="rtl"] .room-block .sidebar {
@@ -75,7 +71,7 @@ html[dir="rtl"] .room-block .sidebar {
height: 34px;
}
#room-sidebar-tab-users .header .om-icon::before {
- font-size: 2.2em;
+ font-size: 2.0em;
line-height: 1.2em;
}
.room-block .sidebar .user-list {
@@ -103,7 +99,7 @@ html[dir="rtl"] .room-block .sidebar {
.room-block .sidebar .user-list .user .user.actions {
display: none;
}
-.room-block.small .sidebar .user-list .user:hover .user.actions {
+.room-block.narrow .sidebar .user-list .user:hover .user.actions {
margin-top: 84px;
}
.room-block .sidebar .user-list .user:hover .user.actions {
@@ -120,7 +116,7 @@ html[dir="rtl"] .room-block .sidebar {
margin-right: 20px;
overflow: hidden;
}
-.room-block.small .sidebar .user-list .user.name {
+.room-block.narrow .sidebar .user-list .user.name {
display: none;
}
.room-block .sidebar .user-list .user .om-icon.audio-activity {
@@ -147,11 +143,16 @@ html[dir="rtl"] .room-block .sidebar {
.room-block .sidebar.closed .tab-content .tab-pane {
display: none;
}
+.om-icon.ulist-small {
+ width: 14px;
+ height: 14px;
+ min-height: 14px;
+ margin-right: 2px;
+ margin-left: unset;
+}
.audio-activity.om-icon {
opacity: 0.2;
border-radius: 50%;
- width: 14px;
- height: 14px;
background-color: var(--success);
border: 1px solid var(--gray-dark);
}
@@ -184,6 +185,50 @@ html[dir="rtl"] .room-block .sidebar {
.audio-activity.om-icon.speaking {
opacity: 1;
}
+.om-icon.volume-control a:hover {
+ text-decoration: none;
+}
+.om-icon.volume-control a.volume-on::before {
+ content: "\f027";
+ font-size: 1.2em;
+ color: var(--secondary);
+}
+.om-icon.volume-control a.volume-off::before {
+ content: "\f6a9";
+ font-size: 1.2em;
+ color: var(--danger);
+}
+.om-icon.volume-control .dropdown-menu {
+ width: 20px;
+ min-width: 20px;
+ border-radius: 0;
+ border: 0;
+ box-shadow: initial;
+ background-color: transparent;
+}
+.om-icon.volume-control .dropdown-menu .slider {
+ border-radius: 0;
+ background-color: white;
+ border-color: var(--secondary);
+}
+.om-icon.volume-control .dropdown-menu .slider .ui-slider-range {
+ border-radius: 0;
+ background-color: var(--light);
+}
+.om-icon.volume-control .dropdown-menu .slider .handle {
+ border-radius: 0;
+ background-color: var(--light);
+ border-color: var(--secondary);
+ color: var(--secondary);
+}
+.user-video .om-icon.volume-control {
+ background-color: var(--white);
+ border: 1px solid var(--secondary);
+ margin: 0;
+ width: 20px;
+ height: 20px;
+ padding: 1px;
+}
#room-sidebar-tab-users .header .om-icon i {
font-size: 1.2em;
}
@@ -296,16 +341,16 @@ html[dir="rtl"] .room-block .sidebar {
overflow: hidden;
white-space: nowrap;
}
-.room-block.small .sidebar .tab.om-icon.big {
+.room-block.narrow .sidebar .tab.om-icon.big {
max-width: 40px;
width: 40px;
padding-right: 0;
}
-.room-block.small .sidebar .tab.om-icon.big .label {
+.room-block.narrow .sidebar .tab.om-icon.big .label {
display: none;
}
-.room-block.small .sidebar .file-tree .file.item .name
- , .room-block.small .sidebar .file-tree .file.item .name span
+.room-block.narrow .sidebar .file-tree .file.item .name
+ , .room-block.narrow .sidebar .file-tree .file.item .name span
{
width: 40px;
}
@@ -314,9 +359,6 @@ html[dir="rtl"] .room-block .sidebar {
bottom: 30px;
right: 30px;
}
-.room-block.small .wait-moder {
- font-size: 120%;
-}
.room-block .wait-moder strong {
display: block;
padding-bottom: 20px;
@@ -547,7 +589,7 @@ html[dir="rtl"] .room-block .sidebar {
bottom: 0;
}
#quick-vote .control i::before {
- font-size: 2.2em;
+ font-size: 2.0em;
line-height: 1.2em;
}
#quick-vote .control.pro i::before {
