1
0
mirror of https://github.com/danbee/mpd-client synced 2025-03-04 08:39:09 +00:00

Add controls and current playing style.

This commit is contained in:
Dan Barber 2013-10-17 18:21:17 +01:00
parent 84e1af48f6
commit 73e4e55d92
3 changed files with 34 additions and 6 deletions

View File

@ -5,3 +5,13 @@ App.QueueRoute = Ember.Route.extend({
return Ember.$.getJSON('/api/queue'); return Ember.$.getJSON('/api/queue');
} }
}); });
App.ControlsController = Ember.Controller.extend({
actions: {
previous: function() { return Ember.$.ajax('/api/control/previous', { type: 'PUT' }); },
play: function() { return Ember.$.ajax('/api/control/play', { type: 'PUT' }); },
pause: function() { return Ember.$.ajax('/api/control/pause', { type: 'PUT' }); },
stop: function() { return Ember.$.ajax('/api/control/stop', { type: 'PUT' }); },
next: function() { return Ember.$.ajax('/api/control/next', { type: 'PUT' }); }
}
});

View File

@ -1,15 +1,17 @@
require './models/mpd_connection' require './models/mpd_connection'
class Song < Struct.new(:artist, :album, :title) class Song < Struct.new(:artist, :album, :title, :current)
def initialize(song) def initialize(song, current: false)
@song = song @song = song
self.artist = song.artist self.artist = song.artist
self.album = song.album self.album = song.album
self.title = song.title self.title = song.title
self.current = current
end end
def self.queue def self.queue
MPDConnection.mpd.queue.map { |song| self.new(song) } current_song = MPDConnection.mpd.status[:songid]
MPDConnection.mpd.queue.map { |song| self.new(song, current: (song.id == current_song)) }
end end
end end

View File

@ -2,6 +2,11 @@
<html> <html>
<head> <head>
<title>MPD Client</title> <title>MPD Client</title>
<style>
#queue .current {
font-weight: bold;
}
</style>
</head> </head>
<body> <body>
@ -9,17 +14,28 @@
<script type="text/x-handlebars" data-template-name="application"> <script type="text/x-handlebars" data-template-name="application">
<h1>MPD Client</h1> <h1>MPD Client</h1>
{{ outlet }} {{ outlet }}
{{ render "controls" }}
</script> </script>
<script type="text/x-handlebars" data-template-name="queue"> <script type="text/x-handlebars" data-template-name="queue">
<h2>Queue</h2> <h2>Queue</h2>
<ul> <ul id="queue">
{{#each song in controller}} {{#each controller}}
<li>{{ song.artist }} - {{ song.title }}</li> <li {{bindAttr class="current"}}>{{ artist }} - {{ title }}</li>
{{/each}} {{/each}}
</ul> </ul>
</script> </script>
<script type="text/x-handlebars" data-template-name="controls">
<div id="controls">
<button {{ action "previous" }}>Previous</button>
<button {{ action "play" }}>Play</button>
<button {{ action "pause" }}>Pause</button>
<button {{ action "stop" }}>Stop</button>
<button {{ action "next" }}>Next</button>
</div>
</script>
<%= javascript_tag 'mpd-client' %> <%= javascript_tag 'mpd-client' %>
</body> </body>
</html> </html>