Browse Source

ref(toolbar): remove all jquery filmstrip animations

The animate flag is always being passed in as false, so
essentially the animation isn't needed, unless a setTimeout 0
behavior is for some reason required...
master
Leonard Kim 7 years ago
parent
commit
8363f3cfeb
2 changed files with 42 additions and 71 deletions
  1. 37
    65
      modules/UI/videolayout/Filmstrip.js
  2. 5
    6
      modules/UI/videolayout/VideoLayout.js

+ 37
- 65
modules/UI/videolayout/Filmstrip.js View File

@@ -442,81 +442,53 @@ const Filmstrip = {
442 442
      * @param forceUpdate
443 443
      * @returns {Promise}
444 444
      */
445
-    // eslint-disable-next-line max-params
445
+    // eslint-disable-next-line max-params, no-unused-vars
446 446
     resizeThumbnails(local, remote, animate = false, forceUpdate = false) {
447
-        return new Promise(resolve => {
448
-            const thumbs = this.getThumbs(!forceUpdate);
449
-            const promises = [];
450
-
451
-            if (thumbs.localThumb) {
452
-                // eslint-disable-next-line no-shadow
453
-                thumbs.localThumb.css({
454
-                    display: 'inline-block',
455
-                    height: `${local.thumbHeight}px`,
456
-                    'min-height': `${local.thumbHeight}px`,
457
-                    'min-width': `${local.thumbWidth}px`,
458
-                    width: `${local.thumbWidth}px`
459
-                });
460
-            }
447
+        const thumbs = this.getThumbs(!forceUpdate);
461 448
 
462
-            if (thumbs.remoteThumbs) {
463
-                thumbs.remoteThumbs.css({
464
-                    display: 'inline-block',
465
-                    height: `${remote.thumbHeight}px`,
466
-                    'min-height': `${remote.thumbHeight}px`,
467
-                    'min-width': `${remote.thumbWidth}px`,
468
-                    width: `${remote.thumbWidth}px`
469
-                });
470
-            }
449
+        if (thumbs.localThumb) {
471 450
             // eslint-disable-next-line no-shadow
472
-            promises.push(new Promise(resolve => {
473
-                // Let CSS take care of height in vertical filmstrip mode.
474
-                if (interfaceConfig.VERTICAL_FILMSTRIP) {
475
-                    $('#filmstripLocalVideo').animate({
476
-                        // adds 4 px because of small video 2px border
477
-                        width: local.thumbWidth + 4
478
-                    }, this._getAnimateOptions(animate, resolve));
479
-                } else {
480
-                    this.filmstrip.animate({
481
-                        // adds 4 px because of small video 2px border
482
-                        height: remote.thumbHeight + 4
483
-                    }, this._getAnimateOptions(animate, resolve));
484
-                }
485
-            }));
451
+            thumbs.localThumb.css({
452
+                display: 'inline-block',
453
+                height: `${local.thumbHeight}px`,
454
+                'min-height': `${local.thumbHeight}px`,
455
+                'min-width': `${local.thumbWidth}px`,
456
+                width: `${local.thumbWidth}px`
457
+            });
458
+        }
486 459
 
487
-            promises.push(new Promise(() => {
488
-                const { localThumb } = this.getThumbs();
489
-                const height = localThumb ? localThumb.height() : 0;
490
-                const fontSize = UIUtil.getIndicatorFontSize(height);
460
+        if (thumbs.remoteThumbs) {
461
+            thumbs.remoteThumbs.css({
462
+                display: 'inline-block',
463
+                height: `${remote.thumbHeight}px`,
464
+                'min-height': `${remote.thumbHeight}px`,
465
+                'min-width': `${remote.thumbWidth}px`,
466
+                width: `${remote.thumbWidth}px`
467
+            });
468
+        }
491 469
 
492
-                this.filmstrip.find('.indicator').animate({
493
-                    fontSize
494
-                }, this._getAnimateOptions(animate, resolve));
495
-            }));
470
+        // Let CSS take care of height in vertical filmstrip mode.
471
+        if (interfaceConfig.VERTICAL_FILMSTRIP) {
472
+            $('#filmstripLocalVideo').css({
473
+                // adds 4 px because of small video 2px border
474
+                width: `${local.thumbWidth + 4}px`
475
+            });
476
+        } else {
477
+            this.filmstrip.css({
478
+                // adds 4 px because of small video 2px border
479
+                height: `${remote.thumbHeight + 4}px`
480
+            });
481
+        }
496 482
 
497
-            if (!animate) {
498
-                resolve();
499
-            }
483
+        const { localThumb } = this.getThumbs();
484
+        const height = localThumb ? localThumb.height() : 0;
485
+        const fontSize = UIUtil.getIndicatorFontSize(height);
500 486
 
501
-            Promise.all(promises).then(resolve);
487
+        this.filmstrip.find('.indicator').css({
488
+            'font-size': `${fontSize}px`
502 489
         });
503 490
     },
504 491
 
505
-    /**
506
-     * Helper method. Returns options for jQuery animation
507
-     * @param animate {Boolean} - animation flag
508
-     * @param cb {Function} - complete callback
509
-     * @returns {Object} - animation options object
510
-     * @private
511
-     */
512
-    _getAnimateOptions(animate, cb = $.noop) {
513
-        return {
514
-            queue: false,
515
-            duration: animate ? 500 : 0,
516
-            complete: cb
517
-        };
518
-    },
519
-
520 492
     /**
521 493
      * Returns thumbnails of the filmstrip
522 494
      * @param onlyVisible

+ 5
- 6
modules/UI/videolayout/VideoLayout.js View File

@@ -582,12 +582,11 @@ const VideoLayout = {
582 582
             = Filmstrip.calculateThumbnailSize();
583 583
 
584 584
         Filmstrip.resizeThumbnails(localVideo, remoteVideo,
585
-            animate, forceUpdate)
586
-            .then(() => {
587
-                if (onComplete && typeof onComplete === 'function') {
588
-                    onComplete();
589
-                }
590
-            });
585
+            animate, forceUpdate);
586
+
587
+        if (onComplete && typeof onComplete === 'function') {
588
+            onComplete();
589
+        }
591 590
 
592 591
         return { localVideo,
593 592
             remoteVideo };

Loading…
Cancel
Save