ngx-admin/src/app/pages/dashboard/rooms/player/player.component.html

<div class="header">My Playlist</div>

<div class="body">

  <div class="track-info">
    <div class="cover" style.background-image="url('{{track.cover}}')"></div>
    <div class="details">
      <h4>{{ track.name }}</h4>
      <span>{{ track.artist }}</span>
    </div>
  </div>

  <div class="progress-wrap">
    <input dir="ltr" type="range" class="progress" [value]="getProgress()" min="0" max="100" step="0.01"
           (input)="setProgress(duration.value)" #duration>
    <div class="progress-foreground" [style.width.%]="getProgress()"></div>
  </div>

  <div class="timing">
    <small class="current">{{ player.currentTime | timing }}</small>
    <small class="remaining">- {{ player.duration - player.currentTime | timing }}</small>
  </div>

  <div class="controls">
    <i class="nb-shuffle shuffle" [class.active]="shuffle" (click)="toggleShuffle()"></i>
    <i class="nb-skip-backward prev" (click)="prev()"></i>
    <i class="play" [class.nb-play]="player.paused" [class.nb-pause]="!player.paused" (click)="playPause()"></i>
    <i class="nb-skip-forward next" (click)="next()"></i>
    <i class="nb-loop loop" [class.active]="player.loop" (click)="toggleLoop()"></i>
  </div>

</div>

<div class="footer">

  <div class="volume">
    <i class="nb-volume-mute"></i>
    <div class="progress-wrap">
      <input type="range" class="progress" [value]="getVolume()" max="100"
             (input)="setVolume(volume.value)" #volume>
      <div class="progress-foreground" [style.width.%]="getVolume()"></div>
    </div>
    <i class="nb-volume-high"></i>
  </div>

</div>