apitech
/
jitsi-meet
mirror of https://github.com/jitsi/jitsi-meet
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #1137 from BeatC/thumbnail-avatars

Browse Source 
Thumbnail avatars
pull/1143/head 1503
yanas 8 years ago committed by GitHub
parent 66fbc28385 9bc24e1caa
commit 5098b64666
5 changed files with 196 additions and 127 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      css/_mixins.scss
  2. 4
      css/_variables.scss
  3. 188
      css/_videolayout_default.scss
  4. 53
      modules/UI/util/UIUtil.js
  5. 76
      modules/UI/videolayout/FilmStrip.js

2
css/_mixins.scss
Unescape View File

@ -63,7 +63,7 @@
top: 50%; top: 50%;
left: 50%; left: 50%;
position: absolute; position: absolute;
@include transform(translate(-50%, -50%)) @include transform(translate(-50%, -50%));
} }
/** /**

4
css/_variables.scss
Unescape View File

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

188
css/_videolayout_default.scss
Unescape View File

@ -22,41 +22,97 @@
height: 100%; height: 100%;
background-color: black; background-color: black;
} }
}
/** /**
* The toolbar of the video thumbnail. * The toolbar of the video thumbnail.
*/ */
.videocontainer__toolbar, &__toolbar,
.videocontainer__toptoolbar { &__toptoolbar {
position: absolute; position: absolute;
left: 0; left: 0;
z-index: 3; z-index: 3;
width: 100%; width: 100%;
box-sizing: border-box; // Includes the padding in the 100% width. box-sizing: border-box; // Includes the padding in the 100% width.
} }
.videocontainer__toolbar { &__toolbar {
bottom: 0; bottom: 0;
padding: 0 5px 0 5px; padding: 0 5px 0 5px;
height: $thumbnailToolbarHeight; height: $thumbnailToolbarHeight;
} }
.videocontainer__toptoolbar { &__toptoolbar {
$toolbarPadding: 5px; $toolbarPadding: 5px;
top: 0; top: 0;
padding: $toolbarPadding; padding: $toolbarPadding;
padding-bottom: 0; padding-bottom: 0;
height: $thumbnailIndicatorSize + $toolbarPadding;
} span.indicator {
position: relative;
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;
&:last-child {
margin-right: 0;
}
.indicatoricon {
@include absoluteAligning();
}
.connection {
position: relative;
display: inline-block;
margin: 0 auto;
left: 0;
@include transform(translate(0, -50%));
&_empty
{
color: #8B8B8B;/*#FFFFFF*/
overflow: hidden;
}
&_lost
{
color: #8B8B8B;
overflow: visible;
}
&_full
{
@include topLeft();
color: #FFFFFF;/*#15A1ED*/
overflow: hidden;
}
}
.icon-connection,
.icon-connection-lost {
font-size: 1em;
}
}
}
.videocontainer__hoverOverlay { &__hoverOverlay {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
visibility: hidden; visibility: hidden;
background: rgba(0,0,0,.6); background: rgba(0,0,0,.6);
z-index: 2; z-index: 2;
}
} }
#localVideoWrapper { #localVideoWrapper {
@ -217,72 +273,6 @@
background: $connectionIndicatorBg; 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 .remotevideomenu
{ {
display: inline-block; display: inline-block;
@ -400,8 +390,10 @@
.userAvatar { .userAvatar {
@include maxSize(60px); @include maxSize(60px);
@include circle(50%);
@include absoluteAligning(); @include absoluteAligning();
border-radius: 50%;
height: 50%;
width: auto;
} }
.sharedVideoAvatar { .sharedVideoAvatar {

53
modules/UI/util/UIUtil.js
Unescape View File

@ -27,6 +27,25 @@ const SHOW_CLASSES = {
'list-item': 'show-list-item' 'list-item': 'show-list-item'
}; };
/**
* Contains sizes of thumbnails
* @type {{SMALL: number, MEDIUM: number}}
*/
const ThumbnailSizes = {
SMALL: 60,
MEDIUM: 80
};
/**
* Contains font sizes for thumbnail indicators
* @type {{SMALL: number, MEDIUM: number}}
*/
const IndicatorFontSizes = {
SMALL: 5,
MEDIUM: 6,
NORMAL: 8
};
/** /**
* Created by hristo on 12/22/14. * Created by hristo on 12/22/14.
*/ */
@ -463,6 +482,7 @@ const SHOW_CLASSES = {
if (indicators.length <= 0) { if (indicators.length <= 0) {
indicatorSpan = document.createElement('span'); indicatorSpan = document.createElement('span');
indicatorSpan.className = 'indicator'; indicatorSpan.className = 'indicator';
indicatorSpan.id = indicatorId; indicatorSpan.id = indicatorId;
@ -475,6 +495,8 @@ const SHOW_CLASSES = {
APP.translation.translateElement($(indicatorSpan)); APP.translation.translateElement($(indicatorSpan));
} }
this._resizeIndicator(indicatorSpan);
document.getElementById(videoSpanId) document.getElementById(videoSpanId)
.querySelector('.videocontainer__toptoolbar') .querySelector('.videocontainer__toptoolbar')
.appendChild(indicatorSpan); .appendChild(indicatorSpan);
@ -483,6 +505,37 @@ const SHOW_CLASSES = {
} }
return indicatorSpan; return indicatorSpan;
},
/**
* Resizing indicator element passing via argument
* according to the current thumbnail size
* @param {HTMLElement} indicator - indicator element
* @private
*/
_resizeIndicator(indicator) {
let height = $('#localVideoContainer').height();
let fontSize = this.getIndicatorFontSize(height);
$(indicator).css('font-size', fontSize);
},
/**
* Returns font size for indicators according to current
* height of thumbnail
* @param {Number} - height - current height of thumbnail
* @returns {Number} - font size for current height
*/
getIndicatorFontSize(height) {
const { SMALL, MEDIUM } = ThumbnailSizes;
let fontSize = IndicatorFontSizes.NORMAL;
if (height <= SMALL) {
fontSize = IndicatorFontSizes.SMALL;
} else if (height > SMALL && height <= MEDIUM) {
fontSize = IndicatorFontSizes.MEDIUM;
}
return fontSize;
} }
}; };

