codey.lol/public/scripts/player.js

var domReady = false;
var domInterval = null;
var isPlaying = false;
var canPlay = false;
document.addEventListener('astro:page-load', function() {
  domInterval = setInterval(() => { 
    /* Patch */
    if ($(".play")) {
      domReady = true;
      try { 
        sound.stop();
      } catch (e) { }
    }
    if (domReady) {
      initialize();
      clearInterval(domInterval);
    }
  }, 500)
});

initialize = () => {
  (function () {
    var sound = new Howl({
      src: ["https://stream.codey.lol/sfm.ogg"],
      html5: true,
      // onend: () => { sound.unload(); }
    });
    
    let currentTime = 0;
    let currentDuration = 0;
    let currentUUID = null;
    const title = $('.music-player__title');
    const author = $('.music-player__author');
    const cover = $('.cover');
    const genre = $('.music-player__genre');
    const playBtn = $('#play');
    const progressBar = $('#length');
    const currentTimeIndicator = $('.music-time__current');
    const leftTimeIndicator = $('.music-time__last');
    
    
    const fail = (type="soft") => {
      $(title).text('Offline');
      $(author).text('');
      $(genre).text('');
      $(cover).prop('src', '/images/radio_art_default.jpg')
      $(genre).hide();
      $(currentTimeIndicator).text('0:00');
      $(leftTimeIndicator).text('0:00');
      if (type==="hard") {
        canPlay = false;
      }
    }
    
    const getCurrentTrack = () => {
      $.ajax({
        url: API_URL+'/radio/np',
        method: "POST",
        contentType: "application/json"
      }).done(function(data) {
        if (data.artist == "N/A" && data.song == "N/A") {
          // server issue/not playing
          return fail("hard");
        }
        if (currentUUID == data.uuid) {
          currentTime = data.elapsed;
          currentDuration = data.duration;          
          return changeBar(); // no change
        }
        currentUUID = data.uuid;
        $(title).text(data.song);
        author_text = data.artist;
        $(author).text(author_text);
        if (data.genre && data.genre !== "N/A") {
          canPlay = true;
          $(genre).text(data.genre);
          if (! $(genre).is(':visible')) {
            $(genre).show();
          }
        } else { // API response does not contain genre
          if ($(genre).is(':visible')) {
            $(genre).hide();
          }
        }
        $(cover).prop('src', API_URL+'/radio/album_art?'+Date.now());
        changeBar();
      }).fail(function (e, eData, jqXHR) {
        return fail();
      });
    }
    
    getCurrentTrack();
    setInterval(() => { getCurrentTrack(); }, 1000);
    
    const changeBar = () => {
      const percentage = (currentTime / currentDuration).toFixed(3);
      $(progressBar).css('transition', "");
      
      //set current time
      const minute = Math.floor(currentTime / 60);
      const second = Math.floor(currentTime % 60);
      const leftTime = currentDuration - currentTime;
      $(currentTimeIndicator).html(("0" + minute).substr(-2) + ":" + ("0" + second).substr(-2));
      
      //set left time
      const leftMinute = Math.floor(leftTime / 60);
      const leftSecond = Math.floor(leftTime % 60);
      
      $(leftTimeIndicator).html(
        ("0" + leftMinute).substr(-2) + ":" + ("0" + leftSecond).substr(-2));
        
        //set time bar
        $(progressBar).css('width', percentage * 100 + "%");
      }
      
      const showTime = () => {
        timer = setInterval(() => changeBar(), 500);
      }
      
      const togglePlayback = () => {
        if (window.isPlaying) { 
          sound.stop();
          sound.unload();
        } else {
          sound.play();
        }
      }
      
      /** 
      * Exports
      */
      
      window.togglePlayback = togglePlayback;
      window.sound = sound;
    })();
  }