--- a/cms/app-client/app/components/player-component.js	Tue Jun 28 23:36:40 2016 +0200
+++ b/cms/app-client/app/components/player-component.js	Wed Jun 29 00:35:03 2016 +0200
@@ -10,11 +10,18 @@
     head: 0,
     remaining: 0,
 
-    item: Ember.computed('player.item', function() {
-        return this.get('player').get('item');
+    isFirst: false,
+    isLast: false,
+
+    item: Ember.computed('player.model', function() {
+        return this.get('player').get('model');
     }),
 
-    documentLoaded: Ember.observer('player.item', function() {
+    modelLoaded: Ember.observer('player.model', function() {
+        var items = this.get('player').get('items');
+        var index = items.indexOf(this.get('player').get('item'));
+        this.set('isFirst', index === 0);
+        this.set('isLast', index === items.length - 1);
     }),
 
     init: function() {
@@ -44,6 +51,14 @@
                 this.get('popcorn').play();
             }
             this.set('playing', !this.get('playing'));
+        },
+
+        backward: function() {
+            console.log('backward');
+        },
+
+        forward: function() {
+            console.log('forward');
         }
 
     }

--- a/cms/app-client/app/components/playlist-component.js	Tue Jun 28 23:36:40 2016 +0200
+++ b/cms/app-client/app/components/playlist-component.js	Wed Jun 29 00:35:03 2016 +0200
@@ -42,7 +42,10 @@
     actions: {
 
         setItem: function(id) {
-            this.get('player').set('itemId', id);
+            this.get('player').set('item', id);
+            this.get('player').set('items', this.get('documents').map(function(document) {
+                return document.get('id');
+            }));
         }
 
     }

--- a/cms/app-client/app/controllers/application.js	Tue Jun 28 23:36:40 2016 +0200
+++ b/cms/app-client/app/controllers/application.js	Wed Jun 29 00:35:03 2016 +0200
@@ -94,10 +94,10 @@
         return this.store.findRecord('document', this.get('detail'));
     }),
 
-    itemIdObserver: Ember.observer('player.itemId', function() {
+    itemIdObserver: Ember.observer('player.item', function() {
         var self = this;
-        this.store.findRecord('document', this.get('player').get('itemId'), { reload: true }).then(function(it){
-            self.get('player').set('item', it);
+        this.store.findRecord('document', this.get('player').get('item'), { reload: true }).then(function(it){
+            self.get('player').set('model', it);
         });
     }),
 

--- a/cms/app-client/app/services/player.js	Tue Jun 28 23:36:40 2016 +0200
+++ b/cms/app-client/app/services/player.js	Wed Jun 29 00:35:03 2016 +0200
@@ -3,8 +3,8 @@
 export default Ember.Service.extend({
 
 	items: [],
-	
-	itemId: null,
-	item: null
+	item: null,
+
+	model: null
 
 });

--- a/cms/app-client/app/styles/components/player-component.scss	Tue Jun 28 23:36:40 2016 +0200
+++ b/cms/app-client/app/styles/components/player-component.scss	Wed Jun 29 00:35:03 2016 +0200
@@ -28,6 +28,12 @@
     cursor: pointer;
 }
 
+.player-component #audio .controls i.disabled {
+    cursor: pointer;
+    pointer-events: none;
+    opacity: .1;
+}
+
 .player-component #audio .controls i.fa-backward {
     margin-right: 10px;
 }
@@ -93,7 +99,7 @@
 }
 
 .player-component #audio .progress .bar .value {
-    width: 20%;
+    width: 0%;
     height: 100%;
     background-color: #2faddd;
     display: block;

--- a/cms/app-client/app/templates/components/player-component.hbs	Tue Jun 28 23:36:40 2016 +0200
+++ b/cms/app-client/app/templates/components/player-component.hbs	Wed Jun 29 00:35:03 2016 +0200
@@ -1,12 +1,12 @@
 <div id="audio">
 	<div class="controls">
-		<i title="Backward" class="fa fa-backward">Backward</i>
+		<i title="Backward" class="fa fa-backward{{if isFirst ' disabled'}}" {{action '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>
+		<i title="Forward" class="fa fa-forward{{if isLast ' disabled'}}" {{action 'forward'}}>Forward</i>
 	</div>
 	<div class="progress">
 		<span class="head">{{to-minutes head}}</span>