# HG changeset patch # User Chloe Laisne # Date 1467404135 -7200 # Node ID 82878d132784c7f77e0023563b7e387bee77fb43 # Parent 9bff007eb03c1b3fea55d9d11abc66319a892216 Play/Pause/Reset events from player/playlist-components Add title over visu-chrono diff -r 9bff007eb03c -r 82878d132784 cms/app-client/app/components/player-component.js --- a/cms/app-client/app/components/player-component.js Wed Jun 29 10:54:13 2016 +0200 +++ b/cms/app-client/app/components/player-component.js Fri Jul 01 22:15:35 2016 +0200 @@ -23,6 +23,10 @@ this.set('isLast', index === items.length - 1); }), + itemLoaded: Ember.observer('player.model.mediaList', function() { + this.get('popcorn').load(); + }), + init: function() { this._super(...arguments); this.get('player'); @@ -30,10 +34,21 @@ didInsertElement: function() { this.set('popcorn', Popcorn('#popcorn-audio')); - this.get('popcorn').on('timeupdate', Ember.run.bind(this, this.get('onProgress'))); + this.get('popcorn').on('loadeddata', Ember.run.bind(this, this.get('onUpdate'))); + this.get('popcorn').on('timeupdate', Ember.run.bind(this, this.get('onUpdate'))); + this.get('popcorn').on('play', Ember.run.bind(this, this.get('onPlay'))); + this.get('popcorn').on('pause', Ember.run.bind(this, this.get('onPause'))); + + this.get('player').on('reset', Ember.run.bind(this, function(id) { + if(this.get('player').get('item') !== id) { + this.get('popcorn').on('loadeddata', Ember.run.bind(this, this.get('play'))); + } else { + this.toggle(); + } + })); }, - onProgress: function(event) { + onUpdate: function(event) { var currentTime = this.get('popcorn').currentTime(); var duration = this.get('popcorn').duration(); this.$('.bar .value').width(currentTime * 100 / duration + '%'); @@ -41,23 +56,40 @@ this.set('remaining', duration - currentTime); }, + onPlay: function(event) { + this.get('player').set('playing', true); + }, + + onPause: function(event) { + this.get('player').set('playing', false); + }, + + play: function() { + this.get('popcorn').play(); + }, + + pause: function() { + this.get('popcorn').pause(); + }, + + toggle: function() { + if(this.get('player').get('playing')) { + this.pause(); + } else { + this.play(); + } + }, + actions: { - play: function() { - if(this.get('player').get('playing')) { - this.get('popcorn').pause(); - } else { - this.get('popcorn').play(); - } - this.get('player').set('playing', !this.get('player').get('playing')); - }, - backward: function() { - console.log('backward'); + var index = this.get('player').get('items').indexOf(this.get('player').get('item')); + console.log('backward', index); }, forward: function() { - console.log('forward'); + var index = this.get('player').get('items').indexOf(this.get('player').get('item')); + console.log('forward', index); } } diff -r 9bff007eb03c -r 82878d132784 cms/app-client/app/components/playlist-component.js --- a/cms/app-client/app/components/playlist-component.js Wed Jun 29 10:54:13 2016 +0200 +++ b/cms/app-client/app/components/playlist-component.js Fri Jul 01 22:15:35 2016 +0200 @@ -34,6 +34,18 @@ return documents; }), + documentsLoaded: Ember.observer('documents', function() { + this.get('player').set('items', this.get('documents').map(function(document) { + return document.get('id'); + })); + + this.get('player').set('item', this.get('player').get('items')[0]); + }).on('init'), + + init: function() { + this._super(...arguments); + }, + didRender: function() { this._super(...arguments); this.$().find('ul').height(Ember.$('.corpus-app-wrapper').outerHeight() - (Ember.$('.filter-component').outerHeight() + this.$().find('h2').outerHeight())); @@ -42,10 +54,7 @@ actions: { setItem: function(id) { - this.get('player').set('item', id); - this.get('player').set('items', this.get('documents').map(function(document) { - return document.get('id'); - })); + this.get('player').trigger('reset', id); } } diff -r 9bff007eb03c -r 82878d132784 cms/app-client/app/services/player.js --- a/cms/app-client/app/services/player.js Wed Jun 29 10:54:13 2016 +0200 +++ b/cms/app-client/app/services/player.js Fri Jul 01 22:15:35 2016 +0200 @@ -1,12 +1,20 @@ import Ember from 'ember'; -export default Ember.Service.extend({ +export default Ember.Service.extend(Ember.Evented, { items: [], item: null, model: null, + init: function() { + this.on('reset', Ember.run.bind(this, this.get('reset'))); + }, + + reset: function(id) { + this.set('item', id); + }, + playing: false }); diff -r 9bff007eb03c -r 82878d132784 cms/app-client/app/styles/components/playlist-component.scss --- a/cms/app-client/app/styles/components/playlist-component.scss Wed Jun 29 10:54:13 2016 +0200 +++ b/cms/app-client/app/styles/components/playlist-component.scss Fri Jul 01 22:15:35 2016 +0200 @@ -27,6 +27,10 @@ color: #59626b; } +.playlist-component ul li.playing { + background-color: #becfd4; +} + .playlist-component ul li .tools { float: right; } diff -r 9bff007eb03c -r 82878d132784 cms/app-client/app/templates/components/player-component.hbs --- a/cms/app-client/app/templates/components/player-component.hbs Wed Jun 29 10:54:13 2016 +0200 +++ b/cms/app-client/app/templates/components/player-component.hbs Fri Jul 01 22:15:35 2016 +0200 @@ -2,9 +2,9 @@
Backward {{#if player.playing}} - Play + Pause {{else}} - Play + Play {{/if}} Forward
diff -r 9bff007eb03c -r 82878d132784 cms/app-client/app/templates/components/playlist-component.hbs --- a/cms/app-client/app/templates/components/playlist-component.hbs Wed Jun 29 10:54:13 2016 +0200 +++ b/cms/app-client/app/templates/components/playlist-component.hbs Fri Jul 01 22:15:35 2016 +0200 @@ -1,7 +1,7 @@

Résultat ({{ documents.length }})