refactor: 💡 change to use abstracted initDotlottiePlayer method

dotlottie · Sep 6, 2023 · faddcb3 · faddcb3
1 parent 148197c
commit faddcb3
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 13 deletions.
diff --git 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
@@ -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]);