@rafaelaugusto/jolt 0.1.0-beta.0 → 0.1.0-beta.10

package/src/driver/ios.ts

@@ -1,13 +1,26 @@
-import type { View } from '@nativescript/core'
-import type { Property } from '../properties.js'
+import { iosPlayback } from './ios-playback.js'
+import { isDecorationProperty } from '../decoration.js'
+import {
+  playIOSDecoration,
+  presentedIOSDecoration,
+  syncIOSDecoration,
+} from './ios-decoration.js'
+import { Application, type View } from '@nativescript/core'
+import { stopView } from '../engine.js'
+import type { NumericProperty } from '../properties.js'
+import { isColorProperty } from '../color.js'
+import { playIOSColor, presentedIOSColor } from './ios-color.js'
 import { after, type Driver } from './index.js'
+import { hasInteractionSurface } from '../interaction-surface.js'
+import { retainInteractiveLayout } from './ios-layout.js'
 
 interface Handle {
-  layers: CALayer[]
-  key: string
+  stop(): void
+  elapsed(): number
+  control(elapsed: number, paused: boolean): void
 }
 
-const keyPaths: Record<Property, string> = {
+const keyPaths: Record<NumericProperty, string> = {
   opacity: 'opacity',
   x: 'transform.translation.x',
   y: 'transform.translation.y',
@@ -48,41 +61,197 @@ export function createIOSDriver(): Driver {
     now: () => CACurrentMediaTime() * 1000,
 
     play(view, track, startedAt, onEnd): Handle {
+      if (isDecorationProperty(track.property))
+        return playIOSDecoration(view, track, startedAt, onEnd)
+      if (isColorProperty(track.property))
+        return playIOSColor(view, track, startedAt, onEnd)
       const layers = layersOf(view)
       const key = `jolt:${track.property}`
       const rotation = track.property.startsWith('rotate')
+      if (hasInteractionSurface(view)) {
+        if (typeof JoltInteractiveAnimation === 'undefined')
+          throw new Error('Rebuild the iOS app to enable Jolt interaction surfaces.')
+        if (track.property === 'rotateX' || track.property === 'rotateY')
+          ensurePerspective(view, layers)
+        const releaseLayout = retainInteractiveLayout(view)
+        const suspend = () => stopView(view, [track.property])
+        const completed = (finished: boolean) => {
+          Application.off(Application.suspendEvent, suspend)
+          releaseLayout()
+          onEnd(finished)
+        }
+        let native: JoltInteractiveAnimation
+        try {
+          native =
+            JoltInteractiveAnimation.startViewLayersKeyPathValuesTimesDurationDelayRepeatReverseFinalValueStartedAtCompletion(
+              view.nativeViewProtected,
+              NSArray.arrayWithArray(layers),
+              keyPaths[track.property as NumericProperty],
+              NSArray.arrayWithArray(
+                track.values.map((value) => (rotation ? radians(value) : value)),
+              ),
+              NSArray.arrayWithArray(track.times as number[]),
+              track.duration,
+              track.delay,
+              track.repeat,
+              track.reverse,
+              rotation ? radians(track.to) : track.to,
+              startedAt,
+              completed,
+            )
+        } catch (error) {
+          releaseLayout()
+          throw error
+        }
+        Application.on(Application.suspendEvent, suspend)
+        return {
+          elapsed: () => native.elapsed,
+          control: (time, paused) => native.controlPaused(time, paused),
+          stop: () => native.cancel(),
+        }
+      }
+      const infinite = track.repeat === Infinity
       if (track.property === 'rotateX' || track.property === 'rotateY') {
         ensurePerspective(view, layers)
       }
 
-      const animation = CAKeyframeAnimation.animationWithKeyPath(keyPaths[track.property])
-      animation.values = NSArray.arrayWithArray(
-        track.values.map((value) => (rotation ? radians(value) : value)),
-      )
-      animation.keyTimes = NSArray.arrayWithArray(track.times as number[])
-      animation.duration = Math.max(track.duration, 1) / 1000
-      animation.beginTime = (startedAt + track.delay) / 1000
-      animation.fillMode = kCAFillModeBackwards
-      if (track.repeat > 0) {
-        animation.autoreverses = track.reverse
-        animation.repeatCount = track.reverse ? (track.repeat + 1) / 2 : track.repeat + 1
+      const timing = iosPlayback(track, startedAt)
+      let stopped = false,
+        generation = 0
+      const attach = () => {
+        const instance = ++generation
+        const animation = CAKeyframeAnimation.animationWithKeyPath(
+          keyPaths[track.property as NumericProperty],
+        )
+        // iOS 15+. The app must opt in through CADisableMinimumFrameDurationOnPhone.
+        if (animation.respondsToSelector('setPreferredFrameRateRange:')) {
+          const nativeView = view.nativeViewProtected as UIView
+          const screen = nativeView.window?.screen ?? UIScreen.mainScreen
+          const maximum = Math.min(120, screen.maximumFramesPerSecond)
+          animation.preferredFrameRateRange = CAFrameRateRangeMake(
+            Math.min(80, maximum),
+            maximum,
+            maximum,
+          )
+        }
+        animation.values = NSArray.arrayWithArray(
+          track.values.map((value) => (rotation ? radians(value) : value)),
+        )
+        animation.keyTimes = NSArray.arrayWithArray(track.times as number[])
+        animation.duration = Math.max(track.duration, 1) / 1000
+        // Keep infinite loops when iOS removes animations on backgrounding.
+        // They are removed explicitly when stopped or replaced.
+        if (track.repeat > 0) {
+          animation.autoreverses = track.reverse
+          animation.repeatCount = track.reverse
+            ? (track.repeat + 1) / 2
+            : track.repeat + 1
+        }
+
+        CATransaction.begin()
+        if (!timing.paused && !infinite)
+          CATransaction.setCompletionBlock(() => {
+            if (stopped || instance !== generation) return
+            stopped = true
+            onEnd()
+          })
+        for (const layer of layers) {
+          timing.configure(animation, layer)
+          layer.addAnimationForKey(animation, key)
+        }
+        CATransaction.commit()
       }
+      attach()
+      return {
+        elapsed: timing.elapsed,
+        control(time, paused) {
+          if (!stopped) {
+            timing.control(time, paused)
+            attach()
+          }
+        },
+        stop() {
+          if (stopped) return
+          stopped = true
+          generation++
+          for (const layer of layers) layer.removeAnimationForKey(key)
+          onEnd(false)
+        },
+      }
+    },
 
-      CATransaction.begin()
-      CATransaction.setCompletionBlock(onEnd)
-      for (const layer of layers) layer.addAnimationForKey(animation, key)
-      CATransaction.commit()
+    stop(_view, handle) {
+      ;(handle as Handle).stop()
+    },
+    control(_view, handle, elapsed, paused) {
+      ;(handle as Handle).control(elapsed, paused)
+    },
+    elapsed: (handle) => (handle as Handle).elapsed(),
 
-      return { layers, key }
+    sync(view, excluding) {
+      syncIOSDecoration(view, excluding)
+      if (view.nativeViewProtected && typeof JoltInteractiveAnimation !== 'undefined')
+        JoltInteractiveAnimation.syncViewExcluding(
+          view.nativeViewProtected,
+          excluding ? (keyPaths[excluding as NumericProperty] ?? null) : null,
+        )
     },
 
-    stop(_view, handle) {
-      const { layers, key } = handle as Handle
-      for (const layer of layers) layer.removeAnimationForKey(key)
+    presented(view, property) {
+      if (isDecorationProperty(property)) return presentedIOSDecoration(view, property)
+      if (isColorProperty(property)) return presentedIOSColor(view, property)
+      if (!view.nativeViewProtected || typeof JoltInteractiveAnimation === 'undefined')
+        return undefined
+      const value = JoltInteractiveAnimation.valueForViewKeyPath(
+        view.nativeViewProtected,
+        keyPaths[property],
+      )
+      if (value === null || value === undefined) return undefined
+      return property.startsWith('rotate') ? (value * 180) / Math.PI : Number(value)
     },
 
-    presented: () => undefined,
+    layoutFrame(view) {
+      const native = view.nativeViewProtected as UIView | undefined
+      if (!native) return undefined
+      const { width, height } = native.bounds.size
+      const { position, anchorPoint } = native.layer
+      return {
+        x: position.x - width * anchorPoint.x,
+        y: position.y - height * anchorPoint.y,
+        width,
+        height,
+      }
+    },
+
+    afterLayout(view, callback) {
+      const original = view.layout
+      const descriptor = Object.getOwnPropertyDescriptor(view, 'layout')
+      let active = true
+      const detach = () => {
+        active = false
+        if (view.layout !== wrapper) return
+        if (descriptor) Object.defineProperty(view, 'layout', descriptor)
+        else delete (view as Partial<View>).layout
+      }
+      const wrapper: View['layout'] = function (this: View, ...args) {
+        original.apply(this, args)
+        if (active) {
+          detach()
+          callback()
+        }
+      }
+      view.layout = wrapper
+      return detach
+    },
 
     after,
+
+    reducedMotion: () => UIAccessibilityIsReduceMotionEnabled(),
+
+    watchReducedMotion(callback) {
+      const name = UIAccessibilityReduceMotionStatusDidChangeNotification
+      const observer = Application.ios.addNotificationObserver(name, callback)
+      return () => Application.ios.removeNotificationObserver(observer, name)
+    },
   }
 }