diff --git a/config.js b/config.js index 4dda7b85f..9d6fb6a1e 100644 --- a/config.js +++ b/config.js @@ -70,4 +70,5 @@ var config = { 'During that time service will not be available. ' + 'Apologise for inconvenience.',*/ disableThirdPartyRequests: false, + minHDResolution: 540 }; diff --git a/css/videolayout_default.css b/css/videolayout_default.css index 338bf54b4..bf8b9708c 100644 --- a/css/videolayout_default.css +++ b/css/videolayout_default.css @@ -44,7 +44,7 @@ /*margin-right: 1px;*/ } -#remoteVideos .videocontainer:hover, +/*#remoteVideos .videocontainer:hover,*/ #remoteVideos .videocontainer.videoContainerFocused { cursor: hand; /* transform:scale(1.08, 1.08); @@ -58,8 +58,7 @@ } #remoteVideos .videocontainer:hover { - box-shadow: inset 0 0 10px #FFFFFF, 0 0 10px #FFFFFF; - border: 1px solid #FFFFFF; + border: 1px solid #c1c1c1; } #remoteVideos .videocontainer.videoContainerFocused { @@ -68,15 +67,12 @@ } #remoteVideos .videocontainer.videoContainerFocused:hover { - box-shadow: inset 0 0 5px #FFFFFF, 0 0 10px #FFFFFF, inset 0 0 60px #006d91; - border: 1px solid #FFFFFF; + box-shadow: inset 0 0 5px #c1c1c1, 0 0 10px #c1c1c1, inset 0 0 60px #006d91; + border: 1px solid #c1c1c1; } #localVideoWrapper { display:inline-block; - /*-webkit-mask-box-image: url(../images/videomask.svg);*/ - /*border-radius:1px !important;*/ - /*border: 0px !important;*/ } /* With TemasysWebRTC plugin element is used @@ -431,6 +427,7 @@ border-radius: 100px; z-index: 3; visibility: inherit; + background-color: #000000; } .userAvatar { @@ -493,4 +490,15 @@ 0px 1px 1px rgba(0,0,0,0.3), 1px 0px 1px rgba(0,0,0,0.3), 0px 0px 1px rgba(0,0,0,0.3); +} + +#videoResolutionLabel { + display: none; + position: absolute; + top: 5px; + right: 5px; + background: rgba(0,0,0,.5); + padding: 10px; + color: rgba(255,255,255,.5); + z-index: 10000; } \ No newline at end of file diff --git a/index.html b/index.html index 6c8a831db..8f530f534 100644 --- a/index.html +++ b/index.html @@ -153,6 +153,7 @@ + HD
diff --git a/modules/UI/videolayout/ConnectionIndicator.js b/modules/UI/videolayout/ConnectionIndicator.js index 642dc9754..40bb85363 100644 --- a/modules/UI/videolayout/ConnectionIndicator.js +++ b/modules/UI/videolayout/ConnectionIndicator.js @@ -1,6 +1,7 @@ -/* global APP, $ */ +/* global APP, $, config */ /* jshint -W101 */ import JitsiPopover from "../util/JitsiPopover"; +import VideoLayout from "./VideoLayout"; /** * Constructs new connection indicator. @@ -14,6 +15,7 @@ function ConnectionIndicator(videoContainer, id) { this.bitrate = null; this.showMoreValue = false; this.resolution = null; + this.isResolutionHD = null; this.transport = []; this.popover = null; this.id = id; @@ -292,7 +294,6 @@ ConnectionIndicator.prototype.remove = function() { */ ConnectionIndicator.prototype.updateConnectionQuality = function (percent, object) { - if (percent === null) { this.connectionIndicatorContainer.style.display = "none"; this.popover.forceHide(); @@ -316,6 +317,10 @@ ConnectionIndicator.prototype.updateConnectionQuality = ConnectionIndicator.connectionQualityValues[quality]; } } + if (object.isResolutionHD) { + this.isResolutionHD = object.isResolutionHD; + } + this.updateResolutionIndicator(); this.updatePopoverData(); }; @@ -325,6 +330,7 @@ ConnectionIndicator.prototype.updateConnectionQuality = */ ConnectionIndicator.prototype.updateResolution = function (resolution) { this.resolution = resolution; + this.updateResolutionIndicator(); this.updatePopoverData(); }; @@ -354,4 +360,29 @@ ConnectionIndicator.prototype.hideIndicator = function () { this.popover.forceHide(); }; +/** + * Updates the resolution indicator. + */ +ConnectionIndicator.prototype.updateResolutionIndicator = function () { + + if (this.id !== null + && VideoLayout.isCurrentlyOnLarge(this.id)) { + + let showResolutionLabel = false; + + if (this.isResolutionHD !== null) + showResolutionLabel = this.isResolutionHD; + else if (this.resolution !== null) { + let resolutions = this.resolution || {}; + Object.keys(resolutions).map(function (ssrc) { + let {width, height} = resolutions[ssrc]; + if (height >= config.minHDResolution) + showResolutionLabel = true; + }); + } + + VideoLayout.updateResolutionLabel(showResolutionLabel); + } +}; + export default ConnectionIndicator; diff --git a/modules/UI/videolayout/FilmStrip.js b/modules/UI/videolayout/FilmStrip.js index 52ff3c684..19539f752 100644 --- a/modules/UI/videolayout/FilmStrip.js +++ b/modules/UI/videolayout/FilmStrip.js @@ -76,7 +76,7 @@ const FilmStrip = { let maxHeight // If the MAX_HEIGHT property hasn't been specified // we have the static value. - = Math.min( interfaceConfig.FILM_STRIP_MAX_HEIGHT || 160, + = Math.min( interfaceConfig.FILM_STRIP_MAX_HEIGHT || 120, availableHeight); availableHeight diff --git a/modules/UI/videolayout/VideoLayout.js b/modules/UI/videolayout/VideoLayout.js index 5ac92593b..63736b130 100644 --- a/modules/UI/videolayout/VideoLayout.js +++ b/modules/UI/videolayout/VideoLayout.js @@ -998,6 +998,19 @@ var VideoLayout = { */ getLargeVideo () { return largeVideo; + }, + + /** + * Updates the resolution label, indicating to the user that the large + * video stream is currently HD. + */ + updateResolutionLabel(isResolutionHD) { + let videoResolutionLabel = $("#videoResolutionLabel"); + + if (isResolutionHD && !videoResolutionLabel.is(":visible")) + videoResolutionLabel.css({display: "block"}); + else if (!isResolutionHD && videoResolutionLabel.is(":visible")) + videoResolutionLabel.css({display: "none"}); } };