Pony.fm/resources/assets/scripts/app/directives/player.coffee

74 lines
1.8 KiB
CoffeeScript
Raw Normal View History

2015-08-31 17:42:21 +02:00
angular.module('ponyfm').directive 'pfmPlayer', () ->
$element = null
restrict: 'E'
templateUrl: '/templates/directives/player.html'
scope: {}
replace: true
compile: (element) ->
$element = element
controller: [
'$scope', 'player', 'auth'
($scope, player, auth) ->
$scope.player = player
$scope.auth = auth.data
$scope.playPause = () ->
$scope.player.playPause()
$scope.playNext = () ->
$scope.player.playNext()
$scope.playPrev = () ->
$scope.player.playPrev()
$scope.seek = (e) ->
$transport = $ '.transport'
percent = ((e.pageX - $transport.offset().left) / $transport.width())
duration = parseFloat($scope.player.currentTrack.duration)
$scope.player.seek percent * duration * 1000
isSliding = false
$slider = $element.find('.volume-slider')
$knob = $element.find('.volume-slider .knob')
$bar = $element.find('.volume-slider .bar')
player.readyDef.done ->
initialY = (180 - (180 * (player.volume / 100))) - 7.5
$knob.css {top: initialY}
moveVolumeSlider = (absoluteY) ->
newY = absoluteY - $bar.offset().top;
maxY = $bar.height() - ($knob.height() / 2) - 8
newY = 0 if newY < 0
newY = maxY if newY > maxY
percent = 100 - ((newY / maxY) * 100)
$scope.player.setVolume percent
$knob.css {top: newY}
$knob.click (e) ->
e.preventDefault()
e.stopPropagation()
$slider.click (e) -> $scope.$apply -> moveVolumeSlider(e.pageY - 8)
$(document).mousemove (e) ->
return if !isSliding
moveVolumeSlider(e.pageY - 8)
$knob.mousedown (e) ->
e.preventDefault()
e.stopPropagation()
isSliding = true
$slider.parent().addClass('keep-open')
$(document).mouseup (e) ->
e.preventDefault()
e.stopPropagation()
isSliding = false
$slider.parent().removeClass('keep-open')
]