Merge pull request #127 from LottieFiles/fix/instanceloaded-event

fix: added new instanceloaded event

Author: samuelOsborne

.changeset/few-tables-notice.md

@@ -0,0 +1,5 @@
+---
+'@lottiefiles/react-lottie-player': patch
+---
+
+added instanceloaded event

src/Player.tsx

@@ -47,6 +47,7 @@ export enum PlayerState {
 // Define player events
 export enum PlayerEvent {
   Load = 'load',
+  InstanceSaved = 'instanceSaved',
   Error = 'error',
   Ready = 'ready',
   Play = 'play',
@@ -314,13 +315,13 @@ export class Player extends React.Component<IPlayerProps, IPlayerState> {
         const fetchResult = await fetch(animationData as string).catch(() => {
           this.setState({ playerState: PlayerState.Error });
           this.triggerEvent(PlayerEvent.Error);
-          throw new Error('Error @LottieFiles/lottie-react: Animation data could not be fetched.');
+          throw new Error('@LottieFiles/lottie-react: Animation data could not be fetched.');
         });
 
         animationData = await fetchResult.json().catch(() => {
           this.setState({ playerState: PlayerState.Error });
           this.triggerEvent(PlayerEvent.Error);
-          throw new Error('Error @LottieFiles/lottie-react: Animation data could not be fetched.');
+          throw new Error('@LottieFiles/lottie-react: Animation data could not be fetched.');
         });
       }
 
@@ -344,84 +345,85 @@ export class Player extends React.Component<IPlayerProps, IPlayerState> {
       this.setState({ animationData });
 
       this.setState({ instance: newInstance }, () => {
+        this.triggerEvent(PlayerEvent.InstanceSaved);
+
         if (typeof lottieRef === 'function') {
           lottieRef(newInstance);
         }
+        if (autoplay) {
+          this.play();
+        }
+      });
 
-        // Handle new frame event
-        newInstance.addEventListener('enterFrame', () => {
-          this.triggerEvent(PlayerEvent.Frame);
+      // Handle new frame event
+      newInstance.addEventListener('enterFrame', () => {
+        this.triggerEvent(PlayerEvent.Frame);
 
-          this.setState({
-            seeker: Math.floor((newInstance as any).currentFrame),
-          });
+        this.setState({
+          seeker: Math.floor((newInstance as any).currentFrame),
         });
+      });
 
-        // Handle lottie-web ready event
-        newInstance.addEventListener('DOMLoaded', () => {
-          this.triggerEvent(PlayerEvent.Load);
-
-          if (autoplay) {
-            this.play();
-          }
-        });
+      // Handle lottie-web ready event
+      newInstance.addEventListener('DOMLoaded', () => {
+        this.triggerEvent(PlayerEvent.Load);
+      });
 
-        // Handle animation data load complete
-        newInstance.addEventListener('data_ready', () => {
-          this.triggerEvent(PlayerEvent.Ready);
-        });
+      // Handle animation data load complete
+      newInstance.addEventListener('data_ready', () => {
+        this.triggerEvent(PlayerEvent.Ready);
+      });
 
-        // Set error state when animation load fail event triggers
-        newInstance.addEventListener('data_failed', () => {
-          this.setState({ playerState: PlayerState.Error });
-          this.triggerEvent(PlayerEvent.Error);
-        });
+      // Set error state when animation load fail event triggers
+      newInstance.addEventListener('data_failed', () => {
+        this.setState({ playerState: PlayerState.Error });
+        this.triggerEvent(PlayerEvent.Error);
+      });
 
-        // Handle new loop event
-        newInstance.addEventListener('loopComplete', () => {
-          this.triggerEvent(PlayerEvent.Loop);
-        });
+      // Handle new loop event
+      newInstance.addEventListener('loopComplete', () => {
+        this.triggerEvent(PlayerEvent.Loop);
+      });
 
-        // Set state to paused if loop is off and anim has completed
-        newInstance.addEventListener('complete', () => {
-          this.triggerEvent(PlayerEvent.Complete);
-          this.setState({ playerState: PlayerState.Paused });
+      // Set state to paused if loop is off and anim has completed
+      newInstance.addEventListener('complete', () => {
+        this.triggerEvent(PlayerEvent.Complete);
+        this.setState({ playerState: PlayerState.Paused });
 
-          if (!this.props.keepLastFrame || this.props.loop) {
-            this.setSeeker(0);
-          }
-        });
+        if (!this.props.keepLastFrame || this.props.loop) {
+          this.setSeeker(0);
+        }
+      });
 
-        // Set handlers to auto play animation on hover if enabled
-        if (this.container) {
-          this.container.addEventListener('mouseenter', () => {
-            if (hover && this.state.playerState !== PlayerState.Playing) {
-              if (this.props.keepLastFrame) {
-                this.stop();
-              }
-              this.play();
-            }
-          });
-          this.container.addEventListener('mouseleave', () => {
-            if (hover && this.state.playerState === PlayerState.Playing) {
+      // Set handlers to auto play animation on hover if enabled
+      if (this.container) {
+        this.container.addEventListener('mouseenter', () => {
+          if (hover && this.state.playerState !== PlayerState.Playing) {
+            if (this.props.keepLastFrame) {
               this.stop();
             }
-          });
-        }
+            this.play();
+          }
+        });
+        this.container.addEventListener('mouseleave', () => {
+          if (hover && this.state.playerState === PlayerState.Playing) {
+            this.stop();
+          }
+        });
+      }
 
-        // Set initial playback speed and direction
-        if (speed) {
-          this.setPlayerSpeed(speed);
-        }
+      // Set initial playback speed and direction
+      if (speed) {
+        this.setPlayerSpeed(speed);
+      }
 
-        if (direction) {
-          this.setPlayerDirection(direction);
-        }
+      if (direction) {
+        this.setPlayerDirection(direction);
+      }
 
-        if (background) {
-          this.setState({ background });
-        }
-      });
+      if (background) {
+        this.setState({ background });
+      }
     } catch (e) {
       this.setState({ playerState: PlayerState.Error });
       this.triggerEvent(PlayerEvent.Error);