Fix aligning of indicator icon; Update logic for dynamically change of thumb indicators via font-size
This commit is contained in:
Ilya Daynatovich
parent
3bd4f1d5d8
commit
9bc24e1caa
|
|
@ -63,7 +63,7 @@
|
|||
top: 50%;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
@include transform(translate(-50%, -50%))
|
||||
@include transform(translate(-50%, -50%));
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -68,33 +68,24 @@
|
|||
}
|
||||
|
||||
.indicatoricon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
@include transform(translateY(-50%));
|
||||
width: 100%;
|
||||
@include absoluteAligning();
|
||||
}
|
||||
|
||||
.connection {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
width: 12px;
|
||||
height: 8px;
|
||||
left: 0;
|
||||
@include transform(translate(0, -50%));
|
||||
|
||||
&_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;
|
||||
}
|
||||
|
|
@ -102,8 +93,6 @@
|
|||
&_full
|
||||
{
|
||||
@include topLeft();
|
||||
max-width: 12px;
|
||||
width: 12px;
|
||||
color: #FFFFFF;/*#15A1ED*/
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -116,26 +105,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
&_small {
|
||||
span.indicator {
|
||||
font-size: 5px;
|
||||
|
||||
.connection {
|
||||
height: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&_medium {
|
||||
span.indicator {
|
||||
font-size: 6px;
|
||||
|
||||
.connection {
|
||||
height: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__hoverOverlay {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -27,6 +27,25 @@ const SHOW_CLASSES = {
|
|||
'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.
|
||||
*/
|
||||
|
|
@ -463,6 +482,7 @@ const SHOW_CLASSES = {
|
|||
|
||||
if (indicators.length <= 0) {
|
||||
indicatorSpan = document.createElement('span');
|
||||
|
||||
indicatorSpan.className = 'indicator';
|
||||
indicatorSpan.id = indicatorId;
|
||||
|
||||
|
|
@ -475,6 +495,8 @@ const SHOW_CLASSES = {
|
|||
APP.translation.translateElement($(indicatorSpan));
|
||||
}
|
||||
|
||||
this._resizeIndicator(indicatorSpan);
|
||||
|
||||
document.getElementById(videoSpanId)
|
||||
.querySelector('.videocontainer__toptoolbar')
|
||||
.appendChild(indicatorSpan);
|
||||
|
|
@ -483,6 +505,37 @@ const SHOW_CLASSES = {
|
|||
}
|
||||
|
||||
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;
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -3,15 +3,6 @@
|
|||
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 = {
|
||||
/**
|
||||
*
|
||||
|
|
@ -402,7 +393,14 @@ const FilmStrip = {
|
|||
}, this._getAnimateOptions(animate, resolve));
|
||||
}));
|
||||
|
||||
this._setThumbnailsClasses(remote.thumbHeight);
|
||||
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) {
|
||||
resolve();
|
||||
|
|
@ -427,35 +425,6 @@ const FilmStrip = {
|
|||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* Set thumbnail classes according to the current size of thumbnail
|
||||
* @param height
|
||||
* @private
|
||||
*/
|
||||
_setThumbnailsClasses(height) {
|
||||
const { SMALL, MEDIUM } = ThumbnailSizes;
|
||||
const { localThumb, remoteThumbs } = this.getThumbs();
|
||||
let smallClass = 'videocontainer_small';
|
||||
let mediumClass = 'videocontainer_medium';
|
||||
let className = '';
|
||||
|
||||
if (height <= SMALL) {
|
||||
className = smallClass;
|
||||
} else if (height > SMALL && height <= MEDIUM) {
|
||||
className = mediumClass;
|
||||
}
|
||||
|
||||
localThumb
|
||||
.removeClass(`${smallClass} ${mediumClass}`)
|
||||
.addClass(className);
|
||||
|
||||
if (remoteThumbs) {
|
||||
remoteThumbs
|
||||
.removeClass(`${smallClass} ${mediumClass}`)
|
||||
.addClass(className);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns thumbnails of the filmstrip
|
||||
* @param only_visible
|
||||
|
|
|
|||
Loading…
Reference in New Issue