+
+ );
+ }
+
+ return (
+ + SoundCloud Client ID required to search and play mixes +
+ +
+ {/* Hidden SoundCloud widget iframe */}
+
+
+ {/* Search */}
+
+
+ )}
+
+ {/* Error */}
+ {error && (
+
+ );
+};
diff --git a/src/components/music/YouTubePlayer.tsx b/src/components/music/YouTubePlayer.tsx
new file mode 100644
index 0000000..435923d
--- /dev/null
+++ b/src/components/music/YouTubePlayer.tsx
@@ -0,0 +1,398 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { motion } from 'framer-motion';
+import { Search, Play, Pause, Loader2, Youtube, Heart, SkipForward, SkipBack, Volume2 } from 'lucide-react';
+import { useMusicApiKeys } from '@/hooks/useMusicApiKeys';
+import type { YTPlayer, YTStateChangeEvent, YTPlayerEvent } from '@/types/media-apis.d';
+interface YouTubeVideo {
+ id: string;
+ title: string;
+ channelTitle: string;
+ thumbnail: string;
+ duration?: string;
+}
+
+interface YouTubePlayerProps {
+ playSound: (sound: string) => void;
+ onOpenSettings: () => void;
+}
+
+// YouTube genres for discovery
+const YOUTUBE_GENRES = [
+ { label: 'Electronic', query: 'electronic music mix 2024' },
+ { label: 'Lo-Fi', query: 'lofi hip hop beats to study' },
+ { label: 'Synthwave', query: 'synthwave retrowave mix' },
+ { label: 'Ambient', query: 'ambient relaxing music' },
+ { label: 'Jazz', query: 'jazz music playlist' },
+ { label: 'Classical', query: 'classical music piano' },
+ { label: 'Hip Hop', query: 'hip hop beats instrumental' },
+ { label: 'Chill', query: 'chill vibes music mix' },
+];
+
+const FAVORITES_KEY = 'youtube-favorites';
+
+export const YouTubePlayer = ({ playSound, onOpenSettings }: YouTubePlayerProps) => {
+ const { apiKeys, hasYoutubeKey } = useMusicApiKeys();
+ const [searchQuery, setSearchQuery] = useState('');
+ const [videos, setVideos] = useState
+
+
+ {/* Genre pills */}
+
+
+
+
+
+ {SOUNDCLOUD_GENRES.map((genre) => (
+
+ ))}
+
+
+ {/* Now Playing */}
+ {currentTrack && (
+
+ {currentTrack.artwork_url ? (
+ 
+ ) : (
+
+
+
+ )}
+
+
+ {currentTrack.title}
+{currentTrack.user.username}
+
+
+
+
+
+
+
+
+
+ )}
+
+ {/* Results */}
+ {error}
+
+ {isLoading ? (
+ playTrack(track)}
+ className={`w-full flex items-center gap-3 p-2 border-b border-primary/10 hover:bg-primary/10 transition-all text-left ${
+ currentTrack?.id === track.id ? 'bg-primary/20' : ''
+ }`}
+ >
+ {track.artwork_url ? (
+ 
+ ) : (
+
+ ))
+ )}
+
+
+
+
+ ) : displayTracks.length === 0 ? (
+
+
+ ) : (
+ displayTracks.map((track, index) => (
+ + {showFavorites ? 'No favorites yet' : 'Search for mixes or select a genre'} +
+
+
+ )}
+
+
+
+ {track.title}
++ {track.user.username} • {formatDuration(track.duration)} +
++ {showFavorites ? `${favorites.length} favorites` : `${tracks.length} mixes`} • Mixes & sets (10+ min) +
+
+
+ );
+ }
+
+ return (
+ + YouTube API key required to search and play music +
+ +
+ {/* Hidden player container */}
+
+
+ {/* Search */}
+
+
+ )}
+
+ {/* Error */}
+ {error && (
+
+ );
+};
diff --git a/src/hooks/useMusicApiKeys.ts b/src/hooks/useMusicApiKeys.ts
new file mode 100644
index 0000000..a06d2d9
--- /dev/null
+++ b/src/hooks/useMusicApiKeys.ts
@@ -0,0 +1,53 @@
+import { useState, useEffect, useCallback } from 'react';
+
+interface MusicApiKeys {
+ youtubeApiKey: string;
+ soundcloudClientId: string;
+}
+
+const STORAGE_KEY = 'music-api-keys';
+
+export const useMusicApiKeys = () => {
+ const [apiKeys, setApiKeys] = useState
+
+
+ {/* Genre pills */}
+
+
+
+
+
+ {YOUTUBE_GENRES.map((genre) => (
+
+ ))}
+
+
+ {/* Now Playing */}
+ {currentVideo && (
+
+ 
+
+
+
+ {currentVideo.title}
+{currentVideo.channelTitle}
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ {/* Results */}
+ {error}
+
+ {isLoading ? (
+ playVideo(video)}
+ className={`w-full flex items-center gap-3 p-2 border-b border-primary/10 hover:bg-primary/10 transition-all text-left ${
+ currentVideo?.id === video.id ? 'bg-primary/20' : ''
+ }`}
+ >
+ 
+
+ ))
+ )}
+
+
+
+
+ ) : displayVideos.length === 0 ? (
+
+
+ ) : (
+ displayVideos.map((video, index) => (
+ + {showFavorites ? 'No favorites yet' : 'Search for music or select a genre'} +
+
+
+
+ {video.title}
+{video.channelTitle}
++ {showFavorites ? `${favorites.length} favorites` : `${videos.length} results`} • Audio-only playback +
+- Stream radio stations from around the world or add your own stream URL. + Stream radio stations, YouTube music, or SoundCloud mixes.
+ {/* API Settings Button */} +
+
+
+
+
- {(['browse', 'presets', 'custom'] as const).map((tab) => (
+
)}
+ {/* YouTube Tab */}
+ {activeTab === 'youtube' && (
+
+ {([
+ { key: 'browse', label: 'Radio', icon: Radio },
+ { key: 'youtube', label: 'YouTube', icon: Youtube },
+ { key: 'soundcloud', label: 'SoundCloud', icon: Music2 },
+ { key: 'presets', label: 'Electronic', icon: Zap },
+ { key: 'custom', label: 'Custom', icon: Link2 },
+ ] as const).map((tab) => (
))}
@@ -487,6 +522,22 @@ const Music = () => {
diff --git a/src/types/media-apis.d.ts b/src/types/media-apis.d.ts
new file mode 100644
index 0000000..39499c5
--- /dev/null
+++ b/src/types/media-apis.d.ts
@@ -0,0 +1,119 @@
+// YouTube IFrame API type definitions
+declare global {
+ interface Window {
+ YT: {
+ Player: new (
+ element: HTMLElement | string,
+ options: YTPlayerOptions
+ ) => YTPlayer;
+ PlayerState: {
+ PLAYING: number;
+ PAUSED: number;
+ ENDED: number;
+ BUFFERING: number;
+ CUED: number;
+ };
+ };
+ onYouTubeIframeAPIReady?: () => void;
+ }
+}
+
+export interface YTPlayerOptions {
+ height?: string | number;
+ width?: string | number;
+ videoId?: string;
+ playerVars?: {
+ autoplay?: 0 | 1;
+ controls?: 0 | 1;
+ modestbranding?: 0 | 1;
+ rel?: 0 | 1;
+ fs?: 0 | 1;
+ playsinline?: 0 | 1;
+ };
+ events?: {
+ onReady?: (event: YTPlayerEvent) => void;
+ onStateChange?: (event: YTStateChangeEvent) => void;
+ onError?: (event: YTErrorEvent) => void;
+ };
+}
+
+export interface YTPlayer {
+ playVideo(): void;
+ pauseVideo(): void;
+ stopVideo(): void;
+ loadVideoById(videoId: string, startSeconds?: number): void;
+ cueVideoById(videoId: string, startSeconds?: number): void;
+ setVolume(volume: number): void;
+ getVolume(): number;
+ mute(): void;
+ unMute(): void;
+ isMuted(): boolean;
+ getCurrentTime(): number;
+ getDuration(): number;
+ getPlayerState(): number;
+ destroy(): void;
+}
+
+export interface YTPlayerEvent {
+ target: YTPlayer;
+}
+
+export interface YTStateChangeEvent {
+ target: YTPlayer;
+ data: number;
+}
+
+export interface YTErrorEvent {
+ target: YTPlayer;
+ data: number;
+}
+
+// SoundCloud Widget API type definitions
+export interface SCWidgetOptions {
+ auto_play?: boolean;
+ buying?: boolean;
+ sharing?: boolean;
+ download?: boolean;
+ show_artwork?: boolean;
+ show_playcount?: boolean;
+ show_user?: boolean;
+ callback?: () => void;
+}
+
+export interface SCWidget {
+ load(url: string, options?: SCWidgetOptions): void;
+ play(): void;
+ pause(): void;
+ toggle(): void;
+ setVolume(volume: number): void;
+ getVolume(callback: (volume: number) => void): void;
+ bind(event: string, callback: () => void): void;
+ unbind(event: string): void;
+ getCurrentSound(callback: (sound: object) => void): void;
+ getPosition(callback: (position: number) => void): void;
+ seekTo(milliseconds: number): void;
+}
+
+export interface SCWidgetConstructor {
+ (iframe: HTMLIFrameElement | string): SCWidget;
+ Events: {
+ PLAY: string;
+ PAUSE: string;
+ FINISH: string;
+ READY: string;
+ PLAY_PROGRESS: string;
+ LOAD_PROGRESS: string;
+ SEEK: string;
+ ERROR: string;
+ };
+}
+
+declare global {
+ interface Window {
+ SC?: {
+ Widget: SCWidgetConstructor;
+ };
+ }
+}
+
+export {};