--- a/cms/app-client/app/components/player-component.js	Fri Jul 22 16:11:44 2016 +0200
+++ b/cms/app-client/app/components/player-component.js	Fri Jul 22 18:25:02 2016 +0200
@@ -37,6 +37,14 @@
         this.get('popcorn').currentTime(this.get('player').get('progress') / 1000);
     }),
 
+    playingObserver: Ember.observer('player.playing', function() {
+        if(this.get('player').get('playing')) {
+            this.play();
+        } else {
+            this.pause();
+        } 
+    }),
+
     init: function() {
         this._super(...arguments);
         this.get('player');
@@ -46,8 +54,6 @@
         this.set('popcorn', Popcorn('#popcorn-audio'));
         this.get('popcorn').on('loadeddata', Ember.run.bind(this, this.get('onUpdate')));
         this.get('popcorn').on('timeupdate', Ember.run.bind(this, this.get('onUpdate')));
-        this.get('popcorn').on('play', Ember.run.bind(this, this.get('onPlay')));
-        this.get('popcorn').on('pause', Ember.run.bind(this, this.get('onPause')));
 
         this.get('player').on('reset', Ember.run.bind(this, function(id) {
             if(this.get('player').get('item') !== id) {
@@ -67,14 +73,6 @@
         this.set('remaining', duration - progress);
     },
 
-    onPlay: function() {
-        this.get('player').set('playing', true);
-    },
-
-    onPause: function() {
-        this.get('player').set('playing', false);
-    },
-
     play: function() {
         this.get('popcorn').play();
     },
@@ -86,11 +84,7 @@
     actions: {
 
         toggle: function() {
-            if(this.get('player').get('playing')) {
-                this.pause();
-            } else {
-                this.play();
-            } 
+            this.get('player').set('playing', !this.get('player').get('playing'));
         },
 
         backward: function() {

--- a/cms/app-client/app/components/transcript-component.js	Fri Jul 22 16:11:44 2016 +0200
+++ b/cms/app-client/app/components/transcript-component.js	Fri Jul 22 18:25:02 2016 +0200
@@ -27,6 +27,7 @@
 
         play: function(progress) {
             this.get('player').set('progress', progress);
+            this.get('player').set('playing', true);
         }
 
     }

--- a/cms/app-client/app/services/player.js	Fri Jul 22 16:11:44 2016 +0200
+++ b/cms/app-client/app/services/player.js	Fri Jul 22 18:25:02 2016 +0200
@@ -21,5 +21,4 @@
     reset: function(id) {
         this.set('item', id);
     }
-
 });

--- a/cms/app-client/app/styles/app.scss	Fri Jul 22 16:11:44 2016 +0200
+++ b/cms/app-client/app/styles/app.scss	Fri Jul 22 18:25:02 2016 +0200
@@ -5,6 +5,7 @@
 $blue: #2faddd;
 $light-grey: #878e94;
 $medium-grey: #71848d;
+$medium-grey-5: rgba(113,132,141,.2);
 $dark-grey: #59626b;
 $medium-white: #f5f5f5;
 $light-white: #fbfbfb;

--- a/cms/app-client/app/styles/components/playlist-component.scss	Fri Jul 22 16:11:44 2016 +0200
+++ b/cms/app-client/app/styles/components/playlist-component.scss	Fri Jul 22 18:25:02 2016 +0200
@@ -124,7 +124,7 @@
 }
 
 .playlist-component ul li .tools .fa-play::before {
-    margin-left: 2px;
+    margin-left: 3px;
 }
 
 .playlist-component ul li .title,

--- a/cms/app-client/app/styles/components/transcript-component.scss	Fri Jul 22 16:11:44 2016 +0200
+++ b/cms/app-client/app/styles/components/transcript-component.scss	Fri Jul 22 18:25:02 2016 +0200
@@ -20,13 +20,18 @@
 }
 
 .transcript-component .transcript .sentence {
-    padding: 24px 48px;
+    padding: 20px 20px 20px 64px;
     color: $medium-grey;
     position: relative;
     background-color: transparent;
     transition: background-color .15s, color .15s;
 }
 
+.transcript-component .transcript .sentence:not(.active):hover {
+    cursor: pointer;
+    background-color: $medium-grey-5;
+}
+
 .transcript-component .transcript .sentence.active {
     background-color: $grey-blue;
     color: $light-white;
@@ -43,16 +48,26 @@
     width: 24px;
     height: 24px;
     line-height: 20px;
-    left: 12px;
+    left: 20px;
+    cursor: pointer;
+    opacity: 0;
+    border-color: $light-blue;
+    color: $light-blue;
+    transition: opacity .15s;
 }
 
 .transcript-component .transcript .sentence .fa-play::before {
-    margin-left: 2px;
+    margin-left: 3px;
 }
 
 .transcript-component .transcript .sentence.active .fa-play {
     border-color: $light-blue;
     color: $light-blue;
+    opacity: 1;
+}
+
+.transcript-component .transcript .sentence:not(.active):hover .fa-play {
+    opacity: 1;
 }
 
 .transcript-component .transcript .sentence p {

--- a/cms/app-client/app/templates/components/transcript-component.hbs	Fri Jul 22 16:11:44 2016 +0200
+++ b/cms/app-client/app/templates/components/transcript-component.hbs	Fri Jul 22 18:25:02 2016 +0200
@@ -1,10 +1,18 @@
 <h2>{{player.transcript.title}}</h2>
 <ol class="transcript">
 {{#each player.transcript.annotations as |annotation|}}
-	<li class="sentence{{if (if-and (if-operator player.progress '>=' annotation.start) (if-operator player.progress '<' annotation.end)) ' active'}}">
+	{{#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>
 		<p class="original">{{annotation.content}}</p>
 		<p class="translation">{{annotation.translation}}</p>
 	</li>
+	{{else}}
+	<li class="sentence" {{action 'play' annotation.start}}>
+		<i class="fa fa-play">Play</i>
+		<p class="original">{{annotation.content}}</p>
+		<p class="translation">{{annotation.translation}}</p>
+	</li>
+	{{/if}}
 {{/each}}
 </ol>
\ No newline at end of file