640 lines
28 KiB
TypeScript
640 lines
28 KiB
TypeScript
import {
|
|
mdiMusic,
|
|
mdiRobotOutline,
|
|
mdiPlus,
|
|
mdiPlay,
|
|
mdiPause,
|
|
mdiStop,
|
|
mdiMicrophone,
|
|
mdiDownload,
|
|
mdiRefresh,
|
|
mdiDelete,
|
|
mdiMenu,
|
|
mdiChevronDown,
|
|
mdiCreation,
|
|
mdiPlaylistMusic,
|
|
mdiLibrary,
|
|
mdiAccountCircle,
|
|
mdiContentCopy,
|
|
mdiVolumeHigh,
|
|
mdiHeart,
|
|
mdiShare,
|
|
mdiClockOutline,
|
|
mdiCheckCircleOutline,
|
|
mdiZipBox,
|
|
mdiTune,
|
|
mdiInstrumentTriangle,
|
|
mdiEarth,
|
|
mdiDotsVertical,
|
|
mdiSkipNext,
|
|
mdiSkipPrevious,
|
|
mdiVolumeMedium,
|
|
mdiVolumeMute,
|
|
mdiTextBoxOutline,
|
|
mdiClose,
|
|
mdiAutoFix
|
|
} from '@mdi/js';
|
|
import Head from 'next/head';
|
|
import React, { ReactElement, useEffect, useState, useRef } from 'react';
|
|
import LayoutAuthenticated from '../layouts/Authenticated';
|
|
import { getPageTitle } from '../config';
|
|
import BaseIcon from '../components/BaseIcon';
|
|
import axios from 'axios';
|
|
import { useAppSelector } from '../stores/hooks';
|
|
import { toast, ToastContainer } from 'react-toastify';
|
|
import 'react-toastify/dist/ReactToastify.css';
|
|
|
|
const SunoStudio = () => {
|
|
const { currentUser } = useAppSelector((state) => state.auth);
|
|
const [activeTab, setActiveTab] = useState<'create' | 'library' | 'explore'>('create');
|
|
const [isCustom, setIsCustom] = useState(false);
|
|
const [instrumental, setInstrumental] = useState(false);
|
|
const [lyrics, setLyrics] = useState('');
|
|
const [prompt, setPrompt] = useState('');
|
|
const [style, setStyle] = useState('Pop');
|
|
const [title, setTitle] = useState('');
|
|
const [voiceType, setVoiceType] = useState('female');
|
|
|
|
const [library, setLibrary] = useState<any[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
const [isGenerating, setIsGenerating] = useState(false);
|
|
const [isGeneratingLyrics, setIsGeneratingLyrics] = useState(false);
|
|
|
|
const [currentTrack, setCurrentTrack] = useState<any>(null);
|
|
const [isPlaying, setIsPlaying] = useState(false);
|
|
const audioRef = useRef<HTMLAudioElement | null>(null);
|
|
const [progress, setProgress] = useState(0);
|
|
const [currentTime, setCurrentTime] = useState(0);
|
|
const [duration, setDuration] = useState(0);
|
|
const [volume, setVolume] = useState(0.8);
|
|
|
|
const [showLyricsModal, setShowLyricsModal] = useState(false);
|
|
const [lyricsToView, setLyricsToView] = useState<any>(null);
|
|
|
|
useEffect(() => {
|
|
fetchLibrary();
|
|
}, []);
|
|
|
|
const fetchLibrary = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const response = await axios.get('/projects?limit=50&sort=createdAt:desc');
|
|
setLibrary(response.data.rows || []);
|
|
} catch (error) {
|
|
console.error('Error fetching library:', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleGenerateLyrics = async () => {
|
|
if (!style) {
|
|
toast.error('Informe um estilo musical primeiro!');
|
|
return;
|
|
}
|
|
try {
|
|
setIsGeneratingLyrics(true);
|
|
const response = await axios.post('/ai_song_requests/generate-lyrics', {
|
|
data: {
|
|
keyword: prompt || title || 'love and freedom',
|
|
style
|
|
}
|
|
});
|
|
|
|
if (response.data?.lyrics) {
|
|
const fullLyrics = Object.entries(response.data.lyrics)
|
|
.map(([section, text]) => `[${section.toUpperCase()}]\n${text}`)
|
|
.join('\n\n');
|
|
setLyrics(fullLyrics);
|
|
if (response.data.title && !title) setTitle(response.data.title);
|
|
setIsCustom(true);
|
|
toast.success('Letras geradas com sucesso!');
|
|
}
|
|
} catch (error) {
|
|
toast.error('Falha ao gerar letras.');
|
|
} finally {
|
|
setIsGeneratingLyrics(false);
|
|
}
|
|
};
|
|
|
|
const handleGenerate = async () => {
|
|
if (isGenerating) return;
|
|
|
|
try {
|
|
setIsGenerating(true);
|
|
const payload = {
|
|
data: {
|
|
title: title || 'New AI Hit',
|
|
prompt_text: isCustom ? lyrics : prompt,
|
|
lyrics: isCustom ? lyrics : '',
|
|
style,
|
|
is_custom: isCustom,
|
|
voice_type: voiceType,
|
|
instrumental
|
|
}
|
|
};
|
|
|
|
const response = await axios.post('/ai_song_requests', payload);
|
|
|
|
if (response.status === 200) {
|
|
toast.success('Sua música está sendo gerada com voz real AI!', { theme: 'dark' });
|
|
setTimeout(() => {
|
|
fetchLibrary();
|
|
setActiveTab('library');
|
|
}, 3000);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error generating song:', error);
|
|
toast.error('Erro ao gerar música. Tente novamente.', { theme: 'dark' });
|
|
} finally {
|
|
setIsGenerating(false);
|
|
}
|
|
};
|
|
|
|
const playTrack = (track: any) => {
|
|
if (currentTrack?.id === track.id) {
|
|
togglePlayback();
|
|
return;
|
|
}
|
|
setCurrentTrack(track);
|
|
setIsPlaying(true);
|
|
if (audioRef.current) {
|
|
// Ensure audio_url is present
|
|
let url = track?.audio_url;
|
|
if (!url) {
|
|
toast.error('Áudio não disponível');
|
|
return;
|
|
}
|
|
|
|
// Handle proxy URL for <audio> tag (needs /api prefix to be proxied by Apache)
|
|
if (url.startsWith('/') && !url.startsWith('/api/') && !url.startsWith('http')) {
|
|
url = `/api${url}`;
|
|
}
|
|
|
|
audioRef.current.src = url;
|
|
audioRef.current.load();
|
|
audioRef.current.play().catch((e: any) => {
|
|
console.error('Playback error:', e);
|
|
toast.error('Erro ao reproduzir áudio. Verifique sua conexão.');
|
|
});
|
|
}
|
|
};
|
|
|
|
const togglePlayback = () => {
|
|
if (!audioRef.current) return;
|
|
if (isPlaying) {
|
|
audioRef.current.pause();
|
|
} else {
|
|
audioRef.current.play().catch((e: any) => console.error('Playback error:', e));
|
|
}
|
|
setIsPlaying(!isPlaying);
|
|
};
|
|
|
|
const handleTimeUpdate = () => {
|
|
if (audioRef.current) {
|
|
setCurrentTime(audioRef.current.currentTime);
|
|
setDuration(audioRef.current.duration || 0);
|
|
setProgress((audioRef.current.currentTime / audioRef.current.duration) * 100 || 0);
|
|
}
|
|
};
|
|
|
|
const handleSeek = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const val = parseFloat(e.target.value);
|
|
if (audioRef.current) {
|
|
const newTime = (val / 100) * (audioRef.current.duration || 0);
|
|
audioRef.current.currentTime = newTime;
|
|
setProgress(val);
|
|
}
|
|
};
|
|
|
|
const formatTime = (time: number) => {
|
|
if (isNaN(time)) return '0:00';
|
|
const mins = Math.floor(time / 60);
|
|
const secs = Math.floor(time % 60);
|
|
return `${mins}:${secs.toString().padStart(2, '0')}`;
|
|
};
|
|
|
|
const handleDownload = async (track: any) => {
|
|
if (!track?.audio_url) return;
|
|
try {
|
|
toast.info('Preparando download...', { theme: 'dark' });
|
|
|
|
// Remove /api/ prefix if present for axios because it already has it in baseURL
|
|
let url = track.audio_url;
|
|
if (url.startsWith('/api/')) {
|
|
url = url.substring(4);
|
|
}
|
|
|
|
const response = await axios.get(url, {
|
|
responseType: 'blob'
|
|
});
|
|
const blobUrl = window.URL.createObjectURL(new Blob([response.data]));
|
|
const link = document.createElement('a');
|
|
link.href = blobUrl;
|
|
const extension = track.audio_url.includes('.mp3') ? 'mp3' : 'mp4';
|
|
link.setAttribute('download', `${track.title || 'ai-song'}.${extension}`);
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
window.URL.revokeObjectURL(blobUrl);
|
|
toast.success('Download concluído!', { theme: 'dark' });
|
|
} catch (e) {
|
|
console.error('Download error:', e);
|
|
// Fallback to direct link with /api prefix for browser
|
|
let url = track.audio_url;
|
|
if (url.startsWith('/') && !url.startsWith('/api/') && !url.startsWith('http')) {
|
|
url = `/api${url}`;
|
|
}
|
|
window.open(url, '_blank');
|
|
}
|
|
};
|
|
|
|
const deleteTrack = async (id: string) => {
|
|
if (!confirm('Deseja excluir esta música?')) return;
|
|
try {
|
|
await axios.delete(`/projects/${id}`);
|
|
fetchLibrary();
|
|
if (currentTrack?.id === id) {
|
|
setCurrentTrack(null);
|
|
setIsPlaying(false);
|
|
}
|
|
toast.info('Música removida', { theme: 'dark' });
|
|
} catch (error) {
|
|
toast.error('Erro ao excluir', { theme: 'dark' });
|
|
}
|
|
};
|
|
|
|
const openLyrics = (track: any) => {
|
|
setLyricsToView(track);
|
|
setShowLyricsModal(true);
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col h-[calc(100vh-60px)] bg-[#050505] text-gray-200 overflow-hidden font-sans">
|
|
<Head>
|
|
<title>{getPageTitle('STUDIO AI')}</title>
|
|
</Head>
|
|
<ToastContainer position="top-right" autoClose={3000} />
|
|
|
|
<div className="flex flex-1 overflow-hidden">
|
|
{/* Creation Sidebar */}
|
|
<aside className="w-[400px] bg-[#0A0A0A] border-r border-white/5 flex flex-col overflow-y-auto aside-scrollbars">
|
|
<div className="p-6 space-y-6">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h2 className="text-xl font-black tracking-tighter uppercase italic">Criar Música</h2>
|
|
<div className="flex bg-white/5 rounded-full p-1">
|
|
<button
|
|
onClick={() => setIsCustom(false)}
|
|
className={`px-4 py-1 rounded-full text-[10px] font-black uppercase transition-all ${!isCustom ? 'bg-white text-black' : 'text-gray-500'}`}
|
|
>
|
|
Simples
|
|
</button>
|
|
<button
|
|
onClick={() => setIsCustom(true)}
|
|
className={`px-4 py-1 rounded-full text-[10px] font-black uppercase transition-all ${isCustom ? 'bg-white text-black' : 'text-gray-500'}`}
|
|
>
|
|
Custom
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{isCustom ? (
|
|
<div className="space-y-4">
|
|
<div>
|
|
<div className="flex justify-between items-center mb-2">
|
|
<label className="text-[10px] font-black uppercase text-gray-500 block">Letras da Música</label>
|
|
<button
|
|
onClick={handleGenerateLyrics}
|
|
disabled={isGeneratingLyrics}
|
|
className="text-[10px] font-black uppercase text-[#00E5FF] flex items-center gap-1 hover:underline disabled:opacity-50"
|
|
>
|
|
<BaseIcon path={mdiAutoFix} size={14} className={isGeneratingLyrics ? 'animate-spin' : ''} />
|
|
Gerar Letras
|
|
</button>
|
|
</div>
|
|
<textarea
|
|
value={lyrics}
|
|
onChange={(e) => setLyrics(e.target.value)}
|
|
placeholder="Insira suas letras aqui..."
|
|
className="w-full h-48 bg-white/5 border border-white/10 rounded-2xl p-4 text-sm focus:border-[#00E5FF] outline-none transition-all resize-none"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="text-[10px] font-black uppercase text-gray-500 mb-2 block">Estilo de Música</label>
|
|
<input
|
|
type="text"
|
|
value={style}
|
|
onChange={(e) => setStyle(e.target.value)}
|
|
placeholder="Ex: Pop, Rock, Trap, Jazz, Metal..."
|
|
className="w-full bg-white/5 border border-white/10 rounded-xl p-3 text-sm focus:border-[#00E5FF] outline-none transition-all"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="text-[10px] font-black uppercase text-gray-500 mb-2 block">Título</label>
|
|
<input
|
|
type="text"
|
|
value={title}
|
|
onChange={(e) => setTitle(e.target.value)}
|
|
placeholder="Dê um nome ao seu hit"
|
|
className="w-full bg-white/5 border border-white/10 rounded-xl p-3 text-sm focus:border-[#00E5FF] outline-none transition-all"
|
|
/>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div>
|
|
<label className="text-[10px] font-black uppercase text-gray-500 mb-2 block">Descrição da Música</label>
|
|
<textarea
|
|
value={prompt}
|
|
onChange={(e) => setPrompt(e.target.value)}
|
|
placeholder="Descreva a música... Ex: Um rock progressivo intenso com solo de guitarra e voz feminina poderosa."
|
|
className="w-full h-48 bg-white/5 border border-white/10 rounded-2xl p-4 text-sm focus:border-[#00E5FF] outline-none transition-all resize-none"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex items-center justify-between p-4 bg-white/5 rounded-2xl">
|
|
<span className="text-[10px] font-black uppercase text-gray-400">Instrumental</span>
|
|
<button
|
|
onClick={() => setInstrumental(!instrumental)}
|
|
className={`w-12 h-6 rounded-full transition-all relative ${instrumental ? 'bg-[#00E5FF]' : 'bg-white/10'}`}
|
|
>
|
|
<div className={`absolute top-1 w-4 h-4 bg-white rounded-full transition-all ${instrumental ? 'left-7' : 'left-1'}`} />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-[10px] font-black uppercase text-gray-500 block">Voz</label>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<button onClick={() => setVoiceType('female')} className={`py-2 rounded-xl text-[10px] font-black uppercase border ${voiceType === 'female' ? 'bg-white text-black border-white' : 'bg-white/5 text-gray-500 border-transparent'}`}>Feminina AI</button>
|
|
<button onClick={() => setVoiceType('male')} className={`py-2 rounded-xl text-[10px] font-black uppercase border ${voiceType === 'male' ? 'bg-white text-black border-white' : 'bg-white/5 text-gray-500 border-transparent'}`}>Masculina AI</button>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
onClick={handleGenerate}
|
|
disabled={isGenerating || (!isCustom && !prompt) || (isCustom && (!lyrics || !style))}
|
|
className={`w-full py-6 rounded-2xl font-black uppercase tracking-widest text-lg transition-all flex items-center justify-center gap-3 ${isGenerating ? 'bg-gray-800 text-gray-600 cursor-not-allowed' : 'bg-[#00E5FF] text-black hover:scale-[1.02] active:scale-[0.98]'}`}
|
|
>
|
|
{isGenerating ? (
|
|
<>
|
|
<BaseIcon path={mdiRefresh} size={24} className="animate-spin" />
|
|
Gerando Áudio Real...
|
|
</>
|
|
) : (
|
|
<>
|
|
<BaseIcon path={mdiCreation} size={24} />
|
|
Criar Música
|
|
</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
|
|
{/* Main Content */}
|
|
<main className="flex-1 flex flex-col bg-[#050505] overflow-hidden">
|
|
<header className="h-20 flex items-center px-8 border-b border-white/5 justify-between">
|
|
<div className="flex gap-8">
|
|
<button onClick={() => setActiveTab('explore')} className={`text-sm font-black uppercase tracking-wider transition-all ${activeTab === 'explore' ? 'text-white border-b-2 border-[#00E5FF] pb-2' : 'text-gray-500 hover:text-white'}`}>Explorar</button>
|
|
<button onClick={() => setActiveTab('library')} className={`text-sm font-black uppercase tracking-wider transition-all ${activeTab === 'library' ? 'text-white border-b-2 border-[#00E5FF] pb-2' : 'text-gray-500 hover:text-white'}`}>Minha Biblioteca</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="flex-1 overflow-y-auto p-8 aside-scrollbars">
|
|
{activeTab === 'library' ? (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
|
{loading ? (
|
|
Array(8).fill(0).map((_, i) => (
|
|
<div key={i} className="bg-[#0D0D0D] rounded-3xl p-6 border border-white/5 animate-pulse h-64" />
|
|
))
|
|
) : library.length > 0 ? (
|
|
library.map((track) => (
|
|
<div key={track.id} className="group bg-[#0D0D0D] rounded-3xl p-6 border border-white/5 hover:border-white/10 transition-all relative overflow-hidden">
|
|
<div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-[#00E5FF] to-purple-500 opacity-0 group-hover:opacity-100 transition-all" />
|
|
|
|
<div className="aspect-square bg-gradient-to-br from-[#1A1A1A] to-[#0A0A0A] rounded-2xl mb-4 flex items-center justify-center relative">
|
|
<BaseIcon path={mdiMusic} size={48} className="text-white/10" />
|
|
<button
|
|
onClick={() => playTrack(track)}
|
|
className="absolute inset-0 flex items-center justify-center bg-black/40 opacity-0 group-hover:opacity-100 transition-all"
|
|
>
|
|
<div className="w-16 h-16 rounded-full bg-[#00E5FF] flex items-center justify-center text-black">
|
|
<BaseIcon path={currentTrack?.id === track.id && isPlaying ? mdiPause : mdiPlay} size={32} />
|
|
</div>
|
|
</button>
|
|
<div className="absolute top-2 right-2 flex gap-2 opacity-0 group-hover:opacity-100 transition-all">
|
|
<button onClick={() => openLyrics(track)} className="w-8 h-8 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center backdrop-blur-md">
|
|
<BaseIcon path={mdiTextBoxOutline} size={16} />
|
|
</button>
|
|
<button onClick={() => handleDownload(track)} className="w-8 h-8 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center backdrop-blur-md">
|
|
<BaseIcon path={mdiDownload} size={16} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-between items-start">
|
|
<div className="flex-1 min-w-0">
|
|
<h3 className="font-black text-white text-lg uppercase italic truncate">{track?.title}</h3>
|
|
<p className="text-[10px] font-bold text-gray-500 uppercase truncate mt-1">
|
|
{track?.ai_data?.style || 'AI GEN'} • {track?.key_signature || 'N/A'} • {track?.bpm || '128'} BPM
|
|
</p>
|
|
</div>
|
|
<button onClick={() => deleteTrack(track.id)} className="p-2 hover:bg-white/5 rounded-full text-gray-600 hover:text-red-500 transition-all">
|
|
<BaseIcon path={mdiDelete} size={18} />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="mt-4 flex items-center justify-between text-gray-600">
|
|
<div className="flex gap-4">
|
|
<button className="hover:text-white"><BaseIcon path={mdiHeart} size={18} /></button>
|
|
<button className="hover:text-white"><BaseIcon path={mdiShare} size={18} /></button>
|
|
</div>
|
|
<div className="text-[10px] font-mono">{new Date(track.createdAt).toLocaleDateString()}</div>
|
|
</div>
|
|
</div>
|
|
))
|
|
) : (
|
|
<div className="col-span-full py-20 flex flex-col items-center text-gray-600">
|
|
<BaseIcon path={mdiLibrary} size={64} className="mb-4 opacity-20" />
|
|
<p className="font-black uppercase italic tracking-widest">Sua biblioteca está vazia</p>
|
|
<button onClick={() => setActiveTab('create')} className="mt-4 text-[#00E5FF] text-[10px] font-black uppercase hover:underline">Comece a criar agora</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div className="flex flex-col items-center justify-center h-full text-gray-600 space-y-4">
|
|
<BaseIcon path={mdiEarth} size={64} className="opacity-20" />
|
|
<p className="font-black uppercase italic tracking-widest">Explore hits da comunidade</p>
|
|
<span className="text-[10px] uppercase font-bold px-4 py-1 bg-white/5 rounded-full">Em Breve</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
{/* Global Player */}
|
|
{currentTrack && (
|
|
<div className="h-[120px] bg-[#0A0A0A]/95 border-t border-white/5 flex items-center px-8 z-[200]">
|
|
<div className="flex items-center w-[300px] gap-4">
|
|
<div className="w-16 h-16 rounded-xl bg-gradient-to-br from-[#00E5FF] to-purple-600 flex items-center justify-center flex-shrink-0 relative group">
|
|
<BaseIcon path={mdiMusic} size={32} className="text-white" />
|
|
<button
|
|
onClick={() => openLyrics(currentTrack)}
|
|
className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-all flex items-center justify-center rounded-xl"
|
|
>
|
|
<BaseIcon path={mdiTextBoxOutline} size={20} />
|
|
</button>
|
|
</div>
|
|
<div className="min-w-0">
|
|
<h4 className="text-white font-black text-lg uppercase italic truncate">{currentTrack?.title}</h4>
|
|
<p className="text-[10px] font-bold text-gray-500 uppercase truncate">
|
|
{currentTrack?.ai_data?.mood || 'AI Professional Production'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-1 flex flex-col items-center max-w-2xl mx-auto">
|
|
<div className="flex items-center gap-6 mb-2">
|
|
<button className="text-gray-500 hover:text-white transition-all"><BaseIcon path={mdiSkipPrevious} size={28} /></button>
|
|
<button
|
|
onClick={togglePlayback}
|
|
className="w-12 h-12 rounded-full bg-white flex items-center justify-center text-black hover:scale-110 transition-all"
|
|
>
|
|
<BaseIcon path={isPlaying ? mdiPause : mdiPlay} size={28} />
|
|
</button>
|
|
<button className="text-gray-500 hover:text-white transition-all"><BaseIcon path={mdiSkipNext} size={28} /></button>
|
|
</div>
|
|
<div className="w-full flex items-center gap-3">
|
|
<span className="text-[10px] font-mono text-gray-500 w-10 text-right">{formatTime(currentTime)}</span>
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="100"
|
|
value={progress}
|
|
onChange={handleSeek}
|
|
className="flex-1 h-1 bg-white/10 rounded-full appearance-none cursor-pointer accent-[#00E5FF]"
|
|
/>
|
|
<span className="text-[10px] font-mono text-gray-500 w-10">{formatTime(duration)}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-[300px] flex justify-end items-center gap-4">
|
|
<button
|
|
onClick={() => handleDownload(currentTrack)}
|
|
className="p-2 hover:bg-white/5 rounded-full text-gray-500 hover:text-[#00E5FF] transition-all flex items-center gap-2"
|
|
title="Baixar MP3/MP4"
|
|
>
|
|
<BaseIcon path={mdiDownload} size={20} />
|
|
<span className="text-[10px] font-black uppercase hidden lg:block">Baixar</span>
|
|
</button>
|
|
<div className="flex items-center gap-2">
|
|
<BaseIcon path={volume === 0 ? mdiVolumeMute : volume < 0.5 ? mdiVolumeMedium : mdiVolumeHigh} size={20} className="text-gray-500" />
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="1"
|
|
step="0.01"
|
|
value={volume}
|
|
onChange={(e) => {
|
|
const val = parseFloat(e.target.value);
|
|
setVolume(val);
|
|
if (audioRef.current) audioRef.current.volume = val;
|
|
}}
|
|
className="w-24 h-1 bg-white/10 rounded-full appearance-none cursor-pointer accent-[#00E5FF]"
|
|
/>
|
|
</div>
|
|
<button className="p-2 hover:bg-white/5 rounded-full text-gray-500 hover:text-white">
|
|
<BaseIcon path={mdiDotsVertical} size={20} />
|
|
</button>
|
|
</div>
|
|
<audio ref={audioRef} onTimeUpdate={handleTimeUpdate} className="hidden" />
|
|
</div>
|
|
)}
|
|
|
|
{/* Lyrics Modal */}
|
|
{showLyricsModal && lyricsToView && (
|
|
<div className="fixed inset-0 z-[1000] flex items-center justify-center p-4">
|
|
<div className="absolute inset-0 bg-black/90 backdrop-blur-xl" onClick={() => setShowLyricsModal(false)} />
|
|
<div className="relative bg-[#0D0D0D] border border-white/10 rounded-[40px] w-full max-w-2xl max-h-[80vh] overflow-hidden flex flex-col shadow-2xl">
|
|
<header className="p-8 border-b border-white/5 flex justify-between items-center">
|
|
<div>
|
|
<h2 className="text-2xl font-black uppercase italic text-[#00E5FF]">{lyricsToView.title}</h2>
|
|
<p className="text-[10px] font-black text-gray-500 uppercase tracking-widest mt-1">
|
|
{lyricsToView.ai_data?.style} • {lyricsToView.ai_data?.mood}
|
|
</p>
|
|
</div>
|
|
<button onClick={() => setShowLyricsModal(false)} className="w-12 h-12 rounded-full bg-white/5 flex items-center justify-center hover:bg-white/10 transition-all">
|
|
<BaseIcon path={mdiClose} size={24} />
|
|
</button>
|
|
</header>
|
|
|
|
<div className="flex-1 overflow-y-auto p-8 aside-scrollbars space-y-8">
|
|
{lyricsToView.ai_data?.lyrics ? (
|
|
Object.entries(lyricsToView.ai_data.lyrics).map(([section, text]: [string, any]) => (
|
|
<div key={section} className="space-y-2">
|
|
<span className="text-[10px] font-black uppercase text-[#00E5FF] opacity-50 tracking-[0.2em]">{section}</span>
|
|
<p className="text-lg font-medium leading-relaxed whitespace-pre-wrap">{text}</p>
|
|
</div>
|
|
))
|
|
) : (
|
|
<p className="text-gray-500 italic">Nenhuma letra disponível para esta faixa instrumental.</p>
|
|
)}
|
|
|
|
{lyricsToView.ai_data?.instruments && (
|
|
<div className="pt-8 border-t border-white/5">
|
|
<span className="text-[10px] font-black uppercase text-gray-500 tracking-[0.2em] mb-4 block">Instrumentação AI</span>
|
|
<div className="flex flex-wrap gap-2">
|
|
{lyricsToView.ai_data.instruments.map((inst: string) => (
|
|
<span key={inst} className="px-3 py-1 bg-white/5 rounded-full text-[10px] font-bold uppercase">{inst}</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<footer className="p-8 border-t border-white/5 bg-black/20">
|
|
<button
|
|
onClick={() => {
|
|
playTrack(lyricsToView);
|
|
setShowLyricsModal(false);
|
|
}}
|
|
className="w-full py-4 bg-white text-black rounded-2xl font-black uppercase tracking-widest hover:scale-[1.02] active:scale-[0.98] transition-all"
|
|
>
|
|
Tocar agora
|
|
</button>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<style jsx global>{`
|
|
.aside-scrollbars::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
.aside-scrollbars::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
.aside-scrollbars::-webkit-scrollbar-thumb {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 10px;
|
|
}
|
|
.aside-scrollbars::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
}
|
|
input[type='range']::-webkit-slider-thumb {
|
|
appearance: none;
|
|
width: 12px;
|
|
height: 12px;
|
|
background: #00E5FF;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
SunoStudio.getLayout = function getLayout(page: ReactElement) {
|
|
return <LayoutAuthenticated>{page}</LayoutAuthenticated>;
|
|
};
|
|
|
|
export default SunoStudio; |