@octane-xplat/lottie 0.0.1 → 0.9.0

package/package.json

@@ -1,18 +1,89 @@
 {
   "name": "@octane-xplat/lottie",
-  "version": "0.0.1",
+  "version": "0.9.0",
   "description": "Lottie animation leaf for Octane xplat — lottie-web on web + vendored @nativescript-community/ui-lottie (fork fixes) on native",
   "repository": {
     "type": "git",
-    "url": "https://github.com/octane-xplat/octane-xplat.git",
+    "url": "https://github.com/octane-xplat/octane-xplat",
     "directory": "packages/lottie"
   },
-  "homepage": "https://github.com/octane-xplat/octane-xplat/tree/main/packages/lottie",
-  "main": "./index.js",
-  "types": "./index.d.ts",
   "files": [
-    "README.md",
-    "index.js",
-    "index.d.ts"
-  ]
-}
+    "dist",
+    "types",
+    "platforms",
+    "src/index.ts",
+    "src/index.web.ts",
+    "src/Lottie.tsrx",
+    "src/Lottie.web.tsrx",
+    "src/props.ts",
+    "src/native-elements.d.ts",
+    "src/references.d.ts",
+    "src/cx.mobile.ts",
+    "src/escape-props.ts",
+    "src/escape-props.web.ts",
+    "src/layout-child.ts",
+    "src/layout-child.web.ts",
+    "src/vendor/ui-lottie/LICENSE.md",
+    "src/vendor/ui-lottie/src/lottie/index.android.ts",
+    "src/vendor/ui-lottie/src/lottie/index.common.ts",
+    "src/vendor/ui-lottie/src/lottie/index.d.ts",
+    "src/vendor/ui-lottie/src/lottie/index.ios.ts",
+    "src/vendor/ui-lottie/src/lottie/utils.ts",
+    "src/vendor/ui-lottie/src/lottie/typings"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "web": {
+        "types": "./types/generated/index.web.d.ts",
+        "default": "./dist/web/index.js"
+      },
+      "native": {
+        "types": "./types/generated/index.d.ts",
+        "default": "./dist/native/index.js"
+      },
+      "types": "./types/generated/index.d.ts",
+      "default": "./dist/native/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "lottie-web": "5.13.0"
+  },
+  "devDependencies": {
+    "@nativescript-community/octane": "0.2.1",
+    "@nativescript/core": "9.1.2",
+    "@nativescript/types": "9.0.0",
+    "@octanejs/vite-plugin": "0.1.61",
+    "@tsrx/typescript-plugin": "0.4.11",
+    "octane": "0.6.3",
+    "tsrx-typegen": "0.2.1",
+    "typescript": "5.9.3",
+    "vite": "8.3.0"
+  },
+  "peerDependencies": {
+    "@nativescript-community/octane": ">=0.2.1 <1",
+    "@nativescript/core": ">=9.1.0 <10",
+    "octane": ">=0.6.3 <1"
+  },
+  "peerDependenciesMeta": {
+    "@nativescript-community/octane": {
+      "optional": true
+    },
+    "@nativescript/core": {
+      "optional": true
+    }
+  },
+  "nativescript": {
+    "platforms": {
+      "android": "6.0.0",
+      "ios": "6.0.1"
+    }
+  },
+  "scripts": {
+    "build": "vite build && vite build --mode native && tsrx-typegen --target octane && node ../../scripts/check-native-dist.mjs",
+    "test:packed": "node tests/packed-consumer.mjs"
+  }
+}

package/platforms/android/include.gradle

@@ -0,0 +1,7 @@
+
+dependencies {
+	def androidXAppCompatVersion =  project.hasProperty("androidXAppCompat") ? project.androidXAppCompat : "1.3.1"
+	implementation "androidx.appcompat:appcompat:$androidXAppCompatVersion"
+	def lottieVersion =  project.hasProperty("lottieVersion") ? project.lottieVersion : "5.2.0"
+	implementation "com.airbnb.android:lottie:$lottieVersion"
+}

package/platforms/android/java/com/nativescript/lottie/LottieAnimationView.java

