ace-step-ui/App.tsx at main · AIahmedshrf/ace-step-ui

Repository navigation

History

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

import React, { useState, useEffect, useRef, useCallback } from 'react';

import { Sidebar } from './components/Sidebar';

import { CreatePanel } from './components/CreatePanel';

import { SongList } from './components/SongList';

import { RightSidebar } from './components/RightSidebar';

import { Player } from './components/Player';

import { LibraryView } from './components/LibraryView';

import { CreatePlaylistModal, AddToPlaylistModal } from './components/PlaylistModals';

import { VideoGeneratorModal } from './components/VideoGeneratorModal';

import { UsernameModal } from './components/UsernameModal';

import { UserProfile } from './components/UserProfile';

import { SettingsModal } from './components/SettingsModal';

import { SongProfile } from './components/SongProfile';

import { Song, GenerationParams, View, Playlist } from './types';

import { generateApi, songsApi, playlistsApi, getAudioUrl } from './services/api';

import { useAuth } from './context/AuthContext';

import { useResponsive } from './context/ResponsiveContext';

import { I18nProvider, useI18n } from './context/I18nContext';

import { List } from 'lucide-react';

import { PlaylistDetail } from './components/PlaylistDetail';

import { Toast, ToastType } from './components/Toast';

import { SearchPage } from './components/SearchPage';

import { TrainingPanel } from './components/TrainingPanel';

import { NewsPage } from './components/NewsPage';

import { ConfirmDialog } from './components/ConfirmDialog';

