danbarber/mpd-client
1
0
Fork 0
mirror of https://github.com/danbee/mpd-client synced 2025-03-04 08:39:09 +00:00
Code Issues Releases Wiki Activity

WIP: Eventsource works. Need to sort playing status.

Browse Source
This commit is contained in:
Dan Barber 2014-03-20 12:17:47 +00:00
parent 3daa289a78
commit 0ae60095a4
4 changed files with 31 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
assets/js/controllers/queue.controller.js
View File

@ -1,5 +1,11 @@
mpdClient.controller('queue', function ($rootScope, $scope, $resource) { mpdClient.controller('queue', function ($rootScope, $scope, $resource, serverEvents) {
var Queue = $resource('/api/queue') var Queue = $resource('/api/queue')
$rootScope.queueSongs = Queue.query() $rootScope.queueSongs = Queue.query()
$scope.updateQueue = function(data) {
$rootScope.queueSongs = data
}
serverEvents.onUpdateQueue($scope.updateQueue)
}) })

13
assets/js/controllers/transport.controller.js
View File

@ -1,9 +1,7 @@
mpdClient.controller('transport', function ($rootScope, $scope, $http, serverEvents) { mpdClient.controller('transport', function ($rootScope, $scope, $http, serverEvents) {
var Status = $http({ method: 'GET', url: '/api/status' }) var Status = $http({ method: 'GET', url: '/api/status' })
$rootScope.status = { time: [] } $rootScope.status = {}
serverEvents.onUpdateStatus($scope.updateStatus)
Status.success(function (data, status, headers, config) { Status.success(function (data, status, headers, config) {
$scope.updateStatus(data) $scope.updateStatus(data)
@ -11,6 +9,12 @@ mpdClient.controller('transport', function ($rootScope, $scope, $http, serverEve
$scope.updateStatus = function(data) { $scope.updateStatus = function(data) {
$rootScope.status = data $rootScope.status = data
if (data.time) { $scope.updateTime(data.time) }
}
$scope.updateTime = function(data) {
$rootScope.elapsedTime = data[0]
$rootScope.totalTime = data[1]
} }
$scope.sendCommand = function (command) { $scope.sendCommand = function (command) {
@ -20,4 +24,7 @@ mpdClient.controller('transport', function ($rootScope, $scope, $http, serverEve
$scope.playing = function () { $scope.playing = function () {
return $scope.status.state == 'play' return $scope.status.state == 'play'
} }
serverEvents.onUpdateStatus($scope.updateStatus)
serverEvents.onUpdateTime($scope.updateTime)
}) })

17
assets/js/services/server-events.service.js
View File

@ -1,8 +1,15 @@
mpdClient.factory('serverEvents', function () { mpdClient.factory('serverEvents', function ($rootScope) {
var events = new EventSource('/api/stream'), var events = new EventSource('/api/stream'),
serverEvents = { serverEvents = {
onUpdateQueue: function (callback) {
this.updateQueueCallback = callback
},
onUpdateStatus: function (callback) { onUpdateStatus: function (callback) {
this.onUpdateStatusCallback = callback this.updateStatusCallback = callback
},
onUpdateTime: function (callback) {
this.updateTimeCallback = callback
} }
} }
@ -10,13 +17,13 @@ mpdClient.factory('serverEvents', function () {
response = JSON.parse(e.data); response = JSON.parse(e.data);
switch (response.type) { switch (response.type) {
case 'status': case 'status':
serverEvents.onUpdateStatusCallback(response.data) $rootScope.$apply(function () { serverEvents.updateStatusCallback(response.data) })
break; break;
case 'queue': case 'queue':
$scope.$emit('update:queue', response.data) $rootScope.$apply(function () { serverEvents.updateQueueCallback(response.data) })
break; break;
case 'time': case 'time':
$scope.$emit('update:time', response.data); $rootScope.$apply(function () { serverEvents.updateTimeCallback(response.data) })
break; break;
} }
} }

4
views/index.erb
View File

@ -25,8 +25,8 @@
</div> </div>
<div id="transport" ng-controller="transport"> <div id="transport" ng-controller="transport">
<div class="scrubber"> <div class="scrubber">
<div class="time elapsed">{{ status.time[0] | formatLength }}</div> <div class="time elapsed">{{ elapsedTime | formatLength }}</div>
<div class="time total">{{ status.time[1] | formatLength }}</div> <div class="time total">{{ totalTime | formatLength }}</div>
<div class="track"> <div class="track">
</div> </div>
</div> </div>