- {/* Left section: Logo + Name */}
-
- ![SkyBuddy logo]({"/cloud.svg"})
-
- - SKYBuddy -
- +
+ {/* Left section: Logo + Name */}
+
+ 
+
+ + SKYBuddy +
+ - {/* Search Bar */} -
+ {/* Search Bar */}
+
- )
+ );
}
-export default Header;
-
+export default Header;
\ No newline at end of file
diff --git a/src/components/mood-selector.tsx b/src/components/mood-selector.tsx
index 7c44b06..aba9cd0 100644
--- a/src/components/mood-selector.tsx
+++ b/src/components/mood-selector.tsx
@@ -1,6 +1,5 @@
-import { useState } from 'react';
import { Smile, Wind, Brain, Zap, Sparkles } from 'lucide-react';
-import type { MoodType } from '@/types/playlist';
+import type { MoodType } from '../types/playlist';
interface MoodSelectorProps {
selectedMood?: MoodType;
@@ -23,31 +22,32 @@ const MoodSelector = ({ selectedMood, onMoodChange }: MoodSelectorProps) => {
onMoodChange(mood);
}
};
-
return (
-
- {/* The new button with text and an emoji */}
-
- {/* Your original theme toggle */}
-
- setTheme(isDark?'light':'dark')}
- className={`flex items-center cursor-pointer transition-transform duration-500
- ${isDark?'rotate-180':'rotate-0'}`
- }>
- {isDark?
- (
setTheme(isDark ? 'light' : 'dark')}
+ className={`flex items-center cursor-pointer transition-transform duration-500 ${isDark ? 'rotate-180' : 'rotate-0'}`}
+ >
+ {isDark ? (
+
-
-
How are you feeling?
- (Optional) +
+ ;
+ updatePlaylist: (id: string, updates: Partial) => void;
+ deletePlaylist: (id: string) => void;
+
+ // Track management
+ addTrack: (playlistId: string, trackName: string, artist?: string) => void;
+ updateTrack: (playlistId: string, trackId: string, updates: Partial
+
- How are you feeling?
+Choose a mood to discover perfect playlists
- {moodOptions.map((mood) => (
+ = ({ mood }) => {
+ const { theme } = useTheme?.() || {
+ theme: typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+ };
+ const isDarkMode = theme === 'dark';
+
+ // Filter tracks by mood if provided
+ const tracks = mood ? demoTracks.filter(t => t.mood === mood) : demoTracks;
+ const [current, setCurrent] = useState(0);
+ const [playing, setPlaying] = useState(false);
+ const [favorites, setFavorites] = useState(() => getStoredFavorites());
+ const [volume, setVolume] = useState(0.7);
+ const [shuffle, setShuffle] = useState(false);
+ const [progress, setProgress] = useState(0);
+ const [duration, setDuration] = useState(0);
+ const audioRef = useRef(null);
+
+ // Favorite/unfavorite current track
+ function handleToggleFavorite() {
+ const trackId = tracks[current]?.title + tracks[current]?.artist;
+ let updated: string[];
+ if (favorites.includes(trackId)) {
+ updated = favorites.filter(f => f !== trackId);
+ } else {
+ updated = [...favorites, trackId];
+ }
+ setFavorites(updated);
+ saveFavorites(updated);
+ }
+
+ // Keep favorites in sync with localStorage
+ useEffect(() => {
+ saveFavorites(favorites);
+ }, [favorites]);
+
+ const playPause = () => {
+ if (playing) {
+ audioRef.current?.pause();
+ } else {
+ audioRef.current?.play();
+ }
+ setPlaying(!playing);
+ };
+
+ const next = () => {
+ if (shuffle) {
+ let nextIdx = Math.floor(Math.random() * tracks.length);
+ // Avoid repeating the same track
+ if (tracks.length > 1 && nextIdx === current) {
+ nextIdx = (nextIdx + 1) % tracks.length;
+ }
+ setCurrent(nextIdx);
+ } else {
+ setCurrent((prev) => (prev + 1) % tracks.length);
+ }
+ setPlaying(false);
+ setProgress(0);
+ };
+
+ const prev = () => {
+ setCurrent((prev) => (prev - 1 + tracks.length) % tracks.length);
+ setPlaying(false);
+ setProgress(0);
+ };
+
+ // Volume control
+ useEffect(() => {
+ if (audioRef.current) {
+ audioRef.current.volume = volume;
+ }
+ }, [volume]);
+
+ // Progress bar animation
+ useEffect(() => {
+ const audio = audioRef.current;
+ if (!audio) return;
+ const updateProgress = () => {
+ setProgress(audio.currentTime);
+ };
+ const setAudioDuration = () => {
+ setDuration(audio.duration || 0);
+ };
+ audio.addEventListener('timeupdate', updateProgress);
+ audio.addEventListener('loadedmetadata', setAudioDuration);
+ return () => {
+ audio.removeEventListener('timeupdate', updateProgress);
+ audio.removeEventListener('loadedmetadata', setAudioDuration);
+ };
+ }, [current]);
+
+ // Seek bar handler
+ const handleSeek = (e: React.ChangeEvent) => {
+ const seekTime = Number(e.target.value);
+ if (audioRef.current) {
+ audioRef.current.currentTime = seekTime;
+ setProgress(seekTime);
+ }
+ };
+
+ // Icon helper for Material Icons
+ const Icon = ({
+ name,
+ className = "",
+ style = {},
+ ...props
+ }: React.HTMLAttributes & { name: string }) => (
+ {name}
+ );
+
+ // Volume icon logic
+ const getVolumeIcon = () => {
+ if (volume === 0) return "volume_off";
+ if (volume < 0.5) return "volume_down";
+ return "volume_up";
+ };
+
+ return (
+
+ {/* Updated glowing background effect that works well in both modes */}
+
+ 
+
+
+
+
+
+
+
+
+ {/* Animated Progress Bar */}
+
+
+
+ {/* Controls */}
+
+ setShuffle(s => !s)}
+ className={`p-2 rounded-full ${
+ shuffle
+ ? 'bg-indigo-500 text-white shadow-lg shadow-indigo-500/30'
+ : 'text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'
+ }`}
+ whileHover={{ scale: 1.15 }}
+ whileTap={{ scale: 0.9 }}
+ title="Shuffle"
+ >
+
+
+
+
+
+
+
+
+
+
+
+ setVolume(volume > 0 ? 0 : 0.7)}
+ className="p-2 text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full"
+ whileHover={{ scale: 1.15 }}
+ whileTap={{ scale: 0.9 }}
+ title={volume > 0 ? "Mute" : "Unmute"}
+ >
+
+
+
+ {/* Volume */}
+
+ setVolume(Number(e.target.value))}
+ className="w-full h-1 rounded-full appearance-none cursor-pointer bg-gray-200 dark:bg-gray-700"
+ whileFocus={{ scale: 1.03 }}
+ style={{
+ background: `linear-gradient(90deg,
+ rgba(99, 102, 241, 0.8) ${volume * 100}%,
+ rgba(229, 231, 235, 0.3) ${volume * 100}%)`
+ }}
+ />
+
+
+ ) : (
+
+ );
+
+ // Helper to format time in mm:ss
+ function formatTime(sec: number) {
+ if (!isFinite(sec)) return '0:00';
+ const m = Math.floor(sec / 60);
+ const s = Math.floor(sec % 60);
+ return `${m}:${s.toString().padStart(2, '0')}`;
+ }
+};
diff --git a/src/components/playlist-card.tsx b/src/components/playlist-card.tsx
index 6f3f360..3a8fb4e 100644
--- a/src/components/playlist-card.tsx
+++ b/src/components/playlist-card.tsx
@@ -2,6 +2,7 @@ import { ExternalLink, Music2 } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import type { SpotifyPlaylist } from '@/types/playlist';
import { useState } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
interface PlaylistCardProps {
playlist: SpotifyPlaylist;
@@ -10,13 +11,23 @@ interface PlaylistCardProps {
const PlaylistCard = ({ playlist }: PlaylistCardProps) => {
const [imageError, setImageError] = useState(false);
+ const navigate = useNavigate();
+ const [searchParams] = useSearchParams();
+ // Try to get mood from search params, fallback to undefined
+ const mood = searchParams.get('mood') || undefined;
+
+ const handleCardClick = (e: React.MouseEvent) => {
+ e.preventDefault();
+ // Navigate to /music?mood=...&playlist=...
+ navigate(`/music?mood=${encodeURIComponent(mood || '')}&playlist=${encodeURIComponent(playlist.id)}`);
+ };
+
return (
{/* Playlist Image - Smaller with fallback */}
diff --git a/src/components/playlist-manager.tsx b/src/components/playlist-manager.tsx
new file mode 100644
index 0000000..7aeffd3
--- /dev/null
+++ b/src/components/playlist-manager.tsx
@@ -0,0 +1,231 @@
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+import { Plus, Trash2, Share2, Music } from 'lucide-react';
+import { usePlaylist } from '../hooks/use-playlist';
+import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
+import { Button } from './ui/button';
+import type { Playlist } from '../context/playlist-provider';
+
+interface PlaylistManagerProps {
+ mood?: string;
+ onSelectPlaylist?: (id: string) => void;
+}
+
+export const PlaylistManager: React.FC = ({ mood, onSelectPlaylist }) => {
+ const {
+ playlists,
+ createPlaylist,
+ deletePlaylist,
+ addTrack,
+ sharePlaylist
+ } = usePlaylist();
+
+ const [newName, setNewName] = useState('');
+ const [newDescription, setNewDescription] = useState('');
+ const [trackInputs, setTrackInputs] = useState<{ [playlistId: string]: string }>({});
+
+ // Filter playlists by mood if provided
+ const filteredPlaylists = mood
+ ? playlists.filter((p: Playlist) => p.mood.toLowerCase() === mood.toLowerCase())
+ : playlists;
+
+ // Handle creating new playlist
+ const handleCreatePlaylist = async () => {
+ if (!newName.trim()) return;
+
+ try {
+ await createPlaylist(newName.trim(), mood || 'General', newDescription.trim() || undefined);
+ setNewName('');
+ setNewDescription('');
+ } catch (error) {
+ console.error('Failed to create playlist:', error);
+ }
+ };
+
+ // Handle adding track to playlist
+ const handleAddTrack = (playlistId: string) => {
+ const trackName = trackInputs[playlistId]?.trim();
+ if (!trackName) return;
+
+ try {
+ addTrack(playlistId, trackName);
+ setTrackInputs(prev => ({ ...prev, [playlistId]: '' }));
+ } catch (error) {
+ console.error('Failed to add track:', error);
+ }
+ };
+
+ // Handle sharing
+ const handleShare = async (playlistId: string) => {
+ try {
+ const shareId = await sharePlaylist(playlistId);
+ const shareUrl = `${window.location.origin}/playlist/shared/${shareId}`;
+
+ // Copy to clipboard if available
+ if (navigator.clipboard) {
+ await navigator.clipboard.writeText(shareUrl);
+ alert('Share link copied to clipboard!');
+ } else {
+ prompt('Copy this share link:', shareUrl);
+ }
+ } catch (error) {
+ console.error('Failed to share playlist:', error);
+ alert('Failed to share playlist');
+ }
+ };
+ return (
+ = ({ tracks, createdAt }) => {
+ // Calculate total duration (for local/r2 tracks with duration)
+ const totalDurationSeconds = tracks.reduce((total, track) => {
+ return total + (track.duration || 0);
+ }, 0);
+
+ const hours = Math.floor(totalDurationSeconds / 3600);
+ const minutes = Math.floor((totalDurationSeconds % 3600) / 60);
+
+ // Format created date
+ const createdDate = createdAt
+ ? new Date(createdAt).toLocaleDateString()
+ : 'Unknown date';
+
+ return (
+ = ({ playlistId, onClose }) => {
+ const { playlists, sharePlaylist, importSharedPlaylist } = usePlaylist();
+ const [shareUrl, setShareUrl] = useState('');
+ const [importUrl, setImportUrl] = useState('');
+ const [copied, setCopied] = useState(false);
+ const [isSharing, setIsSharing] = useState(false);
+ const [isImporting, setIsImporting] = useState(false);
+ const [error, setError] = useState('');
+
+ const playlist = playlistId ? playlists.find((p: Playlist) => p.id === playlistId) : null;
+ const handleShare = async () => {
+ if (!playlist) return;
+
+ setIsSharing(true);
+ setError('');
+
+ try {
+ const shareId = await sharePlaylist(playlist.id);
+ const url = `${window.location.origin}/playlist/shared/${shareId}`;
+ setShareUrl(url);
+ } catch (err) {
+ setError('Failed to create shareable link');
+ console.error('Share error:', err);
+ } finally {
+ setIsSharing(false);
+ }
+ };
+
+ const handleCopy = async () => {
+ if (!shareUrl) return;
+
+ try {
+ await navigator.clipboard.writeText(shareUrl);
+ setCopied(true);
+ setTimeout(() => setCopied(false), 2000);
+ } catch {
+ // Fallback for older browsers
+ const textArea = document.createElement('textarea');
+ textArea.value = shareUrl;
+ document.body.appendChild(textArea);
+ textArea.select();
+ document.execCommand('copy');
+ document.body.removeChild(textArea);
+ setCopied(true);
+ setTimeout(() => setCopied(false), 2000);
+ }
+ };
+
+ const handleImport = async () => {
+ if (!importUrl.trim()) return;
+
+ setIsImporting(true);
+ setError('');
+
+ try {
+ // Extract share ID from URL
+ const urlParts = importUrl.trim().split('/');
+ const shareId = urlParts[urlParts.length - 1];
+
+ if (!shareId) {
+ throw new Error('Invalid share URL format');
+ }
+ const success = await importSharedPlaylist(shareId);
+ if (success) {
+ setImportUrl('');
+ alert('Playlist imported successfully!');
+ } else {
+ throw new Error('Playlist not found or invalid share ID');
+ }
+ } catch (err) {
+ setError(err instanceof Error ? err.message : 'Failed to import playlist');
+ } finally {
+ setIsImporting(false);
+ }
+ };
+
+ const generateQRCode = () => {
+ if (!shareUrl) return;
+
+ // Using a simple QR code service for demo purposes
+ // In production, you might want to use a proper QR library
+ const qrUrl = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(shareUrl)}`;
+ window.open(qrUrl, '_blank');
+ };
+
+ return (
+
+
+
+
+
+ Share your mood playlists with friends or import shared playlists
+
+
+
+
+ {/* Share Section */}
+ {playlist && (
+
+ {error && (
+
+ {error}
+
+ )}
+
+
+ {/* Info */}
+
+
+ );
+};
diff --git a/src/components/storage-status.tsx b/src/components/storage-status.tsx
new file mode 100644
index 0000000..a2e5261
--- /dev/null
+++ b/src/components/storage-status.tsx
@@ -0,0 +1,192 @@
+import React, { useState, useEffect } from 'react';
+import { Cloud, HardDrive, Wifi, WifiOff, CheckCircle, AlertCircle } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+interface StorageStatusProps {
+ className?: string;
+}
+
+type StorageType = 'cloud' | 'local' | 'checking';
+type ConnectionStatus = 'online' | 'offline' | 'checking';
+
+export const StorageStatus: React.FC = ({ className = '' }) => {
+ const [storageType, setStorageType] = useState('checking');
+ const [connectionStatus, setConnectionStatus] = useState('checking');
+ const [isExpanded, setIsExpanded] = useState(false);
+
+ useEffect(() => {
+ checkStorageStatus();
+ checkConnectionStatus();
+
+ // Set up connection monitoring
+ const handleOnline = () => setConnectionStatus('online');
+ const handleOffline = () => setConnectionStatus('offline');
+
+ window.addEventListener('online', handleOnline);
+ window.addEventListener('offline', handleOffline);
+
+ return () => {
+ window.removeEventListener('online', handleOnline);
+ window.removeEventListener('offline', handleOffline);
+ };
+ }, []);
+
+ const checkStorageStatus = async () => {
+ try {
+ // Check if Cloudflare config is available
+ const hasCloudflareConfig = !!(
+ import.meta.env.VITE_CLOUDFLARE_ACCOUNT_ID &&
+ import.meta.env.VITE_CLOUDFLARE_ACCESS_KEY_ID &&
+ import.meta.env.VITE_CLOUDFLARE_BUCKET_NAME
+ );
+
+ if (hasCloudflareConfig && navigator.onLine) {
+ // Try to ping the storage service
+ await fetch(import.meta.env.VITE_CLOUDFLARE_CDN_URL || '', {
+ method: 'HEAD',
+ mode: 'no-cors'
+ }).catch(() => null);
+
+ setStorageType('cloud');
+ } else {
+ setStorageType('local');
+ }
+ } catch {
+ setStorageType('local');
+ }
+ };
+
+ const checkConnectionStatus = () => {
+ setConnectionStatus(navigator.onLine ? 'online' : 'offline');
+ };
+
+ const getStorageIcon = () => {
+ switch (storageType) {
+ case 'cloud':
+ return = ({
+ onUploadComplete,
+ onCancel
+}) => {
+ const [name, setName] = useState('');
+ const [artist, setArtist] = useState('');
+ const [source, setSource] = useState('local');
+ const [uri, setUri] = useState('');
+ const [isUploading, setIsUploading] = useState(false);
+ const [uploadProgress, setUploadProgress] = useState(0);
+
+ const fileInputRef = useRef(null);
+
+ const handleFileSelect = (e: React.ChangeEvent) => {
+ const file = e.target.files?.[0];
+ if (!file) return;
+
+ // Auto-populate name from filename
+ const fileName = file.name.replace(/\.[^/.]+$/, '');
+ setName(fileName);
+
+ // Create local object URL for preview
+ const objectUrl = URL.createObjectURL(file);
+ setUri(objectUrl);
+ };
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault();
+
+ if (!name.trim()) {
+ toast.error('Please enter a track name');
+ return;
+ }
+
+ try {
+ let finalUri = uri;
+ let finalSource = source;
+
+ // Handle file upload to R2
+ if (source === 'local' && fileInputRef.current?.files?.[0]) {
+ const file = fileInputRef.current.files[0];
+ setIsUploading(true);
+
+ try {
+ const result = await uploadAudioToR2(file, {
+ onProgress: setUploadProgress
+ });
+ finalUri = result.cdnUrl;
+ finalSource = 'r2';
+ } catch (error) {
+ console.error('Upload failed:', error);
+ toast.error('Failed to upload file');
+ setIsUploading(false);
+ return;
+ }
+
+ setIsUploading(false);
+ } else if (source === 'spotify') {
+ // Extract Spotify URI/ID
+ const spotifyMatch = uri.match(/(?:spotify:track:|open\.spotify\.com\/track\/)([a-zA-Z0-9]{22})/);
+ finalUri = spotifyMatch ? spotifyMatch[1] : uri;
+ } else if (source === 'youtube') {
+ // Extract YouTube video ID
+ const ytMatch = uri.match(/(?:youtube\.com\/watch\?v=|youtube\.be\/)([a-zA-Z0-9_-]{11})/);
+ finalUri = ytMatch ? ytMatch[1] : uri;
+ }
+
+ // Send back the track info to parent
+ onUploadComplete({
+ name: name.trim(),
+ artist: artist.trim() || 'Unknown',
+ source: finalSource,
+ uri: finalUri
+ });
+
+ } catch (error) {
+ console.error('Error:', error);
+ toast.error('Something went wrong');
+ }
+ };
+
+ return (
+
+ );
+};
\ No newline at end of file
diff --git a/src/components/unified-player.tsx b/src/components/unified-player.tsx
new file mode 100644
index 0000000..9068872
--- /dev/null
+++ b/src/components/unified-player.tsx
@@ -0,0 +1,401 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import {
+ Play,
+ Pause,
+ SkipBack,
+ SkipForward,
+ Volume2,
+ VolumeX,
+ Repeat,
+ Shuffle,
+} from 'lucide-react';
+import type { Track } from '../types/playlist';
+
+interface UnifiedPlayerProps {
+ tracks: Track[];
+ persistKey?: string;
+ onTrackChange?: (index: number) => void;
+}
+
+export const UnifiedPlayer: React.FC = ({
+ tracks = [],
+ persistKey,
+ onTrackChange,
+}) => {
+ // --- Helpers ---
+ const getSavedPosition = (): number => {
+ if (!persistKey) return 0;
+ try
+ {
+ const saved = localStorage.getItem(`player_position_${persistKey}`);
+ return saved ? parseInt(saved, 10) : 0;
+ } catch
+ {
+ return 0;
+ }
+ };
+
+ // --- State ---
+ const [currentIndex, setCurrentIndex] = useState(getSavedPosition());
+ const [isPlaying, setIsPlaying] = useState(false);
+ const [progress, setProgress] = useState(0);
+ const [duration, setDuration] = useState(0);
+ const [volume, setVolume] = useState(0.7);
+ const [isMuted, setIsMuted] = useState(false);
+ const [isShuffle, setIsShuffle] = useState(false);
+ const [isRepeat, setIsRepeat] = useState(false);
+ const audioRef = useRef(null);
+
+ const noTracks = !tracks || tracks.length === 0;
+ const currentTrack = !noTracks ? tracks[currentIndex] || tracks[0] : null;
+
+ // --- Hooks ---
+ useEffect(() => {
+ if (currentIndex >= tracks.length)
+ {
+ setCurrentIndex(0);
+ }
+ }, [tracks, currentIndex]);
+
+ useEffect(() => {
+ if (persistKey)
+ {
+ localStorage.setItem(`player_position_${persistKey}`, currentIndex.toString());
+ }
+ if (onTrackChange)
+ {
+ onTrackChange(currentIndex);
+ }
+ }, [currentIndex, persistKey, onTrackChange]);
+
+ const playNext = () => {
+ if (tracks.length <= 1) return;
+ let nextIndex;
+ if (isShuffle)
+ {
+ let randomIndex;
+ do
+ {
+ randomIndex = Math.floor(Math.random() * tracks.length);
+ } while (tracks.length > 1 && randomIndex === currentIndex);
+ nextIndex = randomIndex;
+ } else
+ {
+ nextIndex = (currentIndex + 1) % tracks.length;
+ }
+ setCurrentIndex(nextIndex);
+ };
+
+ const playPrevious = () => {
+ if (tracks.length <= 1) return;
+ if (progress > 3 && audioRef.current)
+ {
+ audioRef.current.currentTime = 0;
+ setProgress(0);
+ return;
+ }
+ const prevIndex = (currentIndex - 1 + tracks.length) % tracks.length;
+ setCurrentIndex(prevIndex);
+ };
+
+ useEffect(() => {
+ const audio = audioRef.current;
+ if (!audio) return;
+
+ const handleTimeUpdate = () => setProgress(audio.currentTime);
+ const handleLoadedMetadata = () => {
+ setDuration(audio.duration);
+ audio.volume = isMuted ? 0 : volume;
+ };
+ const handleEnded = () => {
+ if (isRepeat)
+ {
+ audio.currentTime = 0;
+ void audio.play();
+ } else
+ {
+ playNext();
+ }
+ };
+
+ audio.addEventListener('timeupdate', handleTimeUpdate);
+ audio.addEventListener('loadedmetadata', handleLoadedMetadata);
+ audio.addEventListener('ended', handleEnded);
+
+ return () => {
+ audio.removeEventListener('timeupdate', handleTimeUpdate);
+ audio.removeEventListener('loadedmetadata', handleLoadedMetadata);
+ audio.removeEventListener('ended', handleEnded);
+ };
+
+ }, [volume, isMuted, isRepeat]);
+
+ useEffect(() => {
+ const audio = audioRef.current;
+ if (!audio || !currentTrack) return;
+
+
+ if (['local', 'r2', 'external'].includes(currentTrack.source))
+ {
+ audio.src = currentTrack.uri;
+ audio.load();
+ setProgress(0);
+ if (isPlaying) void audio.play().catch(console.error);
+ }
+ }, [currentTrack, currentIndex, isPlaying]);
+
+ // --- Handlers ---
+ const togglePlayPause = () => {
+ if (!currentTrack) return;
+
+
+ if (['local', 'r2', 'external'].includes(currentTrack.source))
+ {
+ const audio = audioRef.current;
+ if (!audio) return;
+ if (isPlaying) audio.pause();
+ else void audio.play().catch(console.error);
+ } else if (currentTrack.source === 'spotify')
+ {
+ window.open(
+ currentTrack.uri.includes('spotify:track:')
+ ? `https://open.spotify.com/track/${currentTrack.uri.split(':').pop()}`
+ : `https://open.spotify.com/track/${currentTrack.uri}`,
+ '_blank'
+ );
+ } else if (currentTrack.source === 'youtube')
+ {
+ window.open(`https://www.youtube.com/watch?v=${currentTrack.uri}`, '_blank');
+ }
+
+ setIsPlaying(!isPlaying);
+ };
+
+ const handleSeek = (e: React.ChangeEvent) => {
+ const seekTime = Number(e.target.value);
+ if (audioRef.current)
+ {
+ audioRef.current.currentTime = seekTime;
+ setProgress(seekTime);
+ }
+ };
+
+ const handleVolumeChange = (e: React.ChangeEvent) => {
+ const newVolume = Number(e.target.value);
+ setVolume(newVolume);
+ if (audioRef.current) audioRef.current.volume = newVolume;
+ setIsMuted(newVolume === 0);
+ };
+
+ const toggleMute = () => {
+ if (audioRef.current) audioRef.current.volume = isMuted ? volume : 0;
+ setIsMuted(!isMuted);
+ };
+
+ const formatTime = (seconds: number): string => {
+ if (isNaN(seconds) || !isFinite(seconds)) return '0:00';
+ const mins = Math.floor(seconds / 60);
+ const secs = Math.floor(seconds % 60);
+ return `${mins}:${secs.toString().padStart(2, '0')} `;
+ };
+
+ // --- Conditional Render ---
+ if (noTracks)
+ {
+ return (
+ {/* Track info */}
+
+ {/* Progress bar */}
+ {
+ ['local', 'r2', 'external'].includes(currentTrack?.source ?? '') && (
+ {moodOptions.map((mood) => (
))}
diff --git a/src/components/music-player.tsx b/src/components/music-player.tsx
new file mode 100644
index 0000000..5f03d2b
--- /dev/null
+++ b/src/components/music-player.tsx
@@ -0,0 +1,381 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { useTheme } from '../context/theme-provider';
+
+interface MusicPlayerProps {
+ mood?: string;
+}
+
+const FAVORITES_KEY = 'skybuddy_favorite_tracks';
+
+function getStoredFavorites(): string[] {
+ try {
+ const data = localStorage.getItem(FAVORITES_KEY);
+ return data ? JSON.parse(data) : [];
+ } catch {
+ return [];
+ }
+}
+
+function saveFavorites(favs: string[]) {
+ localStorage.setItem(FAVORITES_KEY, JSON.stringify(favs));
+}
+
+// Dummy track data for now
+const demoTracks = [
+ {
+ title: 'Rainy Mood',
+ artist: 'SkyBuddy',
+ url: '/demo/rainy-mood.mp3',
+ cover: '/demo/rainy.jpg',
+ mood: 'Rain',
+ },
+ {
+ title: 'Sunny Vibes',
+ artist: 'SkyBuddy',
+ url: '/demo/sunny-vibes.mp3',
+ cover: '/demo/sunny.jpg',
+ mood: 'Happy',
+ },
+];
+
+export const MusicPlayer: React.FC
+
+
+
+
+ {/* Music card with frosted glass effect */}
+
+
+ {tracks.length > 0 ? (
+ <>
+
+
+
+
+ + {tracks[current].title} +
+{tracks[current].artist}
+
+ {formatTime(progress)}
+ {formatTime(duration)}
+
+
+
+ )}
+ No tracks available for this mood.
+ +
+
+
+
+
+
+
+
+ {/* Playlists */}
+
+
+
+ );
+};
diff --git a/src/components/playlist-stats.tsx b/src/components/playlist-stats.tsx
new file mode 100644
index 0000000..5f91666
--- /dev/null
+++ b/src/components/playlist-stats.tsx
@@ -0,0 +1,49 @@
+// src/components/playlist-stats.tsx
+import React from 'react';
+import { Clock, Music, Calendar } from 'lucide-react';
+import type { Track } from '../types/playlist';
+
+interface PlaylistStatsProps {
+ tracks: Track[];
+ createdAt?: number;
+}
+
+export const PlaylistStats: React.FC
+
+
+
+ Your Music Collection
+ {mood && {mood} vibes
}
+ {filteredPlaylists.length === 0 ? (
+ onSelectPlaylist?.(playlist.id)}
+ initial={{ opacity: 0, y: 20 }}
+ animate={{ opacity: 1, y: 0 }}
+ className="group relative bg-gradient-to-br from-white to-gray-50 dark:from-gray-900 dark:to-gray-800 border border-gray-200 dark:border-gray-700 rounded-2xl p-6 hover:shadow-lg hover:border-purple-200 dark:hover:border-purple-800 transition-all duration-300"
+ >
+ {/* Playlist Header */}
+
+ ))
+ )}
+
{/* Create New Playlist */}
+
+
+ ) : (
+ filteredPlaylists.map((playlist: Playlist) => (
+
+
+ No playlists yet
++ {mood ? `No playlists found for "${mood}" mood.` : 'Create your first playlist below to get started!'} +
+
+
+
+ {/* Tracks */}
+
+
+
+ {playlist.name}
+
+ Mood: {playlist.mood}
+ {playlist.description && • {playlist.description}}
+ • {playlist.tracks.length} tracks
+ {playlist.isShared && • Shared}
+
+
+
+
+
+
+
+ Tracks:
+ + {playlist.tracks.length === 0 ? ( +No tracks yet.
+ ) : ( +
+ {playlist.tracks.map((track: { id: string; name: string; artist?: string }) => (
+
+ )}
+
+ {/* Add Track Input */}
+
+
+ ))}
+
+ {track.name}
+ {track.artist && (
+ - {track.artist}
+ )}
+
+
+ setTrackInputs(prev => ({ ...prev, [playlist.id]: e.target.value }))}
+ onKeyDown={(e) => { if (e.key === 'Enter') handleAddTrack(playlist.id); }}
+ className="flex-1 p-2 text-sm bg-background rounded border"
+ />
+
+
+
+
+
+
+
+
+
+
+
+ Create New Playlist
+
+
+
+
+ setNewName(e.target.value)}
+ className="w-full p-3 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all placeholder:text-gray-400"
+ />
+
+
+
+
+ setNewDescription(e.target.value)}
+ className="w-full p-3 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all placeholder:text-gray-400"
+ />
+
+
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/src/components/shareable-playlist.tsx b/src/components/shareable-playlist.tsx
new file mode 100644
index 0000000..63334fe
--- /dev/null
+++ b/src/components/shareable-playlist.tsx
@@ -0,0 +1,245 @@
+import React, { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Share2, Copy, Check, ExternalLink, Import, QrCode } from 'lucide-react';
+import { usePlaylist } from '../hooks/use-playlist';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card';
+import { Button } from './ui/button';
+import type { Playlist } from '../context/playlist-provider';
+
+interface ShareablePlaylistProps {
+ playlistId?: string;
+ onClose?: () => void;
+}
+
+export const ShareablePlaylist: React.FC
+
+
+ {totalDurationSeconds > 0 && (
+
+
+ )}
+
+ {createdAt && (
+
+
+ )}
+
+
+ )}
+
+ {/* Import Section */}
+
+
+ Share "{playlist.name}"
++ Mood: {playlist.mood} • {playlist.tracks.length} tracks +
+ + {!shareUrl ? ( + + ) : ( +
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Error Display */}
+
+
+ Import Shared Playlist
+
+ setImportUrl(e.target.value)}
+ className="flex-1 p-2 text-xs bg-background rounded border"
+ />
+
+
+
+
+
+ {onClose && (
+
+ )}
+ • Shared playlists include all tracks and metadata
+• Share links work across devices and browsers
+• Imported playlists become part of your collection
+
+ setIsExpanded(!isExpanded)}
+ className={`flex items-center gap-2 px-3 py-2 rounded-lg bg-background/50 hover:bg-background/80 transition-colors ${getStatusColor()}`}
+ whileHover={{ scale: 1.02 }}
+ whileTap={{ scale: 0.98 }}
+ >
+ {getStorageIcon()}
+ {getConnectionIcon()}
+ {getStatusText()}
+
+
+
+ {isExpanded && (
+
+
+ )}
+
+
+ );
+};
diff --git a/src/components/track-upload-form.tsx b/src/components/track-upload-form.tsx
new file mode 100644
index 0000000..944ab3c
--- /dev/null
+++ b/src/components/track-upload-form.tsx
@@ -0,0 +1,244 @@
+// src/components/track-upload-form.tsx
+import React, { useState, useRef } from 'react';
+import { toast } from 'sonner';
+import { Upload, Link, Music2 as MusicIcon } from 'lucide-react';
+import { uploadAudioToR2 } from '../services/storage-service';
+import type { TrackSource } from '../types/playlist';
+
+interface TrackUploadFormProps {
+ onUploadComplete: (track: {
+ name: string;
+ artist: string;
+ source: TrackSource;
+ uri: string;
+ }) => void;
+ onCancel: () => void;
+}
+
+export const TrackUploadForm: React.FC
+ {detailedStatus.icon}
+
+
+
+ {detailedStatus.title}
++ {detailedStatus.description} +
+ +
+
+
+ {storageType === 'local' && (
+
+ {storageType === 'cloud' ? (
+
+
+ {connectionStatus === 'online' ? (
+
+
+ Note: To enable cloud storage, configure Cloudflare R2 credentials in your environment variables.
+
+ )}
+
+ No tracks available to play
+ );
+ }
+
+ // --- UI ---
+ return (
+
+
+ {currentTrack?.thumbnail ? (
+ ) : (
+ )}
+
+
+
+ < div >
+
+ {currentTrack?.name || 'Unknown Track'}
+
+
+
+ {currentTrack?.artist || 'Unknown Artist'}
+
+
+
+
+ {currentTrack?.source?.toUpperCase() || 'UNKNOWN'}
+
+
+
+
+
+
+ )
+ }
+
+ {/* Controls */}
+
+ {formatTime(progress)}
+ {formatTime(duration)}
+
+
+
+
+ {
+ currentTrack?.source === 'spotify' && (
+
+ setIsShuffle(!isShuffle)}
+ className={`p-2 rounded-full ${isShuffle
+ ? 'bg-blue-100 text-blue-600 dark:bg-blue-900 dark:text-blue-300'
+ : 'text-gray-600 dark:text-gray-400'
+ }`}
+ title={isShuffle ? 'Shuffle On' : 'Shuffle Off'}
+ >
+
+
+
+
+
+
+ {isPlaying ?
+
+
+
+
+ setIsRepeat(!isRepeat)}
+ className={`p-2 rounded-full ${isRepeat
+ ? 'bg-blue-100 text-blue-600 dark:bg-blue-900 dark:text-blue-300'
+ : 'text-gray-600 dark:text-gray-400'
+ }`}
+ title={isRepeat ? 'Repeat On' : 'Repeat Off'}
+ >
+
+
+
+
+
+ {isMuted ?
+
+
+
+ Click play to open in Spotify
+ ) + } + { + currentTrack?.source === 'youtube' && ( +Click play to watch on YouTube
+ ) + } + + + + ); +}; diff --git a/src/config/env.ts b/src/config/env.ts new file mode 100644 index 0000000..e799e87 --- /dev/null +++ b/src/config/env.ts @@ -0,0 +1,10 @@ +// Environment configuration +export const config = { + r2: { + // This can be overridden by environment variables in production + uploadEndpoint: import.meta.env?.VITE_R2_UPLOAD_ENDPOINT || '/api/upload', + + // Whether to use mock uploads (automatically detected in dev mode) + useMockUploads: import.meta.env.MODE !== 'production' || import.meta.env?.DEV + } +}; \ No newline at end of file diff --git a/src/context/playlist-context.tsx b/src/context/playlist-context.tsx new file mode 100644 index 0000000..5024000 --- /dev/null +++ b/src/context/playlist-context.tsx @@ -0,0 +1,46 @@ +import { createContext } from 'react'; +import type { Playlist } from './playlist-provider'; + +export interface PlaylistContextType { + // State + playlists: Playlist[]; + favorites: string[]; + currentPlaylist: Playlist | null; + isLoading: boolean; + error: string | null; + + // Actions + createPlaylist: (name: string, mood: string, description?: string) => Promise