# HG changeset patch
# User Chloe Laisne <chloe.laisne@gmail.com>
# Date 1467144698 -7200
# Node ID 08ad36c693b1132c0d2404a0667a119f9d46dc80
# Parent  35cb7200bb0a4f55844c9ab5bec7c1e858aa26e8
Player design

diff -r 35cb7200bb0a -r 08ad36c693b1 cms/app-client/app/components/player-component.js
--- a/cms/app-client/app/components/player-component.js	Mon Jun 27 11:35:10 2016 +0200
+++ b/cms/app-client/app/components/player-component.js	Tue Jun 28 22:11:38 2016 +0200
@@ -8,10 +8,13 @@
     currentTime: "00:00",
     duration: "00:00",
 
+    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);
@@ -30,107 +33,12 @@
     },
 
     didInsertElement: function() {
-        var _this = this;
-
-        this.audio = new Audio();
-
-        this.button = {
-            play: this.$('#action_play'),
-            progress: this.$('.progress')
-        };
-
-        this.$(document).on('touchmove', function(e){
-            e.preventDefault();
-        });
-
-        // seeker
-        this.button.progress.on('mousedown', function(e){
-            var r = _this.rotation(e.pageX, e.pageY);
-            _this.updateProgress(r);
-            _this.changeTime(r/360*100);
-        });
-
-        this.audio.addEventListener('loadedmetadata',function (){
-            var minutes = Math.floor( _this.audio.duration / 60);
-            var seconds =  Math.floor(_this.audio.duration) % 60;
-            _this.set('duration', ('0' + minutes).slice(-2)+':'+('0' + seconds).slice(-2));
-        });
-
-        // update bar onchange
-        this.audio.addEventListener('timeupdate',function (){
-            var curtime = _this.audio.currentTime,
-            percent = (curtime/_this.audio.duration)*100,
-            deg = 360/100*percent,
-            minutes = Math.floor( curtime / 60),
-            seconds =  Math.floor(curtime) % 60;
-            _this.set('currentTime', ('0' + minutes).slice(-2)+':'+('0' + seconds).slice(-2));
-            _this.updateProgress(deg);
-        });
-
-        // when the audio has finished playing
-        this.audio.addEventListener('ended', function(){
-            _this.pause();
-            _this.changeTime(0);
-            _this.updateProgress(0);
-        });
-    },
-
-    // change seeked time
-    changeTime: function(percent){
-        var t = (this.audio.duration*percent)/100;
-        this.audio.currentTime = t;
-    },
-
-    updateProgress: function(deg){
-        var $slice = this.$('.slice');
-        if (deg > 180 && !$slice.is('.gt50')) {
-            $slice.addClass('gt50');
-            $slice.append('<div class="pie fill"></div>');
-        } else if (deg < 180 && $slice.is('.gt50')) {
-            $slice.removeClass('gt50');
-            $slice.find('.fill').remove();
-        }
-        $slice.find('.pie').css({
-            '-moz-transform':'rotate('+deg+'deg)',
-            '-webkit-transform':'rotate('+deg+'deg)',
-            '-o-transform':'rotate('+deg+'deg)',
-            'transform':'rotate('+deg+'deg)'
-        });
-    },
-
-    rotation: function(x,y){
-        var offset = this.button.progress.offset();
-        var button_centerX = (offset.left) + (this.button.progress.width()/2);
-        var button_centerY = (offset.top) + (this.button.progress.height()/2);
-        var radians = Math.atan2(x - button_centerX, y - button_centerY);
-        var degree = Math.round( (radians * (180 / Math.PI) * -1) + 180 );
-        return degree;
-    },
-
-    play: function(){
-        this.audio.play();
-        this.button.play.addClass('playing');
-        this.button.play.text('Pause');
-    },
-
-    pause: function(){
-        this.audio.pause();
-        this.button.play.removeClass('playing');
-        this.button.play.text('Play');
     },
 
     actions: {
 
-        tooglePlay: function(){
-            if (this.button.play.is('.playing')) {
-                this.pause();
-            } else {
-                this.play();
-            }
-        },
+        play: function() {
 
-        prevNextDocument(change){
-            this.sendAction("action", change);
         }
 
     }
diff -r 35cb7200bb0a -r 08ad36c693b1 cms/app-client/app/helpers/author.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/app/helpers/author.js	Tue Jun 28 22:11:38 2016 +0200
@@ -0,0 +1,10 @@
+import Ember from 'ember';
+
+export function author(params) {
+	if(params[0]) {
+		return 'par ' + params[0].join(', ');
+	}
+	return;
+}
+
+export default Ember.Helper.helper(author);
diff -r 35cb7200bb0a -r 08ad36c693b1 cms/app-client/app/helpers/short-date.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/app/helpers/short-date.js	Tue Jun 28 22:11:38 2016 +0200
@@ -0,0 +1,9 @@
+import Ember from 'ember';
+
+export function shortDate(params) {
+	if(params[0]) {
+		return params[0].getDate() + '-' + ( params[0].getMonth() + 1 ) + '-' + params[0].getFullYear();
+	}
+}
+
+export default Ember.Helper.helper(shortDate);
diff -r 35cb7200bb0a -r 08ad36c693b1 cms/app-client/app/index.html
--- a/cms/app-client/app/index.html	Mon Jun 27 11:35:10 2016 +0200
+++ b/cms/app-client/app/index.html	Tue Jun 28 22:11:38 2016 +0200
@@ -1,48 +1,51 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>AppClient</title>
-    <meta name="description" content="">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <head>
+        <title>AppClient</title>
+
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="description" content="">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    {{content-for "head"}}
+        {{content-for "head"}}
 
-    <link rel="stylesheet" href="styles.css">
+        <link rel="stylesheet" href="styles.css">
+        <link rel="stylesheet" href="assets/vendor.css">
+        <link rel="stylesheet" href="assets/app-client.css">
 
-    <link rel="stylesheet" href="assets/vendor.css">
-    <link rel="stylesheet" href="assets/app-client.css">
+        <script src="http://popcornjs.org/code/dist/popcorn-complete.js"></script>
 
-    {{content-for "head-footer"}}
-  </head>
-  <body>
-    <div class="header">
-      <h1>Corpus de la parole</h1>
-      <div class="menu">
-        <ul class="menu_main">
-          <li class="sub-menu"> <a href="#/langues"> Langues </a> </li>
-          <li class="sub-menu"> <a href="#/cartographie"> Cartographie </a> </li>
-          <li class="sub-menu"> <a href="#/thematiques"> Thématiques </a> </li>
-          <li class="sub-menu"> <a href="#/discours"> Discours </a> </li>
-          <li class="sub-menu"> <a href="#/chronologie"> Chronologie </a> </li>
-        </ul>
-      </div>
-    </div>
-    {{content-for "body"}}
+        {{content-for "head-footer"}}
+    </head>
+    <body>
+        <div class="header">
+            <h1>Corpus de la parole</h1>
+            <div class="menu">
+            <ul class="menu_main">
+            <li class="sub-menu"> <a href="#/langues"> Langues </a> </li>
+            <li class="sub-menu"> <a href="#/cartographie"> Cartographie </a> </li>
+            <li class="sub-menu"> <a href="#/thematiques"> Thématiques </a> </li>
+            <li class="sub-menu"> <a href="#/discours"> Discours </a> </li>
+            <li class="sub-menu"> <a href="#/chronologie"> Chronologie </a> </li>
+            </ul>
+            </div>
+        </div>
 
-    <div id="corpus-app" class="corpus-app"></div>
+        {{content-for "body"}}
+
+        <div id="corpus-app" class="corpus-app"></div>
 
-    <script src="assets/vendor.js"></script>
-    <script src="assets/app-client.js"></script>
-    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
-    <script>
-      $(".menu_main .sub-menu").click(function(item, bla){
-        $(".menu_main .sub-menu").toggleClass("active", false);
-        $(item.currentTarget).toggleClass("active", true);
-      })
-    </script>
+        <script src="assets/vendor.js"></script>
+        <script src="assets/app-client.js"></script>
+        <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
+        <script>
+            $(".menu_main .sub-menu").click(function(item, bla){
+                $(".menu_main .sub-menu").toggleClass("active", false);
+                $(item.currentTarget).toggleClass("active", true);
+            })
+        </script>
 
-    {{content-for "body-footer"}}
-  </body>
+        {{content-for "body-footer"}}
+    </body>
 </html>
diff -r 35cb7200bb0a -r 08ad36c693b1 cms/app-client/app/models/document.js
--- a/cms/app-client/app/models/document.js	Mon Jun 27 11:35:10 2016 +0200
+++ b/cms/app-client/app/models/document.js	Tue Jun 28 22:11:38 2016 +0200
@@ -5,6 +5,7 @@
 var CPDocument = DS.Model.extend({
 
     uri: DS.attr('string'),
+    issued: DS.attr('date'),
     title: DS.attr('string'),
     language: DS.attr('string'),
     publishers: DS.attr({ defaultValue: function() { return []; } }),
diff -r 35cb7200bb0a -r 08ad36c693b1 cms/app-client/app/styles/app.scss
--- a/cms/app-client/app/styles/app.scss	Mon Jun 27 11:35:10 2016 +0200
+++ b/cms/app-client/app/styles/app.scss	Tue Jun 28 22:11:38 2016 +0200
@@ -25,6 +25,8 @@
     @import 'components/filter-component';
     @import 'components/playlist-component';
     @import 'components/discourses-component';
+    @import 'components/player-component';
+
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -109,3 +111,11 @@
         @import 'modal';
     }
 }
+
+.ember-view.language a {
+    text-transform: capitalize;
+    text-decoration: none;
+    pointer-events: none;
+    cursor: default;
+    color: inherit;
+}
diff -r 35cb7200bb0a -r 08ad36c693b1 cms/app-client/app/styles/components/player-component.scss
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/app/styles/components/player-component.scss	Tue Jun 28 22:11:38 2016 +0200
@@ -0,0 +1,133 @@
+.player-component {
+    color: #ffffff;
+    text-align: left;
+    padding: 0px 40px;
+}
+
+.player-component #audio {
+    height: 100%;
+}
+
+.player-component #audio > * {
+    display: block;
+    float: left;
+    height: 100%;
+}
+
+.player-component #audio .controls i {
+    position: relative;
+    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;
+}
+
+.player-component #audio .controls i.fa-backward {
+    margin-right: 10px;
+}
+
+.player-component #audio .controls i.fa-play {
+    border: 2px solid #ffffff;
+    border-radius: 100%;
+    margin-right: 8px;
+    margin-left: 8px;
+    width: 40px;
+}
+
+.player-component #audio .controls i::before {
+    font-size: 22px;
+}
+
+.player-component #audio .controls i.fa-play::before {
+    margin-left: 5px;
+}
+
+.player-component #audio .controls i.fa-forward {
+    margin-left: 10px;
+}
+
+.player-component #audio .progress {
+    position: relative;
+    margin: 0px 59px;
+}
+
+.player-component #audio .progress > * {
+    display: inline-block;
+    line-height: 80px;
+}
+
+.player-component #audio .progress .head,
+.player-component #audio .progress .remaining {
+    position: absolute;
+    top: 0px;
+}
+
+.player-component #audio .progress .head {
+    left: 0px;
+}
+
+.player-component #audio .progress .remaining {
+    right: 0px;
+}
+
+.player-component #audio .progress .bar {
+    width: 302px;
+    height: 3px;
+    background-color: #cfd2d5;
+    margin: -1px 60px 0 60px;
+    position: relative;
+    display: block;
+    top: 50%;
+}
+
+.player-component #audio .progress .bar .value {
+    width: 20%;
+    height: 100%;
+    background-color: #2faddd;
+    display: block;
+}
+
+.player-component #audio .meta p {
+    float: left;
+    width: 170px;
+    margin: 0px 0px 0px 30px;
+    padding: 0px;
+    box-sizing: border-box;
+    top: 50%;
+    margin-top: -22px;
+    display: block;
+    position: relative;
+}
+
+.player-component #audio .meta p:first-child {
+    margin-left: 0px;
+}
+
+.player-component #audio .meta p > * {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    line-height: 22px;
+    display: block;
+}
+
+.player-component #audio .meta .language,
+.player-component #audio .meta .date {
+    
+}
+
+.player-component #audio .meta .title,
+.player-component #audio .meta .author {
+    
+}
+
+
+
+.player-component #audio .meta .title {
+    font-weight: bold;
+}
\ No newline at end of file
diff -r 35cb7200bb0a -r 08ad36c693b1 cms/app-client/app/styles/components/playlist-component.scss
--- a/cms/app-client/app/styles/components/playlist-component.scss	Mon Jun 27 11:35:10 2016 +0200
+++ b/cms/app-client/app/styles/components/playlist-component.scss	Tue Jun 28 22:11:38 2016 +0200
@@ -59,10 +59,4 @@
 
 .playlist-component ul li .language {
     display: block;
-}
-
-.playlist-component ul li .language a {
-    text-transform: capitalize;
-    text-decoration: none;
-    color: inherit;
 }
