Browse Source

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.
j8
Leonard Kim 8 years ago
parent
commit
5d1087e464
1 changed files with 21 additions and 19 deletions
  1. 21
    19
      modules/UI/videolayout/Filmstrip.js

+ 21
- 19
modules/UI/videolayout/Filmstrip.js View File

286
             );
286
             );
287
         }
287
         }
288
 
288
 
289
-        // If the number of videos is 0 or undefined we don't need to calculate
290
-        // further.
291
-        if (numvids) {
289
+        // If the number of videos is 0 or undefined or we're in vertical
290
+        // filmstrip mode we don't need to calculate further any adjustments
291
+        // to width based on the number of videos present.
292
+        if (numvids && !interfaceConfig.VERTICAL_FILMSTRIP) {
292
             let remoteVideoContainer = thumbs.remoteThumbs.eq(0);
293
             let remoteVideoContainer = thumbs.remoteThumbs.eq(0);
293
             availableWidth = Math.floor(
294
             availableWidth = Math.floor(
294
                 (videoAreaAvailableWidth - numvids * (
295
                 (videoAreaAvailableWidth - numvids * (
358
          * h - the height of the thumbnails
359
          * h - the height of the thumbnails
359
          * remoteRatio - width:height for the remote thumbnail
360
          * remoteRatio - width:height for the remote thumbnail
360
          * localRatio - width:height for the local thumbnail
361
          * localRatio - width:height for the local thumbnail
361
-         * numberRemoteThumbs - number of remote thumbnails (we have only one
362
-         * local thumbnail)
362
+         * remoteThumbsInRow - number of remote thumbnails in a row (we have
363
+         * only one local thumbnail) next to the local thumbnail. In vertical
364
+         * filmstrip mode, this will always be 0.
363
          *
365
          *
364
          * Since the height for local thumbnail = height for remote thumbnail
366
          * Since the height for local thumbnail = height for remote thumbnail
365
          * and we know the ratio (width:height) for the local and for the
367
          * and we know the ratio (width:height) for the local and for the
368
          * remoteLocalWidthRatio = rW / lW = remoteRatio / localRatio
370
          * remoteLocalWidthRatio = rW / lW = remoteRatio / localRatio
369
          * and rW = lW * remoteRatio / localRatio = lW * remoteLocalWidthRatio
371
          * and rW = lW * remoteRatio / localRatio = lW * remoteLocalWidthRatio
370
          * And the total width for the thumbnails is:
372
          * And the total width for the thumbnails is:
371
-         * totalWidth = rW * numberRemoteThumbs + lW
372
-         * = lW * remoteLocalWidthRatio * numberRemoteThumbs + lW =
373
-         * lW * (remoteLocalWidthRatio * numberRemoteThumbs + 1)
373
+         * totalWidth = rW * remoteThumbsInRow + lW
374
+         * = lW * remoteLocalWidthRatio * remoteThumbsInRow + lW =
375
+         * lW * (remoteLocalWidthRatio * remoteThumbsInRow + 1)
374
          * and the h = lW/localRatio
376
          * and the h = lW/localRatio
375
          *
377
          *
376
          * In order to fit all the thumbails in the area defined by
378
          * In order to fit all the thumbails in the area defined by
388
          * availableHeight/h > availableWidth/totalWidth otherwise 2) is true
390
          * availableHeight/h > availableWidth/totalWidth otherwise 2) is true
389
          */
391
          */
390
 
392
 
391
-        const numberRemoteThumbs = this.getThumbs(true).remoteThumbs.length;
393
+        const remoteThumbsInRow = interfaceConfig.VERTICAL_FILMSTRIP
394
+            ? 0 : this.getThumbs(true).remoteThumbs.length;
392
         const remoteLocalWidthRatio = interfaceConfig.REMOTE_THUMBNAIL_RATIO /
395
         const remoteLocalWidthRatio = interfaceConfig.REMOTE_THUMBNAIL_RATIO /
393
             interfaceConfig.LOCAL_THUMBNAIL_RATIO;
396
             interfaceConfig.LOCAL_THUMBNAIL_RATIO;
394
         const lW = Math.min(availableWidth /
397
         const lW = Math.min(availableWidth /
395
-            (remoteLocalWidthRatio * numberRemoteThumbs + 1), availableHeight *
398
+            (remoteLocalWidthRatio * remoteThumbsInRow + 1), availableHeight *
396
             interfaceConfig.LOCAL_THUMBNAIL_RATIO);
399
             interfaceConfig.LOCAL_THUMBNAIL_RATIO);
397
         const h = lW / interfaceConfig.LOCAL_THUMBNAIL_RATIO;
400
         const h = lW / interfaceConfig.LOCAL_THUMBNAIL_RATIO;
398
 
401
 
399
-        const removeVideoWidth = lW * remoteLocalWidthRatio;
402
+        const remoteVideoWidth = lW * remoteLocalWidthRatio;
400
 
403
 
401
         let localVideo;
404
         let localVideo;
402
         if (interfaceConfig.VERTICAL_FILMSTRIP) {
405
         if (interfaceConfig.VERTICAL_FILMSTRIP) {
403
-            // scale both width and height
404
             localVideo = {
406
             localVideo = {
405
-                thumbWidth: removeVideoWidth,
407
+                thumbWidth: remoteVideoWidth,
406
                 thumbHeight: h * remoteLocalWidthRatio
408
                 thumbHeight: h * remoteLocalWidthRatio
407
             };
409
             };
408
         } else {
410
         } else {
413
         }
415
         }
414
 
416
 
415
         return {
417
         return {
416
-                    localVideo,
417
-                    remoteVideo: {
418
-                        thumbWidth: removeVideoWidth,
419
-                        thumbHeight: h
420
-                    }
421
-                };
418
+            localVideo,
419
+            remoteVideo: {
420
+                thumbWidth: remoteVideoWidth,
421
+                thumbHeight: h
422
+            }
423
+        };
422
     },
424
     },
423
 
425
 
424
     /**
426
     /**

Loading…
Cancel
Save