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