From 9c5eafd74eb3ce3591cc49abf49c01e4a78b970c Mon Sep 17 00:00:00 2001
From: Jinny You <jinny@lottiefiles.com>
Date: Wed, 22 May 2024 18:06:11 +0900
Subject: [PATCH] web: Reduce initial playing resources

Previously, the Intersection Observer doesn't filter hidden animations when page just loaded.

Ensure that the only visible animations to be played. Hidden resources will be frozen in the initial load.
---
 web/src/lottie-player.ts | 41 +++++++++++++++++++++++-----------------
 1 file changed, 24 insertions(+), 17 deletions(-)

diff --git a/web/src/lottie-player.ts b/web/src/lottie-player.ts
index 9546bb13..b592d56d 100644
--- a/web/src/lottie-player.ts
+++ b/web/src/lottie-player.ts
@@ -151,20 +151,6 @@ const _wait = (timeToDelay: number) => {
   return new Promise((resolve) => setTimeout(resolve, timeToDelay))
 };
 
-const _observerCallback = (entries: IntersectionObserverEntry[]) => {
-  const entry = entries[0];
-  const target = entry.target as LottiePlayer;
-  
-  if (entry.isIntersecting) {
-    if (target.currentState === PlayerState.Frozen) {
-      target.play();
-    }
-  } else if (target.currentState === PlayerState.Playing) {
-    target.freeze();
-    target.dispatchEvent(new CustomEvent(PlayerEvent.Freeze));
-  }
-}
-
 const _downloadFile = (fileName: string, blob: Blob) => {
   const link = document.createElement('a');
   link.setAttribute('href', URL.createObjectURL(blob));
@@ -276,6 +262,7 @@ export class LottiePlayer extends LitElement {
   private _counter: number = 1;
   private _timer?: ReturnType<typeof setInterval>;
   private _observer?: IntersectionObserver;
+  private _observable: boolean = false;
 
   private async _init(): Promise<void> {
     if (!_module) {
@@ -298,12 +285,27 @@ export class LottiePlayer extends LitElement {
     }
   }
 
+  private _observerCallback(entries: IntersectionObserverEntry[]) {
+    const entry = entries[0];
+    const target = entry.target as LottiePlayer;
+    target._observable = entry.isIntersecting;
+
+    if (entry.isIntersecting) {
+      if (target.currentState === PlayerState.Frozen) {
+        target.play();
+      }
+    } else if (target.currentState === PlayerState.Playing) {
+      target.freeze();
+      target.dispatchEvent(new CustomEvent(PlayerEvent.Freeze));
+    }
+  }
+
   protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
     this._canvas = this.shadowRoot!.querySelector('#thorvg-canvas') as HTMLCanvasElement;
     this._canvas.width = this._canvas.offsetWidth;
     this._canvas.height = this._canvas.offsetHeight;
 
-    this._observer = new IntersectionObserver(_observerCallback);
+    this._observer = new IntersectionObserver(this._observerCallback);
     this._observer.observe(this);
 
     if (!this._TVG) {
@@ -457,8 +459,13 @@ export class LottiePlayer extends LitElement {
       return;
     }
 
-    this.currentState = PlayerState.Playing;
-    window.requestAnimationFrame(this._animLoop.bind(this));
+    if (this._observable) {
+      this.currentState = PlayerState.Playing;
+      window.requestAnimationFrame(this._animLoop.bind(this));
+      return;
+    }
+
+    this.currentState = PlayerState.Frozen;
   }
 
   /**