Add NowPlayingIndicator component with animated audio bars

[Copilot]

Standalone component displaying the currently playing track with animated equalizer-style bars.

Components

• AudioBars.tsx - 6 animated bars with alternating red/blue colors, staggered timing
• NowPlayingIndicator.tsx - Track name + bars (when playing) + time display
• NowPlayingIndicatorDemo.tsx - Demo with mock tracks and play/pause toggle

CSS Animations

Added keyframe animations to global.css for the audio bars with varying speeds (0.5s-0.8s) and delays for organic movement.

Demo Page

Available at /indicator-demo for testing the component in isolation.

Usage

<NowPlayingIndicator
  isPlaying={true}
  currentTrack={track}
  currentTimeMs={currentTimeMs}
/>

Screenshot

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• telemetry.astro.build
  • Triggering command: /usr/local/bin/node /usr/local/bin/node /home/REDACTED/work/fucking-music/fucking-music/site/node_modules/.bin/astro build (dns block)
  • Triggering command: /usr/local/bin/node /usr/local/bin/node /home/REDACTED/work/fucking-music/fucking-music/site/node_modules/.bin/astro dev --host (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>feature: change current playing song to instead be an indicator at the bottom like this</issue_title>
<issue_description>Design this as a standalone compoennt. The deliverable should be the component that is in motion while playing

</issue_description>

Comments on the Issue (you are @copilot in this section)

@cdxker # Implementation Plan: Bottom Playing Indicator

Issue #15: Change current playing song to be an indicator at the bottom

Overview

Create a standalone component that displays the currently playing song as a compact indicator at the bottom of the screen, with animation while playing.

---

Implementation Steps

Step 1: Create NowPlayingIndicator Component

File: site/src/components/NowPlayingIndicator.tsx (new file)

import { useState, useEffect, useRef } from "react"
import { db } from "../lib/store"

interface NowPlayingIndicatorProps {
  isPlaying: boolean
  currentTrack: FuckingTrack | null
  currentPlaylist: FuckingPlaylist | null
  onTogglePlay: () => void
  progress: number // 0-100
}

export const NowPlayingIndicator = ({
  isPlaying,
  currentTrack,
  currentPlaylist,
  onTogglePlay,
  progress,
}: NowPlayingIndicatorProps) => {
  if (!currentTrack) return null

  return (
    <div className="fixed bottom-0 left-0 right-0 h-16 bg-black/90 backdrop-blur-sm border-t border-white/10">
      {/* Progress bar at top of indicator */}
      <div className="absolute top-0 left-0 right-0 h-1 bg-white/20">
        <div
          className="h-full bg-gradient-to-r from-[#3B5998] to-[#6B8CC7]"
          style={{ width: `${progress}%` }}
        />
      </div>

      <div className="flex items-center h-full px-4 gap-4">
        {/* Album art with animation */}
        <div className="relative">
          <img
            src={currentPlaylist?.track_cover_uri}
            className={`w-12 h-12 rounded ${isPlaying ? 'animate-pulse-slow' : ''}`}
            alt="Album cover"
          />
          {/* Animated bars overlay when playing */}
          {isPlaying && <AudioBars />}
        </div>

        {/* Track info */}
        <div className="flex-1 min-w-0">
          <p className="text-white font-medium truncate">
            {currentTrack.name}
          </p>
          <p className="text-white/60 text-sm truncate">
            {currentTrack.artists.join(", ")}
          </p>
        </div>

        {/* Play/Pause button */}
        <button
          onClick={onTogglePlay}
          className="p-2 rounded-full hover:bg-white/10"
        >
          {isPlaying ? <PauseIcon /> : <PlayIcon />}
        </button>
      </div>
    </div>
  )
}

Step 2: Create Audio Bars Animation Component

File: site/src/components/ui/AudioBars.tsx (new file)

Animated equalizer-style bars that move when music is playing:

export const AudioBars = () => {
  return (
    <div className="absolute bottom-1 right-1 flex gap-0.5 items-end h-3">
      <div className="w-1 bg-[#E85A4F] animate-audio-bar-1" />
      <div className="w-1 bg-[#E85A4F] animate-audio-bar-2" />
      <div className="w-1 bg-[#E85A4F] animate-audio-bar-3" />
      <div className="w-1 bg-[#E85A4F] animate-audio-bar-4" />
    </div>
  )
}

Step 3: Add CSS Animations

File: site/src/styles/global.css or inline in component

@keyframes audio-bar-1 {
  0%, 100% { height: 4px; }
  50% { height: 12px; }
}

@keyframes audio-bar-2 {
  0%, 100% { height: 8px; }
  50% { height: 4px; }
}

@keyframes audio-bar-3 {
  0%, 100% { height: 6px; }
  50% { height: 14px; }
}

@keyframes audio-bar-4 {
  0%, 100% { height: 10px; }
  50% { height: 6px; }
}

.animate-audio-bar-1 {
  animation: audio-bar-1 0.8s ease-in-out infinite;
}

.animate-audio-bar-2 {
  animation: audio-bar-2 0.6s ease-in-out infinite;
  animation-delay: 0.1s;
}

.animate-audio-bar-3 {
  animation: audio-bar-3 0.7s ease-in-out infinite;
  animation-delay: 0.2s;
}

.animate-audio-bar-4 {
  animation: audio-bar-4 0.5s ease-in-out infinite;
  animation-delay: 0.15s;
}

.animate-pulse-slow {
  animation: pulse 2s ease-in-out infinite;
}

Step 4: Add Tailwind Config for Custom Animations

File: site/tailwind.config.js (create if using Tailwind config, or add to CSS)

module.exports = {
  theme: {
    extend: {
      animation: {
        'audio-bar-1': 'audio-bar-1 0.8s ease-in-out infinite',
        'audio-bar-2': 'audio-bar-2 0.6s ease-in-out infinite 0.1s',
        'audio-bar-3': 'audio-bar-3 0.7s ease-in-out infinite 0.2s',
        'audio-bar-4': 'audio-bar-4 0.5s ease-in-out infinite 0.15s',
        'pulse-slow': 'pulse 2s ease-in-out infinite',
      },
    },
  },
}

Step 5: Create Demo Page for Component

File: `site/sr...

• Fixes feature: change current playing song to instead be an indicator at the bottom like this #15

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[cdxker]

@copilot rebase this branch against main a lot of changes have happened since

[Copilot]

@copilot rebase this branch against main a lot of changes have happened since

I'm unable to rebase this branch because rebasing requires force push, which is not available in my environment. You'll need to run the rebase manually:

git checkout copilot/add-now-playing-indicator
git fetch origin main
git rebase origin/main
git push --force

Alternatively, you can merge main into this branch instead, which I can do if you'd prefer that approach.

[cursor]

You have run out of free Bugbot PR reviews for this billing cycle. This will reset on January 20.

To receive reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.