# HG changeset patch
# User Chloe Laisne <chloe.laisne@gmail.com>
# Date 1468759263 -7200
# Node ID da3c6ba8a80b9721ab466a75c31db40d1f30e05e
# Parent  aa101458cd4e3557625b8f84a454df7db77c1ffb
Set time from progress bar - Toggle play plause to actions

diff -r aa101458cd4e -r da3c6ba8a80b cms/app-client/app/components/player-component.js
--- a/cms/app-client/app/components/player-component.js	Sat Jul 16 17:23:47 2016 +0200
+++ b/cms/app-client/app/components/player-component.js	Sun Jul 17 14:41:03 2016 +0200
@@ -46,7 +46,7 @@
             if(this.get('player').get('item') !== id) {
                 this.get('popcorn').on('loadeddata', Ember.run.bind(this, this.get('play')));
             } else {
-                this.toggle();
+                this.send('toggle');
             }
         }));
     },
@@ -75,15 +75,15 @@
         this.get('popcorn').pause();
     },
 
-    toggle: function() {
-        if(this.get('player').get('playing')) {
-            this.pause();
-        } else {
-            this.play();
-        } 
-    },
+    actions: {
 
-    actions: {
+        toggle: function() {
+            if(this.get('player').get('playing')) {
+                this.pause();
+            } else {
+                this.play();
+            } 
+        },
 
         backward: function() {
             var index = this.get('player').get('items').indexOf(this.get('player').get('item'));
@@ -95,6 +95,10 @@
             var index = this.get('player').get('items').indexOf(this.get('player').get('item'));
             var item = this.get('player').get('items')[index + 1];
             this.get('player').set('item', item);
+        },
+
+        setTime: function(event) {
+            this.get('popcorn').currentTime(event.layerX * this.get('popcorn').duration() / Ember.$(event.target).width());
         }
 
     }
diff -r aa101458cd4e -r da3c6ba8a80b cms/app-client/app/styles/components/player-component.scss
--- a/cms/app-client/app/styles/components/player-component.scss	Sat Jul 16 17:23:47 2016 +0200
+++ b/cms/app-client/app/styles/components/player-component.scss	Sun Jul 17 14:41:03 2016 +0200
@@ -95,6 +95,7 @@
     position: relative;
     display: block;
     top: 50%;
+    cursor: pointer;
 }
 
 .player-component #audio .progress .bar .value {
diff -r aa101458cd4e -r da3c6ba8a80b cms/app-client/app/templates/components/player-component.hbs
--- a/cms/app-client/app/templates/components/player-component.hbs	Sat Jul 16 17:23:47 2016 +0200
+++ b/cms/app-client/app/templates/components/player-component.hbs	Sun Jul 17 14:41:03 2016 +0200
@@ -2,15 +2,15 @@
 	<div class="controls">
 		<i title="Backward" class="fa fa-backward{{if isFirst ' disabled'}}" {{action 'backward'}}>Backward</i>
 		{{#if player.playing}}
-		<i title="Pause" class="fa fa-pause" {{action toggle}}>Pause</i>
+		<i title="Pause" class="fa fa-pause" {{action 'toggle'}}>Pause</i>
 		{{else}}
-		<i title="Play" class="fa fa-play" {{action toggle}}>Play</i>
+		<i title="Play" class="fa fa-play" {{action 'toggle'}}>Play</i>
 		{{/if}}
 		<i title="Forward" class="fa fa-forward{{if isLast ' disabled'}}" {{action 'forward'}}>Forward</i>
 	</div>
 	<div class="progress">
 		<span class="head">{{to-minutes head}}</span>
-		<span class="bar"><span class="value"></span></span>
+		<span class="bar" onclick={{action 'setTime'}}><span class="value"></span></span>
 		<span class="remaining">- {{to-minutes remaining}}</span>
 	</div>
 	<div class="meta">