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 c7c9609 [OPENMEETINGS-2155] should be implemented
c7c9609 is described below
commit c7c9609a356ad29519a9136ba39ae0be3d2c9b76
Author: Maxim Solodovnik <[email protected]>
AuthorDate: Sun Mar 22 17:35:13 2020 +0700
[OPENMEETINGS-2155] should be implemented
---
.../apache/openmeetings/web/room/RoomPanel.html | 8 +-
.../org/apache/openmeetings/web/room/raw-room.js | 6 +-
.../apache/openmeetings/web/room/raw-settings.js | 4 +-
.../openmeetings/web/room/raw-video-manager.js | 2 +-
.../apache/openmeetings/web/room/raw-video-util.js | 21 +++--
.../org/apache/openmeetings/web/room/raw-video.js | 91 +++++++++++++---------
.../src/main/webapp/css/raw-general.css | 3 +-
openmeetings-web/src/main/webapp/css/raw-room.css | 64 +++++++++++----
8 files changed, 129 insertions(+), 70 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 f33bcf5..f4ae258 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
@@ -57,14 +57,12 @@
</div>
</div>
<div hidden="hidden">
- <div id="user-video">
+ <div id="user-video" class="video-container">
<div class="video">
<canvas width="10" class="level-meter"
wicket:message="title:767"></canvas>
- <div class="mute-others"
wicket:message="title:video.muteothers"></div>
+ <div class="om-icon mute-others"
wicket:message="title:video.muteothers"></div>
</div>
- <div class="footer bg-warning">
- <div class="on"><wicket:message
key="video.mic.on"/></div>
- <div class="off"><wicket:message
key="video.mic.off"/></div>
+ <div class="footer"
wicket:message="data-on:video.mic.on,data-off:video.mic.off">
</div>
</div>
<div id="video-refresh-btn">
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 c257ede..a903a13 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
@@ -51,7 +51,7 @@ var Room = (function() {
const vw = $('#video' + Room.getOptions().uid);
if (vw.length > 0) {
const v = vw.data();
- if (VideoUtil.hasAudio(v.stream())) {
+ if (VideoUtil.hasMic(v.stream())) {
return v;
}
}
@@ -366,8 +366,8 @@ var Room = (function() {
function _updateClient(c) {
const self = c.uid === options.uid
, le = $('#user' + c.uid)
- , hasAudio = VideoUtil.hasAudio(c)
- , hasVideo = VideoUtil.hasVideo(c)
+ , hasAudio = VideoUtil.hasMic(c)
+ , hasVideo = VideoUtil.hasCam(c)
, speaks = le.find('.audio-activity');
if (le.length === 0) {
return;
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 7b566a9..136b6dc 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
@@ -250,7 +250,7 @@ var VideoSettings = (function() {
function _constraints(sd, callback) {
_getDevConstraints(function(devCnts){
const cnts = {};
- if (devCnts.video && false === o.audioOnly &&
VideoUtil.hasVideo(sd) && s.video.cam > -1) {
+ if (devCnts.video && false === o.audioOnly &&
VideoUtil.hasCam(sd) && s.video.cam > -1) {
cnts.video = {
frameRate: o.camera.fps
};
@@ -263,7 +263,7 @@ var VideoSettings = (function() {
} else {
cnts.video = false;
}
- if (devCnts.audio && VideoUtil.hasAudio(sd) &&
s.video.mic > -1) {
+ if (devCnts.audio && VideoUtil.hasMic(sd) &&
s.video.mic > -1) {
cnts.audio = {
sampleRate: o.microphone.rate
, echoCancellation: o.microphone.echo
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 7e3ac57..b9a4ec2 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
@@ -143,7 +143,7 @@ var VideoManager = (function() {
return;
}
const _id = VideoUtil.getVid(sd.uid)
- , av = VideoUtil.hasAudio(sd) ||
VideoUtil.hasVideo(sd)
+ , av = VideoUtil.hasMic(sd) ||
VideoUtil.hasCam(sd)
, v = $('#' + _id);
if (av && v.length === 1) {
v.data().update(sd);
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 ac18fbe..e2c2613 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
@@ -17,12 +17,15 @@ var VideoUtil = (function() {
function _isRecording(sd) {
return !!sd && 'SCREEN' === sd.type &&
sd.activities.includes(REC_ACTIVITY);
}
- function _hasAudio(sd) {
+ function _hasMic(sd) {
return !sd || sd.activities.includes(MIC_ACTIVITY);
}
- function _hasVideo(sd) {
+ function _hasCam(sd) {
return !sd || sd.activities.includes(CAM_ACTIVITY);
}
+ function _hasVideo(sd) {
+ return _hasCam(sd) || _isSharing(sd) || _isRecording(sd);
+ }
function _getRects(sel, excl) {
const list = [], elems = $(sel);
for (let i = 0; i < elems.length; ++i) {
@@ -137,7 +140,9 @@ var VideoUtil = (function() {
return b.name === 'Edge';
}
function _setPos(v, pos) {
- v.dialog('widget').css(pos);
+ if (v.dialog('instance')) {
+ v.dialog('widget').css(pos);
+ }
}
function _askPermission(callback) {
const perm = $('#ask-permission');
@@ -190,7 +195,8 @@ var VideoUtil = (function() {
self.getVid = _getVid;
self.isSharing = _isSharing;
self.isRecording = _isRecording;
- self.hasAudio = _hasAudio;
+ self.hasMic = _hasMic;
+ self.hasCam = _hasCam;
self.hasVideo = _hasVideo;
self.getRects = _getRects;
self.getPos = _getPos;
@@ -275,7 +281,7 @@ var Volume = (function() {
});
_handle(lastVolume);
_mute(muted);
- return vol.hide();
+ return vol;
}
function _handle(val) {
handleEl.text(val);
@@ -323,7 +329,10 @@ var Volume = (function() {
return muted;
}
, destroy: function() {
- vol.remove();
+ if (vol) {
+ vol.remove();
+ vol = null;
+ }
}
};
});
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 73d3a73..336b833 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,7 +2,7 @@
var Video = (function() {
const self = {}
, AudioCtx = window.AudioContext || window.webkitAudioContext;
- let sd, v, vc, t, f, size, vol, video, iceServers
+ let sd, v, vc, t, footer, size, vol, video, iceServers
, lm, level, userSpeaks = false, muteOthers;
function _resizeDlgArea(_w, _h) {
@@ -55,7 +55,7 @@ var Video = (function() {
}
function _getVideoStream(msg, callback) {
VideoSettings.constraints(sd, function(cnts) {
- if ((VideoUtil.hasVideo(sd) && !cnts.video) ||
(VideoUtil.hasAudio(sd) && !cnts.audio)) {
+ if ((VideoUtil.hasCam(sd) && !cnts.video) ||
(VideoUtil.hasMic(sd) && !cnts.audio)) {
VideoManager.sendMessage({
id : 'devicesAltered'
, uid: sd.uid
@@ -71,10 +71,10 @@ var Video = (function() {
navigator.mediaDevices.getUserMedia(cnts)
.then(function(stream) {
let _stream = stream;
+ const data = {};
if (stream.getAudioTracks().length !==
0) {
lm = vc.find('.level-meter');
lm.show();
- const data = {};
data.aCtx = new AudioCtx();
data.gainNode =
data.aCtx.createGain();
data.analyser =
data.aCtx.createAnalyser();
@@ -92,8 +92,8 @@ var Video = (function() {
_stream.addTrack(track);
});
}
- __createVideo(data);
}
+ __createVideo(data);
callback(msg, cnts, _stream);
})
.catch(function(err) {
@@ -185,37 +185,44 @@ var Video = (function() {
});
}
function _handleMicStatus(state) {
- if (!f || !f.is(':visible')) {
+ if (!footer || !footer.is(':visible')) {
return;
}
if (state) {
- f.find('.off').hide();
- f.find('.on').show();
- f.addClass('ui-state-highlight');
- t.addClass('ui-state-highlight');
+ footer.text(footer.data('on'));
+ footer.addClass('mic-on');
+ t.addClass('mic-on');
} else {
- f.find('.off').show();
- f.find('.on').hide();
- f.removeClass('ui-state-highlight');
- t.removeClass('ui-state-highlight');
+ footer.text(footer.data('off'));
+ footer.removeClass('mic-on');
+ t.removeClass('mic-on');
}
}
function _initContainer(_id, name, opts) {
+ const hasVideo = VideoUtil.hasVideo(sd);
let contSel;
- if (opts.interview) {
- const area = $('.pod-area');
- const contId = uuidv4();
- contSel = '#' + contId;
- area.append($('<div class="pod"></div>').attr('id',
contId));
- WbArea.updateAreaClass();
+ if (hasVideo) {
+ if (opts.interview) {
+ const area = $('.pod-area');
+ const contId = uuidv4();
+ contSel = '#' + contId;
+ area.append($('<div
class="pod"></div>').attr('id', contId));
+ WbArea.updateAreaClass();
+ } else {
+ contSel = '.room-block .room-container';
+ }
} else {
- contSel = '.room-block .room-container';
+ contSel = '#user' + sd.cuid;
}
$(contSel).append(OmUtil.tmpl('#user-video', _id)
.attr('title', name)
.attr('data-client-uid', sd.cuid)
.attr('data-client-type', sd.type)
.data(self));
+ v = $('#' + _id);
+ vc = v.find('.video');
+ muteOthers = vc.find('.mute-others');
+ _setRights();
return contSel;
}
function _initDialog(v, opts) {
@@ -271,17 +278,20 @@ var Video = (function() {
, _h = sd.height
, isSharing = VideoUtil.isSharing(sd)
, isRecording = VideoUtil.isRecording(sd)
+ , hasVideo = VideoUtil.hasVideo(sd)
, opts = Room.getOptions();
sd.self = sd.cuid === opts.uid;
const contSel = _initContainer(_id, name, opts);
- v = $('#' + _id);
- f = v.find('.footer');
+ footer = v.find('.footer');
+ if (!opts.showMicStatus) {
+ footer.hide();
+ }
if (!sd.self && isSharing) {
Sharer.close();
}
if (sd.self && (isSharing || isRecording)) {
v.hide();
- } else {
+ } else if (hasVideo) {
v.dialog({
classes: {
'ui-dialog': 'ui-corner-all video
user-video' + (opts.showMicStatus ? ' mic-status' : '')
@@ -296,14 +306,14 @@ var Video = (function() {
});
_initDialog(v, opts);
}
- if (!isSharing && !isRecording) {
+ if (hasVideo && !isSharing && !isRecording) {
_initCamDialog();
}
t = v.parent().find('.ui-dialog-titlebar').attr('title', name);
v.on('remove', _cleanup);
- vc = v.find('.video');
- vc.width(_w).height(_h);
- muteOthers = vc.find('.mute-others');
+ if (hasVideo) {
+ vc.width(_w).height(_h);
+ }
_refresh(msg);
@@ -317,8 +327,11 @@ var Video = (function() {
sd.activities = _c.activities.sort();
sd.user.firstName = _c.user.firstName;
sd.user.lastName = _c.user.lastName;
- const name = sd.user.displayName;
- v.dialog('option', 'title',
name).parent().find('.ui-dialog-titlebar').attr('title', name);
+ const name = sd.user.displayName
+ , hasVideo = VideoUtil.hasVideo(sd);
+ if (hasVideo) {
+ v.dialog('option', 'title',
name).parent().find('.ui-dialog-titlebar').attr('title', name);
+ }
const same = prevA.length === sd.activities.length &&
prevA.every(function(value, index) { return value === sd.activities[index]})
if (sd.self && !same) {
_refresh();
@@ -326,7 +339,7 @@ var Video = (function() {
}
function __createVideo(data) {
const _id = VideoUtil.getVid(sd.uid);
- const hasVideo = VideoUtil.hasVideo(sd) ||
VideoUtil.isSharing(sd) || VideoUtil.isRecording(sd);
+ const hasVideo = VideoUtil.hasVideo(sd);
_resizeDlgArea(hasVideo ? size.width : 120
, hasVideo ? size.height : 90);
video = $(hasVideo ? '<video>' : '<audio>').attr('id', 'vid' +
_id)
@@ -340,13 +353,17 @@ var Video = (function() {
vc.parents('.ui-dialog').removeClass('audio-only');
video.attr('poster', sd.user.pictureUri);
} else {
- vc.parents('.ui-dialog').addClass('audio-only');
- vc.addClass('audio-only').css('background-image',
'url(' + sd.user.pictureUri + ')');
+ vc.addClass('audio-only');
}
vc.append(video);
- if (VideoUtil.hasAudio(sd)) {
- v.parent().find('.ui-dialog-titlebar-buttonpane')
- .append(vol.create(self));
+ if (VideoUtil.hasMic(sd)) {
+ const volIco = vol.create(self)
+ if (hasVideo) {
+
v.parent().find('.ui-dialog-titlebar-buttonpane').append(volIco);
+ } else {
+ volIco.addClass('ulist-small');
+ volIco.insertAfter('#user' + sd.cuid + '
.typing-activity');
+ }
} else {
vol.destroy();
}
@@ -354,7 +371,7 @@ var Video = (function() {
function _refresh(_msg) {
const msg = _msg || {iceServers: iceServers};
_cleanup();
- const hasAudio = VideoUtil.hasAudio(sd);
+ const hasAudio = VideoUtil.hasMic(sd);
if (sd.self) {
_createSendPeer(msg);
_handleMicStatus(hasAudio);
@@ -363,7 +380,7 @@ var Video = (function() {
}
}
function _setRights() {
- if (Room.hasRight(['MUTE_OTHERS']) && VideoUtil.hasAudio(sd)) {
+ if (Room.hasRight(['MUTE_OTHERS']) && VideoUtil.hasMic(sd)) {
muteOthers.addClass('enabled').click(function() {
VideoManager.clickMuteOthers(sd.uid);
});
diff --git a/openmeetings-web/src/main/webapp/css/raw-general.css
b/openmeetings-web/src/main/webapp/css/raw-general.css
index 75ac894..d78e7a8 100644
--- a/openmeetings-web/src/main/webapp/css/raw-general.css
+++ b/openmeetings-web/src/main/webapp/css/raw-general.css
@@ -209,7 +209,7 @@ html, body {
border: none;
margin-left: 2px;
margin-top: 2px;
- display: inline-block !important;
+ display: inline-block;
position: relative;
}
.om-icon.big {
@@ -222,6 +222,7 @@ html, body {
color: var(--secondary);
font-size: 1.2em;
vertical-align: text-bottom;
+ line-height: 1em;
}
.om-icon.big::before {
font-size: 2.0em;
diff --git a/openmeetings-web/src/main/webapp/css/raw-room.css
b/openmeetings-web/src/main/webapp/css/raw-room.css
index b183cc8..3cdc686 100644
--- a/openmeetings-web/src/main/webapp/css/raw-room.css
+++ b/openmeetings-web/src/main/webapp/css/raw-room.css
@@ -78,33 +78,32 @@ html[dir="rtl"] .room-block .sidebar {
overflow-y: auto;
height: calc(100% - var(--room-sidebar-header-height) -
var(--buffer-size));
}
-.room-block .sidebar .user-list .user {
- min-height: 40px;
+.room-block .sidebar .user-list .user.entry {
+ min-height: 60px;
padding-left: 5px;
padding-top: 5px;
- background-size: 40px 40px;
+ background-size: 60px 60px;
background-repeat: no-repeat;
background-position: 2px 2px;
position: relative;
}
-.room-block .sidebar .user-list .user:hover {
+.room-block .sidebar .user-list .user.entry:hover {
background-size: 80px 80px;
min-height: 80px;
}
-.room-block .sidebar .user-list .user:hover .user.name {
+.room-block .sidebar .user-list .user.entry:hover .user.name {
padding: 0;
margin-top: 84px;
min-height: 18px;
}
-.room-block .sidebar .user-list .user .user.actions {
+.room-block .sidebar .user-list .user.entry .user.actions {
display: none;
}
-.room-block.narrow .sidebar .user-list .user:hover .user.actions {
+.room-block.narrow .sidebar .user-list .user.entry:hover .user.actions {
margin-top: 84px;
}
-.room-block .sidebar .user-list .user:hover .user.actions {
+.room-block .sidebar .user-list .user.entry:hover .user.actions {
display: block;
- min-height: 18px;
padding: 0;
margin-right: 35px;
}
@@ -119,11 +118,31 @@ html[dir="rtl"] .room-block .sidebar {
.room-block.narrow .sidebar .user-list .user.name {
display: none;
}
-.room-block .sidebar .user-list .user .om-icon.audio-activity {
+.room-block .sidebar .user-list .user.entry .om-icon.audio-activity {
position: absolute;
bottom: 2px;
right: 2px;
}
+.user-list .user.entry:hover .video-container {
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+.user-list .user.entry:hover .video-container
+, .user-list .user.entry:hover .video-container .video.audio-only
+{
+ width: 80px;
+ height: 80px;
+}
+.user-list .user.entry .video-container
+, .user-list .user.entry .video-container .video.audio-only
+{
+ width: 50px;
+ height: 50px;
+}
+.user-list .user.entry .video-container .footer {
+ display: none !important;
+}
.room-block .sidebar .icon-undock, .room-block .sidebar .icon-dock {
font-size: 1.6em;
padding-top: 3px;
@@ -236,7 +255,7 @@ html[dir="rtl"] .room-block .sidebar {
position: absolute;
bottom: 1px;
right: 1px;
- font-size: .8em;
+ font-size: .6em;
}
.right.om-icon i::before {
color: var(--success);
@@ -270,7 +289,7 @@ html[dir="rtl"] .room-block .sidebar {
.right.mute-others.om-icon::before {
content: '\f6a9';
}
-.room-block .sidebar .user-list .user .kick i {
+.room-block .sidebar .user-list .user.entry .kick i {
font-size: 1.5em;
}
.settings.om-icon::before {
@@ -295,7 +314,7 @@ html[dir="rtl"] .room-block .sidebar {
content: '\f131';
color: var(--warning);
}
-.room-block .sidebar .user-list .user.current {
+.room-block .sidebar .user-list .user.entry.current {
font-weight: bold;
background-color: var(--light);
}
@@ -365,6 +384,9 @@ html[dir="rtl"] .room-block .sidebar {
}
/************ VIDEO **************/
+.mic-on {
+ background-color: var(--warning);
+}
.ui-dialog.video, .ui-dialog.video .ui-dialog-titlebar, .ui-dialog.video
.ui-dialog-content {
padding: 0;
}
@@ -377,7 +399,7 @@ html[dir="rtl"] .room-block .sidebar {
.ui-dialog.video.user-video.user-speaks {
box-shadow: 3px 3px 4px green;
}
-.ui-dialog.user-video .level-meter {
+.video-container .level-meter {
display: inline-block;
position: absolute;
bottom: 5px;
@@ -640,6 +662,18 @@ html[dir="rtl"] .room-block .sidebar {
z-index: 2;
display: none;
}
+.video.audio-only .mute-others {
+ top: calc(50% - 16px);
+ left: calc(50% - 10px);
+ width: 32px;
+ height: 32px;
+}
+.video .mute-others::before {
+ content: '\f3c9';
+ color: var(--warning);
+ line-height: 1em;
+ font-size: 2.5em;
+}
.video:hover .mute-others.enabled {
display: block;
}
@@ -658,7 +692,7 @@ html[dir="rtl"] .room-block .sidebar {
height: 100% !important;
width: 100% !important;
}
-.user-video.ui-dialog .ui-dialog-content .video .level-meter {
+.video-container .video .level-meter {
height: calc(100% - 10px) !important;
}
.user-video.ui-dialog .ui-dialog-content .footer {
