From de65fd12fe241ecfb7621dfdba5ade0c4d69be8f Mon Sep 17 00:00:00 2001
From: 4eb0da <4eb0da@yandex-team.com>
Date: Wed, 19 Feb 2025 19:03:08 +0300
Subject: [PATCH] Lottie is_playing
 commit_hash:3745f5cc7e288526ad854d42d80f84742c5a23e7

---
 client/web/divkit/src/components/Root.svelte |  4 ++++
 client/web/divkit/src/extensions/gesture.ts  |  2 --
 client/web/divkit/src/extensions/lottie.ts   | 14 +++++++++++++-
 client/web/divkit/typings/common.d.ts        |  8 ++++++++
 client/web/divkit/typings/variables.d.ts     |  3 +--
 5 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/client/web/divkit/src/components/Root.svelte b/client/web/divkit/src/components/Root.svelte
index 3171ef091..19451fc92 100644
--- a/client/web/divkit/src/components/Root.svelte
+++ b/client/web/divkit/src/components/Root.svelte
@@ -39,6 +39,7 @@
         DivExtensionContext,
         DivExtensionClass,
         TypefaceProvider,
+        DerivedExpression,
         DisappearAction,
         FetchInit,
         DivVariable,
@@ -1582,6 +1583,9 @@
     function getExtensionContext(componentContext: ComponentContext): DivExtensionContext {
         return {
             variables: mergeMaps(variables, componentContext.variables),
+            derviedExpression: function<T>(t: T) {
+                return getDerivedFromVars(logError, t) as DerivedExpression<T>;
+            },
             processExpressions: function<T>(t: T) {
                 return getJsonWithVars(
                     logError,
diff --git a/client/web/divkit/src/extensions/gesture.ts b/client/web/divkit/src/extensions/gesture.ts
index 505d013c7..6455e3088 100644
--- a/client/web/divkit/src/extensions/gesture.ts
+++ b/client/web/divkit/src/extensions/gesture.ts
@@ -1,6 +1,4 @@
-import { tick } from 'svelte';
 import type { Action, DivExtension, DivExtensionContext } from '../../typings/common';
-import type { WrappedError } from '../utils/wrapError';
 
 interface Params {
     swipe_up?: Action[];
diff --git a/client/web/divkit/src/extensions/lottie.ts b/client/web/divkit/src/extensions/lottie.ts
index 501e52688..2c737a59f 100644
--- a/client/web/divkit/src/extensions/lottie.ts
+++ b/client/web/divkit/src/extensions/lottie.ts
@@ -1,4 +1,4 @@
-import type { DivExtension, DivExtensionContext } from '../../typings/common';
+import type { BooleanInt, DivExtension, DivExtensionContext, Unsubscriber } from '../../typings/common';
 import type { WrappedError } from '../utils/wrapError';
 import { filterHTMLElements } from '../utils/filterHTMLElements';
 
@@ -7,6 +7,7 @@ interface Params {
     lottie_json?: object;
     repeat_count?: number;
     repeat_mode?: 'restart' | 'reverse';
+    is_playing?: BooleanInt;
 }
 
 interface AnimationItem {
@@ -53,6 +54,8 @@ export function lottieExtensionBuilder(loadAnimation: LoadAnimation) {
         private params: Params;
         private animItem: AnimationItem | undefined;
         private wrapper: HTMLElement | undefined;
+        private isPlayingUnsubscriber: Unsubscriber | undefined;
+        private isPlaying = true;
 
         constructor(params: Params) {
             this.params = params;
@@ -279,6 +282,13 @@ export function lottieExtensionBuilder(loadAnimation: LoadAnimation) {
                     });
                 }
             }).catch(onError);
+
+            this.isPlayingUnsubscriber = context.derviedExpression(this.params.is_playing).subscribe(val => {
+                this.isPlaying = val !== false;
+                if (this.animItem) {
+                    this.animItem[this.isPlaying ? 'play' : 'pause']();
+                }
+            });
         }
 
         updateView(_node: HTMLElement, context: DivExtensionContext): void {
@@ -306,6 +316,8 @@ export function lottieExtensionBuilder(loadAnimation: LoadAnimation) {
                 this.wrapper = undefined;
             }
             node.removeAttribute('data-lottie');
+
+            this.isPlayingUnsubscriber?.();
         }
     };
 }
diff --git a/client/web/divkit/typings/common.d.ts b/client/web/divkit/typings/common.d.ts
index c216b3a4c..ff2497a0c 100644
--- a/client/web/divkit/typings/common.d.ts
+++ b/client/web/divkit/typings/common.d.ts
@@ -1,5 +1,8 @@
 import type { Variable } from './variables';
 
+export type Subscriber<T> = (value: T) => void;
+export type Unsubscriber = () => void;
+
 export type Interpolation = 'linear' | 'ease' | 'ease_in' | 'ease_out' | 'ease_in_out' | 'spring';
 
 export type AnimatorRepeatCount = {
@@ -381,10 +384,15 @@ export interface Customization {
     menuItemClass?: string;
 }
 
+export interface DerivedExpression<T> {
+    subscribe(cb: Subscriber<T>): Unsubscriber;
+}
+
 export interface DivExtensionContext {
     variables: Map<string, Variable>;
     direction: Direction;
     processExpressions<T>(t: T): T;
+    derviedExpression<T>(t: T): DerivedExpression<T>;
     execAction(action: Action | VisibilityAction | DisappearAction): void;
     logError(error: WrappedError): void;
     getComponentProperty<T>(property: string): T;
diff --git a/client/web/divkit/typings/variables.d.ts b/client/web/divkit/typings/variables.d.ts
index 6a58c8a68..5682f8dc6 100644
--- a/client/web/divkit/typings/variables.d.ts
+++ b/client/web/divkit/typings/variables.d.ts
@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/no-empty-interface */
 
-type Subscriber<T> = (value: T) => void;
-type Unsubscriber = () => void;
+import type { Subscriber, Unsubscriber } from './common';
 
 export type VariableType = 'string' | 'number' | 'integer' | 'boolean' | 'color' | 'url' | 'dict' | 'array';
 export type VariableValue = string | number | bigint | boolean | null | undefined | object | unknown[];