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

Make filmstrip indicators to resize dynamically

This commit is contained in:
Ilya Daynatovich 2016-11-11 16:05:41 +02:00
parent 8817f0c53d
commit f3dbeea091
3 changed files with 152 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
css/_variables.scss
View File

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

141
css/_videolayout_default.scss
View File

@ -47,7 +47,76 @@
top: 0;
padding: $toolbarPadding;
padding-bottom: 0;
height: $thumbnailIndicatorSize + $toolbarPadding;
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;
z-index: 3;
background: $dominantSpeakerBg;
color: $thumbnailPictogramColor;
border: $thumbnailIndicatorBorder solid $thumbnailPictogramColor;
&:last-child {
margin-right: 0;
}
.indicatoricon {
position: absolute;
top: 50%;
left: 0;
@include transform(translateY(-50%));
width: $thumbnailIndicatorSize - 2 * $thumbnailIndicatorBorder;
height: $thumbnailIndicatorSize - 2 * $thumbnailIndicatorBorder;
line-height: $thumbnailIndicatorSize - 2 * $thumbnailIndicatorBorder;
}
.connection {
position: relative;
margin: 0 auto;
width: 12px;
height: 8px;
&_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 {
@ -217,72 +286,6 @@
background: $connectionIndicatorBg;
}
.videocontainer__toptoolbar span.indicator {
position: relative;
font-size: 8pt;
text-align: center;
line-height: $thumbnailToolbarHeight;
display: none;
padding: 0;
margin-right: 5px;
float: left;
@include circle($thumbnailIndicatorSize);
box-sizing: border-box;
z-index: 3;
background: $dominantSpeakerBg;
color: $thumbnailPictogramColor;
border: $thumbnailIndicatorBorder solid $thumbnailPictogramColor;
.indicatoricon {
position: absolute;
top: 50%;
left: 0;
@include transform(translateY(-50%));
width: $thumbnailIndicatorSize - 2 * $thumbnailIndicatorBorder;
height: $thumbnailIndicatorSize - 2 * $thumbnailIndicatorBorder;
line-height: $thumbnailIndicatorSize - 2 * $thumbnailIndicatorBorder;
}
.connection {
position: relative;
margin: 0 auto;
width: 12px;
height: 8px;
&_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: 6pt;
}
}
.remotevideomenu
{
display: inline-block;
@ -400,8 +403,10 @@
.userAvatar {
@include maxSize(60px);
@include circle(50%);
@include absoluteAligning();
border-radius: 50%;
height: 50%;
width: auto;
}
.sharedVideoAvatar {

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

@ -3,6 +3,15 @@
import UIEvents from "../../../service/UI/UIEvents";
import UIUtil from "../util/UIUtil";
/**
* Contains sizes of thumbnails
* @type {{SMALL: number, MEDIUM: number}}
*/
const ThumbnailSizes = {
SMALL: 60,
MEDIUM: 80
};
const FilmStrip = {
/**
*
@ -368,39 +377,82 @@ const FilmStrip = {
return new Promise(resolve => {
let thumbs = this.getThumbs(!forceUpdate);
if(thumbs.localThumb)
thumbs.localThumb.animate({
height: local.thumbHeight,
width: local.thumbWidth
}, {
queue: false,
duration: animate ? 500 : 0,
complete: resolve
});
if(thumbs.remoteThumbs)
thumbs.remoteThumbs.animate({
height: remote.thumbHeight,
width: remote.thumbWidth
}, {
queue: false,
duration: animate ? 500 : 0,
complete: resolve
});
let promises = [];
this.filmStrip.animate({
// adds 2 px because of small video 1px border
height: remote.thumbHeight + 2
}, {
queue: false,
duration: animate ? 500 : 0
});
if(thumbs.localThumb) {
promises.push(new Promise((resolve) => {
thumbs.localThumb.animate({
height: local.thumbHeight,
width: local.thumbWidth
}, this._getAnimateOptions(animate, resolve));
}));
}
if(thumbs.remoteThumbs) {
promises.push(new Promise((resolve) => {
thumbs.remoteThumbs.animate({
height: remote.thumbHeight,
width: remote.thumbWidth
}, this._getAnimateOptions(animate, resolve));
}));
}
promises.push(new Promise((resolve) => {
this.filmStrip.animate({
// adds 2 px because of small video 1px border
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));
}));
if (!animate) {
resolve();
}
Promise.all(promises).then(resolve);
});
},
/**
* Helper method. Returns options for jQuery animation
* @param animate {Boolean} - animation flag
* @param cb {Function} - complete callback
* @returns {Object} - animation options object
* @private
*/
_getAnimateOptions(animate, cb = $.noop) {
return {
queue: false,
duration: animate ? 500 : 0,
complete: cb
};
},
/**
* Returns font size for indicators according to current
* height of thumbnail
* @param height
* @returns {Number} - font size for current height
* @private
*/
_getIndicatorFontSize(height) {
const { SMALL, MEDIUM } = ThumbnailSizes;
let fontSize;
if (height <= SMALL) {
fontSize = 5;
} else if (height > SMALL && height <= MEDIUM) {
fontSize = 6;
} else {
fontSize = 8;
}
return fontSize;
},
/**
* Returns thumbnails of the filmstrip
* @param only_visible