--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/app/components/player-component.js Tue Jan 19 19:06:17 2016 +0100
@@ -0,0 +1,115 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+ classNames: ['player-component'],
+ currentTime: "00:00",
+ duration: "00:00",
+
+ _soundChanged: Ember.observer('sound', function() {
+ this.pause();
+ this.changeTime(0);
+ this.updateProgress(0);
+ this.audio.src = this.get("sound").get("master");
+ this.audio.load();
+ this.set("currentTime", "00:00");
+ }),
+
+ didInsertElement: function(){
+ var _this = this;
+
+ this.audio = new Audio("http://stop.com.pk/file/music_folder/700.mp3");
+
+ this.button = {
+ play: $('#action_play'),
+ progress: $('.progress')
+ };
+
+ $(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,
+ rounded = Math.round(percent*1000)/1000,
+ 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 = $('.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;
+ //return (degree <= max ? degree : max);
+ },
+ 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();
+ }
+ }
+ }
+});
--- a/cms/app-client/app/controllers/application.js Mon Jan 18 10:01:39 2016 +0100
+++ b/cms/app-client/app/controllers/application.js Tue Jan 19 19:06:17 2016 +0100
@@ -54,11 +54,11 @@
queryParams[query] = array || null;
this.transitionToRoute({queryParams: queryParams});
},
- play: function(item){
- this.set("currentItem", item);
- $("#audio-player").load();
- $(".result-item").toggleClass("playing", false);
- $("#"+item.id).toggleClass("playing", true);
+ previous: function(){
+ console.log("previous");
+ },
+ next: function(){
+ console.log("next");
},
details: function(item){
if ($("#"+item.id).hasClass("details")){
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/app/controllers/player.js Tue Jan 19 19:06:17 2016 +0100
@@ -0,0 +1,76 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+ queryParams: ['location', 'langue', 'discours', 'date', 'thematique'],
+ location: null,
+ langue: null,
+ discours: null,
+ date: [],
+ thematique: null,
+ isShowingModal: false,
+ currentDetails: null,
+ currentItem: {title: "example", master: 'http://www.noiseaddicts.com/samples_1w72b820/3921.mp3'},
+ filteredSounds: Ember.computed('location', 'langue', 'discours', 'date', 'thematique', 'model', function() {
+ var location = this.get('location');
+ var langue = this.get('langue');
+ var discours = this.get('discours');
+ var date = this.get('date');
+ var thematique = this.get('thematique');
+
+ var sounds = this.get('model');
+
+ if (location) {
+ sounds = sounds.filterBy('spatial', location);
+ }
+ if (langue) {
+ sounds = sounds.filterBy('language', langue);
+ }
+ if (discours) {
+ sounds = sounds.filterBy('type', discours);
+ }
+ if (date.length > 0) {
+ var temp = sounds;
+ sounds.map(function(elt, index){
+ if (date.indexOf(elt.get('created')) === -1){
+ temp = temp.without(elt);
+ }
+ });
+ sounds = temp;
+ }
+ if (thematique) {
+ sounds = sounds.filterBy('thematique', thematique);
+ }
+ return sounds;
+ }),
+ actions: {
+ deleteTag: function(query, item){
+ var queryParams = {};
+ if (query === 'date'){
+ var array = this.get('date');
+ if(array.indexOf(item) !== -1) {
+ array.splice(array.indexOf(item), 1);
+ }
+ }
+ queryParams[query] = array || null;
+ this.transitionToRoute({queryParams: queryParams});
+ },
+ previous: function(){
+ console.log("previous");
+ },
+ next: function(){
+ console.log("next");
+ },
+ details: function(item){
+ if ($("#"+item.id).hasClass("details")){
+ $("#"+item.id).toggleClass("details", false);
+ } else{
+ $(".result-item").toggleClass("details", false);
+ $("#"+item.id).toggleClass("details", true);
+ }
+ },
+ toggleModal: function(item){
+ this.set("isShowingModal", !this.isShowingModal);
+ this.set("currentDetails", item);
+ }
+ }
+});
--- a/cms/app-client/app/styles/player.scss Mon Jan 18 10:01:39 2016 +0100
+++ b/cms/app-client/app/styles/player.scss Tue Jan 19 19:06:17 2016 +0100
@@ -1,4 +1,93 @@
-#audio-player{
+.player-component{
+ text-align: center;
+}
+
+#audio_player {
+ display: inline-block;
+ width: 80px;
+ height: 80px;
+ position: relative;
+ padding: 8px;
+ margin: 10px auto;
+ background: #fff;
+ border-radius: 88px;
+}
+#audio_player .background {
+ width: 60px;
+ height: 60px;
+ border: solid 10px #e5e5e5;
+ background: #fff;
+ border-radius: 80px;
+}
+#audio_player .btn {
+ cursor: pointer;
+}
+#audio_player .btn_play {
display: block;
- margin: 10px auto;
+ width: 32px;
+ height: 32px;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ margin-top: -16px;
+ margin-left: -16px;
+ text-indent: -900em;
+ z-index: 10;
+ background: url(images/button_play.png) 10px no-repeat;
+ background-size: 21px 31px;
+}
+/* pause */
+#audio_player .btn_play.playing {
+ background: url(images/button_pause.png) center no-repeat;
+ background-size: 28px 28px;
+}
+#audio_player .progress {
+ position: absolute;
+ width: 80px;
+ height: 80px;
+ top: 8px;
+ left: 8px;
+}
+#audio_player .progress .slice {
+ position: absolute;
+ width: 80px;
+ height: 80px;
+ clip: rect(0px,80px,80px,40px);
+}
+#audio_player .progress .slice.gt50 {
+ clip: rect(auto, auto, auto, auto);
}
+#audio_player .progress .slice .pie {
+ border: 10px solid #276f84;
+ position: absolute;
+ width: 60px;
+ height: 60px;
+ clip: rect(0,40px,80px,0);
+ -moz-border-radius: 80px;
+ -webkit-border-radius: 80px;
+ border-radius: 80px;
+}
+#audio_player .progress .slice .pie.fill {
+ -moz-transform: rotate(180deg) !important;
+ -webkit-transform: rotate(180deg) !important;
+ -o-transform: rotate(180deg) !important;
+ transform: rotate(180deg) !important;
+}
+
+.audio-controls {
+ color: #2a768c;
+ cursor: pointer;
+ display: inline-block;
+ font-size: 30px;
+ margin: 43px 10px;
+ vertical-align: top;
+}
+
+.duration{
+ margin: -5px auto;
+ text-align: center;
+}
+
+.audio-wrapper{
+ display: inline-block;
+}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/app/templates/components/player-component.hbs Tue Jan 19 19:06:17 2016 +0100
@@ -0,0 +1,17 @@
+<div class="audio-wrapper">
+ <span class="audio-controls fa fa-backward fa-5" {{action 'previous'}}></span>
+ <div id="audio_player">
+ <span id="action_play" class="btn btn_play" {{action 'tooglePlay'}}>Play</span>
+ <div class="background"></div>
+ <div class="progress">
+ <div class="slice">
+ <div class="pie"></div>
+ </div>
+ </div>
+ </div>
+ <span class="audio-controls fa fa-forward fa-5" {{action 'next'}}></span>
+</div>
+
+<p class="duration">
+ {{currentTime}} / {{duration}}
+</p>
--- a/cms/app-client/app/templates/player.hbs Mon Jan 18 10:01:39 2016 +0100
+++ b/cms/app-client/app/templates/player.hbs Tue Jan 19 19:06:17 2016 +0100
@@ -1,10 +1,7 @@
<div class="corpus-app-content">
- <audio id="audio-player" controls>
- <source src="{{ currentItem.master }}" type="audio/ogg">
- <source src="{{ currentItem.master }}" type="audio/mpeg">
- <source src="{{ currentItem.master }}" type="audio/wav">
- Your browser does not support the audio element.
- </audio>
+
+ {{player-component sound=currentItem}}
+
<p>
Title: {{ currentItem.title }}
</p>
@@ -12,15 +9,3 @@
Description: {{ currentItem.description }}
</p>
</div>
-
-<div id="container">
- <div id="audio_player">
- <span class="btn btn_play" id="action_play" title="">Play</span>
- <div class="background"></div>
- <div class="progress">
- <div class="slice">
- <div class="pie"></div>
- </div>
- </div>
- </div>
-</div>
--- a/cms/app-client/npm-debug.log Mon Jan 18 10:01:39 2016 +0100
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,45 +0,0 @@
-0 info it worked if it ends with ok
-1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'start' ]
-2 info using npm@3.5.2
-3 info using node@v5.2.0
-4 verbose run-script [ 'prestart', 'start', 'poststart' ]
-5 info lifecycle app-client@0.0.0~prestart: app-client@0.0.0
-6 silly lifecycle app-client@0.0.0~prestart: no script for prestart, continuing
-7 info lifecycle app-client@0.0.0~start: app-client@0.0.0
-8 verbose lifecycle app-client@0.0.0~start: unsafe-perm in lifecycle true
-9 verbose lifecycle app-client@0.0.0~start: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Users/nowmad/workspace/IRI/corpus_parole/cms/app-client/node_modules/.bin:/Library/PostgreSQL/9.5/bin/:/usr/local/apache-ant/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Users/nowmad/Library/Android/sdk/tools:/Users/nowmad/Library/Android/sdk/platform-tools
-10 verbose lifecycle app-client@0.0.0~start: CWD: /Users/nowmad/workspace/IRI/corpus_parole/cms/app-client
-11 silly lifecycle app-client@0.0.0~start: Args: [ '-c', 'ember serve --environment=development' ]
-12 silly lifecycle app-client@0.0.0~start: Returned: code: 1 signal: null
-13 info lifecycle app-client@0.0.0~start: Failed to exec start script
-14 verbose stack Error: app-client@0.0.0 start: `ember serve --environment=development`
-14 verbose stack Exit status 1
-14 verbose stack at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:232:16)
-14 verbose stack at emitTwo (events.js:88:13)
-14 verbose stack at EventEmitter.emit (events.js:173:7)
-14 verbose stack at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:24:14)
-14 verbose stack at emitTwo (events.js:88:13)
-14 verbose stack at ChildProcess.emit (events.js:173:7)
-14 verbose stack at maybeClose (internal/child_process.js:819:16)
-14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:212:5)
-15 verbose pkgid app-client@0.0.0
-16 verbose cwd /Users/nowmad/workspace/IRI/corpus_parole/cms/app-client
-17 error Darwin 15.2.0
-18 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
-19 error node v5.2.0
-20 error npm v3.5.2
-21 error code ELIFECYCLE
-22 error app-client@0.0.0 start: `ember serve --environment=development`
-22 error Exit status 1
-23 error Failed at the app-client@0.0.0 start script 'ember serve --environment=development'.
-23 error Make sure you have the latest version of node.js and npm installed.
-23 error If you do, this is most likely a problem with the app-client package,
-23 error not with npm itself.
-23 error Tell the author that this fails on your system:
-23 error ember serve --environment=development
-23 error You can get information on how to open an issue for this project with:
-23 error npm bugs app-client
-23 error Or if that isn't available, you can get their info via:
-23 error npm owner ls app-client
-23 error There is likely additional logging output above.
-24 verbose exit [ 1, true ]
Binary file cms/app-client/public/assets/images/button_pause.png has changed
Binary file cms/app-client/public/assets/images/button_play.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/tests/integration/components/player-component-test.js Tue Jan 19 19:06:17 2016 +0100
@@ -0,0 +1,26 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('player-component', 'Integration | Component | player component', {
+ integration: true
+});
+
+test('it renders', function(assert) {
+ assert.expect(2);
+
+ // Set any properties with this.set('myProperty', 'value');
+ // Handle any actions with this.on('myAction', function(val) { ... });
+
+ this.render(hbs`{{player-component}}`);
+
+ assert.equal(this.$().text().trim(), '');
+
+ // Template block usage:
+ this.render(hbs`
+ {{#player-component}}
+ template block text
+ {{/player-component}}
+ `);
+
+ assert.equal(this.$().text().trim(), 'template block text');
+});
