Kaynağa Gözat

fix(avatar): dynamically size avatar in dynamically sizable filmstrip

master
Leonard Kim 6 yıl önce
ebeveyn
işleme
e3612929f8

+ 10
- 1
css/_videolayout_default.scss Dosyayı Görüntüle

525
     transition: box-shadow 0.3s ease;
525
     transition: box-shadow 0.3s ease;
526
 }
526
 }
527
 
527
 
528
-.userAvatar {
528
+.avatar-container {
529
     @include maxSize(60px);
529
     @include maxSize(60px);
530
     @include absoluteAligning();
530
     @include absoluteAligning();
531
     border-radius: 50%;
531
     border-radius: 50%;
532
+    display: flex;
533
+    justify-content: center;
532
     height: 50%;
534
     height: 50%;
535
+    overflow: hidden;
533
     width: auto;
536
     width: auto;
537
+
538
+    .userAvatar {
539
+        height: 100%;
540
+        object-fit: cover;
541
+        width: 100%;
542
+    }
534
 }
543
 }
535
 
544
 
536
 #videoNotAvailableScreen {
545
 #videoNotAvailableScreen {

+ 1
- 1
css/filmstrip/_tile_view_overrides.scss Dosyayı Görüntüle

6
     /**
6
     /**
7
      * Let the avatar grow with the tile.
7
      * Let the avatar grow with the tile.
8
      */
8
      */
9
-    .userAvatar {
9
+    .avatar-container {
10
         max-height: initial;
10
         max-height: initial;
11
         max-width: initial;
11
         max-width: initial;
12
     }
12
     }

+ 12
- 0
modules/UI/videolayout/Filmstrip.js Dosyayı Görüntüle

361
                 'min-width': `${local.thumbWidth}px`,
361
                 'min-width': `${local.thumbWidth}px`,
362
                 width: `${local.thumbWidth}px`
362
                 width: `${local.thumbWidth}px`
363
             });
363
             });
364
+
365
+            const avatarSize = local.thumbHeight / 2;
366
+
367
+            thumbs.localThumb.find('.avatar-container')
368
+                .height(avatarSize)
369
+                .width(avatarSize);
364
         }
370
         }
365
 
371
 
366
         if (thumbs.remoteThumbs) {
372
         if (thumbs.remoteThumbs) {
371
                 'min-width': `${remote.thumbWidth}px`,
377
                 'min-width': `${remote.thumbWidth}px`,
372
                 width: `${remote.thumbWidth}px`
378
                 width: `${remote.thumbWidth}px`
373
             });
379
             });
380
+
381
+            const avatarSize = remote.thumbHeight / 2;
382
+
383
+            thumbs.remoteThumbs.find('.avatar-container')
384
+                .height(avatarSize)
385
+                .width(avatarSize);
374
         }
386
         }
375
 
387
 
376
         const currentLayout = getCurrentLayout(APP.store.getState());
388
         const currentLayout = getCurrentLayout(APP.store.getState());

Loading…
İptal
Kaydet