@supasayan/ytm 1.0.0

package/client/src/components/Playlist/PlaylistView.jsx

@@ -0,0 +1,104 @@
+import SongCard from '../Search/SongCard';
+import { X } from 'lucide-react';
+import { useState } from 'react';
+import './PlaylistView.css';
+
+export default function PlaylistView({ playlist, isLoading, onDownloadAll, onDownloadSingle, onFlyAnimation, downloads, onPlay, currentSong, onRemoveTrack }) {
+  const [removingIds, setRemovingIds] = useState(new Set());
+
+  const handleRemove = (videoId) => {
+    setRemovingIds(prev => {
+      const next = new Set(prev);
+      next.add(videoId);
+      return next;
+    });
+
+    setTimeout(() => {
+      if (onRemoveTrack) {
+        onRemoveTrack(videoId);
+      }
+      setRemovingIds(prev => {
+        const next = new Set(prev);
+        next.delete(videoId);
+        return next;
+      });
+    }, 350);
+  };
+
+  if (isLoading) {
+    return (
+      <div className="playlist-view">
+        <div className="playlist-header skeleton-header" />
+        <div className="playlist-tracks">
+          {[...Array(6)].map((_, i) => (
+            <div key={i} className="skeleton-card liquid-glass">
+              <div className="skeleton-thumbnail" />
+              <div className="skeleton-info">
+                <div className="skeleton-line skeleton-title-line" />
+                <div className="skeleton-line skeleton-meta-line" />
+              </div>
+              <div className="skeleton-button" />
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (!playlist) return null;
+
+  return (
+    <div className="playlist-view liquid-glass">
+      <div className="playlist-header">
+        <div className="playlist-info">
+          <h2>{playlist.title}</h2>
+          <p>{playlist.trackCount} tracks</p>
+        </div>
+        <button 
+          className="download-all-btn" 
+          onClick={() => onDownloadAll(playlist.tracks)}
+        >
+          ⬇ Download All
+        </button>
+      </div>
+
+      <div className="playlist-tracks">
+        {playlist.tracks.map((song, i) => {
+          const dlEntry = downloads ? Array.from(downloads.values()).find(d => d.videoId === song.videoId) : null;
+          const isPlaying = currentSong?.videoId === song.videoId;
+          const isRemoving = removingIds.has(song.videoId);
+          return (
+            <div 
+              className={`track-card-wrapper stagger-item ${isPlaying ? 'playing' : ''} ${isRemoving ? 'removing' : ''}`}
+              key={song.videoId || i}
+              style={{ 
+                animation: isRemoving
+                  ? 'cardExit 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards'
+                  : 'fadeSlideUp 0.4s ease-out backwards', 
+                animationDelay: isRemoving ? '0ms' : `${i * 40}ms` 
+              }}
+            >
+              <span className="track-number-badge">{i + 1}</span>
+              <button 
+                className="track-remove-btn"
+                onClick={() => handleRemove(song.videoId)}
+                title="Remove song from list"
+              >
+                <X size={12} />
+              </button>
+              <SongCard 
+                song={song} 
+                onDownload={onDownloadSingle} 
+                onFlyAnimation={onFlyAnimation}
+                downloadStatus={dlEntry?.status || null}
+                downloadPercent={dlEntry?.percent || '0%'}
+                onPlay={(song, rect) => onPlay(song, rect, playlist.tracks)}
+                isCurrentlyPlaying={isPlaying}
+              />
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,163 @@
+.search-bar-wrapper {
+  margin-bottom: 2rem;
+  min-height: 84px; /* matches the size of container to avoid layout shift */
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+.search-bar-container {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1.25rem 2rem; /* slightly larger side padding for pill shape */
+  border-radius: 50px; /* Pill shape */
+  width: 100%;
+  max-width: 600px; /* Make it smaller so it floods quicker visually */
+  background: var(--glass-bg);
+  backdrop-filter: blur(var(--glass-blur));
+  -webkit-backdrop-filter: blur(var(--glass-blur));
+  border: 1px solid var(--glass-border);
+  box-shadow: var(--glass-shadow);
+  position: relative;
+  overflow: hidden;
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+  animation: scalePop 0.4s ease-out;
+}
+
+.search-bar-container.floating {
+  position: fixed !important;
+  top: 75px; /* right below sticky header (70px) */
+  left: 50%;
+  transform: translateX(-50%);
+  width: 90%;
+  max-width: 600px;
+  z-index: 99;
+  border-color: var(--accent-primary);
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
+  border-radius: 50px;
+  padding: 0.85rem 1.75rem;
+  background: var(--bg-secondary); /* make it opaque when floating for visibility */
+  animation: slideDownFade 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+@keyframes slideDownFade {
+  from {
+    transform: translate(-50%, -20px) scale(0.95);
+    opacity: 0;
+  }
+  to {
+    transform: translate(-50%, 0) scale(1);
+    opacity: 1;
+  }
+}
+
+.search-bar-container::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: var(--glass-highlight);
+  pointer-events: none;
+  z-index: 1;
+}
+
+.search-countdown-flood {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 0%;
+  background: linear-gradient(
+    to right, 
+    rgba(99, 102, 241, 0.05) 0%, 
+    rgba(139, 92, 246, 0.2) 100%
+  );
+  animation: floodWidth 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+  z-index: 1;
+  pointer-events: none;
+  mix-blend-mode: screen;
+}
+
+/* Wavy liquid leading edge */
+.search-countdown-flood::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  right: -30px; /* Center it on the right edge */
+  width: 60px;
+  height: 120px; /* Taller than the bar so the rotation completely covers the vertical space */
+  background: rgba(236, 72, 153, 0.6); /* Vibrant fluorescent pink */
+  border-radius: 43%; /* The magical value that makes it wobble like a wave */
+  transform-origin: center center;
+  animation: liquidRotate 1.5s linear infinite;
+  box-shadow: 
+    -10px 0 20px rgba(236, 72, 153, 0.5),
+    0 0 30px rgba(139, 92, 246, 0.8);
+}
+
+@keyframes liquidRotate {
+  0% { transform: translateY(-50%) rotate(0deg); }
+  100% { transform: translateY(-50%) rotate(360deg); }
+}
+
+@keyframes floodWidth {
+  0% { width: 0%; }
+  100% { width: 100%; }
+}
+
+.search-bar-container::after {
+  content: '';
+  position: absolute;
+  inset: -1px;
+  border-radius: inherit;
+  background: linear-gradient(
+    135deg,
+    rgba(99, 102, 241, 0.3),
+    rgba(168, 85, 247, 0.2),
+    rgba(236, 72, 153, 0.15),
+    transparent 60%
+  );
+  opacity: 0;
+  transition: opacity 0.4s ease;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.search-bar-container:hover::after {
+  opacity: 1;
+}
+
+.search-bar-container:focus-within {
+  border-color: var(--accent-primary);
+  box-shadow: var(--shadow-glow);
+}
+
+.search-icon {
+  color: var(--text-secondary);
+  flex-shrink: 0;
+  z-index: 2;
+}
+
+.search-input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  color: var(--text-primary);
+  font-size: 1.1rem;
+  outline: none;
+  z-index: 2;
+}
+
+.search-input::placeholder {
+  color: var(--text-muted);
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.spinner-loading {
+  animation: spin 1s linear infinite;
+  color: var(--accent-primary) !important;
+}

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

@@ -0,0 +1,127 @@
+import { useState, useEffect, useRef } from 'react';
+import { Search, Loader2 } from 'lucide-react';
+import './SearchBar.css';
+
+export default function SearchBar({ onSearch, searchQueryPreset, onClearPreset, isLoading }) {
+  const [query, setQuery] = useState('');
+  const [isFloating, setIsFloating] = useState(false);
+  const [countdownActive, setCountdownActive] = useState(false);
+  const [animationTrigger, setAnimationTrigger] = useState(0);
+  
+  const inputRef = useRef(null);
+  const containerRef = useRef(null);
+  const debounceTimerRef = useRef(null);
+
+  // Sync state with search query preset (from Search Alternative redirection)
+  useEffect(() => {
+    if (searchQueryPreset) {
+      setQuery(searchQueryPreset);
+      if (onClearPreset) {
+        onClearPreset();
+      }
+    }
+  }, [searchQueryPreset, onClearPreset]);
+
+  // Debounce search (3 seconds with visual countdown)
+  useEffect(() => {
+    if (!query.trim()) {
+      setCountdownActive(false);
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+      return;
+    }
+
+    setCountdownActive(true);
+    setAnimationTrigger(prev => prev + 1);
+
+    if (debounceTimerRef.current) {
+      clearTimeout(debounceTimerRef.current);
+    }
+
+    debounceTimerRef.current = setTimeout(() => {
+      onSearch(query);
+      setCountdownActive(false);
+    }, 1000);
+
+    return () => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+    };
+  }, [query, onSearch]);
+
+  // Capture typing anywhere on page and focus search
+  useEffect(() => {
+    const handleGlobalKeyDown = (e) => {
+      const activeEl = document.activeElement;
+      if (activeEl && (
+        activeEl.tagName === 'INPUT' || 
+        activeEl.tagName === 'TEXTAREA' || 
+        activeEl.isContentEditable
+      )) {
+        return;
+      }
+
+      if (e.ctrlKey || e.metaKey || e.altKey) return;
+      if (e.key.length !== 1) return; // Only capture single characters
+
+      if (inputRef.current) {
+        inputRef.current.focus({ preventScroll: true });
+      }
+    };
+
+    window.addEventListener('keydown', handleGlobalKeyDown);
+    return () => window.removeEventListener('keydown', handleGlobalKeyDown);
+  }, []);
+
+  // Monitor visibility of search bar to make it float
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+
+    const observer = new IntersectionObserver(([entry]) => {
+      setIsFloating(!entry.isIntersecting);
+    }, {
+      rootMargin: '-70px 0px 0px 0px', // header height is 70px
+      threshold: 0
+    });
+
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter') {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+      onSearch(query);
+      setCountdownActive(false);
+    }
+  };
+
+  return (
+    <div ref={containerRef} className="search-bar-wrapper">
+      <div className={`search-bar-container liquid-glass ${isFloating ? 'floating' : ''}`}>
+        {isLoading ? (
+          <Loader2 size={20} className="search-icon spinner-loading" />
+        ) : (
+          <Search size={20} className="search-icon" />
+        )}
+        <input
+          ref={inputRef}
+          type="text"
+          className="search-input"
+          placeholder="Type anywhere to search songs..."
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          onKeyDown={handleKeyDown}
+        />
+        {countdownActive && (
+          <div key={animationTrigger} className="search-countdown-flood" />
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,42 @@
+.search-results {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+  gap: 1rem;
+}
+
+.trending-title {
+  font-size: 1.2rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-top: 0.5rem;
+  margin-bottom: 1.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  opacity: 0.85;
+}
+
+.trending-icon {
+  color: var(--accent-tertiary);
+  filter: drop-shadow(0 0 5px rgba(236, 72, 153, 0.4));
+  animation: pulse 2s infinite ease-in-out;
+}
+
+@media (max-width: 768px) {
+  .search-results {
+    grid-template-columns: 1fr;
+  }
+}
+
+
+
+.error-message {
+  background: rgba(239, 68, 68, 0.1);
+  color: var(--error);
+  padding: 1rem;
+  border-radius: var(--radius-sm);
+  margin-bottom: 2rem;
+  text-align: center;
+}
+
+

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

@@ -0,0 +1,64 @@
+import SongCard from './SongCard';
+import { Flame, Search } from 'lucide-react';
+import './SearchResults.css';
+
+export default function SearchResults({ results, isLoading, onDownload, onFlyAnimation, downloads, onPlay, currentSong, isDefaultTrending }) {
+  if (isLoading) {
+    return (
+      <div className="search-results">
+        {[...Array(6)].map((_, i) => (
+          <div key={i} className="skeleton-card liquid-glass">
+            <div className="skeleton-thumbnail" />
+            <div className="skeleton-info">
+              <div className="skeleton-line skeleton-title-line" />
+              <div className="skeleton-line skeleton-meta-line" />
+            </div>
+            <div className="skeleton-button" />
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  if (!results || results.length === 0) {
+    return (
+      <div className="empty-state">
+        <Search size={48} className="empty-state-icon" />
+        <p>No results found</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="search-results-container">
+      {isDefaultTrending && (
+        <h3 className="trending-title">
+          <Flame size={18} className="trending-icon" /> World Trending Hits
+        </h3>
+      )}
+      
+      <div className="search-results">
+        {results.map((song, i) => {
+          const dlEntry = downloads ? Array.from(downloads.values()).find(d => d.videoId === song.videoId) : null;
+          return (
+            <div 
+              key={song.videoId || i} 
+              className="stagger-item"
+              style={{ animation: 'fadeSlideUp 0.4s ease-out backwards', animationDelay: `${i * 60}ms` }}
+            >
+              <SongCard 
+                song={song} 
+                onDownload={onDownload} 
+                onFlyAnimation={onFlyAnimation}
+                downloadStatus={dlEntry?.status || null}
+                downloadPercent={dlEntry?.percent || '0%'}
+                onPlay={(song, rect) => onPlay(song, rect, results)}
+                isCurrentlyPlaying={currentSong?.videoId === song.videoId}
+              />
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}