fix: reset use-dotlottie-player hook

dotlottie · Sep 14, 2023 · f702c93 · f702c93
1 parent 22d894b
commit f702c93
Showing 1 changed file with 135 additions and 135 deletions.
diff --git a/packages/react-player/src/hooks/use-dotlottie-player.ts b/packages/react-player/src/hooks/use-dotlottie-player.ts
@@ -14,7 +14,7 @@ import type {
 } from '@dotlottie/common';
 import { DotLottiePlayer } from '@dotlottie/common';
 import type { MutableRefObject } from 'react';
-import { useCallback, useState, useImperativeHandle, useRef } from 'react';
+import { useCallback, useState, useImperativeHandle } from 'react';
 
 import pkg from '../../package.json';
 
@@ -95,140 +95,140 @@ export const useDotLottiePlayer = (
     setDotLottiePlayer(getDotLottiePlayer());
   }, [getDotLottiePlayer]);
 
-  const newRef = useRef(null);
-
-  useImperativeHandle(
-    config?.lottieRef || newRef,
-    () => {
-      const exposedFunctions: DotLottieRefProps = {
-        play: (
-          indexOrId?: string | number,
-          getOptions?: (
-            currPlaybackOptions: PlaybackOptions,
-            manifestPlaybackOptions: PlaybackOptions,
-          ) => PlaybackOptions,
-        ): void => {
-          dotLottiePlayer.play(indexOrId, getOptions);
-        },
-        previous: (
-          getOptions?: (
-            currPlaybackOptions: PlaybackOptions,
-            manifestPlaybackOptions: PlaybackOptions,
-          ) => PlaybackOptions,
-        ): void => {
-          dotLottiePlayer.previous(getOptions);
-        },
-        next: (
-          getOptions?: (
-            currPlaybackOptions: PlaybackOptions,
-            manifestPlaybackOptions: PlaybackOptions,
-          ) => PlaybackOptions,
-        ): void => {
-          dotLottiePlayer.next(getOptions);
-        },
-        reset: (): void => {
-          dotLottiePlayer.reset();
-        },
-        getManifest: (): Manifest | undefined => {
-          return dotLottiePlayer.getManifest();
-        },
-        getState: (): DotLottiePlayerState => {
-          return dotLottiePlayer.getState();
-        },
-        getCurrentAnimationId: (): string | undefined => {
-          return dotLottiePlayer.currentAnimationId;
-        },
-        getLottie: (): AnimationItem | undefined => {
-          return dotLottiePlayer.getAnimationInstance();
-        },
-        getVersions: (): Versions => {
-          return {
-            lottieWebVersion: DotLottiePlayer.getLottieWebVersion(),
-            dotLottieReactVersion: `${pkg.version}`,
-          };
-        },
-        setDefaultTheme: (defaultTheme: string): void => {
-          dotLottiePlayer.setDefaultTheme(defaultTheme);
-        },
-        setBackground: (background: string): void => {
-          dotLottiePlayer.setBackground(background);
-        },
-        setAutoplay: (autoplay: boolean): void => {
-          dotLottiePlayer.setAutoplay(autoplay);
-        },
-        setDirection: (direction: AnimationDirection): void => {
-          dotLottiePlayer.setDirection(direction);
-        },
-        setHover: (hover: boolean): void => {
-          dotLottiePlayer.setHover(hover);
-        },
-        setIntermission: (intermission: number): void => {
-          dotLottiePlayer.setIntermission(intermission);
-        },
-        setLoop: (loop: number | boolean): void => {
-          dotLottiePlayer.setLoop(loop);
-        },
-        setPlayMode: (mode: PlayMode): void => {
-          dotLottiePlayer.setMode(mode);
-        },
-        setSpeed: (speed: number): void => {
-          dotLottiePlayer.setSpeed(speed);
-        },
-        revertToManifestValues: (playbackKeys?: Array<keyof PlaybackOptions | 'activeAnimationId'>) => {
-          dotLottiePlayer.revertToManifestValues(playbackKeys);
-        },
-        pause: () => {
-          dotLottiePlayer.pause();
-        },
-        seek: (frame: number) => {
-          dotLottiePlayer.seek(frame);
-        },
-        getContainer: (): HTMLDivElement | undefined => {
-          return dotLottiePlayer.container;
-        },
-        goToAndPlay: (value: number | string, isFrame?: boolean, name?: string): void => {
-          dotLottiePlayer.goToAndPlay(value, isFrame, name);
-        },
-        goToAndStop: (value: number | string, isFrame?: boolean, name?: string): void => {
-          dotLottiePlayer.goToAndStop(value, isFrame, name);
-        },
-        stop: (): void => {
-          dotLottiePlayer.stop();
-        },
-        togglePlay: (): void => {
-          dotLottiePlayer.togglePlay();
-        },
-        resize: (): void => {
-          dotLottiePlayer.resize();
-        },
-        enterInteractiveMode: (stateId: string) => {
-          dotLottiePlayer.enterInteractiveMode(stateId);
-        },
-        playOnShow: (playOnShowOptions?: { threshold: number[] }): void => {
-          dotLottiePlayer.playOnShow(playOnShowOptions);
-        },
-        stopPlayOnShow: (): void => {
-          dotLottiePlayer.stopPlayOnShow();
-        },
-        playOnScroll: (scrollOptions?: {
-          positionCallback?: (position: number) => void;
-          segments?: [number, number];
-          threshold?: [number, number];
-        }): void => {
-          dotLottiePlayer.playOnScroll(scrollOptions);
-        },
-        stopPlayOnScroll: (): void => {
-          dotLottiePlayer.stopPlayOnScroll();
-        },
-        exitInteractiveMode: (): void => {
-          dotLottiePlayer.exitInteractiveMode();
-        },
-      };
-
-      return exposedFunctions;
-    },
-    [dotLottiePlayer],
-  );
+  if (config?.lottieRef) {
+    useImperativeHandle(
+      config.lottieRef,
+      () => {
+        const exposedFunctions: DotLottieRefProps = {
+          play: (
+            indexOrId?: string | number,
+            getOptions?: (
+              currPlaybackOptions: PlaybackOptions,
+              manifestPlaybackOptions: PlaybackOptions,
+            ) => PlaybackOptions,
+          ): void => {
+            dotLottiePlayer.play(indexOrId, getOptions);
+          },
+          previous: (
+            getOptions?: (
+              currPlaybackOptions: PlaybackOptions,
+              manifestPlaybackOptions: PlaybackOptions,
+            ) => PlaybackOptions,
+          ): void => {
+            dotLottiePlayer.previous(getOptions);
+          },
+          next: (
+            getOptions?: (
+              currPlaybackOptions: PlaybackOptions,
+              manifestPlaybackOptions: PlaybackOptions,
+            ) => PlaybackOptions,
+          ): void => {
+            dotLottiePlayer.next(getOptions);
+          },
+          reset: (): void => {
+            dotLottiePlayer.reset();
+          },
+          getManifest: (): Manifest | undefined => {
+            return dotLottiePlayer.getManifest();
+          },
+          getState: (): DotLottiePlayerState => {
+            return dotLottiePlayer.getState();
+          },
+          getCurrentAnimationId: (): string | undefined => {
+            return dotLottiePlayer.currentAnimationId;
+          },
+          getLottie: (): AnimationItem | undefined => {
+            return dotLottiePlayer.getAnimationInstance();
+          },
+          getVersions: (): Versions => {
+            return {
+              lottieWebVersion: DotLottiePlayer.getLottieWebVersion(),
+              dotLottieReactVersion: `${pkg.version}`,
+            };
+          },
+          setDefaultTheme: (defaultTheme: string): void => {
+            dotLottiePlayer.setDefaultTheme(defaultTheme);
+          },
+          setBackground: (background: string): void => {
+            dotLottiePlayer.setBackground(background);
+          },
+          setAutoplay: (autoplay: boolean): void => {
+            dotLottiePlayer.setAutoplay(autoplay);
+          },
+          setDirection: (direction: AnimationDirection): void => {
+            dotLottiePlayer.setDirection(direction);
+          },
+          setHover: (hover: boolean): void => {
+            dotLottiePlayer.setHover(hover);
+          },
+          setIntermission: (intermission: number): void => {
+            dotLottiePlayer.setIntermission(intermission);
+          },
+          setLoop: (loop: number | boolean): void => {
+            dotLottiePlayer.setLoop(loop);
+          },
+          setPlayMode: (mode: PlayMode): void => {
+            dotLottiePlayer.setMode(mode);
+          },
+          setSpeed: (speed: number): void => {
+            dotLottiePlayer.setSpeed(speed);
+          },
+          revertToManifestValues: (playbackKeys?: Array<keyof PlaybackOptions | 'activeAnimationId'>) => {
+            dotLottiePlayer.revertToManifestValues(playbackKeys);
+          },
+          pause: () => {
+            dotLottiePlayer.pause();
+          },
+          seek: (frame: number) => {
+            dotLottiePlayer.seek(frame);
+          },
+          getContainer: (): HTMLDivElement | undefined => {
+            return dotLottiePlayer.container;
+          },
+          goToAndPlay: (value: number | string, isFrame?: boolean, name?: string): void => {
+            dotLottiePlayer.goToAndPlay(value, isFrame, name);
+          },
+          goToAndStop: (value: number | string, isFrame?: boolean, name?: string): void => {
+            dotLottiePlayer.goToAndStop(value, isFrame, name);
+          },
+          stop: (): void => {
+            dotLottiePlayer.stop();
+          },
+          togglePlay: (): void => {
+            dotLottiePlayer.togglePlay();
+          },
+          resize: (): void => {
+            dotLottiePlayer.resize();
+          },
+          enterInteractiveMode: (stateId: string) => {
+            dotLottiePlayer.enterInteractiveMode(stateId);
+          },
+          playOnShow: (playOnShowOptions?: { threshold: number[] }): void => {
+            dotLottiePlayer.playOnShow(playOnShowOptions);
+          },
+          stopPlayOnShow: (): void => {
+            dotLottiePlayer.stopPlayOnShow();
+          },
+          playOnScroll: (scrollOptions?: {
+            positionCallback?: (position: number) => void;
+            segments?: [number, number];
+            threshold?: [number, number];
+          }): void => {
+            dotLottiePlayer.playOnScroll(scrollOptions);
+          },
+          stopPlayOnScroll: (): void => {
+            dotLottiePlayer.stopPlayOnScroll();
+          },
+          exitInteractiveMode: (): void => {
+            dotLottiePlayer.exitInteractiveMode();
+          },
+        };
+
+        return exposedFunctions;
+      },
+      [config.lottieRef.current, dotLottiePlayer],
+    );
+  }
 
   useEffectOnce(() => {
     initDotLottiePlayer();