mirror of
https://github.com/akveo/ngx-admin.git
synced 2026-02-03 23:21:48 +01:00
46 lines
1.5 KiB
HTML
46 lines
1.5 KiB
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 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>
|