go5ears/js/app.js

$(document).ready(function(){
    var audio;
    var tracks;
    var shuffle = ko.observable();
    var repeat = ko.observable();
    var current = ko.observable();
    var repeatAll = ko.observable();
    var playlist = ko.observableArray();
    var playHistory = [];

    
    
    function clearPlaylist(){
        playlist.removeAll();
    }

    function savePlaylist(){
        saveState();
//         uriContent = "data:application/json," + encodeURIComponent(localStorage.playlist);
//         window.open(uriContent,"PlayList.json");
        var blob = new Blob([localStorage.playlist],{type:"text/json;charset=utf-8"});
        saveAs(blob, "playlist.json");
    }


    function loadPlaylist(evt){
        if (window.File && window.FileReader && window.FileList && window.Blob) {
            // Great success! All the File APIs are supported.
            var file = evt.target.files[0]; // FileList object
            console.log(evt.target.files);
            // files is a FileList of File objects. List some properties.
            var reader = new FileReader();
            reader.onload = function (event) {
                var content = event.target.result;
                console.log("Content:"+content);
                if (typeof content != 'undefined'){
                    localStorage.playlist = content;
                    loadState();
                }
            }
            reader.readAsText(file);

        } else {
            //   alert('The File APIs are not fully supported in this browser.');
        }
    }


    $("#clearPlaylist").click(clearPlaylist);
    $("#savePlaylist").click(savePlaylist);
    $("#file").change(loadPlaylist);
    $('#fileSelector').click(function(){
        $('#file').click();
    });

    function saveState(){
        var cleanList = [];
        var pl = playlist();
        for (var i = 0; i < pl.length; i += 1) {
            var obj = {id: pl[i].id(), group: pl[i].group(),title: pl[i].title(), quality:pl[i].quality()};
            cleanList.push(obj);
        }
        console.log(JSON.stringify(cleanList));
        localStorage.playlist = JSON.stringify(cleanList);
        localStorage.shuffle = shuffle() == true;
        localStorage.repeat = repeat() == true;
        localStorage.repeatAll = repeatAll() == true;
        console.log("REPEATALL:"+localStorage.repeatAll);
    }

    function loadState(){
        if (localStorage.playlist) {
            playlist.removeAll();
            console.log("State recovered. Happy listening!");
            var pl = JSON.parse(localStorage.playlist);
            for (var i = 0; i < pl.length; i++){
                var obj = new Song(pl[i].id,pl[i].group,pl[i].title,pl[i].quality);
                playlist.push(obj);
            }

        }
        if(playlist().length < 1){
            console.log("No playlist found. Adding recommendation!");
            var champions = { id:"4b9ed95",
                title:"We are the champions",
                group:"Queen"};

//             var libertine = { id:"fe7e4f9",
//                 title:"Libertine",
//                 group:"Kate Ryan"};
            playlist.push(new Song(champions.id,champions.group,champions.title,'Example Song'));
//             playlist.push(new Song(libertine.id,libertine.group,libertine.title));
        }

        shuffle(localStorage.shuffle == 'true');
        repeat(localStorage.repeat == 'true');
        repeatAll(localStorage.repeatAll == 'true');
    }
    //Audio control

    audio = $('audio')[0];


    audio.addEventListener('ended', function(){
        console.log("Ended");
        if(repeat()){
            audio.play();
        }
        else{
            playNext();
        }
    });

    function playNext(){
        var now = playlist().indexOf(current());
        var len = playlist().length;
        if(shuffle()){
            var rand=(now+Math.floor(Math.random()*(len)+1))%len;
            console.log("NOW: "+now+", NEXT:"+rand);
            playSong(playlist()[rand]);
        }
        else{
            var next = (now+1)%playlist().length;
            console.log("NOW: "+now+", NEXT:"+next);
            if(next>now || repeatAll()){
                playSong(playlist()[next]);
            }else{
                stop();
            }

        }
    };

    function stop(){
        audio.src = "";
        audio.load();
        current().isPlaying(false);
    }

    function pause(){
        var id = current().id();
        audio.pause();
        current().isPlaying(false);
    }

    function resume(){
        audio.play();
        current().isPlaying(true);
    }

    function playSong(song){
        var id = song.id();
        console.log("Going to play "+song.title());
        if(typeof current() != 'undefined'){
            current().isPlaying(false);
        }
        //if(audio.src.indexOf(id)==-1){ // Check if already playing. Buggy when there are duplicates
        audio.src = 'play?id='+id;
        audio.load();
        current(song)
            if (playlist().indexOf(song)>=0) {
                playHistory.push(current());
            }else{
                console.log("Not adding to playlist>"+playlist().indexOf(song));
            }
        //}
        audio.play();
        current().isPlaying(true);
    }

    function playPrevious(){
        if(audio.currentTime < 3.0 && playHistory.length > 0){
            //             console.log("History:");
            //             console.log(playHistory);
            playSong(playHistory.pop());
        }else{
            console.log("Tócala otra vez, Sam");
            audio.currentTime = 0;
        }
    }

    function addSelected(song){
        playlist.push(new Song(song.id(),song.group(),song.title(),song.quality()));
        saveState();
    }

    function removeSong(song) {
        if(song.isPlaying()){
            playNext();
        }
        playlist.remove(song);
        saveState();
    }


    $(function() {
        $( ".sortable" ).sortable();
        $( ".sortable" ).disableSelection();
        $( "#accordion" ).accordion({heightStyle: "fill"});

        $(window).resize(function(){
                $("#accordion").accordion("refresh");
        });
    });

    $('.accordion .head').click(function() {
        $(this).next().toggle();
        return false;
    }).next().hide();
    

    function Song(id, group, title, quality) {
        var self = this;
        self.id = ko.observable(id);
        self.group = ko.observable(group);
        self.title = ko.observable(title);
        self.quality = ko.observable(quality);
        self.isPlaying = ko.observable(false);

        // Computed data
        self.formattedName = ko.computed(function() {
            var index = playlist().indexOf(self);
            index = index>=0?index+"/"+playlist().length+" ":"";
            return index+self.group() +" - "+self.title()+" ["+self.quality()+"]";   
        }, this);

        self.downloadSong = function(){
            window.open("/play?id="+self.id(), self.formattedName());
        }
        self.downloadURL = ko.computed(function(){
            return "/play?id="+self.id();  
        });
        self.downloadName = ko.computed(function(){
            return self.group()+" - "+self.title()+".mp3";
        });
    }


    function PlaylistViewModel() {
        // Data
        var self = this;

        self.results = ko.observableArray([]);
        self.hasMoreSearch = ko.observable(true);
        self.currentPage = ko.observable(0);
        self.queryString = ko.observable();
        self.shuffle = shuffle;
        self.current = current;
        self.repeat = repeat;
        self.repeatAll = repeatAll;
        self.playlist = playlist; 

        self.trackNumber = ko.computed(function(){
            return this.playlist.indexOf(this.current())+"/"+this.playlist().length;
        },this);

        self.isPlaying = ko.computed(function(){
            return (typeof current() != 'undefined') && current().isPlaying();
        },this);

        self.addSong = function(song){
            console.log("Adding song");
            addSelected(song);
        }
        // Operations

        self.search = function(page) {
            $.getJSON(encodeURI('/search?id='+self.queryString()+'&p='+page), function(allData) {
                var results = $.map(allData, function(item) { console.log(JSON.stringify(item)); return new Song(item.id,item.group,item.title,item.quality) });
                console.log("Results:");
                console.log(results);
                if(results.length < 10){
                    console.log("No more results");
                    self.hasMoreSearch(false);
                }else{
                    self.hasMoreSearch(true);   
                }
                if(results.length > 0){
                    for (var i = 0; i < results.length; i += 1) {
                        self.results.push(results[i])
                    }    
                    self.currentPage(page);
                }
            });

        }        
        
        self.getResults = function() {
            self.results.removeAll();
            self.search(1);
        }
        
        self.searchMore = function(){
            if(self.hasMoreSearch()){
                self.search(self.currentPage()+1);
            }
        }

        if(typeof(LocalStorage)!=="undefined"){
            alert("Bad luck!");

        }else{
            loadState();

            $(window).unload(function(){
                saveState();
            });
        }


        self.playNext = playNext;
        self.playPrevious = playPrevious;
        self.resume = resume;
        self.playSong = playSong;
        self.pause = pause;
        self.stop = stop;
        self.removeSong = removeSong;
    }


    ko.applyBindings(new PlaylistViewModel());


});