whats-that-music/overlay/index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Now Playing Overlay</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
<style>
  *, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    background: transparent;
    overflow: hidden;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
  }

  #overlay {
    position: fixed;
    bottom: 24px;
    left: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px 10px 14px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    transform: translateX(-120%);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    max-width: 420px;
  }

  #overlay.visible {
    transform: translateX(0);
    opacity: 1;
  }

  /* Equalizer bars */
  .equalizer {
    display: flex;
    align-items: flex-end;
    gap: 2.5px;
    height: 18px;
    flex-shrink: 0;
  }

  .equalizer .bar {
    width: 3px;
    border-radius: 1.5px;
    background: #1ed760;
    animation: eq-bounce 1s ease-in-out infinite;
  }

  .equalizer .bar:nth-child(1) {
    height: 60%;
    animation-delay: 0s;
  }
  .equalizer .bar:nth-child(2) {
    height: 100%;
    animation-delay: 0.15s;
  }
  .equalizer .bar:nth-child(3) {
    height: 40%;
    animation-delay: 0.3s;
  }
  .equalizer .bar:nth-child(4) {
    height: 80%;
    animation-delay: 0.45s;
  }

  @keyframes eq-bounce {
    0%, 100% { transform: scaleY(0.3); }
    50% { transform: scaleY(1); }
  }

  .equalizer.paused .bar {
    animation-play-state: paused;
    transform: scaleY(0.3);
  }

  /* Album art */
  .album-art {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.1);
  }

  /* Text container */
  .track-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    padding-right: 4px;
  }

  .track-title {
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .track-artist {
    color: rgba(255, 255, 255, 0.65);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Transition for content swap */
  .track-info.swapping {
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .track-info.swapped {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
</style>
</head>
<body>
<div id="overlay">
  <div class="equalizer" id="equalizer">
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
  </div>
  <img class="album-art" id="albumArt" src="" alt="">
  <div class="track-info" id="trackInfo">
    <div class="track-title" id="trackTitle"></div>
    <div class="track-artist" id="trackArtist"></div>
  </div>
</div>

<script>
(function () {
  const overlay = document.getElementById('overlay');
  const albumArt = document.getElementById('albumArt');
  const trackTitle = document.getElementById('trackTitle');
  const trackArtist = document.getElementById('trackArtist');
  const trackInfo = document.getElementById('trackInfo');
  const equalizer = document.getElementById('equalizer');

  let currentTrackKey = '';
  let ws = null;
  let reconnectTimer = null;

  function updateDisplay(data) {
    const hasTrack = data.title && data.isPlaying;
    const newTrackKey = data.title + '|' + data.artist;

    if (!hasTrack) {
      overlay.classList.remove('visible');
      equalizer.classList.add('paused');
      return;
    }

    // If the track changed, do a swap animation
    if (newTrackKey !== currentTrackKey) {
      currentTrackKey = newTrackKey;

      // If already visible, animate out then in
      if (overlay.classList.contains('visible')) {
        trackInfo.classList.add('swapping');
        trackInfo.classList.remove('swapped');

        setTimeout(() => {
          applyTrackData(data);
          trackInfo.classList.remove('swapping');
          trackInfo.classList.add('swapped');
        }, 200);
      } else {
        applyTrackData(data);
        trackInfo.classList.add('swapped');
      }
    }

    // Show overlay and set equalizer state
    overlay.classList.add('visible');
    equalizer.classList.toggle('paused', !data.isPlaying);
  }

  function applyTrackData(data) {
    trackTitle.textContent = data.title || '';
    trackArtist.textContent = data.artist || '';

    if (data.albumArt) {
      albumArt.src = '/api/image-proxy?url=' + encodeURIComponent(data.albumArt);
      albumArt.style.display = 'block';
    } else {
      albumArt.style.display = 'none';
    }
  }

  // Derive WebSocket URL from page location
  function getWsUrl() {
    const proto = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
    return proto + '//' + window.location.host;
  }

  function connectWebSocket() {
    if (ws) {
      try { ws.close(); } catch (e) {}
    }

    try {
      ws = new WebSocket(getWsUrl());
    } catch (e) {
      scheduleReconnect();
      return;
    }

    ws.addEventListener('open', () => {
      if (reconnectTimer) {
        clearTimeout(reconnectTimer);
        reconnectTimer = null;
      }
    });

    ws.addEventListener('message', (event) => {
      try {
        const data = JSON.parse(event.data);
        updateDisplay(data);
      } catch (e) {}
    });

    ws.addEventListener('close', () => {
      scheduleReconnect();
    });

    ws.addEventListener('error', () => {
      try { ws.close(); } catch (e) {}
    });
  }

  function scheduleReconnect() {
    if (reconnectTimer) return;
    reconnectTimer = setTimeout(() => {
      reconnectTimer = null;
      connectWebSocket();
    }, 5000);
  }

  // Initial fetch to get current state
  async function fetchInitialState() {
    try {
      const baseUrl = window.location.origin;
      const resp = await fetch(baseUrl + '/api/now-playing');
      if (resp.ok) {
        const data = await resp.json();
        updateDisplay(data);
      }
    } catch (e) {}
  }

  // Start
  fetchInitialState();
  connectWebSocket();
})();
</script>
</body>
</html>