fix: quitar el reproductor de música de fondo
El audio (7.4MB, preload="auto") competía por ancho de banda con el resto de los recursos en móvil y hacía sentir el sitio trabado/lento. Co-Authored-By: Claude Sonnet 5 <[email protected]>
This commit is contained in:
1 parent
c8f89a7907
commit
e60871ec7f
4 files changed
-97
No files matched your search
@@ -7,7 +7,6 @@ import { Navbar } from "./Navbar";
|
||||
import { Footer } from "./Footer";
|
||||
import { FloatingButtons } from "./FloatingButtons";
|
||||
import { CookieBanner } from "./CookieBanner";
|
||||
import { MusicPlayer } from "./MusicPlayer";
|
||||
|
||||
const BARE_ROUTES = ["/demo-hero", "/admin"];
|
||||
|
||||
@@ -31,7 +30,6 @@ export const AppShell = ({ children }: { children: React.ReactNode }) => {
|
||||
{children}
|
||||
<Footer isNavyBg={isDark} />
|
||||
<FloatingButtons isNavyBg={isDark} setIsNavyBg={() => {}} />
|
||||
<MusicPlayer />
|
||||
<CookieBanner isNavyBg={isDark} />
|
||||
</div>
|
||||
</ContactProvider>
|
||||
|
||||
@@ -1,93 +0,0 @@
|
||||
"use client";
|
||||
import { Icon } from "@iconify/react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
|
||||
const TRACK_SRC = "/audio/musica.mp3";
|
||||
const PREF_KEY = "rynext_music_enabled";
|
||||
|
||||
export const MusicPlayer = ({
|
||||
className = "bottom-6 left-6",
|
||||
inline = false,
|
||||
}: {
|
||||
className?: string;
|
||||
inline?: boolean;
|
||||
}) => {
|
||||
const audioRef = useRef<HTMLAudioElement>(null);
|
||||
const [playing, setPlaying] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const audio = audioRef.current;
|
||||
if (!audio) return;
|
||||
|
||||
audio.volume = 0.05;
|
||||
|
||||
// Respeta la última preferencia del usuario (guardada en localStorage):
|
||||
// si la silenció, no la reinicia sola al recargar la página.
|
||||
let muted = false;
|
||||
try {
|
||||
muted = localStorage.getItem(PREF_KEY) === "off";
|
||||
} catch {}
|
||||
if (muted) return;
|
||||
|
||||
// Si el navegador bloquea el autoplay, no la arrancamos con cualquier
|
||||
// interacción (scroll, tecla, etc.) — solo el botón de reproducir debe
|
||||
// encenderla, para que no "se mueva sola" al navegar la página.
|
||||
audio.play().then(() => setPlaying(true)).catch(() => {});
|
||||
}, []);
|
||||
|
||||
function toggle() {
|
||||
const audio = audioRef.current;
|
||||
if (!audio) return;
|
||||
if (playing) {
|
||||
audio.pause();
|
||||
setPlaying(false);
|
||||
try { localStorage.setItem(PREF_KEY, "off"); } catch {}
|
||||
} else {
|
||||
audio
|
||||
.play()
|
||||
.then(() => {
|
||||
setPlaying(true);
|
||||
try { localStorage.setItem(PREF_KEY, "on"); } catch {}
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<audio ref={audioRef} src={TRACK_SRC} loop preload="auto" />
|
||||
{inline ? (
|
||||
<button
|
||||
onClick={toggle}
|
||||
aria-label={playing ? "Silenciar música" : "Reproducir música"}
|
||||
aria-pressed={playing}
|
||||
className="flex items-center justify-center w-8 h-8 rounded-lg text-muted-foreground hover:bg-muted hover:text-foreground transition-colors shrink-0"
|
||||
>
|
||||
<Icon
|
||||
icon={playing ? "ph:speaker-high-fill" : "ph:speaker-slash-fill"}
|
||||
width={16}
|
||||
/>
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={toggle}
|
||||
aria-label={playing ? "Silenciar música" : "Reproducir música"}
|
||||
aria-pressed={playing}
|
||||
className={`fixed ${className} z-50 flex h-12 w-12 items-center justify-center rounded-full shadow-lg transition-transform hover:scale-110 active:scale-95`}
|
||||
style={{
|
||||
background: "color-mix(in srgb, var(--card) 85%, transparent)",
|
||||
border: "1px solid var(--border)",
|
||||
backdropFilter: "blur(8px)",
|
||||
cursor: "pointer",
|
||||
color: "#3b82f6",
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
icon={playing ? "ph:speaker-high-fill" : "ph:speaker-slash-fill"}
|
||||
width={18}
|
||||
/>
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -7,7 +7,6 @@ import { useAuthStore } from "../store/authStore";
|
||||
import { useEmployees } from "@/app/admin/hr/services/hr.service";
|
||||
import { getInitials } from "../utils/avatar";
|
||||
import ThemeToggle from "./ThemeToggle";
|
||||
import { MusicPlayer } from "@/app/(landing)/components/MusicPlayer";
|
||||
|
||||
export default function Header({ collapsed, onCollapse }: { collapsed: boolean; onCollapse: (v: boolean) => void }) {
|
||||
const router = useRouter();
|
||||
@@ -76,7 +75,6 @@ export default function Header({ collapsed, onCollapse }: { collapsed: boolean;
|
||||
>
|
||||
<Icon icon="ph:arrow-square-out" className="w-4 h-4"/> Ver landing
|
||||
</a>
|
||||
<MusicPlayer inline />
|
||||
<ThemeToggle />
|
||||
|
||||
<button
|
||||
|
||||
Reference in new issue
Block a user