nextcloud-app-radio/js/player.js

var MODULE = (function (radio) {

  var last_volume = 0;

  var sound = new Howl({
    src: "https://blog.project-insanity.org/106fm",
    html5: true,
    volume: 0
  });

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

  	return (overflowX || overflowY);
  }

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

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

  /* Playbutton click */
  $('#playbutton').click(function() {
    if (typeof radio.sound !== "undefined") {
      if (radio.sound.playing()) {
        radio.sound.pause();
      } else {
        radio.sound.play();
      }
    };
  });

  radio.action_play = function(stationid, stationname){
    $('#playbutton').attr("class", "buffering");
    $('#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 (radio.isElementOverflowing(element)) {
      radio.wrapContentsInMarquee(element);
    };
    if (!radio.scheduled){
      radio.schedule_get_metadata(stationid);
    };
    if (typeof radio.sound !== "undefined") {
        var volume_state = $('#volumeslider').slider('value');
        radio.sound.fade(volume_state, 0, 500);
    };
    $.ajax({
      method: "GET",
      url: "https://www.radio-browser.info/webservice/v2/json/url/"+stationid,
      dataType: 'json',
      success: function(data){
        var streamurl = data['url'];
        radio.sound = new Howl({
          src: streamurl,
          html5: true,
          volume: 0,
          onfade: function() {
            if (this.volume() == 0) {
              this.unload();
            }
          },
          onplay: function() {
            $('#playbutton').attr("class", "pause");
          },
          onpause: function() {
            $('#playbutton').attr("class", "play");
          },
          onload: function() {
            $('#playbutton').attr("class", "buffering");
          }
        });
        sound_id = radio.sound.play();
        radio.sound.once('play', function() {
          var volume_state = $('#volumeslider').slider('value');
          radio.sound.fade(0, volume_state, 1000);
        });
      }
    });
  };

  radio.debounce = function(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: 0.5,
    min: 0,
    max: 1,
    range: 'min',
    animate: true,
    step: .05,
    change: function(e, ui) {
      if (typeof radio.sound !== "undefined") {
        radio.sound.volume(ui.value);
      }
      if (ui.value < 0.1) {
        $("#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.1) {
        $("#volumeicon").removeClass();
        $("#volumeicon").attr("class","mid");
      }
    }
  });

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

  $("#volumeicon").on("click", function(e) {
    var current_volume = $('#volumeslider').slider('value');
    if (current_volume > 0) {
      last_volume = current_volume;
      $('#volumeslider').slider('value',0);
      radio.save_volume_state(0);
    } else {
      if (!last_volume == 0) {
        $('#volumeslider').slider('value',last_volume);
        radio.save_volume_state(last_volume);
      } else {
        $('#volumeslider').slider('value',1);
        radio.save_volume_state(1);
      }
    }
  });

  radio.load_volume_state = function(){
    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 == "") {
          last_volume = 1;
          $('#volumeslider').slider('value',1);
        } else {
          last_volume = volume_state;
          $('#volumeslider').slider('value',Number(volume_state));
        }
      }
      return true;
    });
  }

  radio.save_volume_state = function(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;
    });
  }

  // Load volume state
  radio.load_volume_state();

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