--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/app/components/notice-component.js	Mon Jul 04 11:15:25 2016 +0200
@@ -0,0 +1,36 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+
+    player: Ember.inject.service(),
+
+    classNames: ['notice-component'],
+
+    item: Ember.computed('player.model', function() {
+        return this.get('player').get('model');
+    }),
+
+    participants: Ember.computed('player.model.contributors', function() {
+        var participants = [];
+        if(this.get('player').get('model')) {
+            this.get('player').get('model').get('contributors').forEach(function(contributor) {
+                if(contributor.name) {
+                    participants.push({ name: contributor.name, role: contributor.role.split('/').pop() });
+                }
+            });
+        }
+        return participants;
+    }),
+
+    location: Ember.computed('player.model.geoInfo', function() {
+        var location = '';
+        if(this.get('player').get('model')) {
+            var meta = this.get('player').get('model').get('geoInfo').notes.find(element => element.lang);
+            if(meta) {
+                location = meta.value;
+            }
+        }
+        return location;
+    })
+
+});

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/app/components/toolbar-component.js	Mon Jul 04 11:15:25 2016 +0200
@@ -0,0 +1,7 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+
+	classNames: ['toolbar-component']
+
+});

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/app/helpers/if-or.js	Mon Jul 04 11:15:25 2016 +0200
@@ -0,0 +1,7 @@
+import Ember from 'ember';
+
+export function ifOr(params) {
+	return params.find(element => element);
+}
+
+export default Ember.Helper.helper(ifOr);

--- a/cms/app-client/app/models/document.js	Sun Jul 03 13:13:10 2016 +0200
+++ b/cms/app-client/app/models/document.js	Mon Jul 04 11:15:25 2016 +0200
@@ -2,7 +2,7 @@
 import Ember from 'ember';
 import _ from 'lodash/lodash';
 
-var CPDocument = DS.Model.extend({
+export default DS.Model.extend({
 
     uri: DS.attr('string'),
     issued: DS.attr('date'),
@@ -10,6 +10,7 @@
     language: DS.attr('string'),
     publishers: DS.attr({ defaultValue: function() { return []; } }),
     contributors: DS.attr({ defaultValue: function() { return []; } }),
+    geoInfo: DS.attr({ defaultValue: function() { return {}; } }),
     mediaArray: DS.attr({ defaultValue: function() { return []; } }),
 
     mediaList: Ember.computed('mediaArray', function() {
@@ -26,8 +27,17 @@
             res.unshift(mp3);
         }
         return res;
+    }),
+
+    duration: Ember.computed('mediaArray', function() {
+        var self = this;
+        var duration = 0;
+        Object.keys(this.get('mediaArray')).forEach(function(key) {
+            if (!duration && self.get('mediaArray')[key].extent_ms) {
+                duration = self.get('mediaArray')[key].extent_ms;
+            };
+        });
+        return duration / 1000;
     })
 
 });
-
-export default CPDocument;

--- a/cms/app-client/app/styles/app.scss	Sun Jul 03 13:13:10 2016 +0200
+++ b/cms/app-client/app/styles/app.scss	Mon Jul 04 11:15:25 2016 +0200
@@ -26,6 +26,8 @@
     @import 'components/playlist-component';
     @import 'components/discourses-component';
     @import 'components/player-component';
+    @import 'components/toolbar-component';
+    @import 'components/notice-component';
 
 }
 
@@ -41,6 +43,11 @@
     text-align: center;
 }
 
