--- a/cms/app-client/app/components/player-component.js	Fri Jul 22 18:25:02 2016 +0200
+++ b/cms/app-client/app/components/player-component.js	Wed Aug 03 22:47:49 2016 +0200
@@ -33,10 +33,6 @@
         this.get('popcorn').load();
     }),
 
-    progressObserver: Ember.observer('player.progress', function() {
-        this.get('popcorn').currentTime(this.get('player').get('progress') / 1000);
-    }),
-
     playingObserver: Ember.observer('player.playing', function() {
         if(this.get('player').get('playing')) {
             this.play();
@@ -46,8 +42,12 @@
     }),
 
     init: function() {
+        var self = this;
+        this.get('player').on('progressupdate', function(progress) {
+            self.get('popcorn').currentTime(progress / 1000);
+        });
+
         this._super(...arguments);
-        this.get('player');
     },
 
     didInsertElement: function() {
@@ -68,7 +68,7 @@
         var progress = this.get('popcorn').currentTime();
         var duration = this.get('popcorn').duration();
         this.$('.bar .value').width(progress * 100 / duration + '%');
-        this.get('player').set('progress', progress * 1000);
+        this.get('player').setProgress(progress * 1000);
         this.set('head', progress);
         this.set('remaining', duration - progress);
     },

--- a/cms/app-client/app/components/playlist-component.js	Fri Jul 22 18:25:02 2016 +0200
+++ b/cms/app-client/app/components/playlist-component.js	Wed Aug 03 22:47:49 2016 +0200
@@ -54,8 +54,12 @@
 
     actions: {
 
-        setItem: function(id) {
-            this.get('player').trigger('reset', id);
+        play: function(id) {
+            this.get('player').play(id);
+        },
+
+        pause: function(id) {
+            this.get('player').pause();
         },
 
         displayNotice: function(id) {

--- a/cms/app-client/app/components/transcript-component.js	Fri Jul 22 18:25:02 2016 +0200
+++ b/cms/app-client/app/components/transcript-component.js	Wed Aug 03 22:47:49 2016 +0200
@@ -26,7 +26,7 @@
     actions: {
 
         play: function(progress) {
-            this.get('player').set('progress', progress);
+            this.get('player').trigger('progressupdate', progress);
             this.get('player').set('playing', true);
         }
 

--- a/cms/app-client/app/services/player.js	Fri Jul 22 18:25:02 2016 +0200
+++ b/cms/app-client/app/services/player.js	Wed Aug 03 22:47:49 2016 +0200
@@ -9,15 +9,25 @@
     window: '',
     playing: false,
     progress: 0, // In Milliseconds
-    progressObserver: Ember.observer('progress', function() {
-        console.log('Ember.observer progress');
-    }),
     reduce: false,
 
     init: function() {
         this.on('reset', Ember.run.bind(this, this.get('reset')));
     },
 
+    setProgress: function(time) {
+        this.set('progress', time);
+    },
+
+    play: function(id) {
+        this.set('item', id);
+        this.set('playing', true);
+    },
+
+    pause: function() {
+        this.set('playing', false);
+    },
+
     reset: function(id) {
         this.set('item', id);
     }

--- a/cms/app-client/app/templates/components/playlist-component.hbs	Fri Jul 22 18:25:02 2016 +0200
+++ b/cms/app-client/app/templates/components/playlist-component.hbs	Wed Aug 03 22:47:49 2016 +0200
@@ -6,9 +6,9 @@
         <div class="tools">
             <span class="time">
             {{#if (ifAnd (eq player.playing true) (eq player.item document.id))}}
-                <i class="fa fa-pause" {{ action 'setItem' document.id }}>Pause</i>
+                <i class="fa fa-pause" {{ action 'pause' }}>Pause</i>
             {{else}}
-                <i class="fa fa-play" {{ action 'setItem' document.id }}>Play</i>
+                <i class="fa fa-play" {{ action 'play' document.id }}>Play</i>
             {{/if}}
                 {{ to-minutes document.duration }}
             </span>