diff --git a/packages/react-player/src/hooks/use-dotlottie-player.ts b/packages/react-player/src/hooks/use-dotlottie-player.ts index b669e254..5a7f2e7e 100644 --- a/packages/react-player/src/hooks/use-dotlottie-player.ts +++ b/packages/react-player/src/hooks/use-dotlottie-player.ts @@ -78,7 +78,7 @@ export const useDotLottiePlayer = ( config?: DotLottieConfig & { lottieRef?: MutableRefObject; }, -): { dotLottiePlayer: DotLottiePlayer; setDotLottiePlayer: (player: DotLottiePlayer) => void } => { +): { dotLottiePlayer: DotLottiePlayer; initDotLottiePlayer: () => void } => { const [dotLottiePlayer, setDotLottiePlayer] = useState(() => { return new DotLottiePlayer(src, container.current, config); }); @@ -89,7 +89,11 @@ export const useDotLottiePlayer = ( dl.load(); return dl; - }, [container]); + }, [container, src, config]); + + const initDotLottiePlayer = useCallback(() => { + setDotLottiePlayer(getDotLottiePlayer()); + }, [getDotLottiePlayer]); if (config?.lottieRef) { useImperativeHandle( @@ -227,7 +231,7 @@ export const useDotLottiePlayer = ( } useEffectOnce(() => { - setDotLottiePlayer(getDotLottiePlayer()); + initDotLottiePlayer(); return () => { dotLottiePlayer.destroy(); @@ -236,6 +240,6 @@ export const useDotLottiePlayer = ( return { dotLottiePlayer, - setDotLottiePlayer, + initDotLottiePlayer, }; }; diff --git a/packages/react-player/src/react-player.tsx b/packages/react-player/src/react-player.tsx index cb198f30..d53c83d4 100644 --- a/packages/react-player/src/react-player.tsx +++ b/packages/react-player/src/react-player.tsx @@ -3,7 +3,7 @@ */ import type { RendererSettings, PlayMode } from '@dotlottie/common'; -import { DotLottiePlayer as DotLottiePlayerCommon, PlayerState, PlayerEvents } from '@dotlottie/common'; +import { PlayerState, PlayerEvents } from '@dotlottie/common'; import React, { useEffect, useRef } from 'react'; import type { MutableRefObject } from 'react'; import { useUpdateEffect } from 'react-use'; @@ -59,7 +59,8 @@ export const DotLottiePlayer: React.FC = ({ ...props }) => { const container = useRef(null); - const config = { + + const { dotLottiePlayer, initDotLottiePlayer } = useDotLottiePlayer(src, container, { lottieRef, renderer, activeAnimationId, @@ -81,9 +82,7 @@ export const DotLottiePlayer: React.FC = ({ defaultTheme, light, activeStateId, - }; - - const { dotLottiePlayer, setDotLottiePlayer } = useDotLottiePlayer(src, container, config); + }); const currentState = useSelectDotLottieState(dotLottiePlayer, (state) => state.currentState); const frame = useSelectDotLottieState(dotLottiePlayer, (state) => state.frame); @@ -183,10 +182,7 @@ export const DotLottiePlayer: React.FC = ({ useUpdateEffect(() => { if (typeof src !== 'undefined') { - const dl = new DotLottiePlayerCommon(src, container.current, config); - - dl.load(); - setDotLottiePlayer(dl); + initDotLottiePlayer(); } }, [src]);