--- a/cms/app-client/app/components/player-component.js Mon Jun 27 11:35:10 2016 +0200
+++ b/cms/app-client/app/components/player-component.js Tue Jun 28 22:11:38 2016 +0200
@@ -8,10 +8,13 @@
currentTime: "00:00",
duration: "00:00",
+ item: Ember.computed('player.item', function() {
+ return this.get('player').get('item');
+ }),
+
documentLoaded: Ember.observer('player.item', function() {
var mediaList = this.get('player').get('item').get('mediaList');
if ((typeof(mediaList) !== 'undefined') && (mediaList.length > 0)) {
-
if (this.audio.src){
this.pause();
this.updateProgress(0);
@@ -30,107 +33,12 @@
},
didInsertElement: function() {
- var _this = this;
-
- this.audio = new Audio();
-
- this.button = {
- play: this.$('#action_play'),
- progress: this.$('.progress')
- };
-
- this.$(document).on('touchmove', function(e){
- e.preventDefault();
- });
-
- // seeker
- this.button.progress.on('mousedown', function(e){
- var r = _this.rotation(e.pageX, e.pageY);
- _this.updateProgress(r);
- _this.changeTime(r/360*100);
- });
-
- this.audio.addEventListener('loadedmetadata',function (){
- var minutes = Math.floor( _this.audio.duration / 60);
- var seconds = Math.floor(_this.audio.duration) % 60;
- _this.set('duration', ('0' + minutes).slice(-2)+':'+('0' + seconds).slice(-2));
- });
-
- // update bar onchange
- this.audio.addEventListener('timeupdate',function (){
- var curtime = _this.audio.currentTime,
- percent = (curtime/_this.audio.duration)*100,
- deg = 360/100*percent,
- minutes = Math.floor( curtime / 60),
- seconds = Math.floor(curtime) % 60;
- _this.set('currentTime', ('0' + minutes).slice(-2)+':'+('0' + seconds).slice(-2));
- _this.updateProgress(deg);
- });
-
- // when the audio has finished playing
- this.audio.addEventListener('ended', function(){
- _this.pause();
- _this.changeTime(0);
- _this.updateProgress(0);
- });
- },
-
- // change seeked time
- changeTime: function(percent){
- var t = (this.audio.duration*percent)/100;
- this.audio.currentTime = t;
- },
-
- updateProgress: function(deg){
- var $slice = this.$('.slice');
- if (deg > 180 && !$slice.is('.gt50')) {
- $slice.addClass('gt50');
- $slice.append('<div class="pie fill"></div>');
- } else if (deg < 180 && $slice.is('.gt50')) {
- $slice.removeClass('gt50');
- $slice.find('.fill').remove();
- }
- $slice.find('.pie').css({
- '-moz-transform':'rotate('+deg+'deg)',
- '-webkit-transform':'rotate('+deg+'deg)',
- '-o-transform':'rotate('+deg+'deg)',
- 'transform':'rotate('+deg+'deg)'
- });
- },
-
- rotation: function(x,y){
- var offset = this.button.progress.offset();
- var button_centerX = (offset.left) + (this.button.progress.width()/2);
- var button_centerY = (offset.top) + (this.button.progress.height()/2);
- var radians = Math.atan2(x - button_centerX, y - button_centerY);
- var degree = Math.round( (radians * (180 / Math.PI) * -1) + 180 );
- return degree;
- },
-
- play: function(){
- this.audio.play();
- this.button.play.addClass('playing');
- this.button.play.text('Pause');
- },
-
- pause: function(){
- this.audio.pause();
- this.button.play.removeClass('playing');
- this.button.play.text('Play');
},
actions: {
- tooglePlay: function(){
- if (this.button.play.is('.playing')) {
- this.pause();
- } else {
- this.play();
- }
- },
+ play: function() {
- prevNextDocument(change){
- this.sendAction("action", change);
}
}