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"});
}
};