Radiquum/radiquum.github.io
1
0
Fork 0
mirror of https://github.com/Radiquum/radiquum.github.io.git synced 2025-09-05 05:55:37 +05:00
Code Issues Projects Releases Packages Wiki Activity

feat: add random timeout before autoplay
Some checks failed
Deploy Next.js site to Pages / build (push) Has been cancelled
Deploy Next.js site to Pages / deploy (push) Has been cancelled

Browse source
This commit is contained in:
Kentai Radiquum 2025-08-06 02:16:15 +05:00
parent c9f0b7ab24
commit 3fb066fb1b
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
1 changed files with 12 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

13
app/components/ProjectLink.tsx
View file

@ -23,6 +23,8 @@ export const ProjectLink = ({
url, url,
preview, preview,
}: ProjectLinkProps) => { }: ProjectLinkProps) => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const [timeoutId, setTimeoutId] = useState<any>(null);
const [shouldUseCarousel] = useState(preview ? preview.length > 1 : false); const [shouldUseCarousel] = useState(preview ? preview.length > 1 : false);
const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true }, [ const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true }, [
Autoplay({ delay: 5000, playOnInit: false }), Autoplay({ delay: 5000, playOnInit: false }),
@ -37,10 +39,19 @@ export const ProjectLink = ({
const autoplay = emblaApi?.plugins()?.autoplay; const autoplay = emblaApi?.plugins()?.autoplay;
if (!autoplay) return; if (!autoplay) return;
if (timeoutId) {
clearTimeout(timeoutId);
}
if (!isInView) { if (!isInView) {
autoplay.stop(); autoplay.stop();
} else { } else {
autoplay.play(); const randTimeout = Math.floor(Math.random() * 2500);
setTimeoutId(
setTimeout(() => {
autoplay.play();
}, randTimeout)
);
} }
}, [shouldUseCarousel, emblaApi, isInView]); }, [shouldUseCarousel, emblaApi, isInView]);