Lottie is_playing

commit_hash:3745f5cc7e288526ad854d42d80f84742c5a23e7

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,

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[];

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?.();
         }
     };
 }

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;

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[];