fix(UI): Optimize portrait thumbnail display (#8274)

Fixes #8272

Author: avelad

ui/less/thumbnails.less

@@ -24,6 +24,11 @@
     right: 0;
     text-align: center;
   }
+
+  &.portrait-thumbnail {
+    min-width: 75px;
+    width: 7.5%;
+  }
 }
 
 #shaka-player-ui-time-container {

ui/seek_bar.js

@@ -546,6 +546,11 @@ shaka.ui.SeekBar = class extends shaka.ui.RangeElement {
         Math.min(Math.floor(seekRange.end), value));
     const thumbnail =
         await this.player.getThumbnails(/* trackId= */ null, playerValue);
+    if (thumbnail.width < thumbnail.height) {
+      this.thumbnailContainer_.classList.add('portrait-thumbnail');
+    } else {
+      this.thumbnailContainer_.classList.remove('portrait-thumbnail');
+    }
     if (!thumbnail || !thumbnail.uris.length) {
       this.hideThumbnail_();
       return;