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

fix(vertical-filmstrip): prevent scaling based on video count 

Vertical filmstrip has a scrollbar to scroll through all remote
video thumbnails instead of scaling width and height to force all
thumbnails to display on screen. The scaling is not necessary in
vertical filmstrip mode and instead causes some UI spacing issues
with the video status label.

Also addressed a typo in "removeVideoWidth" near the area of the
changed logic.
This commit is contained in:
Leonard Kim 2017-06-05 14:19:05 -07:00 committed by yanas
parent da99f3b939
commit 5d1087e464
1 changed files with 21 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
modules/UI/videolayout/Filmstrip.js
View File

@ -286,9 +286,10 @@ const Filmstrip = {
); );
} }
// If the number of videos is 0 or undefined we don't need to calculate // If the number of videos is 0 or undefined or we're in vertical
// further. // filmstrip mode we don't need to calculate further any adjustments
if (numvids) { // to width based on the number of videos present.
if (numvids && !interfaceConfig.VERTICAL_FILMSTRIP) {
let remoteVideoContainer = thumbs.remoteThumbs.eq(0); let remoteVideoContainer = thumbs.remoteThumbs.eq(0);
availableWidth = Math.floor( availableWidth = Math.floor(
(videoAreaAvailableWidth - numvids * ( (videoAreaAvailableWidth - numvids * (
@ -358,8 +359,9 @@ const Filmstrip = {
* h - the height of the thumbnails * h - the height of the thumbnails
* remoteRatio - width:height for the remote thumbnail * remoteRatio - width:height for the remote thumbnail
* localRatio - width:height for the local thumbnail * localRatio - width:height for the local thumbnail
* numberRemoteThumbs - number of remote thumbnails (we have only one * remoteThumbsInRow - number of remote thumbnails in a row (we have
* local thumbnail) * only one local thumbnail) next to the local thumbnail. In vertical
* filmstrip mode, this will always be 0.
* *
* Since the height for local thumbnail = height for remote thumbnail * Since the height for local thumbnail = height for remote thumbnail
* and we know the ratio (width:height) for the local and for the * and we know the ratio (width:height) for the local and for the
@ -368,9 +370,9 @@ const Filmstrip = {
* remoteLocalWidthRatio = rW / lW = remoteRatio / localRatio * remoteLocalWidthRatio = rW / lW = remoteRatio / localRatio
* and rW = lW * remoteRatio / localRatio = lW * remoteLocalWidthRatio * and rW = lW * remoteRatio / localRatio = lW * remoteLocalWidthRatio
* And the total width for the thumbnails is: * And the total width for the thumbnails is:
* totalWidth = rW * numberRemoteThumbs + lW * totalWidth = rW * remoteThumbsInRow + lW
* = lW * remoteLocalWidthRatio * numberRemoteThumbs + lW = * = lW * remoteLocalWidthRatio * remoteThumbsInRow + lW =
* lW * (remoteLocalWidthRatio * numberRemoteThumbs + 1) * lW * (remoteLocalWidthRatio * remoteThumbsInRow + 1)
* and the h = lW/localRatio * and the h = lW/localRatio
* *
* In order to fit all the thumbails in the area defined by * In order to fit all the thumbails in the area defined by
@ -388,21 +390,21 @@ const Filmstrip = {
* availableHeight/h > availableWidth/totalWidth otherwise 2) is true * availableHeight/h > availableWidth/totalWidth otherwise 2) is true
*/ */
const numberRemoteThumbs = this.getThumbs(true).remoteThumbs.length; const remoteThumbsInRow = interfaceConfig.VERTICAL_FILMSTRIP
? 0 : this.getThumbs(true).remoteThumbs.length;
const remoteLocalWidthRatio = interfaceConfig.REMOTE_THUMBNAIL_RATIO / const remoteLocalWidthRatio = interfaceConfig.REMOTE_THUMBNAIL_RATIO /
interfaceConfig.LOCAL_THUMBNAIL_RATIO; interfaceConfig.LOCAL_THUMBNAIL_RATIO;
const lW = Math.min(availableWidth / const lW = Math.min(availableWidth /
(remoteLocalWidthRatio * numberRemoteThumbs + 1), availableHeight * (remoteLocalWidthRatio * remoteThumbsInRow + 1), availableHeight *
interfaceConfig.LOCAL_THUMBNAIL_RATIO); interfaceConfig.LOCAL_THUMBNAIL_RATIO);
const h = lW / interfaceConfig.LOCAL_THUMBNAIL_RATIO; const h = lW / interfaceConfig.LOCAL_THUMBNAIL_RATIO;
const removeVideoWidth = lW * remoteLocalWidthRatio; const remoteVideoWidth = lW * remoteLocalWidthRatio;
let localVideo; let localVideo;
if (interfaceConfig.VERTICAL_FILMSTRIP) { if (interfaceConfig.VERTICAL_FILMSTRIP) {
// scale both width and height
localVideo = { localVideo = {
thumbWidth: removeVideoWidth, thumbWidth: remoteVideoWidth,
thumbHeight: h * remoteLocalWidthRatio thumbHeight: h * remoteLocalWidthRatio
}; };
} else { } else {
@ -413,12 +415,12 @@ const Filmstrip = {
} }
return { return {
localVideo, localVideo,
remoteVideo: { remoteVideo: {
thumbWidth: removeVideoWidth, thumbWidth: remoteVideoWidth,
thumbHeight: h thumbHeight: h
} }
}; };
}, },
/** /**