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:
parent
84e1af48f6
commit
73e4e55d92
@ -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' }); }
|
||||
}
|
||||
});
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user