--- a/cms/app-client/app/components/transcript-annotation-component.js	Fri Dec 02 00:22:31 2016 +0100
+++ b/cms/app-client/app/components/transcript-annotation-component.js	Fri Dec 02 03:30:51 2016 +0100
@@ -2,7 +2,7 @@
 
 export default Ember.Component.extend({
 
-  classNameBindings: ['isPlaying:active'],
+  // classNameBindings: ['isPlaying:active'],
 
   hasPlayer: Ember.computed.bool('player'),
 
@@ -15,9 +15,16 @@
   literal: Ember.computed.readOnly('annotation.literal'),
   translation: Ember.computed.readOnly('annotation.translation'),
 
-  isPlaying: Ember.computed("hasPlayer","player.progress", "begin", "end", function() {
-    var progress = this.get('player.progress');
-    return this.get('hasPlayer') && progress && (progress >= this.get('begin')) && (progress < this.get('end'));
-  })
+  // isPlaying: Ember.computed("hasPlayer","player.progress", "begin", "end", function() {
+  //   var progress = this.get('player.progress');
+  //   return this.get('hasPlayer') && progress && (progress >= this.get('begin')) && (progress < this.get('end'));
+  // }),
+
+  didInsertElement: function() {
+    if(this.get('hasPlayer') && this.get('intervals')) {
+      this.get('intervals').add(this.get('begin'), this.get('end'), this.get('elementId'), this.$());
+    }
+  },
+
 
 });

--- 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);
       }
     }),
 

--- a/cms/app-client/app/components/transcript-turn-component.js	Fri Dec 02 00:22:31 2016 +0100
+++ b/cms/app-client/app/components/transcript-turn-component.js	Fri Dec 02 03:30:51 2016 +0100
@@ -4,15 +4,22 @@
   tagName: 'li',
 
   classNames: ['sentence'],
-  classNameBindings: ['isPlaying:active'],
+  // classNameBindings: ['isPlaying:active'],
 
   begin: Ember.computed.readOnly('turn.begin'),
   end: Ember.computed.readOnly('turn.end'),
   title: Ember.computed.readOnly('turn.title'),
   annotations: Ember.computed.readOnly('turn.annotations'),
 
-  isPlaying: Ember.computed("player.progress", "begin", "end", function() {
-    var progress = this.get('player.progress');
-    return progress && progress >= this.get('begin') && progress < this.get('end');
-  })
+  // isPlaying: Ember.computed("player.progress", "begin", "end", function() {
+  //   var progress = this.get('player.progress');
+  //   return progress && progress >= this.get('begin') && progress < this.get('end');
+  // }),
+
+  didInsertElement: function() {
+    if(this.get('intervals')) {
+      this.get('intervals').add(this.get('begin'), this.get('end'), this.get('elementId'), this.$());
+    }
+  },
+
 });

--- a/cms/app-client/app/templates/components/transcript-component.hbs	Fri Dec 02 00:22:31 2016 +0100
+++ b/cms/app-client/app/templates/components/transcript-component.hbs	Fri Dec 02 03:30:51 2016 +0100
@@ -8,12 +8,12 @@
 <div class="transcript">
   {{#if hasSections }}
     {{#each player.transcript.sections as |section|}}
-      {{transcript-section-component section=section player=player play=(action 'play')}}
+      {{transcript-section-component section=section player=player play=(action 'play') intervals=intervals}}
     {{/each}}
   {{else}}
     <ol class="annotations">
     {{#each player.transcript.annotations as |annotation|}}
-      {{transcript-annotation-component annotation=annotation player=player play=(action 'play') tagName='li' class='sentence'}}
+      {{transcript-annotation-component annotation=annotation player=player intervals=intervals play=(action 'play') tagName='li' class='sentence'}}
     {{/each}}
     </ol>
   {{/if}}

--- a/cms/app-client/app/templates/components/transcript-section-component.hbs	Fri Dec 02 00:22:31 2016 +0100
+++ b/cms/app-client/app/templates/components/transcript-section-component.hbs	Fri Dec 02 03:30:51 2016 +0100
@@ -1,7 +1,7 @@
 <h3>{{title}}</h3>
 <ol class="annotations">
   {{#each turns as |turn|}}
-  {{transcript-turn-component turn=turn player=player play=(action play)}}
+  {{transcript-turn-component turn=turn player=player intervals=intervals play=(action play)}}
   {{/each}}
 </ol>
 

--- a/cms/app-client/app/templates/components/transcript-turn-component.hbs	Fri Dec 02 00:22:31 2016 +0100
+++ b/cms/app-client/app/templates/components/transcript-turn-component.hbs	Fri Dec 02 03:30:51 2016 +0100
@@ -1,6 +1,4 @@
-{{#unless isPlaying}}
-  <i class="fa fa-play" {{action play begin}}>Play</i>
-{{/unless}}
+<i class="fa fa-play" {{action play begin}}>Play</i>
 {{#if title}}<span class="title">{{title}}</span>{{/if}}
 {{#each annotations as |annotation|}}
 {{transcript-annotation-component annotation=annotation}}

--- a/cms/app-client/ember-cli-build.js	Fri Dec 02 00:22:31 2016 +0100
+++ b/cms/app-client/ember-cli-build.js	Fri Dec 02 03:30:51 2016 +0100
@@ -47,6 +47,8 @@
       development: 'bower_components/urijs/src/URI.js',
       production:  'bower_components/urijs/src/URI.min.js'
     });
+    app.import('bower_components/interval-tree2/dist/interval-tree.js');
+
 
     //shims
     app.import('vendor/shims/ammaps.js', {
@@ -69,6 +71,11 @@
         'urijs': [ 'default' ]
       }
     });
+    app.import('vendor/shims/interval-tree.js', {
+      exports: {
+        'interval-tree': [ 'default' ]
+      }
+    });
 
     //social-share-kit
     app.import('bower_components/social-share-kit/dist/js/social-share-kit.js');

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/vendor/shims/interval-tree.js	Fri Dec 02 03:30:51 2016 +0100
@@ -0,0 +1,9 @@
+(function() {
+  function vendorModule() {
+    'use strict';
+
+    return { 'default': self['IntervalTree'] };
+  }
+
+  define('interval-tree', [], vendorModule);
+})();