diff -r 3a32d2f57429 -r a7a333c0b1eb cms/app-client/app/templates/components/transcript-component.hbs
--- 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}}