--- a/cms/app-client/app/components/player-component.js	Wed Jun 29 10:54:13 2016 +0200
+++ b/cms/app-client/app/components/player-component.js	Fri Jul 01 22:15:35 2016 +0200
@@ -23,6 +23,10 @@
         this.set('isLast', index === items.length - 1);
     }),
 
+    itemLoaded: Ember.observer('player.model.mediaList', function() {
+        this.get('popcorn').load();
+    }),
+
     init: function() {
         this._super(...arguments);
         this.get('player');
@@ -30,10 +34,21 @@
 
     didInsertElement: function() {
         this.set('popcorn', Popcorn('#popcorn-audio'));
-        this.get('popcorn').on('timeupdate', Ember.run.bind(this, this.get('onProgress')));
+        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) {
+                this.get('popcorn').on('loadeddata', Ember.run.bind(this, this.get('play')));
+            } else {
+                this.toggle();
+            }
+        }));
     },
 
-    onProgress: function(event) {
+    onUpdate: function(event) {
         var currentTime = this.get('popcorn').currentTime();
         var duration = this.get('popcorn').duration();
         this.$('.bar .value').width(currentTime * 100 / duration + '%');
@@ -41,23 +56,40 @@
         this.set('remaining', duration - currentTime);
     },
 
+    onPlay: function(event) {
+        this.get('player').set('playing', true);
+    },
+
+    onPause: function(event) {
+        this.get('player').set('playing', false);
+    },
+
+    play: function() {
+        this.get('popcorn').play();
+    },
+
+    pause: function() {
+        this.get('popcorn').pause();
+    },
+
+    toggle: function() {
+        if(this.get('player').get('playing')) {
+            this.pause();
+        } else {
+            this.play();
+        } 
+    },
+
     actions: {
 
-        play: function() {
-            if(this.get('player').get('playing')) {
-                this.get('popcorn').pause();
-            } else {
-                this.get('popcorn').play();
-            }
-            this.get('player').set('playing', !this.get('player').get('playing'));
-        },
-
         backward: function() {
-            console.log('backward');
+            var index = this.get('player').get('items').indexOf(this.get('player').get('item'));
+            console.log('backward', index);
         },
 
         forward: function() {
-            console.log('forward');
+            var index = this.get('player').get('items').indexOf(this.get('player').get('item'));
+            console.log('forward', index);
         }
 
     }