@supasayan/ytm 1.0.0

package/client/src/components/Search/SongCard.css

@@ -0,0 +1,296 @@
+.song-card {
+  display: flex;
+  align-items: center;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 0.75rem;
+  gap: 1rem;
+  transition: all var(--transition-normal);
+}
+
+.song-card:hover {
+  background: var(--bg-tertiary);
+  border-color: var(--accent-primary);
+  box-shadow: var(--shadow-glow);
+  transform: scale(1.01);
+}
+
+.song-card.playing {
+  border-color: var(--accent-primary);
+  box-shadow: var(--shadow-glow);
+  background: var(--bg-tertiary);
+}
+
+.song-card-body {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  flex: 1;
+  min-width: 0;
+  cursor: pointer;
+}
+
+.song-thumbnail {
+  width: 60px;
+  height: 60px;
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+  flex-shrink: 0;
+  background: var(--bg-tertiary);
+  position: relative;
+}
+
+.song-thumbnail img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.thumbnail-hover-hint {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  opacity: 0;
+  transition: opacity var(--transition-fast);
+  z-index: 5;
+}
+
+.song-thumbnail:hover .thumbnail-hover-hint {
+  opacity: 1;
+}
+
+.equalizer-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  border-radius: var(--radius-sm);
+}
+
+.equalizer-overlay .bar {
+  width: 4px;
+  background: var(--accent-primary);
+  border-radius: 2px;
+  animation: equalizerBounce 1s ease-in-out infinite alternate;
+}
+
+.equalizer-overlay .bar1 { animation-delay: 0.1s; }
+.equalizer-overlay .bar2 { animation-delay: 0.4s; }
+.equalizer-overlay .bar3 { animation-delay: 0.2s; }
+
+.placeholder-thumb {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
+}
+
+.song-info {
+  flex: 1;
+  min-width: 0; /* allows text truncation */
+}
+
+.song-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0 0 0.25rem 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.song-meta {
+  font-size: 13px;
+  color: var(--text-secondary);
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.download-btn {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 1px solid var(--accent-primary);
+  color: var(--accent-primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--transition-fast);
+  flex-shrink: 0;
+  margin-right: 0.5rem;
+}
+
+.download-btn:hover {
+  background: var(--accent-primary);
+  color: white;
+  transform: scale(1.15) rotate(5deg);
+}
+
+.download-btn:active {
+  transform: scale(0.9);
+}
+
+.progress-ring {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-sm);
+  background: var(--bg-tertiary);
+  box-shadow: var(--shadow-glow);
+  flex-shrink: 0;
+  margin-right: 0.5rem;
+}
+
+.progress-ring__circle {
+  transition: stroke-dashoffset 0.3s ease;
+  transform: rotate(-90deg);
+  transform-origin: 50% 50%;
+}
+
+.progress-ring__circle.pulsing {
+  animation: pulse 1.5s infinite ease-in-out;
+}
+
+.check-icon, .error-icon {
+  animation: checkPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+}
+
+@keyframes checkPop {
+  0% { transform: scale(0); }
+  50% { transform: scale(1.3); }
+  100% { transform: scale(1); }
+}
+
+/* --- Hover Modal Styles --- */
+
+.song-hover-modal-overlay {
+  perspective: 1000px;
+}
+
+.song-hover-modal {
+  background: rgba(22, 22, 26, 0.85); /* Slightly darker for contrast */
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: var(--radius-lg);
+  padding: 1rem;
+  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--accent-primary);
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  animation: modalPopUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+  transform-origin: center center;
+}
+
+@keyframes modalPopUp {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.9) translateY(15px) rotateX(10deg);
+  }
+  100% {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1) translateY(0) rotateX(0);
+  }
+}
+
+.hover-modal-hero {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  background: var(--bg-tertiary);
+  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
+}
+
+.hover-modal-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  animation: imageFadeIn 0.3s ease;
+}
+
+@keyframes imageFadeIn {
+  from { opacity: 0; transform: scale(1.05); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+.hover-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-secondary);
+}
+
+.hover-modal-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 0 0.25rem;
+}
+
+.hover-modal-title {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0;
+  line-height: 1.3;
+}
+
+.hover-modal-details {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.hover-detail-item {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+
+.hover-detail-item svg {
+  color: var(--accent-primary);
+  opacity: 0.8;
+}
+
+.hover-playing-badge {
+  position: absolute;
+  top: 0.75rem;
+  right: 0.75rem;
+  background: rgba(16, 185, 129, 0.2);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  border: 1px solid rgba(16, 185, 129, 0.4);
+  color: #10b981;
+  padding: 0.35rem 0.6rem;
+  border-radius: var(--radius-sm);
+  font-size: 0.75rem;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+}

package/client/src/components/Search/SongCard.jsx

@@ -0,0 +1,204 @@
+import { useRef, useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { Music, Disc3, Clock, Maximize2 } from 'lucide-react';
+import './SongCard.css';
+
+function formatDuration(seconds) {
+  if (!seconds) return '0:00';
+  const m = Math.floor(seconds / 60);
+  const s = seconds % 60;
+  return `${m}:${s.toString().padStart(2, '0')}`;
+}
+
+export default function SongCard({ song, onDownload, onFlyAnimation, downloadStatus, downloadPercent, onPlay, isCurrentlyPlaying }) {
+  const buttonRef = useRef(null);
+  const cardRef = useRef(null);
+  const [showModal, setShowModal] = useState(false);
+  const [modalRect, setModalRect] = useState(null);
+
+  const handleDownloadClick = () => {
+    if (buttonRef.current && onFlyAnimation) {
+      const rect = buttonRef.current.getBoundingClientRect();
+      onFlyAnimation({
+        thumbnailSrc: song.thumbnail,
+        startRect: rect
+      });
+    }
+    onDownload(song);
+  };
+
+  const handleThumbnailClick = (e) => {
+    e.stopPropagation();
+    if (cardRef.current) {
+      setModalRect(cardRef.current.getBoundingClientRect());
+      setShowModal(true);
+    }
+  };
+
+  return (
+    <>
+      <div 
+        ref={cardRef}
+        className={`song-card liquid-glass ${isCurrentlyPlaying ? 'playing' : ''}`}
+      >
+      <div 
+        className="song-card-body" 
+        onClick={(e) => {
+          if (onPlay) {
+            const thumbEl = e.currentTarget.querySelector('.song-thumbnail');
+            const rect = thumbEl ? thumbEl.getBoundingClientRect() : e.currentTarget.getBoundingClientRect();
+            onPlay(song, rect);
+          }
+        }}
+        title="Play song"
+      >
+        <div 
+          className="song-thumbnail" 
+          onClick={handleThumbnailClick}
+          title="Click to view details"
+        >
+          {song.thumbnail ? (
+            <>
+              <img src={song.thumbnail} alt={song.title} />
+              {isCurrentlyPlaying && (
+                <div className="equalizer-overlay">
+                  <div className="bar bar1"></div>
+                  <div className="bar bar2"></div>
+                  <div className="bar bar3"></div>
+                </div>
+              )}
+            </>
+          ) : (
+            <div className="placeholder-thumb">
+              <Music size={24} className="placeholder-icon" />
+            </div>
+          )}
+          <div className="thumbnail-hover-hint">
+            <Maximize2 size={20} />
+          </div>
+        </div>
+        
+        <div className="song-info">
+          <h3 className="song-title">{song.title}</h3>
+          <p className="song-meta">
+            {song.artist} {song.album && `• ${song.album}`} • {formatDuration(song.duration)}
+          </p>
+        </div>
+      </div>
+
+      {(!downloadStatus) && (
+        <button 
+          ref={buttonRef}
+          className="download-btn" 
+          onClick={handleDownloadClick} 
+          title="Download"
+        >
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+            <polyline points="7 10 12 15 17 10"></polyline>
+            <line x1="12" y1="15" x2="12" y2="3"></line>
+          </svg>
+        </button>
+      )}
+
+      {(downloadStatus === 'queued' || downloadStatus === 'downloading') && (() => {
+        const pctFloat = parseFloat(downloadPercent) || 0;
+        const radius = 16;
+        const circumference = 2 * Math.PI * radius;
+        const strokeDashoffset = circumference - (pctFloat / 100) * circumference;
+        
+        return (
+          <div className="progress-ring">
+            <svg width="40" height="40" viewBox="0 0 40 40">
+              <circle cx="20" cy="20" r={radius} fill="none" stroke="var(--border)" strokeWidth="3" />
+              <circle 
+                className={`progress-ring__circle ${downloadStatus === 'queued' ? 'pulsing' : ''}`}
+                cx="20" cy="20" r={radius} 
+                fill="none" 
+                stroke="var(--accent-primary)" 
+                strokeWidth="3"
+                strokeDasharray={circumference}
+                strokeDashoffset={strokeDashoffset}
+                strokeLinecap="round"
+              />
+            </svg>
+          </div>
+        );
+      })()}
+
+      {downloadStatus === 'completed' && (
+        <div className="progress-ring">
+          <svg className="check-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#10b981" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
+            <polyline points="20 6 9 17 4 12"></polyline>
+          </svg>
+        </div>
+      )}
+
+      {downloadStatus === 'error' && (
+        <div className="progress-ring">
+          <svg className="error-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ef4444" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
+            <line x1="18" y1="6" x2="6" y2="18"></line>
+            <line x1="6" y1="6" x2="18" y2="18"></line>
+          </svg>
+        </div>
+      )}
+      </div>
+
+      {showModal && modalRect && createPortal(
+        <div 
+          className="song-hover-modal-overlay"
+          onClick={() => setShowModal(false)}
+          style={{
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            width: '100vw',
+            height: '100vh',
+            pointerEvents: 'auto',
+            zIndex: 99999,
+          }}
+        >
+          <div 
+            className="song-hover-modal liquid-glass"
+            onClick={(e) => e.stopPropagation()}
+            style={{
+              position: 'absolute',
+              top: `${modalRect.top + modalRect.height / 2}px`,
+              left: `${modalRect.left + modalRect.width / 2}px`,
+              width: `${Math.max(350, modalRect.width * 1.15)}px`,
+              transform: 'translate(-50%, -50%) scale(1)'
+            }}
+          >
+            <div className="hover-modal-hero">
+              {song.thumbnail ? (
+                <img src={song.thumbnail.replace('w120-h120', 'w480-h480')} alt={song.title} className="hover-modal-img" />
+              ) : (
+                <div className="hover-placeholder"><Music size={64} /></div>
+              )}
+              {isCurrentlyPlaying && (
+                <div className="hover-playing-badge">
+                  <div className="equalizer-overlay active">
+                    <div className="bar bar1"></div>
+                    <div className="bar bar2"></div>
+                    <div className="bar bar3"></div>
+                  </div>
+                  <span>PLAYING</span>
+                </div>
+              )}
+            </div>
+            
+            <div className="hover-modal-content">
+              <h2 className="hover-modal-title">{song.title}</h2>
+              <div className="hover-modal-details">
+                <span className="hover-detail-item"><Music size={14} /> {song.artist}</span>
+                {song.album && <span className="hover-detail-item"><Disc3 size={14} /> {song.album}</span>}
+                <span className="hover-detail-item"><Clock size={14} /> {formatDuration(song.duration)}</span>
+              </div>
+            </div>
+          </div>
+        </div>,
+        document.body
+      )}
+    </>
+  );
+}