nextcloud-app-radio/js/main.js

$(function(){

  searchTimeout = null;

  /* ==============
  //   EVENTS    //
  /===============*/

  /* Click on a radio station (table entry) and play it */
  $('body').on('click', '.filename', function() {
    var stationid = $(this).parent().attr('data-id');
    action_play(stationid);
  });

  $('body').on('click', '.favpls', function() {
    var stationid = $(this).parent().parent().attr('data-id');
    action_favorite(stationid);
  });


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

  function action_favorite(stationid){

    var removed = false;
    var stations = []
    var baseUrl = OC.generateUrl('/apps/radio');

    $.get(baseUrl + '/stations', function ( data ) {
      for (var station in data) {
        if (data[station]["stationid"] == stationid){
            removed = true;
            $.ajax({
              url: baseUrl + '/stations/' + data[station]["id"],
              method: 'DELETE'
            }).done(function(){
              $( "tr[data-id='"+data[station]["stationid"]+"']" ).find('.icon-stationfav').removeClass('starred');
            });
        };
      };

      if (removed == true) {
        return true;
      } else {
        var station = {
          "stationid": stationid
        };
        $.ajax({
                url: baseUrl + '/stations',
                method: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(station)
        }).done(function(){
          $( "tr[data-id='"+stationid+"']" ).find('.icon-stationfav').addClass('starred');
        });
      };
    });
  };

  function action_play(stationid){
    $.ajax({
      method: "GET",
      url: "https://onny.project-insanity.org/getmetadata/"+stationid,
      dataType: 'json',
      success: function(data){
        var title = data['metadata'];
        $("#station_metadata").html(title);
      }
    });
      $.ajax({
        method: "GET",
        url: "https://www.radio-browser.info/webservice/v2/json/url/"+stationid,
        dataType: 'json',
        success: function(data){
          var sourceUrl = data['url'];
          $("#player").attr("src", sourceUrl);
          $('#player').trigger('play');
          $('#playbutton').attr("class", "pause");
        }
      });
  };

  function render_result(data){

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

      $.each(data, function(i, station) {

        var isstarred = ""
        for (var fav_station in fav_stations) {
          if (fav_stations[fav_station]["stationid"] == station['id']) {
            isstarred = "starred";
            break;
          }
        };

        $('tbody').append('<tr data-src='+station['url']+' data-id='+station['id']+'>\
                            <td class="favcolumn">\
                              <a href="#" class="favpls" onclick="station_fav();">\
                                <span class="icon-stationfav ' + isstarred + '"></span>\
                                <span class="hidden-visually">Favorite</span>\
                              </a>\
                            </td>\
                            <td class="filename">\
                              <label for="select-files-3">\
                                <div class="thumbnail" style="background-image:url('+station['favicon']+'); background-size: 32px;"></div>\
                              </label>\
                              <a class="name" href="#">\
                                <span class="nametext"><span class="innernametext">'+station['name']+'</span></span>\
                              </a>\
                            </td>\
                          </tr>');
      });

    });
  }

  function action_load_favorites(){
      var stations = []
      var baseUrl = OC.generateUrl('/apps/radio');
      $.get(baseUrl + '/stations', function ( data ) {
        for (var station in data) {
          stations.push(data[station]["stationid"]);
        };
        render_stations(stations);
      });
  };

  function render_stations(station_ids){
    for (stationid in station_ids){
      $.ajax({
        method: "GET",
        url: "https://www.radio-browser.info/webservice/json/stations/byid/"+station_ids[stationid],
        dataType: 'json',
        success: render_result
      });
    };
  };

  function radio_query(type, query){
    switch (type) {
      case 0:
        var url = "https://www.radio-browser.info/webservice/json/stations/search";
        break;
      case 1:
        var url = "https://www.radio-browser.info/webservice/json/stations/topclick/20";
        break;
      case 2:
        var url = "https://www.radio-browser.info/webservice/json/stations/lastchange/20";
        break;
    };
    $.ajax({
      method: "POST",
      url: url,
      data: {
        name: query,
        limit: 20
      },
      dataType: 'json',
      success: render_result
    });
  };

  function switch_menu(type) {
      $('#app-navigation').find('li').removeClass("active");
      $("tbody > tr").remove();
      switch (type) {
        case 0:
          $('li.nav-files').addClass('active');
          radio_query(1);
          break;
        case 1:
          $('li.nav-recent').addClass('active');
          radio_query(2);
          break;
        case 2:
          $('li.nav-favorites').addClass('active');
          action_load_favorites();
          break;
      }
  }

  $('a.nav-icon-files').click(function() {
    switch_menu(0);
  });

  $('a.nav-icon-recent').click(function() {
    switch_menu(1);
  });

  $('a.nav-icon-favorites').click(function() {
    switch_menu(2);
  });

  function mySearch(query){
    if (query != "") {
      clearTimeout(searchTimeout);
      searchTimeout = setTimeout(function(){
        $("tbody > tr").remove();
        radio_query(0, query);
      }, 500);
    };
  };

  OC.Plugins.register('OCA.Search', {
      attach: function(search) {
          search.setFilter('radio', mySearch);
      }
  });

  $('#playbutton').click(function() {
    var music = document.getElementById('player');
    if (music.paused && $("#player").attr("src") != "") {
      music.play();
      playbutton.className = "";
      playbutton.className = "pause";
    } else {
      music.pause();
      playbutton.className = "";
      playbutton.className = "play";
    }
  });

  $('#volumeslider').slider({
    orientation: "horizontal",
    value: player.volume,
    min: 0,
    max: 1,
    range: 'min',
    animate: true,
    step: .1,
    slide: function(e, ui) {
      player.volume = ui.value;
    }
  });

  switch_menu(0);
});