\ No newline at end of file
diff -r 35cb7200bb0a -r 08ad36c693b1 cms/app-client/app/templates/components/player-component.hbs
--- a/cms/app-client/app/templates/components/player-component.hbs	Mon Jun 27 11:35:10 2016 +0200
+++ b/cms/app-client/app/templates/components/player-component.hbs	Tue Jun 28 22:11:38 2016 +0200
@@ -1,16 +1,29 @@
-<div class="audio-wrapper">
-	<span class="audio-controls fa fa-backward" {{action 'prevNextDocument' 'previous'}}></span>
-	<div id="audio_player">
-		<span id="action_play" class="btn btn_play" {{action 'tooglePlay'}}>Play</span>
-		<div class="progress">
-			<div class="slice">
-				<div class="pie"></div>
-			</div>
-		</div>
+<div id="audio">
+	<div class="controls">
+		<i title="Backward" class="fa fa-backward">Backward</i>
+		<i title="Play" class="fa fa-play" {{action 'play'}}>Play</i>
+		<i title="Forward" class="fa fa-forward">Forward</i>
+	</div>
+	<div class="progress">
+		<span class="head">00:00</span>
+		<span class="bar"><span class="value"></span></span>
+		<span class="remaining">00:00</span>
 	</div>
-	<span class="audio-controls fa fa-forward fa-5" {{action 'prevNextDocument' 'next'}}></span>
+	<div class="meta">
+		<p>
+			<span title="{{ item.title }}" class="title">{{ item.title }}</span>
+			{{doc-language class="language" url=item.language}}
+		</p>
+		<p>
+			<span title="{{author item.publishers}}" class="author">{{author item.publishers}}</span>
+			<span class="date">{{short-date item.issued}}</span>
+		</p>
+	</div>
 </div>
 