@@ -0,0 +1,92 @@
+package com.nativescript.lottie;
+
+import androidx.core.view.ViewCompat;
+import android.view.View.MeasureSpec;
+import android.graphics.drawable.Drawable;
+
+public class LottieAnimationView extends com.airbnb.lottie.LottieAnimationView {
+    private double scaleW = 1;
+    private double scaleH = 1;
+    
+    public LottieAnimationView(android.content.Context context) {
+        super(context);
+    }
+
+     @Override
+    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
+
+        int width = MeasureSpec.getSize(widthMeasureSpec);
+        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
+
+        int height = MeasureSpec.getSize(heightMeasureSpec);
+        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
+
+        Drawable drawable = this.getDrawable();
+        int measureWidth;
+        int measureHeight;
+        if (drawable != null) {
+            measureWidth = drawable.getIntrinsicWidth();
+            measureHeight = drawable.getIntrinsicHeight();
+        } else {
+            measureWidth = 0;
+            measureHeight = 0;
+        }
+
+        boolean finiteWidth = widthMode != MeasureSpec.UNSPECIFIED;
+        boolean finiteHeight = heightMode != MeasureSpec.UNSPECIFIED;
+
+        if (measureWidth != 0 && measureHeight != 0 && (finiteWidth || finiteHeight)) {
+            this.computeScaleFactor(width, height, finiteWidth, finiteHeight, measureWidth, measureHeight);
+            int resultW = (int) Math.round(measureWidth * this.scaleW);
+            int resultH = (int) Math.round(measureHeight * this.scaleH);
+
+            measureWidth = finiteWidth ? Math.min(resultW, width) : resultW;
+            measureHeight = finiteHeight ? Math.min(resultH, height) : resultH;
+        }
+
+        measureWidth += this.getPaddingLeft() + this.getPaddingRight();
+        measureHeight += this.getPaddingTop() + this.getPaddingBottom();
+
+        measureWidth = Math.max(measureWidth, getSuggestedMinimumWidth());
+        measureHeight = Math.max(measureHeight, getSuggestedMinimumHeight());
+
+        int widthSizeAndState = ViewCompat.resolveSizeAndState(measureWidth, widthMeasureSpec, 0);
+        int heightSizeAndState = ViewCompat.resolveSizeAndState(measureHeight, heightMeasureSpec, 0);
+
+        this.setMeasuredDimension(widthSizeAndState, heightSizeAndState);
+    }
+
+    private void computeScaleFactor(int measureWidth, int measureHeight, boolean widthIsFinite, boolean heightIsFinite, double nativeWidth, double nativeHeight) {
+
+        this.scaleW = 1;
+        this.scaleH = 1;
+
+        ScaleType scale = this.getScaleType();
+        if ((scale == ScaleType.CENTER_CROP || scale == ScaleType.FIT_CENTER || scale == ScaleType.FIT_XY) &&
+                (widthIsFinite || heightIsFinite)) {
+
+            this.scaleW = (nativeWidth > 0) ? measureWidth / nativeWidth : 0d;
+            this.scaleH = (nativeHeight > 0) ? measureHeight / nativeHeight : 0d;
+
+            if (!widthIsFinite) {
+                this.scaleW = scaleH;
+            } else if (!heightIsFinite) {
+                this.scaleH = scaleW;
+            } else {
+                // No infinite dimensions.
+                switch (scale) {
+                    case FIT_CENTER:
+                        this.scaleH = this.scaleW < this.scaleH ? this.scaleW : this.scaleH;
+                        this.scaleW = this.scaleH;
+                        break;
+                    case CENTER_CROP:
+                        this.scaleH = this.scaleW > this.scaleH ? this.scaleW : this.scaleH;
+                        this.scaleW = this.scaleH;
+                        break;
+                    default:
+                        break;
+                }
+            }
+        }
+    }
+}

package/platforms/android/native-api-usage.json

