HD label added when the large video is in HD.

This commit is contained in:
yanas 2016-03-15 15:26:22 -05:00
parent 64d8cb2db2
commit 72454ff279
6 changed files with 65 additions and 11 deletions

View File

@ -70,4 +70,5 @@ var config = {
'During that time service will not be available. ' +
'Apologise for inconvenience.',*/
disableThirdPartyRequests: false,
minHDResolution: 540
};

View File

@ -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 <object/> 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;
}

View File

@ -153,6 +153,7 @@
<video id="largeVideo" muted="true" autoplay></video>
</div>
<span id="videoConnectionMessage"></span>
<span id="videoResolutionLabel">HD</span>
</div>
<div id="remoteVideos">

View File

@ -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;

View File

@ -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

View File

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