adds windowResize event listener

This commit is contained in:
Sudev Kiyada 2025-12-04 09:05:23 +05:30
parent 4089964fea
commit bdfff3b643
Failed to extract signature
2 changed files with 42 additions and 0 deletions

View file

@ -11,6 +11,7 @@
isReverseMode,
createRenderConfig,
isNullish,
debounce,
} from './ts/utils';
import { Tween } from 'svelte/motion';
@ -116,6 +117,24 @@
}
}
function handleWindowResize() {
let resizing = false;
let timer = undefined;
if (!resizing && lottiePlayer?.isLoaded && lottiePlayer.isPlaying) {
lottiePlayer?.pause();
resizing = true;
}
clearTimeout(timer);
timer = setTimeout(() => {
resizing = false;
if (lottiePlayer?.isLoaded && lottiePlayer.isPaused) {
lottiePlayer?.play();
}
}, 1000);
}
onMount(() => {
const shouldAutoplay = autoplay && !playOnHover;
@ -144,6 +163,7 @@
lottiePlayer.addEventListener('load', onLoadEvent);
lottiePlayer.addEventListener('frame', onRenderEvent);
lottiePlayer.addEventListener('complete', onCompleteEvent);
window.addEventListener('resize', handleWindowResize);
if (dotLottieRefCallback) {
dotLottieRefCallback(lottiePlayer);
@ -160,6 +180,7 @@
lottiePlayer.removeEventListener('load', onLoad);
lottiePlayer.destroy();
}
window.removeEventListener('resize', handleWindowResize);
});
// Handles progress change

View file

@ -109,3 +109,24 @@ export function createRenderConfig() {
export function isNullish(value: any): boolean {
return value === null || value === undefined || value === '';
}
/**
* Returns a debounced version of the given function.
* @template T
* @param {T} func - The function to debounce.
* @param {number} [delay=0] - The debounce delay in milliseconds.
* @returns {(...args: Parameters<T>) => void} The debounced function.
*/
export function debounce<T extends (...args: unknown[]) => void>(
func: T,
delay = 0
) {
let timeoutId: ReturnType<typeof setTimeout> | undefined;
return (...args: Parameters<T>) => {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
func(...args);
}, delay);
};
}