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
Binary file not shown.
@@ -7,7 +7,6 @@ import { Navbar } from "./Navbar";
|
|||||||
import { Footer } from "./Footer";
|
import { Footer } from "./Footer";
|
||||||
import { FloatingButtons } from "./FloatingButtons";
|
import { FloatingButtons } from "./FloatingButtons";
|
||||||
import { CookieBanner } from "./CookieBanner";
|
import { CookieBanner } from "./CookieBanner";
|
||||||
import { MusicPlayer } from "./MusicPlayer";
|
|
||||||
|
|
||||||
const BARE_ROUTES = ["/demo-hero", "/admin"];
|
const BARE_ROUTES = ["/demo-hero", "/admin"];
|
||||||
|
|
||||||
@@ -31,7 +30,6 @@ export const AppShell = ({ children }: { children: React.ReactNode }) => {
|
|||||||
{children}
|
{children}
|
||||||
<Footer isNavyBg={isDark} />
|
<Footer isNavyBg={isDark} />
|
||||||
<FloatingButtons isNavyBg={isDark} setIsNavyBg={() => {}} />
|
<FloatingButtons isNavyBg={isDark} setIsNavyBg={() => {}} />
|
||||||
<MusicPlayer />
|
|
||||||
<CookieBanner isNavyBg={isDark} />
|
<CookieBanner isNavyBg={isDark} />
|
||||||
</div>
|
</div>
|
||||||
</ContactProvider>
|
</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 { useEmployees } from "@/app/admin/hr/services/hr.service";
|
||||||
import { getInitials } from "../utils/avatar";
|
import { getInitials } from "../utils/avatar";
|
||||||
import ThemeToggle from "./ThemeToggle";
|
import ThemeToggle from "./ThemeToggle";
|
||||||
import { MusicPlayer } from "@/app/(landing)/components/MusicPlayer";
|
|
||||||
|
|
||||||
export default function Header({ collapsed, onCollapse }: { collapsed: boolean; onCollapse: (v: boolean) => void }) {
|
export default function Header({ collapsed, onCollapse }: { collapsed: boolean; onCollapse: (v: boolean) => void }) {
|
||||||
const router = useRouter();
|
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
|
<Icon icon="ph:arrow-square-out" className="w-4 h-4"/> Ver landing
|
||||||
</a>
|
</a>
|
||||||
<MusicPlayer inline />
|
|
||||||
<ThemeToggle />
|
<ThemeToggle />
|
||||||
|
|
||||||
<button
|
<button
|
||||||
|
|||||||
Reference in new issue
Block a user