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
commit 07e54c7c112ee0fc5332675e9126fd7c14e03584 Author: Maxim Solodovnik <[email protected]> AuthorDate: Sat Mar 28 10:11:42 2020 +0700 [OPENMEETINGS-2195] various UI fixees related to a/v icons --- .../src/main/assembly/components/templates.xml | 1 - openmeetings-web/pom.xml | 5 - .../apache/openmeetings/web/room/RoomPanel.html | 50 ++-- .../openmeetings/web/room/jquery.dialogextend.js | 329 --------------------- .../org/apache/openmeetings/web/room/raw-room.js | 2 + .../org/apache/openmeetings/web/room/raw-sharer.js | 77 +++-- .../openmeetings/web/room/raw-video-manager.js | 9 +- .../apache/openmeetings/web/room/raw-video-util.js | 21 +- .../org/apache/openmeetings/web/room/raw-video.js | 61 ++-- .../apache/openmeetings/web/room/wb/WbPanel.html | 4 +- .../openmeetings/web/room/wb/raw-tool-paint.js | 2 +- .../openmeetings/web/room/wb/raw-tool-shape.js | 2 +- .../openmeetings/web/room/wb/raw-tool-text.js | 2 +- openmeetings-web/src/main/webapp/css/raw-room.css | 66 ++++- pom.xml | 4 +- 15 files changed, 187 insertions(+), 448 deletions(-) diff --git a/openmeetings-server/src/main/assembly/components/templates.xml b/openmeetings-server/src/main/assembly/components/templates.xml index 37e0bf7..7f317ee 100644 --- a/openmeetings-server/src/main/assembly/components/templates.xml +++ b/openmeetings-server/src/main/assembly/components/templates.xml @@ -37,7 +37,6 @@ <exclude>**/MathJax*.js</exclude> <exclude>**/fileinput.js</exclude> <exclude>**/fileinput.css</exclude> - <exclude>**/jquery.dialogextend.js</exclude> <exclude>**/kurento-utils.js</exclude> <exclude>**/network.js</exclude> </excludes> diff --git a/openmeetings-web/pom.xml b/openmeetings-web/pom.xml index 06d4401..9654f83 100644 --- a/openmeetings-web/pom.xml +++ b/openmeetings-web/pom.xml @@ -194,7 +194,6 @@ <charset>UTF-8</charset> <jsSourceDir>../java/org/apache/openmeetings/web/room</jsSourceDir> <jsSourceFiles> - <jsSourceFile>jquery.dialogextend.js</jsSourceFile> <jsSourceFile>raw-video.js</jsSourceFile> <jsSourceFile>raw-video-manager.js</jsSourceFile> <jsSourceFile>raw-sharer.js</jsSourceFile> @@ -272,7 +271,6 @@ **/MathJax*.js, **/fileinput.js, **/fileinput.css, - **/jquery.dialogextend.js, **/kurento-utils.js, **/network.js </packagingExcludes> @@ -283,7 +281,6 @@ **/MathJax*.js, **/fileinput.js, **/fileinput.css, - **/jquery.dialogextend.js, **/kurento-utils.js, **/network.js </warSourceExcludes> @@ -413,7 +410,6 @@ <exclude>**/MathJax*.js</exclude> <exclude>**/fileinput.js</exclude> <exclude>**/fileinput.css</exclude> - <exclude>**/jquery.dialogextend.js</exclude> <exclude>**/kurento-utils.js</exclude> <exclude>**/network.js</exclude> </excludes> @@ -448,7 +444,6 @@ <exclude>**/MathJax*.js</exclude> <exclude>**/fileinput.js</exclude> <exclude>**/fileinput.css</exclude> - <exclude>**/jquery.dialogextend.js</exclude> <exclude>**/kurento-utils.js</exclude> <exclude>**/network.js</exclude> </excludes> 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 f4ae258..2a51e15 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 @@ -49,7 +49,7 @@ <wicket:message key="556"/> </div> <div class="modal-footer"> - <button type="button" class="btn btn-secondary" data-dismiss="modal"> + <button type="button" class="btn btn-outline-secondary" data-dismiss="modal"> <i class="fas fa-sync-alt"></i> <wicket:message key="753"/> </button> </div> @@ -60,14 +60,22 @@ <div id="user-video" class="video-container"> <div class="video"> <canvas width="10" class="level-meter" wicket:message="title:767"></canvas> - <div class="om-icon mute-others" wicket:message="title:video.muteothers"></div> + <div class="om-icon mute-others clickable" wicket:message="title:video.muteothers"></div> </div> <div class="footer" wicket:message="data-on:video.mic.on,data-off:video.mic.off"> </div> </div> - <div id="video-refresh-btn"> - <a class="ui-dialog-titlebar-refresh ui-corner-all ui-state-default" href="#" wicket:message="title:lbl.refresh" role="button"> - <span class="ui-icon ui-icon-refresh"><wicket:message key="lbl.refresh"/></span> + <div id="video-button-bar" class="buttonpane align-right"> + <a class="btn btn-refresh btn-outline-secondary btn-sm" href="#" wicket:message="title:lbl.refresh" role="button"> + <i class="fas fa-sync-alt"></i> + <span class="sr-only"><wicket:message key="lbl.refresh"/></span> + </a> + <a class="btn btn-toggle btn-outline-secondary btn-sm" href="#" role="button"> + <i class="fas"></i> + </a> + <a class="btn btn-wclose btn-outline-secondary btn-sm" href="#" wicket:message="title:85" role="button"> + <i class="fas fa-times"></i> + <span class="sr-only"><wicket:message key="85"/></span> </a> </div> <div id="muteothers-confirm" wicket:message="title:ulist.right.muteothers.grant, data-btn-ok:54, data-btn-cancel:lbl.cancel"> @@ -99,24 +107,24 @@ <div id="sharer" wicket:message="title:730"> <h2 class="alert">Screen-sharing is not supported in your browser</h2> <div class="container p-0 m-0"> - <div> - <span class="label"><wicket:message key="734"/></span> - <select name="type" class="type"> + <div class="row-no-gutters"> + <label class="col-7"><wicket:message key="734"/></label> + <select name="type" class="type col-4 custom-select"> <option value="screen">Screen</option> <option value="window">Window</option> </select> </div> - <div> - <span class="label"><wicket:message key="740"/></span> - <input class="width" type="number" value="800"/> + <div class="row-no-gutters"> + <label class="col-7"><wicket:message key="740"/></label> + <input class="width col-4" type="number" value="800"/> </div> - <div> - <span class="label"><wicket:message key="741"/></span> - <input class="height" type="number" value="600"/> + <div class="row-no-gutters"> + <label class="col-7"><wicket:message key="741"/></label> + <input class="height col-4" type="number" value="600"/> </div> - <div> - <span class="label"><wicket:message key="1089"/></span> - <select name="fps" class="fps"> + <div class="row-no-gutters"> + <label class="col-7"><wicket:message key="1089"/></label> + <select name="fps" class="fps col-4 custom-select"> <option value="2">2 FPS</option> <option value="5">5 FPS</option> <option value="10" selected>10 FPS</option> @@ -127,8 +135,12 @@ </select> </div> <hr/> - <button class="share-start-stop" wicket:message="data-start:732, data-stop:733"><wicket:message key="732"/></button> - <button class="record-start-stop ui-state-error" wicket:message="data-start:871, data-stop:872"><wicket:message key="871"/></button> + <button class="share-start-stop btn btn-outline-primary" wicket:message="data-start:732, data-stop:733"> + <i class="fas"></i> <span><wicket:message key="732"/></span> + </button> + <button class="record-start-stop btn btn-outline-danger" wicket:message="data-start:871, data-stop:872"> + <i class="fas"></i> <span><wicket:message key="871"/></span> + </button> </div> </div> <div id="ask-permission" wicket:message="title:video.permission.title, data-btn-ok:54"> diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/jquery.dialogextend.js b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/jquery.dialogextend.js deleted file mode 100644 index 8e353d8..0000000 --- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/jquery.dialogextend.js +++ /dev/null @@ -1,329 +0,0 @@ -/* - * Licensed MIT https://github.com/ROMB/jquery-dialogextend/blob/master/LICENSE.md - */ -(function() { - var $; - - $ = jQuery; - - $.widget("ui.dialogExtend", { - version: "2.0.4", - modes: {}, - options: { - "closable": true, - "dblclick": false, - "titlebar": false, - "icons": { - "close": "ui-icon-closethick", - "restore": "ui-icon-newwin" - }, - "load": null, - "beforeRestore": null, - "restore": null - }, - _create: function() { - this._state = "normal"; - if (!$(this.element[0]).data("ui-dialog")) { - $.error("jQuery.dialogExtend Error : Only jQuery UI Dialog element is accepted"); - } - this._verifyOptions(); - this._initStyles(); - this._initButtons(); - this._initTitleBar(); - this._setState("normal"); - this._on("load", function(e) { - return console.log("test", e); - }); - return this._trigger("load"); - }, - _setState: function(state) { - $(this.element[0]).removeClass("ui-dialog-" + this._state).addClass("ui-dialog-" + state); - return this._state = state; - }, - _verifyOptions: function() { - var name, _ref, _results; - - if (this.options.dblclick && !(this.options.dblclick in this.modes)) { - $.error("jQuery.dialogExtend Error : Invalid <dblclick> value '" + this.options.dblclick + "'"); - this.options.dblclick = false; - } - if (this.options.titlebar && ((_ref = this.options.titlebar) !== "none" && _ref !== "transparent")) { - $.error("jQuery.dialogExtend Error : Invalid <titlebar> value '" + this.options.titlebar + "'"); - this.options.titlebar = false; - } - _results = []; - for (name in this.modes) { - if (this["_verifyOptions_" + name]) { - _results.push(this["_verifyOptions_" + name]()); - } else { - _results.push(void 0); - } - } - return _results; - }, - _initStyles: function() { - var name, style, _results; - - if (!$(".dialog-extend-css").length) { - style = ''; - style += '<style class="dialog-extend-css" type="text/css">'; - style += '.ui-dialog .ui-dialog-titlebar-buttonpane>a { float: right; }'; - style += '.ui-dialog .ui-dialog-titlebar-restore { width: 19px; height: 18px; }'; - style += '.ui-dialog .ui-dialog-titlebar-restore span { display: block; margin: 1px; }'; - style += '.ui-dialog .ui-dialog-titlebar-restore:hover,'; - style += '.ui-dialog .ui-dialog-titlebar-restore:focus { padding: 0; }'; - style += '.ui-dialog .ui-dialog-titlebar ::selection { background-color: transparent; }'; - style += '</style>'; - $(style).appendTo("body"); - } - _results = []; - for (name in this.modes) { - _results.push(this["_initStyles_" + name]()); - } - return _results; - }, - _initButtons: function() { - var buttonPane, mode, name, titlebar, _ref, - _this = this; - - titlebar = $(this.element[0]).dialog("widget").find(".ui-dialog-titlebar"); - buttonPane = $('<div class="ui-dialog-titlebar-buttonpane"></div>').appendTo(titlebar); - buttonPane.css({ - "position": "absolute", - "top": "50%", - "right": "0.3em", - "margin-top": "-10px", - "height": "18px" - }); - titlebar.find(".ui-dialog-titlebar-close").css({ - "position": "relative", - "float": "right", - "top": "auto", - "right": "auto", - "margin": 0 - }).find(".ui-icon").removeClass("ui-icon-closethick").addClass(this.options.icons.close).end().appendTo(buttonPane).end(); - buttonPane.append('<a class="ui-dialog-titlebar-restore ui-corner-all ui-state-default" href="#"><span class="ui-icon ' + this.options.icons.restore + '" title="restore">restore</span></a>').find('.ui-dialog-titlebar-restore').attr("role", "button").mouseover(function() { - return $(this).addClass("ui-state-hover"); - }).mouseout(function() { - return $(this).removeClass("ui-state-hover"); - }).focus(function() { - return $(this).addClass("ui-state-focus"); - }).blur(function() { - return $(this).removeClass("ui-state-focus"); - }).end().find(".ui-dialog-titlebar-close").toggle(this.options.closable).end().find(".ui-dialog-titlebar-restore").hide().click(function(e) { - e.preventDefault(); - return _this.restore(); - }).end(); - _ref = this.modes; - for (name in _ref) { - mode = _ref[name]; - this._initModuleButton(name, mode); - } - return titlebar.dblclick(function(evt) { - if (_this.options.dblclick) { - if (_this._state !== "normal") { - return _this.restore(); - } else { - return _this[_this.options.dblclick](); - } - } - }).select(function() { - return false; - }); - }, - _initModuleButton: function(name, mode) { - var buttonPane, - _this = this; - - buttonPane = $(this.element[0]).dialog("widget").find('.ui-dialog-titlebar-buttonpane'); - return buttonPane.append('<a class="ui-dialog-titlebar-' + name + ' ui-corner-all ui-state-default" href="#" title="' + name + '"><span class="ui-icon ' + this.options.icons[name] + '">' + name + '</span></a>').find(".ui-dialog-titlebar-" + name).attr("role", "button").mouseover(function() { - return $(this).addClass("ui-state-hover"); - }).mouseout(function() { - return $(this).removeClass("ui-state-hover"); - }).focus(function() { - return $(this).addClass("ui-state-focus"); - }).blur(function() { - return $(this).removeClass("ui-state-focus"); - }).end().find(".ui-dialog-titlebar-" + name).toggle(this.options[mode.option]).click(function(e) { - e.preventDefault(); - return _this[name](); - }).end(); - }, - _initTitleBar: function() { - var handle; - - switch (this.options.titlebar) { - case false: - return 0; - case "none": - if ($(this.element[0]).dialog("option", "draggable")) { - handle = $("<div />").addClass("ui-dialog-draggable-handle").css("cursor", "move").height(5); - $(this.element[0]).dialog("widget").prepend(handle).draggable("option", "handle", handle); - } - return $(this.element[0]).dialog("widget").find(".ui-dialog-titlebar").find(".ui-dialog-title").html(" ").end().css({ - "background-color": "transparent", - "background-image": "none", - "border": 0, - "position": "absolute", - "right": 0, - "top": 0, - "z-index": 9999 - }).end(); - case "transparent": - return $(this.element[0]).dialog("widget").find(".ui-dialog-titlebar").css({ - "background-color": "transparent", - "background-image": "none", - "border": 0 - }); - default: - return $.error("jQuery.dialogExtend Error : Invalid <titlebar> value '" + this.options.titlebar + "'"); - } - }, - state: function() { - return this._state; - }, - restore: function() { - this._trigger("beforeRestore"); - this._restore(); - this._toggleButtons(); - return this._trigger("restore"); - }, - _restore: function() { - if (this._state !== "normal") { - this["_restore_" + this._state](); - this._setState("normal"); - return $(this.element[0]).dialog("widget").focus(); - } - }, - _saveSnapshot: function() { - if (this._state === "normal") { - this.original_config_resizable = $(this.element[0]).dialog("option", "resizable"); - this.original_config_draggable = $(this.element[0]).dialog("option", "draggable"); - this.original_size_height = $(this.element[0]).dialog("widget").outerHeight(); - this.original_size_width = $(this.element[0]).dialog("option", "width"); - this.original_size_maxHeight = $(this.element[0]).dialog("option", "maxHeight"); - this.original_position_mode = $(this.element[0]).dialog("widget").css("position"); - this.original_position_left = $(this.element[0]).dialog("widget").offset().left - $('body').scrollLeft(); - this.original_position_top = $(this.element[0]).dialog("widget").offset().top - $('body').scrollTop(); - return this.original_titlebar_wrap = $(this.element[0]).dialog("widget").find(".ui-dialog-titlebar").css("white-space"); - } - }, - _loadSnapshot: function() { - return { - "config": { - "resizable": this.original_config_resizable, - "draggable": this.original_config_draggable - }, - "size": { - "height": this.original_size_height, - "width": this.original_size_width, - "maxHeight": this.original_size_maxHeight - }, - "position": { - "mode": this.original_position_mode, - "left": this.original_position_left, - "top": this.original_position_top - }, - "titlebar": { - "wrap": this.original_titlebar_wrap - } - }; - }, - _toggleButtons: function(newstate) { - var mode, name, state, _ref, _ref1, _results; - - state = newstate || this._state; - $(this.element[0]).dialog("widget").find(".ui-dialog-titlebar-restore").toggle(state !== "normal").css({ - "right": "1.4em" - }).end(); - _ref = this.modes; - for (name in _ref) { - mode = _ref[name]; - $(this.element[0]).dialog("widget").find(".ui-dialog-titlebar-" + name).toggle(state !== mode.state && this.options[mode.option]); - } - _ref1 = this.modes; - _results = []; - for (name in _ref1) { - mode = _ref1[name]; - if (mode.state === state) { - _results.push($(this.element[0]).dialog("widget").find(".ui-dialog-titlebar-restore").insertAfter($(this.element[0]).dialog("widget").find(".ui-dialog-titlebar-" + name)).end()); - } else { - _results.push(void 0); - } - } - return _results; - } - }); - -}).call(this); - -(function() { - var $; - - $ = jQuery; - - $.extend(true, $.ui.dialogExtend.prototype, { - modes: { - "collapse": { - option: "collapsable", - state: "collapsed" - } - }, - options: { - "collapsable": false, - "icons": { - "collapse": "ui-icon-triangle-1-s" - }, - "beforeCollapse": null, - "collapse": null - }, - collapse: function() { - var newHeight, pos; - - newHeight = $(this.element[0]).dialog("widget").find(".ui-dialog-titlebar").height() + 2; - this._trigger("beforeCollapse"); - if (this._state !== "normal") { - this._restore(); - } - this._saveSnapshot(); - pos = $(this.element[0]).dialog("widget").position(); - $(this.element[0]).dialog("option", { - "resizable": false, - "height": newHeight, - "maxHeight": newHeight, - "position": [pos.left - $(document).scrollLeft(), pos.top - $(document).scrollTop()] - }).on('dialogclose', this._collapse_restore).dialog("widget").find(".ui-dialog-buttonpane:visible").hide().end().find(".ui-dialog-titlebar").css("white-space", "nowrap").end().find(".ui-dialog-content"); - this._setState("collapsed"); - this._toggleButtons(); - return this._trigger("collapse"); - }, - _restore_collapsed: function() { - var original; - - original = this._loadSnapshot(); - return $(this.element[0]).show().dialog("widget").find(".ui-dialog-buttonpane:hidden").show().end().find(".ui-dialog-titlebar").css("white-space", original.titlebar.wrap).end().find(".ui-dialog-content").dialog("option", { - "resizable": original.config.resizable, - "height": original.size.height, - "maxHeight": original.size.maxHeight - }).off('dialogclose', this._collapse_restore); - }, - _initStyles_collapse: function() { - var style; - - if (!$(".dialog-extend-collapse-css").length) { - style = ''; - style += '<style class="dialog-extend-collapse-css" type="text/css">'; - style += '.ui-dialog .ui-dialog-titlebar-collapse { width: 19px; height: 18px; }'; - style += '.ui-dialog .ui-dialog-titlebar-collapse span { display: block; margin: 1px; }'; - style += '.ui-dialog .ui-dialog-titlebar-collapse:hover,'; - style += '.ui-dialog .ui-dialog-titlebar-collapse:focus { padding: 0; }'; - style += '</style>'; - return $(style).appendTo("body"); - } - }, - _collapse_restore: function() { - return $(this).dialogExtend("restore"); - } - }); - -}).call(this); 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 5bf30ea..bd1b971 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 @@ -79,6 +79,8 @@ var Room = (function() { function _keyHandler(e) { if (__keyPressed(options.keycode.arrange, e)) { VideoUtil.arrange(); + } else if (__keyPressed(options.keycode.arrangeresize, e)) { + VideoUtil.arrangeResize(); } else if (__keyPressed(options.keycode.muteothers, e)) { const v = _getSelfAudioClient(); if (v !== null) { diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/raw-sharer.js b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/raw-sharer.js index 4a4015d..46faf98 100644 --- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/raw-sharer.js +++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/raw-sharer.js @@ -9,8 +9,13 @@ var Sharer = (function() { function _init() { sharer = $('#sharer').dialog({ - width: 450 + classes: { + 'ui-dialog': 'sharer' + , 'ui-dialog-titlebar': '' + } + , width: 450 , autoOpen: false + , resizable: false }); if (!VideoUtil.sharingSupported()) { sharer.find('.container').remove(); @@ -18,17 +23,9 @@ var Sharer = (function() { } else { type = sharer.find('select.type'); const b = kurentoUtils.WebRtcPeer.browser; - type.selectmenu({ - width: 150 - , disabled: _typeDisabled(b) - }); - fps = sharer.find('select.fps').selectmenu({ - width: 120 - , disabled: VideoUtil.isEdge(b) - }); - sbtn = sharer.find('.share-start-stop').button({ - icon: 'ui-icon-image' - }).off().click(function() { + fps = sharer.find('select.fps'); + _disable(fps, VideoUtil.isEdge(b)); + sbtn = sharer.find('.share-start-stop').off().click(function() { if (shareState === SHARE_STOPED) { _setShareState(SHARE_STARTING); VideoManager.sendMessage({ @@ -47,9 +44,7 @@ var Sharer = (function() { }); width = sharer.find('.width'); height = sharer.find('.height'); - rbtn = sharer.find('.record-start-stop').button({ - icon: 'ui-icon-bullet' - }).off().click(function() { + rbtn = sharer.find('.record-start-stop').off().click(function() { if (recState === SHARE_STOPED) { _setRecState(SHARE_STARTING); VideoManager.sendMessage({ @@ -68,45 +63,41 @@ var Sharer = (function() { }); } } + function _disable(e, state) { + e.prop('disabled', state); + if (state) { + e.addClass('disabled'); + } else { + e.removeClass('disabled'); + } + } function _typeDisabled(_b) { const b = _b || kurentoUtils.WebRtcPeer.browser; return VideoUtil.isEdge(b) || VideoUtil.isChrome(b); } - function _setShareState(state) { - shareState = state; + function _setBtnState(btn, state) { const dis = SHARE_STOPED !== state , typeDis = _typeDisabled(); - type.selectmenu('option', 'disabled', dis || typeDis); - fps.selectmenu('option', 'disabled', dis || typeDis); - width.prop('disabled', dis); - height.prop('disabled', dis); - sbtn.text(sbtn.data(dis ? 'stop' : 'start')); - sbtn.button('option', 'icon', dis ? 'ui-icon-stop' : 'ui-icon-image'); - if (state === SHARE_STARTING) { - sbtn.button('disable'); - rbtn.button('disable'); + _disable(type, dis || typeDis); + _disable(fps, dis || typeDis); + _disable(width, dis); + _disable(height, dis); + btn.find('span').text(btn.data(dis ? 'stop' : 'start')); + if (dis) { + btn.addClass('stop'); } else { - sbtn.button('enable'); - rbtn.button('enable'); + btn.removeClass('stop'); } + _disable(btn, state === SHARE_STARTING); + _disable(btn, state === SHARE_STARTING); + } + function _setShareState(state) { + shareState = state; + _setBtnState(sbtn, state); } function _setRecState(state) { recState = state; - const dis = SHARE_STOPED !== state - , typeDis = _typeDisabled(); - type.selectmenu('option', 'disabled', dis || typeDis); - fps.selectmenu('option', 'disabled', dis || typeDis); - width.prop('disabled', dis); - height.prop('disabled', dis); - rbtn.text(rbtn.data(dis ? 'stop' : 'start')); - rbtn.button('option', 'icon', dis ? 'ui-icon-stop' : 'ui-icon-image'); - if (state === SHARE_STARTING) { - sbtn.button('disable'); - rbtn.button('disable'); - } else { - sbtn.button('enable'); - rbtn.button('enable'); - } + _setBtnState(rbtn, state); } function _getShareUid() { const v = $('div[data-client-uid="' + Room.getOptions().uid + '"][data-client-type="SCREEN"]'); 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 b9a4ec2..3f02867 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 @@ -5,7 +5,7 @@ var VideoManager = (function() { function _onVideoResponse(m) { const w = $('#' + VideoUtil.getVid(m.uid)) - , v = w.data() + , v = w.data(); v.getPeer().processAnswer(m.sdpAnswer, function (error) { if (error) { @@ -128,7 +128,7 @@ var VideoManager = (function() { function _init() { Wicket.Event.subscribe('/websocket/message', _onWsMessage); VideoSettings.init(Room.getOptions()); - share = $('.room-block .room-container').find('.icon.shared.ui-button'); + share = $('.room-block .room-container').find('.btn.shared'); inited = true; } function _update(c) { @@ -194,7 +194,8 @@ var VideoManager = (function() { .attr('title', share.data('user') + ' ' + sd.user.firstName + ' ' + sd.user.lastName + ' ' + share.data('text')) .data('uid', sd.uid) .data('cuid', sd.cuid) - .show(), 10); + .show() + , 'btn-outline-warning', 10); share.tooltip().off('click').click(function() { _playSharing(sd, iceServers); }); @@ -218,7 +219,7 @@ var VideoManager = (function() { } } function _find(uid) { - return $(VID_SEL + ' div[data-client-uid="' + uid + '"][data-client-type="WEBCAM"]'); + return $(VID_SEL + '[data-client-uid="' + uid + '"][data-client-type="WEBCAM"]'); } function _userSpeaks(uid, active) { const u = $('#user' + uid + ' .audio-activity') 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 e2c2613..6eaadbe 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 @@ -1,7 +1,7 @@ /* Licensed under the Apache License, Version 2.0 (the "License") http://www.apache.org/licenses/LICENSE-2.0 */ const WB_AREA_SEL = '.room-block .wb-block'; const WBA_WB_SEL = '.room-block .wb-block .ui-tabs-panel.ui-corner-bottom.ui-widget-content:visible'; -const VID_SEL = '.video.user-video'; +const VID_SEL = '.video-container'; const CAM_ACTIVITY = 'VIDEO'; const MIC_ACTIVITY = 'AUDIO'; const SCREEN_ACTIVITY = 'SCREEN'; @@ -107,6 +107,14 @@ var VideoUtil = (function() { list.push(_getRect(v)); } } + function _arrangeResize() { + const list = [], elems = $(VID_SEL); + for (let i = 0; i < elems.length; ++i) { + const v = $(elems[i]); + v.css(_getPos(list, v.width(), v.height())); + list.push(_getRect(v)); + } + } function _cleanStream(stream) { if (!!stream) { stream.getTracks().forEach(function(track) { @@ -181,14 +189,16 @@ var VideoUtil = (function() { || (b.name === 'Chrome') || (b.name === 'Chromium'); } - function _highlight(el, count) { + function _highlight(el, clazz, count) { if (!el || el.length < 1 || el.hasClass('disabled') || count < 0) { return; } - el.addClass('ui-state-highlight', 2000, function() { - el.removeClass('ui-state-highlight', 2000, function() { - _highlight(el, --count); + el.addClass(clazz).delay(2000).queue(function(next) { + el.removeClass(clazz).delay(2000).queue(function(next1) { + _highlight(el, clazz, --count); + next1(); }); + next(); }); } @@ -202,6 +212,7 @@ var VideoUtil = (function() { self.getPos = _getPos; self.container = _container; self.arrange = _arrange; + self.arrangeResize = _arrangeResize; self.cleanStream = _cleanStream; self.cleanPeer = _cleanPeer; self.addIceServers = function(opts, m) { 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 65c63de..b9ad0e1 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 @@ -229,11 +229,6 @@ var Video = (function() { if (opts.interview) { v.dialog('option', 'draggable', false); v.dialog('option', 'resizable', false); - v.dialogExtend({ - closable: false - , collapsable: false - , dblclick: false - }); $('.pod-area').sortable('refresh'); } else { v.dialog('option', 'draggable', true); @@ -243,28 +238,47 @@ var Video = (function() { VideoManager.close(sd.uid, true); }); } - v.dialogExtend({ - icons: { - 'collapse': 'ui-icon-minus' - } - , closable: VideoUtil.isSharing(sd) - , collapsable: true - , dblclick: 'collapse' - }); } + _initDialogBtns(opts); } - function _initCamDialog() { - v.parent().find('.ui-dialog-titlebar-buttonpane') - .append($('#video-refresh-btn').children().clone()); - v.parent().find('.ui-dialog-titlebar-refresh') - .click(function(e) { + function _initDialogBtns(opts) { + function noDblClick(e) { + e.dblclick(function(e) { + e.stopImmediatePropagation(); + return false; + }); + } + v.parent().find('.ui-dialog-titlebar-close').remove(); + v.parent().find('.ui-dialog-titlebar').append(OmUtil.tmpl('#video-button-bar')); + const refresh = v.parent().find('.btn-refresh') + , tgl = v.parent().find('.btn-toggle') + , cls = v.parent().find('.btn-wclose'); + if (VideoUtil.isSharing(sd)) { + cls.click(function (e) { + v.dialog('close'); + return false; + }); + noDblClick(cls); + refresh.remove(); + } else { + cls.remove(); + refresh.click(function(e) { e.stopImmediatePropagation(); _refresh(); return false; - }).dblclick(function(e) { + }); + } + if (opts.interview) { + tgl.remove(); + } else { + tgl.click(function (e) { e.stopImmediatePropagation(); + $(this).toggleClass('minimized'); + v.toggle(); return false; }); + noDblClick(tgl); + } } function _init(msg) { sd = msg.stream; @@ -294,8 +308,8 @@ var Video = (function() { } else if (hasVideo) { v.dialog({ classes: { - 'ui-dialog': 'ui-corner-all video user-video' + (opts.showMicStatus ? ' mic-status' : '') - , 'ui-dialog-titlebar': 'ui-corner-all' + (opts.showMicStatus ? ' ui-state-highlight' : '') + 'ui-dialog': 'video user-video' + (opts.showMicStatus ? ' mic-status' : '') + , 'ui-dialog-titlebar': '' + (opts.showMicStatus ? ' ui-state-highlight' : '') } , width: _w , minWidth: 40 @@ -306,9 +320,6 @@ var Video = (function() { }); _initDialog(v, opts); } - if (hasVideo && !isSharing && !isRecording) { - _initCamDialog(); - } t = v.parent().find('.ui-dialog-titlebar').attr('title', name); v.on('remove', _cleanup); if (hasVideo) { @@ -359,7 +370,7 @@ var Video = (function() { if (VideoUtil.hasMic(sd)) { const volIco = vol.create(self) if (hasVideo) { - v.parent().find('.ui-dialog-titlebar-buttonpane').append(volIco); + v.parent().find('.buttonpane').append(volIco); } else { volIco.addClass('ulist-small'); volIco.insertAfter('#user' + sd.cuid + ' .typing-activity'); diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbPanel.html b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbPanel.html index 7a077f6..b2acfce 100644 --- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbPanel.html +++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/WbPanel.html @@ -235,10 +235,10 @@ </div> </div> <div class="modal-footer"> - <button type="button" class="btn btn-primary"> + <button type="button" class="btn btn-outline-primary"> <wicket:message key="54"/> </button> - <button type="button" class="btn btn-secondary" data-dismiss="modal"> + <button type="button" class="btn btn-outline-secondary" data-dismiss="modal"> <wicket:message key="lbl.cancel"/> </button> </div> diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/raw-tool-paint.js b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/raw-tool-paint.js index 3b22866..080e73c 100644 --- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/raw-tool-paint.js +++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/raw-tool-paint.js @@ -9,7 +9,7 @@ var Paint = function(wb, s, sBtn) { canvas.freeDrawingBrush.opacity = paint.opacity; }); ToolUtil.enableLineProps(s, paint).o.prop('disabled', true); - VideoUtil.highlight(sBtn.removeClass('disabled'), 5); + VideoUtil.highlight(sBtn.removeClass('disabled'), 'bg-warning', 5); }; paint.deactivate = function() { wb.eachCanvas(function(canvas) { diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/raw-tool-shape.js b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/raw-tool-shape.js index e46bfc6..7de0358 100644 --- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/raw-tool-shape.js +++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/raw-tool-shape.js @@ -46,7 +46,7 @@ var Shape = function(wb, sBtn) { }); }); shape.internalActivate(); - VideoUtil.highlight(sBtn.removeClass('disabled'), 5); + VideoUtil.highlight(sBtn.removeClass('disabled'), 'bg-warning', 5); }; shape.deactivate = function() { wb.eachCanvas(function(canvas) { diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/raw-tool-text.js b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/raw-tool-text.js index e283bcb..fb9da78 100644 --- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/raw-tool-text.js +++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/wb/raw-tool-text.js @@ -90,7 +90,7 @@ var Text = function(wb, s, sBtn) { i.removeClass('ui-state-active selected'); } text._onActivate(); - VideoUtil.highlight(sBtn.removeClass('disabled'), 5); + VideoUtil.highlight(sBtn.removeClass('disabled'), 'bg-warning', 5); }; text.deactivate = function() { wb.eachCanvas(function(canvas) { diff --git a/openmeetings-web/src/main/webapp/css/raw-room.css b/openmeetings-web/src/main/webapp/css/raw-room.css index c8345a9..c9a8e45 100644 --- a/openmeetings-web/src/main/webapp/css/raw-room.css +++ b/openmeetings-web/src/main/webapp/css/raw-room.css @@ -239,14 +239,32 @@ html[dir="rtl"] .room-block .sidebar { border-color: var(--secondary); color: var(--secondary); } -.user-video .om-icon.volume-control { - background-color: var(--white); - border: 1px solid var(--secondary); - margin: 0; +.user-video .om-icon.volume-control +, .user-video .btn.btn-refresh +, .user-video .btn.btn-toggle +, .user-video .btn.btn-wclose +{ width: 20px; height: 20px; +} +.user-video .om-icon.volume-control { + border-radius: 0.2rem; + border: 1px solid var(--secondary); + margin-top: 3px; padding: 1px; } +.user-video .btn.btn-refresh +, .user-video .btn.btn-toggle +, .user-video .btn.btn-wclose +{ + padding: 0; +} +.user-video .btn.btn-toggle i::before { + content: '\f2d1'; +} +.user-video .btn.btn-toggle.minimized i::before { + content: '\f2d2'; +} #room-sidebar-tab-users .header .om-icon i { font-size: 1.2em; } @@ -296,6 +314,7 @@ html[dir="rtl"] .room-block .sidebar { } .activity.cam.enabled.om-icon::before { content: '\f03d'; + color: var(--secondary); } .activity.cam.om-icon::before { content: '\f4e2'; @@ -303,6 +322,7 @@ html[dir="rtl"] .room-block .sidebar { } .activity.mic.enabled.om-icon::before { content: '\f130'; + color: var(--secondary); } .om-icon.disabled { filter: grayscale(100%); @@ -386,14 +406,30 @@ html[dir="rtl"] .room-block .sidebar { .mic-on { background-color: var(--warning); } -.ui-dialog.video, .ui-dialog.video .ui-dialog-titlebar, .ui-dialog.video .ui-dialog-content { +.ui-dialog.video +, .ui-dialog.sharer +, .ui-dialog.video .ui-dialog-titlebar +, .ui-dialog.video .ui-dialog-content +{ padding: 0; } +.user-video .ui-dialog-titlebar +, .sharer .ui-dialog-titlebar +, .user-video .ui-dialog-titlebar .buttonpane +{ + background-color: var(--white); +} +.user-video .ui-dialog-titlebar .buttonpane { + position: absolute; + right: 2px; + top: 2px +} .ui-dialog.video .ui-dialog-content { overflow: hidden; } .ui-dialog.video .ui-dialog-titlebar { - padding-left: 10px + padding-left: 10px; + border: none; } .ui-dialog.video.user-video.user-speaks { box-shadow: 3px 3px 4px green; @@ -480,6 +516,9 @@ html[dir="rtl"] .room-block .sidebar { background-size: auto 100%; background-position: center; } +.room-block .room-container .btn.shared { + display: none; +} .pod-area { display: inline-grid; } @@ -633,13 +672,20 @@ html[dir="rtl"] .room-block .sidebar { #sharer .alert { display: none; } -#sharer .label { - width: 215px; - display: inline-block; -} #sharer input { width: 75px; } +.sharer .share-start-stop i::before { + content: '\f03e'; +} +.sharer .share-start-stop.stop i::before +, .sharer .record-start-stop i::before +{ + content: '\f28d'; +} +.sharer .record-start-stop i::before { + content: '\f111'; +} #room-sidebar-tabs.tabs .btn-dock { display: inline-block; list-style: none; diff --git a/pom.xml b/pom.xml index 061c0b7..4953be1 100644 --- a/pom.xml +++ b/pom.xml @@ -15,7 +15,7 @@ See the License for the specific language governing permissions and limitations under the License. --> -<project xmlns="http://maven.apache.org/POM/4.0.0"; +<project xmlns="http://maven.apache.org/POM/4.0.0"; xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"; xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd";> <modelVersion>4.0.0</modelVersion> @@ -119,7 +119,7 @@ <quartz.version>2.3.2</quartz.version> <kurento.version>6.13.0</kurento.version> <!-- Exclude all generated code --> - <sonar.exclusions>file:**/generated-sources/**, file:**/jquery-ui.css, file:**/fabric.js, file:**/cssemoticons.js, file:**/kurento-utils.js, file:**/fileinput*.js, file:**/MathJax.js, file:**/network.js, file:**/jquery.dialogextend.js</sonar.exclusions> + <sonar.exclusions>file:**/generated-sources/**, file:**/jquery-ui.css, file:**/fabric.js, file:**/cssemoticons.js, file:**/kurento-utils.js, file:**/fileinput*.js, file:**/MathJax.js, file:**/network.js</sonar.exclusions> <sonar.java.coveragePlugin>jacoco</sonar.java.coveragePlugin> <sonar.dynamicAnalysis>reuseReports</sonar.dynamicAnalysis> <sonar.junit.reportPaths>target/surefire-reports</sonar.junit.reportPaths>
