ipod-player.js

// ipod-player.js by kkul.neocites.org

// ---- CONFIG: list of songs (title, artist, cover URL, optional tooltip) ----
const songs = [
  {
    title: "your song name goes here",
    artist: "your artist goes here",
    cover: "/path/to-your-picture.jpeg",
    tooltip: "song name ♡ artist name"
  },
  {
    title: "your song name goes here",
    artist: "your artist goes here",
    cover: "/path/to-your-picture.jpeg",
    tooltip: "song name ♡ artist name"
  },
  {
    title: "your song name goes here",
    artist: "your artist goes here",
    cover: "/path/to-your-picture.jpeg",
    tooltip: "song name ♡ artist name"
  },
  {
    title: "your song name goes here",
    artist: "your artist goes here",
    cover: "/path/to-your-picture.jpeg",
    tooltip: "song name ♡ artist name"
  }
];

// ---- Helper: pick a random index not equal to previous ----
let previousIndex = -1;
function getRandomSongIndex() {
  if (songs.length === 0) return -1;
  if (songs.length === 1) return 0;

  let index = Math.floor(Math.random() * songs.length);
  while (index === previousIndex) {
    index = Math.floor(Math.random() * songs.length);
  }
  previousIndex = index;
  return index;
}

// ---- TOOLTIP + MARQUEE setup function ----
function setMarqueeText(container, text, tooltipText) {
  if (!container) return;

  const safeText = String(text ?? "");

  // --- Marquee track with two copies for looping ---
  container.innerHTML = `
    <div class="marquee-track">
      <span>${safeText}</span>
      <span>${safeText}</span>
    </div>
  `;

  // --- TOOLTIP: ONLY set title on the song-name container ---
  if (container.classList.contains("song-name")) {
    // set title to either custom tooltip or the song text
    container.setAttribute("title", tooltipText || safeText);

    // --- IMPORTANT: initialize SMT tooltip on this container (only once) ---
    // The site's plugin normally runs on selected elements at page load (e.g. $("a[title]")...),
    // so dynamically-added title attributes on other elements need the plugin attached.
    try {
      // if jQuery + style_my_tooltips exist, call it on this element
      if (window.jQuery && typeof jQuery.fn.style_my_tooltips === "function") {
        // avoid double-initializing by checking a class flag we set
        if (!container.classList.contains("smt-initialized")) {
          // use the same options your site uses for other elements
          jQuery(container).style_my_tooltips({
            tip_follows_cursor: true,
            tip_delay_time: 90,
            tip_fade_speed: 600,
            attribute: "title"
          });
          container.classList.add("smt-initialized");
        } else {
          // already initialized previously — plugin reads title on mouseover, so nothing else needed
        }
      }
    } catch (e) {
      // if anything fails, silently continue (native title will still exist as fallback)
      // console.warn("smt init failed", e);
    }
  } else {
    // ensure artist (or others) do NOT have title set
    container.removeAttribute("title");
  }

  // restart CSS animation after DOM update
  const track = container.querySelector(".marquee-track");
  if (track) {
    track.style.animation = "none";
    void track.offsetWidth;
    track.style.animation = "";
  }

  // Pause animation on hover (attach to container — static element)
  if (!container._hoverFixed) {
    container._hoverFixed = true;

    container.addEventListener("mouseenter", () => {
      if (track) track.style.animationPlayState = "paused";
    });
    container.addEventListener("mouseleave", () => {
      if (track) track.style.animationPlayState = "running";
    });

    // also support touch devices
    container.addEventListener("touchstart", () => {
      if (track) track.style.animationPlayState = "paused";
    }, { passive: true });
    container.addEventListener("touchend", () => {
      if (track) track.style.animationPlayState = "running";
    }, { passive: true });
  }
}

// ---- Update the DOM to show the chosen song ----
function updateSong() {
  const index = getRandomSongIndex();
  if (index === -1) return;

  const song = songs[index];

  // album art element (background-image)
  const art = document.querySelector(".album-art");
  if (art) {
    art.style.backgroundImage = `url("${song.cover}")`;
  }

  // song title container
  const titleContainer = document.querySelector(".song-name");
  if (titleContainer) {
    setMarqueeText(titleContainer, song.title, song.tooltip);
  }

  // artist container (no tooltip)
  const artistContainer = document.querySelector(".artist");
  if (artistContainer) {
    setMarqueeText(artistContainer, song.artist, null);
  }
}

// ---- Initialize on DOM ready ----
document.addEventListener("DOMContentLoaded", () => {
  updateSong();

  // Change every 1 hour (3600000 ms)
  // setInterval(updateSong, 5000); // <-- use for testing only
  setInterval(updateSong, 3600000);
});