Play/Pause/Reset events from player/playlist-components
Add title over visu-chrono
--- 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);
}
}
--- 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);
}
}
--- 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
});
--- 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;
}
--- 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 @@
<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 'play'}}>Play</i>
+ <i title="Pause" class="fa fa-pause" {{action toggle}}>Pause</i>
{{else}}
- <i title="Play" class="fa fa-play" {{action 'play'}}>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>
--- 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 @@
<h2>Résultat <span class="count">({{ documents.length }})</span></h2>
<ul>
{{#each documents as |document| }}
- <li id="{{document.id}}" class="">
+ <li id="{{document.id}}" class="{{if (eq player.item document.id) 'playing'}}">
<div class="tools">
<i class="fa{{if (ifAnd (eq player.playing true) (eq player.item document.id)) ' fa-pause' ' fa-play'}}" {{ action 'setItem' document.id }}>Play</i>
--- a/cms/app-client/app/templates/components/visu-chrono.hbs Wed Jun 29 10:54:13 2016 +0200
+++ b/cms/app-client/app/templates/components/visu-chrono.hbs Fri Jul 01 22:15:35 2016 +0200
@@ -1,90 +1,90 @@
<div class="interval">
1960 -
<ul class="1960">
- <li id="1960">0</li>
- <li id="1961">1</li>
- <li id="1962">2</li>
- <li id="1963">3</li>
- <li id="1964">4</li>
- <li id="1965">5</li>
- <li id="1966">6</li>
- <li id="1967">7</li>
- <li id="1968">8</li>
- <li id="1969">9</li>
+ <li title="1960" id="1960">0</li>
+ <li title="1961" id="1961">1</li>
+ <li title="1962" id="1962">2</li>
+ <li title="1963" id="1963">3</li>
+ <li title="1964" id="1964">4</li>
+ <li title="1965" id="1965">5</li>
+ <li title="1966" id="1966">6</li>
+ <li title="1967" id="1967">7</li>
+ <li title="1968" id="1968">8</li>
+ <li title="1969" id="1969">9</li>
</ul>
</div>
<div class="interval">
1970 -
<ul class="1970">
- <li id="1970">0</li>
- <li id="1971">1</li>
- <li id="1972">2</li>
- <li id="1973">3</li>
- <li id="1974">4</li>
- <li id="1975">5</li>
- <li id="1976">6</li>
- <li id="1977">7</li>
- <li id="1978">8</li>
- <li id="1979">9</li>
+ <li title="1970" id="1970">0</li>
+ <li title="1971" id="1971">1</li>
+ <li title="1972" id="1972">2</li>
+ <li title="1973" id="1973">3</li>
+ <li title="1974" id="1974">4</li>
+ <li title="1975" id="1975">5</li>
+ <li title="1976" id="1976">6</li>
+ <li title="1977" id="1977">7</li>
+ <li title="1978" id="1978">8</li>
+ <li title="1979" id="1979">9</li>
</ul>
</div>
<div class="interval">
1980 -
<ul class="1980">
- <li id="1980">0</li>
- <li id="1981">1</li>
- <li id="1982">2</li>
- <li id="1983">3</li>
- <li id="1984">4</li>
- <li id="1985">5</li>
- <li id="1986">6</li>
- <li id="1987">7</li>
- <li id="1988">8</li>
- <li id="1989">9</li>
+ <li title="1980" id="1980">0</li>
+ <li title="1981" id="1981">1</li>
+ <li title="1982" id="1982">2</li>
+ <li title="1983" id="1983">3</li>
+ <li title="1984" id="1984">4</li>
+ <li title="1985" id="1985">5</li>
+ <li title="1986" id="1986">6</li>
+ <li title="1987" id="1987">7</li>
+ <li title="1988" id="1988">8</li>
+ <li title="1989" id="1989">9</li>
</ul>
</div>
<div class="interval">
1990 -
<ul class="1990">
- <li id="1990">0</li>
- <li id="1991">1</li>
- <li id="1992">2</li>
- <li id="1993">3</li>
- <li id="1994">4</li>
- <li id="1995">5</li>
- <li id="1996">6</li>
- <li id="1997">7</li>
- <li id="1998">8</li>
- <li id="1999">9</li>
+ <li title="1990" id="1990">0</li>
+ <li title="1991" id="1991">1</li>
+ <li title="1992" id="1992">2</li>
+ <li title="1993" id="1993">3</li>
+ <li title="1994" id="1994">4</li>
+ <li title="1995" id="1995">5</li>
+ <li title="1996" id="1996">6</li>
+ <li title="1997" id="1997">7</li>
+ <li title="1998" id="1998">8</li>
+ <li title="1999" id="1999">9</li>
</ul>
</div>
<div class="interval">
2000 -
<ul class="2000">
- <li id="2000">0</li>
- <li id="2001">1</li>
- <li id="2002">2</li>
- <li id="2003">3</li>
- <li id="2004">4</li>
- <li id="2005">5</li>
- <li id="2006">6</li>
- <li id="2007">7</li>
- <li id="2008">8</li>
- <li id="2009">9</li>
+ <li title="2000" id="2000">0</li>
+ <li title="2001" id="2001">1</li>
+ <li title="2002" id="2002">2</li>
+ <li title="2003" id="2003">3</li>
+ <li title="2004" id="2004">4</li>
+ <li title="2005" id="2005">5</li>
+ <li title="2006" id="2006">6</li>
+ <li title="2007" id="2007">7</li>
+ <li title="2008" id="2008">8</li>
+ <li title="2009" id="2009">9</li>
</ul>
</div>
<div class="interval">
2010 -
<ul class="2010">
- <li id="2010">0</li>
- <li id="2011">1</li>
- <li id="2012">2</li>
- <li id="2013">3</li>
- <li id="2014">4</li>
- <li id="2015">5</li>
- <li id="2016">6</li>
- <li id="2017">7</li>
- <li id="2018">8</li>
- <li id="2019">9</li>
+ <li title="2010" id="2010">0</li>
+ <li title="2011" id="2011">1</li>
+ <li title="2012" id="2012">2</li>
+ <li title="2013" id="2013">3</li>
+ <li title="2014" id="2014">4</li>
+ <li title="2015" id="2015">5</li>
+ <li title="2016" id="2016">6</li>
+ <li title="2017" id="2017">7</li>
+ <li title="2018" id="2018">8</li>
+ <li title="2019" id="2019">9</li>
</ul>
</div>