Release v1.2.0 - YouTube search integration and playbar fix

New features:
- YouTube search integration with live results
- Smart input detection (URL vs search query)
- Real-time search with thumbnails and metadata
- Fixed progress bar not advancing for single songs

Technical improvements:
- Added searchYoutube function to ytdlp.ts
- Created /api/search endpoint
- Enhanced Header component with search UI
- Fixed PlayerBar useEffect dependencies

README.md

@@ -25,9 +25,18 @@ Self-hosted YouTube music streaming application built with Next.js.
 - Toast notifications for user feedback
 - Simple JSON file storage - no database setup required
 - Easy Docker deployment
+- **Smart search**: Search YouTube directly from the app or paste URLs
+
 ## Recent Updates
 
-### v1.1.0 - Latest Improvements
+### v1.2.0 - Latest Improvements
+
+- ✅ **YouTube search integration**: Search for songs directly in the app without needing URLs
+- ✅ **Smart input detection**: Automatically detects if input is a URL or search query
+- ✅ **Live search results**: Real-time search with thumbnails, duration, and channel info
+- ✅ **Progress bar fix**: Fixed playbar not advancing for single songs
+
+### v1.1.0 - Previous Updates
 
 - ✅ **Direct song deletion**: Removed confirmation dialogs when deleting songs from home page for faster workflow
 - ✅ **Bulk playlist creation**: Add entire playlists directly from YouTube playlist URLs
@@ -137,12 +146,13 @@ If you prefer to build the Docker image yourself:
 
 ## Usage
 
-1. **Add a song**: Paste a YouTube URL in the input field and click "Add"
+1. **Add a song**: Search for songs by artist/title or paste a YouTube URL in the input field
-2. **Play a song**: Click the play button on any song card
+2. **Search**: Type any song name or artist and select from the results dropdown
-3. **Control playback**: Use the player controls at the bottom of the page
+3. **Play a song**: Click the play button on any song card
-4. **Create playlists**: Navigate to Playlists and create your custom collections
+4. **Control playback**: Use the player controls at the bottom of the page
-5. **Shuffle mode**: Toggle shuffle to randomize playback order
+5. **Create playlists**: Navigate to Playlists and create your custom collections
-6. **Navigate freely**: Music continues playing as you browse different pages
+6. **Shuffle mode**: Toggle shuffle to randomize playback order
+7. **Navigate freely**: Music continues playing as you browse different pages
 
 
 ## Data Storage

app/api/search/route.ts

@@ -0,0 +1,19 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { searchYoutube } from '@/lib/ytdlp'
+
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url)
+    const query = searchParams.get('q')
+
+    if (!query) {
+      return NextResponse.json({ error: 'Query parameter is required' }, { status: 400 })
+    }
+
+    const results = await searchYoutube(query, 10)
+    return NextResponse.json(results)
+  } catch (error) {
+    console.error('Search error:', error)
+    return NextResponse.json({ error: 'Failed to search' }, { status: 500 })
+  }
+}

components/Header.tsx

@@ -1,46 +1,214 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useRef, useEffect } from 'react'
-import { Plus } from 'lucide-react'
+import { Plus, Search, Loader2 } from 'lucide-react'
+import Image from 'next/image'
 
 interface HeaderProps {
   onAddSong: (url: string) => void
   isLoading?: boolean
 }
 