@@ -0,0 +1,16 @@
+{
+	"uses": [
+		"com.airbnb.lottie:LottieAnimationView",
+		"com.airbnb.lottie.model:KeyPath",
+		"com.airbnb.lottie.value:LottieValueCallback",
+		"com.airbnb.lottie:LottieProperty",
+		"com.airbnb.lottie:SimpleColorFilter",
+		"com.airbnb.lottie:RenderMode",
+		"android.animation:Animator",
+		"android.animation:Animator.AnimatorListener",
+		"com.airbnb.lottie:LottieResult",
+		"com.airbnb.lottie:LottieOnCompositionLoadedListener",
+		"com.airbnb.lottie:LottieComposition",
+		"com.airbnb.lottie:LottieCompositionFactory"
+	]
+}

package/platforms/ios/Podfile

@@ -0,0 +1,5 @@
+# Pinned to the 4.4.1 branch HEAD — a branch reference resolves a moving
+# target on every fresh pod install. The fork carries the
+# CompatibleAnimation* ObjC shims + CompatibleLottieLogger this plugin needs.
+pod 'lottie-ios', :git => 'https://github.com/farfromrefug/lottie-ios.git', :commit => 'fd75f8aaa47d9479fc43cf91dd1da557952f6c0c' 
+# pod 'lottie-ios', :path => '/Volumes/dev/ios/lottie-ios'

package/src/Lottie.tsrx

