21 var index = items.indexOf(this.get('player').get('item')); |
21 var index = items.indexOf(this.get('player').get('item')); |
22 this.set('isFirst', index === 0); |
22 this.set('isFirst', index === 0); |
23 this.set('isLast', index === items.length - 1); |
23 this.set('isLast', index === items.length - 1); |
24 }), |
24 }), |
25 |
25 |
|
26 itemLoaded: Ember.observer('player.model.mediaList', function() { |
|
27 this.get('popcorn').load(); |
|
28 }), |
|
29 |
26 init: function() { |
30 init: function() { |
27 this._super(...arguments); |
31 this._super(...arguments); |
28 this.get('player'); |
32 this.get('player'); |
29 }, |
33 }, |
30 |
34 |
31 didInsertElement: function() { |
35 didInsertElement: function() { |
32 this.set('popcorn', Popcorn('#popcorn-audio')); |
36 this.set('popcorn', Popcorn('#popcorn-audio')); |
33 this.get('popcorn').on('timeupdate', Ember.run.bind(this, this.get('onProgress'))); |
37 this.get('popcorn').on('loadeddata', Ember.run.bind(this, this.get('onUpdate'))); |
|
38 this.get('popcorn').on('timeupdate', Ember.run.bind(this, this.get('onUpdate'))); |
|
39 this.get('popcorn').on('play', Ember.run.bind(this, this.get('onPlay'))); |
|
40 this.get('popcorn').on('pause', Ember.run.bind(this, this.get('onPause'))); |
|
41 |
|
42 this.get('player').on('reset', Ember.run.bind(this, function(id) { |
|
43 if(this.get('player').get('item') !== id) { |
|
44 this.get('popcorn').on('loadeddata', Ember.run.bind(this, this.get('play'))); |
|
45 } else { |
|
46 this.toggle(); |
|
47 } |
|
48 })); |
34 }, |
49 }, |
35 |
50 |
36 onProgress: function(event) { |
51 onUpdate: function(event) { |
37 var currentTime = this.get('popcorn').currentTime(); |
52 var currentTime = this.get('popcorn').currentTime(); |
38 var duration = this.get('popcorn').duration(); |
53 var duration = this.get('popcorn').duration(); |
39 this.$('.bar .value').width(currentTime * 100 / duration + '%'); |
54 this.$('.bar .value').width(currentTime * 100 / duration + '%'); |
40 this.set('head', currentTime); |
55 this.set('head', currentTime); |
41 this.set('remaining', duration - currentTime); |
56 this.set('remaining', duration - currentTime); |
42 }, |
57 }, |
43 |
58 |
|
59 onPlay: function(event) { |
|
60 this.get('player').set('playing', true); |
|
61 }, |
|
62 |
|
63 onPause: function(event) { |
|
64 this.get('player').set('playing', false); |
|
65 }, |
|
66 |
|
67 play: function() { |
|
68 this.get('popcorn').play(); |
|
69 }, |
|
70 |
|
71 pause: function() { |
|
72 this.get('popcorn').pause(); |
|
73 }, |
|
74 |
|
75 toggle: function() { |
|
76 if(this.get('player').get('playing')) { |
|
77 this.pause(); |
|
78 } else { |
|
79 this.play(); |
|
80 } |
|
81 }, |
|
82 |
44 actions: { |
83 actions: { |
45 |
84 |
46 play: function() { |
|
47 if(this.get('player').get('playing')) { |
|
48 this.get('popcorn').pause(); |
|
49 } else { |
|
50 this.get('popcorn').play(); |
|
51 } |
|
52 this.get('player').set('playing', !this.get('player').get('playing')); |
|
53 }, |
|
54 |
|
55 backward: function() { |
85 backward: function() { |
56 console.log('backward'); |
86 var index = this.get('player').get('items').indexOf(this.get('player').get('item')); |
|
87 console.log('backward', index); |
57 }, |
88 }, |
58 |
89 |
59 forward: function() { |
90 forward: function() { |
60 console.log('forward'); |
91 var index = this.get('player').get('items').indexOf(this.get('player').get('item')); |
|
92 console.log('forward', index); |
61 } |
93 } |
62 |
94 |
63 } |
95 } |
64 }); |
96 }); |