Repeat playlists

This commit is contained in:
Josef Citrine 2016-05-16 21:43:55 +01:00
parent 2d1e7448f1
commit 9f01a0cbc5
4 changed files with 27 additions and 12 deletions

View file

@ -12,7 +12,7 @@
</a> </a>
</li> </li>
<li ng-class="{disabled: !player.canGoNext}"><a pfm-eat-click ng-click="playNext()" class="next" href="#"><i class="icon-fast-forward"></i></a></li> <li ng-class="{disabled: !player.canGoNext}"><a pfm-eat-click ng-click="playNext()" class="next" href="#"><i class="icon-fast-forward"></i></a></li>
<li><a ng-class="{active: player.repeatOnce}" pfm-eat-click ng-click="toggleRepeat()" class="repeat" href="#"><i class="icon-repeat"></i></a></li> <li><a ng-class="{active: player.repeatState != 0}" pfm-eat-click ng-click="toggleRepeat()" class="repeat" href="#"><i class="icon-repeat"></i><span>{{ repeatText }}</span></a></li>
<li class="volume"> <li class="volume">
<a pfm-eat-click ng-click="" class="volume" href="#"> <a pfm-eat-click ng-click="" class="volume" href="#">
<i class="icon-volume-up"></i> <i class="icon-volume-up"></i>

View file

@ -30,6 +30,7 @@ module.exports = angular.module('ponyfm').directive 'pfmPlayer', () ->
($scope, player, auth) -> ($scope, player, auth) ->
$scope.player = player $scope.player = player
$scope.auth = auth.data $scope.auth = auth.data
$scope.repeatText = ''
$scope.playPause = () -> $scope.playPause = () ->
$scope.player.playPause() $scope.player.playPause()
@ -42,6 +43,11 @@ module.exports = angular.module('ponyfm').directive 'pfmPlayer', () ->
$scope.toggleRepeat = () -> $scope.toggleRepeat = () ->
$scope.player.toggleRepeat() $scope.player.toggleRepeat()
if $scope.player.repeatState == 2
$scope.repeatText = '1'
else
$scope.repeatText = ''
$scope.seek = (e) -> $scope.seek = (e) ->
$transport = $ '.transport' $transport = $ '.transport'
percent = ((e.pageX - $transport.offset().left) / $transport.width()) percent = ((e.pageX - $transport.offset().left) / $transport.width())

View file

@ -44,7 +44,10 @@ module.exports = angular.module('ponyfm').factory('player', [
track.progress = (self.currentSound.position / (track.duration * 1000)) * 100 track.progress = (self.currentSound.position / (track.duration * 1000)) * 100
onfinish: () -> $rootScope.safeApply -> onfinish: () -> $rootScope.safeApply ->
if self.repeatOnce if self.repeatState == 2
# Track repeat
# Playlist repeat is handled
# in self.playNext()
self.currentSound.play() self.currentSound.play()
else else
track.isPlaying = false track.isPlaying = false
@ -82,7 +85,7 @@ module.exports = angular.module('ponyfm').factory('player', [
readyDef: readyDef.promise() readyDef: readyDef.promise()
canGoPrev: false canGoPrev: false
canGoNext: false canGoNext: false
repeatOnce: false repeatState: 0
playPause: () -> playPause: () ->
return if !self.ready return if !self.ready
@ -94,16 +97,19 @@ module.exports = angular.module('ponyfm').factory('player', [
self.currentSound.pause() self.currentSound.pause()
playNext: () -> playNext: () ->
return if !self.canGoNext return if !self.canGoNext && self.repeatState != 1
self.currentSound.stop() if self.currentSound != null self.currentSound.stop() if self.currentSound != null
self.playlistIndex++ self.playlistIndex++
if self.playlistIndex >= self.playlist.length if self.playlistIndex >= self.playlist.length
if self.repeatState != 1
self.playlist.length = 0 self.playlist.length = 0
self.currentTrack = null self.currentTrack = null
self.currentSong = null self.currentSong = null
self.isPlaying = false self.isPlaying = false
return return
else
self.playlistIndex = 0
play self.playlist[self.playlistIndex] play self.playlist[self.playlistIndex]
updateCanGo() updateCanGo()
@ -125,7 +131,10 @@ module.exports = angular.module('ponyfm').factory('player', [
updateCanGo() updateCanGo()
toggleRepeat: () -> toggleRepeat: () ->
self.repeatOnce = !self.repeatOnce if self.repeatState >= 2
self.repeatState = 0
else
self.repeatState++
seek: (progress) -> seek: (progress) ->
return if !self.currentSound return if !self.currentSound

View file

@ -167,9 +167,9 @@ body.is-logged {
} }
} }
> a.active { > a.repeat.active {
text-decoration: none; text-decoration: none;
background: darken(#eee, 10%); background: darken(#eee, 5%);
color: #000; color: #000;
} }