valamp mp3 player

\n \n \n",[],[200,206],{"_104":214,"_95":215,"_159":216,"_161":201,"_162":140,"_163":120,"_164":22,"_106":217,"_100":32,"_167":218,"_169":219,"_170":22,"_171":-5,"_172":220,"_98":221},"012d0c76-4301-11f0-aa52-76b3cceeab13","index.tsx","e9541664-5efa-45cd-8eda-4e5f96847bd0",["D",1749233204187],"script","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useRef, useCallback } from 'https://esm.sh/react@18.2.0?deps=react@18.2.0';\nimport { createRoot } from 'https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0,react-dom@18.2.0';\nimport { Howl } from 'https://esm.sh/howler@2.2.4';\nimport type { Track, Playlist, PlayerState, TerminalLine, CommandResult, UIMode } from '../shared/types.ts';\n\n// Configuration\nconst CONFIG = {\n ALLOW_PLAYLIST_DELETION: false, // Set to false to prevent playlist deletion\n ALLOW_TRACK_DELETION: false // Set to false to prevent track deletion\n};\n\ninterface AudioPlayer {\n howl: Howl | null;\n currentTrack: Track | null;\n playlist: Playlist | null;\n volume: number;\n}\n\ninterface NotificationState {\n show: boolean;\n message: string;\n type: 'success' | 'error' | 'info';\n}\n\nconst Notification: React.FC<{\n notification: NotificationState;\n onClose: () => void;\n}> = ({ notification, onClose }) => {\n useEffect(() => {\n if (notification.show) {\n const timer = setTimeout(onClose, 3000);\n return () => clearTimeout(timer);\n }\n }, [notification.show, onClose]);\n\n if (!notification.show) return null;\n\n const bgColor = {\n success: 'bg-green-900 border-green-500',\n error: 'bg-red-900 border-red-500',\n info: 'bg-blue-900 border-blue-500'\n }[notification.type];\n\n return (\n

\n {notification.message}\n \n

\n );\n};\n\nconst PlayerControls: React.FC<{\n playerState: PlayerState;\n playlists: Record;\n currentPlaylist: string | null;\n onCommand: (command: string) => void;\n handleProgressBarClick: (e: React.MouseEvent) => void;\n formatTime: (seconds: number) => string;\n onRefreshPlaylists: () => void;\n}> = ({ playerState, playlists, currentPlaylist, onCommand, handleProgressBarClick, formatTime, onRefreshPlaylists }) => {\n \n const progressPercentage = playerState.duration > 0 \n ? (playerState.position / playerState.duration) * 100 \n : 0;\n\n return (\n

\n {/* Playlist Pills at the top */}\n

\n {Object.keys(playlists).map(name => (\n \n ))}\n

\n\n {/* Divider line between playlists and player */}\n

\n\n {/* Playback Status and Progress Bar */}\n {playerState.currentTrack && (\n

\n \n {playerState.currentTrack.title}\n \n \n {formatTime(playerState.position)} / {formatTime(playerState.duration)}\n \n

\n Volume: {playerState.volume}% \n {currentPlaylist && ` | Playlist: ${currentPlaylist}`}\n

\n )}\n\n

\n \n \n \n \n \n

\n );\n};\n\n// Simple playlist track display (just clickable, no reordering)\nconst SimplePlaylistTracks: React.FC<{\n playlists: Record;\n currentPlaylist: string | null;\n playerState: PlayerState;\n onCommand: (command: string) => void;\n formatTime: (seconds: number) => string;\n}> = ({ playlists, currentPlaylist, playerState, onCommand, formatTime }) => {\n const [isExpanded, setIsExpanded] = useState(true);\n \n if (!currentPlaylist || !playlists[currentPlaylist] || playlists[currentPlaylist].tracks.length === 0) {\n return null;\n }\n\n const playlist = playlists[currentPlaylist];\n\n const playTrack = (index: number) => {\n onCommand(`playlist goto ${currentPlaylist} ${index}`);\n };\n\n // Generate estimated duration based on track name or default\n const getEstimatedDuration = (track: any, index: number): number => {\n // For demo purposes, generate varied durations\n // In real implementation, this would fetch actual file metadata\n const base = 180; // 3 minutes base\n const variation = (track.title.length + index) % 120; // 0-2 minutes variation\n return base + variation;\n };\n\n // Calculate total playlist duration\n const calculatePlaylistDuration = (): number => {\n return playlist.tracks.reduce((total, track, index) => {\n return total + getEstimatedDuration(track, index);\n }, 0);\n };\n\n return (\n

\n \n \n {isExpanded && (\n

\n {playlist.tracks.map((track, index) => {\n const estimatedDuration = getEstimatedDuration(track, index);\n return (\n

playTrack(index)}\n >\n

{index + 1}

\n {track.title}\n {formatTime(estimatedDuration)}\n

\n {index === playlist.currentIndex && playerState.isPlaying && '▶'}\n {index === playlist.currentIndex && !playerState.isPlaying && '⏸'}\n

\n );\n })}\n

\n )}\n

\n );\n};\n\nconst PlaylistManager: React.FC<{\n playlists: Record;\n onCommand: (command: string) => void;\n onNotification: (message: string, type: 'success' | 'error' | 'info') => void;\n onShowPlaylist: (playlistName: string) => void;\n onRefreshPlaylists: () => void;\n}> = ({ playlists, onCommand, onNotification, onShowPlaylist, onRefreshPlaylists }) => {\n const [selectedPlaylist, setSelectedPlaylist] = useState('');\n const [newPlaylistName, setNewPlaylistName] = useState('');\n const [editingPlaylist, setEditingPlaylist] = useState(null);\n const [editPlaylistName, setEditPlaylistName] = useState('');\n\n const handleCreatePlaylist = async () => {\n if (newPlaylistName.trim()) {\n try {\n const response = await fetch('/api/playlists', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ name: newPlaylistName.trim() })\n });\n \n if (response.ok) {\n setNewPlaylistName('');\n onNotification('Playlist created successfully', 'success');\n onRefreshPlaylists();\n } else {\n const errorData = await response.json();\n onNotification(errorData.error || 'Failed to create playlist', 'error');\n }\n } catch (error) {\n onNotification('Error creating playlist', 'error');\n }\n } else {\n onNotification('Please enter a playlist name', 'error');\n }\n };\n\n const handleShowPlaylist = () => {\n if (selectedPlaylist) {\n onShowPlaylist(selectedPlaylist);\n onNotification(`Showing tracks from ${selectedPlaylist}`, 'info');\n }\n };\n\n const startEditingPlaylist = (playlistName: string) => {\n setEditingPlaylist(playlistName);\n setEditPlaylistName(playlistName);\n };\n\n const savePlaylistEdit = async () => {\n if (editingPlaylist && editPlaylistName.trim() && editPlaylistName !== editingPlaylist) {\n try {\n const response = await fetch(`/api/playlists/${encodeURIComponent(editingPlaylist)}`, {\n method: 'PUT',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ newName: editPlaylistName.trim() })\n });\n \n if (response.ok) {\n onNotification('Playlist renamed successfully', 'success');\n setEditingPlaylist(null);\n onRefreshPlaylists();\n } else {\n const errorData = await response.json();\n onNotification(errorData.error || 'Failed to rename playlist', 'error');\n }\n } catch (error) {\n onNotification('Error renaming playlist', 'error');\n }\n } else {\n setEditingPlaylist(null);\n }\n };\n\n const handleDeletePlaylist = async () => {\n if (!CONFIG.ALLOW_PLAYLIST_DELETION) {\n onNotification('Playlist deletion is disabled', 'error');\n return;\n }\n \n if (selectedPlaylist) {\n try {\n const response = await fetch(`/api/playlists/${encodeURIComponent(selectedPlaylist)}`, {\n method: 'DELETE'\n });\n \n if (response.ok) {\n onNotification('Playlist deleted successfully', 'success');\n setSelectedPlaylist('');\n onRefreshPlaylists();\n } else {\n const errorData = await response.json();\n onNotification(errorData.error || 'Failed to delete playlist', 'error');\n }\n } catch (error) {\n onNotification('Error deleting playlist', 'error');\n }\n }\n };\n\n return (\n

CREATE PLAYLIST

\n setNewPlaylistName(e.target.value)}\n onKeyPress={(e) => e.key === 'Enter' && handleCreatePlaylist()}\n className=\"compact-input\"\n />\n \n

\n\n

MANAGE PLAYLISTS

\n \n \n \n \n

\n\n {editingPlaylist && (\n

RENAME PLAYLIST

\n setEditPlaylistName(e.target.value)}\n onKeyPress={(e) => e.key === 'Enter' && savePlaylistEdit()}\n className=\"compact-input\"\n />\n \n \n

\n )}\n

