nextcloud-app-radio/js/main.js

var MODULE = (function (radio) {

  $(document).ready(function () {

    var version = "0.6.5";
    var current_stationid = "";
    var searchTimeout = null;
    var scheduled = false;

      // Scroll event handler
      $(window).scroll(function(){
        var station_list = $("#app-content-files");
        if ( ( $(window).scrollTop() + $(window).height() ) == $(document).height() ) {
          if(!station_list.data("didfire")) {
            station_list.data("didfire", true);
            if ($('li.nav-files').hasClass('active')){
              radio.radio_query(1, "");
            } else if ($('li.nav-recent').hasClass('active')) {
              radio.radio_query(2, "");
            } else if ($('li.nav-favorites').hasClass('active')) {
              console.log("todo");
            } else {
              var query = $('#searchbox').val();
              radio.radio_query(0, query);
            };
            var ref = station_list;
            setTimeout(function(){
              ref.data("didfire", false);
            }, 500);
          };
        };
      });

  });



  /* ==============
  //   ACTIONS    //
  /===============*/

  radio.schedule_get_metadata = function(stationid){
    radio.scheduled = true;
    var stationid = radio.current_stationid;
    req = $.get('https://onny.project-insanity.org/getmetadata/'+stationid, function(data) {
        if (data.hasOwnProperty('metadata')) {
          var metadata = data['metadata'].toString();
          if (metadata != $("#station_metadata").text()) {
            $("#station_metadata").html(metadata);
            var element = document.getElementById('station_metadata');
            if (radio.isElementOverflowing(element)) {
              radio.wrapContentsInMarquee(element);
            };
          };
          setTimeout(function(){radio.schedule_get_metadata(stationid);}, 10000);
        } else {
          radio.scheduled = false;
        };
    }).fail(function(){
      radio.scheduled = false;
    });
  };

  radio.action_favorite = function(stationid){
    var exists = false;
    var baseUrl = OC.generateUrl('/apps/radio');
    $.get(baseUrl + '/stations', function ( data ) {
      for (var station in data) {
        if (data[station]["stationid"] == stationid){
            exists = true;
        };
      };
      if (exists == true) {
        $.ajax({
          url: baseUrl + '/stations/' + data[station]["id"],
          method: 'DELETE'
        }).done(function(){
          console.log("delete ", stationid);
          $( "tr[data-src='#station/"+stationid+"']").find('.icon-stationfav').removeClass('starred');
        });
      } else {
        var station = {
          "stationid": stationid
        };
        $.ajax({
                url: baseUrl + '/stations',
                method: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(station)
        }).done(function(){
          $( "tr[data-src='#station/"+stationid+"']" ).find('.icon-stationfav').addClass('starred');
        });
      };
    });
  };

  radio.parse_results = function(data){

    var baseUrl = OC.generateUrl('/apps/radio');
    $.get(baseUrl + '/stations', function ( fav_stations ) {

      if (data.length == 0) {
        $('#filestable').hide();
        $('#emptycontent').addClass('hidden');
        $('.nofilterresults').removeClass('hidden');
        $('.loading').addClass('hidden');
      } else {
        $('#emptycontent').addClass('hidden');
        $('#filestable').show();
        $('.nofilterresults').addClass('hidden');
        $('.loading').addClass('hidden');
      };

      $.each(data, function(i, station) {
        var isstarred = false;
        for (var fav_station in fav_stations) {
          if (fav_stations[fav_station]["stationid"] == station['id']) {
            isstarred = true;
            break;
          }
        };
        radio.render_entry("station", isstarred, '#station/'+station['id'], station['favicon'], station['name']);
      });

    });
  }

  radio.action_load_favorites = function(){
      var stations = []
      var baseUrl = OC.generateUrl('/apps/radio');

      $.get(baseUrl + '/stations', function ( data ) {
        for (var station in data) {
          stations.push(data[station]["stationid"]);
        };
        if (stations.length == 0) {
          $('#filestable').hide();
          $('#emptycontent').removeClass('hidden');
          $('.loading').addClass('hidden');
        } else {
          console.log(stations);
          radio.query_stations(stations);
        };
      });
  };

  radio.query_stations = function(station_ids){
    var station_array = [];
    var station_array_new = [];

    station_ids.forEach(function (station_id, idx) {
      var url = "https://www.radio-browser.info/webservice/json/stations/byid/"+station_ids[idx];
      $.getJSON( url , {"User-Agent": "Nextcloud Radio/"+radio.version }, function( data ) {

        if (data.length === 0) {
          station_array = station_array.concat([{'id': station_id, 'name': 'Broken radio station entry :(', 'favicon': '', 'url': ''}])
        } else {
          station_array = station_array.concat(data);
        };

        if (station_ids.length == station_array.length){

          // sorting results array
          station_ids.forEach( function (station_id) {
            station_array.forEach( function (station) {
              if (station_id === station['id']) {
                station_array_new = station_array_new.concat(station);
              };
            });
          });

          radio.parse_results(station_array_new);
        };

      });
    });

  };

  radio.radio_query = function(hashurl){
    console.log(hashurl);
    var offset = $('tbody > tr').length;
    var query = "";
    var api_baseurl = "https://www.radio-browser.info/webservice/json/";
    switch (hashurl) {
      case "#top":
        var query_url = "stations/topclick";
        break;
      case "#recent":
        var query_url = "stations/lastchange";
        break;
      case "#categories/countries":
        var query_url = "countries";
        break;
      case "#categories/states":
        var query_url = "states";
        break;
      case "#categories/languages":
        var query_url = "languages";
        break;
      case "#categories/tags":
        var query_url = "tags";
        break;
      case (hashurl.match(/^#search/) || {}).input:
        var query_url = "stations/search";
        var query = hashurl.substring(8);
        break;
    };
    console.log(api_baseurl + query_url, query);
    $.ajax({
      method: "POST",
      url: api_baseurl + query_url,
      data: {
        name: query,
        limit: 20,
        "User-Agent": "Nextcloud Radio/"+radio.version,
        offset: offset
      },
      dataType: 'json',
    }).success( function(data){
      radio.parse_results(data);
    });
  };

  // Search function
  new OCA.Search(function (query) {
    $('#app-navigation').find('li').removeClass("active");
    $("tbody > tr").remove();
    radio.radio_query("#search/"+query);
  }, function (arg) {
    radio.switch_menu(0);
  });

  radio.render_entry = function(entry_type, starred, hashurl, iconurl, title){
    if (entry_type == "folder") {
      var icon_class = "icon-stationfav-disabled";
      var icon = "icon-filetype-folder";
    } else {
      var icon_class = "icon-stationfav";
      var icon = '" style="background-image:url('+iconurl+'); background-size: 32px;';
    }
    if (starred) {
      var starred = "starred";
    } else {
      var starred = "";
    }
    $('tbody').append('<tr data-src="'+hashurl+'">\
                        <td class="favcolumn">\
                          <a href="#" class="favorite">\
                            <span class="'+icon_class+' '+starred+'"></span>\
                            <span class="hidden-visually">Favorite</span>\
                          </a>\
                        </td>\
                        <td class="filename">\
                          <label for="select-files-3">\
                            <div class="thumbnail '+icon+'"></div>\
                          </label>\
                          <a class="name" href="#">\
                            <span class="nametext"><span class="innernametext">'+title+'</span></span>\
                          </a>\
                        </td>\
                      </tr>')
  }

  radio.action_load_categories = function (){

    $('#emptycontent').addClass('hidden');
    $('#filestable').show();
    $('.nofilterresults').addClass('hidden');
    $('.loading').addClass('hidden');

    var categories = [{
      'hashurl': '#categories/countries',
      'name': 'Countires'
    },{
      'hashurl': '#categories/states',
      'name': 'States'
    },{
      'hashurl': '#categories/languages',
      'name': 'Languages'
    },{
      'hashurl': '#categories/tags',
      'name': 'Tags'
    }];

    categories.forEach(function(category_entry) {
      radio.render_entry("folder", false, category_entry["hashurl"], false, category_entry["name"]);
    })

  }

  return radio;
}(MODULE || {}));