--- a/cms/app-client/app/components/player-component.js	Tue Jun 28 22:11:38 2016 +0200
+++ b/cms/app-client/app/components/player-component.js	Tue Jun 28 23:36:40 2016 +0200
@@ -4,27 +4,17 @@
     classNames: ['player-component'],
 
     player: Ember.inject.service(),
+    playing: false,
+    popcorn: null,
 
-    currentTime: "00:00",
-    duration: "00:00",
+    head: 0,
+    remaining: 0,
 
     item: Ember.computed('player.item', function() {
         return this.get('player').get('item');
     }),
 
     documentLoaded: Ember.observer('player.item', function() {
-        var mediaList = this.get('player').get('item').get('mediaList');
-        if ((typeof(mediaList) !== 'undefined') && (mediaList.length > 0)) {
-            if (this.audio.src){
-                this.pause();
-                this.updateProgress(0);
-            }
-            var mp3 = mediaList.findBy('format', 'audio/mpeg');
-            this.audio.src = mp3.url;
-            this.audio.load();
-            this.set("currentTime", "00:00");
-            //console.log(mp3.url);
-        }
     }),
 
     init: function() {
@@ -33,12 +23,27 @@
     },
 
     didInsertElement: function() {
+        this.set('popcorn', Popcorn('#popcorn-audio'));
+        this.get('popcorn').on('timeupdate', Ember.run.bind(this, this.get('onProgress')));
+    },
+
+    onProgress: function(event) {
+        var currentTime = this.get('popcorn').currentTime();
+        var duration = this.get('popcorn').duration();
+        this.$('.bar .value').width(currentTime * 100 / duration + '%');
+        this.set('head', currentTime);
+        this.set('remaining', duration - currentTime);
     },
 
     actions: {
 
         play: function() {
-
+            if(this.get('playing')) {
+                this.get('popcorn').pause();
+            } else {
+                this.get('popcorn').play();
+            }
+            this.set('playing', !this.get('playing'));
         }
 
     }