1 import Ember from 'ember'; |
1 import Ember from 'ember'; |
2 |
2 |
3 export default Ember.Component.extend({ |
3 export default Ember.Component.extend({ |
4 classNames: ['player-component'], |
4 classNames: ['player-component'], |
5 currentTime: "00:00", |
5 currentTime: "00:00", |
6 duration: "00:00", |
6 duration: "00:00", |
7 documentLoaded: Ember.observer('document.mediaArray', function() { |
7 |
8 var mediaList = this.get('document').get("mediaList"); |
8 documentLoaded: Ember.observer('document.mediaArray', function() { |
9 if ((typeof(mediaList) !== 'undefined') && (mediaList.length > 0)){ |
9 var mediaList = this.get('document').get("mediaList"); |
10 if (this.audio.src){ |
10 if ((typeof(mediaList) !== 'undefined') && (mediaList.length > 0)) { |
11 this.pause(); |
11 if (this.audio.src){ |
12 this.updateProgress(0); |
12 this.pause(); |
13 } |
13 this.updateProgress(0); |
14 var mp3 = mediaList.findBy('format', 'audio/mpeg'); |
14 } |
15 this.audio.src = mp3.url; |
15 var mp3 = mediaList.findBy('format', 'audio/mpeg'); |
16 this.audio.load(); |
16 this.audio.src = mp3.url; |
17 this.set("currentTime", "00:00"); |
17 this.audio.load(); |
|
18 this.set("currentTime", "00:00"); |
|
19 } |
|
20 }), |
|
21 |
|
22 didInsertElement: function() { |
|
23 var _this = this; |
|
24 |
|
25 this.audio = new Audio(); |
|
26 |
|
27 this.button = { |
|
28 play: this.$('#action_play'), |
|
29 progress: this.$('.progress') |
|
30 }; |
|
31 |
|
32 this.$(document).on('touchmove', function(e){ |
|
33 e.preventDefault(); |
|
34 }); |
|
35 |
|
36 // seeker |
|
37 this.button.progress.on('mousedown', function(e){ |
|
38 var r = _this.rotation(e.pageX, e.pageY); |
|
39 _this.updateProgress(r); |
|
40 _this.changeTime(r/360*100); |
|
41 }); |
|
42 |
|
43 this.audio.addEventListener('loadedmetadata',function (){ |
|
44 var minutes = Math.floor( _this.audio.duration / 60); |
|
45 var seconds = Math.floor(_this.audio.duration) % 60; |
|
46 _this.set('duration', ('0' + minutes).slice(-2)+':'+('0' + seconds).slice(-2)); |
|
47 }); |
|
48 |
|
49 // update bar onchange |
|
50 this.audio.addEventListener('timeupdate',function (){ |
|
51 var curtime = _this.audio.currentTime, |
|
52 percent = (curtime/_this.audio.duration)*100, |
|
53 deg = 360/100*percent, |
|
54 minutes = Math.floor( curtime / 60), |
|
55 seconds = Math.floor(curtime) % 60; |
|
56 _this.set('currentTime', ('0' + minutes).slice(-2)+':'+('0' + seconds).slice(-2)); |
|
57 _this.updateProgress(deg); |
|
58 }); |
|
59 |
|
60 // when the audio has finished playing |
|
61 this.audio.addEventListener('ended', function(){ |
|
62 _this.pause(); |
|
63 _this.changeTime(0); |
|
64 _this.updateProgress(0); |
|
65 }); |
|
66 }, |
|
67 |
|
68 // change seeked time |
|
69 changeTime: function(percent){ |
|
70 var t = (this.audio.duration*percent)/100; |
|
71 this.audio.currentTime = t; |
|
72 }, |
|
73 |
|
74 updateProgress: function(deg){ |
|
75 var $slice = this.$('.slice'); |
|
76 if (deg > 180 && !$slice.is('.gt50')) { |
|
77 $slice.addClass('gt50'); |
|
78 $slice.append('<div class="pie fill"></div>'); |
|
79 } else if (deg < 180 && $slice.is('.gt50')) { |
|
80 $slice.removeClass('gt50'); |
|
81 $slice.find('.fill').remove(); |
|
82 } |
|
83 $slice.find('.pie').css({ |
|
84 '-moz-transform':'rotate('+deg+'deg)', |
|
85 '-webkit-transform':'rotate('+deg+'deg)', |
|
86 '-o-transform':'rotate('+deg+'deg)', |
|
87 'transform':'rotate('+deg+'deg)' |
|
88 }); |
|
89 }, |
|
90 |
|
91 rotation: function(x,y){ |
|
92 var offset = this.button.progress.offset(); |
|
93 var button_centerX = (offset.left) + (this.button.progress.width()/2); |
|
94 var button_centerY = (offset.top) + (this.button.progress.height()/2); |
|
95 var radians = Math.atan2(x - button_centerX, y - button_centerY); |
|
96 var degree = Math.round( (radians * (180 / Math.PI) * -1) + 180 ); |
|
97 return degree; |
|
98 //return (degree <= max ? degree : max); |
|
99 }, |
|
100 |
|
101 play: function(){ |
|
102 this.audio.play(); |
|
103 this.button.play.addClass('playing'); |
|
104 this.button.play.text('Pause'); |
|
105 }, |
|
106 |
|
107 pause: function(){ |
|
108 this.audio.pause(); |
|
109 this.button.play.removeClass('playing'); |
|
110 this.button.play.text('Play'); |
|
111 }, |
|
112 |
|
113 actions: { |
|
114 |
|
115 tooglePlay: function(){ |
|
116 if (this.button.play.is('.playing')) { |
|
117 this.pause(); |
|
118 } else { |
|
119 this.play(); |
|
120 } |
|
121 }, |
|
122 |
|
123 prevNextDocument(change){ |
|
124 this.sendAction("action", change); |
|
125 } |
|
126 |
18 } |
127 } |
19 |
|
20 }), |
|
21 |
|
22 didInsertElement: function(){ |
|
23 var _this = this; |
|
24 |
|
25 this.audio = new Audio(); |
|
26 |
|
27 this.button = { |
|
28 play: this.$('#action_play'), |
|
29 progress: this.$('.progress') |
|
30 }; |
|
31 |
|
32 this.$(document).on('touchmove', function(e){ |
|
33 e.preventDefault(); |
|
34 }); |
|
35 |
|
36 // seeker |
|
37 this.button.progress.on('mousedown', function(e){ |
|
38 var r = _this.rotation(e.pageX, e.pageY); |
|
39 _this.updateProgress(r); |
|
40 _this.changeTime(r/360*100); |
|
41 }); |
|
42 |
|
43 this.audio.addEventListener('loadedmetadata',function (){ |
|
44 var minutes = Math.floor( _this.audio.duration / 60); |
|
45 var seconds = Math.floor(_this.audio.duration) % 60; |
|
46 _this.set('duration', ('0' + minutes).slice(-2)+':'+('0' + seconds).slice(-2)); |
|
47 }); |
|
48 |
|
49 // update bar onchange |
|
50 this.audio.addEventListener('timeupdate',function (){ |
|
51 var curtime = _this.audio.currentTime, |
|
52 percent = (curtime/_this.audio.duration)*100, |
|
53 deg = 360/100*percent, |
|
54 minutes = Math.floor( curtime / 60), |
|
55 seconds = Math.floor(curtime) % 60; |
|
56 _this.set('currentTime', ('0' + minutes).slice(-2)+':'+('0' + seconds).slice(-2)); |
|
57 _this.updateProgress(deg); |
|
58 }); |
|
59 |
|
60 // when the audio has finished playing |
|
61 this.audio.addEventListener('ended', function(){ |
|
62 _this.pause(); |
|
63 _this.changeTime(0); |
|
64 _this.updateProgress(0); |
|
65 }); |
|
66 }, |
|
67 // change seeked time |
|
68 changeTime: function(percent){ |
|
69 var t = (this.audio.duration*percent)/100; |
|
70 this.audio.currentTime = t; |
|
71 }, |
|
72 updateProgress: function(deg){ |
|
73 var $slice = this.$('.slice'); |
|
74 |
|
75 if (deg > 180 && !$slice.is('.gt50')) { |
|
76 $slice.addClass('gt50'); |
|
77 $slice.append('<div class="pie fill"></div>'); |
|
78 } else if (deg < 180 && $slice.is('.gt50')) { |
|
79 $slice.removeClass('gt50'); |
|
80 $slice.find('.fill').remove(); |
|
81 } |
|
82 |
|
83 $slice.find('.pie').css({ |
|
84 '-moz-transform':'rotate('+deg+'deg)', |
|
85 '-webkit-transform':'rotate('+deg+'deg)', |
|
86 '-o-transform':'rotate('+deg+'deg)', |
|
87 'transform':'rotate('+deg+'deg)' |
|
88 }); |
|
89 }, |
|
90 rotation: function(x,y){ |
|
91 var offset = this.button.progress.offset(); |
|
92 var button_centerX = (offset.left) + (this.button.progress.width()/2); |
|
93 var button_centerY = (offset.top) + (this.button.progress.height()/2); |
|
94 |
|
95 var radians = Math.atan2(x - button_centerX, y - button_centerY); |
|
96 var degree = Math.round( (radians * (180 / Math.PI) * -1) + 180 ); |
|
97 return degree; |
|
98 //return (degree <= max ? degree : max); |
|
99 }, |
|
100 play: function(){ |
|
101 this.audio.play(); |
|
102 this.button.play.addClass('playing'); |
|
103 this.button.play.text('Pause'); |
|
104 }, |
|
105 pause: function(){ |
|
106 this.audio.pause(); |
|
107 this.button.play.removeClass('playing'); |
|
108 this.button.play.text('Play'); |
|
109 }, |
|
110 actions: { |
|
111 tooglePlay: function(){ |
|
112 if (this.button.play.is('.playing')) { |
|
113 this.pause(); |
|
114 } else { |
|
115 this.play(); |
|
116 } |
|
117 }, |
|
118 prevNextDocument(change){ |
|
119 this.sendAction("action", change); |
|
120 } |
|
121 } |
|
122 }); |
128 }); |