Merge pull request #550 from jitsi/polish-ui

Polish ui
This commit is contained in:
bgrozev 2016-03-24 12:26:13 -05:00
commit 3f62b479da
15 changed files with 187 additions and 120 deletions

View File

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

View File

@ -95,8 +95,6 @@
#unreadMessages {
font-size: 8px;
position: absolute;
left: 46%;
top: 27%
}
#bottomUnreadMessages {

View File

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

View File

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

View File

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

View File

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

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,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
};

View File

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

View File

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

View File

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

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.minHDHeight)
showResolutionLabel = true;
});
}
VideoLayout.updateResolutionLabel(showResolutionLabel);
}
};
export default ConnectionIndicator;

View File

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

View File

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

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