@supasayan/ytm 1.0.0

package/client/src/components/Player/AudioPlayer.css

@@ -0,0 +1,280 @@
+.audio-player {
+  position: fixed !important;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 90px;
+  z-index: 200;
+  border-top: 1px solid var(--glass-border);
+  box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  background-color: var(--bg-primary);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
+.player-enter {
+  animation: slideUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+}
+
+.player-exit {
+  animation: slideDown 0.3s ease-in forwards;
+}
+
+@keyframes slideUp {
+  from { transform: translateY(100%); }
+  to { transform: translateY(0); }
+}
+
+@keyframes slideDown {
+  from { transform: translateY(0); }
+  to { transform: translateY(100%); }
+}
+
+.player-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 0 1.5rem;
+  height: 100%;
+}
+
+/* LEFT: Song Info */
+.player-songinfo {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  width: 30%;
+  min-width: 200px;
+}
+
+.player-thumb {
+  width: 56px;
+  height: 56px;
+  border-radius: var(--radius-sm);
+  object-fit: cover;
+  box-shadow: var(--shadow-md);
+  animation: scalePop 0.5s ease-out;
+}
+
+.player-thumb-placeholder {
+  width: 56px;
+  height: 56px;
+  border-radius: var(--radius-sm);
+  background: var(--bg-tertiary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
+}
+
+.player-meta {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.player-title {
+  font-size: 15px;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 0;
+}
+
+.player-artist {
+  font-size: 13px;
+  color: var(--text-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 0;
+}
+
+/* CENTER: Controls & Seekbar */
+.player-center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 40%;
+  max-width: 600px;
+}
+
+.player-controls {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.player-btn {
+  color: var(--text-secondary);
+  transition: all var(--transition-fast);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.player-btn:hover {
+  color: var(--text-primary);
+  transform: scale(1.1);
+}
+
+.player-btn:active {
+  transform: scale(0.95);
+}
+
+.player-btn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+  transform: none !important;
+  color: var(--text-muted);
+}
+
+.player-btn.play-pause {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: var(--text-primary);
+  color: var(--bg-primary);
+}
+
+.player-btn.play-pause:hover {
+  transform: scale(1.05);
+  box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
+}
+
+.player-seekbar-container {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: 0.75rem;
+}
+
+.time-display {
+  font-size: 12px;
+  color: var(--text-secondary);
+  font-variant-numeric: tabular-nums;
+  min-width: 40px;
+  text-align: center;
+}
+
+/* Custom Range Input (Seekbar & Volume) */
+input[type=range] {
+  -webkit-appearance: none;
+  width: 100%;
+  background: transparent;
+  cursor: pointer;
+  height: 16px; /* easier to grab */
+}
+
+input[type=range]:focus {
+  outline: none;
+}
+
+input[type=range]::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 4px;
+  border-radius: 2px;
+  background: var(--bg-tertiary);
+  transition: all var(--transition-fast);
+}
+
+.player-seekbar::-webkit-slider-runnable-track {
+  background: linear-gradient(to right, var(--accent-primary) var(--progress), var(--bg-tertiary) var(--progress));
+}
+
+.player-seekbar::-moz-range-track {
+  background: linear-gradient(to right, var(--accent-primary) var(--progress), var(--bg-tertiary) var(--progress));
+}
+
+.player-volume::-webkit-slider-runnable-track {
+  background: linear-gradient(to right, var(--text-primary) var(--volume-progress), var(--bg-tertiary) var(--volume-progress));
+}
+
+.player-volume::-moz-range-track {
+  background: linear-gradient(to right, var(--text-primary) var(--volume-progress), var(--bg-tertiary) var(--volume-progress));
+}
+
+input[type=range]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  height: 12px;
+  width: 12px;
+  border-radius: 50%;
+  background: #fff;
+  margin-top: -4px; /* (track height / 2) - (thumb height / 2) */
+  box-shadow: 0 0 10px rgba(0,0,0,0.5);
+  opacity: 1;
+  transition: transform 0.2s, background-color 0.2s;
+}
+
+input[type=range]:hover::-webkit-slider-thumb {
+  transform: scale(1.25);
+  background-color: var(--accent-primary);
+}
+
+input[type=range]:active::-webkit-slider-thumb {
+  transform: scale(1.4);
+}
+
+input[type=range]:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+/* RIGHT: Volume & Close */
+.player-right {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 2rem;
+  width: 30%;
+  min-width: 200px;
+}
+
+.player-volume-container {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  width: 120px;
+  color: var(--text-secondary);
+}
+
+.player-close {
+  color: var(--text-secondary);
+  font-size: 1.25rem;
+  transition: color var(--transition-fast);
+  padding: 0.5rem;
+}
+
+.player-close:hover {
+  color: #ef4444;
+}
+
+@media (max-width: 768px) {
+  .player-right, .time-display {
+    display: none;
+  }
+  .player-songinfo {
+    width: 50%;
+  }
+  .player-center {
+    width: 50%;
+    align-items: flex-end;
+  }
+  .player-controls {
+    margin-right: 1rem;
+  }
+  .player-seekbar-container {
+    position: absolute;
+    top: -8px;
+    left: 0;
+    width: 100%;
+  }
+}

package/client/src/components/Player/AudioPlayer.jsx

@@ -0,0 +1,154 @@
+import { useEffect, useState } from 'react';
+import { Music } from 'lucide-react';
+import './AudioPlayer.css';
+
+function formatTime(seconds) {
+  if (!seconds || isNaN(seconds) || !isFinite(seconds)) return '0:00';
+  const m = Math.floor(seconds / 60);
+  const s = Math.floor(seconds % 60);
+  return `${m}:${s.toString().padStart(2, '0')}`;
+}
+
+export default function AudioPlayer({ player }) {
+  const {
+    audioRef,
+    currentSong,
+    source,
+    audioUrl,
+    isPlaying,
+    currentTime,
+    duration: audioDuration,
+    volume,
+    isPlayerVisible,
+    pause,
+    resume,
+    seek,
+    setVolume,
+    stop,
+    queue,
+    playNext,
+    playPrevious
+  } = player;
+
+  const [isDragging, setIsDragging] = useState(false);
+  const [dragTime, setDragTime] = useState(0);
+
+  // Use song duration if audio duration is not available (common for streams)
+  const displayDuration = (audioDuration && isFinite(audioDuration)) 
+    ? audioDuration 
+    : ((currentSong && currentSong.duration) || 0);
+
+  const displayTime = isDragging ? dragTime : currentTime;
+  const progressPercent = displayDuration > 0 ? (displayTime / displayDuration) * 100 : 0;
+
+  const handleSeekChange = (e) => {
+    const newTime = parseFloat(e.target.value);
+    setDragTime(newTime);
+  };
+
+  const handleSeekEnd = (e) => {
+    setIsDragging(false);
+    seek(parseFloat(e.target.value));
+  };
+
+  const handleSeekStart = () => {
+    setIsDragging(true);
+  };
+
+  return (
+    <div className={`audio-player liquid-glass ${isPlayerVisible && currentSong ? 'player-enter' : 'player-exit'}`}>
+      <audio ref={audioRef} src={audioUrl || undefined} style={{ display: 'none' }} />
+
+      {currentSong && (
+        <div className="player-content">
+          <div className="player-songinfo">
+            {currentSong.thumbnail ? (
+              <img src={currentSong.thumbnail} alt="Album Art" className="player-thumb" />
+            ) : (
+              <div className="player-thumb-placeholder">
+                <Music size={24} className="placeholder-icon" />
+              </div>
+            )}
+            <div className="player-meta">
+              <h4 className="player-title">{currentSong.title}</h4>
+              <p className="player-artist">{currentSong.artist}</p>
+            </div>
+          </div>
+
+        <div className="player-center">
+          <div className="player-controls">
+            <button 
+              className="player-btn" 
+              onClick={playPrevious} 
+              disabled={queue.length <= 1}
+              title={queue.length <= 1 ? "Previous (No queue)" : "Previous track"}
+            >
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg>
+            </button>
+
+            <button 
+              className="player-btn play-pause" 
+              onClick={isPlaying ? pause : resume}
+            >
+              {isPlaying ? (
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
+              ) : (
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
+              )}
+            </button>
+
+            <button 
+              className="player-btn" 
+              onClick={playNext} 
+              disabled={queue.length <= 1}
+              title={queue.length <= 1 ? "Next (No queue)" : "Next track"}
+            >
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/></svg>
+            </button>
+          </div>
+
+          <div className="player-seekbar-container">
+            <span className="time-display">{formatTime(displayTime)}</span>
+            <input 
+              type="range" 
+              className="player-seekbar"
+              min="0"
+              max={displayDuration || 100}
+              value={displayTime}
+              onMouseDown={handleSeekStart}
+              onMouseUp={handleSeekEnd}
+              onTouchStart={handleSeekStart}
+              onTouchEnd={handleSeekEnd}
+              onChange={handleSeekChange}
+              style={{ '--progress': `${progressPercent}%` }}
+              disabled={source === 'stream'} // Streams are usually not forward-seekable reliably via this method
+              title={source === 'stream' ? 'Seeking is disabled for live streams' : ''}
+            />
+            <span className="time-display">{formatTime(displayDuration)}</span>
+          </div>
+        </div>
+
+        <div className="player-right">
+          <div className="player-volume-container">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path><path d="M19.07 4.93a10 10 0 0 1 0 14.14"></path></svg>
+            <input 
+              type="range" 
+              className="player-volume" 
+              min="0" 
+              max="1" 
+              step="0.01" 
+              value={volume}
+              onChange={(e) => setVolume(parseFloat(e.target.value))}
+              style={{ '--volume-progress': `${volume * 100}%` }}
+            />
+          </div>
+          
+          <button className="player-close" onClick={stop} title="Close Player">
+            ✕
+          </button>
+        </div>
+      </div>
+    )}
+  </div>
+  );
+}

package/client/src/components/Playlist/PlaylistInput.css

@@ -0,0 +1,71 @@
+.playlist-input-container {
+  max-width: 600px;
+  margin: 0 auto 2rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.playlist-form {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.5rem 0.5rem 0.5rem 1.5rem; /* left padding for icon */
+  border-radius: 50px;
+  width: 100%;
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+  animation: scalePop 0.4s ease-out;
+}
+
+.playlist-form:focus-within {
+  border-color: var(--accent-primary);
+  box-shadow: var(--shadow-glow);
+}
+
+.playlist-icon {
+  color: var(--text-secondary);
+  flex-shrink: 0;
+  z-index: 2;
+}
+
+.playlist-input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  color: var(--text-primary);
+  font-size: 1.05rem;
+  outline: none;
+  z-index: 2;
+}
+
+.playlist-input::placeholder {
+  color: var(--text-muted);
+}
+
+.playlist-fetch-btn {
+  background: var(--accent-gradient);
+  color: white;
+  padding: 0.75rem 1.5rem;
+  border-radius: var(--radius-full);
+  font-weight: 600;
+  transition: all var(--transition-fast);
+  flex-shrink: 0;
+  z-index: 2;
+}
+
+.playlist-fetch-btn:hover {
+  transform: scale(1.05);
+  box-shadow: 0 0 15px rgba(139, 92, 246, 0.4);
+}
+
+.playlist-fetch-btn:active {
+  transform: scale(0.95);
+}
+
+.validation-error {
+  color: var(--error);
+  font-size: 0.85rem;
+  margin-top: 0.5rem;
+  align-self: flex-start;
+  padding-left: 1.5rem;
+}

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

@@ -0,0 +1,44 @@
+import { useState } from 'react';
+import { Link, Loader2 } from 'lucide-react';
+import './PlaylistInput.css';
+
+export default function PlaylistInput({ onFetch, isLoading }) {
+  const [url, setUrl] = useState('');
+  const [validationError, setValidationError] = useState('');
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!url.includes('list=')) {
+      setValidationError('Invalid URL. It must contain a "list=" parameter.');
+      return;
+    }
+    setValidationError('');
+    onFetch(url);
+  };
+
+  return (
+    <div className="playlist-input-container">
+      <form className="playlist-form liquid-glass" onSubmit={handleSubmit}>
+        {isLoading ? (
+          <Loader2 size={20} className="playlist-icon spinner" style={{ animation: 'spin 1s linear infinite', color: 'var(--accent-primary)' }} />
+        ) : (
+          <Link size={20} className="playlist-icon" />
+        )}
+        <input
+          type="text"
+          className="playlist-input"
+          placeholder="Paste a YouTube Music playlist URL..."
+          value={url}
+          onChange={(e) => setUrl(e.target.value)}
+          disabled={isLoading}
+        />
+        <button type="submit" className="playlist-fetch-btn" disabled={isLoading}>
+          {isLoading ? 'Fetching...' : 'Fetch Playlist'}
+        </button>
+      </form>
+      {validationError && (
+        <p className="validation-error">{validationError}</p>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,150 @@
+.playlist-view {
+  background: transparent;
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+.playlist-header {
+  padding: 1.5rem 2rem;
+  background: rgba(255, 255, 255, 0.02);
+  border-bottom: 1px solid var(--glass-border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.playlist-info h2 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.playlist-info p {
+  font-size: 13px;
+  color: var(--text-secondary);
+  margin: 0.25rem 0 0 0;
+}
+
+.download-all-btn {
+  background: var(--accent-gradient);
+  color: white;
+  padding: 0.6rem 1.25rem;
+  border-radius: var(--radius-full);
+  font-weight: 600;
+  font-size: 0.9rem;
+  transition: all var(--transition-fast);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.25);
+}
+
+.download-all-btn:hover {
+  transform: scale(1.03);
+  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
+}
+
+.download-all-btn:active {
+  transform: scale(0.97);
+}
+
+.playlist-tracks {
+  padding: 1.5rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+  gap: 1.5rem;
+}
+
+.track-card-wrapper {
+  position: relative;
+  min-width: 0;
+}
+
+.track-number-badge {
+  position: absolute;
+  top: -8px;
+  left: -8px;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: var(--bg-secondary);
+  border: 1px solid var(--glass-border);
+  color: var(--text-secondary);
+  font-size: 11px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
+  transition: all var(--transition-fast);
+}
+
+.track-card-wrapper.playing .track-number-badge {
+  border-color: var(--accent-primary);
+  color: var(--accent-primary);
+  box-shadow: 0 0 10px rgba(99, 102, 241, 0.4);
+  background: var(--bg-tertiary);
+}
+
+.track-remove-btn {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: var(--bg-secondary);
+  border: 1px solid var(--glass-border);
+  color: var(--text-muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
+  transition: all var(--transition-fast);
+  cursor: pointer;
+  opacity: 0.7;
+}
+
+.track-card-wrapper:hover .track-remove-btn {
+  opacity: 1;
+}
+
+.track-remove-btn:hover {
+  background: rgba(239, 68, 68, 0.15);
+  border-color: #ef4444;
+  color: #ef4444;
+  transform: scale(1.1);
+  box-shadow: 0 0 10px rgba(239, 68, 68, 0.35);
+}
+
+.track-remove-btn:active {
+  transform: scale(0.9);
+}
+
+@keyframes cardExit {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+    filter: blur(0);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.8) translateY(10px);
+    filter: blur(4px);
+  }
+}
+
+.track-card-wrapper.removing {
+  pointer-events: none;
+}
+
+/* Skeleton tweaks */
+.skeleton-header {
+  height: 90px;
+  background: var(--bg-secondary);
+  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+  border-bottom: 1px solid var(--glass-border);
+  position: relative;
+  overflow: hidden;
+}