import Ember from 'ember';

export default Ember.Component.extend({
    classNames: ['player-component'],

    player: Ember.inject.service(),
    playing: false,
    popcorn: null,

    head: 0,
    remaining: 0,

    item: Ember.computed('player.item', function() {
        return this.get('player').get('item');
    }),

    documentLoaded: Ember.observer('player.item', function() {
    }),

    init: function() {
        this._super(...arguments);
        this.get('player');
    },

    didInsertElement: function() {
        this.set('popcorn', Popcorn('#popcorn-audio'));
        this.get('popcorn').on('timeupdate', Ember.run.bind(this, this.get('onProgress')));
    },

    onProgress: function(event) {
        var currentTime = this.get('popcorn').currentTime();
        var duration = this.get('popcorn').duration();
        this.$('.bar .value').width(currentTime * 100 / duration + '%');
        this.set('head', currentTime);
        this.set('remaining', duration - currentTime);
    },

    actions: {

        play: function() {
            if(this.get('playing')) {
                this.get('popcorn').pause();
            } else {
                this.get('popcorn').play();
            }
            this.set('playing', !this.get('playing'));
        }

    }
});