From 7a28dcecb066302fd006bfa7e07e27bdc10dfcde Mon Sep 17 00:00:00 2001
From: Adrian Sampson <adrian@radbox.org>
Date: Mon, 8 Aug 2011 16:19:22 -0700
Subject: [PATCH] player improvements: double-click to play; visual indicator

---
 beetsplug/web/static/beets.css     |  4 +++
 beetsplug/web/static/beets.js      | 44 ++++++++++++++++++++++++++++--
 beetsplug/web/templates/index.html |  1 +
 3 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/beetsplug/web/static/beets.css b/beetsplug/web/static/beets.css
index 62b667f66..d81aa879f 100644
--- a/beetsplug/web/static/beets.css
+++ b/beetsplug/web/static/beets.css
@@ -81,6 +81,10 @@ body {
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee));
     color: white;
 }
+#entities ul li .playing {
+    margin-left: 5px;
+    font-size: 0.9em;
+}
 
 #detail {
     position: fixed;
diff --git a/beetsplug/web/static/beets.js b/beetsplug/web/static/beets.js
index d2d59e769..57be64599 100644
--- a/beetsplug/web/static/beets.js
+++ b/beetsplug/web/static/beets.js
@@ -170,13 +170,28 @@ var ItemEntryView = Backbone.View.extend({
     template: _.template($('#item-entry-template').html()),
     events: {
         'click': 'select',
+        'dblclick': 'play'
+    },
+    initialize: function() {
+        this.playing = false;
     },
     render: function() {
         $(this.el).html(this.template(this.model.toJSON()));
+        this.setPlaying(this.playing);
         return this;
     },
     select: function() {
         app.selectItem(this);
+    },
+    play: function() {
+        app.playItem(this.model);
+    },
+    setPlaying: function(val) {
+        this.playing = val;
+        if (val)
+            this.$('.playing').show();
+        else
+            this.$('.playing').hide();
     }
 });
 var ItemDetailView = Backbone.View.extend({
@@ -198,19 +213,27 @@ var ItemDetailView = Backbone.View.extend({
 var AppView = Backbone.View.extend({
     el: $('body'),
     events: {
-        'submit #queryForm': 'querySubmit'
+        'submit #queryForm': 'querySubmit',
     },
     querySubmit: function(ev) {
         ev.preventDefault();
         router.navigate('item/query/' + escape($('#query').val()), true);
     },
     initialize: function() {
-        this.delegateEvents();
+        this.playingItem = null;
+
+        // Not sure why these events won't bind automatically.
+        this.$('audio').bind({
+            'play': _.bind(this.audioPlay, this),
+            'pause': _.bind(this.audioPause, this),
+            'ended': _.bind(this.audioEnded, this)
+        });
     },
     showItems: function(items) {
         $('#results').empty();
         items.each(function(item) {
             var view = new ItemEntryView({model: item});
+            item.entryView = view;
             $('#results').append(view.render().el);
         });
     },
@@ -227,6 +250,23 @@ var AppView = Backbone.View.extend({
         var url = '/item/' + item.get('id') + '/file';
         $('#player audio').attr('src', url);
         $('#player audio').get(0).play();
+
+        if (this.playingItem != null) {
+            this.playingItem.entryView.setPlaying(false);
+        }
+        item.entryView.setPlaying(true);
+        this.playingItem = item;
+    },
+
+    audioPause: function() {
+        this.playingItem.entryView.setPlaying(false);
+    },
+    audioPlay: function() {
+        if (this.playingItem != null)
+            this.playingItem.entryView.setPlaying(true);
+    },
+    audioEnded: function() {
+        this.playingItem.entryView.setPlaying(false);
     }
 });
 var app = new AppView();
diff --git a/beetsplug/web/templates/index.html b/beetsplug/web/templates/index.html
index 4906f0ce3..9ac08d026 100644
--- a/beetsplug/web/templates/index.html
+++ b/beetsplug/web/templates/index.html
@@ -43,6 +43,7 @@
         <!-- Templates. -->
         <script type="text/template" id="item-entry-template">
             <%= title %>
+            <span class="playing">&#9654;</span>
         </script>
         <script type="text/template" id="item-detail-template">
             <span class="artist"><%= artist %></span>