@@ -0,0 +1,161 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { useCallback, useEffect, useRef } from 'octane';
+import { registerElement } from '@nativescript-community/octane';
+import { isAndroid } from '@nativescript/core';
+import { LottieView } from './vendor/ui-lottie/src/lottie';
+import type { LottieHandle, LottieProps } from './props';
+import { cx } from './cx.mobile';
+import { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState } from './escape-props';
+import { layoutChildProps } from './layout-child';
+
+registerElement('xplatlottie', LottieView);
+
+const clamp01 = (n: number) => Math.min(1, Math.max(0, n));
+
+const STRETCH: Record<string, string> = {
+	contain: 'aspectFit',
+	cover: 'aspectFill',
+	fill: 'fill',
+};
+
+/** Duration in ms on both platforms — the plugin's `duration` reports
+ *  seconds on iOS and ms on Android. */
+function durationMs(v: LottieView): number {
+	const d = v.duration ?? 0;
+	return isAndroid ? d : Math.max(0, d) * 1000;
+}
+
+function currentProgress(v: LottieView): number {
+	// the native type is platform-divergent (LottieAnimationView vs
+	// CompatibleAnimationView) — runtime branch is the narrowing.
+	const nv = v.nativeViewProtected as any;
+	return isAndroid ? (nv?.getProgress?.() ?? 0) : (nv?.currentProgress ?? 0);
+}
+
+/** Stop = pause + reset playhead. iOS `stop()` resets to the start;
+ *  Android's `cancelAnimation()` ends the animator and the next
+ *  `playAnimation()` restarts from 0. */
+function stopView(v: LottieView) {
+	if (isAndroid) v.cancelAnimation();
+	else v.nativeViewProtected?.stop();
+
+	v.progress = 0;
+}
+
+/** Lottie — vendored ui-lottie surface (see src/plugin). The plugin
+ *  doesn't diff props, so src/play-state/speed/progress land imperatively
+ *  in effects. `async` stays forced on: it keeps the load path uniform
+ *  (one code path for inline/file/URL/.lottie) and avoids main-thread
+ *  parse jank; autoPlay is re-applied when the composition lands. */
+export function Lottie(props: LottieProps) @{
+	const host = useRef<LottieView | null>(null);
+	const appliedSrc = useRef<string | undefined>(undefined);
+	const loadedRef = useRef(false);
+
+	const bindHost = useCallback((v: LottieView) => {
+		host.current = v;
+	}, []);
+
+	const wantPlay = () => props.playing ?? props.autoPlay ?? true;
+
+	const onReady = () => {
+		const v = host.current;
+		if (!v || loadedRef.current) return;
+		loadedRef.current = true;
+		if (props.speed !== undefined) v.speed = props.speed;
+		if (props.progress !== undefined) v.progress = clamp01(props.progress);
+		props.onLoaded?.({ duration: durationMs(v) });
+		if (wantPlay() && !v.isAnimating()) v.playAnimation();
+	};
+
+	// Mount wiring — events first so a synchronous src assignment can't
+	// race past them.
+	useEffect(() => {
+		const v = host.current;
+		if (!v) return;
+		applyEscapeProps(v, props);
+		v.stretch = STRETCH[props.fit ?? 'contain'] as any;
+		v.async = true;
+
+		v.on(LottieView.compositionLoadedEvent, () => onReady());
+		v.on(LottieView.loadFailedEvent, (e: any) => {
+			loadedRef.current = false;
+			props.onError?.({ message: e?.error ? String(e.error) : 'load failed' });
+		});
+
+		// The vendored fix reports a single `false` on cancel — only a
+		// `true` finish reaches onEnded.
+		v.completionBlock = (finished: boolean) => {
+			if (finished) props.onEnded?.();
+		};
+
+		props.bind?.(handle(v));
+	}, []);
+
+	// src — applied imperatively after the listeners exist.
+	useEffect(() => {
+		const v = host.current;
+		if (!v) return;
+		const src = props.data ? JSON.stringify(props.data) : props.src;
+		if (src === appliedSrc.current) return;
+		appliedSrc.current = src;
+		loadedRef.current = false;
+		v.src = src ?? '';
+	}, [props.src, props.data]);
+
+	// Controlled `playing` — play state is a method call, not a prop.
+	useEffect(() => {
+		const v = host.current;
+		if (!v || props.playing === undefined) return;
+		if (props.playing) {
+			if (loadedRef.current) v.resumeAnimation();
+			// not loaded yet — onReady picks it up via wantPlay()
+		} else {
+			v.pauseAnimation();
+		}
+	}, [props.playing]);
+
+	useEffect(() => {
+		const v = host.current;
+		if (!v || props.progress === undefined || !loadedRef.current) return;
+		v.progress = clamp01(props.progress);
+	}, [props.progress]);
+
+	useEffect(() => {
+		const v = host.current;
+		if (!v || props.speed === undefined || !loadedRef.current) return;
+		v.speed = props.speed;
+	}, [props.speed]);
+
+	const handle = (v: LottieView): LottieHandle => ({
+		play: () => v.resumeAnimation(),
+		pause: () => v.pauseAnimation(),
+		stop: () => stopView(v),
+		seekTo: (p: number) => {
+			v.progress = clamp01(p);
+		},
+		setSpeed: (n: number) => {
+			v.speed = n;
+		},
+		progress: () => currentProgress(v),
+		duration: () => durationMs(v),
+		isPlaying: () => v.isAnimating(),
+		native: v,
+	});
+
+	<xplatlottie
+		ref={bindHost}
+		id={props.id}
+		className={cx(props.className)}
+		style={props.style}
+		{...layoutChildProps(props)}
+		loop={props.loop ?? false}
+		accessible={props.accessible}
+		accessibilityLabel={props.accessibilityLabel}
+		accessibilityRole={nativeAccessibilityRole(props.accessibilityRole) as any}
+		accessibilityHint={props.accessibilityHint}
+		accessibilityValue={props.accessibilityValue}
+		accessibilityState={nativeAccessibilityState(props.accessibilityState) as any}
+		accessibilityLiveRegion={props.accessibilityLiveRegion as any}
+	/>
+}

package/src/Lottie.web.tsrx

