diff -r 1059a7ae018a -r 710a2ae08a74 cms/app-client/app/components/transcript-turn-component.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/app/components/transcript-turn-component.js	Fri Dec 02 00:22:31 2016 +0100
@@ -0,0 +1,18 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  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');
+  })
+});