musicshare/apps/web/src/components/NowPlayingCard.tsx

'use client';

import { AnimatePresence, motion } from 'motion/react';
import Link from 'next/link';
import { SERVICE_LABELS, timeAgo, type NowPlayingDTO, type StreamingService } from '@musicshare/shared';
import { Avatar } from './Avatar';
import { Equalizer } from './Equalizer';
import { TrackCard } from './TrackCard';

export function NowPlayingCard({
  np,
  preferred,
  showUser = true,
  pinned,
  onTogglePin,
}: {
  np: NowPlayingDTO;
  preferred: StreamingService | null | undefined;
  showUser?: boolean;
  pinned?: boolean;
  onTogglePin?: () => void;
}) {
  const sourceLabel = np.sourceApp ?? SERVICE_LABELS[np.source];
  return (
    <article className={`card np-card ${pinned ? 'pinned' : ''} ${np.isPlaying ? 'playing' : ''}`}>
      {/* The card glows with its album art; crossfades when the song changes. */}
      <AnimatePresence initial={false}>
        {np.track.artworkUrl && (
          <motion.div
            key={np.track.artworkUrl}
            className="np-backdrop"
            style={{ backgroundImage: `url("${np.track.artworkUrl}")` }}
            initial={{ opacity: 0 }}
            animate={{ opacity: 0.6 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.8 }}
          />
        )}
      </AnimatePresence>
      <header className="card-header">
        {showUser && (
          <Link href={`/u/${np.user.username}`} className="user-chip">
            <Avatar user={np.user} size={30} live={np.isPlaying} />
            <span className="user-name">{np.user.displayName ?? np.user.username}</span>
          </Link>
        )}
        <span className="row">
          <span className={`status ${np.isPlaying ? 'status-live' : ''}`}>
            {np.isPlaying && <Equalizer playing />}
            {np.isPlaying ? 'Listening now' : `Played ${timeAgo(np.updatedAt)}`}
            <span className="muted">
              {' · '}
              {np.sourceUrl ? (
                <a href={np.sourceUrl} target="_blank" rel="noreferrer">
                  {sourceLabel}
                </a>
              ) : (
                sourceLabel
              )}
            </span>
          </span>
          {onTogglePin && (
            <motion.button
              className={`pin ${pinned ? 'pinned' : ''}`}
              onClick={onTogglePin}
              aria-pressed={pinned}
              title={pinned ? 'Unpin from top of feed' : 'Pin to top of feed'}
              whileTap={{ scale: 0.7 }}
              animate={pinned ? { scale: [1, 1.45, 1], rotate: [0, -18, 0] } : { scale: 1, rotate: 0 }}
              transition={{ duration: 0.45, ease: 'easeOut' }}
            >
              {pinned ? '★' : '☆'}
            </motion.button>
          )}
        </span>
      </header>
      <AnimatePresence mode="wait" initial={false}>
        <motion.div
          key={np.track.id}
          initial={{ opacity: 0, y: 12, filter: 'blur(6px)' }}
          animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}
          exit={{ opacity: 0, y: -12, filter: 'blur(6px)' }}
          transition={{ duration: 0.35, ease: [0.22, 1, 0.36, 1] }}
        >
          <TrackCard track={np.track} preferred={preferred} />
        </motion.div>
      </AnimatePresence>
    </article>
  );
}