+.corpus-app-modal {
+    background-color: #becfd4;
+    padding: 20px 40px;
+}
+
 .corpus-app-container {
     color: #687a84;
     box-sizing: border-box;
@@ -49,10 +56,14 @@
 
 .corpus-app-container h2 {
     padding: 15px;
-    font-size: 13px;
+    font-size: 14px;
     color: #253946;    
 }
 
+.corpus-window {
+    overflow: hidden;
+}
+
 body.tabs-discours .corpus-app-container,
 body.tabs-chrono .corpus-app-container {
     padding: 0px 20px;

--- a/cms/app-client/app/styles/components/filter-component.scss	Sun Jul 03 13:13:10 2016 +0200
+++ b/cms/app-client/app/styles/components/filter-component.scss	Mon Jul 04 11:15:25 2016 +0200
@@ -5,7 +5,7 @@
 
 .filter-component h2 {
     color: #ffffff;
-    font-size: 13px;
+    font-size: 14px;
 }
 
 .filter-component ul {

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/app/styles/components/notice-component.scss	Mon Jul 04 11:15:25 2016 +0200
@@ -0,0 +1,44 @@
+.notice-component {
+
+}
+
+.notice-component h2 {
+    color: #ffffff;
+    text-align: left;
+    font-size: 14px;
+    text-transform: uppercase;
+}
+
+.notice-component h3 {
+    color: #ffffff;
+    line-height: 18px;
+    font-size: 14px;
+    padding: 5px 0px;
+}
+
+.notice-component table {
+    line-height: 18px;
+    border-collapse: collapse;
+    width: 100%;
+    margin-top: 15px;
+}
+
+.notice-component table tr {
+    border-bottom: solid 1px #13212d;
+}
+
+.notice-component table tr td {
+    vertical-align: top;
+    padding: 10px 0px;
+}
+
+.notice-component table tr td.title {
+    font-weight: bold;
+    color: #13212d;
+}
+
+.notice-component table tr td ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
\ No newline at end of file

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/app/styles/components/toolbar-component.scss	Mon Jul 04 11:15:25 2016 +0200
@@ -0,0 +1,31 @@
+.toolbar-component {
+	height: 40px;
+	width: 100%;
+	line-height: 40px;
+    text-transform: none;
+    padding: 0px 15px;
+    text-align: left;
+    color: #ffffff;
+    font-size: 13px;
+    background-color: #13212d;
+}
+
+.toolbar-component ul {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	text-align: center;
+	font-size: 0px;
+}
+
+.toolbar-component ul li {
+	padding: 0 10px;
+	display: inline-block;
+	font-size: 12px;
+	cursor: pointer;
+}
+
+.toolbar-component ul li:hover {
+	background-color: #ffffff;
+	color: #13212d;
+}
\ No newline at end of file

--- a/cms/app-client/app/templates/application.hbs	Sun Jul 03 13:13:10 2016 +0200
+++ b/cms/app-client/app/templates/application.hbs	Mon Jul 04 11:15:25 2016 +0200
@@ -1,49 +1,26 @@
 <div class="corpus-app-player">
     <div class="corpus-app-content">
-      {{player-component action="changeDocument" document=currentItem}}
-      <p><strong>{{ currentItem.title }}</strong></p>
-      <p>{{doc-language url=currentItem.language}}</p>
+    {{player-component action="changeDocument" document=currentItem}}
+    <p><strong>{{ currentItem.title }}</strong></p>
+    <p>{{doc-language url=currentItem.language}}</p>
     </div>
-  </div>
-
+</div>
 
-<div id="info-modal"></div>
-
-<div>
+<div class="corpus-window">
 
-  <div class="corpus-app-container">
-    {{outlet}}
-  </div>
+    <!--<div class="corpus-app-modal">
+    {{ notice-component }}
+    </div>-->
 
-  <div class="corpus-app-wrapper">
-    
-    {{filter-component}}
-    
-    {{playlist-component model=model}}
+    <div class="corpus-app-container">
+        {{ outlet }}
+    </div>
 
-  </div>
+    <div class="corpus-app-wrapper">
+        {{ filter-component }}
+        {{ playlist-component model=model }}
+    </div>
 
 </div>
 
-{{#if detail}}
-  {{#ember-wormhole to='info-modal'}}
-    <div class="overlay" {{action 'toggleModal'}}></div>
-    <div class="dialog">
-      <div class="dialog-header">
-        <h2>Notice</h2>
-      </div>
-      <div class="dialog-body">
-        <p><b>Titre </b>{{modalItem.title}}</p>
-        <p><b>Langue </b>{{doc-language url=modalItem.language}}</p>
-        <p><b>Enregistré le </b>{{modalItem.modified}}</p>
-        <p><b>Interviewer </b>{{modalItem.publishers}}</p>
-        <p><b>Description </b>{{modalItem.description}}</p>
-        <p><b>Type de Discours </b>{{modalItem.type}}</p>
-        <p><b>Localisation </b>{{modalItem.spatial}}</p>
-      </div>
-      <div class="dialog-footer">
-        <button class="pull-right" {{action 'toggleModal'}}>Close</button>
-      </div>
-    </div>
-  {{/ember-wormhole}}
-{{/if}}
+{{toolbar-component}}
\ No newline at end of file

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/app/templates/components/notice-component.hbs	Mon Jul 04 11:15:25 2016 +0200
@@ -0,0 +1,48 @@
+<h2>Notice</h2>
+<h3>{{ item.title }}</h3>
+<table>
+<tr>
+	<td class="title">Editeur(s)</td>
+	<td>
+		<ul>
+			{{#each item.publishers as |publisher|}}
+			<li>{{ publisher }}</li>
+			{{/each}}
+		</ul>
+	</td>
+</tr>
+<tr>
+	<td class="title">Langue</td>
+	<td>{{ doc-language url=item.language }}</td>
+</tr>
+<tr>
+	<td class="title">Enregistré en</td>
+	<td>{{ short-date item.issued }}</td>
+</tr>
+<tr>
+	<td class="title">Participants</td>
+	<td>
+		<ul>
+		{{#each participants as |participant|}}
+		<li>{{ participant.name }} ({{ participant.role }})</li>
+		{{/each}}
+		</ul>
+	</td>
+</tr>
+<tr>
+	<td class="title">Description(s)</td>
+	<td></td>
+</tr>
+<tr>
+	<td class="title">Lieu</td>
+	<td>{{ location }}</td>
+</tr>
+<tr>
+	<td class="title">Durée</td>
+	<td>{{to-minutes item.duration}}</td>
+</tr>
+<tr>
+	<td class="title">Droits</td>
+	<td></td>
+</tr>
+</table>
\ No newline at end of file

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/app/templates/components/toolbar-component.hbs	Mon Jul 04 11:15:25 2016 +0200
@@ -0,0 +1,5 @@
+<ul>
+	<li>Notice</li>
+	<li>Transcript</li>
+	<li>Video</li>
+</ul>
\ No newline at end of file

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/tests/integration/components/notice-component-test.js	Mon Jul 04 11:15:25 2016 +0200
@@ -0,0 +1,24 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('notice-component', 'Integration | Component | notice component', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{notice-component}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:
+  this.render(hbs`
+    {{#notice-component}}
+      template block text
+    {{/notice-component}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/tests/integration/components/toolbar-component-test.js	Mon Jul 04 11:15:25 2016 +0200
@@ -0,0 +1,24 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('toolbar-component', 'Integration | Component | toolbar component', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{toolbar-component}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:
+  this.render(hbs`
+    {{#toolbar-component}}
+      template block text
+    {{/toolbar-component}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/tests/unit/helpers/if-or-test.js	Mon Jul 04 11:15:25 2016 +0200
@@ -0,0 +1,10 @@
+import { ifOr } from 'app-client/helpers/if-or';
+import { module, test } from 'qunit';
+
+module('Unit | Helper | if or');
+
+// Replace this with your real tests.
+test('it works', function(assert) {
+  let result = ifOr([42]);
+  assert.ok(result);
+});