@rafaelaugusto/jolt 0.1.0-beta.12 → 0.1.0-beta.13

package/src/engine.ts

@@ -1,11 +1,12 @@
 import {
   createClock,
+  registerPlayback,
   validateProgress,
   type PlaybackAnimation,
   type PlaybackClock,
   type PlaybackCommand,
 } from './playback.js'
-import type { View } from '@nativescript/core'
+import { Application, type View } from '@nativescript/core'
 import { getDriver } from './driver/index.js'
 import { playHaptics, type HapticOptions } from './haptics.js'
 import { readValue, writeValue, type Property } from './properties.js'
@@ -109,7 +110,9 @@ export class ViewAnimation implements PlaybackAnimation {
   private readyListener: (() => void) | undefined
   private readonly endless: boolean
   private readonly timingListeners = new Set<() => void>()
+  private readonly playbackChanged: () => void
   private timingChanged() {
+    this.playbackChanged()
     for (const callback of [...this.timingListeners]) callback()
   }
 
@@ -142,6 +145,7 @@ export class ViewAnimation implements PlaybackAnimation {
     if (this.settled) return
     if (!this.started) {
       this.pendingProgress = value
+      this.timingChanged()
       return
     }
     this.seekTime(this.duration * value)
@@ -280,7 +284,12 @@ export class ViewAnimation implements PlaybackAnimation {
     getDriver().stop(this.view, handle)
     this.playEntry(entry, elapsed)
   }
-  private unloaded = () => this.stop()
+  private unloaded = () => {
+    // NativeScript unloads the root view when iOS enters the background.
+    // An explicitly paused owner can resume after that temporary unload.
+    if (this._paused && Application.suspended) return
+    this.stop()
+  }
 
   constructor(
     readonly view: View,
@@ -295,6 +304,18 @@ export class ViewAnimation implements PlaybackAnimation {
           !Number.isFinite(plan.transition.curve.duration)),
     )
     this.finished = new Promise((resolve) => (this.resolve = resolve))
+    this.playbackChanged = registerPlayback(this, () => ({
+      position: this.pendingProgress,
+      time:
+        this.pendingProgress === undefined
+          ? this.time()
+          : this.pendingProgress * this.duration,
+      duration: this.duration,
+      paused: this._paused,
+      ready: this.ready,
+      settled: this.settled,
+      completed: this.settled && this.complete,
+    }))
     setArrival(this, new Promise<void>((resolve) => (this.arrive = resolve)))
     setArrivalTiming(this, {
       read: () => ({

package/src/image-effect.ts

@@ -43,6 +43,7 @@ export interface ImageEffectDiagnostics {
 export interface ImageEffect extends Animation {
   readonly effect: ImageEffectName
   readonly paused: boolean
+  readonly duration: number
   /** Finite progress; distortion rejects seeking because it follows native touch input. */
   progress: number
   readonly diagnostics: Readonly<ImageEffectDiagnostics>
@@ -157,7 +158,7 @@ class Effect implements ImageEffect {
     for (const event of ['loaded', 'layoutChanged']) image.on(event, this.schedule)
     for (const event of ['imageSourceChange', 'stretchChange'])
       image.on(event, this.changed)
-    image.on('unloaded', this.stop)
+    image.on('unloaded', this.unloaded)
     image.style.on('visibilityChange', this.visible)
     for (const event of surfaceChanges) image.style.on(event, this.changed)
     Application.on(Application.suspendEvent, this.suspend)
@@ -178,6 +179,9 @@ class Effect implements ImageEffect {
   get paused() {
     return this.userPaused
   }
+  get duration() {
+    return this.effect === 'distortion' ? Infinity : this.options.duration
+  }
   get progress() {
     return this.renderer?.progress ?? this.position
   }
@@ -240,7 +244,7 @@ class Effect implements ImageEffect {
     for (const event of ['loaded', 'layoutChanged']) this.image.off(event, this.schedule)
     for (const event of ['imageSourceChange', 'stretchChange'])
       this.image.off(event, this.changed)
-    this.image.off('unloaded', this.stop)
+    this.image.off('unloaded', this.unloaded)
     this.image.style.off('visibilityChange', this.visible)
     for (const event of surfaceChanges) this.image.style.off(event, this.changed)
     Application.off(Application.suspendEvent, this.suspend)
@@ -272,6 +276,10 @@ class Effect implements ImageEffect {
     this.suspended = true
     this.renderer?.pause()
   }
+  private unloaded = () => {
+    if (Application.suspended && this.userPaused) return
+    this.stop()
+  }
   private resume = () => {
     this.suspended = false
     this.schedule()

package/src/index.ts

@@ -1,3 +1,6 @@
+export { timeline } from './sequence.js'
+export type { TimelineAnimation, TimelineStep, PlayableAnimation } from './sequence.js'
+export { playbackProgress } from './motion-value.js'
 export { animate, decay, set, stop } from './animate.js'
 export { bind, motionValue, scrollValue } from './motion-value.js'
 export type {
@@ -7,7 +10,9 @@ export type {
   MapOptions,
   MotionValue,
   ScrollValue,
+  ValueAnimationOptions,
 } from './motion-value.js'
+export type { SubscribeOptions, ValueListener } from './value-observers.js'
 export { sequence } from './sequence.js'
 export type { Step, SequenceOptions, SequencePosition } from './sequence.js'
 export { press } from './press.js'

package/src/ios-plugin.d.ts

@@ -79,3 +79,36 @@ declare class JoltPhotoZoom extends NSObject {
   layout(): void
   stop(): void
 }
+
+declare class JoltPropertySink extends NSObject {
+  static scalarTargetKeyPath(target: NSObject, keyPath: string): JoltPropertySink
+  readonly dimensions: number
+  readonly alive: boolean
+  readonly compiled: boolean
+  read(): NSArray<number>
+  write(values: NSArray<number>): void
+  dispose(): void
+}
+declare class JoltPropertyPlayer extends NSObject {
+  static startSinkTimesValuesFinalValueDurationDelayRepeatReverseCompletion(
+    sink: JoltPropertySink,
+    times: NSArray<number>,
+    values: NSArray<number>,
+    finalValue: NSArray<number>,
+    duration: number,
+    delay: number,
+    repeat: number,
+    reverse: boolean,
+    completion: (completed: boolean) => void,
+  ): JoltPropertyPlayer
+  readonly elapsed: number
+  readonly frames: number
+  static activeCount(): number
+  controlPaused(time: number, paused: boolean): void
+  cancel(): void
+}
+declare class JoltReferenceProperties extends NSObject {
+  static mapCoordinate(target: NSObject): JoltPropertySink
+  static mapCamera(target: NSObject): JoltPropertySink
+  static scenePose(target: NSObject): JoltPropertySink
+}

package/src/motion-scope.ts

@@ -4,7 +4,7 @@ import { drag } from './drag.js'
 import { gradient } from './gradient.js'
 import { animateLayout, type LayoutOptions } from './layout.js'
 import type { SpringName } from './transition.js'
-import { sequence } from './sequence.js'
+import { sequence, timeline } from './sequence.js'
 import {
   motionStates,
   type MotionState,
@@ -38,6 +38,7 @@ export interface MotionScope {
   animate: typeof animate
   decay: typeof decay
   sequence: typeof sequence
+  timeline: typeof timeline
   press: typeof press
   drag: typeof drag
   /** Removed with the scope; suspending it stops a gradient animation where it is. */
@@ -197,6 +198,9 @@ export function motionScope(): MotionScope {
     decay(...args) {
       return startOwned(() => decay(...args))
     },
+    timeline(...args) {
+      return startOwned(() => timeline(...args))
+    },
     sequence(...args) {
       return startOwned(() => sequence(...args))
     },