@@ -0,0 +1,135 @@
+import lottie, { type AnimationItem } from 'lottie-web';
+import { useEffect, useRef } from 'octane';
+import type { LottieHandle, LottieProps } from './props';
+import { applyEscapeProps } from './escape-props.web';
+import { layoutChildProps } from './layout-child.web';
+
+const PRESERVE: Record<string, string> = {
+	contain: 'xMidYMid meet',
+	cover: 'xMidYMid slice',
+	fill: 'none',
+};
+
+const clamp01 = (n: number) => Math.min(1, Math.max(0, n));
+
+/** Lottie — lottie-web's svg renderer in a plain container div. Everything
+ *  is imperative: `src`/`data` rebuild the AnimationItem, the rest are
+ *  method calls applied in effects. Progress is normalized 0..1
+ *  (lottie-web speaks frames); durations arrive in seconds and are
+ *  surfaced as ms. */
+export function Lottie(props: LottieProps) @{
+	const el = useRef<HTMLDivElement | null>(null);
+	const anim = useRef<AnimationItem | null>(null);
+	const ready = useRef(false);
+
+	const wantPlay = () => props.playing ?? props.autoPlay ?? true;
+
+	const build = (host: HTMLDivElement) => {
+		anim.current?.destroy();
+		anim.current = null;
+		ready.current = false;
+
+		const animationData = props.data ?? (props.src?.startsWith('{') ? JSON.parse(props.src) : undefined);
+		const path = animationData ? undefined : props.src;
+		if (!animationData && !path) return;
+
+		const a = lottie.loadAnimation({
+			container: host,
+			renderer: 'svg',
+			loop: props.loop ?? false,
+			autoplay: false, // leaf owns play state — uniform with native
+			animationData,
+			path,
+			rendererSettings: { preserveAspectRatio: PRESERVE[props.fit ?? 'contain'] },
+		});
+
+		anim.current = a;
+
+		a.addEventListener('DOMLoaded', () => {
+			ready.current = true;
+			if (props.speed !== undefined) a.setSpeed(props.speed);
+			if (props.progress !== undefined) seekTo(props.progress);
+			props.onLoaded?.({ duration: a.getDuration() * 1000 });
+			if (wantPlay()) a.play();
+		});
+
+		a.addEventListener('complete', () => props.onEnded?.());
+		a.addEventListener('data_failed', () => props.onError?.({ message: 'animation data failed to load' }));
+		a.addEventListener('error', () => props.onError?.({ message: 'animation failed' }));
+	};
+
+	const seekTo = (p: number) => {
+		const a = anim.current;
+		if (!a) return;
+		const frame = clamp01(p) * a.totalFrames;
+		// goToAndStop parks the playhead — keep playing state instead.
+		if (a.isPaused) a.goToAndStop(frame, true);
+		else a.goToAndPlay(frame, true);
+	};
+
+	// Build once the container exists; rebuild on src/data/fit changes.
+	useEffect(() => {
+		const host = el.current;
+		if (!host) return;
+		build(host);
+		return () => {
+			anim.current?.destroy();
+			anim.current = null;
+			ready.current = false;
+		};
+	}, [props.src, props.data, props.fit]);
+
+	useEffect(() => {
+		if (props.loop !== undefined && anim.current) {
+			anim.current.loop = props.loop;
+		}
+	}, [props.loop]);
+
+	useEffect(() => {
+		if (props.playing === undefined || !anim.current || !ready.current) return;
+		if (props.playing) anim.current.play();
+		else anim.current.pause();
+	}, [props.playing]);
+
+	useEffect(() => {
+		if (props.progress === undefined) return;
+		seekTo(props.progress);
+	}, [props.progress]);
+
+	useEffect(() => {
+		if (props.speed !== undefined) anim.current?.setSpeed(props.speed);
+	}, [props.speed]);
+
+	const handle = (a: AnimationItem): LottieHandle => ({
+		play: () => a.play(),
+		pause: () => a.pause(),
+		stop: () => a.stop(),
+		seekTo,
+		setSpeed: (n: number) => a.setSpeed(n),
+		progress: () => (a.totalFrames ? a.currentRawFrame / a.totalFrames : 0),
+		duration: () => a.getDuration() * 1000,
+		isPlaying: () => !a.isPaused,
+		native: a,
+	});
+
+	<div
+		ref={(v: HTMLDivElement | null) => {
+			el.current = v;
+			if (!v) return;
+			applyEscapeProps(v, props);
+			if (anim.current) props.bind?.(handle(anim.current));
+		}}
+		id={props.id}
+		className={props.className}
+		{...layoutChildProps(props, props.style)}
+		role={props.accessibilityRole ?? 'img'}
+		aria-label={props.accessibilityLabel}
+		aria-hidden={props.accessible === false ? true : undefined}
+		aria-description={props.accessibilityHint}
+		aria-valuetext={props.accessibilityValue}
+		aria-disabled={props.accessibilityState?.disabled}
+		aria-selected={props.accessibilityState?.selected}
+		aria-checked={props.accessibilityState?.checked}
+		aria-live={props.accessibilityLiveRegion === 'none' ? 'off' : props.accessibilityLiveRegion}
+	/>
+}