function AppContent() {

// i18n

const { t } = useI18n();

// Responsive

const { isMobile, isDesktop } = useResponsive();

// Auth

const { user, token, isAuthenticated, isLoading: authLoading, setupUser, logout } = useAuth();

const [showUsernameModal, setShowUsernameModal] = useState(false);

// Track multiple concurrent generation jobs

const activeJobsRef = useRef<Map<string, { tempId: string; pollInterval: ReturnType<typeof setInterval> }>>(new Map());

const [activeJobCount, setActiveJobCount] = useState(0);

// Theme State

const [theme, setTheme] = useState<'dark' | 'light'>(() => {

const stored = localStorage.getItem('theme');

if (stored === 'dark' || stored === 'light') return stored;

return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';

});

// Navigation State - default to create view

const [currentView, setCurrentView] = useState<View>('create');

// Content State

const [songs, setSongs] = useState<Song[]>([]);

const [playlists, setPlaylists] = useState<Playlist[]>([]);

const [likedSongIds, setLikedSongIds] = useState<Set<string>>(new Set());

const [referenceTracks, setReferenceTracks] = useState<ReferenceTrack[]>([]);

const [playQueue, setPlayQueue] = useState<Song[]>([]);

const [queueIndex, setQueueIndex] = useState(-1);

// Selection State

const [currentSong, setCurrentSong] = useState<Song | null>(null);

const [selectedSong, setSelectedSong] = useState<Song | null>(null);

const [selectedPlaylist, setSelectedPlaylist] = useState<Playlist | null>(null);

// Player State

const [isPlaying, setIsPlaying] = useState(false);

const [currentTime, setCurrentTime] = useState(0);

const [duration, setDuration] = useState(0);

const [volume, setVolume] = useState(() => {

const stored = localStorage.getItem('volume');

return stored ? parseFloat(stored) : 0.8;

});

const [playbackRate, setPlaybackRate] = useState(1.0);

const [isShuffle, setIsShuffle] = useState(false);

const [repeatMode, setRepeatMode] = useState<'none' | 'all' | 'one'>('all');

// UI State

const [isGenerating, setIsGenerating] = useState(false);

const [showRightSidebar, setShowRightSidebar] = useState(true);

const [showLeftSidebar, setShowLeftSidebar] = useState(true);

const [pendingAudioSelection, setPendingAudioSelection] = useState<{ target: 'reference' | 'source'; url: string; title?: string } | null>(null);

// Mobile UI Toggle

const [mobileShowList, setMobileShowList] = useState(false);

// Modals

const [isCreatePlaylistModalOpen, setIsCreatePlaylistModalOpen] = useState(false);

const [isAddToPlaylistModalOpen, setIsAddToPlaylistModalOpen] = useState(false);

const [songToAddToPlaylist, setSongToAddToPlaylist] = useState<Song | null>(null);

// Video Modal

const [isVideoModalOpen, setIsVideoModalOpen] = useState(false);

const [songForVideo, setSongForVideo] = useState<Song | null>(null);

// Settings Modal

const [showSettingsModal, setShowSettingsModal] = useState(false);

// Profile View

const [viewingUsername, setViewingUsername] = useState<string | null>(null);

// Song View

const [viewingSongId, setViewingSongId] = useState<string | null>(null);

// Playlist View

const [viewingPlaylistId, setViewingPlaylistId] = useState<string | null>(null);

// Reuse State

const [reuseData, setReuseData] = useState<{ song: Song, timestamp: number } | null>(null);

const audioRef = useRef<HTMLAudioElement | null>(null);

const selectedSongRef = useRef<Song | null>(null);

const currentSongIdRef = useRef<string | null>(null);

const pendingSeekRef = useRef<number | null>(null);

const playNextRef = useRef<() => void>(() => {});

// Mobile Details Modal State

const [showMobileDetails, setShowMobileDetails] = useState(false);

// Toast State

const [toast, setToast] = useState<{ message: string; type: ToastType; isVisible: boolean }>({

message: '',

type: 'success',

isVisible: false,

});

// Confirm Dialog State

const [confirmDialog, setConfirmDialog] = useState<{

title: string;

message: string;

onConfirm: () => void;

} | null>(null);

interface ReferenceTrack {

id: string;

filename: string;

storage_key: string;

duration: number | null;

file_size_bytes: number | null;

tags: string[] | null;

created_at: string;

audio_url: string;

}

const showToast = (message: string, type: ToastType = 'success') => {

setToast({ message, type, isVisible: true });

};

const closeToast = () => {

setToast(prev => ({ ...prev, isVisible: false }));

};

// Show username modal if not authenticated and not loading

useEffect(() => {

if (!authLoading && !isAuthenticated) {

setShowUsernameModal(true);

}

}, [authLoading, isAuthenticated]);

// Load Playlists

useEffect(() => {

if (token) {

playlistsApi.getMyPlaylists(token)

.then(res => setPlaylists(res.playlists))

.catch(err => console.error('Failed to load playlists', err));

} else {

setPlaylists([]);

}

}, [token]);

// Keep selectedSongRef in sync for use in callbacks without stale closures

useEffect(() => { selectedSongRef.current = selectedSong; }, [selectedSong]);

// Cleanup active jobs on unmount

useEffect(() => {

return () => {

// Clear all polling intervals when component unmounts

activeJobsRef.current.forEach(({ pollInterval }) => {

clearInterval(pollInterval);

});

activeJobsRef.current.clear();

};

}, []);

const handleShowDetails = (song: Song) => {

setSelectedSong(song);

setShowMobileDetails(true);

};

// Reuse Handler

const handleReuse = (song: Song) => {

setReuseData({ song, timestamp: Date.now() });

setCurrentView('create');

setMobileShowList(false);

};

// Song Update Handler

const handleSongUpdate = (updatedSong: Song) => {

setSongs(prev => prev.map(s => s.id === updatedSong.id ? updatedSong : s));

if (currentSong?.id === updatedSong.id) {

setCurrentSong(updatedSong);

}

if (selectedSong?.id === updatedSong.id) {

setSelectedSong(updatedSong);

}

};

// Navigate to Profile Handler

const handleNavigateToProfile = (username: string) => {

setViewingUsername(username);

setCurrentView('profile');

window.history.pushState({}, '', `/@${username}`);

};

// Back from Profile Handler

const handleBackFromProfile = () => {

setViewingUsername(null);

setCurrentView('create');

window.history.pushState({}, '', '/');

};

// Navigate to Song Handler

const handleNavigateToSong = (songId: string) => {

setViewingSongId(songId);

setCurrentView('song');

window.history.pushState({}, '', `/song/${songId}`);

};

// Back from Song Handler

const handleBackFromSong = () => {

setViewingSongId(null);

setCurrentView('create');

window.history.pushState({}, '', '/');

};

// Theme Effect

useEffect(() => {

localStorage.setItem('theme', theme);

if (theme === 'dark') {

document.documentElement.classList.add('dark');

} else {

document.documentElement.classList.remove('dark');

}

}, [theme]);

const toggleTheme = () => {

setTheme(prev => prev === 'dark' ? 'light' : 'dark');

};

// URL Routing Effect

useEffect(() => {

const handleUrlChange = () => {

const path = window.location.pathname;

const params = new URLSearchParams(window.location.search);

// Handle ?song= query parameter

const songParam = params.get('song');

if (songParam) {

setViewingSongId(songParam);

setCurrentView('song');

window.history.replaceState({}, '', `/song/${songParam}`);

return;

}

if (path === '/create' || path === '/') {

setCurrentView('create');

setMobileShowList(false);

} else if (path === '/library') {

setCurrentView('library');

} else if (path.startsWith('/@')) {

const username = path.substring(2);

if (username) {

setViewingUsername(username);

setCurrentView('profile');

}

} else if (path.startsWith('/song/')) {

const songId = path.substring(6);

if (songId) {

setViewingSongId(songId);

setCurrentView('song');

}

} else if (path.startsWith('/playlist/')) {

const playlistId = path.substring(10);

if (playlistId) {

setViewingPlaylistId(playlistId);

setCurrentView('playlist');

}

} else if (path === '/search') {

setCurrentView('search');

} else if (path === '/news') {

setCurrentView('news');

}

};

handleUrlChange();

window.addEventListener('popstate', handleUrlChange);

return () => window.removeEventListener('popstate', handleUrlChange);

}, []);

// Load Songs Effect

useEffect(() => {

if (!isAuthenticated || !token) return;

const loadSongs = async () => {

try {

const [mySongsRes, likedSongsRes] = await Promise.all([

songsApi.getMySongs(token),

songsApi.getLikedSongs(token)

]);

const mapSong = (s: any): Song => ({

id: s.id,

title: s.title,

lyrics: s.lyrics,

style: s.style,

coverUrl: `https://picsum.photos/seed/${s.id}/400/400`,

duration: s.duration && s.duration > 0 ? `${Math.floor(s.duration / 60)}:${String(Math.floor(s.duration % 60)).padStart(2, '0')}` : '0:00',

createdAt: new Date(s.created_at || s.createdAt),

tags: s.tags || [],

audioUrl: getAudioUrl(s.audio_url, s.id),

isPublic: s.is_public,

likeCount: s.like_count || 0,

viewCount: s.view_count || 0,

userId: s.user_id,

creator: s.creator,

ditModel: s.ditModel,

generationParams: (() => {

try {

if (!s.generation_params) return undefined;

return typeof s.generation_params === 'string' ? JSON.parse(s.generation_params) : s.generation_params;

} catch {

return undefined;

}

})(),

});

const mySongs = mySongsRes.songs.map(mapSong);

const likedSongs = likedSongsRes.songs.map(mapSong);

const songsMap = new Map<string, Song>();

[...mySongs, ...likedSongs].forEach(s => songsMap.set(s.id, s));

// Preserve any generating songs (temp songs)

setSongs(prev => {

const generatingSongs = prev.filter(s => s.isGenerating);

const loadedSongs = Array.from(songsMap.values());

return [...generatingSongs, ...loadedSongs];

});

const likedIds = new Set(likedSongs.map(s => s.id));

setLikedSongIds(likedIds);

} catch (error) {

console.error('Failed to load songs:', error);

}

};

loadSongs();

}, [isAuthenticated, token]);

const loadReferenceTracks = useCallback(async () => {

if (!isAuthenticated || !token) return;

try {

const response = await fetch('/api/reference-tracks', {

headers: { Authorization: `Bearer ${token}` }

});

if (!response.ok) return;

const data = await response.json();

setReferenceTracks(data.tracks || []);

} catch (error) {

console.error('Failed to load reference tracks:', error);

}

}, [isAuthenticated, token]);

// Load reference tracks for Library

useEffect(() => {

loadReferenceTracks();

}, [loadReferenceTracks]);

useEffect(() => {

if (currentView === 'library') {

loadReferenceTracks();

}

}, [currentView, loadReferenceTracks]);

// Player Logic

const getActiveQueue = (song?: Song) => {

if (playQueue.length > 0) return playQueue;

if (song && songs.some(s => s.id === song.id)) return songs;

return songs;

};

const playNext = useCallback(() => {

if (!currentSong) return;

const queue = getActiveQueue(currentSong);

if (queue.length === 0) return;

const currentIndex = queueIndex >= 0 && queue[queueIndex]?.id === currentSong.id

? queueIndex

: queue.findIndex(s => s.id === currentSong.id);

if (currentIndex === -1) return;

if (repeatMode === 'one') {

if (audioRef.current) {

audioRef.current.currentTime = 0;

audioRef.current.play();

}

return;

}

// Find next playable song (has audioUrl and not generating)

const queueLen = queue.length;

for (let i = 1; i <= queueLen; i++) {

BD0 let nextIndex;

if (isShuffle) {

nextIndex = Math.floor(Math.random() * queueLen);

if (queueLen > 1 && nextIndex === currentIndex) continue;

} else {

nextIndex = currentIndex + i;

// In 'none' repeat mode, stop at end of queue

if (repeatMode === 'none' && nextIndex >= queueLen) {

setIsPlaying(false);

return;

}

nextIndex = nextIndex % queueLen;

}

const candidate = queue[nextIndex];

if (candidate.audioUrl && !candidate.isGenerating) {

setQueueIndex(nextIndex);

setCurrentSong(candidate);

setIsPlaying(true);

return;

}

// No playable songs found

setIsPlaying(false);

}, [currentSong, queueIndex, isShuffle, repeatMode, playQueue, songs]);

const playPrevious = useCallback(() => {

if (!currentSong) return;

const queue = getActiveQueue(currentSong);

if (queue.length === 0) return;

const currentIndex = queueIndex >= 0 && queue[queueIndex]?.id === currentSong.id

? queueIndex

: queue.findIndex(s => s.id === currentSong.id);

if (currentIndex === -1) return;

if (currentTime > 3) {

if (audioRef.current) audioRef.current.currentTime = 0;

return;

}

// Find previous playable song (has audioUrl and not generating)

const queueLen = queue.length;

for (let i = 1; i <= queueLen; i++) {

let prevIndex;

if (isShuffle) {

prevIndex = Math.floor(Math.random() * queueLen);

if (queueLen > 1 && prevIndex === currentIndex) continue;

} else {

prevIndex = currentIndex - i;

// In 'none' repeat mode, stop at beginning of queue

if (repeatMode === 'none' && prevIndex < 0) {

if (audioRef.current) audioRef.current.currentTime = 0;

return;

}

prevIndex = (prevIndex + queueLen) % queueLen;

}

const candidate = queue[prevIndex];

if (candidate.audioUrl && !candidate.isGenerating) {

setQueueIndex(prevIndex);

setCurrentSong(candidate);

setIsPlaying(true);

return;

}

// No playable songs found

setIsPlaying(false);

}, [currentSong, queueIndex, currentTime, isShuffle, repeatMode, playQueue, songs]);

useEffect(() => {

playNextRef.current = playNext;

}, [playNext]);

// Audio Setup

useEffect(() => {

audioRef.current = new Audio();

audioRef.current.crossOrigin = "anonymous";

const audio = audioRef.current;

audio.volume = volume;

const => setCurrentTime(audio.currentTime);

const applyPendingSeek = () => {

if (pendingSeekRef.current === null) return;

if (audio.seekable.length === 0) return;

const target = pendingSeekRef.current;

const safeTarget = Number.isFinite(audio.duration)

? Math.min(Math.max(target, 0), audio.duration)

: Math.max(target, 0);

audio.currentTime = safeTarget;

setCurrentTime(safeTarget);

pendingSeekRef.current = null;

};

const => {

setDuration(audio.duration);

applyPendingSeek();

};

const => {

applyPendingSeek();

};

const => {

applyPendingSeek();

};

const => {

playNextRef.current();

};

const Event) => {

if (audio.error && audio.error.code !== 1) {

console.error("Audio playback error:", audio.error);

if (audio.error.code === 4) {

showToast(t('songNotAvailable'), 'error');

} else {

showToast(t('unableToPlay'), 'error');

}

setIsPlaying(false);

};

audio.addEventListener('timeupdate', onTimeUpdate);

audio.addEventListener('loadedmetadata', onLoadedMetadata);

audio.addEventListener('canplay', onCanPlay);

audio.addEventListener('progress', onProgress);

audio.addEventListener('ended', onEnded);

audio.addEventListener('error', onError);

return () => {

audio.pause();

audio.removeEventListener('timeupdate', onTimeUpdate);

audio.removeEventListener('loadedmetadata', onLoadedMetadata);

audio.removeEventListener('canplay', onCanPlay);

audio.removeEventListener('progress', onProgress);

audio.removeEventListener('ended', onEnded);

audio.removeEventListener('error', onError);

};

}, []);

// Handle Playback State

useEffect(() => {

const audio = audioRef.current;

if (!audio || !currentSong?.audioUrl) return;

const playAudio = async () => {

try {

await audio.play();

} catch (err) {

if (err instanceof Error && err.name !== 'AbortError') {

console.error("Playback failed:", err);

if (err.name === 'NotSupportedError') {

showToast(t('songNotAvailable'), 'error');

}

setIsPlaying(false);

}

};

if (currentSongIdRef.current !== currentSong.id) {

currentSongIdRef.current = currentSong.id;

audio.src = currentSong.audioUrl;

audio.load();

if (isPlaying) playAudio();

} else {

if (isPlaying) playAudio();

else audio.pause();

}

}, [currentSong, isPlaying]);

// Handle Volume

useEffect(() => {

if (audioRef.current) {

audioRef.current.volume = volume;

}

localStorage.setItem('volume', String(volume));

}, [volume]);

// Handle Playback Rate

useEffect(() => {

if (audioRef.current) {

audioRef.current.playbackRate = playbackRate;

}

}, [playbackRate]);

// Spacebar play/pause

useEffect(() => {

const handleKeyDown = (e: KeyboardEvent) => {

if (e.code !== 'Space') return;

const tag = (e.target as HTMLElement)?.tagName;

if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || (e.target as HTMLElement)?.isContentEditable) return;

e.preventDefault();

if (currentSong) {

if (currentSong.audioUrl) {

setIsPlaying(prev => !prev);

}

} else {

// No song selected — play first available

const available = songs.filter(s => s.audioUrl && !s.isGenerating);

if (available.length > 0) {

playSong(available[0], available);

}

};

window.addEventListener('keydown', handleKeyDown);

return () => window.removeEventListener('keydown', handleKeyDown);

}, [currentSong, songs]);

// Helper to cleanup a job and check if all jobs are done

const cleanupJob = useCallback((jobId: string, tempId: string) => {

const jobData = activeJobsRef.current.get(jobId);

if (jobData) {

clearInterval(jobData.pollInterval);

activeJobsRef.current.delete(jobId);

}

// Remove temp song

setSongs(prev => prev.filter(s => s.id !== tempId));

// Update active job count

setActiveJobCount(activeJobsRef.current.size);

// If no more active jobs, set isGenerating to false

if (activeJobsRef.current.size === 0) {

setIsGenerating(false);

}

}, []);

// Refresh songs list (called when any job completes successfully)

const refreshSongsList = useCallback(async () => {

if (!token) return;

try {

const response = await songsApi.getMySongs(token);

const loadedSongs: Song[] = response.songs.map(s => ({

id: s.id,

title: s.title,

lyrics: s.lyrics,

style: s.style,

coverUrl: `https://picsum.photos/seed/${s.id}/400/400`,

duration: s.duration && s.duration > 0 ? `${Math.floor(s.duration / 60)}:${String(Math.floor(s.duration % 60)).padStart(2, '0')}` : '0:00',

createdAt: new Date(s.created_at),

tags: s.tags || [],

audioUrl: getAudioUrl(s.audio_url, s.id),

isPublic: s.is_public,

likeCount: s.like_count || 0,

viewCount: s.view_count || 0,

userId: s.user_id,

creator: s.creator,

ditModel: s.ditModel,

generationParams: (() => {

try {

if (!s.generation_params) return undefined;

return typeof s.generation_params === 'string' ? JSON.parse(s.generation_params) : s.generation_params;

} catch {

return undefined;

}

})(),

}));

// Preserve any generating songs that aren't in the loaded list

setSongs(prev => {

const generatingSongs = prev.filter(s => s.isGenerating);

const mergedSongs = [...generatingSongs];

for (const song of loadedSongs) {

if (!mergedSongs.some(s => s.id === song.id)) {

mergedSongs.push(song);

}

// Sort by creation date, newest first

return mergedSongs.sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());

});

// If the current selection was a temp/generating song, replace it with newest real song

const current = selectedSongRef.current;

if (current?.isGenerating || (current && !loadedSongs.some(s => s.id === current.id))) {

setSelectedSong(loadedSongs[0] ?? null);

}

} catch (error) {

console.error('Failed to refresh songs:', error);

}

}, [token]);

const beginPollingJob = useCallback((jobId: string, tempId: string) => {

if (!token) return;

if (activeJobsRef.current.has(jobId)) return;

const pollInterval = setInterval(async () => {

try {

const status = await generateApi.getStatus(jobId, token);

const normalizedProgress = Number.isFinite(Number(status.progress))

? (Number(status.progress) > 1 ? Number(status.progress) / 100 : Number(status.progress))

: undefined;

setSongs(prev => {

const song = prev.find(s => s.id === tempId);

if (!song) return prev;

const newQueuePos = status.status === 'queued' ? status.queuePosition : undefined;

const newProgress = normalizedProgress ?? song.progress;

const newStage = status.stage ?? song.stage;

// Skip update if nothing changed to avoid unnecessary re-renders

if (newProgress === song.progress && newStage === song.stage && newQueuePos === song.queuePosition) {

return prev;

}

return prev.map(s => {

if (s.id !== tempId) return s;

return { ...s, queuePosition: newQueuePos, progress: newProgress, stage: newStage };

});

if (status.status === 'succeeded' && status.result) {

cleanupJob(jobId, tempId);

await refreshSongsList();

if (window.innerWidth < 768) {

setMobileShowList(true);

}

} else if (status.status === 'failed') {

cleanupJob(jobId, tempId);

console.error(`Job ${jobId} failed:`, status.error);

showToast(`${t('generationFailed')}: ${status.error || 'Unknown error'}`, 'error');

}

} catch (pollError) {

console.error(`Polling error for job ${jobId}:`, pollError);

cleanupJob(jobId, tempId);

}

}, 2000);

activeJobsRef.current.set(jobId, { tempId, pollInterval });

setActiveJobCount(activeJobsRef.current.size);

setTimeout(() => {

if (activeJobsRef.current.has(jobId)) {

console.warn(`Job ${jobId} timed out`);

cleanupJob(jobId, tempId);

showToast(t('generationTimedOut'), 'error');

}

}, 600000);

}, [token, cleanupJob, refreshSongsList]);

const buildTempSongFromParams = (params: GenerationParams, tempId: string, createdAt?: string) => ({

id: tempId,

title: params.title || 'Generating...',

lyrics: '',

style: params.style || params.songDescription || '',

coverUrl: 'https://picsum.photos/200/200?blur=10',

duration: '--:--',

createdAt: createdAt ? new Date(createdAt) : new Date(),

isGenerating: true,

tags: params.customMode ? ['custom'] : ['simple'],

isPublic: true,

});

// Handlers

const handleGenerate = async (params: GenerationParams) => {

if (!isAuthenticated || !token) {

setShowUsernameModal(true);

return;

}

setIsGenerating(true);

setCurrentView('create');

setMobileShowList(false);

// Create unique temp ID for this job

const tempId = `temp_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;

const tempSong: Song = {

id: tempId,

title: params.title || 'Generating...',

lyrics: '',

style: params.style,

coverUrl: 'https://picsum.photos/200/200?blur=10',

duration: '--:--',

createdAt: new Date(),

isGenerating: true,

tags: params.customMode ? ['custom'] : ['simple'],

isPublic: true

};

setSongs(prev => [tempSong, ...prev]);

setSelectedSong(tempSong);

setShowRightSidebar(true);

try {

const job = await generateApi.startGeneration({

customMode: params.customMode,

songDescription: params.songDescription,

lyrics: params.lyrics,

style: params.style,

title: params.title,

instrumental: params.instrumental,

vocalLanguage: params.vocalLanguage,

duration: params.duration && params.duration > 0 ? params.duration : undefined,

bpm: params.bpm,

keyScale: params.keyScale,

timeSignature: params.timeSignature,

inferenceSteps: params.inferenceSteps,

guidanceScale: params.guidanceScale,

batchSize: params.batchSize,

randomSeed: params.randomSeed,

seed: params.seed,

thinking: params.thinking,

audioFormat: params.audioFormat,

inferMethod: params.inferMethod,

shift: params.shift,

lmTemperature: params.lmTemperature,

lmCfgScale: params.lmCfgScale,

lmTopK: params.lmTopK,

lmTopP: params.lmTopP,

lmNegativePrompt: params.lmNegativePrompt,

lmBackend: params.lmBackend,

lmModel: params.lmModel,

referenceAudioUrl: params.referenceAudioUrl,

sourceAudioUrl: params.sourceAudioUrl,

referenceAudioTitle: params.referenceAudioTitle,

sourceAudioTitle: params.sourceAudioTitle,

audioCodes: params.audioCodes,

repaintingStart: params.repaintingStart,

repaintingEnd: params.repaintingEnd,

instruction: params.instruction,

audioCoverStrength: params.audioCoverStrength,

taskType: params.taskType,

useAdg: params.useAdg,

cfgIntervalStart: params.cfgIntervalStart,

cfgIntervalEnd: params.cfgIntervalEnd,

customTimesteps: params.customTimesteps,

useCotMetas: params.useCotMetas,

useCotCaption: params.useCotCaption,

useCotLanguage: params.useCotLanguage,

autogen: params.autogen,

constrainedDecodingDebug: params.constrainedDecodingDebug,

allowLmBatch: params.allowLmBatch,

getScores: params.getScores,

getLrc: params.getLrc,

scoreScale: params.scoreScale,

lmBatchChunkSize: params.lmBatchChunkSize,

trackName: params.trackName,

completeTrackClasses: params.completeTrackClasses,

isFormatCaption: params.isFormatCaption,

}, token);

beginPollingJob(job.jobId, tempId);

} catch (e) {

console.error('Generation error:', e);

setSongs(prev => prev.filter(s => s.id !== tempId));

// Only set isGenerating to false if no other jobs are running

if (activeJobsRef.current.size === 0) {

setIsGenerating(false);

}

showToast(t('generationFailed'), 'error');

}

};

// Resume active jobs on refresh so progress keeps updating

useEffect(() => {

if (!isAuthenticated || !token) return;

const resumeJobs = async () => {

try {

const history = await generateApi.getHistory(token);

const jobs = Array.isArray(history.jobs) ? history.jobs : [];

const activeStatuses = new Set(['pending', 'queued', 'running']);

const jobsToResume = jobs.filter((job: any) => activeStatuses.has(job.status));

if (jobsToResume.length === 0) return;

setSongs(prev => {

const existingIds = new Set(prev.map(s => s.id));

const next = [...prev];

for (const job of jobsToResume) {

const jobId = job.id || job.jobId;

if (!jobId) continue;

const tempId = `job_${jobId}`;

if (existingIds.has(tempId)) continue;

const params = (() => {

try {

if (!job.params) return {};

return typeof job.params === 'string' ? JSON.parse(job.params) : job.params;

} catch {

return {};

}

})();

next.unshift(buildTempSongFromParams(params, tempId, job.created_at));

existingIds.add(tempId);

}

return next;

});

for (const job of jobsToResume) {

const jobId = job.id || job.jobId;

if (!jobId) continue;

const tempId = `job_${jobId}`;

beginPollingJob(jobId, tempId);

}

} catch (error) {

console.error('Failed to resume jobs:', error);

}

};

resumeJobs();

}, [isAuthenticated, token, beginPollingJob]);

const togglePlay = () => {

if (!currentSong) return;

if (!currentSong.audioUrl) {

showToast(t('songNotAvailable'), 'error');

return;

}

setIsPlaying(!isPlaying);

};

const playFirst = () => {

const available = songs.filter(s => s.audioUrl && !s.isGenerating);

if (available.length > 0) {

playSong(available[0], available);

}

};

const playSong = (song: Song, list?: Song[]) => {

const nextQueue = list && list.length > 0

? list

: (playQueue.length > 0 && playQueue.some(s => s.id === song.id))

? playQueue

: (songs.some(s => s.id === song.id) ? songs : [song]);

const nextIndex = ne 8 xtQueue. 63DD findIndex(s => s.id === song.id);

setPlayQueue(nextQueue);

setQueueIndex(nextIndex);

if (currentSong?.id !== song.id) {

const updatedSong = { ...song, viewCount: (song.viewCount || 0) + 1 };

setCurrentSong(updatedSong);

setSelectedSong(updatedSong);

setIsPlaying(true);

setSongs(prev => prev.map(s => s.id === song.id ? updatedSong : s));

songsApi.trackPlay(song.id, token).catch(err => console.error('Failed to track play:', err));

} else {

togglePlay();

}

if (currentSong?.id === song.id) {

setSelectedSong(song);

}

setShowRightSidebar(true);

};

const handleSeek = (time: number) => {

const audio = audioRef.current;

if (!audio) return;

if (Number.isNaN(audio.duration) || audio.readyState < 1 || audio.seekable.length === 0) {

pendingSeekRef.current = time;

return;

}

audio.currentTime = time;

setCurrentTime(time);

};

const toggleLike = async (songId: string) => {

if (!token) return;

const isLiked = likedSongIds.has(songId);

// Optimistic update

setLikedSongIds(prev => {

const next = new Set(prev);

if (isLiked) next.delete(songId);

else next.add(songId);

return next;

});

setSongs(prev => prev.map(s => {

if (s.id === songId) {

const newCount = (s.likeCount || 0) + (isLiked ? -1 : 1);

return { ...s, likeCount: Math.max(0, newCount) };

}

return s;

}));

if (selectedSong?.id === songId) {

setSelectedSong(prev => prev ? {

...prev,

View remainder of file in raw view

FilesExpand file tree

App.tsx

Latest commit

History

App.tsx

File metadata and controls