@pixodesk/svg-animator-rn 1.0.41 → 1.0.44

package/README.md

@@ -114,7 +114,7 @@ Four ways to drive playback. Pick one — they are mutually exclusive.
 
 ### Autoplay
 
-Uses the trigger defined in the animation document (`startOn: 'load'` plays on mount):
+Uses the trigger defined in the animation document (`start: 'load'` plays once it is on screen):
 
 ```tsx
 <PixodeskSvgAnimator doc={doc} autoplay />
@@ -181,7 +181,7 @@ const [time, setTime] = useState(0);
 | `duration` | `number` | Shortcut for `timeline.duration` (ms) |
 | `delay` | `number` | Shortcut for `timeline.delay` (ms) |
 | `iterations` | `number \| 'infinite'` | Shortcut for `timeline.iterations` |
-| `startOn` | `PxStartOn` | Shortcut for `timeline.trigger.startOn`. `mouseOver` has no touch equivalent and is ignored |
+| `start` | `PxTriggerStart` | Shortcut for `timeline.trigger.start`. `mouseOver` has no touch equivalent and is ignored |
 | `onPlay` | `() => void` | Called on play/resume |
 | `onPause` | `() => void` | Called on pause |
 | `onFinish` | `() => void` | Called when the animation reaches its end — every iteration played, or `finish()` was called |
@@ -224,7 +224,7 @@ renderer never reaches JavaScript and cannot be caught — see
 |---|---|
 | `timeline.engine` | Accepted inside `timeline` but ignored. There is no Web Animations API on React Native; playback is always native-driven. |
 | `timeline.frameRate` | Ignored. The screen's own refresh rate is used. The player does not compute values frame by frame: when the document loads it works out the animated values in advance, as a list of snapshots (60 per second of animation), and each screen refresh shows the nearest one. The closest thing to a frame rate is how many snapshots per second are prepared, which the player fixes at 60. |
-| `startOn: 'mouseOver'` | Has no touch equivalent, so it is not honored. The other four values (`load`, `click`, `scrollIntoView`, `programmatic`) work as they do on the web, from the file or from the `startOn` prop. |
+| `start: 'mouseOver'` | Has no touch equivalent, so it is not honored. The other three values (`load`, `click`, `none`) work as they do on the web, from the file or from the `start` prop. |
 | `className` / `style` | Not accepted — you cannot style the component itself. It fills whatever `View` you put it in, so to set its size, give that `View` a `width` and `height`. Styling *inside* the document (`style` on an element in the JSON) is supported. |
 | `onRemove` | Never called. On the web it tells you the animator was thrown away; here there is nothing to tell — when the component leaves the screen, React removes it and everything it created. To run code at that moment, use a `useEffect` cleanup function in your own component. |
 
@@ -326,13 +326,13 @@ player sees plain nodes. **All are supported:**
 | `duration`, `delay`, `iterations` (incl. `'infinite'`) | ✅ | |
 | `direction` — all four values | ✅ | |
 | `fillMode` — `forwards` / `backwards` / `both` / `none` | ✅ | |
-| `trigger.finishAction: 'reset'` | ✅ | |
+| `trigger.finish: 'reset'` | ✅ | |
 | `play` / `pause` / `cancel` / `finish` | ✅ | |
 | `setCurrentTime` — jump to a time, including **while playing** | ✅ | playback continues from the new point |
 | `setPlaybackRate` — faster, slower and **reverse** (negative) | ✅ | composes with `direction` |
 | Trigger `load` / `programmatic` | ✅ | |
-| Trigger `click` | ✅ | wrapped in a `Pressable`; a second tap applies `outAction` |
-| Trigger `scrollIntoView` | ✅ | visibility sampled by measuring against the window (React Native has no `IntersectionObserver`); honors `scrollIntoViewThreshold` and `outAction` |
+| Trigger `click` | ✅ | wrapped in a `Pressable`; a second tap pauses |
+| Visibility gate | ✅ | visibility sampled by measuring against the window (React Native has no `IntersectionObserver`); honors `visibilityThreshold` and `offScreen` |
 | Trigger `mouseOver` | ❌ | no touch equivalent — use `click`, or drive `play` yourself |
 | `timeline.frameRate` | n/a | reanimated runs at the display refresh rate; the player prepares 60 snapshots per second of animation |
 | `timeline.engine` (`auto` / `native` / `js`) | n/a | there is no Web Animations API on React Native — playback is always native-driven |

package/dist/index.cjs

@@ -398,7 +398,7 @@ var PxRnErrorBoundary = class extends import_react2.Component {
   }
   componentDidCatch(error, info) {
     var _a, _b;
-    ((_a = this.props.diag) != null ? _a : (0, import_internal4.createDiagnostics)(void 0, "[PixodeskSvgAnimator]")).error(import_svg_animator_core3.PxDiagnosticKind.internal, error, { componentStack: (_b = info == null ? void 0 : info.componentStack) != null ? _b : void 0 });
+    ((_a = this.props.diag) != null ? _a : (0, import_internal4.createDiagnostics)(void 0, "[PixodeskSvgAnimator]")).error(import_svg_animator_core3.PxDiagnosticKind.internal, import_svg_animator_core3.PxDiagnosticCode.rnBoundaryCaught, error, (_b = info == null ? void 0 : info.componentStack) != null ? _b : void 0);
   }
   componentDidUpdate(prev) {
     if (this.state.error && prev.children !== this.props.children) {
@@ -558,14 +558,14 @@ var EMPTY_TRACKS = {
   elements: []
 };
 function compileDocument(doc, overrides, diag) {
-  const { timeline, resetTimeline, duration, delay, iterations, startOn } = overrides;
+  const { timeline, resetTimeline, duration, delay, iterations, start } = overrides;
   const warnings = (0, import_svg_animator_core4.validateNodeEffects)(doc);
-  for (const w of warnings) diag.warn(import_svg_animator_core4.PxDiagnosticKind.document, "effects shape: " + w);
+  for (const w of warnings) diag.warn(import_svg_animator_core4.PxDiagnosticKind.document, import_svg_animator_core4.PxDiagnosticCode.effectsShape, w);
   (0, import_internal6.reportDocumentDiagnostics)(doc, "[PixodeskSvgAnimator]");
-  const patch = (0, import_svg_animator_core4.foldTimelineOverride)(timeline, { duration, delay, iterations, startOn });
+  const patch = (0, import_svg_animator_core4.foldTimelineOverride)(timeline, { duration, delay, iterations, start });
   if (patch !== void 0 || resetTimeline) {
     const applied = (0, import_svg_animator_core4.applyAnimatorConfig)(doc, patch != null ? patch : {}, { resetTimeline: !!resetTimeline });
-    for (const w of applied.warnings) diag.warn(import_svg_animator_core4.PxDiagnosticKind.usage, "timeline override: " + w);
+    for (const w of applied.warnings) diag.warn(import_svg_animator_core4.PxDiagnosticKind.usage, import_svg_animator_core4.PxDiagnosticCode.timelineOverrideIgnored, w);
     doc = applied.doc;
   }
   let prepared = (0, import_svg_animator_core4.materializeAllInTree)(doc, import_svg_animator_core4.PxTimelineEngine.native);
@@ -583,7 +583,7 @@ function PixodeskSvgAnimator({
   duration,
   delay,
   iterations,
-  startOn,
+  start,
   // (`progress` prop aliased — the name is taken by the internal reanimated SharedValue)
   autoplay,
   play,
@@ -613,15 +613,15 @@ function PixodeskSvgAnimator({
     try {
       return compileDocument(
         doc,
-        { timeline, resetTimeline, duration, delay, iterations, startOn },
+        { timeline, resetTimeline, duration, delay, iterations, start },
         makeDiag()
       );
     } catch (e) {
       const error = e instanceof Error ? e : new Error(String(e));
-      makeDiag().error(import_svg_animator_core4.PxDiagnosticKind.internal, error, { phase: "compile" });
+      makeDiag().error(import_svg_animator_core4.PxDiagnosticKind.internal, import_svg_animator_core4.PxDiagnosticCode.rnCompileFailed, error);
       return { doc: null, tracks: EMPTY_TRACKS, error };
     }
-  }, [doc, timelineKey, resetTimeline, duration, delay, iterations, startOn]);
+  }, [doc, timelineKey, resetTimeline, duration, delay, iterations, start]);
   const tracks = compiled.tracks;
   const totalDuration = (0, import_svg_animator_core4.progressSpanMs)(tracks.duration, tracks.iterations);
   const seekCeiling = (0, import_svg_animator_core4.seekCeilingMs)(tracks.duration, tracks.iterations);
@@ -707,7 +707,7 @@ function PixodeskSvgAnimator({
     },
     setPlaybackRate: (rate) => {
       if (!(0, import_svg_animator_core4.isValidPlaybackRate)(rate)) {
-        makeDiag().warn(import_svg_animator_core4.PxDiagnosticKind.usage, import_svg_animator_core4.PX_RATE_REJECTED);
+        makeDiag().warn(import_svg_animator_core4.PxDiagnosticKind.usage, import_svg_animator_core4.PxDiagnosticCode.rateRejected);
         return;
       }
       rateRef.current = rate;
@@ -738,12 +738,13 @@ function PixodeskSvgAnimator({
   };
   (0, import_react3.useImperativeHandle)(apiRef, () => api, [compiled]);
   const trigger = (0, import_svg_animator_core4.resolveTrigger)(compiled.doc ? (_a = (0, import_svg_animator_core4.getAnimatorConfig)(compiled.doc)) == null ? void 0 : _a.trigger : void 0);
-  const effectiveStartOn = trigger.startOn;
-  const effectiveOutAction = trigger.outAction;
+  const effectiveStart = trigger.start;
+  const effectiveOffScreen = trigger.offScreen;
+  const gated = effectiveOffScreen !== "continue";
   const { mode: compMode, warnings: modeWarnings } = (0, import_svg_animator_core4.resolveControlMode)({ progress: progressProp, time, play, pause, autoplay });
   (0, import_react3.useEffect)(() => {
     const diag = makeDiag();
-    for (const w of modeWarnings) diag.warn(import_svg_animator_core4.PxDiagnosticKind.usage, w);
+    for (const w of modeWarnings) diag.warn(import_svg_animator_core4.PxDiagnosticKind.usage, import_svg_animator_core4.PxDiagnosticCode.controlPropsConflict, w);
   }, [modeWarnings.join("|")]);
   (0, import_react3.useEffect)(() => {
     if (compMode === import_svg_animator_core4.PxControlMode.fixedTime) {
@@ -758,15 +759,15 @@ function PixodeskSvgAnimator({
       else api.play();
       return;
     }
-    if (compMode === import_svg_animator_core4.PxControlMode.autoplay && effectiveStartOn === "load") {
+    if (compMode === import_svg_animator_core4.PxControlMode.autoplay && effectiveStart === "load" && !gated) {
       api.play();
     }
   }, [compiled, compMode, autoplay, play, pause, progressProp, time]);
   const scrollRef = (0, import_react3.useRef)(null);
   const inViewRef = (0, import_react3.useRef)(false);
   (0, import_react3.useEffect)(() => {
-    if (!autoplay || effectiveStartOn !== "scrollIntoView") return;
-    const threshold = trigger.scrollIntoViewThreshold;
+    if (!autoplay || !gated) return;
+    const threshold = trigger.visibilityThreshold;
     inViewRef.current = false;
     const check = () => {
       const node = scrollRef.current;
@@ -782,17 +783,14 @@ function PixodeskSvgAnimator({
         if (isIn) {
           if (rateRef.current < 0) api.setPlaybackRate(Math.abs(rateRef.current));
           api.play();
-        } else if (effectiveOutAction === "reset") api.cancel();
-        else if (effectiveOutAction === "reverse") {
-          api.setPlaybackRate(-Math.abs(rateRef.current || 1));
-          api.play();
-        } else if (effectiveOutAction !== "continue") api.pause();
+        } else if (effectiveOffScreen === "reset") api.cancel();
+        else api.pause();
       });
     };
     check();
     const id = setInterval(check, 200);
     return () => clearInterval(id);
-  }, [compiled, autoplay, effectiveStartOn, effectiveOutAction]);
+  }, [compiled, autoplay, gated, effectiveOffScreen]);
   (0, import_react3.useEffect)(() => {
     return () => {
       (0, import_react_native_reanimated.cancelAnimation)(progress);
@@ -854,30 +852,24 @@ function PixodeskSvgAnimator({
     } catch (e) {
       const error = e instanceof Error ? e : new Error(String(e));
       renderErrorRef.current = error;
-      makeDiag().error(import_svg_animator_core4.PxDiagnosticKind.internal, error, { phase: "render" });
+      makeDiag().error(import_svg_animator_core4.PxDiagnosticKind.internal, import_svg_animator_core4.PxDiagnosticCode.rnRenderFailed, error);
       return null;
     }
   }, [compiled, trackById]);
   (0, import_react3.useEffect)(() => {
     const diag = makeDiag();
-    for (const w of warningsRef.current) diag.warn(import_svg_animator_core4.PxDiagnosticKind.platform, w);
+    for (const w of warningsRef.current) diag.warn(import_svg_animator_core4.PxDiagnosticKind.platform, import_svg_animator_core4.PxDiagnosticCode.rnUnsupported, w);
   }, [root]);
   const failure = (_b = compiled.error) != null ? _b : renderErrorRef.current;
   if (failure) return fallback ? fallback(failure) : null;
   let content = root;
-  if (autoplay && effectiveStartOn === "scrollIntoView" && root) {
-    content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { ref: scrollRef, collapsable: false, children: root });
-  } else if (autoplay && effectiveStartOn === "click" && root) {
+  if (autoplay && effectiveStart === "click" && root) {
     content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_react_native.Pressable,
       {
         onPress: () => {
           if (playingRef.current) {
-            if (effectiveOutAction === "reset") api.cancel();
-            else if (effectiveOutAction === "reverse") {
-              api.setPlaybackRate(-Math.abs(rateRef.current || 1));
-              api.play();
-            } else if (effectiveOutAction !== "continue") api.pause();
+            api.pause();
           } else {
             if (rateRef.current < 0) api.setPlaybackRate(Math.abs(rateRef.current));
             api.play();
@@ -887,6 +879,9 @@ function PixodeskSvgAnimator({
       }
     );
   }
+  if (autoplay && gated && content) {
+    content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { ref: scrollRef, collapsable: false, children: content });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PxRnErrorBoundary, { fallback, diag: makeDiag(), children: content });
 }
 var PixodeskSvgAnimator_default = PixodeskSvgAnimator;