haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updated layout

This commit is contained in:
Ilya Daynatovich 2016-11-11 17:09:07 +02:00
parent f3dbeea091
commit 3bd4f1d5d8
3 changed files with 127 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
css/_variables.scss
View File

@ -13,9 +13,9 @@ $hangupFontSize: 2em;
$defaultToolbarSize: 50px;
// Video layout.
$thumbnailToolbarHeight: 3em;
$thumbnailToolbarHeight: 22px;
$thumbnailIndicatorBorder: 0;
$thumbnailIndicatorSize: $thumbnailToolbarHeight;
$thumbnailIndicatorSize: 3em;
$thumbnailVideoMargin: 2px;
/**

194
css/_videolayout_default.scss
View File

@ -22,110 +22,128 @@
height: 100%;
background-color: black;
}
}
/**
* The toolbar of the video thumbnail.
*/
.videocontainer__toolbar,
.videocontainer__toptoolbar {
position: absolute;
left: 0;
z-index: 3;
width: 100%;
box-sizing: border-box; // Includes the padding in the 100% width.
}
.videocontainer__toolbar {
bottom: 0;
padding: 0 5px 0 5px;
height: $thumbnailToolbarHeight;
}
.videocontainer__toptoolbar {
$toolbarPadding: 5px;
top: 0;
padding: $toolbarPadding;
padding-bottom: 0;
span.indicator {
position: relative;
font-size: 8px;
text-align: center;
line-height: $thumbnailToolbarHeight;
display: none;
padding: 0;
margin-right: em(5, 8);
float: left;
@include circle($thumbnailIndicatorSize);
box-sizing: border-box;
/**
* The toolbar of the video thumbnail.
*/
&__toolbar,
&__toptoolbar {
position: absolute;
left: 0;
z-index: 3;
background: $dominantSpeakerBg;
color: $thumbnailPictogramColor;
border: $thumbnailIndicatorBorder solid $thumbnailPictogramColor;
width: 100%;
box-sizing: border-box; // Includes the padding in the 100% width.
}
&:last-child {
margin-right: 0;
}
&__toolbar {
bottom: 0;
padding: 0 5px 0 5px;
height: $thumbnailToolbarHeight;
}
.indicatoricon {
position: absolute;
top: 50%;
left: 0;
@include transform(translateY(-50%));
width: $thumbnailIndicatorSize - 2 * $thumbnailIndicatorBorder;
height: $thumbnailIndicatorSize - 2 * $thumbnailIndicatorBorder;
line-height: $thumbnailIndicatorSize - 2 * $thumbnailIndicatorBorder;
}
&__toptoolbar {
$toolbarPadding: 5px;
top: 0;
padding: $toolbarPadding;
padding-bottom: 0;
.connection {
span.indicator {
position: relative;
margin: 0 auto;
width: 12px;
height: 8px;
font-size: 8px;
text-align: center;
line-height: $thumbnailIndicatorSize;
display: none;
padding: 0;
margin-right: em(5, 8);
float: left;
@include circle($thumbnailIndicatorSize);
box-sizing: border-box;
z-index: 3;
background: $dominantSpeakerBg;
color: $thumbnailPictogramColor;
border: $thumbnailIndicatorBorder solid $thumbnailPictogramColor;
&_empty
{
@include topLeft();
max-width: 12px;
width: 12px;
color: #8B8B8B;/*#FFFFFF*/
overflow: hidden;
&:last-child {
margin-right: 0;
}
&_lost
{
@include topLeft();
max-width: 12px;
width: 12px;
color: #8B8B8B;
overflow: visible;
.indicatoricon {
position: absolute;
top: 50%;
left: 0;
@include transform(translateY(-50%));
width: 100%;
}
&_full
{
@include topLeft();
max-width: 12px;
.connection {
position: relative;
margin: 0 auto;
width: 12px;
color: #FFFFFF;/*#15A1ED*/
overflow: hidden;
}
}
height: 8px;
.icon-connection,
.icon-connection-lost {
font-size: 1em;
&_empty
{
@include topLeft();
max-width: 12px;
width: 12px;
color: #8B8B8B;/*#FFFFFF*/
overflow: hidden;
}
&_lost
{
@include topLeft();
max-width: 12px;
width: 12px;
color: #8B8B8B;
overflow: visible;
}
&_full
{
@include topLeft();
max-width: 12px;
width: 12px;
color: #FFFFFF;/*#15A1ED*/
overflow: hidden;
}
}
.icon-connection,
.icon-connection-lost {
font-size: 1em;
}
}
}
}
.videocontainer__hoverOverlay {
position: relative;
width: 100%;
height: 100%;
visibility: hidden;
background: rgba(0,0,0,.6);
z-index: 2;
&_small {
span.indicator {
font-size: 5px;
.connection {
height: 5px;
}
}
}
&_medium {
span.indicator {
font-size: 6px;
.connection {
height: 6px;
}
}
}
&__hoverOverlay {
position: relative;
width: 100%;
height: 100%;
visibility: hidden;
background: rgba(0,0,0,.6);
z-index: 2;
}
}
#localVideoWrapper {

35
modules/UI/videolayout/FilmStrip.js
View File

@ -401,12 +401,8 @@ const FilmStrip = {
height: remote.thumbHeight + 2
}, this._getAnimateOptions(animate, resolve));
}));
promises.push(new Promise((resolve) => {
let fontSize = this._getIndicatorFontSize(remote.thumbHeight);
this.filmStrip.find('.indicator').animate({
fontSize
}, this._getAnimateOptions(animate, resolve));
}));
this._setThumbnailsClasses(remote.thumbHeight);
if (!animate) {
resolve();
@ -432,25 +428,32 @@ const FilmStrip = {
},
/**
* Returns font size for indicators according to current
* height of thumbnail
* Set thumbnail classes according to the current size of thumbnail
* @param height
* @returns {Number} - font size for current height
* @private
*/
_getIndicatorFontSize(height) {
_setThumbnailsClasses(height) {
const { SMALL, MEDIUM } = ThumbnailSizes;
let fontSize;
const { localThumb, remoteThumbs } = this.getThumbs();
let smallClass = 'videocontainer_small';
let mediumClass = 'videocontainer_medium';
let className = '';
if (height <= SMALL) {
fontSize = 5;
className = smallClass;
} else if (height > SMALL && height <= MEDIUM) {
fontSize = 6;
} else {
fontSize = 8;
className = mediumClass;
}
return fontSize;
localThumb
.removeClass(`${smallClass} ${mediumClass}`)
.addClass(className);
if (remoteThumbs) {
remoteThumbs
.removeClass(`${smallClass} ${mediumClass}`)
.addClass(className);
}
},
/**