diff -r 1059a7ae018a -r 710a2ae08a74 cms/app-client/app/components/transcript-annotation-component.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/app/components/transcript-annotation-component.js	Fri Dec 02 00:22:31 2016 +0100
@@ -0,0 +1,23 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+
+  classNameBindings: ['isPlaying:active'],
+
+  hasPlayer: Ember.computed.bool('player'),
+
+  begin: Ember.computed.readOnly('annotation.begin'),
+  end: Ember.computed.readOnly('annotation.end'),
+  title: Ember.computed.readOnly('annotation.title'),
+  original: Ember.computed.readOnly('annotation.original'),
+  speaker: Ember.computed.readOnly('annotation.speaker'),
+  showSpeaker: Ember.computed.readOnly('annotation.showSpeaker'),
+  literal: Ember.computed.readOnly('annotation.literal'),
+  translation: Ember.computed.readOnly('annotation.translation'),
+
+  isPlaying: Ember.computed("hasPlayer","player.progress", "begin", "end", function() {
+    var progress = this.get('player.progress');
+    return this.get('hasPlayer') && progress && (progress >= this.get('begin')) && (progress < this.get('end'));
+  })
+
+});