--- a/cms/app-client/app/components/transcript-component.js	Tue Aug 16 00:16:08 2016 +0200
+++ b/cms/app-client/app/components/transcript-component.js	Wed Aug 17 15:30:19 2016 +0200
@@ -16,9 +16,10 @@
 
     didUpdate: function() {
         var self = this;
-        if(this.get('autoscroll')) {
+        var target = Ember.$('.sentence.active');
+        if(this.get('autoscroll') && target.length) {
             Ember.$(this.get('autoscrollElement')).animate({
-                scrollTop: Ember.$('.sentence.active').offset().top + Ember.$(this.get('autoscrollElement')).scrollTop() - Ember.$(this.get('autoscrollElement')).offset().top - 154
+                scrollTop: target.offset().top + Ember.$(this.get('autoscrollElement')).scrollTop() - Ember.$(this.get('autoscrollElement')).offset().top - 154
             }, 150);
         }
     },

--- a/cms/app-client/app/serializers/transcript.js	Tue Aug 16 00:16:08 2016 +0200
+++ b/cms/app-client/app/serializers/transcript.js	Wed Aug 17 15:30:19 2016 +0200
@@ -5,12 +5,27 @@
 	normalizeResponse: function(store, primaryModelClass, payload, id, requestType) {
 		var annotations = [];
 		payload.annotations.forEach(function(annotation) {
-			annotations.push({
+			console.log('ANNOT', annotation.content.data.words);
+			var annotationObject = {
 				'content': annotation.content.data.content,
-				'translation': annotation.content.data.transl['@value'],
 				'start': annotation.begin,
 				'end': annotation.end
-			});
+			};
+			if(annotation.content.data.transl) {
+				annotationObject.translation = annotation.content.data.transl['@value'];
+			}
+			if(annotation.content.data.words) {
+				var words = [];
+				annotation.content.data.words.forEach(function(word) {
+					var wordObject = {
+						'content': word.content,
+						'translation': word.transl['@value']
+					};
+					words.push(wordObject);
+				})
+				annotationObject.words = words;
+			}
+			annotations.push(annotationObject);
 		});
         return {
             'data': {

--- a/cms/app-client/app/styles/app.scss	Tue Aug 16 00:16:08 2016 +0200
+++ b/cms/app-client/app/styles/app.scss	Wed Aug 17 15:30:19 2016 +0200
@@ -10,6 +10,8 @@
 $medium-white: #f5f5f5;
 $light-white: #fbfbfb;
 
+$content-height: 600px;
+
 
 body {
     background-color: $medium-white;
@@ -78,7 +80,8 @@
 }
 
 body.videoscreen .corpus-app-container {
-    padding-top: 308px;
+    margin-top: 308px;
+    height: 292px;
 }
 
 h2 {

--- a/cms/app-client/app/styles/components/transcript-component.scss	Tue Aug 16 00:16:08 2016 +0200
+++ b/cms/app-client/app/styles/components/transcript-component.scss	Wed Aug 17 15:30:19 2016 +0200
@@ -53,6 +53,42 @@
     color: $light-white;
 }
 
+.transcript-component .transcript .sentence .words {
+    font-size: 0px;
+    margin: 20px 0px;
+}
+
+.transcript-component .transcript .sentence .words .word {
+    display: inline-block;
+}
+
+.transcript-component .transcript .sentence .words .word .original,
+.transcript-component .transcript .sentence .words .word .translation {
+    background-color: $medium-grey;
+    padding: 0px 4px;
+    margin-right: 2px;
+    margin-bottom: 2px;
+    font-size: 12px;
+}
+
+.transcript-component .transcript .sentence.active .words .word .original,
+.transcript-component .transcript .sentence.active .words .word .translation {
+    background-color: $light-white;
+}
+
+.transcript-component .transcript .sentence .words .word {
+    color: $light-blue;
+}
+
+.transcript-component .transcript .sentence.active .words .word .original {
+    color: $grey-blue;
+}
+
+.transcript-component .transcript .sentence .words .word .translation {
+    margin-bottom: 4px;
+}
+
+
 .transcript-component .transcript .sentence.active .translation {
     color: $light-blue;
 }

--- a/cms/app-client/app/templates/application.hbs	Tue Aug 16 00:16:08 2016 +0200
+++ b/cms/app-client/app/templates/application.hbs	Wed Aug 17 15:30:19 2016 +0200
@@ -7,13 +7,10 @@
     </div>
     {{/if}}
     <div class="corpus-app-container{{if player.window ' window'}}">
-    {{#if player.window}}
-        {{#if (eq player.window 'notice')}}
-            {{ notice-component }}
-        {{/if}}
-        {{#if (eq player.window 'transcript')}}
-            {{ transcript-component }}
-        {{/if}}
+    {{#if (if-and player.window (eq player.window 'notice'))}}
+        {{ notice-component }}
+    {{else if (if-and player.window player.transcript (eq player.window 'transcript'))}}
+        {{ transcript-component }}
     {{else}}
         {{ outlet }}
     {{/if}}

--- a/cms/app-client/app/templates/components/transcript-component.hbs	Tue Aug 16 00:16:08 2016 +0200
+++ b/cms/app-client/app/templates/components/transcript-component.hbs	Wed Aug 17 15:30:19 2016 +0200
@@ -1,16 +1,37 @@
 <h2>{{player.transcript.title}}</h2>
 <ol class="transcript">
 {{#each player.transcript.annotations as |annotation|}}
+{{log 'each-annotation'}}
 	{{#if (if-and (if-operator player.progress '>=' annotation.start) (if-operator player.progress '<' annotation.end))}}
 	<li class="sentence active">
 		<i class="fa fa-play" {{action 'play' annotation.start}}>Play</i>
 		{{#if annotation.content}}<p class="original">{{annotation.content}}</p>{{/if}}
+		{{#if annotation.words}}
+		<div class="words">
+		{{#each annotation.words as |word|}}
+			<div class="word">
+				<p class="original">{{word.content}}</p>
+				<p class="translation">{{word.translation}}</p>
+			</div>
+		{{/each}}
+		</div>
+		{{/if}}
 		{{#if annotation.translation}}<p class="translation">{{annotation.translation}}</p>{{/if}}
 	</li>
 	{{else}}
 	<li class="sentence" {{action 'play' annotation.start}}>
 		<i class="fa fa-play">Play</i>
 		{{#if annotation.content}}<p class="original">{{annotation.content}}</p>{{/if}}
+		{{#if annotation.words}}
+		<div class="words">
+		{{#each annotation.words as |word|}}
+			<div class="word">
+				<p class="original">{{word.content}}</p>
+				<p class="translation">{{word.translation}}</p>
+			</div>
+		{{/each}}
+		</div>
+		{{/if}}
 		{{#if annotation.translation}}<p class="translation">{{annotation.translation}}</p>{{/if}}
 	</li>
 	{{/if}}