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');
|
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'
|
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
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user