--- 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'));
         }
 
     }

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/app/helpers/to-minutes.js	Tue Jun 28 23:36:40 2016 +0200
@@ -0,0 +1,8 @@
+import Ember from 'ember';
+
+export function toMinutes(params) {
+    var seconds = (params[0] % 60).toFixed(0);
+    return Math.floor(params[0] / 60) + ":" + (seconds < 10 ? '0' : '') + seconds;
+}
+
+export default Ember.Helper.helper(toMinutes);

--- a/cms/app-client/app/styles/components/player-component.scss	Tue Jun 28 22:11:38 2016 +0200
+++ b/cms/app-client/app/styles/components/player-component.scss	Tue Jun 28 23:36:40 2016 +0200
@@ -25,13 +25,15 @@
     float: left;
     top: 50%;
     margin: -20px 0px 0px 0px;
+    cursor: pointer;
 }
 
 .player-component #audio .controls i.fa-backward {
     margin-right: 10px;
 }
 
-.player-component #audio .controls i.fa-play {
+.player-component #audio .controls i.fa-play,
+.player-component #audio .controls i.fa-pause {
     border: 2px solid #ffffff;
     border-radius: 100%;
     margin-right: 8px;
@@ -43,8 +45,13 @@
     font-size: 22px;
 }
 
+.player-component #audio .controls i.fa-play::before,
+.player-component #audio .controls i.fa-pause::before {
+    font-size: 16px;
+}
+
 .player-component #audio .controls i.fa-play::before {
-    margin-left: 5px;
+    margin-left: 4px;
 }
 
 .player-component #audio .controls i.fa-forward {

--- a/cms/app-client/app/templates/components/player-component.hbs	Tue Jun 28 22:11:38 2016 +0200
+++ b/cms/app-client/app/templates/components/player-component.hbs	Tue Jun 28 23:36:40 2016 +0200
@@ -1,13 +1,17 @@
 <div id="audio">
 	<div class="controls">
 		<i title="Backward" class="fa fa-backward">Backward</i>
+		{{#if playing}}
+		<i title="Pause" class="fa fa-pause" {{action 'play'}}>Play</i>
+		{{else}}
 		<i title="Play" class="fa fa-play" {{action 'play'}}>Play</i>
+		{{/if}}
 		<i title="Forward" class="fa fa-forward">Forward</i>
 	</div>
 	<div class="progress">
-		<span class="head">00:00</span>
+		<span class="head">{{to-minutes head}}</span>
 		<span class="bar"><span class="value"></span></span>
-		<span class="remaining">00:00</span>
+		<span class="remaining">- {{to-minutes remaining}}</span>
 	</div>
 	<div class="meta">
 		<p>

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/tests/unit/helpers/to-minutes-test.js	Tue Jun 28 23:36:40 2016 +0200
@@ -0,0 +1,10 @@
+import { toMinutes } from 'app-client/helpers/to-minutes';
+import { module, test } from 'qunit';
+
+module('Unit | Helper | to minutes');
+
+// Replace this with your real tests.
+test('it works', function(assert) {
+  let result = toMinutes([42]);
+  assert.ok(result);
+});