Video player: added volume selector animation

src/lib/mediaPlayer.ts

@@ -191,8 +191,9 @@ export class MediaProgressLine extends RangeSelector {
 }
 
 export class VolumeSelector extends RangeSelector {
+  private static ICONS = ['volume_off', 'volume_mute', 'volume_down', 'volume_up'];
   public btn: HTMLElement;
-  protected volumeSvg: HTMLElement;
+  protected icon: HTMLSpanElement;
 
   constructor(protected listenerSetter: ListenerSetter, protected vertical = false) {
     super({
@@ -218,18 +219,15 @@ export class VolumeSelector extends RangeSelector {
       } */
     });
 
-    this.btn = document.createElement('div');
-    this.btn.classList.add('player-volume');
+    const className = 'player-volume';
+    const btn = this.btn = document.createElement('div');
+    btn.classList.add('btn-icon', className);
+    const icon = this.icon = document.createElement('span');
+    icon.classList.add(className + '__icon');
 
-    this.btn.innerHTML = `
-    <svg class="player-volume__icon" focusable="false" viewBox="0 0 24 24" aria-hidden="true"></svg>
-    `;
-    this.btn.classList.add('btn-icon');
-    this.volumeSvg = this.btn.firstElementChild as HTMLElement;
+    btn.append(icon, this.container);
 
-    this.btn.append(this.container);
-
-    attachClickEvent(this.volumeSvg, this.onMuteClick, {listenerSetter: this.listenerSetter});
+    attachClickEvent(icon, this.onMuteClick, {listenerSetter: this.listenerSetter});
     this.listenerSetter.add(rootScope)('media_playback_params', this.setVolume);
 
     this.setVolume();
@@ -244,19 +242,19 @@ export class VolumeSelector extends RangeSelector {
     // const volume = video.volume;
     const {volume, muted} = appMediaPlaybackController;
     let d: string;
+    let iconIndex: number;
     if(!volume || muted) {
-      d = `M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z`;
+      iconIndex = 0;
     } else if(volume > .5) {
-      d = `M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z`;
+      iconIndex = 3;
     } else if(volume > 0 && volume < .25) {
-      d = `M7 9v6h4l5 5V4l-5 5H7z`;
+      iconIndex = 1;
     } else {
-      d = `M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z`;
+      iconIndex = 2;
     }
 
-    try {
-      this.volumeSvg.innerHTML = `<path d="${d}"></path>`;
-    } catch(err) {}
+    VolumeSelector.ICONS.forEach(icon => this.icon.classList.remove('tgico-' + icon));
+    this.icon.classList.add('tgico-' + VolumeSelector.ICONS[iconIndex]);
 
     if(!this.mousedown) {
       this.setProgress(muted ? 0 : volume);

src/scss/partials/_chatPinned.scss

@@ -711,16 +711,10 @@
     }
 
     .player-volume__icon {
-      fill: var(--secondary-text-color);
-      width: inherit;
-      height: inherit;
+      display: flex;
       cursor: pointer;
     }
 
-    &.active .player-volume__icon {
-      fill: var(--primary-color);
-    }
-
     .progress-line {
       &-container {
         position: absolute;

src/scss/partials/_ckin.scss

@@ -216,29 +216,55 @@
   }
 
   .player-volume {
-    margin: 0 .125rem 0 .625rem;
+    --icon-size: 2.25rem;
+    --icon-margin-right: .5rem;
+    --selector-size: 50px;
+    --selector-thumb-size: .75rem;
+    --hide-width: var(--icon-size);
+    --show-width: calc(var(--icon-size) + var(--icon-margin-right) + var(--selector-size) + var(--selector-thumb-size) * .75);
+    // margin: 0 .125rem;
     display: flex;
     align-items: center;
+    width: var(--hide-width);
+    overflow: hidden;
+
+    @include animation-level(2) {
+      transition: width var(--layer-transition);
+    }
 
     html.is-touch & {
       // margin-left: .125rem;
       display: none;
     }
+
+    html:not(.is-touch) & {
+      & + .time {
+        margin-left: .5rem;
+      }
+    }
+
+    @include hover() {
+      width: var(--show-width);
+    }
     
     &__icon {
-      fill: #fff;
-      width: 2.25rem;
-      height: 2.25rem;
-      margin-right: .5rem;
+      color: #fff;
+      width: var(--icon-size);
+      height: var(--icon-size);
+      margin-right: var(--icon-margin-right);
       cursor: pointer;
       padding: .375rem;
+      font-size: 1.5rem;
+      display: flex;
     }
 
     .progress-line {
       --color: #fff;
+      --thumb-size: var(--selector-thumb-size);
+      --height: 4px;
       margin: 0;
-      width: 50px;
-      --thumb-size: 15px;
+      width: var(--selector-size);
+      min-width: var(--selector-size);
 
       // https://stackoverflow.com/a/4816050
       html.is-ios & {

src/scss/partials/_document.scss

@@ -118,23 +118,20 @@
   &-name {
     white-space: nowrap;
     font-weight: 500;
-    font-size: 1rem;
+    font-size: var(--font-size-16);
+    line-height: var(--line-height-16);
   }
 
   &-size {
     white-space: nowrap;
     color: var(--secondary-text-color);
-    font-size: .875rem;
+    font-size: var(--font-size-14);
+    line-height: var(--line-height-14);
     //padding-right: 32px;
     text-overflow: ellipsis;
     overflow: hidden;
   }
 
-  &-name, 
-  &-size {
-    line-height: var(--line-height);
-  }
-
   .preloader-container {
     width: 2.5rem;
     height: 2.5rem;

src/scss/partials/_fonts.scss

@@ -9,9 +9,9 @@
 @font-face {
   font-family: "#{$tgico-font-family}";
   src:
-    url('#{$tgico-font-path}/#{$tgico-font-family}.ttf?xxkozq') format('truetype'),
-    url('#{$tgico-font-path}/#{$tgico-font-family}.woff?xxkozq') format('woff'),
-    url('#{$tgico-font-path}/#{$tgico-font-family}.svg?xxkozq#tgico') format('svg');
+    url('#{$tgico-font-path}/#{$tgico-font-family}.ttf?oxpaus') format('truetype'),
+    url('#{$tgico-font-path}/#{$tgico-font-family}.woff?oxpaus') format('woff'),
+    url('#{$tgico-font-path}/#{$tgico-font-family}.svg?oxpaus#tgico') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -332,11 +332,6 @@
     content: $tgico-endcall_filled; 
   }
 }
-.tgico-endcall {
-  &:before {
-    content: $tgico-endcall; 
-  }
-}
 .tgico-enter {
   &:before {
     content: $tgico-enter; 
@@ -897,6 +892,26 @@
     content: $tgico-videochat; 
   }
 }
+.tgico-volume_down {
+  &:before {
+    content: $tgico-volume_down; 
+  }
+}
+.tgico-volume_mute {
+  &:before {
+    content: $tgico-volume_mute; 
+  }
+}
+.tgico-volume_off {
+  &:before {
+    content: $tgico-volume_off; 
+  }
+}
+.tgico-volume_up {
+  &:before {
+    content: $tgico-volume_up; 
+  }
+}
 .tgico-zoomin {
   &:before {
     content: $tgico-zoomin; 

src/scss/partials/_ico.scss

@@ -78,7 +78,6 @@ $tgico-eats: "\e937";
 $tgico-edit: "\e938";
 $tgico-email: "\e939";
 $tgico-endcall_filled: "\e93a";
-$tgico-endcall: "\e93b";
 $tgico-enter: "\e93c";
 $tgico-eye1: "\e93d";
 $tgico-eye2: "\e93e";
@@ -191,5 +190,9 @@ $tgico-username: "\e9a8";
 $tgico-videocamera_filled: "\e9a9";
 $tgico-videocamera: "\e9aa";
 $tgico-videochat: "\e9ab";
-$tgico-zoomin: "\e9ac";
-$tgico-zoomout: "\e9ad";
+$tgico-volume_down: "\e9ac";
+$tgico-volume_mute: "\e9ad";
+$tgico-volume_off: "\e9ae";
+$tgico-volume_up: "\e9af";
+$tgico-zoomin: "\e9b0";
+$tgico-zoomout: "\e9b1";