--- a/cms/app-client/app/components/transcript-component.js	Fri Dec 02 00:22:31 2016 +0100
+++ b/cms/app-client/app/components/transcript-component.js	Fri Dec 02 03:30:51 2016 +0100
@@ -1,4 +1,5 @@
 import Ember from 'ember';
+import IntervalTree from 'interval-tree';
 
 export default Ember.Component.extend({
 
@@ -16,17 +17,22 @@
       return sections && sections.length > 0;
     }),
 
+    didReceiveAttrs() {
+      this._super(...arguments);
+      this.set('intervals', new IntervalTree(this.get('player.model.duration_ms')/2));
+    },
+
     itemObserver: Ember.observer('player.item', function () {
       if ( !(this.get('isDestroyed') || this.get('isDestroying')) ) {
           this.set('autoscroll', true);
       }
     }),
 
-    didInsertElement: function() {
+    didInsertElement() {
         Ember.$('#' + this.elementId).parent().on('scroll', Ember.run.bind(this, this.onScroll));
     },
 
-    onScroll: function() {
+    onScroll() {
         if ( !(this.get('isDestroyed') || this.get('isDestroying')) ) {
           this.set('autoscroll', false);
         }
@@ -37,17 +43,39 @@
 
     scroll: Ember.observer('player.progress', function() {
       var self = this;
-      var target = this.$('.sentence.active');
-      if(this.get('autoscroll') && target.length && target.attr('id') !== this.get('previousElement')) {
+      var progress = this.get('player.progress');
+      var previousElement = this.get('previousElement');
+      if(previousElement && progress >= previousElement.start && progress < previousElement.end) {
+        return;
+      }
+      var intervals = this.get('intervals');
+      if(!intervals) {
+        return;
+      }
+      var intervalList = intervals.search(progress);
+      if(intervalList.length === 0) {
+        return;
+      }
+      var target = intervalList[0];
+      //var target = this.$('.sentence.active');
+      if(previousElement) {
+        previousElement.object.removeClass('active');
+        Ember.$(".fa-play",previousElement.object).show();
+      }
+      target.object.addClass('active');
+      Ember.$(".fa-play",target.object).hide();
+
+
+      if(this.get('autoscroll') && target.object.length && (!previousElement || target.id !== previousElement.id)) {
           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
+              scrollTop: target.object.offset().top + Ember.$(this.get('autoscrollElement')).scrollTop() - Ember.$(this.get('autoscrollElement')).offset().top - 154
           }, 150, 'swing', function() {
               setTimeout(function() {
                   Ember.$('#' + self.elementId).parent().on('scroll', Ember.run.bind(self, self.onScroll));
               }, 100);
           });
-          this.set('previousElement', target.attr('id'));
+          this.set('previousElement', target);
       }
     }),