From a65fca851ce423c36e7c33434a7b84f620f2ff8b Mon Sep 17 00:00:00 2001 From: hristoterezov Date: Mon, 19 Sep 2016 11:20:59 -0500 Subject: [PATCH] refactor(FilmStrip): calculateThumbnailSizeFromAvailable --- interface_config.js | 8 +- modules/UI/videolayout/FilmStrip.js | 119 ++++++++++++++-------------- 2 files changed, 62 insertions(+), 65 deletions(-) diff --git a/interface_config.js b/interface_config.js index adff2c338..6e2337265 100644 --- a/interface_config.js +++ b/interface_config.js @@ -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 }; diff --git a/modules/UI/videolayout/FilmStrip.js b/modules/UI/videolayout/FilmStrip.js index 6dcd64aac..fb1ba7c30 100644 --- a/modules/UI/videolayout/FilmStrip.js +++ b/modules/UI/videolayout/FilmStrip.js @@ -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,