From faddcb39e8d655fe6b0177665938e37962f91dbe Mon Sep 17 00:00:00 2001
From: Afsal <afsal@lottiefiles.com>
Date: Wed, 6 Sep 2023 13:17:02 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20change=20to=20use=20?=
 =?UTF-8?q?abstracted=20initDotlottiePlayer=20method?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../react-player/src/hooks/use-dotlottie-player.ts | 12 ++++++++----
 packages/react-player/src/react-player.tsx         | 14 +++++---------
 2 files changed, 13 insertions(+), 13 deletions(-)

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<RendererType> & {
     lottieRef?: MutableRefObject<DotLottieRefProps | undefined>;
   },
-): { dotLottiePlayer: DotLottiePlayer; setDotLottiePlayer: (player: DotLottiePlayer) => void } => {
+): { dotLottiePlayer: DotLottiePlayer; initDotLottiePlayer: () => void } => {
   const [dotLottiePlayer, setDotLottiePlayer] = useState<DotLottiePlayer>(() => {
     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<DotLottiePlayerProps> = ({
   ...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<DotLottiePlayerProps> = ({
     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<DotLottiePlayerProps> = ({
 
   useUpdateEffect(() => {
     if (typeof src !== 'undefined') {
-      const dl = new DotLottiePlayerCommon(src, container.current, config);
-
-      dl.load();
-      setDotLottiePlayer(dl);
+      initDotLottiePlayer();
     }
   }, [src]);