refactor(FilmStrip): calculateThumbnailSizeFromAvailable
This commit is contained in:
parent
d15413cd18
commit
a65fca851c
|
@ -41,10 +41,6 @@ var interfaceConfig = { // eslint-disable-line no-unused-vars
|
|||
RANDOM_AVATAR_URL_PREFIX: false,
|
||||
RANDOM_AVATAR_URL_SUFFIX: false,
|
||||
FILM_STRIP_MAX_HEIGHT: 120,
|
||||
LOCAL_THUMBNAIL_RATIO_WIDTH: 16,
|
||||
LOCAL_THUMBNAIL_RATIO_HEIGHT: 9,
|
||||
REMOTE_THUMBNAIL_RATIO_WIDTH: 1,
|
||||
REMOTE_THUMBNAIL_RATIO_HEIGHT: 1,
|
||||
// Enables feedback star animation.
|
||||
ENABLE_FEEDBACK_ANIMATION: false,
|
||||
DISABLE_FOCUS_INDICATOR: false,
|
||||
|
@ -52,5 +48,7 @@ var interfaceConfig = { // eslint-disable-line no-unused-vars
|
|||
// disables the ringing sound when the RingOverlay is shown.
|
||||
DISABLE_RINGING: false,
|
||||
AUDIO_LEVEL_PRIMARY_COLOR: "rgba(255,255,255,0.7)",
|
||||
AUDIO_LEVEL_SECONDARY_COLOR: "rgba(255,255,255,0.4)"
|
||||
AUDIO_LEVEL_SECONDARY_COLOR: "rgba(255,255,255,0.4)",
|
||||
LOCAL_THUMBNAIL_RATIO: 16/9, //16:9
|
||||
REMOTE_THUMBNAIL_RATIO: 1, //1:1
|
||||
};
|
||||
|
|
|
@ -72,40 +72,6 @@ const FilmStrip = {
|
|||
return this.calculateThumbnailSizeFromAvailable(width, height);
|
||||
},
|
||||
|
||||
/**
|
||||
* Normalizes local and remote thumbnail ratios
|
||||
*/
|
||||
normalizeThumbnailRatio () {
|
||||
let remoteHeightRatio = interfaceConfig.REMOTE_THUMBNAIL_RATIO_HEIGHT;
|
||||
let remoteWidthRatio = interfaceConfig.REMOTE_THUMBNAIL_RATIO_WIDTH;
|
||||
|
||||
let localHeightRatio = interfaceConfig.LOCAL_THUMBNAIL_RATIO_HEIGHT;
|
||||
let localWidthRatio = interfaceConfig.LOCAL_THUMBNAIL_RATIO_WIDTH;
|
||||
|
||||
let commonHeightRatio = remoteHeightRatio * localHeightRatio;
|
||||
|
||||
let localRatioCoefficient = localWidthRatio / localHeightRatio;
|
||||
let remoteRatioCoefficient = remoteWidthRatio / remoteHeightRatio;
|
||||
|
||||
remoteWidthRatio = commonHeightRatio * remoteRatioCoefficient;
|
||||
remoteHeightRatio = commonHeightRatio;
|
||||
|
||||
localWidthRatio = commonHeightRatio * localRatioCoefficient;
|
||||
localHeightRatio = commonHeightRatio;
|
||||
|
||||
let localRatio = {
|
||||
widthRatio: localWidthRatio,
|
||||
heightRatio: localHeightRatio
|
||||
};
|
||||
|
||||
let remoteRatio = {
|
||||
widthRatio: remoteWidthRatio,
|
||||
heightRatio: remoteHeightRatio
|
||||
};
|
||||
|
||||
return { localRatio, remoteRatio };
|
||||
},
|
||||
|
||||
calculateAvailableSize() {
|
||||
let availableHeight = interfaceConfig.FILM_STRIP_MAX_HEIGHT;
|
||||
let thumbs = this.getThumbs(true);
|
||||
|
@ -181,34 +147,67 @@ const FilmStrip = {
|
|||
return { availableWidth, availableHeight };
|
||||
},
|
||||
|
||||
/**
|
||||
* Calculate the thumbnail size in order to fit all the thumnails in passed
|
||||
* dimensions.
|
||||
* NOTE: Here we assume that the remote and local thumbnails are with the
|
||||
* same height.
|
||||
* @param {int} availableWidth the maximum width for all thumbnails
|
||||
* @param {int} availableHeight the maximum height for all thumbnails
|
||||
*/
|
||||
calculateThumbnailSizeFromAvailable(availableWidth, availableHeight) {
|
||||
let { localRatio, remoteRatio } = this.normalizeThumbnailRatio();
|
||||
let { remoteThumbs } = this.getThumbs(true);
|
||||
let remoteProportion = remoteRatio.widthRatio * remoteThumbs.length;
|
||||
let widthProportion = remoteProportion + localRatio.widthRatio;
|
||||
/**
|
||||
* Let:
|
||||
* lW - width of the local thumbnail
|
||||
* rW - width of the remote thumbnail
|
||||
* h - the height of the thumbnails
|
||||
* remoteRatio - width:height for the remote thumbnail
|
||||
* localRatio - width:height for the local thumbnail
|
||||
* numberRemoteThumbs - number of remote thumbnails (we have only one
|
||||
* local thumbnail)
|
||||
*
|
||||
* Since the height for local thumbnail = height for remote thumbnail
|
||||
* and we know the ratio (width:height) for the local and for the
|
||||
* remote thumbnail we can find rW/lW:
|
||||
* rW / remoteRatio = lW / localRatio then -
|
||||
* remoteLocalWidthRatio = rW / lW = remoteRatio / localRatio
|
||||
* and rW = lW * remoteRatio / localRatio = lW * remoteLocalWidthRatio
|
||||
* And the total width for the thumbnails is:
|
||||
* totalWidth = rW * numberRemoteThumbs + lW
|
||||
* = lW * remoteLocalWidthRatio * numberRemoteThumbs + lW =
|
||||
* lW * (remoteLocalWidthRatio * numberRemoteThumbs + 1)
|
||||
* and the h = lW/localRatio
|
||||
*
|
||||
* In order to fit all the thumbails in the area defined by
|
||||
* availableWidth * availableHeight we should check one of the
|
||||
* following options:
|
||||
* 1) if availableHeight == h - totalWidth should be less than
|
||||
* availableWidth
|
||||
* 2) if availableWidth == totalWidth - h should be less than
|
||||
* availableHeight
|
||||
*
|
||||
* 1) or 2) will be true and we are going to use it to calculate all
|
||||
* sizes.
|
||||
*
|
||||
* if 1) is true that means that
|
||||
* availableHeight/h > availableWidth/totalWidth otherwise 2) is true
|
||||
*/
|
||||
|
||||
let heightUnit = availableHeight / localRatio.heightRatio;
|
||||
let widthUnit = availableWidth / widthProportion;
|
||||
|
||||
if (heightUnit < widthUnit) {
|
||||
widthUnit = heightUnit;
|
||||
}
|
||||
else
|
||||
heightUnit = widthUnit;
|
||||
|
||||
let localVideo = {
|
||||
thumbWidth: widthUnit * localRatio.widthRatio,
|
||||
thumbHeight: heightUnit * localRatio.heightRatio
|
||||
};
|
||||
let remoteVideo = {
|
||||
thumbWidth: widthUnit * remoteRatio.widthRatio,
|
||||
thumbHeight: widthUnit * remoteRatio.heightRatio
|
||||
};
|
||||
|
||||
return {
|
||||
localVideo,
|
||||
remoteVideo
|
||||
};
|
||||
const numberRemoteThumbs = this.getThumbs(true).remoteThumbs.length;
|
||||
const remoteLocalWidthRatio = interfaceConfig.REMOTE_THUMBNAIL_RATIO /
|
||||
interfaceConfig.LOCAL_THUMBNAIL_RATIO;
|
||||
const lW = Math.min(availableWidth /
|
||||
(remoteLocalWidthRatio * numberRemoteThumbs + 1), availableHeight *
|
||||
interfaceConfig.LOCAL_THUMBNAIL_RATIO);
|
||||
const h = lW / interfaceConfig.LOCAL_THUMBNAIL_RATIO;
|
||||
return { localVideo:{
|
||||
thumbWidth: lW,
|
||||
thumbHeight: h
|
||||
}, remoteVideo: {
|
||||
thumbWidth: lW * remoteLocalWidthRatio,
|
||||
thumbHeight: h
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
resizeThumbnails (local, remote,
|
||||
|
|
Loading…
Reference in New Issue