--- a/cms/app-client/app/components/player-component.js Tue Jun 14 18:28:34 2016 +0200
+++ b/cms/app-client/app/components/player-component.js Wed Jun 15 09:50:56 2016 +0200
@@ -1,122 +1,128 @@
import Ember from 'ember';
export default Ember.Component.extend({
- classNames: ['player-component'],
- currentTime: "00:00",
- duration: "00:00",
- documentLoaded: Ember.observer('document.mediaArray', function() {
- var mediaList = this.get('document').get("mediaList");
- if ((typeof(mediaList) !== 'undefined') && (mediaList.length > 0)){
- if (this.audio.src){
- this.pause();
- this.updateProgress(0);
- }
- var mp3 = mediaList.findBy('format', 'audio/mpeg');
- this.audio.src = mp3.url;
- this.audio.load();
- this.set("currentTime", "00:00");
- }
+ classNames: ['player-component'],
+ currentTime: "00:00",
+ duration: "00:00",
- }),
-
- didInsertElement: function(){
- var _this = this;
+ documentLoaded: Ember.observer('document.mediaArray', function() {
+ var mediaList = this.get('document').get("mediaList");
+ if ((typeof(mediaList) !== 'undefined') && (mediaList.length > 0)) {
+ if (this.audio.src){
+ this.pause();
+ this.updateProgress(0);
+ }
+ var mp3 = mediaList.findBy('format', 'audio/mpeg');
+ this.audio.src = mp3.url;
+ this.audio.load();
+ this.set("currentTime", "00:00");
+ }
+ }),
- this.audio = new Audio();
+ didInsertElement: function() {
+ var _this = this;
+
+ this.audio = new Audio();
- this.button = {
- play: this.$('#action_play'),
- progress: this.$('.progress')
- };
+ this.button = {
+ play: this.$('#action_play'),
+ progress: this.$('.progress')
+ };
- this.$(document).on('touchmove', function(e){
- e.preventDefault();
- });
+ 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);
- });
+ // 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));
- });
+ 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);
- });
+ // 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');
+ // 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;
+ },
- 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();
- }
+ 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)'
+ });
+ },
- $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);
+ 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;
+ //return (degree <= max ? degree : max);
+ },
+
+ play: function(){
+ this.audio.play();
+ this.button.play.addClass('playing');
+ this.button.play.text('Pause');
+ },
- var radians = Math.atan2(x - button_centerX, y - button_centerY);
- var degree = Math.round( (radians * (180 / Math.PI) * -1) + 180 );
- return degree;
- //return (degree <= max ? degree : max);
- },
- 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();
- }
+ pause: function(){
+ this.audio.pause();
+ this.button.play.removeClass('playing');
+ this.button.play.text('Play');
},
- prevNextDocument(change){
- this.sendAction("action", change);
+
+ actions: {
+
+ tooglePlay: function(){
+ if (this.button.play.is('.playing')) {
+ this.pause();
+ } else {
+ this.play();
+ }
+ },
+
+ prevNextDocument(change){
+ this.sendAction("action", change);
+ }
+
}
- }
});