nextcloud-app-radio/js/main.js

$(function(){

  $(document).ready(function () {

      // Player icon pause/stop
      var vid = document.getElementById("player");
      vid.onwaiting = function () {
          $('#playbutton').attr("class", "buffering");
      };
       vid.onplaying = function () {
          $('#playbutton').attr("class", "pause");
      };
      vid.onpause = function () {
         $('#playbutton').attr("class", "play");
      };

      // 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_query(1, "");
            } else if ($('li.nav-recent').hasClass('active')) {
              radio_query(2, "");
            } else if ($('li.nav-favorites').hasClass('active')) {
              console.log("todo");
            } else {
              var query = $('#searchbox').val();
              radio_query(0, query);
            };
            var ref = station_list;
            setTimeout(function(){
              ref.data("didfire", false);
            }, 500);
          };
        };
      });

  });

  searchTimeout = null;
  var scheduled;

  function isElementOverflowing(element) {
  	var overflowX = element.offsetWidth < element.scrollWidth,
  		overflowY = element.offsetHeight < element.scrollHeight;

  	return (overflowX || overflowY);
  }

  function wrapContentsInMarquee(element) {
    var marquee = document.createElement('marquee'),
    contents = element.innerText;

    marquee.innerText = contents;
    element.innerHTML = '';
    element.appendChild(marquee);
  }

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

  /* Click on a radio station (table entry) and play it */
  $('body').on('click', '.filename', function(e) {
    e.preventDefault();
    $('#playbutton').attr("class", "buffering");
    var stationid = $(this).parent().attr('data-id');
    var stationname = $(this).parent().find('.nametext').text();
    action_play(stationid);
    $('#player').attr('data-id',stationid);
    $("#station_metadata").html("Playing: "+stationname);

    /* dirty fix missing background color for first td */
    $('tbody tr').css("background-color", "white");
    $(this).parent().css("background-color", "#f8f8f8");

    var element = document.getElementById('station_metadata');
    if (isElementOverflowing(element)) {
      wrapContentsInMarquee(element);
    };
    if (!scheduled){
      schedule_get_metadata(stationid);
    };
  });

  /* Save station to favorites */
  $('body').on('click', '.favorite', function() {
    var stationid = $(this).parent().parent().attr('data-id');
    action_favorite(stationid);
  });

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

  /* Click on menus */
  $('a.nav-icon-files').click(function(e) {
    e.preventDefault();
    switch_menu(0);
  });

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

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

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

  function schedule_get_metadata(stationid){
    scheduled = true;
    var stationid = $('#player').attr('data-id');
    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 (isElementOverflowing(element)) {
              wrapContentsInMarquee(element);
            };
          };
          setTimeout(function(){schedule_get_metadata(stationid);}, 10000);
        } else {
          scheduled = false;
        };
    }).fail(function(){
      scheduled = false;
    });
  };

  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='" + 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://www.radio-browser.info/webservice/v2/json/url/"+stationid,
      dataType: 'json',
      success: function(data){
        var streamurl = data['url'];
        $("#player").attr("src", streamurl);
        $('#player').trigger('play');
      }
    });
  };

  function render_results(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 = ""

        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="favorite">\
                                <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"]);
        };
        if (stations.length == 0) {
          $('#filestable').hide();
          $('#emptycontent').removeClass('hidden');
          $('.loading').addClass('hidden');
        } else {
          query_stations(stations);
        };
      });
  };

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

    station_ids.forEach(function (station_id, idx) {

      $.ajax({
        method: "GET",
        url: "https://www.radio-browser.info/webservice/json/stations/byid/"+station_ids[idx],
        dataType: 'json',
      }).success( function(data){
        station_array = station_array.concat(data);
        if (station_ids.length == (idx+1)){
          render_results(station_array);
        };
      });

    });

  };

  function radio_query(type, query){
    var offset = $('tbody > tr').length;
    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";
        break;
      case 2:
        var url = "https://www.radio-browser.info/webservice/json/stations/lastchange";
        break;
    };
    $.ajax({
      method: "POST",
      url: url,
      data: {
        name: query,
        limit: 20,
        offset: offset
      },
      dataType: 'json',
    }).success( function(data){
      render_results(data);
    });
  };

  function load_menu_state() {
    var menu_state = 0;
    var baseUrl = OC.generateUrl('/apps/radio/getMenuState');
    $.get(baseUrl, function ( data ) {
      if ("menu_state" in data) {
        menu_state = data["menu_state"];
      }
      switch_menu(menu_state);
      return true;
    });
  }

  function save_menu_state(menu_state) {
    var baseUrl = OC.generateUrl('/apps/radio/saveMenuState');
    var settings = {
      "menu_state": menu_state
    };
    $.ajax({
            url: baseUrl,
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(settings)
    }).done(function(data){
      return true;
    });
  }

  function switch_menu(type) {

      var state = Number(type);

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

      clearTimeout(searchTimeout);
      searchTimeout = setTimeout(function(){
        $('#app-navigation').find('li').removeClass("active");
        $("tbody > tr").remove();
        save_menu_state(state)
        switch (state) {
          case 0:
            history.pushState("", "", "#top");
            $('li.nav-files').addClass('active');
            radio_query(1);
            break;
          case 1:
            history.pushState("", "", "#recent");
            $('li.nav-recent').addClass('active');
            radio_query(2);
            break;
          case 2:
            history.pushState("", "", "#favorites");
            $('li.nav-favorites').addClass('active');
            action_load_favorites();
            break;
        }
      }, 500);
  };

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

  function debounce(func, wait, immediate) {
    var timeout;
    return function() {
      var context = this,
        args = arguments;
      var later = function() {
        timeout = null;
        if (!immediate) func.apply(context, args);
      };
      var callNow = immediate && !timeout;
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
      if (callNow) func.apply(context, args);
    };
  };

  // Volume slider
  $('#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;
      if (ui.value < 0.2) {
        $("#volumeicon").removeClass();
        $("#volumeicon").attr("class","silent");
      }
      if (ui.value > 0.5) {
        $("#volumeicon").removeClass();
        $("#volumeicon").attr("class","full");
      }
      if (ui.value < 0.5 && ui.value > 0.2) {
        $("#volumeicon").removeClass();
        $("#volumeicon").attr("class","mid");
      }
    }
  });

  $("#volumeslider").on("slidestop", debounce(function(e, ui) {
      save_volume_state(ui.value);
    }, 700)
  );

  function load_volume_state() {
    var volume_state = 0;
    var baseUrl = OC.generateUrl('/apps/radio/getVolumeState');
    $.get(baseUrl, function ( data ) {
      if ("volume_state" in data) {
        volume_state = data["volume_state"];
        if (volume_state == "") {
          player.volume = 1;
          $('#volumeslider').slider('value',1);
        } else {
          player.volume = Number(volume_state);
          $('#volumeslider').slider('value',Number(volume_state));
          if (volume_state < 0.2) {
            $("#volumeicon").removeClass();
            $("#volumeicon").attr("class","silent");
          }
          if (volume_state > 0.5) {
            $("#volumeicon").removeClass();
            $("#volumeicon").attr("class","full");
          }
          if (volume_state < 0.5 && volume_state > 0.2) {
            $("#volumeicon").removeClass();
            $("#volumeicon").attr("class","mid");
          }
        }
      }
      return true;
    });
  }

  function save_volume_state(volume_state) {
    var baseUrl = OC.generateUrl('/apps/radio/saveVolumeState');
    var settings = {
      "volume_state": volume_state
    };
    $.ajax({
            url: baseUrl,
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(settings)
    }).done(function(data){
      return true;
    });
  }

  // On app start, load top list
  if(window.location.hash) {
    var hash = String(window.location.hash.replace('#',''));
    switch(hash) {
      case "top":
        switch_menu(0);
        break;
      case "recent":
        switch_menu(1);
        break;
      case "favorites":
        switch_menu(2);
        break;
      default:
        switch_menu(0);
        break;
    }
  } else {
    load_menu_state();
  };

  // Load volume state
  load_volume_state();

});