@supasayan/ytm 1.0.0

package/client/src/components/Settings/SettingsPanel.css

@@ -0,0 +1,345 @@
+.settings-tab-container {
+  display: flex;
+  justify-content: center;
+  padding: 2rem 0;
+  animation: fadeIn 0.3s ease;
+}
+
+.settings-card {
+  width: 100%;
+  max-width: 600px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow-lg);
+}
+
+.settings-header {
+  padding: 1.5rem;
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.settings-title-container {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.settings-title-icon {
+  color: var(--accent-primary);
+}
+
+.settings-header h2 {
+  margin: 0;
+  font-size: 1.25rem;
+  color: var(--text-primary);
+}
+
+.settings-form {
+  padding: 2rem 1.5rem;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-bottom: 2rem;
+}
+
+.form-group label {
+  font-size: 0.95rem;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.toggle-group {
+  margin-top: 1rem;
+  margin-bottom: 2rem;
+}
+
+.toggle-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.toggle-label-text {
+  font-size: 0.95rem;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 46px;
+  height: 24px;
+}
+
+.toggle-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggle-slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--bg-tertiary);
+  border: 1px solid var(--border);
+  transition: .3s;
+  border-radius: 24px;
+}
+
+.toggle-slider:before {
+  position: absolute;
+  content: "";
+  height: 16px;
+  width: 16px;
+  left: 3px;
+  bottom: 3px;
+  background-color: var(--text-secondary);
+  transition: .3s;
+  border-radius: 50%;
+}
+
+.toggle-switch input:checked + .toggle-slider {
+  background: var(--accent-gradient);
+  border-color: transparent;
+}
+
+.toggle-switch input:checked + .toggle-slider:before {
+  transform: translateX(22px);
+  background-color: #fff;
+}
+
+.toggle-switch input:focus + .toggle-slider {
+  box-shadow: 0 0 1px var(--accent-primary);
+}
+
+.form-group input {
+  flex: 1;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border);
+  padding: 0.75rem 1rem;
+  border-radius: var(--radius-sm);
+  color: var(--text-primary);
+  font-size: 1rem;
+  outline: none;
+  transition: border-color var(--transition-fast);
+}
+
+.form-group input:focus {
+  border-color: var(--accent-primary);
+}
+
+.input-with-button {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.btn-browse {
+  background: var(--bg-tertiary);
+  color: var(--text-secondary);
+  border: 1px solid var(--border);
+  padding: 0 1.25rem;
+  border-radius: var(--radius-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--transition-fast);
+}
+
+.btn-browse:hover:not(:disabled) {
+  background: var(--accent-primary);
+  border-color: var(--accent-primary);
+  color: white;
+}
+
+.btn-browse:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.help-text {
+  margin: 0;
+  font-size: 0.8rem;
+  color: var(--text-muted);
+}
+
+.settings-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 1.5rem;
+}
+
+.btn-primary {
+  padding: 0.75rem 1.75rem;
+  border-radius: var(--radius-sm);
+  font-weight: 500;
+  font-size: 0.95rem;
+  background: var(--accent-gradient);
+  color: white;
+  transition: all var(--transition-fast);
+}
+
+.btn-primary:hover {
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-glow);
+}
+
+.settings-divider {
+  height: 1px;
+  background: var(--glass-border);
+  margin: 2rem 0;
+}
+
+.cache-action-row {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+}
+
+.btn-danger {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.65rem 1.25rem;
+  border-radius: var(--radius-sm);
+  font-weight: 500;
+  font-size: 0.9rem;
+  background: rgba(239, 68, 68, 0.1);
+  border: 1px solid rgba(239, 68, 68, 0.4);
+  color: #ef4444;
+  transition: all var(--transition-fast);
+  cursor: pointer;
+}
+
+.btn-danger:hover:not(:disabled) {
+  background: rgba(239, 68, 68, 0.2);
+  border-color: #ef4444;
+  color: #ef4444;
+  box-shadow: 0 0 12px rgba(239, 68, 68, 0.3);
+  transform: translateY(-1px);
+}
+
+.btn-danger:active {
+  transform: translateY(0);
+}
+
+.btn-danger:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.cleared-success-msg {
+  color: #10b981;
+  font-size: 0.9rem;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-weight: 500;
+  animation: checkPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.saved-success-msg {
+  position: absolute;
+  top: 1.5rem;
+  right: 1.5rem;
+  color: #10b981;
+  font-size: 0.9rem;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-weight: 500;
+  opacity: 0;
+  transform: translateY(-5px);
+  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  pointer-events: none;
+  z-index: 10;
+}
+
+.saved-success-msg.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.label-with-info {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.tooltip-container {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: help;
+}
+
+.info-icon {
+  color: var(--text-muted);
+  opacity: 0.6;
+  transition: opacity 0.2s ease, color 0.2s ease;
+}
+
+.tooltip-container:hover .info-icon {
+  opacity: 1;
+  color: var(--accent-primary);
+}
+
+.tooltip-text {
+  visibility: hidden;
+  width: 250px;
+  background-color: var(--bg-tertiary);
+  color: var(--text-primary);
+  text-align: left;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 0.75rem;
+  font-size: 0.8rem;
+  font-weight: 400;
+  line-height: 1.4;
+  box-shadow: var(--shadow-lg);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  
+  position: absolute;
+  z-index: 100;
+  bottom: 125%;
+  left: 50%;
+  transform: translateX(-50%) translateY(5px);
+  opacity: 0;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+  pointer-events: none;
+}
+
+.tooltip-text::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: var(--border) transparent transparent transparent;
+}
+
+.tooltip-container:hover .tooltip-text {
+  visibility: visible;
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}

package/client/src/components/Settings/SettingsPanel.jsx

@@ -0,0 +1,174 @@
+import { useState, useRef } from 'react';
+import { Settings, FolderOpen, Check, Trash2, Info } from 'lucide-react';
+import './SettingsPanel.css';
+
+export default function SettingsPanel({ outputDir, onSave }) {
+  const [dir, setDir] = useState(outputDir);
+  const [downloadLyrics, setDownloadLyrics] = useState(() => {
+    return localStorage.getItem('ytmd_download_lyrics') !== 'false';
+  });
+  const [isBrowsing, setIsBrowsing] = useState(false);
+  const [showSavedMsg, setShowSavedMsg] = useState(false);
+  const [isClearing, setIsClearing] = useState(false);
+  const [showClearedMsg, setShowClearedMsg] = useState(false);
+  const savedMsgTimeoutRef = useRef(null);
+
+  const triggerSavedIndicator = () => {
+    if (savedMsgTimeoutRef.current) {
+      clearTimeout(savedMsgTimeoutRef.current);
+    }
+    setShowSavedMsg(true);
+    savedMsgTimeoutRef.current = setTimeout(() => {
+      setShowSavedMsg(false);
+    }, 1500);
+  };
+
+  const handleBrowse = async () => {
+    setIsBrowsing(true);
+    try {
+      const res = await fetch('/api/browse');
+      if (res.ok) {
+        const data = await res.json();
+        if (data.path) {
+          setDir(data.path);
+          onSave(data.path);
+          triggerSavedIndicator();
+        }
+      }
+    } catch (err) {
+      console.error('Failed to browse for folder', err);
+    } finally {
+      setIsBrowsing(false);
+    }
+  };
+
+  const handleClearCache = async () => {
+    setIsClearing(true);
+    try {
+      const res = await fetch('/api/download/clear-cache', { method: 'POST' });
+      if (!res.ok) throw new Error('Failed to clear cache');
+      setShowClearedMsg(true);
+      setTimeout(() => {
+        setShowClearedMsg(false);
+      }, 3000);
+    } catch (err) {
+      alert(err.message);
+    } finally {
+      setIsClearing(false);
+    }
+  };
+
+  const handleInputChange = (e) => {
+    setDir(e.target.value);
+  };
+
+  const handleInputBlur = () => {
+    if (dir !== outputDir) {
+      onSave(dir);
+      triggerSavedIndicator();
+    }
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      e.target.blur();
+    }
+  };
+
+  return (
+    <div className="settings-tab-container">
+      <div className="settings-card liquid-glass" style={{ position: 'relative' }}>
+        <span className={`saved-success-msg ${showSavedMsg ? 'visible' : ''}`}>
+          <Check size={16} /> Auto-saved
+        </span>
+        
+        <div className="settings-form">
+          <div className="form-group">
+            <label htmlFor="outputDir" className="label-with-info">
+              Download Directory
+              <div className="tooltip-container">
+                <Info size={14} className="info-icon" />
+                <span className="tooltip-text">Select where your downloaded FLAC / lossy files will be saved on your system.</span>
+              </div>
+            </label>
+            <div className="input-with-button">
+              <input
+                id="outputDir"
+                type="text"
+                value={dir}
+                onChange={handleInputChange}
+                onBlur={handleInputBlur}
+                onKeyDown={handleKeyDown}
+                placeholder="/Users/sayan/Desktop"
+              />
+              <button 
+                type="button" 
+                className="btn-browse" 
+                onClick={handleBrowse}
+                disabled={isBrowsing}
+                title="Browse directories"
+              >
+                {isBrowsing ? '...' : <FolderOpen size={18} />}
+              </button>
+            </div>
+          </div>
+
+          <div className="form-group toggle-group">
+            <div className="toggle-row">
+              <span className="toggle-label-text label-with-info">
+                Download & Embed Lyrics
+                <div className="tooltip-container">
+                  <Info size={14} className="info-icon" />
+                  <span className="tooltip-text">Fetches lyrics from YouTube Music and embeds them into metadata tags inside the audio track.</span>
+                </div>
+              </span>
+              <label className="toggle-switch">
+                <input
+                  id="downloadLyrics"
+                  type="checkbox"
+                  checked={downloadLyrics}
+                  onChange={e => {
+                    const val = e.target.checked;
+                    setDownloadLyrics(val);
+                    localStorage.setItem('ytmd_download_lyrics', val ? 'true' : 'false');
+                    triggerSavedIndicator();
+                  }}
+                />
+                <span className="toggle-slider"></span>
+              </label>
+            </div>
+          </div>
+
+          <div className="settings-divider" />
+
+          <div className="form-group cache-group">
+            <label className="label-with-info">
+              Cache & History
+              <div className="tooltip-container">
+                <Info size={14} className="info-icon" />
+                <span className="tooltip-text">Resets the local YouTube decipher cache (helps fix 403 Forbidden errors) and clears completed or failed items from download history.</span>
+              </div>
+            </label>
+            <div className="cache-action-row">
+              <button 
+                type="button" 
+                className="btn-danger" 
+                onClick={handleClearCache}
+                disabled={isClearing}
+                title="Resets yt-dlp decipher caches and clears completed/failed items from memory"
+              >
+                <Trash2 size={16} /> {isClearing ? 'Clearing Cache...' : 'Clear Cache & History'}
+              </button>
+              {showClearedMsg && (
+                <span className="cleared-success-msg">
+                  <Check size={16} /> Cache cleared!
+                </span>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/client/src/hooks/useDownload.js

@@ -0,0 +1,107 @@
+import { useState, useEffect, useCallback } from 'react';
+
+export function useDownload() {
+  const [downloads, setDownloads] = useState(new Map());
+
+  // Connect to SSE stream
+  useEffect(() => {
+    const eventSource = new EventSource('/api/download/progress');
+
+    eventSource.onmessage = (event) => {
+      try {
+        const payload = JSON.parse(event.data);
+        if (payload.type === 'INITIAL') {
+          setDownloads(new Map(payload.data));
+        } else if (payload.type === 'DELTA') {
+          setDownloads(prev => {
+            const next = new Map(prev);
+            for (const [id, update] of payload.data) {
+              const existing = next.get(id) || {};
+              next.set(id, { ...existing, ...update });
+            }
+            return next;
+          });
+        }
+      } catch (err) {
+        console.error('Failed to parse SSE data', err);
+      }
+    };
+
+    eventSource.onerror = (err) => {
+      console.error('SSE Error:', err);
+    };
+
+    return () => {
+      eventSource.close();
+    };
+  }, []);
+
+  const startDownload = useCallback(async (song, outputDir) => {
+    try {
+      const downloadLyrics = localStorage.getItem('ytmd_download_lyrics') !== 'false';
+      const res = await fetch('/api/download', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          videoId: song.videoId,
+          title: song.title,
+          artist: song.artist,
+          album: song.album,
+          thumbnail: song.thumbnail,
+          outputDir,
+          downloadLyrics
+        })
+      });
+
+      if (!res.ok) {
+        throw new Error('Failed to start download');
+      }
+      
+      const data = await res.json();
+      return data.downloadId;
+    } catch (err) {
+      console.error('Download trigger error:', err);
+      alert(`Failed to start download: ${err.message}`);
+    }
+  }, []);
+
+  const startBulkDownload = useCallback(async (songs, outputDir) => {
+    try {
+      const downloadLyrics = localStorage.getItem('ytmd_download_lyrics') !== 'false';
+      const res = await fetch('/api/download/bulk', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          songs: songs.map(s => ({
+            videoId: s.videoId,
+            title: s.title,
+            artist: s.artist,
+            album: s.album,
+            thumbnail: s.thumbnail
+          })),
+          outputDir,
+          downloadLyrics
+        })
+      });
+      if (!res.ok) {
+        const errorData = await res.json();
+        throw new Error(errorData.error || 'Failed to start bulk download');
+      }
+    } catch (err) {
+      console.error('Bulk download error:', err);
+      alert(`Failed to start bulk download: ${err.message}`);
+    }
+  }, []);
+
+  const clearQueue = useCallback(async () => {
+    try {
+      await fetch('/api/download/clear-queue', { method: 'POST' });
+    } catch (err) {
+      console.error('Failed to clear queue:', err);
+    }
+  }, []);
+
+  return { downloads, startDownload, startBulkDownload, clearQueue };
+}