+interface SearchResult {
+  id: string
+  title: string
+  channel: string
+  thumbnail: string
+  duration: number
+}
+
 export default function Header({ onAddSong, isLoading }: HeaderProps) {
-  const [url, setUrl] = useState('')
+  const [input, setInput] = useState('')
+  const [showResults, setShowResults] = useState(false)
+  const [searchResults, setSearchResults] = useState<SearchResult[]>([])
+  const [isSearching, setIsSearching] = useState(false)
+  const [searchError, setSearchError] = useState('')
+  const resultsRef = useRef<HTMLDivElement>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  // Close results when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (resultsRef.current && !resultsRef.current.contains(event.target as Node) &&
+          inputRef.current && !inputRef.current.contains(event.target as Node)) {
+        setShowResults(false)
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [])
+
+  const isYoutubeUrl = (str: string) => {
+    return str.includes('youtube.com/') || str.includes('youtu.be/')
+  }
+
+  const handleSearch = async (query: string) => {
+    if (!query.trim() || isYoutubeUrl(query)) {
+      setShowResults(false)
+      return
+    }
+
+    setIsSearching(true)
+    setSearchError('')
+
+    try {
+      const response = await fetch(`/api/search?q=${encodeURIComponent(query)}`)
+      if (response.ok) {
+        const results = await response.json()
+        setSearchResults(results)
+        setShowResults(true)
+      } else {
+        setSearchError('Search failed')
+        setShowResults(false)
+      }
+    } catch (error) {
+      console.error('Search error:', error)
+      setSearchError('Search error')
+      setShowResults(false)
+    } finally {
+      setIsSearching(false)
+    }
+  }
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value
+    setInput(value)
+
+    // Auto-search if not a URL
+    if (value.trim() && !isYoutubeUrl(value)) {
+      // Debounce search
+      const timeoutId = setTimeout(() => {
+        handleSearch(value)
+      }, 500)
+      return () => clearTimeout(timeoutId)
+    } else {
+      setShowResults(false)
+    }
+  }
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault()
-    if (url.trim()) {
+    if (input.trim()) {
-      onAddSong(url)
+      if (isYoutubeUrl(input)) {
-      setUrl('')
+        onAddSong(input)
+        setInput('')
+        setShowResults(false)
+      } else {
+        handleSearch(input)
+      }
     }
   }
 
+  const handleSelectResult = (result: SearchResult) => {
+    const youtubeUrl = `https://www.youtube.com/watch?v=${result.id}`
+    onAddSong(youtubeUrl)
+    setInput('')
+    setShowResults(false)
+    setSearchResults([])
+  }
+
+  const formatDuration = (seconds: number): string => {
+    const mins = Math.floor(seconds / 60)
+    const secs = Math.floor(seconds % 60)
+    return `${mins}:${secs.toString().padStart(2, '0')}`
+  }
+
   return (
     <header className="bg-gradient-to-b from-gray-900 to-black border-b border-gray-800 p-3 sm:p-6 flex-shrink-0">
-      <div className="max-w-7xl mx-auto">
+      <div className="max-w-7xl mx-auto relative">
         <form onSubmit={handleSubmit} className="flex flex-col sm:flex-row gap-2 sm:gap-3">
           <div className="relative flex-1">
             <input
+              ref={inputRef}
               type="text"
-              value={url}
+              value={input}
-              onChange={(e) => setUrl(e.target.value)}
+              onChange={handleInputChange}
-              placeholder="Paste YouTube URL here..."
+              placeholder="Search for songs or paste YouTube URL..."
-              className="w-full bg-gray-800 text-white px-3 py-2 sm:px-4 sm:py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 placeholder-gray-500 text-sm sm:text-base"
+              className="w-full bg-gray-800 text-white px-3 py-2 sm:px-4 sm:py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 placeholder-gray-500 text-sm sm:text-base pr-10"
               disabled={isLoading}
             />
+            {isSearching && (
+              <div className="absolute right-3 top-1/2 -translate-y-1/2">
+                <Loader2 className="animate-spin text-gray-400" size={20} />
+              </div>
+            )}
           </div>
           <button
             type="submit"
-            disabled={!url.trim() || isLoading}
+            disabled={!input.trim() || isLoading}
-            className="px-4 py-2 sm:px-6 sm:py-3 bg-green-500 text-white rounded-lg hover:bg-green-600 disabled:bg-gray-700 disabled:text-gray-500 transition-colors font-medium whitespace-nowrap text-sm sm:text-base"
+            className="px-4 py-2 sm:px-6 sm:py-3 bg-green-500 text-white rounded-lg hover:bg-green-600 disabled:bg-gray-700 disabled:text-gray-500 transition-colors font-medium whitespace-nowrap text-sm sm:text-base flex items-center gap-2 justify-center"
           >
-            {isLoading ? 'Adding...' : 'Add Song'}
+            {isLoading ? (
+              <>
+                <Loader2 className="animate-spin" size={18} />
+                <span>Adding...</span>
+              </>
+            ) : isYoutubeUrl(input) ? (
+              <>
+                <Plus size={18} />
+                <span>Add Song</span>
+              </>
+            ) : (
+              <>
+                <Search size={18} />
+                <span>Search</span>
+              </>
+            )}
           </button>
         </form>
+
+        {/* Search Results Dropdown */}
+        {showResults && searchResults.length > 0 && (
+          <div
+            ref={resultsRef}
+            className="absolute top-full left-0 right-0 mt-2 bg-gray-800 rounded-lg shadow-2xl border border-gray-700 max-h-96 overflow-y-auto z-50"
+          >
+            {searchResults.map((result) => (
+              <button
+                key={result.id}
+                onClick={() => handleSelectResult(result)}
+                className="w-full p-3 hover:bg-gray-700 transition-colors flex items-center gap-3 text-left border-b border-gray-700 last:border-b-0"
+              >
+                <div className="relative w-20 h-14 flex-shrink-0 rounded overflow-hidden">
+                  <Image
+                    src={result.thumbnail}
+                    alt={result.title}
+                    fill
+                    className="object-cover"
+                    unoptimized
+                  />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <p className="text-white text-sm font-medium truncate">
+                    {result.title}
+                  </p>
+                  <p className="text-gray-400 text-xs truncate">
+                    {result.channel}
+                  </p>
+                </div>
+                <div className="text-gray-400 text-xs flex-shrink-0">
+                  {formatDuration(result.duration)}
+                </div>
+              </button>
+            ))}
+          </div>
+        )}
+
+        {showResults && searchResults.length === 0 && !isSearching && (
+          <div
+            ref={resultsRef}
+            className="absolute top-full left-0 right-0 mt-2 bg-gray-800 rounded-lg shadow-2xl border border-gray-700 p-4 z-50"
+          >
+            <p className="text-gray-400 text-center">No results found</p>
+          </div>
+        )}
+
+        {searchError && (
+          <div className="absolute top-full left-0 right-0 mt-2 bg-red-900/20 border border-red-800 rounded-lg p-3 z-50">
+            <p className="text-red-400 text-sm">{searchError}</p>
+          </div>
+        )}
       </div>
     </header>
   )