\n );\n};\n\nconst TrackEditor: React.FC<{\n playlists: Record;\n currentPlaylist: string | null;\n playerState: PlayerState;\n onCommand: (command: string) => void;\n onNotification: (message: string, type: 'success' | 'error' | 'info') => void;\n showPlaylistTracks: string | null;\n onRefreshPlaylists: () => void;\n}> = ({ playlists, currentPlaylist, playerState, onCommand, onNotification, showPlaylistTracks, onRefreshPlaylists }) => {\n const [quickUrl, setQuickUrl] = useState('');\n const [quickTitle, setQuickTitle] = useState('');\n const [selectedPlaylist, setSelectedPlaylist] = useState('');\n const [trackManagementExpanded, setTrackManagementExpanded] = useState(false);\n const [editingTrack, setEditingTrack] = useState<{playlist: string, index: number} | null>(null);\n const [editTrackTitle, setEditTrackTitle] = useState('');\n const [editTrackUrl, setEditTrackUrl] = useState('');\n\n // Generate estimated duration based on track name or default\n const getEstimatedDuration = (track: any, index: number): number => {\n // For demo purposes, generate varied durations\n // In real implementation, this would fetch actual file metadata\n const base = 180; // 3 minutes base\n const variation = (track.title.length + index) % 120; // 0-2 minutes variation\n return base + variation;\n };\n\n // Calculate total playlist duration\n const calculatePlaylistDuration = (playlistName: string): number => {\n if (!playlists[playlistName]) return 0;\n return playlists[playlistName].tracks.reduce((total, track, index) => {\n return total + getEstimatedDuration(track, index);\n }, 0);\n };\n\n // Format time helper\n const formatTime = (seconds: number): string => {\n if (seconds < 3600) {\n const minutes = Math.floor(seconds / 60);\n const remainingSeconds = Math.floor(seconds % 60);\n return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;\n } else {\n const hours = Math.floor(seconds / 3600);\n const minutes = Math.floor((seconds % 3600) / 60);\n const remainingSeconds = Math.floor(seconds % 60);\n return `${hours}:${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;\n }\n };\n\n const handleAddToPlaylist = async () => {\n if (selectedPlaylist && quickUrl.trim()) {\n try {\n new URL(quickUrl.trim());\n const title = quickTitle.trim() || quickUrl.split('/').pop() || quickUrl;\n \n const response = await fetch(`/api/playlists/${encodeURIComponent(selectedPlaylist)}/tracks`, {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ url: quickUrl.trim(), title })\n });\n \n if (response.ok) {\n setQuickUrl('');\n setQuickTitle('');\n onNotification(`Track added to ${selectedPlaylist}`, 'success');\n onRefreshPlaylists();\n } else {\n const errorData = await response.json();\n onNotification(errorData.error || 'Failed to add track', 'error');\n }\n } catch (error) {\n onNotification('Invalid URL format', 'error');\n }\n } else {\n onNotification('Please select a playlist and enter a valid URL', 'error');\n }\n };\n\n const startEditingTrack = (playlist: string, index: number, track: any) => {\n setEditingTrack({playlist, index});\n setEditTrackTitle(track.title);\n setEditTrackUrl(track.url);\n };\n\n const saveTrackEdit = async () => {\n if (editingTrack && editTrackTitle.trim() && editTrackUrl.trim()) {\n try {\n new URL(editTrackUrl.trim());\n \n const response = await fetch(`/api/playlists/${encodeURIComponent(editingTrack.playlist)}/tracks/${editingTrack.index}`, {\n method: 'PUT',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ url: editTrackUrl.trim(), title: editTrackTitle.trim() })\n });\n \n if (response.ok) {\n onNotification('Track updated', 'success');\n setEditingTrack(null);\n onRefreshPlaylists();\n } else {\n const errorData = await response.json();\n onNotification(errorData.error || 'Failed to update track', 'error');\n }\n } catch (error) {\n onNotification('Invalid URL format', 'error');\n }\n }\n };\n\n // Track management functions (moved from CurrentPlaylistTracks)\n const moveTrack = async (fromIndex: number, toIndex: number, targetPlaylist?: string) => {\n const playlist = targetPlaylist || currentPlaylist;\n if (!playlist || fromIndex === toIndex) return;\n \n try {\n const response = await fetch(`/api/playlists/${encodeURIComponent(playlist)}/tracks/${fromIndex}/move/${toIndex}`, {\n method: 'PUT'\n });\n \n if (response.ok) {\n onNotification('Track order updated', 'success');\n onRefreshPlaylists();\n } else {\n const errorData = await response.json();\n onNotification(errorData.error || 'Failed to reorder track', 'error');\n }\n } catch (error) {\n onNotification('Error reordering track', 'error');\n }\n };\n\n const removeTrack = async (index: number, targetPlaylist?: string) => {\n if (!CONFIG.ALLOW_TRACK_DELETION) {\n onNotification('Track deletion is disabled', 'error');\n return;\n }\n \n const playlist = targetPlaylist || currentPlaylist;\n if (!playlist) return;\n \n try {\n const response = await fetch(`/api/playlists/${encodeURIComponent(playlist)}/tracks/${index}`, {\n method: 'DELETE'\n });\n \n if (response.ok) {\n onNotification('Track removed from playlist', 'success');\n onRefreshPlaylists();\n } else {\n const errorData = await response.json();\n onNotification(errorData.error || 'Failed to remove track', 'error');\n }\n } catch (error) {\n onNotification('Error removing track', 'error');\n }\n };\n\n const playTrack = (index: number, targetPlaylist?: string) => {\n const playlist = targetPlaylist || currentPlaylist;\n if (!playlist) return;\n onCommand(`playlist goto ${playlist} ${index}`);\n };\n\n return (\n

ADD TRACK

\n setQuickUrl(e.target.value)}\n onKeyPress={(e) => e.key === 'Enter' && handleAddToPlaylist()}\n className=\"compact-input\"\n style={{ flex: 2 }}\n />\n setQuickTitle(e.target.value)}\n onKeyPress={(e) => e.key === 'Enter' && handleAddToPlaylist()}\n className=\"compact-input\"\n style={{ flex: 1 }}\n />\n

\n \n \n

\n\n {editingTrack && (\n

EDIT TRACK

\n setEditTrackUrl(e.target.value)}\n onKeyPress={(e) => e.key === 'Enter' && saveTrackEdit()}\n className=\"compact-input\"\n style={{ flex: 2 }}\n />\n setEditTrackTitle(e.target.value)}\n onKeyPress={(e) => e.key === 'Enter' && saveTrackEdit()}\n className=\"compact-input\"\n style={{ flex: 1 }}\n />\n

\n \n \n

\n )}\n\n {/* Show tracks from selected playlist in Playlist Manager */}\n {showPlaylistTracks && playlists[showPlaylistTracks] && (\n

\n TRACKS IN \"{showPlaylistTracks}\"\n

\n {playlists[showPlaylistTracks].tracks.map((track, index) => (\n

{index + 1}

{track.title}

{track.url}

\n \n \n \n \n

\n ))}\n

\n {playlists[showPlaylistTracks].tracks.length > 0 && (\n

\n Total Duration: {formatTime(calculatePlaylistDuration(showPlaylistTracks))}\n

\n )}\n

\n )}\n\n {/* Advanced Track Management */}\n {currentPlaylist && playlists[currentPlaylist] && playlists[currentPlaylist].tracks.length > 0 && (\n

\n \n {trackManagementExpanded && (\n

\n {playlists[currentPlaylist].tracks.map((track, index) => (\n

{index + 1}

{track.title}

{track.url}

\n \n \n \n \n

\n ))}\n

\n )}\n

\n );\n};\n\n// CurrentPlaylistTracks component removed - functionality moved to TrackEditor\n\nconst ASCIIInterface: React.FC<{\n playerState: PlayerState;\n playlists: Record;\n currentPlaylist: string | null;\n onCommand: (command: string) => void;\n onNotification: (message: string, type: 'success' | 'error' | 'info') => void;\n handleProgressBarClick: (e: React.MouseEvent) => void;\n formatTime: (seconds: number) => string;\n showPlaylistManager: boolean;\n onRefreshPlaylists: () => void;\n}> = ({ playerState, playlists, currentPlaylist, onCommand, onNotification, handleProgressBarClick, formatTime, showPlaylistManager, onRefreshPlaylists }) => {\n const [playlistExpanded, setPlaylistExpanded] = useState(false);\n const [trackExpanded, setTrackExpanded] = useState(false);\n const [showPlaylistTracks, setShowPlaylistTracks] = useState(null);\n\n const handleShowPlaylist = (playlistName: string) => {\n setShowPlaylistTracks(playlistName);\n setTrackExpanded(true); // Expand track editor when showing playlist tracks\n };\n\n return (\n

\n \n\n {/* Simple track list below playlist pills */}\n \n\n {showPlaylistManager && (\n <>\n

\n \n

\n\n

\n \n

\n \n )}\n \n

