# HG changeset patch
# User nowmad@23.1.168.192.in-addr.arpa
# Date 1453226777 -3600
# Node ID 15ded106ef1a44af1c44bdb3f111382d6ed9088a
# Parent  e95ca73cec549fdeb596e8ca0453aecbf27a329a
add a player component to handle sound play/pause

diff -r e95ca73cec54 -r 15ded106ef1a cms/app-client/app/components/player-component.js
--- /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();
+      }
+    }
+  }
+});
diff -r e95ca73cec54 -r 15ded106ef1a cms/app-client/app/controllers/application.js
--- 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")){
diff -r e95ca73cec54 -r 15ded106ef1a cms/app-client/app/controllers/player.js
--- /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);
+    }
+  }
+});
diff -r e95ca73cec54 -r 15ded106ef1a cms/app-client/app/styles/player.scss
--- 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;
+}
diff -r e95ca73cec54 -r 15ded106ef1a cms/app-client/app/templates/components/player-component.hbs
--- /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>
diff -r e95ca73cec54 -r 15ded106ef1a cms/app-client/app/templates/player.hbs
--- 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>
diff -r e95ca73cec54 -r 15ded106ef1a cms/app-client/npm-debug.log
--- 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 ]
diff -r e95ca73cec54 -r 15ded106ef1a cms/app-client/public/assets/images/button_pause.png
Binary file cms/app-client/public/assets/images/button_pause.png has changed
diff -r e95ca73cec54 -r 15ded106ef1a cms/app-client/public/assets/images/button_play.png
Binary file cms/app-client/public/assets/images/button_play.png has changed
diff -r e95ca73cec54 -r 15ded106ef1a cms/app-client/tests/integration/components/player-component-test.js
--- /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');
+});