radiquum.github.io/static/script.js

function sleep(time) {
  return new Promise((resolve) => setTimeout(resolve, time));
}

const SYMBOL_DELAY = 150;

function deletePreviousTrack(newTrackName) {
  const trackName = document.getElementById("track-name");
  const prevTrackNameLen = trackName.innerHTML.length;
  trackName.style.setProperty("--cursor-animation", "none");

  let removed = 0;
  const interval = setInterval(() => {
    removed += 1;
    trackName.innerHTML = trackName.innerHTML.substring(
      0,
      prevTrackNameLen - removed
    );

    if (removed == prevTrackNameLen - 1) {
      clearInterval(interval);
      updateTrack(newTrackName);
      return true;
    }
  }, SYMBOL_DELAY);
}

function updateTrack(newTrackName) {
  const trackName = document.getElementById("track-name");
  const TrackNameLen = newTrackName.length;

  let added = 0;
  const interval = setInterval(() => {
    if (added < TrackNameLen) {
      trackName.innerHTML += newTrackName[added];
      console.log(added, TrackNameLen, newTrackName[added]);
      added += 1;
    }

    if (added == TrackNameLen) {
      clearInterval(interval);
      setTimeout(() => {
        trackName.innerHTML += '"';
      }, SYMBOL_DELAY);
      trackName.style.setProperty("--cursor-animation", "blink");
      setTimeout(() => {
        trackName.style.setProperty("--cursor-color", "transparent");
      }, SYMBOL_DELAY * 3);
      return true;
    }
  }, SYMBOL_DELAY);
}

async function updatePlayingTrack() {
  const trackName = document.getElementById("track-name");
  const prevTrackName = trackName.innerHTML;
  const prevTrackNameLen = trackName.innerHTML.length;

  fetch("https://lastfm-last-played.biancarosa.com.br/radiquum/latest-song")
    .then((res) => {
      if (!res.ok) {
        throw new Error("Error Fetching Data");
      }
      return res.json();
    })
    .then((data) => {
      if (
        prevTrackName != `"${data.track.artist["#text"]} - ${data.track.name}"`
      ) {
        trackName.style.setProperty("--cursor-color", "#fff");
        trackName.style.setProperty("--cursor-animation", "blink");

        setTimeout(() => {
          deletePreviousTrack(
            `${data.track.artist["#text"]} - ${data.track.name}`
          );
        }, SYMBOL_DELAY * 4);
      }
    })
    .catch((err) => {
      deletePreviousTrack("ERROR: last.fm is not reachable");
      console.log(err);
    });
}

window.onload = () => {
  updatePlayingTrack();
  setInterval(updatePlayingTrack, 180000);
};

function getScrollPosition() {
  const height =
    document.documentElement.scrollHeight -
    document.documentElement.clientHeight;
  const windowScroll = document.documentElement.scrollTop;
  const scrolled = (windowScroll / height) * 100;
  return Math.floor(scrolled);
}

const header = document.getElementById("header");
let last_Y_pos = 0;
let header_opacity = 0;

window.onscroll = () => {
  let scrollPosition = getScrollPosition();

  if (scrollPosition < 1) {
    header.style.display = "none";
  } else {
    header.style.display = "block";
  }

  if (window.scrollY > last_Y_pos && scrollPosition > 1) {
    header_opacity += 0.1;
  } else if (window.scrollY < last_Y_pos && scrollPosition < 1)
    header_opacity -= 0.1;
  last_Y_pos = window.scrollY;

  if (header_opacity > 1) {
    header_opacity = 1;
  } else if (header_opacity < 0) {
    header_opacity = 0;
  }

  header.style.setProperty("--header-opacity", `${header_opacity.toFixed(2)}`);
};