--- a/cms/app-client/app/components/player-component.js	Wed Jul 20 21:08:31 2016 +0200
+++ b/cms/app-client/app/components/player-component.js	Thu Jul 21 23:36:50 2016 +0200
@@ -55,11 +55,12 @@
     },
 
     onUpdate: function() {
-        var currentTime = this.get('popcorn').currentTime();
+        var progress = this.get('popcorn').currentTime();
         var duration = this.get('popcorn').duration();
-        this.$('.bar .value').width(currentTime * 100 / duration + '%');
-        this.set('head', currentTime);
-        this.set('remaining', duration - currentTime);
+        this.$('.bar .value').width(progress * 100 / duration + '%');
+        this.get('player').set('progress', progress * 1000);
+        this.set('head', progress);
+        this.set('remaining', duration - progress);
     },
 
     onPlay: function() {

--- a/cms/app-client/app/components/transcript-component.js	Wed Jul 20 21:08:31 2016 +0200
+++ b/cms/app-client/app/components/transcript-component.js	Thu Jul 21 23:36:50 2016 +0200
@@ -2,8 +2,30 @@
 
 export default Ember.Component.extend({
 
-	player: Ember.inject.service(),
+    classNames: ['transcript-component'],
+
+    player: Ember.inject.service(),
+
+    autoscroll: true,
+    autoscrollElement : Ember.$('.corpus-app-container'),
+
+    itemObserver: Ember.observer('player.item', function () {
+        this.set('autoscroll', true);
+    }),
 
-	language: 'fr'
+    init: function() {
+        var self = this;
+        this.get('autoscrollElement').bind('scroll', function() {
+            self.set('autoscroll', false);
+        });
+
+        this._super(...arguments);
+    },
+
+    didUpdate: function() {
+        if(this.get('autoscroll')) {
+            this.get('autoscrollElement').scrollTop((Ember.$('.sentence.active').offset().top + this.get('autoscrollElement').scrollTop()) - this.get('autoscrollElement').offset().top)
+        }
+    }
 
 });

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/app/helpers/if-operator.js	Thu Jul 21 23:36:50 2016 +0200
@@ -0,0 +1,23 @@
+import Ember from 'ember';
+
+export function ifOperator([value1, operator, value2]) {
+	switch(operator) {
+		case '>':
+			return value1 > value2;
+			break;
+		case '>=':
+			return value1 >= value2;
+			break;
+		case '<=':
+			return value1 <= value2;
+			break;
+		case '<':
+			return value1 < value2;
+			break;
+		default:
+			break;
+	}
+	return;
+}
+
+export default Ember.Helper.helper(ifOperator);

--- a/cms/app-client/app/services/player.js	Wed Jul 20 21:08:31 2016 +0200
+++ b/cms/app-client/app/services/player.js	Thu Jul 21 23:36:50 2016 +0200
@@ -8,6 +8,7 @@
 
     window: '',
     playing: false,
+    progress: 0,
     reduce: false,
 
     init: function() {

--- a/cms/app-client/app/styles/app.scss	Wed Jul 20 21:08:31 2016 +0200
+++ b/cms/app-client/app/styles/app.scss	Thu Jul 21 23:36:50 2016 +0200
@@ -1,4 +1,5 @@
 $dark-blue: #13212d;
+$grey-blue: #71848d;
 $medium-blue: #253946;
 $light-blue: #becfd4;
 $blue: #2faddd;
@@ -46,6 +47,7 @@
     @import 'components/player-component';
     @import 'components/toolbar-component';
     @import 'components/notice-component';
+    @import 'components/transcript-component';
 
 }
 
@@ -124,6 +126,10 @@
     border-top: none;
 }
 
+.corpus-app-container.window {
+    overflow: scroll;
+}
+
 .corpus-app-modal {
     position: absolute;
     top: 0px;

--- a/cms/app-client/app/styles/components/transcript-component.scss	Wed Jul 20 21:08:31 2016 +0200
+++ b/cms/app-client/app/styles/components/transcript-component.scss	Thu Jul 21 23:36:50 2016 +0200
@@ -0,0 +1,18 @@
+.transcript-component {
+    background-color: $light-blue;
+    padding: 20px;
+}
+
+.transcript-component .sentence {
+    padding: 20px;
+    color: $medium-grey;
+}
+
+.transcript-component .sentence.active {
+    background-color: $grey-blue;
+    color: $light-white;
+}
+
+.transcript-component .sentence.active .translation {
+    color: $light-blue;
+}
\ No newline at end of file

--- a/cms/app-client/app/templates/application.hbs	Wed Jul 20 21:08:31 2016 +0200
+++ b/cms/app-client/app/templates/application.hbs	Thu Jul 21 23:36:50 2016 +0200
@@ -6,7 +6,7 @@
         {{ notice-component class="overlay" model=noticeModel }}
     </div>
     {{/if}}
-    <div class="corpus-app-container">
+    <div class="corpus-app-container{{if player.window ' window'}}">
     {{#if player.window}}
         {{#if (eq player.window 'notice')}}
             {{ notice-component }}

--- a/cms/app-client/app/templates/components/transcript-component.hbs	Wed Jul 20 21:08:31 2016 +0200
+++ b/cms/app-client/app/templates/components/transcript-component.hbs	Thu Jul 21 23:36:50 2016 +0200
@@ -1,8 +1,10 @@
 <h2>{{player.transcript.title}}</h2>
 <div class="transcript">
 {{#each player.transcript.annotations as |annotation|}}
-	<i class="fa fa-play">Play</i>
-	<p>{{annotation.content}}</p>
-	<p>{{annotation.translation}}</p>
+	<div class="sentence{{if (if-and (if-operator player.progress '>=' annotation.start) (if-operator player.progress '<' annotation.end)) ' active'}}">
+		<i class="fa fa-play">Play</i>
+		<p class="original">{{annotation.content}}</p>
+		<p class="translation">{{annotation.translation}}</p>
+	</div>
 {{/each}}
 </div>
\ No newline at end of file

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/tests/unit/helpers/if-operator-test.js	Thu Jul 21 23:36:50 2016 +0200
@@ -0,0 +1,10 @@
+import { ifOperator } from 'app-client/helpers/if-operator';
+import { module, test } from 'qunit';
+
+module('Unit | Helper | if operator');
+
+// Replace this with your real tests.
+test('it works', function(assert) {
+  let result = ifOperator([42]);
+  assert.ok(result);
+});