|
|
@@ -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
|