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');
}
});
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'
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
self.artist = song.artist
self.album = song.album
self.title = song.title
self.current = current
end
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

View File

@ -2,6 +2,11 @@
<html>
<head>
<title>MPD Client</title>
<style>
#queue .current {
font-weight: bold;
}
</style>
</head>
<body>
@ -9,17 +14,28 @@
<script type="text/x-handlebars" data-template-name="application">
<h1>MPD Client</h1>
{{ outlet }}
{{ render "controls" }}
</script>
<script type="text/x-handlebars" data-template-name="queue">
<h2>Queue</h2>
<ul>
{{#each song in controller}}
<li>{{ song.artist }} - {{ song.title }}</li>
<ul id="queue">
{{#each controller}}
<li {{bindAttr class="current"}}>{{ artist }} - {{ title }}</li>
{{/each}}
</ul>
</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' %>
</body>
</html>