cms/app-client/app/components/transcript-component.js
changeset 345 4b66390442fd
parent 257 eba9edbd8f46
child 347 9779512454af
--- a/cms/app-client/app/components/transcript-component.js	Mon Oct 17 14:50:30 2016 +0530
+++ b/cms/app-client/app/components/transcript-component.js	Mon Oct 17 19:51:14 2016 +0530
@@ -6,20 +6,37 @@
 
     player: Ember.inject.service(),
 
+    autoscrollElement : '.corpus-app-container',
+    previousElement: 0,
     autoscroll: true,
-    autoscrollElement : '.corpus-app-container',
     timeout: null,
 
     itemObserver: Ember.observer('player.item', function () {
         this.set('autoscroll', true);
     }),
 
+    didInsertElement: function() {
+        Ember.$('#' + this.elementId).parent().on('scroll', Ember.run.bind(this, this.onScroll));
+    },
+
+    onScroll: function() {
+        this.set('autoscroll', false);
+        Ember.$('#' + this.elementId).parent().off('scroll');
+    },
+
     didUpdate: function() {
+        var self = this;
         var target = Ember.$('.sentence.active');
-        if(this.get('autoscroll') && target.length) {
+        if(this.get('autoscroll') && target.length && target.attr('data-ember-action') !== this.get('previousElement')) {
+            Ember.$('#' + self.elementId).parent().off('scroll');
             Ember.$(this.get('autoscrollElement')).animate({
                 scrollTop: target.offset().top + Ember.$(this.get('autoscrollElement')).scrollTop() - Ember.$(this.get('autoscrollElement')).offset().top - 154
-            }, 150);
+            }, 150, 'swing', function() {
+                setTimeout(function() {
+                    Ember.$('#' + self.elementId).parent().on('scroll', Ember.run.bind(self, self.onScroll));
+                }, 100);
+            });
+            this.set('previousElement', target.attr('data-ember-action'))
         }
     },