--- a/cms/app-client/app/components/transcript-component.js	Fri Dec 02 09:33:53 2016 +0100
+++ b/cms/app-client/app/components/transcript-component.js	Fri Dec 02 13:25:08 2016 +0100
@@ -12,14 +12,14 @@
     autoscroll: true,
     timeout: null,
 
-    hasSections: Ember.computed('player', 'player.transcript', function() {
-      var sections = this.get('player.transcript.sections');
+    transcript: Ember.computed.readOnly('player.transcript'),
+    hasSections: Ember.computed('transcript', function() {
+      var sections = this.get('transcript.sections');
       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 () {
@@ -30,6 +30,21 @@
 
     didInsertElement() {
         Ember.$('#' + this.elementId).parent().on('scroll', Ember.run.bind(this, this.onScroll));
+        var intervals = new IntervalTree(this.get('player.model.duration_ms')/2);
+        if(this.get('hasSections')) {
+          this.get('transcript.sections').forEach((section, indexSection) => {
+            section.turns.forEach((turn, indexTurn) => {
+              let sentenceId = `#sentence-${indexSection}-${indexTurn}`;
+              intervals.add(turn.begin ,turn.end , sentenceId/*, this.$(sentenceId)*/);
+            });
+          });
+        } else {
+          this.get('transcript.annotations').forEach((annotation, index) => {
+            let sentenceId = `#sentence-${index}`;
+            intervals.add(annotation.begin ,annotation.end , sentenceId/*, this.$(sentenceId)*/);
+          });
+        }
+        this.set('intervals', intervals);
     },
 
     onScroll() {
@@ -57,10 +72,12 @@
         return;
       }
       var target = intervalList[0];
-      //var target = this.$('.sentence.active');
-      if(previousElement) {
-        previousElement.object.removeClass('active');
-        Ember.$(".fa-play",previousElement.object).show();
+      target.object = this.$(target.id);
+      let previousDomElement = this.$('.sentence.active');
+
+      if(previousDomElement) {
+        previousDomElement.removeClass('active');
+        Ember.$(".fa-play",previousDomElement).show();
       }
       target.object.addClass('active');
       Ember.$(".fa-play",target.object).hide();