Pony.fm/public/templates/directives/player.html

40 lines
2.2 KiB
HTML
Raw Normal View History

2013-08-13 07:11:14 +02:00
<div class="track-player" ng-show="player.isPlaying">
2015-10-25 03:35:37 +01:00
<ul class="buttons">
<li class="status">
<strong>{{player.currentTrack.progressSeconds | secondsDisplay}}</strong> /
<strong>{{player.currentTrack.duration | secondsDisplay}}</strong>
</li>
2016-07-19 17:12:51 +02:00
<li ng-class="{disabled: !player.canGoPrev}"><a pfm-eat-click ng-click="playPrev()" class="previous" href="#"><i class="material-icons">skip_previous</i></a></li>
2015-10-25 03:35:37 +01:00
<li>
<a pfm-eat-click ng-click="playPause()" class="play" href="#">
<i class="material-icons" ng-if="!player.currentTrack.isPlaying">play_arrow</i>
<i class="material-icons" ng-if="player.currentTrack.isPlaying">pause</i>
2015-10-25 03:35:37 +01:00
</a>
</li>
2016-07-19 17:12:51 +02:00
<li ng-class="{disabled: !player.canGoNext}"><a pfm-eat-click ng-click="playNext()" class="next" href="#"><i class="material-icons">skip_next</i></a></li>
<li><a ng-class="{active: player.repeatState != 0}" pfm-eat-click ng-click="toggleRepeat()" class="repeat" href="#"><i class="material-icons">{{ repeatIcon }}</i></a></li>
2015-10-25 03:35:37 +01:00
<li class="volume">
<a pfm-eat-click ng-click="" class="volume" href="#">
<i class="material-icons">{{ player.volumeIcon }}</i>
2015-10-25 03:35:37 +01:00
</a>
<div class="volume-slider">
<div class="bar"><a href="#" class="knob">&nbsp;</a></div>
</div>
</li>
</ul>
<div class="image">
<div class="loader" ng-class="{showing: player.currentTrack.loadingProgress == 0}"><i class="material-icons">autorenew</i></div>
<img pfm-src-loader="player.currentTrack.covers.small" pfm-src-size="small" />
2015-10-25 03:35:37 +01:00
</div>
<div class="inner">
<div class="title">
<span class="song"><a href="{{player.currentTrack.url}}">{{player.currentTrack.title}}</a></span>
<span class="artist"><a href="{{player.currentTrack.user.url}}">{{player.currentTrack.user.name}}</a></span>
</div>
<div class="transport" ng-click="seek($event)">
<div class="bar" pfm-progress-bar="player.currentTrack.progress"></div>
<div class="loader-bar" pfm-progress-bar="player.currentTrack.loadingProgress"></div>
</div>
</div>
2013-09-01 07:13:51 +02:00
</div>