feat(web): add YouTube search feature using yt-search-lib

Author: luongnv89

web/index.html

@@ -57,7 +57,11 @@ <h1>music-cli</h1>
           </div>
           <div class="search-container" id="youtube-search-container" style="display: none;">
             <div class="header-input-group">
-              <input type="text" id="youtube-url" placeholder="Paste YouTube URL here..." class="search-input" />
+              <input type="text" id="youtube-search" placeholder="Search YouTube videos..." class="search-input" />
+              <button id="youtube-search-btn" class="header-play-btn">Search</button>
+            </div>
+            <div class="header-input-group" style="margin-top: 8px;">
+              <input type="text" id="youtube-url" placeholder="Or paste YouTube URL here..." class="search-input" />
               <button id="youtube-play-btn" class="header-play-btn">Play</button>
             </div>
           </div>
@@ -99,6 +103,14 @@ <h3>Moods</h3>
             </div>
           </div>
 
+          <div class="youtube-search-results-container" id="youtube-search-results" style="display: none;">
+            <div class="search-results-header">
+              <h3>Search Results</h3>
+              <button id="clear-search-results-btn" class="clear-history-btn" title="Clear Results">Clear</button>
+            </div>
+            <div id="search-results-grid" class="search-results-grid"></div>
+          </div>
+
           <div class="youtube-history-container">
             <div class="history-header">
               <h3>Recently Played</h3>

web/package-lock.json

@@ -13,6 +13,7 @@
     "vite": "^7.2.4"
   },
   "dependencies": {
-    "lucide": "^0.562.0"
+    "lucide": "^0.562.0",
+    "yt-search-lib": "^1.0.2"
   }
 }

web/package.json

