diff -r 70451a4dc9ae -r 4b66390442fd cms/app-client/app/components/transcript-component.js --- 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')) } },