\n );\n};\n\n// QuickAddDropdown component removed - functionality available in TrackEditor\n\nconst TerminalPlayer: React.FC = () => {\n // Random quotes system\n const quotes = [\n \"the sound of tokens\",\n \"from val town to your town\", \n \"where code meets melody\",\n \"ai-powered beats for digital streets\",\n \"streaming dreams in val.town\",\n \"synthesizing tomorrow's sound\",\n \"musical algorithms in motion\",\n \"your terminal, your tunes\",\n \"decentralized harmony\", \n \"coding rhythms since 2024\",\n \"serverless symphonies await\"\n ];\n \n const [currentQuote, setCurrentQuote] = useState(() => \n quotes[Math.floor(Math.random() * quotes.length)]\n );\n\n const [lines, setLines] = useState([\n {\n type: 'output',\n content: 'VALAMP v3.33 - music by maso',\n timestamp: new Date()\n }\n ]);\n \n const [input, setInput] = useState('');\n const [uiMode, setUIMode] = useState({ showASCII: true, showControls: true });\n const [notification, setNotification] = useState({\n show: false,\n message: '',\n type: 'info'\n });\n // quickAddExpanded removed - QuickAddDropdown not used\n const [showConsole, setShowConsole] = useState(false);\n const [showPlaylistManager, setShowPlaylistManager] = useState(false);\n const [showPanelsButton, setShowPanelsButton] = useState(false);\n const [playerState, setPlayerState] = useState({\n isPlaying: false,\n isPaused: false,\n currentTrack: null,\n volume: 69,\n position: 0,\n duration: 0\n });\n \n const [playlists, setPlaylists] = useState>({});\n const [currentPlaylist, setCurrentPlaylist] = useState(null);\n \n const audioPlayer = useRef({\n howl: null,\n currentTrack: null,\n playlist: null,\n volume: 69\n });\n \n // Refs to store current values for access in Howler callbacks\n const playlistsRef = useRef(playlists);\n const currentPlaylistRef = useRef(currentPlaylist);\n \n // Update refs when state changes\n useEffect(() => {\n playlistsRef.current = playlists;\n }, [playlists]);\n \n useEffect(() => {\n currentPlaylistRef.current = currentPlaylist;\n }, [currentPlaylist]);\n\n const inputRef = useRef(null);\n const outputRef = useRef(null);\n\n // Load playlists from backend API on mount\n useEffect(() => {\n loadPlaylistsFromAPI();\n }, []);\n\n const loadPlaylistsFromAPI = async () => {\n try {\n const response = await fetch('/api/playlists');\n if (response.ok) {\n const playlistsData = await response.json();\n setPlaylists(playlistsData);\n console.log('Loaded playlists from API:', Object.keys(playlistsData));\n } else {\n const errorData = await response.json().catch(() => ({ error: 'Unknown error' }));\n console.error('Failed to load playlists from API:', response.status, errorData);\n addLine('error', `Failed to load playlists: ${errorData.error || 'Server error'}`);\n }\n } catch (error) {\n console.error('Error loading playlists:', error);\n addLine('error', 'Error connecting to server - check backend is running');\n }\n };\n\n const createDefaultPlaylists = () => {\n // This is no longer needed as the backend creates defaults\n loadPlaylistsFromAPI();\n };\n\n // Helper function to save playlist state to API\n const syncPlaylistsToAPI = async () => {\n // For now, we'll rely on the backend managing the data\n // and reload from API when needed\n await loadPlaylistsFromAPI();\n };\n\n // Auto-scroll to bottom when new lines are added\n useEffect(() => {\n if (outputRef.current) {\n outputRef.current.scrollTop = outputRef.current.scrollHeight;\n }\n }, [lines]);\n\n // Focus input on mount and when clicked\n useEffect(() => {\n if (inputRef.current && uiMode.showControls) {\n inputRef.current.focus();\n }\n }, [uiMode.showControls]);\n\n // Update player state periodically (smooth progress bar)\n useEffect(() => {\n const interval = setInterval(() => {\n if (audioPlayer.current.howl && playerState.isPlaying) {\n const position = audioPlayer.current.howl.seek() as number;\n const duration = audioPlayer.current.howl.duration() as number;\n \n setPlayerState(prev => ({\n ...prev,\n position: position || 0,\n duration: duration || 0\n }));\n }\n }, 100); // Update every 100ms for smoother progress bar\n\n return () => clearInterval(interval);\n }, [playerState.isPlaying]);\n\n const showNotification = useCallback((message: string, type: 'success' | 'error' | 'info' = 'info') => {\n setNotification({ show: true, message, type });\n }, []);\n\n const hideNotification = useCallback(() => {\n setNotification(prev => ({ ...prev, show: false }));\n }, []);\n const addLine = useCallback((type: TerminalLine['type'], content: string) => {\n setLines(prev => [...prev, {\n type,\n content,\n timestamp: new Date()\n }]);\n }, []);\n\n const stopCurrentTrack = useCallback(() => {\n if (audioPlayer.current.howl) {\n audioPlayer.current.howl.stop();\n audioPlayer.current.howl.unload();\n audioPlayer.current.howl = null;\n }\n setPlayerState(prev => ({\n ...prev,\n isPlaying: false,\n isPaused: false,\n position: 0,\n duration: 0\n }));\n }, []);\n\n const seekToPosition = useCallback((percentage: number) => {\n if (audioPlayer.current.howl && playerState.currentTrack && playerState.duration > 0) {\n const seekTime = (percentage / 100) * playerState.duration;\n audioPlayer.current.howl.seek(seekTime);\n \n setPlayerState(prev => ({\n ...prev,\n position: seekTime\n }));\n \n addLine('output', `Seeking to ${Math.floor(seekTime / 60)}:${Math.floor(seekTime % 60).toString().padStart(2, '0')}`);\n }\n }, [playerState.currentTrack, playerState.duration, addLine]);\n\n const playTrack = useCallback((track: Track) => {\n stopCurrentTrack();\n \n addLine('output', `Loading: ${track.title || track.url}`);\n showNotification(`Loading: ${track.title}`, 'info');\n \n const howl = new Howl({\n src: [track.url],\n html5: true,\n volume: audioPlayer.current.volume / 100,\n onload: () => {\n addLine('output', `✓ Loaded: ${track.title || track.url}`);\n showNotification(`✓ Loaded: ${track.title}`, 'success');\n setPlayerState(prev => ({\n ...prev,\n currentTrack: track,\n duration: howl.duration() as number\n }));\n },\n onplay: () => {\n setPlayerState(prev => ({\n ...prev,\n isPlaying: true,\n isPaused: false\n }));\n addLine('output', `▶️ Playing: ${track.title || track.url}`);\n },\n onpause: () => {\n setPlayerState(prev => ({\n ...prev,\n isPlaying: false,\n isPaused: true\n }));\n addLine('output', `⏸️ Paused`);\n },\n onstop: () => {\n setPlayerState(prev => ({\n ...prev,\n isPlaying: false,\n isPaused: false,\n position: 0\n }));\n addLine('output', `⏹️ Stopped`);\n },\n onend: () => {\n addLine('output', `🏁 Track ended: ${track.title}`);\n \n // Use current state values by getting them from the React state\n setPlayerState(prev => ({\n ...prev,\n isPlaying: false,\n isPaused: false,\n position: 0\n }));\n \n // Auto-play next track if in playlist\n setTimeout(() => {\n const currentPlaylistName = currentPlaylistRef.current;\n const currentPlaylists = playlistsRef.current;\n \n if (currentPlaylistName && currentPlaylists[currentPlaylistName]) {\n const playlist = currentPlaylists[currentPlaylistName];\n const nextIndex = playlist.currentIndex + 1;\n \n if (nextIndex < playlist.tracks.length) {\n // Update playlist index\n setPlaylists(prev => ({\n ...prev,\n [currentPlaylistName]: {\n ...playlist,\n currentIndex: nextIndex\n }\n }));\n \n // Play next track\n const nextTrack = playlist.tracks[nextIndex];\n addLine('output', `⏭️ Auto-playing next track: ${nextTrack.title}`);\n showNotification(`⏭️ Next: ${nextTrack.title}`, 'info');\n \n // Small delay to let state update\n setTimeout(() => playTrack(nextTrack), 200);\n } else {\n // End of playlist\n addLine('output', `🏁 Playlist \"${currentPlaylistName}\" finished`);\n showNotification(`Playlist \"${currentPlaylistName}\" finished`, 'info');\n }\n } else {\n // No playlist loaded - just single track ended\n addLine('output', `🏁 Track playback completed`);\n showNotification('Track finished', 'info');\n }\n }, 100);\n },\n onloaderror: (id, error) => {\n const errorMsg = `❌ Error loading track: ${error}`;\n addLine('error', errorMsg);\n showNotification(errorMsg, 'error');\n setPlayerState(prev => ({\n ...prev,\n isPlaying: false,\n isPaused: false\n }));\n }\n });\n \n audioPlayer.current.howl = howl;\n audioPlayer.current.currentTrack = track;\n howl.play();\n }, [stopCurrentTrack, addLine, showNotification]);\n\n const executeCommand = useCallback((command: string): CommandResult => {\n const parts = command.trim().split(' ');\n const cmd = parts[0].toLowerCase();\n const args = parts.slice(1);\n\n switch (cmd) {\n case 'help':\n return {\n success: true,\n message: `Available commands:\\n\\n• play - Play MP3 from URL\\n\\n• pause - Pause current track\\n\\n• stop - Stop current track\\n\\n• volume <0-100> - Set volume\\n\\n• playlist add [title] - Add track to playlist\\n\\n• playlist load - Load and play playlist\\n\\n• playlist list - Show all playlists\\n\\n• playlist show - Show tracks in playlist\\n\\n• next - Play next track in playlist\\n\\n• prev - Play previous track in playlist\\n\\n• ui toggle - Toggle ASCII interface\\n\\n• clear - Clear terminal\\n\\n• help - Show this help`\n };\n\n case 'ui':\n if (args.length === 0) {\n return { success: true, message: `UI mode: ASCII=${uiMode.showASCII ? 'ON' : 'OFF'}, Console=${showConsole ? 'ON' : 'OFF'}, Panels=${showPlaylistManager ? 'ON' : 'OFF'}, Panels Button=${showPanelsButton ? 'VISIBLE' : 'HIDDEN'}` };\n }\n const uiCmd = args[0].toLowerCase();\n switch (uiCmd) {\n case 'toggle':\n setUIMode(prev => ({ ...prev, showASCII: !prev.showASCII }));\n return { success: true, message: `ASCII interface ${uiMode.showASCII ? 'hidden' : 'shown'}` };\n case 'console':\n setShowConsole(!showConsole);\n return { success: true, message: `Console ${!showConsole ? 'enabled' : 'disabled'}` };\n case 'panels':\n setShowPlaylistManager(!showPlaylistManager);\n return { success: true, message: `Playlist manager and track editor ${!showPlaylistManager ? 'enabled' : 'disabled'}` };\n case 'dev':\n setShowPanelsButton(!showPanelsButton);\n return { success: true, message: `Developer mode ${!showPanelsButton ? 'enabled' : 'disabled'}. Panels button is now ${!showPanelsButton ? 'visible' : 'hidden'}.` };\n case 'reset':\n setUIMode({ showASCII: true, showControls: true });\n setShowConsole(false);\n setShowPlaylistManager(false);\n setShowPanelsButton(false);\n return { success: true, message: 'UI reset to defaults' };\n default:\n return { success: false, message: 'Usage: ui [toggle|console|panels|dev|reset]' };\n }\n\n case 'clear':\n setLines([]);\n return { success: true, message: '' };\n\n case 'play':\n if (args.length === 0) {\n // Resume if paused\n if (audioPlayer.current.howl && playerState.isPaused) {\n audioPlayer.current.howl.play();\n return { success: true, message: '' };\n }\n return { success: false, message: 'Usage: play ' };\n }\n const url = args[0];\n const title = args.slice(1).join(' ') || url.split('/').pop() || url;\n playTrack({ url, title });\n return { success: true, message: '' };\n\n case 'pause':\n if (audioPlayer.current.howl && playerState.isPlaying) {\n audioPlayer.current.howl.pause();\n return { success: true, message: '' };\n }\n return { success: false, message: 'No track is currently playing' };\n\n case 'stop':\n if (audioPlayer.current.howl) {\n stopCurrentTrack();\n return { success: true, message: '' };\n }\n return { success: false, message: 'No track is currently playing' };\n\n case 'volume':\n if (args.length === 0) {\n return { success: true, message: `Current volume: ${audioPlayer.current.volume}%` };\n }\n const volume = parseInt(args[0]);\n if (isNaN(volume) || volume < 0 || volume > 100) {\n return { success: false, message: 'Volume must be between 0 and 100' };\n }\n audioPlayer.current.volume = volume;\n if (audioPlayer.current.howl) {\n audioPlayer.current.howl.volume(volume / 100);\n }\n setPlayerState(prev => ({ ...prev, volume }));\n return { success: true, message: `Volume set to ${volume}%` };\n\n case 'playlist':\n if (args.length === 0) {\n return { success: false, message: 'Usage: playlist ...' };\n }\n \n const subCmd = args[0].toLowerCase();\n const subArgs = args.slice(1);\n\n // Helper function to strip quotes from playlist names\n const stripQuotes = (name: string): string => {\n return name.replace(/^[\"']|[\"']$/g, '');\n };\n\n switch (subCmd) {\n case 'create':\n if (subArgs.length === 0) {\n return { success: false, message: 'Usage: playlist create ' };\n }\n const playlistName = stripQuotes(subArgs.join(' '));\n if (playlists[playlistName]) {\n return { success: false, message: `Playlist \"${playlistName}\" already exists` };\n }\n setPlaylists(prev => ({\n ...prev,\n [playlistName]: {\n name: playlistName,\n tracks: [],\n currentIndex: 0\n }\n }));\n return { success: true, message: `Created playlist \"${playlistName}\"` };\n\n case 'add':\n if (subArgs.length < 2) {\n return { success: false, message: 'Usage: playlist add [title]' };\n }\n const [targetPlaylistRaw, trackUrl, ...titleParts] = subArgs;\n const targetPlaylist = stripQuotes(targetPlaylistRaw);\n if (!playlists[targetPlaylist]) {\n return { success: false, message: `Playlist \"${targetPlaylist}\" does not exist` };\n }\n const trackTitle = titleParts.join(' ') || trackUrl.split('/').pop() || trackUrl;\n setPlaylists(prev => ({\n ...prev,\n [targetPlaylist]: {\n ...prev[targetPlaylist],\n tracks: [...prev[targetPlaylist].tracks, { url: trackUrl, title: trackTitle }]\n }\n }));\n return { success: true, message: `Added \"${trackTitle}\" to playlist \"${targetPlaylist}\"` };\n\n case 'load':\n if (subArgs.length === 0) {\n return { success: false, message: 'Usage: playlist load ' };\n }\n const loadPlaylistName = stripQuotes(subArgs.join(' '));\n if (!playlists[loadPlaylistName]) {\n return { success: false, message: `Playlist \"${loadPlaylistName}\" does not exist` };\n }\n const loadPlaylist = playlists[loadPlaylistName];\n if (loadPlaylist.tracks.length === 0) {\n return { success: false, message: `Playlist \"${loadPlaylistName}\" is empty` };\n }\n \n // Update current index in database (fire-and-forget) and local state\n fetch(`/api/playlists/${encodeURIComponent(loadPlaylistName)}/index`, {\n method: 'PUT',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ currentIndex: 0 })\n }).catch(error => {\n console.error('Failed to update playlist index in database:', error);\n // Continue with local state update even if API fails\n });\n \n // Update local state immediately\n setPlaylists(prev => ({\n ...prev,\n [loadPlaylistName]: {\n ...loadPlaylist,\n currentIndex: 0\n }\n }));\n setCurrentPlaylist(loadPlaylistName);\n playTrack(loadPlaylist.tracks[0]);\n return { success: true, message: `Loaded playlist \"${loadPlaylistName}\"` };\n\n case 'list':\n const playlistNames = Object.keys(playlists);\n if (playlistNames.length === 0) {\n return { success: true, message: 'No playlists created' };\n }\n const listMessage = playlistNames.map(name => \n `• ${name} (${playlists[name].tracks.length} tracks)${currentPlaylist === name ? ' [CURRENT]' : ''}`\n ).join('\\n');\n return { success: true, message: `Playlists:\\n${listMessage}` };\n\n case 'show':\n if (subArgs.length === 0) {\n return { success: false, message: 'Usage: playlist show ' };\n }\n const showPlaylistName = stripQuotes(subArgs.join(' '));\n if (!playlists[showPlaylistName]) {\n return { success: false, message: `Playlist \"${showPlaylistName}\" does not exist` };\n }\n const showPlaylist = playlists[showPlaylistName];\n if (showPlaylist.tracks.length === 0) {\n return { success: true, message: `Playlist \"${showPlaylistName}\" is empty` };\n }\n const tracksMessage = showPlaylist.tracks.map((track, index) => \n `${index + 1}. ${track.title}${index === showPlaylist.currentIndex ? ' [CURRENT]' : ''}`\n ).join('\\n');\n return { success: true, message: `Playlist \"${showPlaylistName}\":\\n${tracksMessage}` };\n\n case 'delete':\n if (!CONFIG.ALLOW_PLAYLIST_DELETION) {\n return { success: false, message: 'Playlist deletion is disabled' };\n }\n if (subArgs.length === 0) {\n return { success: false, message: 'Usage: playlist delete ' };\n }\n const deletePlaylistName = stripQuotes(subArgs.join(' '));\n if (!playlists[deletePlaylistName]) {\n return { success: false, message: `Playlist \"${deletePlaylistName}\" does not exist` };\n }\n setPlaylists(prev => {\n const newPlaylists = { ...prev };\n delete newPlaylists[deletePlaylistName];\n return newPlaylists;\n });\n if (currentPlaylist === deletePlaylistName) {\n setCurrentPlaylist(null);\n }\n return { success: true, message: `Deleted playlist \"${deletePlaylistName}\"` };\n\n case 'reorder':\n if (subArgs.length < 3) {\n return { success: false, message: 'Usage: playlist reorder ' };\n }\n const reorderPlaylistName = stripQuotes(subArgs[0]);\n const fromIndex = parseInt(subArgs[1]);\n const toIndex = parseInt(subArgs[2]);\n \n if (!playlists[reorderPlaylistName]) {\n return { success: false, message: `Playlist \"${reorderPlaylistName}\" does not exist` };\n }\n \n const reorderPlaylist = playlists[reorderPlaylistName];\n if (isNaN(fromIndex) || isNaN(toIndex) || \n fromIndex < 0 || toIndex < 0 || \n fromIndex >= reorderPlaylist.tracks.length || \n toIndex >= reorderPlaylist.tracks.length) {\n return { success: false, message: 'Invalid track indices' };\n }\n \n const tracks = [...reorderPlaylist.tracks];\n const [movedTrack] = tracks.splice(fromIndex, 1);\n tracks.splice(toIndex, 0, movedTrack);\n \n let newCurrentIndex = reorderPlaylist.currentIndex;\n if (fromIndex === reorderPlaylist.currentIndex) {\n newCurrentIndex = toIndex;\n } else if (fromIndex < reorderPlaylist.currentIndex && toIndex >= reorderPlaylist.currentIndex) {\n newCurrentIndex = reorderPlaylist.currentIndex - 1;\n } else if (fromIndex > reorderPlaylist.currentIndex && toIndex <= reorderPlaylist.currentIndex) {\n newCurrentIndex = reorderPlaylist.currentIndex + 1;\n }\n \n setPlaylists(prev => ({\n ...prev,\n [reorderPlaylistName]: {\n ...reorderPlaylist,\n tracks,\n currentIndex: newCurrentIndex\n }\n }));\n \n return { success: true, message: `Reordered track in playlist \"${reorderPlaylistName}\"` };\n\n case 'remove':\n if (!CONFIG.ALLOW_TRACK_DELETION) {\n return { success: false, message: 'Track deletion is disabled' };\n }\n if (subArgs.length < 2) {\n return { success: false, message: 'Usage: playlist remove ' };\n }\n const removeFromPlaylistName = stripQuotes(subArgs[0]);\n const removeIndex = parseInt(subArgs[1]);\n \n if (!playlists[removeFromPlaylistName]) {\n return { success: false, message: `Playlist \"${removeFromPlaylistName}\" does not exist` };\n }\n \n const removeFromPlaylist = playlists[removeFromPlaylistName];\n if (isNaN(removeIndex) || removeIndex < 0 || removeIndex >= removeFromPlaylist.tracks.length) {\n return { success: false, message: 'Invalid track index' };\n }\n \n const removeTracks = [...removeFromPlaylist.tracks];\n const removedTrack = removeTracks[removeIndex];\n removeTracks.splice(removeIndex, 1);\n \n let newRemoveCurrentIndex = removeFromPlaylist.currentIndex;\n if (removeIndex === removeFromPlaylist.currentIndex) {\n // If removing current track, stop playing and reset to start\n stopCurrentTrack();\n newRemoveCurrentIndex = Math.min(removeIndex, removeTracks.length - 1);\n if (newRemoveCurrentIndex < 0) newRemoveCurrentIndex = 0;\n } else if (removeIndex < removeFromPlaylist.currentIndex) {\n newRemoveCurrentIndex = removeFromPlaylist.currentIndex - 1;\n }\n \n setPlaylists(prev => ({\n ...prev,\n [removeFromPlaylistName]: {\n ...removeFromPlaylist,\n tracks: removeTracks,\n currentIndex: newRemoveCurrentIndex\n }\n }));\n \n return { success: true, message: `Removed \"${removedTrack.title}\" from playlist \"${removeFromPlaylistName}\"` };\n\n case 'goto':\n if (subArgs.length < 2) {\n return { success: false, message: 'Usage: playlist goto ' };\n }\n const gotoPlaylistName = stripQuotes(subArgs[0]);\n const gotoIndex = parseInt(subArgs[1]);\n \n if (!playlists[gotoPlaylistName]) {\n return { success: false, message: `Playlist \"${gotoPlaylistName}\" does not exist` };\n }\n \n const gotoPlaylist = playlists[gotoPlaylistName];\n if (isNaN(gotoIndex) || gotoIndex < 0 || gotoIndex >= gotoPlaylist.tracks.length) {\n return { success: false, message: 'Invalid track index' };\n }\n \n setPlaylists(prev => ({\n ...prev,\n [gotoPlaylistName]: {\n ...gotoPlaylist,\n currentIndex: gotoIndex\n }\n }));\n \n setCurrentPlaylist(gotoPlaylistName);\n playTrack(gotoPlaylist.tracks[gotoIndex]);\n \n return { success: true, message: `Playing track ${gotoIndex + 1}: ${gotoPlaylist.tracks[gotoIndex].title}` };\n\n case 'rename':\n if (subArgs.length < 2) {\n return { success: false, message: 'Usage: playlist rename ' };\n }\n const oldName = stripQuotes(subArgs[0]);\n const newName = stripQuotes(subArgs[1]);\n \n if (!playlists[oldName]) {\n return { success: false, message: `Playlist \"${oldName}\" does not exist` };\n }\n if (playlists[newName]) {\n return { success: false, message: `Playlist \"${newName}\" already exists` };\n }\n \n setPlaylists(prev => {\n const newPlaylists = { ...prev };\n newPlaylists[newName] = { ...prev[oldName], name: newName };\n delete newPlaylists[oldName];\n return newPlaylists;\n });\n \n if (currentPlaylist === oldName) {\n setCurrentPlaylist(newName);\n }\n \n return { success: true, message: `Renamed playlist \"${oldName}\" to \"${newName}\"` };\n\n case 'edit':\n if (subArgs.length < 4) {\n return { success: false, message: 'Usage: playlist edit ' };\n }\n const editPlaylistName = stripQuotes(subArgs[0]);\n const editIndex = parseInt(subArgs[1]);\n const newUrl = stripQuotes(subArgs[2]);\n const newTitle = stripQuotes(subArgs[3]);\n \n if (!playlists[editPlaylistName]) {\n return { success: false, message: `Playlist \"${editPlaylistName}\" does not exist` };\n }\n \n const editPlaylist = playlists[editPlaylistName];\n if (isNaN(editIndex) || editIndex < 0 || editIndex >= editPlaylist.tracks.length) {\n return { success: false, message: 'Invalid track index' };\n }\n \n const updatedTracks = [...editPlaylist.tracks];\n updatedTracks[editIndex] = { url: newUrl, title: newTitle };\n \n setPlaylists(prev => ({\n ...prev,\n [editPlaylistName]: {\n ...editPlaylist,\n tracks: updatedTracks\n }\n }));\n \n return { success: true, message: `Updated track in playlist \"${editPlaylistName}\"` };\n\n default:\n return { success: false, message: 'Unknown playlist command. Use: create, add, load, list, show, delete, reorder, remove, goto, rename, edit' };\n }\n\n case 'next':\n if (!currentPlaylist || !playlists[currentPlaylist]) {\n return { success: false, message: 'No playlist is currently loaded' };\n }\n const nextPlaylist = playlists[currentPlaylist];\n const nextIndex = nextPlaylist.currentIndex + 1;\n if (nextIndex >= nextPlaylist.tracks.length) {\n return { success: false, message: 'Already at the last track' };\n }\n setPlaylists(prev => ({\n ...prev,\n [currentPlaylist]: {\n ...nextPlaylist,\n currentIndex: nextIndex\n }\n }));\n playTrack(nextPlaylist.tracks[nextIndex]);\n return { success: true, message: '' };\n\n case 'prev':\n if (!currentPlaylist || !playlists[currentPlaylist]) {\n return { success: false, message: 'No playlist is currently loaded' };\n }\n const prevPlaylist = playlists[currentPlaylist];\n const prevIndex = prevPlaylist.currentIndex - 1;\n if (prevIndex < 0) {\n return { success: false, message: 'Already at the first track' };\n }\n setPlaylists(prev => ({\n ...prev,\n [currentPlaylist]: {\n ...prevPlaylist,\n currentIndex: prevIndex\n }\n }));\n playTrack(prevPlaylist.tracks[prevIndex]);\n return { success: true, message: '' };\n\n case 'asdf':\n setShowPanelsButton(true);\n return { success: true, message: 'Developer mode activated. Panels button now visible.' };\n\n default:\n return { success: false, message: `Unknown command: ${cmd}. Type \"help\" for available commands.` };\n }\n }, [playTrack, stopCurrentTrack, playerState, playlists, currentPlaylist, uiMode.showASCII]);\n\n const handleCommand = useCallback((command: string) => {\n // Clean the command - remove $ prefix if present\n const cleanCommand = command.startsWith('$ ') ? command.slice(2) : command;\n \n // Add command to terminal with proper formatting\n addLine('command', `$ ${cleanCommand}`);\n \n // Execute the clean command\n const result = executeCommand(cleanCommand);\n \n // Add result to terminal\n if (result.message) {\n addLine(result.success ? 'output' : 'error', result.message);\n }\n }, [addLine, executeCommand]);\n\n const handleSubmit = useCallback((e: React.FormEvent) => {\n e.preventDefault();\n if (!input.trim()) return;\n\n handleCommand(input.trim());\n setInput('');\n }, [input, handleCommand]);\n\n const formatTime = (seconds: number): string => {\n const mins = Math.floor(seconds / 60);\n const secs = Math.floor(seconds % 60);\n return `${mins}:${secs.toString().padStart(2, '0')}`;\n };\n\n const handleProgressBarClick = useCallback((e: React.MouseEvent<HTMLDivElement>) => {\n if (playerState.currentTrack && playerState.duration > 0) {\n const rect = e.currentTarget.getBoundingClientRect();\n const clickX = e.clientX - rect.left;\n const percentage = (clickX / rect.width) * 100;\n seekToPosition(Math.max(0, Math.min(100, percentage)));\n }\n }, [playerState.currentTrack, playerState.duration, seekToPosition]);\n\n const progressPercentage = playerState.duration > 0 \n ? (playerState.position / playerState.duration) * 100 \n : 0;\n\n return (\n <div className=\"terminal\">\n <button \n className=\"mode-toggle\"\n onClick={() => setUIMode(prev => ({ ...prev, showASCII: !prev.showASCII }))}\n >\n {uiMode.showASCII ? 'HIDE ASCII' : 'SHOW ASCII'}\n </button>\n\n <div className=\"terminal-header\">\n <div className=\"title-section\">\n <h1>VALAMP</h1>\n <span className=\"subtitle\">{currentQuote}</span>\n </div>\n <div className=\"header-controls\">\n {showPanelsButton && (\n <button \n className=\"header-toggle-btn\"\n onClick={() => setShowPlaylistManager(!showPlaylistManager)}\n >\n {showPlaylistManager ? 'HIDE PANELS' : 'SHOW PANELS'}\n </button>\n )}\n <button \n className=\"header-toggle-btn\"\n onClick={() => setShowConsole(!showConsole)}\n >\n X\n </button>\n </div>\n </div>\n\n {uiMode.showASCII && (\n <ASCIIInterface \n playerState={playerState}\n playlists={playlists}\n currentPlaylist={currentPlaylist}\n onCommand={handleCommand}\n onNotification={showNotification}\n handleProgressBarClick={handleProgressBarClick}\n formatTime={formatTime}\n showPlaylistManager={showPlaylistManager}\n onRefreshPlaylists={loadPlaylistsFromAPI}\n />\n )}\n \n <Notification \n notification={notification}\n onClose={hideNotification}\n />\n \n\n \n {showConsole && (\n <>\n <div className=\"terminal-output\" ref={outputRef}>\n {lines.map((line, index) => (\n <div key={index} className={`terminal-line ${line.type}`}>\n {line.content}\n </div>\n ))}\n </div>\n \n <form onSubmit={handleSubmit} className=\"terminal-input-container\">\n <span className=\"terminal-prompt\">$</span>\n <input\n ref={inputRef}\n type=\"text\"\n value={input}\n onChange={(e) => setInput(e.target.value)}\n className=\"terminal-input\"\n placeholder=\"Enter command...\"\n autoComplete=\"off\"\n spellCheck={false}\n />\n <span className=\"cursor\">_</span>\n </form>\n </>\n )}\n </div>\n );\n};\n\n// Mount the app\nconst root = createRoot(document.getElementById('root')!);\nroot.render(<TerminalPlayer />);",[],[200,215],{"_104":223,"_95":224,"_159":225,"_161":201,"_162":140,"_163":120,"_164":165,"_106":226,"_100":32,"_167":209,"_169":227,"_170":22,"_171":-5,"_172":228,"_98":229},"012d3a5c-4301-11f0-aa52-76b3cceeab13","style.css","f2a34bf6-0927-4625-8561-81ba4ea861ab",["D",1749233204187],"@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap');\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Fira Code', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace;\n background: linear-gradient(135deg, #0c0c0c 0%, #1a1a1a 100%);\n color: #e0e0e0;\n overflow: hidden;\n font-feature-settings: \"liga\" 1, \"calt\" 1;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.terminal {\n height: 100vh;\n display: flex;\n flex-direction: column;\n padding: 8px;\n background: linear-gradient(135deg, #0f0f0f 0%, #1e1e1e 100%);\n border: 1px solid #333;\n box-shadow: 0 0 50px rgba(0, 255, 136, 0.1), inset 0 0 0 1px #222;\n overflow-y: auto;\n max-width: 600px;\n margin: 0 auto;\n}\n\n@media (max-width: 768px) {\n .terminal {\n height: 100vh;\n padding: 8px;\n margin: 0;\n max-width: 100%;\n border: none;\n }\n}\n\n.terminal-header {\n border-bottom: 1px solid #333;\n padding: 10px;\n margin-bottom: 12px;\n background: linear-gradient(90deg, #1a1a1a, #2a2a2a);\n box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.title-section {\n display: flex;\n align-items: baseline;\n gap: 12px;\n}\n\n.terminal-header h1 {\n color: #00ff88;\n font-weight: 600;\n font-size: 1.2rem;\n text-shadow: 0 0 10px rgba(0, 255, 136, 0.3);\n margin: 0;\n line-height: 1;\n}\n\n.subtitle {\n color: #666;\n font-size: 0.7rem;\n font-weight: 300;\n font-family: 'Courier New', monospace;\n opacity: 0.8;\n font-style: italic;\n text-shadow: none;\n line-height: 1;\n}\n\n.header-controls {\n display: flex;\n gap: 8px;\n}\n\n.header-toggle-btn {\n background: #2a2a2a;\n color: #e0e0e0;\n border: 1px solid #444;\n padding: 6px 10px;\n font-family: inherit;\n font-size: 0.75rem;\n cursor: pointer;\n transition: all 0.1s ease;\n text-transform: uppercase;\n font-weight: 500;\n}\n\n.header-toggle-btn:hover {\n background: #00ff88;\n color: #000;\n border-color: #00ff88;\n}\n\n@media (max-width: 768px) {\n .terminal-header {\n padding: 6px;\n margin-bottom: 8px;\n flex-wrap: wrap;\n gap: 8px;\n }\n \n .title-section {\n gap: 8px;\n flex: 1;\n min-width: 0;\n flex-wrap: wrap;\n }\n \n .terminal-header h1 {\n font-size: 1rem;\n }\n \n .subtitle {\n font-size: 0.6rem;\n }\n \n .header-controls {\n gap: 4px;\n flex-shrink: 0;\n }\n \n .header-toggle-btn {\n padding: 6px 8px;\n font-size: 0.7rem;\n min-height: 32px;\n }\n}\n\n.terminal-output {\n flex: 1;\n overflow-y: auto;\n margin-bottom: 12px;\n padding: 12px;\n background: rgba(0, 0, 0, 0.4);\n border: 1px solid #2a2a2a;\n backdrop-filter: blur(10px);\n min-height: 200px;\n max-height: 300px;\n}\n\n.terminal-output::-webkit-scrollbar {\n width: 12px;\n}\n\n.terminal-output::-webkit-scrollbar-track {\n background: #1a1a1a;\n}\n\n.terminal-output::-webkit-scrollbar-thumb {\n background: linear-gradient(180deg, #00ff88, #00cc6a);\n border: 2px solid #1a1a1a;\n}\n\n.terminal-output::-webkit-scrollbar-thumb:hover {\n background: linear-gradient(180deg, #00ff88, #00aa55);\n}\n\n/* Scrollbar styling for track lists - matching console theme */\n.simple-track-list::-webkit-scrollbar,\n.compact-track-list::-webkit-scrollbar {\n width: 16px;\n}\n\n.simple-track-list::-webkit-scrollbar-track,\n.compact-track-list::-webkit-scrollbar-track {\n background: #1a1a1a;\n}\n\n.simple-track-list::-webkit-scrollbar-thumb,\n.compact-track-list::-webkit-scrollbar-thumb {\n background: linear-gradient(180deg, #00ff88, #00cc6a);\n border: 2px solid #1a1a1a;\n}\n\n.simple-track-list::-webkit-scrollbar-thumb:hover,\n.compact-track-list::-webkit-scrollbar-thumb:hover {\n background: linear-gradient(180deg, #00ff88, #00aa55);\n}\n\n.simple-track-list::-webkit-scrollbar-button,\n.compact-track-list::-webkit-scrollbar-button {\n background: #1a1a1a;\n border: 1px solid #00ff88;\n height: 16px;\n display: block;\n}\n\n.simple-track-list::-webkit-scrollbar-button:hover,\n.compact-track-list::-webkit-scrollbar-button:hover {\n background: linear-gradient(180deg, #00ff88, #00cc6a);\n}\n\n.simple-track-list::-webkit-scrollbar-button:vertical:start:decrement,\n.compact-track-list::-webkit-scrollbar-button:vertical:start:decrement {\n background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%2300ff88' d='M5 2L8 6H2z'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: center;\n}\n\n.simple-track-list::-webkit-scrollbar-button:vertical:end:increment,\n.compact-track-list::-webkit-scrollbar-button:vertical:end:increment {\n background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%2300ff88' d='M5 8L2 4h6z'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: center;\n}\n\n.simple-track-list::-webkit-scrollbar-button:hover:vertical:start:decrement,\n.compact-track-list::-webkit-scrollbar-button:hover:vertical:start:decrement {\n background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23000000' d='M5 2L8 6H2z'/%3E%3C/svg%3E\");\n}\n\n.simple-track-list::-webkit-scrollbar-button:hover:vertical:end:increment,\n.compact-track-list::-webkit-scrollbar-button:hover:vertical:end:increment {\n background-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23000000' d='M5 8L2 4h6z'/%3E%3C/svg%3E\");\n}\n\n.simple-track-list::-webkit-scrollbar-corner,\n.compact-track-list::-webkit-scrollbar-corner {\n background: #1a1a1a;\n}\n\n.terminal-line {\n margin-bottom: 8px;\n word-wrap: break-word;\n line-height: 1.5;\n font-weight: 400;\n}\n\n.terminal-line.command {\n color: #00ff88;\n font-weight: 500;\n text-shadow: 0 0 5px rgba(0, 255, 136, 0.3);\n}\n\n.terminal-line.output {\n color: #e0e0e0;\n}\n\n.terminal-line.error {\n color: #ff6b6b;\n font-weight: 500;\n text-shadow: 0 0 5px rgba(255, 107, 107, 0.3);\n}\n\n.terminal-line.info {\n color: #74c0fc;\n font-weight: 500;\n text-shadow: 0 0 5px rgba(116, 192, 252, 0.3);\n}\n\n.terminal-input-container {\n display: flex;\n align-items: center;\n border-top: 2px solid #2a2a2a;\n padding-top: 12px;\n background: linear-gradient(90deg, #1a1a1a, #2a2a2a);\n padding: 12px;\n box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);\n}\n\n.terminal-prompt {\n color: #00ff88;\n margin-right: 12px;\n font-weight: 600;\n text-shadow: 0 0 5px rgba(0, 255, 136, 0.3);\n}\n\n.terminal-input {\n flex: 1;\n background: transparent;\n border: none;\n color: #e0e0e0;\n font-family: inherit;\n font-size: inherit;\n outline: none;\n font-weight: 400;\n}\n\n.terminal-input::placeholder {\n color: #666;\n font-style: italic;\n}\n\n.player-status {\n background: linear-gradient(135deg, #1a1a1a, #2a2a2a);\n border: 2px solid #333;\n padding: 16px;\n margin-bottom: 16px;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 3px rgba(255, 255, 255, 0.1);\n backdrop-filter: blur(10px);\n}\n\n.progress-bar {\n width: 100%;\n height: 18px;\n background: #333;\n margin: 12px 0;\n overflow: hidden;\n box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);\n cursor: pointer;\n transition: all 0.2s ease;\n position: relative;\n}\n\n.progress-bar:hover {\n background: #444;\n box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 255, 136, 0.4);\n}\n\n.progress-bar:active {\n box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 255, 136, 0.6);\n}\n\n@media (max-width: 768px) {\n .progress-bar {\n height: 20px;\n margin: 8px 0;\n }\n \n .progress-bar:hover {\n box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 18px rgba(0, 255, 136, 0.5);\n }\n \n .progress-bar:active {\n box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 25px rgba(0, 255, 136, 0.7);\n }\n}\n\n.progress-fill {\n height: 100%;\n background: linear-gradient(90deg, #00ff88, #00cc6a);\n transition: width 0.1s ease;\n box-shadow: 0 0 10px rgba(0, 255, 136, 0.5);\n}\n\n.cursor {\n animation: blink 1s infinite;\n}\n\n@keyframes blink {\n 0%, 50% { opacity: 1; }\n 51%, 100% { opacity: 0; }\n}\n\n.ascii-interface {\n border: 1px solid #00ff88;\n padding: 12px;\n margin: 8px 0;\n background: linear-gradient(135deg, #0a1a0a, #1a2a1a);\n font-family: 'Fira Code', monospace;\n line-height: 1.4;\n box-shadow: 0 0 30px rgba(0, 255, 136, 0.2), inset 0 1px 3px rgba(0, 255, 136, 0.1);\n backdrop-filter: blur(10px);\n}\n\n@media (max-width: 768px) {\n .ascii-interface {\n padding: 10px;\n margin: 6px 0;\n border-width: 1px;\n }\n}\n\n.ascii-player {\n text-align: center;\n margin-bottom: 20px;\n}\n\n.ascii-controls {\n display: flex;\n justify-content: space-between;\n gap: 6px;\n margin: 12px 0;\n flex-wrap: wrap;\n}\n\n.ascii-button {\n background: linear-gradient(135deg, #1a1a1a, #2a2a2a);\n border: 1px solid #00ff88;\n color: #00ff88;\n padding: 8px 12px;\n font-family: 'Fira Code', monospace;\n font-size: 12px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.1s ease;\n flex: 1;\n text-shadow: 0 0 5px rgba(0, 255, 136, 0.3);\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);\n}\n\n.ascii-button:hover {\n background: linear-gradient(135deg, #00ff88, #00cc6a);\n color: #000;\n box-shadow: 0 0 20px rgba(0, 255, 136, 0.6);\n text-shadow: none;\n}\n\n.ascii-button:active {\n box-shadow: 0 0 15px rgba(0, 255, 136, 0.4);\n}\n\n.ascii-button:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n background: #2a2a2a;\n border-color: #555;\n color: #666;\n text-shadow: none;\n}\n\n.ascii-button:disabled:hover {\n background: #2a2a2a;\n color: #666;\n box-shadow: none;\n transform: none;\n}\n\n@media (max-width: 768px) {\n .ascii-controls {\n gap: 8px;\n margin: 12px 0;\n }\n \n .ascii-button {\n padding: 12px 16px;\n font-size: 12px;\n border-width: 1px;\n flex: 1;\n min-height: 44px;\n min-width: 60px;\n }\n}\n\n.ascii-display {\n border: 2px solid #444;\n padding: 16px;\n margin: 16px 0;\n background: linear-gradient(135deg, #0a0a0a, #1a1a1a);\n min-height: 80px;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);\n backdrop-filter: blur(5px);\n}\n\n.ascii-volume {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 16px;\n margin: 20px 0;\n padding: 16px;\n background: linear-gradient(135deg, #1a1a1a, #2a2a2a);\n border: 1px solid #333;\n}\n\n.ascii-volume input[type=\"range\"] {\n background: #000;\n border: 2px solid #00ff88;\n color: #00ff88;\n padding: 8px;\n width: 120px;\n appearance: none;\n height: 8px;\n}\n\n.ascii-volume input[type=\"range\"]::-webkit-slider-thumb {\n appearance: none;\n width: 20px;\n height: 20px;\n background: linear-gradient(135deg, #00ff88, #00cc6a);\n cursor: pointer;\n box-shadow: 0 0 10px rgba(0, 255, 136, 0.5);\n}\n\n.ascii-volume input[type=\"range\"]::-webkit-slider-track {\n background: #333;\n height: 8px;\n}\n\n.ascii-playlist-controls {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 12px;\n margin: 20px 0;\n}\n\n.mode-toggle {\n display: none;\n}\n\n.mode-toggle:hover {\n background: linear-gradient(135deg, #00ff88, #00cc6a);\n color: #000;\n box-shadow: 0 0 15px rgba(0, 255, 136, 0.5);\n text-shadow: none;\n}\n\n.ascii-art {\n font-size: 12px;\n line-height: 1.2;\n white-space: pre;\n color: #00ff88;\n text-align: center;\n margin: 16px 0;\n text-shadow: 0 0 10px rgba(0, 255, 136, 0.3);\n font-weight: 500;\n}\n\n.playlist-selector {\n margin: 16px 0;\n text-align: center;\n padding: 16px;\n background: linear-gradient(135deg, #1a1a1a, #2a2a2a);\n border: 1px solid #333;\n}\n\nselect {\n background: #2a2a2a;\n border: 2px solid #00ff88;\n color: #ffffff;\n padding: 8px 16px;\n font-family: 'Fira Code', monospace;\n min-width: 220px;\n font-weight: 500;\n text-shadow: none;\n}\n\nselect option {\n background: #2a2a2a;\n color: #ffffff;\n padding: 8px;\n}\n\n@media (max-width: 768px) {\n select {\n padding: 12px 8px;\n margin: 4px 0;\n font-size: 16px;\n border-width: 1px;\n width: 100%;\n box-sizing: border-box;\n min-height: 44px;\n min-width: auto;\n }\n}\n\n.playlist-selector select {\n background: #2a2a2a;\n border: 2px solid #00ff88;\n color: #ffffff;\n padding: 8px 16px;\n font-family: 'Fira Code', monospace;\n min-width: 220px;\n font-weight: 500;\n text-shadow: none;\n}\n\n.playlist-selector select:focus {\n outline: none;\n box-shadow: 0 0 15px rgba(0, 255, 136, 0.5);\n}\n\n.playlist-pills {\n display: flex;\n gap: 8px;\n flex-wrap: wrap;\n margin-bottom: 16px;\n}\n\n.playlist-pill {\n background: linear-gradient(135deg, #1a1a1a, #2a2a2a);\n border: 1px solid #00ff88;\n color: #00ff88;\n padding: 6px 12px;\n font-family: 'Fira Code', monospace;\n font-size: 11px;\n cursor: pointer;\n transition: all 0.1s ease;\n text-shadow: 0 0 5px rgba(0, 255, 136, 0.3);\n}\n\n.playlist-pill:hover,\n.playlist-pill.active {\n background: linear-gradient(135deg, #00ff88, #00cc6a);\n color: #000;\n text-shadow: none;\n}\n\n@media (max-width: 768px) {\n .playlist-pills {\n gap: 6px;\n margin-bottom: 12px;\n }\n \n .playlist-pill {\n padding: 10px 12px;\n font-size: 11px;\n border-width: 1px;\n flex: 1;\n min-width: 80px;\n text-align: center;\n min-height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n}\n\n.quick-add-dropdown {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n background: linear-gradient(135deg, #0a1a0a, #1a2a1a);\n border-top: 2px solid #00ff88;\n z-index: 1000;\n transition: transform 0.3s ease;\n}\n\n.quick-add-dropdown.collapsed {\n transform: translateY(calc(100% - 40px));\n}\n\n.quick-add-dropdown.expanded {\n transform: translateY(0);\n}\n\n.quick-add-toggle {\n background: transparent;\n border: none;\n color: #00ff88;\n padding: 12px;\n cursor: pointer;\n width: 100%;\n text-align: center;\n font-family: 'Fira Code', monospace;\n font-weight: 500;\n}\n\n.quick-add {\n padding: 20px;\n border-top: 1px solid #444;\n}\n\ninput[type=\"text\"], input[type=\"url\"] {\n background: #2a2a2a;\n border: 2px solid #00ff88;\n color: #ffffff;\n padding: 8px 12px;\n margin: 6px;\n font-family: 'Fira Code', monospace;\n font-weight: 400;\n transition: all 0.3s ease;\n text-shadow: none;\n}\n\ninput[type=\"text\"]:focus, input[type=\"url\"]:focus {\n outline: none;\n box-shadow: 0 0 15px rgba(0, 255, 136, 0.5);\n border-color: #00cc6a;\n}\n\ninput[type=\"text\"]::placeholder, input[type=\"url\"]::placeholder {\n color: #888;\n font-style: italic;\n}\n\n@media (max-width: 768px) {\n input[type=\"text\"], input[type=\"url\"] {\n padding: 12px 8px;\n margin: 4px 0;\n font-size: 16px;\n border-width: 1px;\n width: 100%;\n box-sizing: border-box;\n min-height: 44px;\n }\n}\n\n.quick-add input {\n background: #2a2a2a;\n border: 2px solid #00ff88;\n color: #ffffff;\n padding: 8px 12px;\n margin: 6px;\n font-family: 'Fira Code', monospace;\n width: calc(50% - 12px);\n font-weight: 400;\n transition: all 0.3s ease;\n text-shadow: none;\n}\n\n.quick-add input:focus {\n outline: none;\n box-shadow: 0 0 15px rgba(0, 255, 136, 0.5);\n border-color: #00cc6a;\n}\n\n.quick-add input::placeholder {\n color: #888;\n font-style: italic;\n}\n\n.quick-add button {\n background: linear-gradient(135deg, #1a1a1a, #2a2a2a);\n border: 2px solid #00ff88;\n color: #00ff88;\n padding: 8px 16px;\n font-family: 'Fira Code', monospace;\n cursor: pointer;\n margin: 6px;\n font-weight: 500;\n transition: all 0.3s ease;\n text-shadow: 0 0 5px rgba(0, 255, 136, 0.3);\n}\n\n.quick-add button:hover {\n background: linear-gradient(135deg, #00ff88, #00cc6a);\n color: #000;\n box-shadow: 0 0 15px rgba(0, 255, 136, 0.5);\n text-shadow: none;\n}\n\n@media (max-width: 768px) {\n .quick-add button, button {\n padding: 12px 16px;\n margin: 4px 0;\n font-size: 14px;\n border-width: 1px;\n min-height: 44px;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n \n /* Make all form elements stack vertically on mobile */\n .quick-add,\n .collapsible-content > div {\n display: flex;\n flex-direction: column;\n gap: 8px;\n }\n \n .quick-add .flex,\n .collapsible-content .flex {\n flex-direction: column;\n }\n}\n\n.collapsible-section {\n background: linear-gradient(135deg, #1a1a1a, #2a2a2a);\n border: 1px solid #00ff88;\n box-shadow: inset 0 0 0 1px #222;\n margin: 6px 0;\n}\n\n.collapsible-header {\n background: transparent;\n border: none;\n color: #00ff88;\n padding: 10px;\n cursor: pointer;\n width: 100%;\n text-align: left;\n font-family: 'Fira Code', monospace;\n font-weight: 500;\n text-shadow: 0 0 5px rgba(0, 255, 136, 0.3);\n font-size: 0.85rem;\n transition: all 0.1s ease;\n}\n\n.collapsible-header:hover {\n background: rgba(0, 255, 136, 0.1);\n}\n\n.collapsible-content {\n padding: 16px;\n border-top: 1px solid #444;\n}\n\n.collapsible-content.collapsed {\n display: none;\n}\n\n@media (max-width: 768px) {\n .collapsible-section {\n border-width: 1px;\n margin: 6px 0;\n }\n \n .collapsible-header {\n padding: 12px 8px;\n font-size: 0.9rem;\n min-height: 44px;\n display: flex;\n align-items: center;\n }\n \n .collapsible-content {\n padding: 12px 8px;\n }\n}\n\n.player-controls {\n background: linear-gradient(135deg, #0a1a0a, #1a2a1a);\n border: 1px solid #00ff88;\n padding: 12px;\n margin: 6px 0;\n}\n\n@media (max-width: 768px) {\n .player-controls {\n padding: 10px;\n margin: 4px 0;\n border-width: 1px;\n }\n}\n\n.current-playlist-tracks {\n background: linear-gradient(135deg, #0a1a0a, #1a2a1a);\n border: 1px solid #00ff88;\n margin: 6px 0;\n padding: 12px;\n}\n\n.playlist-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n color: #00ff88;\n font-weight: 500;\n margin-bottom: 16px;\n padding-bottom: 8px;\n border-bottom: 1px solid #444;\n}\n\n.playlist-header h3 {\n margin: 0;\n font-size: 14px;\n}\n\n.playlist-header span {\n color: #888;\n font-size: 12px;\n}\n\n.track-list {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.track-item {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 8px;\n background: rgba(42, 42, 42, 0.3);\n border: 1px solid #444;\n transition: all 0.3s ease;\n}\n\n.track-item:hover {\n background: rgba(0, 255, 136, 0.1);\n border-color: #00ff88;\n}\n\n.track-item.current {\n background: rgba(0, 255, 136, 0.2);\n border-color: #00ff88;\n}\n\n.track-item.playing {\n background: rgba(0, 255, 136, 0.3);\n border-color: #00cc6a;\n box-shadow: 0 0 10px rgba(0, 255, 136, 0.3);\n}\n\n.track-number {\n color: #00ff88;\n font-weight: 500;\n min-width: 24px;\n text-align: center;\n font-size: 12px;\n}\n\n.track-info {\n flex: 1;\n min-width: 0;\n}\n\n.track-title {\n color: #ffffff;\n font-weight: 500;\n font-size: 13px;\n margin-bottom: 2px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.track-url {\n color: #888;\n font-size: 11px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.track-controls {\n display: flex;\n gap: 4px;\n}\n\n.track-button {\n background: linear-gradient(135deg, #1a1a1a, #2a2a2a);\n border: 1px solid #00ff88;\n color: #00ff88;\n padding: 4px 8px;\n font-family: 'Fira Code', monospace;\n font-size: 10px;\n cursor: pointer;\n transition: all 0.3s ease;\n text-shadow: 0 0 3px rgba(0, 255, 136, 0.3);\n}\n\n.track-button:hover {\n background: linear-gradient(135deg, #00ff88, #00cc6a);\n color: #000;\n text-shadow: none;\n}\n\n.track-button:disabled {\n background: #333;\n border-color: #555;\n color: #666;\n cursor: not-allowed;\n text-shadow: none;\n}\n\n.track-button.remove {\n border-color: #ff6b6b;\n color: #ff6b6b;\n}\n\n.track-button.remove:hover {\n background: linear-gradient(135deg, #ff6b6b, #ff5252);\n color: #000;\n}\n\n/* Player status at top */\n.player-status-top {\n background: linear-gradient(135deg, #1a1a1a, #2a2a2a);\n border: 1px solid #333;\n padding: 12px;\n margin-bottom: 16px;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);\n}\n\n/* Simple playlist tracks - clickable only */\n.simple-playlist-tracks {\n margin-bottom: 12px;\n border: 1px solid #333;\n background: linear-gradient(135deg, #1a1a1a, #222);\n box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4), inset 0 0 0 1px #222;\n width: 100%;\n overflow: hidden;\n box-sizing: border-box;\n}\n\n.playlist-header-toggle {\n width: 100%;\n background: linear-gradient(90deg, #2a2a2a, #333);\n border: none;\n color: #00ff88;\n padding: 10px 14px;\n font-family: inherit;\n font-size: 0.85rem;\n font-weight: 500;\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n align-items: center;\n transition: all 0.1s ease;\n border-bottom: 1px solid #333;\n}\n\n.playlist-header-toggle:hover {\n background: linear-gradient(90deg, #333, #3a3a3a);\n}\n\n.playlist-name {\n font-weight: 600;\n text-shadow: 0 0 5px rgba(0, 255, 136, 0.3);\n}\n\n.playlist-info {\n color: #888;\n font-size: 0.8rem;\n font-weight: 400;\n}\n\n.toggle-icon {\n font-size: 1.2rem;\n font-weight: bold;\n color: #00ff88;\n}\n\n.simple-track-list {\n /* Remove max-height on desktop - show all tracks */\n width: 100%;\n overflow-x: hidden;\n -webkit-overflow-scrolling: touch;\n}\n\n.simple-track-item {\n display: flex;\n align-items: center;\n padding: 8px 14px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.05);\n cursor: pointer;\n transition: all 0.1s ease;\n background: transparent;\n position: relative;\n width: 100%;\n box-sizing: border-box;\n overflow: hidden;\n}\n\n.simple-track-item:last-child {\n border-bottom: none;\n}\n\n.simple-track-item:hover {\n background: rgba(0, 255, 136, 0.08);\n}\n\n.simple-track-item.current {\n background: rgba(0, 255, 136, 0.12);\n border-left: 2px solid #00ff88;\n}\n\n.simple-track-item.playing {\n background: rgba(0, 255, 136, 0.15);\n border-left: 2px solid #00ff88;\n box-shadow: inset 0 0 8px rgba(0, 255, 136, 0.2);\n}\n\n.simple-track-item .track-number {\n width: 30px;\n text-align: center;\n font-weight: 600;\n color: #999;\n}\n\n.simple-track-item .track-info {\n flex: 1;\n margin-left: 12px;\n}\n\n.simple-track-item .track-title {\n font-weight: 500;\n color: #e0e0e0;\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 8px;\n}\n\n.track-name {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.track-duration {\n font-size: 0.75rem;\n color: #666;\n font-weight: 400;\n flex-shrink: 0;\n}\n\n.simple-track-item .track-status {\n width: 20px;\n text-align: center;\n font-size: 0.8rem;\n}\n\n@media (max-width: 768px) {\n .simple-playlist-tracks {\n margin-bottom: 10px;\n }\n \n .playlist-header-toggle {\n padding: 12px 14px;\n font-size: 0.9rem;\n }\n \n .playlist-info {\n font-size: 0.75rem;\n }\n \n .simple-track-list {\n max-height: 280px; /* Scrollable on mobile */\n overflow-y: auto;\n overflow-x: hidden;\n width: 100%;\n -webkit-overflow-scrolling: touch;\n touch-action: pan-y;\n }\n \n .simple-track-item {\n padding: 12px 10px;\n min-height: 48px;\n width: 100%;\n box-sizing: border-box;\n overflow: hidden;\n }\n \n .simple-track-item.current,\n .simple-track-item.playing {\n border-left: 3px solid #00ff88;\n }\n \n .simple-track-item .track-number {\n width: 28px;\n font-size: 0.85rem;\n font-weight: 600;\n }\n \n .simple-track-item .track-info {\n margin-left: 10px;\n }\n \n .simple-track-item .track-title {\n font-size: 0.9rem;\n /* Keep duration inline on mobile */\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: 8px;\n }\n \n .track-name {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n \n .track-duration {\n font-size: 0.75rem;\n margin-left: 0;\n flex-shrink: 0;\n color: #888;\n }\n \n .simple-track-item .track-status {\n width: 18px;\n font-size: 0.9rem;\n }\n}\n\n/* Hide mode toggle button */\n.mode-toggle {\n display: none;\n}\n\n/* Compact section styling */\n.compact-section {\n margin-bottom: 12px;\n}\n\n.compact-row {\n margin-bottom: 12px;\n}\n\n.compact-label {\n font-size: 0.85rem;\n font-weight: 500;\n color: #00ff88;\n margin-bottom: 4px;\n display: block;\n}\n\n.compact-controls {\n display: flex;\n gap: 6px;\n align-items: center;\n flex-wrap: wrap;\n}\n\n.compact-input {\n background: #2a2a2a;\n border: 1px solid #444;\n color: #e0e0e0;\n padding: 4px 8px;\n font-family: inherit;\n font-size: 0.8rem;\n min-width: 100px;\n}\n\n.compact-input:focus {\n outline: none;\n border-color: #00ff88;\n box-shadow: 0 0 5px rgba(0, 255, 136, 0.3);\n}\n\n.compact-select {\n background: #2a2a2a;\n border: 1px solid #444;\n color: #e0e0e0;\n padding: 4px 8px;\n font-family: inherit;\n font-size: 0.8rem;\n min-width: 120px;\n}\n\n.compact-select:focus {\n outline: none;\n border-color: #00ff88;\n box-shadow: 0 0 5px rgba(0, 255, 136, 0.3);\n}\n\n.header-toggle-btn.compact {\n padding: 3px 6px;\n font-size: 0.7rem;\n min-width: 30px;\n}\n\n.header-toggle-btn.compact.remove:hover {\n background: #ff4444;\n border-color: #ff4444;\n color: #fff;\n}\n\n/* Compact track styling */\n.compact-track-section {\n margin-bottom: 12px;\n border: 1px solid #333;\n background: #1a1a1a;\n}\n\n.compact-track-header {\n background: #2a2a2a;\n color: #00ff88;\n padding: 6px 12px;\n font-size: 0.85rem;\n font-weight: 500;\n border-bottom: 1px solid #333;\n}\n\n.compact-track-header.clickable {\n cursor: pointer;\n border: none;\n width: 100%;\n text-align: left;\n}\n\n.compact-track-header.clickable:hover {\n background: #333;\n}\n\n.compact-track-list {\n max-height: 200px;\n overflow-y: auto;\n}\n\n.compact-track-item {\n display: flex;\n align-items: center;\n padding: 4px 8px;\n border-bottom: 1px solid #2a2a2a;\n font-size: 0.8rem;\n}\n\n.compact-track-item:hover {\n background: #2a2a2a;\n}\n\n.compact-track-item.current {\n background: #0a3a0a;\n border-left: 3px solid #00ff88;\n}\n\n.compact-track-number {\n min-width: 30px;\n color: #888;\n font-weight: 500;\n}\n\n.compact-track-info {\n flex: 1;\n margin: 0 8px;\n min-width: 0;\n}\n\n.compact-track-title {\n color: #e0e0e0;\n font-weight: 500;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.compact-track-url {\n color: #888;\n font-size: 0.7rem;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n margin-top: 2px;\n}\n\n.compact-track-controls {\n display: flex;\n gap: 4px;\n flex-shrink: 0;\n}\n\n@media (max-width: 768px) {\n .compact-row {\n margin-bottom: 10px;\n }\n \n .compact-label {\n font-size: 0.8rem;\n margin-bottom: 3px;\n }\n \n .compact-controls {\n gap: 4px;\n }\n \n .compact-input, .compact-select {\n min-width: 80px;\n flex: 1;\n }\n \n .compact-track-item {\n flex-direction: column;\n align-items: stretch;\n gap: 4px;\n }\n \n .compact-track-info {\n margin: 0;\n }\n \n .compact-track-controls {\n align-self: flex-end;\n }\n}\n\n/* Playlist divider line */\n.playlist-divider {\n height: 1px;\n background: linear-gradient(90deg, transparent, #00ff88, transparent);\n margin: 12px 0;\n opacity: 0.6;\n}\n\n/* Playlist total duration styling */\n.compact-track-total {\n text-align: center;\n font-size: 12px;\n color: #0f0;\n background: rgba(0, 255, 0, 0.1);\n border: 1px solid rgba(0, 255, 0, 0.3);\n padding: 8px;\n margin-top: 8px;\n font-family: 'Fira Code', 'Courier New', monospace;\n font-weight: 500;\n text-shadow: 0 0 5px rgba(0, 255, 0, 0.3);\n}\n\n/* Simple playlist total duration - grey text aligned with tracks */\n.simple-playlist-total {\n font-size: 0.75rem;\n color: #666;\n margin-top: 8px;\n padding: 8px 12px;\n text-align: left;\n border-top: 1px solid #333;\n background: rgba(0, 0, 0, 0.1);\n}",[],[200,224],[200],{"_104":232,"_95":233,"_159":234,"_161":-5,"_162":140,"_163":120,"_164":165,"_106":235,"_100":32,"_167":168,"_169":-5,"_170":22,"_171":-5,"_172":236,"_98":245},"012d802a-4301-11f0-aa52-76b3cceeab13","shared","56a189b2-0511-4f59-b683-389f51c1e5ee",["D",1749233204187],[237],{"_104":238,"_95":239,"_159":240,"_161":234,"_162":140,"_163":120,"_164":165,"_106":241,"_100":32,"_167":218,"_169":242,"_170":22,"_171":-5,"_172":243,"_98":244},"012d7e86-4301-11f0-aa52-76b3cceeab13","types.ts","f7d2f9da-3f00-4d0e-8ebd-c42a550fc66e",["D",1749233204187],"export interface Track {\n url: string;\n title: string;\n duration?: number;\n}\n\nexport interface Playlist {\n name: string;\n tracks: Track[];\n currentIndex: number;\n}\n\nexport interface PlayerState {\n isPlaying: boolean;\n isPaused: boolean;\n currentTrack: Track | null;\n volume: number;\n position: number;\n duration: number;\n}\n\nexport interface TerminalLine {\n type: 'command' | 'output' | 'error';\n content: string;\n timestamp: Date;\n}\n\nexport interface CommandResult {\n success: boolean;\n message: string;\n data?: any;\n}\n\nexport interface UIMode {\n showASCII: boolean;\n showControls: boolean;\n}",[],[233,239],[233],{"_104":247,"_95":248,"_159":249,"_161":-5,"_162":140,"_163":120,"_164":165,"_106":250,"_100":32,"_167":209,"_169":251,"_170":22,"_171":-5,"_172":252,"_98":253},"012d81c4-4301-11f0-aa52-76b3cceeab13",".vtignore","9e6111f9-8439-413f-bf98-470b66411454",["D",1749233204187],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor",[],[248],{"_104":255,"_95":256,"_159":257,"_161":-5,"_162":140,"_163":120,"_164":165,"_106":258,"_100":32,"_167":209,"_169":259,"_170":22,"_171":-5,"_172":260,"_98":261},"012d834a-4301-11f0-aa52-76b3cceeab13","README.md","0c7b6629-4383-4964-9bf3-19f97e5370cd",["D",1749233204187],"# valtown mp3 Player\n\nAn interface for playing MP3s and managing playlists.\n## Features\n\n- Terminal-style command interface\n- Play MP3s from URLs\n- Create and manage multiple playlists\n- Basic playback controls (play, pause, stop, volume)\n- Playlist navigation (next, previous)\n\n## Commands\n\n- `play <url>` - Play an MP3 from URL\n- `pause` - Pause current track\n- `stop` - Stop current track\n- `volume <0-100>` - Set volume\n- `playlist create <name>` - Create new playlist\n- `playlist add <name> <url> [title]` - Add track to playlist\n- `playlist load <name>` - Load and play playlist\n- `playlist list` - Show all playlists\n- `playlist show <name>` - Show tracks in playlist\n- `playlist delete <name>` - Delete playlist\n- `next` - Play next track in playlist\n- `prev` - Play previous track in playlist\n- `help` - Show all commands\n- `clear` - Clear terminal\n\n## Auth\nIn terminal enter `asdf` to show editor panels.\n\nin frontend/index.tsx\n```\n// Configuration\nconst CONFIG = {\n ALLOW_PLAYLIST_DELETION: true, // Set to false to prevent playlist deletion\n ALLOW_TRACK_DELETION: true // Set to false to prevent track deletion\n};\n```\n\n## Example Usage\n\n```bash\n# Create a new playlist\n$ playlist create \"My Favorites\"\n\n# Add tracks to the playlist (you'll need real MP3 URLs)\n$ playlist add \"My Favorites\" https://example.com/song1.mp3 \"Song Title 1\"\n$ playlist add \"My Favorites\" https://example.com/song2.mp3 \"Song Title 2\"\n\n# Load and play the playlist\n$ playlist load \"My Favorites\"\n\n# Control playback\n$ pause\n$ volume 75\n$ next\n$ prev\n\n# View playlists\n$ playlist list\n$ playlist show \"My Favorites\"\n```\n\n## Project Structure\n\n```\n├── frontend/\n│ ├── index.html # Main HTML with terminal interface\n│ ├── index.tsx # React terminal component\n│ └── style.css # Terminal styling\n├── shared/\n│ └── types.ts # Shared TypeScript types\n└── backend/\n └── index.ts # Static file server\n```",[],[256],{"_104":263,"_95":264,"_159":265,"_161":-5,"_162":140,"_163":120,"_164":165,"_106":266,"_100":32,"_167":209,"_169":267,"_170":22,"_171":-5,"_172":268,"_98":269},"012d8606-4301-11f0-aa52-76b3cceeab13","deno.json","ebbf8757-28dc-4643-a13c-61447cde77ac",["D",1749233204187],"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": false,\n \"types\": [\n \"https://www.val.town/types/valtown.d.ts\"\n ],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"files\": {\n \"include\": [\n \"deno:/https/esm.town/**/*\"\n ]\n },\n \"rules\": {\n \"exclude\": [\n \"no-explicit-any\"\n ]\n }\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}",[],[264],"files",[156,175,182,188,198,204,213,222,231,237,246,254,262],"counts",{"_274":32,"_275":120,"_276":32,"_277":32},"pulls","branches","forks","envVars","contents",[],{"_104":189,"_95":190,"_159":191,"_161":185,"_162":140,"_163":120,"_164":165,"_106":281,"_100":32,"_167":193,"_169":194,"_170":22,"_171":96,"_98":282},["D",1749233204187],[184,190],"upstreamProject","upstreamBranch",{"_104":143,"_106":286,"_287":288,"_95":43,"_141":149,"_100":289,"_142":-5,"_144":-5,"_290":291,"_108":-5,"_153":22,"_110":147,"_152":94,"_16":121,"_151":292},["D",1748394877840],"updatedAt",["D",1750792173977],98,"lockfileKey","1753206285011-esm.town_v_all_howler@98-main","howler","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":43,"_100":101,"_98":99,"_102":299,"_154":304,"_270":344,"_209":345,"_278":347,"_348":349,"_352":165,"_353":-5,"_354":101,"_355":139,"_356":357},{"_104":105,"_95":96,"_106":300,"_108":-5,"_109":22,"_110":111,"_112":-5,"_113":114,"_14":115,"_116":-5,"_117":22,"_118":-5,"_119":120,"_16":121,"_122":123,"_124":123,"_125":126,"_127":126,"_128":126,"_129":123,"_130":123,"_23":301,"_134":302,"_137":303,"_153":22},["D",1749233204187],{"_93":94,"_132":133},{"_93":94,"_136":133},{"_100":139,"_95":43,"_104":140,"_141":105,"_142":143,"_144":145,"_146":147,"_148":149,"_150":121,"_151":96,"_152":94},[305,308,311,317,329,335,338,341],{"_104":157,"_95":158,"_159":160,"_161":-5,"_162":140,"_163":120,"_164":165,"_106":166,"_100":32,"_167":168,"_169":-5,"_170":22,"_171":-5,"_172":306,"_98":307},[],[158],{"_104":176,"_95":177,"_159":178,"_161":-5,"_162":140,"_163":120,"_164":165,"_106":179,"_100":32,"_167":168,"_169":-5,"_170":22,"_171":-5,"_172":309,"_98":310},[],[177],{"_104":183,"_95":184,"_159":185,"_161":-5,"_162":140,"_163":120,"_164":165,"_106":186,"_100":32,"_167":168,"_169":-5,"_170":22,"_171":-5,"_172":312,"_98":316},[313],{"_104":189,"_95":190,"_159":191,"_161":185,"_162":140,"_163":120,"_164":165,"_106":192,"_100":32,"_167":193,"_169":194,"_170":22,"_171":96,"_172":314,"_98":315},[],[184,190],[184],{"_104":199,"_95":200,"_159":201,"_161":-5,"_162":140,"_163":120,"_164":165,"_106":202,"_100":32,"_167":168,"_169":-5,"_170":22,"_171":-5,"_172":318,"_98":328},[319,322,325],{"_104":205,"_95":206,"_159":207,"_161":201,"_162":140,"_163":101,"_164":165,"_106":208,"_100":120,"_167":209,"_169":210,"_170":22,"_171":-5,"_172":320,"_98":321},[],[200,206],{"_104":214,"_95":215,"_159":216,"_161":201,"_162":140,"_163":120,"_164":22,"_106":217,"_100":32,"_167":218,"_169":219,"_170":22,"_171":-5,"_172":323,"_98":324},[],[200,215],{"_104":223,"_95":224,"_159":225,"_161":201,"_162":140,"_163":120,"_164":165,"_106":226,"_100":32,"_167":209,"_169":227,"_170":22,"_171":-5,"_172":326,"_98":327},[],[200,224],[200],{"_104":232,"_95":233,"_159":234,"_161":-5,"_162":140,"_163":120,"_164":165,"_106":235,"_100":32,"_167":168,"_169":-5,"_170":22,"_171":-5,"_172":330,"_98":334},[331],{"_104":238,"_95":239,"_159":240,"_161":234,"_162":140,"_163":120,"_164":165,"_106":241,"_100":32,"_167":218,"_169":242,"_170":22,"_171":-5,"_172":332,"_98":333},[],[233,239],[233],{"_104":247,"_95":248,"_159":249,"_161":-5,"_162":140,"_163":120,"_164":165,"_106":250,"_100":32,"_167":209,"_169":251,"_170":22,"_171":-5,"_172":336,"_98":337},[],[248],{"_104":255,"_95":256,"_159":257,"_161":-5,"_162":140,"_163":120,"_164":165,"_106":258,"_100":32,"_167":209,"_169":259,"_170":22,"_171":-5,"_172":339,"_98":340},[],[256],{"_104":263,"_95":264,"_159":265,"_161":-5,"_162":140,"_163":120,"_164":165,"_106":266,"_100":32,"_167":209,"_169":267,"_170":22,"_171":-5,"_172":342,"_98":343},[],[264],[305,308,311,313,317,319,322,325,329,331,335,338,341],{"_104":189,"_95":190,"_159":191,"_161":185,"_162":140,"_163":120,"_164":165,"_106":281,"_100":32,"_167":193,"_169":194,"_170":22,"_171":96,"_98":346},[184,190],[],"upstream",{"_104":143,"_106":350,"_287":351,"_95":43,"_141":149,"_100":289,"_142":-5,"_144":-5,"_290":291,"_108":-5,"_153":22,"_110":147,"_152":94,"_16":121,"_151":292},["D",1748394877840],["D",1750792173977],"showCompareCallout","pull","ahead","behind","templates",[],"actionData","errors"] </article></body></html>