76
modules/UI/videolayout/FilmStrip.js
Unescape View File

@ -368,39 +368,63 @@ const FilmStrip = {
return new Promise(resolve => { return new Promise(resolve => {
let thumbs = this.getThumbs(!forceUpdate); let thumbs = this.getThumbs(!forceUpdate);
if(thumbs.localThumb) let promises = [];
thumbs.localThumb.animate({
height: local.thumbHeight, if(thumbs.localThumb) {
width: local.thumbWidth promises.push(new Promise((resolve) => {
}, { thumbs.localThumb.animate({
queue: false, height: local.thumbHeight,
duration: animate ? 500 : 0, width: local.thumbWidth
complete: resolve }, this._getAnimateOptions(animate, resolve));
}); }));
if(thumbs.remoteThumbs) }
thumbs.remoteThumbs.animate({ if(thumbs.remoteThumbs) {
height: remote.thumbHeight, promises.push(new Promise((resolve) => {
width: remote.thumbWidth thumbs.remoteThumbs.animate({
}, { height: remote.thumbHeight,
queue: false, width: remote.thumbWidth
duration: animate ? 500 : 0, }, this._getAnimateOptions(animate, resolve));
complete: resolve }));
}); }
promises.push(new Promise((resolve) => {
this.filmStrip.animate({ this.filmStrip.animate({
// adds 2 px because of small video 1px border // adds 2 px because of small video 1px border
height: remote.thumbHeight + 2 height: remote.thumbHeight + 2
}, { }, this._getAnimateOptions(animate, resolve));
queue: false, }));
duration: animate ? 500 : 0
}); promises.push(new Promise(() => {
let { localThumb } = this.getThumbs();
let height = localThumb.height();
let fontSize = UIUtil.getIndicatorFontSize(height);
this.filmStrip.find('.indicator').animate({
fontSize
}, this._getAnimateOptions(animate, resolve));
}));
if (!animate) { if (!animate) {
resolve(); 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 thumbnails of the filmstrip * Returns thumbnails of the filmstrip
* @param only_visible * @param only_visible

Write Preview
Loading…
Cancel
Save