diff -r 6a296e92887f -r 686926d132ff cms/app-client/app/components/transcript-component.js
--- a/cms/app-client/app/components/transcript-component.js	Fri Dec 02 15:30:16 2016 +0100
+++ b/cms/app-client/app/components/transcript-component.js	Fri Dec 02 17:22:16 2016 +0100
@@ -3,107 +3,114 @@
 
 export default Ember.Component.extend({
 
-    classNames: ['transcript-component'],
+  classNames: ['transcript-component'],
+
+  player: Ember.inject.service(),
 
-    player: Ember.inject.service(),
+  autoscrollElement: '.corpus-app-container',
+  previousElement: 0,
+  autoscroll: true,
+  timeout: null,
 
-    autoscrollElement : '.corpus-app-container',
-    previousElement: 0,
-    autoscroll: true,
-    timeout: null,
+  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);
+  },
 
-    transcript: Ember.computed.readOnly('player.transcript'),
-    hasSections: Ember.computed('transcript', function() {
-      var sections = this.get('transcript.sections');
-      return sections && sections.length > 0;
-    }),
+  itemObserver: Ember.observer('player.item', function () {
+    if (!(this.get('isDestroyed') || this.get('isDestroying'))) {
+      this.set('autoscroll', true);
+    }
+  }),
 
-    didReceiveAttrs() {
-      this._super(...arguments);
-    },
-
-    itemObserver: Ember.observer('player.item', function () {
-      if ( !(this.get('isDestroyed') || this.get('isDestroying')) ) {
-          this.set('autoscroll', true);
-      }
-    }),
+  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);
+    this.get('player').set('transcriptLoading', false);
+  },
 
-    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);
-        this.get('player').set('transcriptLoading', false);
-    },
+  onScroll() {
+    if (!(this.get('isDestroyed') || this.get('isDestroying'))) {
+      this.set('autoscroll', false);
+    }
+    if (this.elementId) {
+      Ember.$('#' + this.elementId).parent().off('scroll');
+    }
+  },
+
+  scroll: Ember.observer('player.progress', function () {
+    var self = this;
+    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;
+    }
+
+    let previousDomElement = this.$('.sentence.active');
 
-    onScroll() {
-        if ( !(this.get('isDestroyed') || this.get('isDestroying')) ) {
-          this.set('autoscroll', false);
-        }
-        if(this.elementId) {
-          Ember.$('#' + this.elementId).parent().off('scroll');
-        }
-    },
+    if (previousDomElement) {
+      previousDomElement.removeClass('active');
+      Ember.$(".fa-play", previousDomElement).show();
+    }
 
-    scroll: Ember.observer('player.progress', function() {
-      var self = this;
-      var progress = this.get('player.progress');
-      var previousElement = this.get('previousElement');
-      if(previousElement && progress >= previousElement.start && progress < previousElement.end) {
-        return;
+    var target = null;
+    intervalList.forEach(interval => {
+      let obj = this.$(interval.id);
+      obj.addClass('active');
+      Ember.$(".fa-play", obj).hide();
+      if (!target) {
+        target = interval;
+        target.object = obj;
       }
-      var intervals = this.get('intervals');
-      if(!intervals) {
-        return;
-      }
-      var intervalList = intervals.search(progress);
-      if(intervalList.length === 0) {
-        return;
-      }
-      var target = intervalList[0];
-      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();
+    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.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);
+    }
+  }),
 
 
-      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.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);
-      }
-    }),
+  actions: {
 
-
-    actions: {
-
-        play: function(progress) {
-            this.get('player').trigger('progressupdate', progress);
-            this.get('player').set('playing', true);
-        }
+    play: function (progress) {
+      this.get('player').trigger('progressupdate', progress);
+      this.get('player').set('playing', true);
     }
+  }
 
 });