--- a/cms/app-client/app/components/player-component.js	Wed Jun 29 09:01:43 2016 +0200
+++ b/cms/app-client/app/components/player-component.js	Wed Jun 29 10:54:13 2016 +0200
@@ -4,7 +4,6 @@
     classNames: ['player-component'],
 
     player: Ember.inject.service(),
-    playing: false,
     popcorn: null,
 
     head: 0,
@@ -45,12 +44,12 @@
     actions: {
 
         play: function() {
-            if(this.get('playing')) {
+            if(this.get('player').get('playing')) {
                 this.get('popcorn').pause();
             } else {
                 this.get('popcorn').play();
             }
-            this.set('playing', !this.get('playing'));
+            this.get('player').set('playing', !this.get('player').get('playing'));
         },
 
         backward: function() {

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/app/helpers/eq.js	Wed Jun 29 10:54:13 2016 +0200
@@ -0,0 +1,7 @@
+import Ember from 'ember';
+
+export function eq(params) {
+    return params[0] === params[1];
+}
+
+export default Ember.Helper.helper(eq);

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/app/helpers/if-and.js	Wed Jun 29 10:54:13 2016 +0200
@@ -0,0 +1,7 @@
+import Ember from 'ember';
+
+export function ifAnd(params) {
+  return params[0] && params[1];
+}
+
+export default Ember.Helper.helper(ifAnd);

--- a/cms/app-client/app/services/player.js	Wed Jun 29 09:01:43 2016 +0200
+++ b/cms/app-client/app/services/player.js	Wed Jun 29 10:54:13 2016 +0200
@@ -2,9 +2,11 @@
 
 export default Ember.Service.extend({
 
-	items: [],
-	item: null,
+    items: [],
+    item: null,
 
-	model: null
+    model: null,
+
+    playing: false
 
 });

--- a/cms/app-client/app/styles/app.scss	Wed Jun 29 09:01:43 2016 +0200
+++ b/cms/app-client/app/styles/app.scss	Wed Jun 29 10:54:13 2016 +0200
@@ -119,3 +119,14 @@
     cursor: default;
     color: inherit;
 }
+
+
+i.fa {
+    font-size: 0px;
+    text-align: center;
+    box-sizing: border-box;
+}
+
+i.fa::before {
+    font-size: 12px;
+}

--- a/cms/app-client/app/styles/components/player-component.scss	Wed Jun 29 09:01:43 2016 +0200
+++ b/cms/app-client/app/styles/components/player-component.scss	Wed Jun 29 10:54:13 2016 +0200
@@ -19,9 +19,6 @@
     width: auto;
     height: 40px;
     line-height: 36px;
-    text-align: center;
-    font-size: 0px;
-    box-sizing: border-box;
     float: left;
     top: 50%;
     margin: -20px 0px 0px 0px;

--- a/cms/app-client/app/styles/components/playlist-component.scss	Wed Jun 29 09:01:43 2016 +0200
+++ b/cms/app-client/app/styles/components/playlist-component.scss	Wed Jun 29 10:54:13 2016 +0200
@@ -32,7 +32,7 @@
 }
 
 .playlist-component ul li button,
-.playlist-component ul li .play {
+.playlist-component ul li .fa {
     color: #878e94;
     border: 2px solid #878e94;
     cursor: pointer;
@@ -42,15 +42,16 @@
     background-color: transparent;
 }
 
-.playlist-component ul li .play {
-    box-sizing: border-box;
+.playlist-component ul li .fa {
     border-radius: 100%;
-    width: 25px;
-    height: 25px;
-    line-height: 25px;
-    text-align: center;
+    width: 24px;
+    height: 24px;
+    line-height: 20px;
     display: block;
-    padding-left: 4px;
+}
+
+.playlist-component ul li .fa-play::before {
+    margin-left: 2px;
 }
 
 .playlist-component ul li .title {

--- a/cms/app-client/app/templates/components/player-component.hbs	Wed Jun 29 09:01:43 2016 +0200
+++ b/cms/app-client/app/templates/components/player-component.hbs	Wed Jun 29 10:54:13 2016 +0200
@@ -1,7 +1,7 @@
 <div id="audio">
 	<div class="controls">
 		<i title="Backward" class="fa fa-backward{{if isFirst ' disabled'}}" {{action 'backward'}}>Backward</i>
-		{{#if playing}}
+		{{#if player.playing}}
 		<i title="Pause" class="fa fa-pause" {{action 'play'}}>Play</i>
 		{{else}}
 		<i title="Play" class="fa fa-play" {{action 'play'}}>Play</i>

--- a/cms/app-client/app/templates/components/playlist-component.hbs	Wed Jun 29 09:01:43 2016 +0200
+++ b/cms/app-client/app/templates/components/playlist-component.hbs	Wed Jun 29 10:54:13 2016 +0200
@@ -1,9 +1,10 @@
 <h2>Résultat <span class="count">({{ documents.length }})</span></h2>
 <ul>
     {{#each documents as |document| }}
-    <li id="{{document.id}}">
+    <li id="{{document.id}}" class="">
+        
         <div class="tools">
-            <span class="play playing-indicator" {{ action 'setItem' document.id }}>&#9654;</span>
+            <i class="fa{{if (ifAnd (eq player.playing true) (eq player.item document.id)) ' fa-pause' ' fa-play'}}" {{ action 'setItem' document.id }}>Play</i>
             <button{{action 'openNotice' document}}>Notice</button>
         </div>
         <span class="title">{{ document.title }}</span>

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

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/tests/unit/helpers/if-and-test.js	Wed Jun 29 10:54:13 2016 +0200
@@ -0,0 +1,10 @@
+import { ifAnd } from 'app-client/helpers/if-and';
+import { module, test } from 'qunit';
+
+module('Unit | Helper | if and');
+
+// Replace this with your real tests.
+test('it works', function(assert) {
+  let result = ifAnd([42]);
+  assert.ok(result);
+});