HD label added when the large video is in HD.
This commit is contained in:
parent
64d8cb2db2
commit
72454ff279
|
@ -70,4 +70,5 @@ var config = {
|
|||
'During that time service will not be available. ' +
|
||||
'Apologise for inconvenience.',*/
|
||||
disableThirdPartyRequests: false,
|
||||
minHDResolution: 540
|
||||
};
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -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">
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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"});
|
||||
}
|
||||
};
|
||||
|
||||
|
|
Loading…
Reference in New Issue