@supasayan/ytm 1.0.0

package/client/src/components/Download/DownloadItem.jsx

@@ -0,0 +1,108 @@
+import { Music, CheckCircle2, AlertCircle, Loader2, Clock } from 'lucide-react';
+import './DownloadItem.css';
+
+export default function DownloadItem({ download, onPlay, isCurrentlyPlaying, onSearchAlternative }) {
+  const { title, artist, album, thumbnail, status, percent, speed, eta, error } = download;
+
+  const isClickable = status === 'completed';
+
+  return (
+    <div 
+      className={`download-item liquid-glass ${status} ${isClickable ? 'clickable' : ''} ${isCurrentlyPlaying ? 'playing' : ''}`}
+      onClick={(e) => {
+        if (isClickable && onPlay) {
+          const rect = e.currentTarget.getBoundingClientRect();
+          // Adjust starting rect to represent a smaller thumbnail-like size
+          const startRect = {
+            top: rect.top + 8,
+            left: rect.left + 8,
+            width: 56,
+            height: 56
+          };
+          onPlay(download, startRect);
+        }
+      }}
+    >
+      <div className="dl-thumbnail">
+        {thumbnail ? (
+          <>
+            <img src={thumbnail} alt={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={20} className="placeholder-icon" />
+          </div>
+        )}
+      </div>
+
+      <div className="dl-info">
+        <div className="dl-title-row">
+          <span className="dl-title" title={title}>
+            <span className="dl-title-text">{title}</span>
+            {isCurrentlyPlaying && (
+              <span className="equalizer-inline">
+                <span className="bar bar1"></span>
+                <span className="bar bar2"></span>
+                <span className="bar bar3"></span>
+              </span>
+            )}
+          </span>
+        </div>
+        
+        <span className="dl-meta">
+          {artist || 'Unknown Artist'} {album && `• ${album}`}
+        </span>
+        
+        {(status === 'downloading' || status === 'queued') && (
+          <div className="dl-progress-container">
+            <div className="dl-progress-wrapper">
+              <div 
+                className="dl-progress-bar" 
+                style={{ width: percent || '0%' }}
+              />
+            </div>
+            {status === 'downloading' && (
+              <span className="dl-stats">
+                {percent} • {speed} • ETA: {eta}
+              </span>
+            )}
+            {status === 'queued' && (
+              <span className="dl-stats">Queued...</span>
+            )}
+          </div>
+        )}
+        
+        {status === 'error' && (
+          <div className="dl-error-container">
+            <span className="dl-error" title={error}>{error || 'Failed to download'}</span>
+            <button 
+              className="dl-search-alternative-btn"
+              onClick={(e) => {
+                e.stopPropagation();
+                if (onSearchAlternative) {
+                  onSearchAlternative(`${title} ${artist}`);
+                }
+              }}
+            >
+              Search Alternative
+            </button>
+          </div>
+        )}
+      </div>
+
+      <div className="dl-status-icon-wrapper">
+        {status === 'completed' && <CheckCircle2 size={20} className="status-icon completed" />}
+        {status === 'error' && <AlertCircle size={20} className="status-icon error" />}
+        {status === 'downloading' && <Loader2 size={20} className="status-icon spinner" />}
+        {status === 'queued' && <Clock size={20} className="status-icon queued" />}
+      </div>
+    </div>
+  );
+}

package/client/src/components/Download/FlyingThumbnail.css

@@ -0,0 +1,33 @@
+.flying-thumbnail {
+  position: fixed;
+  z-index: 9999;
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+  background: var(--bg-tertiary);
+  pointer-events: none;
+  box-shadow: var(--shadow-glow);
+}
+
+.flying-thumbnail img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.flying-thumbnail.animate {
+  animation: flyToTarget 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+@keyframes flyToTarget {
+  0% {
+    transform: translate(0, 0) scale(1);
+    opacity: 1;
+  }
+  70% {
+    opacity: 0.8;
+  }
+  100% {
+    transform: translate(var(--end-x), var(--end-y)) scale(0.4);
+    opacity: 0;
+  }
+}

package/client/src/components/Download/FlyingThumbnail.jsx

@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import './FlyingThumbnail.css';
+
+export default function FlyingThumbnail({ id, thumbnailSrc, startRect, endRect, onComplete }) {
+  const [isAnimating, setIsAnimating] = useState(false);
+
+  useEffect(() => {
+    // Small delay to ensure DOM is ready and CSS transitions can catch the change
+    const raf = requestAnimationFrame(() => {
+      setIsAnimating(true);
+    });
+    
+    // Animation duration is 600ms
+    const timer = setTimeout(() => {
+      onComplete(id);
+    }, 600);
+
+    return () => {
+      cancelAnimationFrame(raf);
+      clearTimeout(timer);
+    };
+  }, [id, onComplete]);
+
+  // Initial position
+  const style = {
+    top: startRect.top,
+    left: startRect.left,
+    width: startRect.width || 40,
+    height: startRect.height || 40,
+    '--end-x': `${endRect.left - startRect.left}px`,
+    '--end-y': `${endRect.top - startRect.top}px`,
+  };
+
+  return createPortal(
+    <div 
+      className={`flying-thumbnail ${isAnimating ? 'animate' : ''}`} 
+      style={style}
+    >
+      {thumbnailSrc ? (
+        <img src={thumbnailSrc} alt="fly" />
+      ) : (
+        <div className="placeholder-thumb">🎵</div>
+      )}
+    </div>,
+    document.body
+  );
+}

package/client/src/components/Layout/Header.css

@@ -0,0 +1,91 @@
+.app-header {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  background-color: var(--bg-primary);
+  border-bottom: 1px solid var(--glass-border);
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
+}
+
+.header-content {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 2rem;
+  height: 70px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.logo h2 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.logo span {
+  background: var(--accent-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.tab-nav {
+  display: flex;
+  gap: 1.5rem;
+  height: 100%;
+}
+
+.tab-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  height: 100%;
+  padding: 0 0.5rem;
+  font-size: 0.95rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+  position: relative;
+  transition: color var(--transition-fast);
+}
+
+.tab-btn:hover {
+  color: var(--text-primary);
+}
+
+.tab-btn.active {
+  color: var(--accent-primary);
+}
+
+.tab-btn.active::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 3px;
+  background: var(--accent-primary);
+  box-shadow: 0 -2px 10px var(--accent-primary);
+  border-radius: 3px 3px 0 0;
+}
+
+.tab-icon {
+  flex-shrink: 0;
+}
+
+.tab-badge {
+  position: absolute;
+  top: 15px;
+  right: -12px;
+  background: var(--accent-primary);
+  color: white;
+  min-width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  font-size: 11px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 4px;
+}

package/client/src/components/Layout/Header.jsx

@@ -0,0 +1,49 @@
+import { Search, Music, Download, Settings } from 'lucide-react';
+import './Header.css';
+
+export default function Header({ activeTab, onTabChange, activeDownloadCount = 0, downloadsTabRef }) {
+  return (
+    <header className="app-header">
+      <div className="header-content">
+        <div className="logo">
+          <h2>YTM<span>Downloader</span></h2>
+        </div>
+        
+        <nav className="tab-nav">
+          <button 
+            className={`tab-btn ${activeTab === 'search' ? 'active' : ''}`}
+            onClick={() => onTabChange('search')}
+          >
+            <Search size={18} className="tab-icon" />
+            <span>Search</span>
+          </button>
+          <button 
+            className={`tab-btn ${activeTab === 'playlist' ? 'active' : ''}`}
+            onClick={() => onTabChange('playlist')}
+          >
+            <Music size={18} className="tab-icon" />
+            <span>Playlist</span>
+          </button>
+          <button 
+            ref={downloadsTabRef}
+            className={`tab-btn ${activeTab === 'downloads' ? 'active' : ''}`}
+            onClick={() => onTabChange('downloads')}
+          >
+            <Download size={18} className="tab-icon" />
+            <span>Downloads</span>
+            {activeDownloadCount > 0 && (
+              <span className="tab-badge">{activeDownloadCount}</span>
+            )}
+          </button>
+          <button 
+            className={`tab-btn ${activeTab === 'settings' ? 'active' : ''}`}
+            onClick={() => onTabChange('settings')}
+          >
+            <Settings size={18} className="tab-icon" />
+            <span>Settings</span>
+          </button>
+        </nav>
+      </div>
+    </header>
+  );
+}

package/client/src/components/Layout/SystemCheckScreen.css

@@ -0,0 +1,250 @@
+.system-check-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: radial-gradient(circle at top right, rgba(99, 102, 241, 0.15) 0%, rgba(15, 23, 42, 0.98) 80%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+  padding: 2rem;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+
+.system-check-card {
+  width: 100%;
+  max-width: 540px;
+  padding: 3rem 2.5rem;
+  border-radius: var(--radius-lg);
+  text-align: center;
+  box-shadow: var(--glass-shadow);
+  border: 1px solid var(--glass-border);
+  animation: scaleUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.status-checking, .status-failed {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.5rem;
+}
+
+.checking-spinner {
+  color: var(--accent-primary);
+  animation: spin 1.2s linear infinite;
+  filter: drop-shadow(0 0 10px rgba(99, 102, 241, 0.4));
+  margin-bottom: 0.5rem;
+}
+
+.error-icon {
+  color: #f59e0b;
+  filter: drop-shadow(0 0 15px rgba(245, 158, 11, 0.3));
+  margin-bottom: 0.5rem;
+  animation: pulseWarning 2s infinite ease-in-out;
+}
+
+.system-check-card h2 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.status-text {
+  font-size: 1.05rem;
+  color: var(--text-secondary);
+  line-height: 1.6;
+  margin: 0;
+}
+
+.sub-status-text {
+  font-size: 0.85rem;
+  color: var(--text-muted);
+  margin: 0;
+}
+
+.error-summary {
+  font-size: 1rem;
+  color: var(--text-secondary);
+  margin: 0;
+}
+
+.detailed-error-box {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  background: rgba(239, 68, 68, 0.08);
+  border: 1px solid rgba(239, 68, 68, 0.2);
+  border-radius: var(--radius-sm);
+  font-family: monospace;
+  font-size: 0.75rem;
+  color: #ef4444;
+  text-align: left;
+  max-height: 80px;
+  overflow-y: auto;
+}
+
+.setup-tabs {
+  display: flex;
+  width: 100%;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+  margin-top: 0.5rem;
+}
+
+.system-check-card .tab-btn {
+  flex: 1;
+  padding: 0.65rem;
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+  background: transparent;
+  transition: all 0.2s ease;
+  border-radius: 0;
+}
+
+.system-check-card .tab-btn:hover {
+  color: var(--text-primary);
+  background: rgba(255, 255, 255, 0.02);
+}
+
+.system-check-card .tab-btn.active {
+  color: white;
+  background: var(--accent-gradient);
+}
+
+.setup-guide-content {
+  width: 100%;
+  text-align: left;
+  min-height: 140px;
+}
+
+.guide-tab-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  animation: fadeInTab 0.25s ease-out;
+}
+
+.guide-tab-panel p {
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+  margin: 0;
+  line-height: 1.5;
+}
+
+.code-block-container {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  background: #090d16;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: #38bdf8;
+  font-family: monospace;
+  font-size: 0.85rem;
+  position: relative;
+}
+
+.code-icon {
+  color: var(--text-muted);
+}
+
+.code-block-container code {
+  flex: 1;
+  word-break: break-all;
+}
+
+.guide-footer-text {
+  font-size: 0.75rem !important;
+  color: var(--text-muted) !important;
+}
+
+.guide-footer-text a {
+  color: var(--accent-primary);
+  text-decoration: underline;
+}
+
+.ffmpeg-download-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 0.75rem;
+  background: rgba(99, 102, 241, 0.1);
+  border: 1px solid rgba(99, 102, 241, 0.3);
+  border-radius: var(--radius-sm);
+  color: var(--text-primary);
+  font-weight: 600;
+  font-size: 0.9rem;
+  text-align: center;
+  transition: all 0.2s ease;
+  margin-top: 0.25rem;
+}
+
+.ffmpeg-download-link:hover {
+  background: var(--accent-gradient);
+  border-color: transparent;
+  color: white;
+  box-shadow: var(--shadow-glow);
+}
+
+.action-row {
+  margin-top: 1rem;
+  width: 100%;
+}
+
+.btn-retry {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.75rem;
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-sm);
+  color: var(--text-primary);
+  font-weight: 600;
+  font-size: 0.95rem;
+  transition: all 0.2s ease;
+}
+
+.btn-retry:hover {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: var(--text-secondary);
+}
+
+.btn-retry svg {
+  transition: transform 0.3s ease;
+}
+
+.btn-retry:hover svg {
+  transform: rotate(180deg);
+}
+
+@keyframes spin {
+  100% { transform: rotate(360deg); }
+}
+
+@keyframes scaleUp {
+  from { transform: scale(0.95); opacity: 0; }
+  to { transform: scale(1); opacity: 1; }
+}
+
+@keyframes fadeInTab {
+  from { opacity: 0; transform: translateY(5px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes pulseWarning {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.05); }
+  100% { transform: scale(1); }
+}

package/client/src/components/Layout/SystemCheckScreen.jsx

@@ -0,0 +1,110 @@
+import { useState } from 'react';
+import { Loader2, Terminal, AlertTriangle, RefreshCw, HelpCircle } from 'lucide-react';
+import './SystemCheckScreen.css';
+
+export default function SystemCheckScreen({ status, error, onRetry }) {
+  const [activeTab, setActiveTab] = useState(() => {
+    const platform = window.navigator.platform.toLowerCase();
+    if (platform.includes('mac')) return 'mac';
+    if (platform.includes('win')) return 'windows';
+    return 'linux';
+  });
+
+  const isDownloading = status === 'downloading' || status === 'checking';
+
+  return (
+    <div className="system-check-container">
+      <div className="system-check-card liquid-glass">
+        {isDownloading ? (
+          <div className="status-checking">
+            <Loader2 className="spinner checking-spinner" size={60} />
+            <h2>Setting Up Dependencies</h2>
+            <p className="status-text">
+              We are automatically configuring <strong>FFmpeg</strong> and downloading <strong>yt-dlp</strong> from GitHub...
+            </p>
+            <p className="sub-status-text">This will only happen once on first startup. Please wait.</p>
+          </div>
+        ) : (
+          <div className="status-failed">
+            <AlertTriangle className="error-icon" size={60} />
+            <h2>System Dependencies Missing</h2>
+            <p className="error-summary">
+              The automated setup failed to configure the required tools on your machine.
+            </p>
+            {error && <div className="detailed-error-box">Error details: {error}</div>}
+
+            <div className="setup-tabs">
+              <button 
+                className={`tab-btn ${activeTab === 'mac' ? 'active' : ''}`}
+                onClick={() => setActiveTab('mac')}
+              >
+                macOS
+              </button>
+              <button 
+                className={`tab-btn ${activeTab === 'windows' ? 'active' : ''}`}
+                onClick={() => setActiveTab('windows')}
+              >
+                Windows
+              </button>
+              <button 
+                className={`tab-btn ${activeTab === 'linux' ? 'active' : ''}`}
+                onClick={() => setActiveTab('linux')}
+              >
+                Linux
+              </button>
+            </div>
+
+            <div className="setup-guide-content">
+              {activeTab === 'mac' && (
+                <div className="guide-tab-panel">
+                  <p>Open your terminal and paste this command to install the required packages via Homebrew:</p>
+                  <div className="code-block-container">
+                    <Terminal size={14} className="code-icon" />
+                    <code>brew install yt-dlp ffmpeg</code>
+                  </div>
+                  <p className="guide-footer-text">Don't have Homebrew? Install it from <a href="https://brew.sh" target="_blank" rel="noreferrer">brew.sh</a> first.</p>
+                </div>
+              )}
+
+              {activeTab === 'windows' && (
+                <div className="guide-tab-panel">
+                  <p>1. Open Command Prompt/PowerShell and install <strong>yt-dlp</strong>:</p>
+                  <div className="code-block-container">
+                    <Terminal size={14} className="code-icon" />
+                    <code>winget install yt-dlp</code>
+                  </div>
+                  <p>2. Download <strong>FFmpeg</strong> from the official website and add it to your System PATH:</p>
+                  <a 
+                    href="https://github.com/BtbN/FFmpeg-Builds/releases" 
+                    target="_blank" 
+                    rel="noreferrer" 
+                    className="ffmpeg-download-link"
+                  >
+                    Get FFmpeg Builds for Windows
+                  </a>
+                </div>
+              )}
+
+              {activeTab === 'linux' && (
+                <div className="guide-tab-panel">
+                  <p>Run the package manager command to install both tools:</p>
+                  <div className="code-block-container">
+                    <Terminal size={14} className="code-icon" />
+                    <code>sudo apt update && sudo apt install -y ffmpeg yt-dlp</code>
+                  </div>
+                  <p className="guide-footer-text">For Fedora/RedHat: <code>sudo dnf install ffmpeg yt-dlp</code></p>
+                </div>
+              )}
+            </div>
+
+            <div className="action-row">
+              <button className="btn-retry" onClick={onRetry}>
+                <RefreshCw size={16} /> Check Again
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}