-<p class="duration">
-	{{currentTime}} / {{duration}}
-</p>
+<audio id="popcorn-audio">
+	{{#each player.item.mediaList as |media|}}
+	<source src="{{ media.url }}" type="{{ media.format }}">
+	{{/each}}
+Your browser does not support the audio element.
+</audio>
diff -r 35cb7200bb0a -r 08ad36c693b1 cms/app-client/app/templates/components/playlist-component.hbs
--- a/cms/app-client/app/templates/components/playlist-component.hbs	Mon Jun 27 11:35:10 2016 +0200
+++ b/cms/app-client/app/templates/components/playlist-component.hbs	Tue Jun 28 22:11:38 2016 +0200
@@ -7,7 +7,7 @@
             <button{{action 'openNotice' document}}>Notice</button>
         </div>
         <span class="title">{{ document.title }}</span>
-        {{doc-language url=document.language class="language"}}
+        {{doc-language class="language" url=document.language}}
     </li>
     {{/each}}
 </ul>
\ No newline at end of file
diff -r 35cb7200bb0a -r 08ad36c693b1 cms/app-client/tests/unit/helpers/author-test.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/tests/unit/helpers/author-test.js	Tue Jun 28 22:11:38 2016 +0200
@@ -0,0 +1,10 @@
+import { author } from 'app-client/helpers/author';
+import { module, test } from 'qunit';
+
+module('Unit | Helper | author');
+
+// Replace this with your real tests.
+test('it works', function(assert) {
+  let result = author([42]);
+  assert.ok(result);
+});
diff -r 35cb7200bb0a -r 08ad36c693b1 cms/app-client/tests/unit/helpers/short-date-test.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/tests/unit/helpers/short-date-test.js	Tue Jun 28 22:11:38 2016 +0200
@@ -0,0 +1,10 @@
+import { shortDate } from 'app-client/helpers/short-date';
+import { module, test } from 'qunit';
+
+module('Unit | Helper | short date');
+
+// Replace this with your real tests.
+test('it works', function(assert) {
+  let result = shortDate([42]);
+  assert.ok(result);
+});