Playlist scroll to show playing track in view always
authorChloe Laisne <chloe.laisne@gmail.com>
Sat, 15 Oct 2016 16:15:07 +0530
changeset 336 f076ddd29e13
parent 335 9247384cb264
child 337 2ea18460d5e3
Playlist scroll to show playing track in view always
cms/app-client/app/components/playlist-component.js
cms/app-client/app/styles/components/playlist-component.scss
--- 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);
     },
--- 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 {