components/PlayerBar.tsx

@@ -125,7 +125,7 @@ export default function PlayerBar({
       audio.removeEventListener('canplay', handleCanPlay)
       audio.removeEventListener('ended', handleEnded)
     }
-  }, [onNext])
+  }, [onNext, currentSong])
 
   const togglePlay = () => {
     if (audioRef.current) {

lib/ytdlp.ts

@@ -203,3 +203,65 @@ export async function getYoutubePlaylistMetadata(url: string): Promise<Array<{
   }
 }
 
+export async function searchYoutube(query: string, maxResults: number = 10): Promise<Array<{
+  id: string
+  title: string
+  channel: string
+  thumbnail: string
+  duration: number
+}>> {
+  try {
+    console.log('[searchYoutube] Searching for:', query)
+    const stdout = await executeYtDlp([
+      '--dump-json',
+      '--no-warnings',
+      '--flat-playlist',
+      '--no-playlist',
+      `ytsearch${maxResults}:${query}`
+    ], 60000)  // 60 second timeout
+    
+    // Split by newlines and parse each JSON object
+    const lines = stdout.trim().split('\n').filter(line => line.trim())
+    const videos = lines.map(line => {
+      try {
+        return JSON.parse(line)
+      } catch (e) {
+        return null
+      }
+    }).filter((data: any) => data && data.id)
+    
+    console.log('[searchYoutube] Found', videos.length, 'results')
+    
+    return videos.map((data: any) => {
+      // Get best thumbnail URL
+      let thumbnail = ''
+      if (data.thumbnails && Array.isArray(data.thumbnails) && data.thumbnails.length > 0) {
+        const bestThumbnail = data.thumbnails
+          .filter((t: any) => t.url)
+          .sort((a: any, b: any) => {
+            const widthA = a.width || 0
+            const widthB = b.width || 0
+            return widthB - widthA
+          })[0]
+        thumbnail = bestThumbnail?.url || data.thumbnails[0]?.url || ''
+      }
+      
+      // Fallback to standard YouTube thumbnail URLs
+      if (!thumbnail && data.id) {
+        thumbnail = `https://i.ytimg.com/vi/${data.id}/hqdefault.jpg`
+      }
+      
+      return {
+        id: data.id,
+        title: data.title,
+        channel: data.channel || data.uploader || 'Unknown',
+        thumbnail,
+        duration: data.duration || 0,
+      }
+    })
+  } catch (error) {
+    console.error('[searchYoutube] Error:', error)
+    throw new Error(`Failed to search YouTube: ${error}`)
+  }
+}
+