libretime/airtime_mvc/public/js/airtime/audiopreview/preview_jplayer.js

var _playlist_jplayer;
var _idToPostionLookUp;

/**
 *When the page loads the ready function will get all the data it can from the hidden span elements
 *and call one of three functions depending on weather the window was open to play an audio file,
 *or a playlist or a show.
 */
$(document).ready(function(){
        
    _playlist_jplayer = new jPlayerPlaylist({
        jPlayer: "#jquery_jplayer_1",
        cssSelectorAncestor: "#jp_container_1"
    },[], //array of songs will be filled with below's json call
    {
        swfPath: "/js/jplayer",
        supplied:"oga, mp3, m4v",
        size: {
            width: "0px",
            height: "0px",
            cssClass: "jp-video-270p"
        },
        playlistOptions: {
            autoPlay: false,
            loopOnPrevious: false,
            shuffleOnLoop: true,
            enableRemoveControls: false,
            displayTime: 0,
            addTime: 0,
            removeTime: 0,
            shuffleTime: 0
        }
    });
    
    
    $.jPlayer.timeFormat.showHour = true;
    
    var audioFileID = $('.audioFileID').text();
    var playlistID = $('.playlistID').text();
    var playlistIndex = $('.playlistIndex').text();
    var showID = $('.showID').text();
    var showIndex = $('.showIndex').text();

    var numOfItems = 0;
    
    if (playlistID != "" && playlistID !== ""){
        playAllPlaylist(playlistID, playlistIndex);
    }else if (audioFileID != "") {
        playOne(audioFileID);
    }else if (showID != "") {
        playAllShow(showID, showIndex);
    }
    
    $("#jp_container_1").on("mouseenter", "ul.jp-controls li", function(ev) {
    	$(this).addClass("ui-state-hover");
    });
    
    $("#jp_container_1").on("mouseleave", "ul.jp-controls li", function(ev) {
    	$(this).removeClass("ui-state-hover");
    });
});

/**
 * Sets up the jPlayerPlaylist to play.
 *  - Get the playlist info based on the playlistID give.
 *  - Update the playlistIndex to the position in the pllist to start playing.
 *  - Select the element played from and start playing. If playlist is null then start at index 0.
**/
function playAllPlaylist(p_playlistID, p_playlistIndex) {
    var viewsPlaylistID = $('.playlistID').text();
    
    if ( _idToPostionLookUp !== undefined && viewsPlaylistID == p_playlistID ) {
        play(p_playlistIndex);
    }else {
        buildplaylist("/audiopreview/get-playlist/playlistID/"+p_playlistID, p_playlistIndex);
    }
}

/**
 * Sets up the show to play.
 *  checks with the show id given to the show id on the page/view
 *      if the show id and the page or views show id are the same it means the user clicked another
 *          file in the same show, so don't refresh the show content tust play the track from the preloaded show.
 *      if the the ids are different they we'll need to get the show's context so create the uri
 *      and call the controller.
**/
function playAllShow(p_showID, p_index) {
    
    var viewsShowID = $('.showID').text();
    if ( _idToPostionLookUp !== undefined && viewsShowID == p_showID ) {
        play(p_index);
    }else {
        buildplaylist("/audiopreview/get-show/showID/"+p_showID, p_index);
    }
}

/**
 * This function will call the AudiopreviewController to get the contents of either a show or playlist
 * Looping throught the returned contents and creating media for each track.
 *
 * Then trigger the jplayer to play the list.
 */
function buildplaylist(p_url, p_playIndex) {
    _idToPostionLookUp = Array();
    $.getJSON(p_url, function(data){  // get the JSON array produced by my PHP
        var myPlaylist = new Array();
        var media;
        var index;
        var total = 0;
        for(index in data){
            
            if (data[index]['element_mp3'] != undefined){
                media = {title: data[index]['element_title'],
                        artist: data[index]['element_artist'],
                        mp3:"/api/get-media/file/"+data[index]['element_mp3']
                };
            }else if (data[index]['element_oga'] != undefined) {
                media = {title: data[index]['element_title'],
                        artist: data[index]['element_artist'],
                        oga:"/api/get-media/file/"+data[index]['element_oga']
                };
            }
            myPlaylist[index] = media;
            
            // we should create a map according to the new position in the player itself
            // total is the index on the player
            _idToPostionLookUp[data[index]['element_id']] = total;
            total++;
        }
        
        _playlist_jplayer.setPlaylist(myPlaylist);
        _playlist_jplayer.option("autoPlay", true);
        play(p_playIndex);
        
        var height = Math.min(143 + (26 * total), 400);
        var width = 505;
        
        if (height === 400) {
        	window.scrollbars = true;
        }
        else {
        	//there's no scrollbars so we don't need the window to be as wide.
        	width = 490;
        }
        
        window.resizeTo(width, height);    
    });
}

/**
 *Function simply plays the given index, for playlists index can be different so need to look up the
 *right index.
 */
function play(p_playlistIndex){
    playlistIndex = _idToPostionLookUp[p_playlistIndex];
    if(playlistIndex == undefined){
        playlistIndex = 0
    }
    //_playlist_jplayer.select(playlistIndex);
    _playlist_jplayer.play(playlistIndex);
}

/**
 * Playing one audio track occurs from the library. This function will create the media, setup
 * jplayer and play the track.
 */
function playOne(p_audioFileID) {
    var playlist = new Array();
    var fileExtensioin = p_audioFileID.split('.').pop();
    console.log(p_audioFileID);
    if (fileExtensioin === 'mp3') {
        media = {title: $('.audioFileTitle').text() !== 'null' ?$('.audioFileTitle').text():"",
            artist: $('.audioFileArtist').text() !== 'null' ?$('.audioFileArtist').text():"",
            mp3:"/api/get-media/file/"+p_audioFileID
        };
    }else if (fileExtensioin === 'ogg' ) {
        media = {title: $('.audioFileTitle').text() != 'null' ?$('.audioFileTitle').text():"",
            artist: $('.audioFileArtist').text() != 'null' ?$('.audioFileArtist').text():"",
            oga:"/api/get-media/file/"+p_audioFileID
        };
    }
    _playlist_jplayer.option("autoPlay", true);
    console.log(media);
    playlist[0] = media;
    //_playlist_jplayer.setPlaylist(playlist); --if I use this the player will call _init on the setPlaylist and on the ready
    _playlist_jplayer._initPlaylist(playlist);
    _playlist_jplayer.play(0);
    
    window.resizeTo(490, 167);
}