bgrozev
commit
3f62b479da
|
|
@ -70,4 +70,5 @@ var config = {
|
|||
'During that time service will not be available. ' +
|
||||
'Apologise for inconvenience.',*/
|
||||
disableThirdPartyRequests: false,
|
||||
minHDHeight: 540
|
||||
};
|
||||
|
|
|
|||
|
|
@ -95,8 +95,6 @@
|
|||
#unreadMessages {
|
||||
font-size: 8px;
|
||||
position: absolute;
|
||||
left: 46%;
|
||||
top: 27%
|
||||
}
|
||||
|
||||
#bottomUnreadMessages {
|
||||
|
|
|
|||
55
css/main.css
55
css/main.css
|
|
@ -9,7 +9,7 @@ html, body{
|
|||
color: #424242;
|
||||
font-family:'Helvetica Neue', Helvetica, sans-serif;
|
||||
font-weight: 400;
|
||||
background: #000000;
|
||||
background: #4E4E4E;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -38,16 +38,6 @@ html, body{
|
|||
position: relative;
|
||||
}
|
||||
|
||||
#toolbar a.button::after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
background: #373737;
|
||||
}
|
||||
|
||||
#toolbar a.button:last-child::after {
|
||||
content: none;
|
||||
}
|
||||
|
|
@ -56,14 +46,16 @@ html, body{
|
|||
display: inline-block;
|
||||
position: relative;
|
||||
color: #FFFFFF;
|
||||
top: 0;
|
||||
padding: 10px 0;
|
||||
top:0px;
|
||||
padding-top: 10px;
|
||||
width: 38px;
|
||||
height: 28px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,.3), 0 -1px 0 rgba(0,0,0,.6);
|
||||
z-index: 1;
|
||||
font-size: 1.22em !important;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.toolbar_span>span {
|
||||
|
|
@ -104,13 +96,13 @@ html, body{
|
|||
#numberOfParticipants {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: -1;
|
||||
right: -1px;
|
||||
color: white;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
line-height: 13px;
|
||||
font-weight: bold;
|
||||
border-radius: 2px;
|
||||
border-radius: 1px;
|
||||
font-size: 11px;
|
||||
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
|
||||
}
|
||||
|
|
@ -119,6 +111,19 @@ html, body{
|
|||
color: #00ccff;
|
||||
}
|
||||
|
||||
#toolbar {
|
||||
display:inline-block;
|
||||
position:relative;
|
||||
top:5px;
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
height:38px;
|
||||
width:auto;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
border-radius: 1px;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
#toolbar_button_record {
|
||||
-webkit-transition: all .5s ease-in-out;
|
||||
-moz-transition: all .5s ease-in-out;
|
||||
|
|
@ -142,13 +147,10 @@ html, body{
|
|||
|
||||
a.button:hover,
|
||||
a.bottomToolbarButton:hover {
|
||||
top: 0px;
|
||||
cursor: pointer;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 6px;
|
||||
background-clip: padding-box;
|
||||
-webkit-border-radius: 6px;
|
||||
-webkit-background-clip: padding-box;
|
||||
border-radius: 1px;
|
||||
-webkit-border-radius: 1px;
|
||||
}
|
||||
|
||||
.no-fa-video-camera, .fa-microphone-slash {
|
||||
|
|
@ -158,7 +160,7 @@ a.bottomToolbarButton:hover {
|
|||
.header_button_separator {
|
||||
display: inline-block;
|
||||
position:relative;
|
||||
top: 5;
|
||||
top: 5px;
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
background: #373737;
|
||||
|
|
@ -167,7 +169,7 @@ a.bottomToolbarButton:hover {
|
|||
.bottom_button_separator {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
left: 5;
|
||||
left: 5px;
|
||||
width: 20px;
|
||||
height: 1px;
|
||||
background: #373737;
|
||||
|
|
@ -211,7 +213,7 @@ button {
|
|||
height: 35px;
|
||||
padding: 0 1em 0 2em;
|
||||
position: relative;
|
||||
border-radius: 3px;
|
||||
border-radius: 1px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
line-height: 35px;
|
||||
|
|
@ -273,10 +275,9 @@ div.feedbackButton:hover {
|
|||
margin-right: 5px;
|
||||
bottom: 40px;
|
||||
width: 29px;
|
||||
border-radius: 6px;
|
||||
border-radius: 1px;
|
||||
color: #FFF;
|
||||
border: 1px solid rgba(256, 256, 256, 0.2);
|
||||
background: rgba(0,0,0,0.8);
|
||||
background: rgba(0,0,0,0.5);
|
||||
z-index: 6; /*+1 from #remoteVideos*/
|
||||
}
|
||||
|
||||
|
|
@ -350,7 +351,7 @@ div.feedbackButton:hover {
|
|||
}
|
||||
|
||||
#toast-container.notification-bottom-right {
|
||||
bottom: 120px;
|
||||
bottom: 140px;
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ ul.popupmenu {
|
|||
width: 100px;
|
||||
background-color: rgba(0,0,0,0.9);
|
||||
border: 1px solid rgba(256, 256, 256, 0.2);
|
||||
border-radius:8px;
|
||||
border-radius:3px;
|
||||
}
|
||||
|
||||
ul.popupmenu:after {
|
||||
|
|
@ -31,7 +31,7 @@ ul.popupmenu li {
|
|||
|
||||
ul.popupmenu li:hover {
|
||||
background-color: rgba(256, 256, 256, .2);
|
||||
border-radius:6px;
|
||||
border-radius:3px;
|
||||
}
|
||||
|
||||
/*Link Appearance*/
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
z-index: 5;
|
||||
transition: bottom 2s;
|
||||
overflow: visible !important;
|
||||
font-size: 0pt; /*!!!Removes the gap between the local video container and the remote videos.*/
|
||||
}
|
||||
|
||||
#remotevideos.hidden {
|
||||
|
|
@ -38,12 +39,12 @@
|
|||
display: none;
|
||||
background-color: black;
|
||||
background-size: contain;
|
||||
border-radius:8px;
|
||||
border: 2px solid #212425;
|
||||
margin-right: 3px;
|
||||
border-radius:1px;
|
||||
border: 1px solid #212425;
|
||||
/*margin-right: 1px;*/
|
||||
}
|
||||
|
||||
#remoteVideos .videocontainer:hover,
|
||||
/*#remoteVideos .videocontainer:hover,*/
|
||||
#remoteVideos .videocontainer.videoContainerFocused {
|
||||
cursor: hand;
|
||||
/* transform:scale(1.08, 1.08);
|
||||
|
|
@ -57,25 +58,21 @@
|
|||
}
|
||||
|
||||
#remoteVideos .videocontainer:hover {
|
||||
box-shadow: inset 0 0 10px #FFFFFF, 0 0 10px #FFFFFF;
|
||||
border: 2px solid #FFFFFF;
|
||||
border: 1px solid #c1c1c1;
|
||||
}
|
||||
|
||||
#remoteVideos .videocontainer.videoContainerFocused {
|
||||
box-shadow: inset 0 0 28px #006d91;
|
||||
border: 2px solid #006d91;
|
||||
border: 1px solid #006d91;
|
||||
}
|
||||
|
||||
#remoteVideos .videocontainer.videoContainerFocused:hover {
|
||||
box-shadow: inset 0 0 5px #FFFFFF, 0 0 10px #FFFFFF, inset 0 0 60px #006d91;
|
||||
border: 2px 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:4px !important;
|
||||
border: 0px !important;
|
||||
}
|
||||
|
||||
/* With TemasysWebRTC plugin <object/> element is used
|
||||
|
|
@ -83,7 +80,8 @@
|
|||
#remoteVideos .videocontainer>video,
|
||||
#remoteVideos .videocontainer>object {
|
||||
cursor: hand;
|
||||
border-radius:4px;
|
||||
border-radius:1px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.flipVideoX {
|
||||
|
|
@ -96,7 +94,8 @@
|
|||
#localVideoWrapper>video,
|
||||
#localVideoWrapper>object {
|
||||
cursor: hand;
|
||||
border-radius:4px !important;
|
||||
border-radius:1px !important;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
#largeVideo,
|
||||
|
|
@ -177,7 +176,7 @@
|
|||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
z-index: 2;
|
||||
border-radius:20px;
|
||||
border-radius:3px;
|
||||
}
|
||||
|
||||
.videocontainer>span.status {
|
||||
|
|
@ -196,7 +195,7 @@
|
|||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
z-index: 2;
|
||||
border-radius:20px;
|
||||
border-radius:3px;
|
||||
}
|
||||
|
||||
.connectionindicator
|
||||
|
|
@ -360,22 +359,6 @@
|
|||
pointer-events: none;
|
||||
}
|
||||
|
||||
#toolbar {
|
||||
display:inline-block;
|
||||
position:relative;
|
||||
margin-top:5px;
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
padding-left:2px;
|
||||
padding-right:2px;
|
||||
height:38px;
|
||||
width:auto;
|
||||
background-color: rgba(0,0,0,0.8);
|
||||
border: 1px solid rgba(256, 256, 256, 0.2);
|
||||
border-radius: 6px;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
#subject {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
|
|
@ -395,14 +378,14 @@
|
|||
display: inline-block;
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
border-radius:10px;
|
||||
border-radius:1px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#dominantSpeaker {
|
||||
visibility: hidden;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
margin: auto;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
|
@ -421,21 +404,22 @@
|
|||
}
|
||||
|
||||
#dominantSpeakerAvatar {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
top: 25px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
top: 50px;
|
||||
margin: auto;
|
||||
position: relative;
|
||||
border-radius: 50px;
|
||||
border-radius: 100px;
|
||||
z-index: 3;
|
||||
visibility: inherit;
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.userAvatar {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 35px;
|
||||
border-radius: 200px;
|
||||
left: 0;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.sharedVideoAvatar {
|
||||
|
|
@ -491,4 +475,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;
|
||||
}
|
||||
|
|
@ -42,11 +42,11 @@
|
|||
}
|
||||
|
||||
#enter_room_form {
|
||||
border-radius: 10px;
|
||||
border-radius: 1px;
|
||||
background-color: #FFFFFF;
|
||||
border: none;
|
||||
-moz-border-radius: 10px;
|
||||
-webkit-border-radius: 10px;
|
||||
-moz-border-radius: 1px;
|
||||
-webkit-border-radius: 1px;
|
||||
-webkit-appearance: none;
|
||||
height: 55px;
|
||||
box-shadow: none;
|
||||
|
|
@ -82,8 +82,8 @@
|
|||
width: 73px;
|
||||
height: 45px;
|
||||
background-color: #16a8fe;
|
||||
moz-border-radius: 10px;
|
||||
-webkit-border-radius: 10px;
|
||||
moz-border-radius: 1px;
|
||||
-webkit-border-radius: 1px;
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
|
|
|
|||
|
|
@ -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,6 @@
|
|||
var interfaceConfig = {
|
||||
CANVAS_EXTRA: 104,
|
||||
CANVAS_RADIUS: 7,
|
||||
CANVAS_RADIUS: 0,
|
||||
SHADOW_COLOR: '#ffffff',
|
||||
INITIAL_TOOLBAR_TIMEOUT: 20000,
|
||||
TOOLBAR_TIMEOUT: 4000,
|
||||
|
|
@ -14,7 +14,6 @@ var interfaceConfig = {
|
|||
GENERATE_ROOMNAMES_ON_WELCOME_PAGE: true,
|
||||
APP_NAME: "Jitsi Meet",
|
||||
INVITATION_POWERED_BY: true,
|
||||
DOMINANT_SPEAKER_AVATAR_SIZE: 100,
|
||||
TOOLBAR_BUTTONS: ['authentication', 'microphone', 'camera', 'desktop',
|
||||
'recording', 'security', 'invite', 'chat', 'etherpad', 'sharedvideo',
|
||||
'fullscreen', 'sip', 'dialpad', 'settings', 'hangup', 'filmstrip',
|
||||
|
|
@ -30,5 +29,5 @@ var interfaceConfig = {
|
|||
filmStripOnly: false,
|
||||
RANDOM_AVATAR_URL_PREFIX: false,
|
||||
RANDOM_AVATAR_URL_SUFFIX: false,
|
||||
FILM_STRIP_MAX_HEIGHT: 160
|
||||
FILM_STRIP_MAX_HEIGHT: 120
|
||||
};
|
||||
|
|
|
|||
|
|
@ -8,13 +8,16 @@ const LOCAL_LEVEL = 'local';
|
|||
|
||||
let ASDrawContext = null;
|
||||
let audioLevelCanvasCache = {};
|
||||
let dominantSpeakerAudioElement = null;
|
||||
|
||||
function initDominantSpeakerAudioLevels() {
|
||||
let ASRadius = interfaceConfig.DOMINANT_SPEAKER_AVATAR_SIZE / 2;
|
||||
let ASCenter = (interfaceConfig.DOMINANT_SPEAKER_AVATAR_SIZE + ASRadius) / 2;
|
||||
function initDominantSpeakerAudioLevels(dominantSpeakerAvatarSize) {
|
||||
let ASRadius = dominantSpeakerAvatarSize / 2;
|
||||
let ASCenter = (dominantSpeakerAvatarSize + ASRadius) / 2;
|
||||
|
||||
// Draw a circle.
|
||||
ASDrawContext.beginPath();
|
||||
ASDrawContext.arc(ASCenter, ASCenter, ASRadius, 0, 2 * Math.PI);
|
||||
ASDrawContext.closePath();
|
||||
|
||||
// Add a shadow around the circle
|
||||
ASDrawContext.shadowColor = interfaceConfig.SHADOW_COLOR;
|
||||
|
|
@ -90,14 +93,14 @@ function getShadowLevel (audioLevel) {
|
|||
let shadowLevel = 0;
|
||||
|
||||
if (audioLevel <= 0.3) {
|
||||
shadowLevel
|
||||
= Math.round(interfaceConfig.CANVAS_EXTRA/2*(audioLevel/0.3));
|
||||
shadowLevel = Math.round(
|
||||
interfaceConfig.CANVAS_EXTRA/2*(audioLevel/0.3));
|
||||
} else if (audioLevel <= 0.6) {
|
||||
shadowLevel
|
||||
= Math.round(interfaceConfig.CANVAS_EXTRA/2*((audioLevel - 0.3) / 0.3));
|
||||
shadowLevel = Math.round(
|
||||
interfaceConfig.CANVAS_EXTRA/2*((audioLevel - 0.3) / 0.3));
|
||||
} else {
|
||||
shadowLevel
|
||||
= Math.round(interfaceConfig.CANVAS_EXTRA/2*((audioLevel - 0.6) / 0.4));
|
||||
shadowLevel = Math.round(
|
||||
interfaceConfig.CANVAS_EXTRA/2*((audioLevel - 0.6) / 0.4));
|
||||
}
|
||||
|
||||
return shadowLevel;
|
||||
|
|
@ -124,8 +127,18 @@ function getVideoSpanId(id) {
|
|||
const AudioLevels = {
|
||||
|
||||
init () {
|
||||
ASDrawContext = $('#dominantSpeakerAudioLevel')[0].getContext('2d');
|
||||
initDominantSpeakerAudioLevels();
|
||||
dominantSpeakerAudioElement = $('#dominantSpeakerAudioLevel')[0];
|
||||
ASDrawContext = dominantSpeakerAudioElement.getContext('2d');
|
||||
|
||||
let parentContainer = $("#dominantSpeaker");
|
||||
let dominantSpeakerWidth = parentContainer.width();
|
||||
let dominantSpeakerHeight = parentContainer.height();
|
||||
|
||||
dominantSpeakerAudioElement.width = dominantSpeakerWidth;
|
||||
dominantSpeakerAudioElement.height = dominantSpeakerHeight;
|
||||
|
||||
let dominantSpeakerAvatar = $("#dominantSpeakerAvatar");
|
||||
initDominantSpeakerAudioLevels(dominantSpeakerAvatar.width());
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -155,8 +168,10 @@ const AudioLevels = {
|
|||
|
||||
audioLevelCanvas = document.createElement('canvas');
|
||||
audioLevelCanvas.className = "audiolevel";
|
||||
audioLevelCanvas.style.bottom = `-${interfaceConfig.CANVAS_EXTRA/2}px`;
|
||||
audioLevelCanvas.style.left = `-${interfaceConfig.CANVAS_EXTRA/2}px`;
|
||||
audioLevelCanvas.style.bottom
|
||||
= `-${interfaceConfig.CANVAS_EXTRA/2}px`;
|
||||
audioLevelCanvas.style.left
|
||||
= `-${interfaceConfig.CANVAS_EXTRA/2}px`;
|
||||
resizeAudioLevelCanvas(audioLevelCanvas, thumbWidth, thumbHeight);
|
||||
|
||||
videoSpan.appendChild(audioLevelCanvas);
|
||||
|
|
@ -213,7 +228,10 @@ const AudioLevels = {
|
|||
return;
|
||||
}
|
||||
|
||||
ASDrawContext.clearRect(0, 0, 300, 300);
|
||||
ASDrawContext.clearRect(0, 0,
|
||||
dominantSpeakerAudioElement.width,
|
||||
dominantSpeakerAudioElement.height);
|
||||
|
||||
if (!audioLevel) {
|
||||
return;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -48,14 +48,21 @@ export default {
|
|||
}
|
||||
avatarId = MD5.hexdigest(avatarId.trim().toLowerCase());
|
||||
|
||||
// Default to using gravatar.
|
||||
let urlPref = 'https://www.gravatar.com/avatar/';
|
||||
let urlSuf = "?d=wavatar&size=100";
|
||||
|
||||
if (random && interfaceConfig.RANDOM_AVATAR_URL_PREFIX) {
|
||||
let urlPref = null;
|
||||
let urlSuf = null;
|
||||
if (!random) {
|
||||
urlPref = 'https://www.gravatar.com/avatar/';
|
||||
urlSuf = "?d=wavatar&size=200";
|
||||
}
|
||||
else if (random && interfaceConfig.RANDOM_AVATAR_URL_PREFIX) {
|
||||
urlPref = interfaceConfig.RANDOM_AVATAR_URL_PREFIX;
|
||||
urlSuf = interfaceConfig.RANDOM_AVATAR_URL_SUFFIX;
|
||||
}
|
||||
else {
|
||||
urlPref = 'https://robohash.org/';
|
||||
urlSuf = ".png?size=200x200";
|
||||
}
|
||||
|
||||
return urlPref + avatarId + urlSuf;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ function setVisualNotification(show) {
|
|||
var leftIndent = (UIUtil.getTextWidth(chatButtonElement) -
|
||||
UIUtil.getTextWidth(unreadMsgElement)) / 2;
|
||||
var topIndent = (UIUtil.getTextHeight(chatButtonElement) -
|
||||
UIUtil.getTextHeight(unreadMsgElement)) / 2 - 3;
|
||||
UIUtil.getTextHeight(unreadMsgElement)) / 2 - 5;
|
||||
|
||||
unreadMsgElement.setAttribute(
|
||||
'style',
|
||||
|
|
|
|||
|
|
@ -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.minHDHeight)
|
||||
showResolutionLabel = true;
|
||||
});
|
||||
}
|
||||
|
||||
VideoLayout.updateResolutionLabel(showResolutionLabel);
|
||||
}
|
||||
};
|
||||
|
||||
export default ConnectionIndicator;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
import UIUtil from "../util/UIUtil";
|
||||
|
||||
const thumbAspectRatio = 16.0 / 9.0;
|
||||
const thumbAspectRatio = 1 / 1;
|
||||
|
||||
const FilmStrip = {
|
||||
init () {
|
||||
|
|
@ -44,11 +44,7 @@ const FilmStrip = {
|
|||
* that we want to take into account when calculating the film strip width.
|
||||
*/
|
||||
calculateThumbnailSize (isSideBarVisible) {
|
||||
// Calculate the available height, which is the inner window height
|
||||
// minus 39px for the header minus 2px for the delimiter lines on the
|
||||
// top and bottom of the large video, minus the 36px space inside the
|
||||
// remoteVideos container used for highlighting shadow.
|
||||
let availableHeight = 100;
|
||||
let availableHeight = interfaceConfig.FILM_STRIP_MAX_HEIGHT;
|
||||
|
||||
let numvids = this.getThumbs(true).length;
|
||||
|
||||
|
|
@ -80,17 +76,17 @@ 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
|
||||
= Math.min( maxHeight,
|
||||
availableWidth / thumbAspectRatio,
|
||||
window.innerHeight - 18);
|
||||
= Math.min( maxHeight, window.innerHeight - 18);
|
||||
|
||||
if (availableHeight < availableWidth / thumbAspectRatio) {
|
||||
availableWidth = Math.floor(availableHeight * thumbAspectRatio);
|
||||
if (availableHeight < availableWidth) {
|
||||
availableWidth = availableHeight;
|
||||
}
|
||||
else
|
||||
availableHeight = availableWidth;
|
||||
|
||||
return {
|
||||
thumbWidth: availableWidth,
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ import FilmStrip from './FilmStrip';
|
|||
import Avatar from "../avatar/Avatar";
|
||||
import {createDeferred} from '../../util/helpers';
|
||||
|
||||
const avatarSize = interfaceConfig.DOMINANT_SPEAKER_AVATAR_SIZE;
|
||||
const FADE_DURATION_MS = 300;
|
||||
|
||||
export const VIDEO_CONTAINER_TYPE = "camera";
|
||||
|
|
@ -175,6 +174,8 @@ class VideoContainer extends LargeContainer {
|
|||
this.$avatar = $('#dominantSpeaker');
|
||||
this.$wrapper = $('#largeVideoWrapper');
|
||||
|
||||
this.avatarHeight = $("#dominantSpeakerAvatar").height();
|
||||
|
||||
// This does not work with Temasys plugin - has to be a property to be
|
||||
// copied between new <object> elements
|
||||
//this.$video.on('play', onPlay);
|
||||
|
|
@ -245,7 +246,7 @@ class VideoContainer extends LargeContainer {
|
|||
containerWidth, containerHeight);
|
||||
|
||||
// update avatar position
|
||||
let top = containerHeight / 2 - avatarSize / 4 * 3;
|
||||
let top = containerHeight / 2 - this.avatarHeight / 4 * 3;
|
||||
|
||||
this.$avatar.css('top', top);
|
||||
|
||||
|
|
@ -369,6 +370,7 @@ export default class LargeVideoManager {
|
|||
this.videoContainer = new VideoContainer(
|
||||
() => this.resizeContainer(VIDEO_CONTAINER_TYPE));
|
||||
this.addContainer(VIDEO_CONTAINER_TYPE, this.videoContainer);
|
||||
|
||||
// use the same video container to handle and desktop tracks
|
||||
this.addContainer("desktop", this.videoContainer);
|
||||
|
||||
|
|
@ -382,22 +384,26 @@ export default class LargeVideoManager {
|
|||
});
|
||||
|
||||
if (interfaceConfig.SHOW_JITSI_WATERMARK) {
|
||||
let leftWatermarkDiv = this.$container.find("div.watermark.leftwatermark");
|
||||
let leftWatermarkDiv
|
||||
= this.$container.find("div.watermark.leftwatermark");
|
||||
|
||||
leftWatermarkDiv.css({display: 'block'});
|
||||
|
||||
leftWatermarkDiv.parent().attr('href', interfaceConfig.JITSI_WATERMARK_LINK);
|
||||
leftWatermarkDiv.parent().attr(
|
||||
'href', interfaceConfig.JITSI_WATERMARK_LINK);
|
||||
}
|
||||
|
||||
if (interfaceConfig.SHOW_BRAND_WATERMARK) {
|
||||
let rightWatermarkDiv = this.$container.find("div.watermark.rightwatermark");
|
||||
let rightWatermarkDiv
|
||||
= this.$container.find("div.watermark.rightwatermark");
|
||||
|
||||
rightWatermarkDiv.css({
|
||||
display: 'block',
|
||||
backgroundImage: 'url(images/rightwatermark.png)'
|
||||
});
|
||||
|
||||
rightWatermarkDiv.parent().attr('href', interfaceConfig.BRAND_WATERMARK_LINK);
|
||||
rightWatermarkDiv.parent().attr(
|
||||
'href', interfaceConfig.BRAND_WATERMARK_LINK);
|
||||
}
|
||||
|
||||
if (interfaceConfig.SHOW_POWERED_BY) {
|
||||
|
|
@ -478,7 +484,8 @@ export default class LargeVideoManager {
|
|||
|
||||
return promise;
|
||||
}).then(() => {
|
||||
// after everything is done check again if there are any pending new streams.
|
||||
// after everything is done check again if there are any pending
|
||||
// new streams.
|
||||
this.updateInProcess = false;
|
||||
this.scheduleLargeVideoUpdate();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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