8
This commit is contained in:
Flatlogic Bot
parent
66c1c5f233
commit
5a0edbe51c
@ -33,6 +33,7 @@ import {
|
||||
mdiAlertCircle,
|
||||
mdiTune,
|
||||
mdiVolumeVariantOff,
|
||||
mdiSync,
|
||||
} from '@mdi/js';
|
||||
import BaseIcon from '../components/BaseIcon';
|
||||
import { useAppDispatch } from '../stores/hooks';
|
||||
@ -133,6 +134,7 @@ const ObservationPage = () => {
|
||||
const wetGainRef = useRef<GainNode | null>(null);
|
||||
const monitorGainRef = useRef<GainNode | null>(null);
|
||||
const masterGainRef = useRef<GainNode | null>(null);
|
||||
const heartbeatOscRef = useRef<OscillatorNode | null>(null);
|
||||
|
||||
const [isCameraActive, setIsCameraActive] = useState(false);
|
||||
const [isKaraokeActive, setIsKaraokeActive] = useState(false);
|
||||
@ -143,7 +145,7 @@ const ObservationPage = () => {
|
||||
const [isMonitorOn, setIsMonitorOn] = useState(false);
|
||||
const [reverbLevel, setReverbLevel] = useState(0.5);
|
||||
const [playbackProgress, setPlaybackProgress] = useState(0);
|
||||
const [audioStatus, setAudioStatus] = useState<'IDLE' | 'LOADING' | 'ACTIVE' | 'ERROR'>('IDLE');
|
||||
const [audioStatus, setAudioStatus] = useState<'IDLE' | 'LOADING' | 'ACTIVE' | 'ERROR' | 'SYNCING'>('IDLE');
|
||||
const [volumeLevel, setVolumeLevel] = useState(1.0);
|
||||
const [audioErrorMsg, setAudioErrorMsg] = useState('');
|
||||
|
||||
@ -166,6 +168,7 @@ const ObservationPage = () => {
|
||||
const [customAudioMap, setCustomAudioMap] = useState<Record<string, string>>({});
|
||||
const [songToUpload, setSongToUpload] = useState<any>(null);
|
||||
const [editingSongId, setEditingSongId] = useState<string | null>(null);
|
||||
const [syncProgress, setSyncProgress] = useState(0);
|
||||
|
||||
const imageCache = useRef<Map<string, HTMLImageElement>>(new Map());
|
||||
|
||||
@ -174,20 +177,68 @@ const ObservationPage = () => {
|
||||
return [...userSongs, ...INITIAL_SONG_DATABASE];
|
||||
}, [userSongs]);
|
||||
|
||||
// Global Audio Enabler
|
||||
// Global Audio Master Unlock Engine
|
||||
// This ensures that ANY interaction with the screen resumes the audio engine
|
||||
useEffect(() => {
|
||||
const handleInteraction = () => {
|
||||
if (audioCtxRef.current?.state === 'suspended') {
|
||||
audioCtxRef.current.resume().catch(console.error);
|
||||
const unlockAudio = async () => {
|
||||
if (!audioCtxRef.current) {
|
||||
audioCtxRef.current = new (window.AudioContext || (window as any).webkitAudioContext)();
|
||||
}
|
||||
|
||||
if (audioCtxRef.current.state === 'suspended') {
|
||||
try {
|
||||
await audioCtxRef.current.resume();
|
||||
|
||||
// HEARTBEAT: Constant silent oscillator to keep the context alive
|
||||
if (!heartbeatOscRef.current) {
|
||||
const osc = audioCtxRef.current.createOscillator();
|
||||
const gain = audioCtxRef.current.createGain();
|
||||
gain.gain.value = 0.00001; // Inaudible
|
||||
osc.connect(gain);
|
||||
gain.connect(audioCtxRef.current.destination);
|
||||
osc.start();
|
||||
heartbeatOscRef.current = osc;
|
||||
}
|
||||
|
||||
// Inject a silent buffer to "prime" the browser's audio engine
|
||||
const buffer = audioCtxRef.current.createBuffer(1, 1, 22050);
|
||||
const source = audioCtxRef.current.createBufferSource();
|
||||
source.buffer = buffer;
|
||||
source.connect(audioCtxRef.current.destination);
|
||||
source.start(0);
|
||||
} catch (err) {
|
||||
// Silent catch to avoid console noise on failed gestures
|
||||
}
|
||||
}
|
||||
|
||||
// Proactive HTML5 element unlock
|
||||
if (karaokeAudioRef.current && karaokeAudioRef.current.paused && isKaraokeActive && !isPaused) {
|
||||
karaokeAudioRef.current.play().catch(() => { /* Silent */ });
|
||||
}
|
||||
if (crowdAudioRef.current && crowdAudioRef.current.paused && isSimActive) {
|
||||
crowdAudioRef.current.play().catch(() => { /* Silent */ });
|
||||
}
|
||||
};
|
||||
window.addEventListener('click', handleInteraction);
|
||||
window.addEventListener('touchstart', handleInteraction);
|
||||
|
||||
const interactions = ['click', 'touchstart', 'mousedown', 'keydown', 'pointerdown'];
|
||||
interactions.forEach(event => window.addEventListener(event, unlockAudio, { passive: true, capture: true }));
|
||||
|
||||
// Auto-monitor state and visibility change handling
|
||||
const handleVisibility = () => { if (document.visibilityState === 'visible') unlockAudio(); };
|
||||
window.addEventListener('visibilitychange', handleVisibility);
|
||||
|
||||
const interval = setInterval(() => {
|
||||
if (audioCtxRef.current?.state === 'suspended' && (isKaraokeActive || isCameraActive)) {
|
||||
unlockAudio();
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('click', handleInteraction);
|
||||
window.removeEventListener('touchstart', handleInteraction);
|
||||
interactions.forEach(event => window.removeEventListener(event, unlockAudio));
|
||||
window.removeEventListener('visibilitychange', handleVisibility);
|
||||
clearInterval(interval);
|
||||
};
|
||||
}, []);
|
||||
}, [isKaraokeActive, isPaused, isSimActive, isCameraActive]);
|
||||
|
||||
// Persistent karaoke audio setup
|
||||
useEffect(() => {
|
||||
@ -213,13 +264,13 @@ const ObservationPage = () => {
|
||||
];
|
||||
const index = Math.floor(audio.currentTime / 5) % texts.length;
|
||||
setCurrentLyrics(texts[index]);
|
||||
setAudioStatus('ACTIVE');
|
||||
if (audioStatus !== 'SYNCING') setAudioStatus('ACTIVE');
|
||||
}
|
||||
};
|
||||
|
||||
audio.addEventListener('timeupdate', updateLyrics);
|
||||
audio.addEventListener('play', () => { setAudioStatus('ACTIVE'); setAudioErrorMsg(''); });
|
||||
audio.addEventListener('waiting', () => setAudioStatus('LOADING'));
|
||||
audio.addEventListener('play', () => { if (audioStatus !== 'SYNCING') setAudioStatus('ACTIVE'); setAudioErrorMsg(''); });
|
||||
audio.addEventListener('waiting', () => { if (audioStatus !== 'SYNCING') setAudioStatus('LOADING'); });
|
||||
audio.addEventListener('error', (e) => {
|
||||
console.error("Audio Element Error:", audio.error);
|
||||
setAudioStatus('ERROR');
|
||||
@ -305,6 +356,46 @@ const ObservationPage = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const syncAll = async () => {
|
||||
setAudioStatus('SYNCING');
|
||||
setSyncProgress(0);
|
||||
setCurrentLyrics("SINCRONIZANDO COM O NAVEGADOR...");
|
||||
|
||||
try {
|
||||
if (!audioCtxRef.current) await initAudioContext();
|
||||
if (audioCtxRef.current) await audioCtxRef.current.resume();
|
||||
|
||||
const localIds = Object.keys(customAudioMap);
|
||||
for (let i = 0; i < localIds.length; i++) {
|
||||
const id = localIds[i];
|
||||
const url = customAudioMap[id];
|
||||
const temp = new Audio();
|
||||
temp.muted = true;
|
||||
temp.src = url;
|
||||
await new Promise((resolve) => {
|
||||
temp.oncanplaythrough = resolve;
|
||||
temp.onerror = resolve;
|
||||
temp.load();
|
||||
setTimeout(resolve, 300);
|
||||
});
|
||||
setSyncProgress(((i + 1) / (localIds.length || 1)) * 100);
|
||||
}
|
||||
|
||||
if (karaokeAudioRef.current) {
|
||||
karaokeAudioRef.current.muted = false;
|
||||
karaokeAudioRef.current.volume = 1.0;
|
||||
}
|
||||
|
||||
setAudioStatus('IDLE');
|
||||
setCurrentLyrics("SISTEMA SINCRONIZADO E ATIVO!");
|
||||
setTimeout(() => setCurrentLyrics(""), 2000);
|
||||
} catch (err) {
|
||||
console.error("Sync Error:", err);
|
||||
setAudioStatus('ERROR');
|
||||
setAudioErrorMsg("FALHA NA SINCRONIZAÇÃO GLOBAL");
|
||||
}
|
||||
};
|
||||
|
||||
const startCamera = async () => {
|
||||
try {
|
||||
const stream = await navigator.mediaDevices.getUserMedia({
|
||||
@ -317,6 +408,7 @@ const ObservationPage = () => {
|
||||
}
|
||||
|
||||
await initAudioContext(stream);
|
||||
await syncAll();
|
||||
} catch (err) {
|
||||
console.error("Access denied:", err);
|
||||
alert("Por favor, permita o acesso à câmera e microfone para iniciar o show.");
|
||||
@ -345,12 +437,14 @@ const ObservationPage = () => {
|
||||
const audio = karaokeAudioRef.current;
|
||||
if (!audio) return;
|
||||
|
||||
// IMMEDIATE: Ensure context is resumed synchronously in the event handler stack
|
||||
if (!audioCtxRef.current) {
|
||||
await initAudioContext();
|
||||
audioCtxRef.current = new (window.AudioContext || (window as any).webkitAudioContext)();
|
||||
}
|
||||
|
||||
if (audioCtxRef.current?.state === 'suspended') {
|
||||
await audioCtxRef.current.resume();
|
||||
audioCtxRef.current.resume().catch(() => {
|
||||
// Silent recovery as per Nuclear engine mandate
|
||||
});
|
||||
}
|
||||
|
||||
setIsKaraokeActive(true);
|
||||
@ -367,10 +461,7 @@ const ObservationPage = () => {
|
||||
audio.muted = false;
|
||||
audio.volume = 1.0;
|
||||
|
||||
// Prioritize user blob URL for this specific song ID
|
||||
const targetUrl = customAudioMap[song.id] || song.url;
|
||||
|
||||
// CRITICAL: Handle CORS for Cloud vs Blob URLs
|
||||
if (targetUrl.startsWith('blob:')) {
|
||||
audio.removeAttribute('crossorigin');
|
||||
} else {
|
||||
@ -380,18 +471,20 @@ const ObservationPage = () => {
|
||||
audio.src = targetUrl;
|
||||
audio.load();
|
||||
|
||||
setTimeout(async () => {
|
||||
try {
|
||||
await audio.play();
|
||||
// NO TIMEOUT: Call play() immediately to preserve user gesture chain
|
||||
try {
|
||||
const playPromise = audio.play();
|
||||
if (playPromise !== undefined) {
|
||||
await playPromise;
|
||||
setAudioStatus('ACTIVE');
|
||||
} catch (err) {
|
||||
console.error("Playback error:", err);
|
||||
setCurrentLyrics("ERRO NO ÁUDIO - CLIQUE NO ÍCONE DE TUNE");
|
||||
setAudioStatus('ERROR');
|
||||
setAudioErrorMsg('O navegador bloqueou o áudio. Clique em "ATIVAR ÁUDIO" ou interaja com a página.');
|
||||
setIsPaused(true);
|
||||
}
|
||||
}, 200);
|
||||
} catch (err) {
|
||||
console.error("Playback error:", err);
|
||||
setCurrentLyrics("ERRO NO ÁUDIO - ATIVE NO BOTÃO ABAIXO");
|
||||
setAudioStatus('ERROR');
|
||||
setAudioErrorMsg('Bloqueio do Navegador. Clique em "REINICIAR ÁUDIO".');
|
||||
setIsPaused(true);
|
||||
}
|
||||
};
|
||||
|
||||
const togglePlayback = () => {
|
||||
@ -432,13 +525,9 @@ const ObservationPage = () => {
|
||||
return { ...prev, [songToUpload.id]: url };
|
||||
});
|
||||
|
||||
// Immediate switch if playing
|
||||
if (currentSong?.id === songToUpload.id && karaokeAudioRef.current) {
|
||||
const wasPaused = karaokeAudioRef.current.paused;
|
||||
|
||||
// CRITICAL: Update CORS mode for the new blob URL
|
||||
karaokeAudioRef.current.removeAttribute('crossorigin');
|
||||
|
||||
karaokeAudioRef.current.src = url;
|
||||
karaokeAudioRef.current.load();
|
||||
if (!wasPaused) karaokeAudioRef.current.play().catch(e => console.error(e));
|
||||
@ -457,7 +546,6 @@ const ObservationPage = () => {
|
||||
delete newMap[songId];
|
||||
return newMap;
|
||||
});
|
||||
// Restore if playing
|
||||
if (currentSong?.id === songId && karaokeAudioRef.current) {
|
||||
const original = INITIAL_SONG_DATABASE.find(s => s.id === songId);
|
||||
if (original) {
|
||||
@ -533,14 +621,14 @@ const ObservationPage = () => {
|
||||
}
|
||||
}
|
||||
|
||||
if (isKaraokeActive && currentSong) {
|
||||
if ((isKaraokeActive && currentSong) || audioStatus === 'SYNCING') {
|
||||
ctx.save();
|
||||
ctx.fillStyle = 'rgba(0,0,0,0.85)';
|
||||
ctx.fillRect(canvas.width/2 - 500, canvas.height - 250, 1000, 180);
|
||||
ctx.strokeStyle = audioStatus === 'ERROR' ? '#FF0000' : '#E3B341'; ctx.lineWidth = 4;
|
||||
ctx.strokeStyle = audioStatus === 'ERROR' ? '#FF0000' : audioStatus === 'SYNCING' ? '#00F2FF' : '#E3B341'; ctx.lineWidth = 4;
|
||||
ctx.strokeRect(canvas.width/2 - 500, canvas.height - 250, 1000, 180);
|
||||
ctx.fillStyle = '#E3B341'; ctx.font = 'bold 20px monospace'; ctx.textAlign = 'center';
|
||||
ctx.fillText(`🎤 ${currentSong.title.toUpperCase()} - ${currentSong.artist.toUpperCase()} (${currentSong.genre})`, canvas.width/2, canvas.height - 210);
|
||||
ctx.fillStyle = audioStatus === 'SYNCING' ? '#00F2FF' : '#E3B341'; ctx.font = 'bold 20px monospace'; ctx.textAlign = 'center';
|
||||
ctx.fillText(audioStatus === 'SYNCING' ? "🔄 ATIVANDO TODOS OS ÁUDIOS DO DISPOSITIVO" : `🎤 ${currentSong?.title?.toUpperCase()} - ${currentSong?.artist?.toUpperCase()} (${currentSong?.genre})`, canvas.width/2, canvas.height - 210);
|
||||
|
||||
if (audioStatus === 'ERROR') {
|
||||
ctx.fillStyle = '#FF5555'; ctx.font = 'bold 32px sans-serif';
|
||||
@ -551,7 +639,8 @@ const ObservationPage = () => {
|
||||
}
|
||||
|
||||
ctx.fillStyle = 'rgba(255,255,255,0.1)'; ctx.fillRect(canvas.width/2 - 400, canvas.height - 100, 800, 10);
|
||||
ctx.fillStyle = audioStatus === 'ACTIVE' ? '#E3B341' : '#666666'; ctx.fillRect(canvas.width/2 - 400, canvas.height - 100, (playbackProgress / (karaokeAudioRef.current?.duration || 1)) * 800, 10);
|
||||
const progress = audioStatus === 'SYNCING' ? syncProgress / 100 : (playbackProgress / (karaokeAudioRef.current?.duration || 1));
|
||||
ctx.fillStyle = audioStatus === 'SYNCING' ? '#00F2FF' : audioStatus === 'ACTIVE' ? '#E3B341' : '#666666'; ctx.fillRect(canvas.width/2 - 400, canvas.height - 100, progress * 800, 10);
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
@ -563,7 +652,7 @@ const ObservationPage = () => {
|
||||
};
|
||||
render();
|
||||
return () => cancelAnimationFrame(animationFrame);
|
||||
}, [isCameraActive, isSimActive, activeViewers, featuredViewer, isKaraokeActive, currentLyrics, currentSong, getCachedImage, audienceCount, playbackProgress, audioStatus, audioErrorMsg]);
|
||||
}, [isCameraActive, isSimActive, activeViewers, featuredViewer, isKaraokeActive, currentLyrics, currentSong, getCachedImage, audienceCount, playbackProgress, audioStatus, audioErrorMsg, syncProgress]);
|
||||
|
||||
useEffect(() => {
|
||||
let interval: any;
|
||||
@ -595,7 +684,6 @@ const ObservationPage = () => {
|
||||
<div className="relative h-screen w-full bg-[#1a1a1a] overflow-hidden flex flex-col font-sans">
|
||||
<Head><title>KARAOKE GLOBAL 10K+ | AO VIVO</title></Head>
|
||||
|
||||
{/* Hidden File Input for Custom Audio */}
|
||||
<input type="file" ref={fileInputRef} onChange={handleFileChange} accept="audio/*" className="hidden" />
|
||||
|
||||
<div className="absolute inset-0 z-0 bg-black overflow-hidden">
|
||||
@ -609,7 +697,7 @@ const ObservationPage = () => {
|
||||
<br /><span className="text-xl font-light tracking-widest text-white/60">BRASIL & MUNDO</span>
|
||||
</h1>
|
||||
<p className="text-white/80 font-bold uppercase tracking-widest max-w-lg text-center text-xs">
|
||||
OS AUDIOS ESTÃO ATIVOS - CONFIGURE CADA MÚSICA COM SEU ÁUDIO LOCAL OU USE NOSSA BIBLIOTECA CLOUD
|
||||
NUCLEAR AUDIO ENGINE ACTIVE - SINCRONIZAÇÃO TOTAL COM O NAVEGADOR
|
||||
</p>
|
||||
<button onClick={startCamera} className="bg-[#E3B341] text-black px-16 py-6 rounded-full font-black text-2xl uppercase tracking-tighter hover:scale-110 transition-all shadow-2xl">Entrar no Palco</button>
|
||||
</div>
|
||||
@ -655,7 +743,7 @@ const ObservationPage = () => {
|
||||
<span className="text-[#E3B341] text-lg font-black uppercase tracking-widest">{currentSong.title} - {currentSong.artist}</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className={`w-3 h-3 rounded-full animate-pulse ${audioStatus === 'ACTIVE' ? 'bg-green-500' : audioStatus === 'LOADING' ? 'bg-yellow-500' : 'bg-red-500'}`}></div>
|
||||
<div className={`w-3 h-3 rounded-full animate-pulse ${audioStatus === 'ACTIVE' ? 'bg-green-500' : audioStatus === 'LOADING' ? 'bg-yellow-500' : audioStatus === 'SYNCING' ? 'bg-blue-500' : 'bg-red-500'}`}></div>
|
||||
<span className="text-[10px] text-white/60 font-black uppercase">{audioStatus}</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -721,19 +809,11 @@ const ObservationPage = () => {
|
||||
<input type="range" min="0" max="1" step="0.1" value={volumeLevel} onChange={(e) => setVolumeLevel(parseFloat(e.target.value))} className="w-full h-1 bg-white/10 accent-[#00F2FF] rounded-lg appearance-none cursor-pointer" />
|
||||
</div>
|
||||
<div className="flex flex-col items-center">
|
||||
<button onClick={async () => {
|
||||
if(!audioCtxRef.current) await initAudioContext();
|
||||
if(audioCtxRef.current) await audioCtxRef.current.resume();
|
||||
if(karaokeAudioRef.current) {
|
||||
karaokeAudioRef.current.muted = false;
|
||||
karaokeAudioRef.current.volume = 1.0;
|
||||
if (isKaraokeActive && !isPaused) karaokeAudioRef.current.play().catch(console.error);
|
||||
}
|
||||
}} className={`p-4 rounded-full transition-all ${audioStatus === 'ERROR' ? 'bg-red-600 animate-pulse text-white' : 'bg-white/5 text-[#E3B341] hover:bg-white/10'}`}>
|
||||
<BaseIcon path={audioStatus === 'ERROR' ? mdiVolumeVariantOff : mdiTune} size={32} />
|
||||
<button onClick={syncAll} className={`p-4 rounded-full transition-all ${audioStatus === 'SYNCING' ? 'bg-[#00F2FF] animate-spin text-black' : audioStatus === 'ERROR' ? 'bg-red-600 animate-pulse text-white' : 'bg-white/5 text-[#E3B341] hover:bg-white/10'}`}>
|
||||
<BaseIcon path={audioStatus === 'SYNCING' ? mdiSync : audioStatus === 'ERROR' ? mdiVolumeVariantOff : mdiTune} size={32} />
|
||||
</button>
|
||||
<span className={`text-[10px] font-black mt-2 text-center uppercase ${audioStatus === 'ERROR' ? 'text-red-500' : 'text-white'}`}>
|
||||
{audioStatus === 'ERROR' ? 'Reativar' : 'Ativar'}<br/>Audio
|
||||
REATIVAR<br/>ÁUDIO
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -771,7 +851,7 @@ const ObservationPage = () => {
|
||||
<h3 className="text-[#E3B341] font-black text-2xl italic uppercase tracking-tighter">Estúdio 10.000+</h3>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className={`w-2 h-2 rounded-full ${audioCtxRef.current?.state === 'running' ? 'bg-green-500' : 'bg-red-500'}`}></div>
|
||||
<p className="text-[10px] text-white/40 font-bold uppercase tracking-widest">SISTEMA DE ÁUDIO: {audioCtxRef.current?.state}</p>
|
||||
<p className="text-[10px] text-white/40 font-bold uppercase tracking-widest">NAVIGATOR SYNC: {audioCtxRef.current?.state === 'running' ? 'ATIVO' : 'AGUARDANDO'}</p>
|
||||
</div>
|
||||
</div>
|
||||
<button onClick={() => setShowPlaylist(false)} className="bg-white/5 p-2 rounded-full text-white/40 hover:text-white transition-all"><BaseIcon path={mdiClose} size={28} /></button>
|
||||
@ -800,7 +880,7 @@ const ObservationPage = () => {
|
||||
}}>
|
||||
<BaseIcon path={mdiUpload} size={40} className="text-[#E3B341] mx-auto mb-3" />
|
||||
<h4 className="text-white font-black uppercase text-sm italic tracking-widest">Adicionar Nova Música do Dispositivo</h4>
|
||||
<p className="text-[9px] text-white/40 font-bold mt-1">CARREGUE SEUS PRÓPRIOS PLAYBACKS MP3/WAV</p>
|
||||
<p className="text-[9px] text-white/40 font-bold mt-1">SINCROZINA AUTOMATICAMENTE APÓS O CARREGAMENTO</p>
|
||||
</div>
|
||||
|
||||
{filteredSongs.length > 0 ? filteredSongs.map(song => (
|
||||
@ -808,7 +888,7 @@ const ObservationPage = () => {
|
||||
<div className={`w-full flex items-center justify-between p-4 rounded-2xl border-2 transition-all group cursor-pointer ${currentSong?.id === song.id ? 'bg-[#E3B341] border-[#E3B341] text-black' : 'bg-white/5 border-white/10 text-white hover:border-[#E3B341] hover:bg-white/10'}`} onClick={() => selectSong(song)}>
|
||||
<div className="flex flex-col items-start overflow-hidden flex-grow">
|
||||
<span className="font-black text-lg truncate w-full italic leading-tight flex items-center space-x-2">
|
||||
{customAudioMap[song.id] && <BaseIcon path={mdiCheckCircle} size={16} className="text-green-500" />}
|
||||
{customAudioMap[song.id] && <BaseIcon path={mdiCheckCircle} size={16} className="text-green-500 animate-pulse" />}
|
||||
<span>{song.title}</span>
|
||||
</span>
|
||||
<div className="flex items-center space-x-2 mt-1">
|
||||
@ -870,11 +950,10 @@ const ObservationPage = () => {
|
||||
<span className="text-[#E3B341] text-xs font-black">PLAYBACKS: {fullSongDatabase.length} DISPONÍVEIS</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
{Object.keys(customAudioMap).length > 0 && (
|
||||
<span className="text-[10px] font-black text-green-500 bg-green-500/10 px-3 py-1 rounded-full border border-green-500/20">
|
||||
{Object.keys(customAudioMap).length} ÁUDIOS PERSONALIZADOS
|
||||
</span>
|
||||
)}
|
||||
<button onClick={syncAll} className="flex items-center space-x-2 bg-[#E3B341]/10 text-[#E3B341] px-4 py-2 rounded-full border border-[#E3B341]/20 hover:bg-[#E3B341]/20 transition-all">
|
||||
<BaseIcon path={mdiSync} size={16} className={audioStatus === 'SYNCING' ? 'animate-spin' : ''} />
|
||||
<span className="text-[10px] font-black uppercase">SINCRONIZAR TUDO</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user