55 lines
1.3 KiB
TypeScript
55 lines
1.3 KiB
TypeScript
import { useRef, useEffect, useCallback, useState } from "react";
|
|
|
|
export function useTagEffects<T extends HTMLElement = HTMLButtonElement>() {
|
|
const audioRef = useRef<HTMLAudioElement | null>(null);
|
|
const [shouldShow, setShouldShow] = useState(true);
|
|
|
|
useEffect(() => {
|
|
audioRef.current = new Audio("/audio/click.mp3");
|
|
audioRef.current.volume = 0.75;
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (window.self !== window.top) {
|
|
try {
|
|
const parentHostname = window.top?.location.hostname;
|
|
if (parentHostname?.includes('webild.io')) {
|
|
setShouldShow(false);
|
|
}
|
|
} catch {
|
|
setShouldShow(true);
|
|
}
|
|
}
|
|
}, []);
|
|
|
|
const playSound = useCallback(() => {
|
|
if (audioRef.current) {
|
|
audioRef.current.currentTime = 0;
|
|
audioRef.current.play().catch(() => {});
|
|
}
|
|
}, []);
|
|
|
|
const handleMouseEnter = useCallback(() => {
|
|
if (window.innerWidth > 768) {
|
|
playSound();
|
|
}
|
|
}, [playSound]);
|
|
|
|
const handleClick = useCallback(
|
|
(e: React.MouseEvent<T>, onClick?: (e: React.MouseEvent<T>) => void) => {
|
|
playSound();
|
|
if (onClick) {
|
|
onClick(e);
|
|
}
|
|
},
|
|
[playSound]
|
|
);
|
|
|
|
return {
|
|
shouldShow,
|
|
handleMouseEnter,
|
|
handleClick,
|
|
buttonClassName: "transition-all duration-200 hover:-translate-y-[3px]",
|
|
};
|
|
}
|