--- 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() {