--- 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);
}
}
--- /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);
--- /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);
--- 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>
--- 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 []; } }),
--- 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;
+}
--- /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
--- 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
--- 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>
--- 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
--- /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);
+});
--- /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);
+});