\" };\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 {\n success: false,\n message:\n \"Unknown playlist command. Use: create, add, load, list, show, delete, reorder, remove, goto, rename, edit\",\n };\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 {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 />);","deleted","label",[172,155],"frontend","permalink","https://www.val.town/x/all/valamp/code/frontend/index.tsx","extension","actionData","errors"] </article></body></html>

\n {notification.message}\n \n ×\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}> = (\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 onRefreshPlaylists();\n onCommand(`playlist load ${name}`);\n }}\n >\n {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 \n

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

\n )}\n\n

\n onCommand(\"play\")}\n disabled={!playerState.currentTrack}\n >\n PLAY\n \n onCommand(\"pause\")}\n disabled={!playerState.isPlaying}\n >\n PAUSE\n \n onCommand(\"stop\")}\n disabled={!playerState.currentTrack}\n >\n STOP\n \n onCommand(\"prev\")}\n disabled={!currentPlaylist}\n >\n PREV\n \n onCommand(\"next\")}\n disabled={!currentPlaylist}\n >\n NEXT\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 setIsExpanded(!isExpanded)}\n >\n {currentPlaylist}\n \n {playlist.tracks.length} tracks • {formatTime(calculatePlaylistDuration())}\n \n {isExpanded ? \"−\" : \"+\"}\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 CREATE\n \n

\n\n

MANAGE PLAYLISTS

\n setSelectedPlaylist(e.target.value)}\n className=\"compact-select\"\n >\n \n {Object.keys(playlists).map(name => )}\n \n \n SHOW\n \n startEditingPlaylist(selectedPlaylist)}\n disabled={!selectedPlaylist}\n >\n EDIT\n \n \n DELETE\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 SAVE\n \n setEditingPlaylist(null)}\n >\n CANCEL\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}> = (\n { playlists, currentPlaylist, playerState, onCommand, onNotification, showPlaylistTracks, onRefreshPlaylists },\n) => {\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(\n `/api/playlists/${encodeURIComponent(editingTrack.playlist)}/tracks/${editingTrack.index}`,\n {\n method: \"PUT\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ url: editTrackUrl.trim(), title: editTrackTitle.trim() }),\n },\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(\n `/api/playlists/${encodeURIComponent(playlist)}/tracks/${fromIndex}/move/${toIndex}`,\n {\n method: \"PUT\",\n },\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 setSelectedPlaylist(e.target.value)}\n className=\"compact-select\"\n >\n \n {Object.keys(playlists).map(name => )}\n \n \n ADD\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 SAVE\n \n setEditingTrack(null)}\n >\n CANCEL\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 \n

{index + 1}

{track.title}

{track.url}

\n startEditingTrack(showPlaylistTracks, index, track)}\n title=\"Edit track\"\n >\n EDIT\n \n moveTrack(index, Math.max(0, index - 1), showPlaylistTracks)}\n disabled={index === 0}\n title=\"Move up\"\n >\n ↑\n \n \n moveTrack(\n index,\n Math.min(playlists[showPlaylistTracks].tracks.length - 1, index + 1),\n showPlaylistTracks,\n )}\n disabled={index === playlists[showPlaylistTracks].tracks.length - 1}\n title=\"Move down\"\n >\n ↓\n \n removeTrack(index, showPlaylistTracks)}\n disabled={!CONFIG.ALLOW_TRACK_DELETION}\n title=\"Remove from playlist\"\n >\n X\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 setTrackManagementExpanded(!trackManagementExpanded)}\n >\n MANAGE TRACKS IN \"{currentPlaylist}\" {trackManagementExpanded ? \"[-]\" : \"[+]\"}\n \n {trackManagementExpanded && (\n

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

{index + 1}

{track.title}

{track.url}

\n startEditingTrack(currentPlaylist, index, track)}\n title=\"Edit track\"\n >\n EDIT\n \n moveTrack(index, Math.max(0, index - 1))}\n disabled={index === 0}\n title=\"Move up\"\n >\n ↑\n \n \n moveTrack(index, Math.min(playlists[currentPlaylist].tracks.length - 1, index + 1))}\n disabled={index === playlists[currentPlaylist].tracks.length - 1}\n title=\"Move down\"\n >\n ↓\n \n removeTrack(index)}\n disabled={!CONFIG.ALLOW_TRACK_DELETION}\n title=\"Remove from playlist\"\n >\n X\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}> = (\n {\n playerState,\n playlists,\n currentPlaylist,\n onCommand,\n onNotification,\n handleProgressBarClick,\n formatTime,\n showPlaylistManager,\n onRefreshPlaylists,\n },\n) => {\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 setPlaylistExpanded(!playlistExpanded)}\n >\n PLAYLIST MANAGER {playlistExpanded ? \"[-]\" : \"[+]\"}\n \n

\n \n

\n\n

\n setTrackExpanded(!trackExpanded)}\n >\n TRACK EDITOR {trackExpanded ? \"[-]\" : \"[+]\"}\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\",\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\",\n ];\n\n const [currentQuote, setCurrentQuote] = useState(() => quotes[Math.floor(Math.random() * quotes.length)]);\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(\n \"output\",\n `Seeking to ${Math.floor(seekTime / 60)}:${Math.floor(seekTime % 60).toString().padStart(2, \"0\")}`,\n );\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:\n `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 {\n success: true,\n message: `UI mode: ASCII=${uiMode.showASCII ? \"ON\" : \"OFF\"}, Console=${\n showConsole ? \"ON\" : \"OFF\"\n }, Panels=${showPlaylistManager ? \"ON\" : \"OFF\"}, Panels Button=${showPanelsButton ? \"VISIBLE\" : \"HIDDEN\"}`,\n };\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 {\n success: true,\n message: `Playlist manager and track editor ${!showPlaylistManager ? \"enabled\" : \"disabled\"}`,\n };\n case \"dev\":\n setShowPanelsButton(!showPanelsButton);\n return {\n success: true,\n message: `Developer mode ${!showPanelsButton ? \"enabled\" : \"disabled\"}. Panels button is now ${\n !showPanelsButton ? \"visible\" : \"hidden\"\n }.`,\n };\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 (\n isNaN(fromIndex) || isNaN(toIndex)\n || fromIndex < 0 || toIndex < 0\n || fromIndex >= reorderPlaylist.tracks.length\n || toIndex >= reorderPlaylist.tracks.length\n ) {\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 {\n success: true,\n message: `Removed \"${removedTrack.title}\" from playlist \"${removeFromPlaylistName}\"`,\n };\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 {\n success: true,\n message: `Playing track ${gotoIndex + 1}: ${gotoPlaylist.tracks[gotoIndex].title}`,\n };\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 {\n success: false,\n message:\n \"Unknown playlist command. Use: create, add, load, list, show, delete, reorder, remove, goto, rename, edit\",\n };\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 {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 />);","deleted","label",[172,155],"frontend","permalink","https://www.val.town/x/all/valamp/code/frontend/index.tsx","extension","actionData","errors"] </article></body></html>