@@ -3,6 +3,7 @@ import { stations, categories, moods, moodIcons, searchStations, getStationsByCa
 import audioManager from './services/AudioManager.js';
 import youtubeManager from './services/YouTubeManager.js';
 import historyService from './services/HistoryService.js';
+import youtubeSearchService from './services/YouTubeSearchService.js';
 import { createIconElement } from './utils/icons.js';
 import consentService from './services/ConsentService.js';
 import { LegalPages } from './pages/LegalPages.js';
@@ -87,6 +88,8 @@ function init() {
 
   renderHistory();
 
+  youtubeSearchService.init();
+
   router.register('/', () => switchMode('radio'));
   router.register('/youtube', () => switchMode('youtube'));
   router.register('/privacy', () => {
@@ -416,11 +419,20 @@ function setupEventListeners() {
     if (e.key === 'Enter') playYouTubeVideo();
   });
 
+  document.getElementById('youtube-search-btn').addEventListener('click', searchYouTubeVideos);
+  document.getElementById('youtube-search').addEventListener('keypress', (e) => {
+    if (e.key === 'Enter') searchYouTubeVideos();
+  });
+
   document.getElementById('clear-history-btn').addEventListener('click', () => {
     historyService.clearHistory();
     renderHistory();
   });
 
+  document.getElementById('clear-search-results-btn').addEventListener('click', () => {
+    clearSearchResults();
+  });
+
   const enableYoutubeBtn = document.getElementById('enable-youtube-btn');
   if (enableYoutubeBtn) {
     enableYoutubeBtn.addEventListener('click', () => {
@@ -453,6 +465,11 @@ function switchMode(mode) {
     youtubeSearchContainer.style.display = mode === 'youtube' ? 'block' : 'none';
   }
 
+  const searchResultsContainer = document.getElementById('youtube-search-results');
+  if (searchResultsContainer) {
+    searchResultsContainer.style.display = mode === 'youtube' ? 'none' : 'none';
+  }
+
   if (mode === 'youtube') {
     audioManager.pause();
     if (!consentService.hasConsent('youtube')) {
@@ -667,6 +684,106 @@ function playYouTubeVideo() {
   updatePlaybackUrl('v', videoId);
 }
 
+async function searchYouTubeVideos() {
+  const searchInput = document.getElementById('youtube-search');
+  const query = searchInput.value.trim();
+
+  if (!query) {
+    clearSearchResults();
+    return;
+  }
+
+  const searchBtn = document.getElementById('youtube-search-btn');
+  const resultsContainer = document.getElementById('youtube-search-results');
+
+  try {
+    if (!youtubeSearchService.isReady()) {
+      showSearchError('YouTube search not initialized. Please refresh the page.');
+      return;
+    }
+
+    searchBtn.disabled = true;
+    searchBtn.textContent = 'Searching...';
+
+    const results = await youtubeSearchService.search(query, 12);
+
+    if (results.length === 0) {
+      showSearchError('No results found');
+    } else {
+      renderSearchResults(results);
+    }
+  } catch (error) {
+    console.error('Search error:', error);
+    showSearchError(error.message || 'Search failed. Please try again.');
+  } finally {
+    searchBtn.disabled = false;
+    searchBtn.textContent = 'Search';
+  }
+}
+
+function renderSearchResults(results) {
+  const container = document.getElementById('search-results-grid');
+  const resultsContainer = document.getElementById('youtube-search-results');
+
+  container.innerHTML = '';
+  resultsContainer.style.display = 'block';
+
+  results.forEach(video => {
+    const card = document.createElement('div');
+    card.className = 'search-result-card';
+
+    card.innerHTML = `
+      <div class="search-result-thumbnail">
+        <img src="${video.thumbnail}" alt="${video.title}" />
+        <div class="search-result-overlay">
+          <div class="play-overlay-icon"></div>
+        </div>
+      </div>
+      <div class="search-result-info">
+        <div class="search-result-title">${video.title}</div>
+        <div class="search-result-channel">${video.channel}</div>
+        ${video.duration ? `<div class="search-result-duration">${video.duration}</div>` : ''}
+      </div>
+    `;
+
+    const playOverlayIcon = card.querySelector('.play-overlay-icon');
+    playOverlayIcon.appendChild(createIconElement('play', 32));
+
+    card.addEventListener('click', () => {
+      playYouTubeVideoById(video.videoId, video.title);
+    });
+
+    container.appendChild(card);
+  });
+}
+
+function playYouTubeVideoById(videoId, title) {
+  clearSearchResults();
+  document.getElementById('youtube-url').value = `https://www.youtube.com/watch?v=${videoId}`;
+  playYouTubeVideo();
+}
+
+function clearSearchResults() {
+  const container = document.getElementById('search-results-grid');
+  const resultsContainer = document.getElementById('youtube-search-results');
+
+  container.innerHTML = '';
+  resultsContainer.style.display = 'none';
+  document.getElementById('youtube-search').value = '';
+}
+
+function showSearchError(message) {
+  const container = document.getElementById('search-results-grid');
+  const resultsContainer = document.getElementById('youtube-search-results');
+
+  container.innerHTML = `
+    <div class="search-error-message">
+      <p>${message}</p>
+    </div>
+  `;
+  resultsContainer.style.display = 'block';
+}
+
 function togglePlayback() {
   if (currentMode === 'radio') {
     if (audioManager.isPlaying) {

web/src/main.js

@@ -0,0 +1,108 @@
+import YouTubeClient from 'yt-search-lib';
+
+class YouTubeSearchService {
+  constructor() {
+    this.client = null;
+    this.lastRequestTime = 0;
+    this.minRequestInterval = 300;
+  }
+
+  init(proxyUrl = 'https://api.allorigins.win/raw?url=') {
+    this.client = new YouTubeClient({
+      proxyUrl,
+      useCache: true,
+      cacheMaxAge: 3600000
+    });
+  }
+
+  isReady() {
+    return this.client !== null;
+  }
+
+  async _enforceRateLimit() {
+    const now = Date.now();
+    const timeSinceLastRequest = now - this.lastRequestTime;
+
+    if (timeSinceLastRequest < this.minRequestInterval) {
+      await new Promise(resolve =>
+        setTimeout(() => resolve(), this.minRequestInterval - timeSinceLastRequest)
+      );
+    }
+
+    this.lastRequestTime = Date.now();
+  }
+
+  async search(query, maxResults = 10) {
+    if (!this.isReady()) {
+      throw new Error('YouTube search service not initialized. Call init(proxyUrl) first.');
+    }
+
+    if (!query || typeof query !== 'string' || query.trim().length === 0) {
+      throw new Error('Invalid search query');
+    }
+
+    await this._enforceRateLimit();
+
+    try {
+      const results = await this.client.search(query.trim(), {
+        limit: Math.min(Math.max(maxResults, 1), 50),
+        type: 'video'
+      });
+
+      return this._normalizeResults(results);
+    } catch (error) {
+      console.error('YouTube search error:', error);
+      throw this._parseError(error);
+    }
+  }
+
+  _normalizeResults(results) {
+    if (!Array.isArray(results)) {
+      return [];
+    }
+
+    return results
+      .filter(item => item && item.id && item.title)
+      .map(item => ({
+        videoId: item.id,
+        title: item.title || 'Unknown Title',
+        description: item.description || '',
+        channel: item.author || 'Unknown Channel',
+        channelId: '',
+        publishedAt: item.publishedAt || new Date().toISOString(),
+        duration: item.duration || '',
+        viewCount: item.viewCount || '',
+        thumbnail: this._getBestThumbnail(item)
+      }));
+  }
+
+  _getBestThumbnail(item) {
+    if (item.thumbnails && item.thumbnails.length > 0) {
+      const sorted = [...item.thumbnails].sort((a, b) => b.width - a.width);
+      return sorted[0]?.url || item.thumbnail_url;
+    }
+
+    return item.thumbnail_url || null;
+  }
+
+  _parseError(error) {
+    if (error.message && error.message.includes('Network error')) {
+      return new Error('Network error. Check your connection and CORS proxy.');
+    }
+
+    if (error.message && error.message.includes('CORS')) {
+      return new Error('CORS error. Try a different proxy URL.');
+    }
+
+    return error;
+  }
+
+  clearCache() {
+    if (this.client) {
+      this.client.clearCache();
+    }
+  }
+}
+
+export const youtubeSearchService = new YouTubeSearchService();
+export default youtubeSearchService;