# HG changeset patch
# User Chloe Laisne <chloe.laisne@gmail.com>
# Date 1476528307 -19800
# Node ID f076ddd29e13d5d6386574cde17be306f4a1acea
# Parent  9247384cb264e115a5e46548e581f46b35104709
Playlist scroll to show playing track in view always

diff -r 9247384cb264 -r f076ddd29e13 cms/app-client/app/components/playlist-component.js
--- a/cms/app-client/app/components/playlist-component.js	Fri Oct 14 19:58:09 2016 +0200
+++ b/cms/app-client/app/components/playlist-component.js	Sat Oct 15 16:15:07 2016 +0530
@@ -20,6 +20,22 @@
         }
     }).on('init'),
 
+    playerItemObserver: Ember.observer('player.item', function() {
+        if(this.$() && this.get('player').get('item')) {
+            var ul = this.$().find('ul');
+            var li = this.$().find('li#' + this.get('player').get('item').replace('.', '\\.').replace('/', '\\/'));
+            if(li.offset().top - ul.offset().top < 0) {
+                ul.animate({
+                    'scrollTop': ul.scrollTop() + li.offset().top - ul.offset().top
+                });
+            } else if(li.offset().top + li.outerHeight() - ul.offset().top > ul.outerHeight()) {
+                ul.animate({
+                    'scrollTop': ul.scrollTop() + li.offset().top  + li.outerHeight() - ul.offset().top  - ul.height()
+                });
+            }
+        }
+    }),
+
     init: function() {
         this._super(...arguments);
     },
diff -r 9247384cb264 -r f076ddd29e13 cms/app-client/app/styles/components/playlist-component.scss
--- a/cms/app-client/app/styles/components/playlist-component.scss	Fri Oct 14 19:58:09 2016 +0200
+++ b/cms/app-client/app/styles/components/playlist-component.scss	Sat Oct 15 16:15:07 2016 +0530
@@ -18,6 +18,7 @@
     font-size: 0px;
     overflow-y: scroll;
     background-color: $light-white;
+    position: relative;
 }
 
 .playlist-component ul li {