--- 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();

--- a/cms/app-client/app/components/transcript-turn-component.js	Fri Dec 02 09:33:53 2016 +0100
+++ b/cms/app-client/app/components/transcript-turn-component.js	Fri Dec 02 13:25:08 2016 +0100
@@ -4,18 +4,12 @@
   tagName: 'li',
 
   classNames: ['sentence'],
-  // 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');
-  // }),
-
   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/styles/components/transcript-component.scss	Fri Dec 02 09:33:53 2016 +0100
+++ b/cms/app-client/app/styles/components/transcript-component.scss	Fri Dec 02 13:25:08 2016 +0100
@@ -146,7 +146,7 @@
     width: 24px;
     height: 24px;
     line-height: 20px;
-    left: 0;
+    left: 2.5px;
     cursor: pointer;
     opacity: 1;
     color: $corpus-black;

--- a/cms/app-client/app/templates/components/transcript-component.hbs	Fri Dec 02 09:33:53 2016 +0100
+++ b/cms/app-client/app/templates/components/transcript-component.hbs	Fri Dec 02 13:25:08 2016 +0100
@@ -1,19 +1,78 @@
 <h2>
-    <span class="original">{{player.transcript.title.original}}</span>
-{{#if player.transcript.title.translation}}
-    <span class="translation">{{player.transcript.title.translation}}</span>
+    <span class="original">{{transcript.title.original}}</span>
+{{#if transcript.title.translation}}
+    <span class="translation">{{transcript.title.translation}}</span>
 {{/if}}
 </h2>
-
+{{!-- This has been tested using sub-components (sections, turns, annotations) but performances were too bad...--}}
 <div class="transcript">
   {{#if hasSections }}
-    {{#each player.transcript.sections as |section|}}
-      {{transcript-section-component section=section player=player play=(action 'play') intervals=intervals}}
+    {{#each transcript.sections as |section indexSection|}}
+      <div>
+        <h3>{{section.title}}</h3>
+        <ol class="annotations">
+        {{#each section.turns as |turn indexTurn|}}
+          <li class="sentence" id="sentence-{{indexSection}}-{{indexTurn}}">
+            <i class="fa fa-play" {{action 'play' begin}}>Play</i>
+            {{#if turn.title}}<span class="title">{{turn.title}}</span>{{/if}}
+            {{#each turn.annotations as |annotation|}}
+            <div>
+              <div class="fragment">
+                {{#if annotation.original}}
+                <p class="original">
+                  {{#if annotation.speaker}}<span class="speaker">{{annotation.speaker}} :</span>{{/if}}
+                  {{annotation.original}}
+                </p>
+                {{/if}}
+                {{#if annotation.literal}}
+                <div class="words">
+                  {{#each annotation.literal as |word|}}
+                    <div class="word">
+                      <p class="original">{{word.original}}</p>
+                      <p class="translation">{{word.translation}}</p>
+                    </div>
+                  {{/each}}
+                </div>
+                {{/if}}
+                {{#if annotation.translation}}
+                  <p class="translation">{{annotation.translation}}</p>
+                {{/if}}
+              </div>
+            </div>
+            {{/each}}
+          </li>
+        {{/each}}
+        </ol>
+      </div>
     {{/each}}
   {{else}}
     <ol class="annotations">
-    {{#each player.transcript.annotations as |annotation|}}
-      {{transcript-annotation-component annotation=annotation player=player intervals=intervals play=(action 'play') tagName='li' class='sentence'}}
+    {{#each transcript.annotations as |annotation index|}}
+      <li class="sentence" id="sentence-{{index}}">
+        <i class="fa fa-play" {{action 'play' annotation.begin}}>Play</i>
+        {{#if annotation.title}}<span class="title">{{annotation.title}}</span>{{/if}}
+        <div class="fragment">
+          {{#if annotation.original}}
+          <p class="original">
+            {{#if annotation.speaker}}<span class="speaker">{{annotation.speaker}} :</span>{{/if}}
+            {{annotation.original}}
+          </p>
+          {{/if}}
+          {{#if annotation.literal}}
+          <div class="words">
+            {{#each annotation.literal as |word|}}
+              <div class="word">
+                <p class="original">{{word.original}}</p>
+                <p class="translation">{{word.translation}}</p>
+              </div>
+            {{/each}}
+          </div>
+          {{/if}}
+          {{#if annotation.translation}}
+            <p class="translation">{{annotation.translation}}</p>
+          {{/if}}
+        </div>
+      </li>
     {{/each}}
     </ol>
   {{/if}}