Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2026-02-13 11:54:21 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(dashboard): implement player

Browse source
This commit is contained in:
ZloiY 2017-08-06 15:51:07 +03:00 • committed by tibing
parent 223c13ad99
commit 124f9c15a8
17 changed files with 545 additions and 254 deletions
Download patch file Download diff file Expand all files Collapse all files

92
src/app/pages/dashboard/player/player.component.html
View file

@ -1,58 +1,46 @@
<div class="player">
<div class="player-card-header">
<div class="player-menu">
<i class="ion-navicon"></i>
</div>
<div class="playlist-name">
<span>My Playlist</span>
<div class="header">My Playlist</div>
<div class="body">
<div class="cover">
<img [src]="track.cover">
<div class="details">
<h4>{{ track.name }}</h4>
<span class="artist">{{ track.artist }}</span>
</div>
</div>
<div class="player-cover">
<div class="album-image"></div>
<div class="artist-details">
<span class="artist-name">Kendrick Lamar</span>
<span class="song-name">DNA.</span>
</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="player-progress">
<div class="status"></div>
<div class="timing">
<small class="current">{{ player.currentTime | timing }}</small>
<small class="remaining">- {{ player.duration - player.currentTime | timing }}</small>
</div>
<div class="player-commands">
<div class="prev">
<i class="ion-ios-skipbackward"></i>
</div>
<div class="play">
<i class="ion-ios-play"></i>
</div>
<div class="next">
<i class="ion-ios-skipforward"></i>
</div>
</div>
<div class="player-volume">
<div class="minus" (click)="minus()">
<i class="ion-ios-minus-outline"></i>
</div>
<div class="volume-items">
<div class="volume-item" *ngFor="let v of volume"
(click)="selectedVolume = v"
[class.active]="v < selectedVolume"
[class.selected]="v === selectedVolume"></div>
</div>
<div class="plus" (click)="plus()">
<i class="ion-ios-plus-outline"></i>
</div>
</div>
<div class="player-playlist-commands">
<div class="btn-group btn-group-full-width" data-toggle="buttons">
<label class="btn btn-primary" [class.active]="playlistCommandsModel.left">
<input type="checkbox" [(ngModel)]="playlistCommandsModel.left"/> <i class="ion-plus-round"></i>
</label>
<label class="btn btn-primary" [class.active]="playlistCommandsModel.middle">
<input type="checkbox" [(ngModel)]="playlistCommandsModel.middle"/> <i class="ion-plus-round"></i>
</label>
<label class="btn btn-primary" [class.active]="playlistCommandsModel.right">
<input type="checkbox" [(ngModel)]="playlistCommandsModel.right"/> <i class="ion-plus-round"></i>
</label>
</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 quiet"></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 loud"></i>
</div>
</div>