oxjs/source/Ox.UI/js/Audio/AudioPlayer.js

'use strict';

/*@
Ox.AudioPlayer <f> Generic Audio Player
@*/

Ox.AudioPlayer = function(options, self) {

    self = self || {};
    var that = Ox.Element({}, self)
        .defaults({
            audio: [],
            muted: false,
            paused: false,
            position: 0,
            repeat: 0,
            shuffle: false,
            time: 'elapsed',
            track: 0,
            volume: 1,
            width: 512
        })
        .options(options || {})
        .update({
            muted: function() {
                self.options.muted = !self.options.muted;
                toggleMuted();
            },
            paused: function() {
                self.options.paused = !self.options.paused;
                togglePaused();
            },
            position: function() {
                setPosition(self.options.position);
            },
            repeat: function() {
                setRepeat(self.options.repeat);
            },
            shuffle: function() {
                self.options.shuffle = !self.options.shuffle;
                toggleShuffle();
            },
            track: function() {
                setTrack(self.options.track);
            },
            volume: function() {
                setVolume(self.options.volume);
            },
            width: setSizes
        })
        .addClass('OxAudioPlayer')
        .css({width: self.options.width + 'px'})
        .bindEvent({
            key_space: togglePaused
        });

    self.positionSliderWidth = self.options.width - 262;
    self.tracks = self.options.audio.length;

    self.$repeatButton = Ox.Button(
            Ox.extend({overlap: 'right', type: 'image'}, getButtonOptions('repeat'))
        )
        .css({
            borderBottomLeftRadius: 0
        })
        .bindEvent({
            click: function() {
                setRepeat(
                    self.options.repeat == 0 ? -1
                    : self.options.repeat == -1 ? 1
                    : 0
                );
            }
        })
        .appendTo(that);

    self.$shuffleButton = Ox.Button(
            Ox.extend({overlap: 'left', type: 'image'}, getButtonOptions('shuffle'))
        )
        .css({
            right: 0,
            borderBottomRightRadius: 0
        })
        .bindEvent({
            click: toggleShuffle
        })
        .appendTo(that);

    self.$trackLabel = Ox.Label({
            textAlign: 'center',
            title: '',
            width: self.options.width - 32
        })
        .addClass('OxTrackLabel')
        .appendTo(that);

    self.$playButtons = Ox.ButtonGroup({
            buttons: [
                {
                    id: 'current',
                    title: 'playPrevious',
                    tooltip: 'Play Current Track'
                },
                Ox.extend({id: 'play'}, getButtonOptions('play')),
                {
                    id: 'next',
                    title: 'playNext',
                    tooltip: 'Play Next Track'
                }
            ],
            overlap: 'right',
            type: 'image',
        })
        .css({
            top: '15px'
        })
        .bindEvent({
            click: function(data) {
                if (data.id == 'current') {
                    setPosition(0);
                } else if (data.id == 'play') {
                    togglePaused();
                } else if (data.id == 'next') {
                    playNext();
                }
            }
        })
        .appendTo(that);

    $(self.$playButtons.find('.OxButton')[0]).css({borderTopLeftRadius: 0});

    self.$positionLabel = Ox.Label({
            textAlign: 'center',
            title: '00:00:00',
            tooltip: 'Show Remaining Time',
            width: 80
        })
        .css({
            left: self.positionSliderWidth + 30 + 'px',
            top: '15px',
            height: '13px',
            paddingTop: '1px',
            borderTopRightRadius: 0,
            borderBottomRightRadius: 0,
            fontSize: '10px'
        })
        .appendTo(that);

    self.$positionSlider = Ox.Range({
            max: 1,
            min: 0,
            step: 0.0000001,
            size: self.positionSliderWidth
        })
        .css({
            left: '46px',
            top: '15px'
        })
        .bindEvent({
            change: function(data) {
                setPosition(data.value * self.duration);
            }
        })
        .appendTo(that);

    self.$muteButton = Ox.Button({
            overlap: 'right',
            title: 'mute',
            tooltip: 'Mute',
            type: 'image'
        })
        .css({
            right: '151px',
            top: '15px'
        })
        .appendTo(that);

    self.$volumeLabel = Ox.Label({
            textAlign: 'center',
            title: '&nbsp;&nbsp;100%',
            width: 48
        })
        .css({
            left: self.options.width - 48 + 'px',
            top: '15px',
            height: '13px',
            paddingTop: '1px',
            borderTopRightRadius: 0,
            fontSize: '10px'
        })
        .appendTo(that);

    self.$volumeSlider = Ox.Range({
            size: 116,
            value: self.options.volume * 100,
        })
        .css({
            right: '35px',
            top: '15px'
        })
        .bindEvent({
            change: function(data) {
                self.options.volume = data.value / 100; 
                self.$audio.volume(self.options.volume);
                self.$volumeLabel.options({
                    title: data.value + '%'
                });
            }
        })
        .appendTo(that);

    self.$audio = Ox.AudioElement({
            src: self.options.audio[self.options.track].src
        })
        .bindEvent({
            ended: function() {
                playNext();
            },
            loadedmetadata: function(data) {
                self.duration = data.duration;
            }
        })
        .appendTo(that);

    setTrack(self.options.track);

    function getButtonOptions(id) {
        if (id == 'play') {
            return self.options.paused
                ? {title: 'play', tooltip: 'Play'}
                : {title: 'pause', tooltip: 'Pause'}
        } else if (id == 'repeat') {
            return self.options.repeat == 0
                ? {title: 'repeatNone', tooltip: 'Repeat All'}
                : self.options.repeat == -1
                ? {title: 'repeatAll', tooltip: 'Repeat One'}
                : {title: 'repeatOne', tooltip: 'Repeat None'}
        } else if (id == 'shuffle') {
            return self.options.shuffle
                ? {title: 'shuffleAll', tooltip: 'Don\'t Shuffle'}
                : {title: 'shuffleNone', tooltip: 'Shuffle'};
        }
    }

    function getNextTrack() {
        return self.options.repeat == 1 ? self.options.track
            : self.options.track < self.tracks - 1 ? self.options.track + 1
            : self.options.repeat == -1 ? 0
            : null;
    }

    function playing() {
        self.options.position = self.$audio.currentTime();
        setPosition(self.options.position, 'video')
        that.triggerEvent('playing', {position: self.options.position});
    }

    function playNext() {
        var track = getNextTrack();
        if (track === null) {
            
        } else {
            setTrack(track);
        }
    }

    function setPosition(position, from) {
        if (from != 'video') {
            self.$audio.currentTime(position);
        }
        self.$positionSlider.options({
            value: position / self.duration
        });
        self.$positionLabel.options({
            title: Ox.formatDuration(
                self.options.time == 'elapsed'
                ? self.options.position
                : self.options.duration - self.options.position
            )
        });
    }

    function setRepeat(repeat) {
        self.options.repeat = repeat;
        self.$repeatButton.options(getButtonOptions('repeat'));
    }

    function setSizes() {
        
    }

    function setTrack(track) {
        var data = self.options.audio[track];
        self.options.track = track;
        self.$trackLabel.options({
            title: [
                data.title, data.artist, data.album, data.year
            ].join(' &mdash; ')
        });
        self.$audio.options({src: self.options.audio[self.options.track].src});
        !self.options.paused && self.$audio.play();
        that.triggerEvent('track', {track: self.options.track});
    }

    function setVolume(volume) {
    
    }

    function toggleMuted() {
    
    }

    function togglePaused() {
        self.options.paused = !self.options.paused;
        self.$playButtons.buttonOptions('play', getButtonOptions('play'));
        if (self.options.paused) {
            self.$audio.pause();
            clearInterval(self.playInterval);
        } else {
            self.$audio.play();
            self.playInterval = setInterval(playing, 100);
        }
        that.triggerEvent('paused', {paused: self.options.paused});
    }

    function toggleShuffle() {
        self.options.shuffle = !self.options.shuffle;
        self.$shuffleButton.options(getButtonOptions('shuffle'))
    }

    return that;

};