package/src/cx.mobile.ts

@@ -0,0 +1,8 @@
+/** NS `className` splits on ' ' only, and the universal driver applies the
+ *  prop via `String(value)` — an array would arrive comma-joined and match
+ *  no class at all. Native leaves normalize through cx() before handing
+ *  className to an intrinsic. (The DOM renderer already flattens arrays,
+ *  so web leaves don't need this.) */
+export function cx(...parts: any[]): string {
+	return parts.flat(Infinity).filter(Boolean).join(' ')
+}

package/src/escape-props.ts

@@ -0,0 +1,65 @@
+import { isAndroid, isIOS } from '@nativescript/core'
+import type { Role } from './props'
+
+/** Apply only the active device's escape bag after the primitive's own props. */
+export function applyEscapeProps(view: any, props: { ios?: any; android?: any }): void {
+	if (!view) {
+		return
+	}
+
+	const bag = isIOS ? props.ios : isAndroid ? props.android : undefined
+	if (bag) {
+		Object.assign(view, bag)
+	}
+}
+
+const NATIVE_ACCESSIBILITY_ROLES: Record<Role, string> = {
+	button: 'button',
+	link: 'link',
+	search: 'search',
+	image: 'image',
+	heading: 'header',
+	adjustable: 'adjustable',
+	summary: 'summary',
+	text: 'text',
+	none: 'none',
+	progressbar: 'progressBar',
+	checkbox: 'checkbox',
+	switch: 'switch',
+	radio: 'radioButton',
+	spinbutton: 'spinButton',
+	// NativeScript has no tab role; a tab is still an actionable button and
+	// its selected state is carried separately by accessibilityState.
+	tab: 'button',
+}
+
+/** Translate the shared/ARIA spelling to NativeScript's narrower role enum. */
+export function nativeAccessibilityRole(role?: Role): string | undefined {
+	return role ? NATIVE_ACCESSIBILITY_ROLES[role] : undefined
+}
+
+/** NativeScript's AccessibilityState is a single enum value, unlike the
+ *  web's independent ARIA booleans. Priority follows the strongest state. */
+export function nativeAccessibilityState(state?: {
+	disabled?: boolean
+	selected?: boolean
+	checked?: boolean
+}): string | undefined {
+	if (state?.disabled) {
+		return 'disabled'
+	}
+
+	if (state?.selected) {
+		return 'selected'
+	}
+
+	if (state?.checked === true) {
+		return 'checked'
+	}
+
+	if (state?.checked === false) {
+		return 'unchecked'
+	}
+
+	return undefined
+}

package/src/escape-props.web.ts

@@ -0,0 +1,25 @@
+/** Apply DOM escape props after the primitive's own props. Dash-named keys
+ *  are attributes; other keys use the DOM property where available. */
+export function applyEscapeProps(element: any, props: { web?: any }): void {
+	if (!element || !props.web) {
+		return
+	}
+
+	for (const [key, value] of Object.entries(props.web)) {
+		if (key.includes('-')) {
+			if (value == null || value === false) {
+				element.removeAttribute(key)
+			} else {
+				element.setAttribute(key, value === true ? '' : String(value))
+			}
+		} else if (key in element) {
+			try {
+				element[key] = value
+			} catch {
+				element.setAttribute(key, String(value))
+			}
+		} else if (value != null) {
+			element.setAttribute(key, String(value))
+		}
+	}
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export { Lottie } from './Lottie.tsrx'
+export type { LottieEvent, LottieFit, LottieHandle, LottieProps } from './props'

package/src/index.web.ts

@@ -0,0 +1,2 @@
+export { Lottie } from './Lottie.web.tsrx'
+export type { LottieEvent, LottieFit, LottieHandle, LottieProps } from './props'