@oxy.so/bloom 6.0.0 → 6.2.0

package/src/sticker/lottie-module.ts

@@ -0,0 +1,109 @@
+/**
+ * The optional-peer boundary for the NATIVE Lottie player, `lottie-react-native`.
+ *
+ * Same contract as `media-flight/expo-video-module.ts`, and for the same reason:
+ * Bloom ships no native code, so an app that shows no animated sticker must not
+ * be made to install a native module. The `require` is a string literal as a
+ * direct statement of a `try` block — the one shape Metro collects as an
+ * optional dependency — and the `typeof require` guard stays OUTSIDE the try.
+ *
+ * Whatever player loads is adapted to {@link LottiePlayerProps}, so `Sticker`
+ * drives the native and the web player (`lottie-module.web.ts`) the same way.
+ */
+import { createElement, useEffect, useRef, type ComponentType } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import type { LottiePlayerProps } from './types';
+
+declare const require: (moduleName: string) => unknown;
+
+/** The slice of `lottie-react-native`'s `LottieView` Bloom depends on. */
+interface LottieViewLikeProps {
+  source: { uri: string };
+  autoPlay?: boolean;
+  loop?: boolean;
+  resizeMode?: 'contain';
+  onAnimationLoaded?: () => void;
+  onAnimationFailure?: (error: string) => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+interface LottieViewHandle {
+  pause(): void;
+  resume(): void;
+}
+
+type LottieViewLike = ComponentType<LottieViewLikeProps & { ref?: unknown }>;
+
+let providedPlayer: ComponentType<LottiePlayerProps> | null | undefined;
+let loadedPlayer: ComponentType<LottiePlayerProps> | null | undefined;
+let hasWarned = false;
+
+/** Tests (and an app with its own build of the player) hand one in here. */
+export function provideLottiePlayer(player: ComponentType<LottiePlayerProps> | null): void {
+  providedPlayer = player;
+}
+
+/** Forget the loaded player — for tests. */
+export function resetLottiePlayer(): void {
+  providedPlayer = undefined;
+  loadedPlayer = undefined;
+  hasWarned = false;
+}
+
+function isComponent(candidate: unknown): candidate is LottieViewLike {
+  if (typeof candidate === 'function') return true;
+  return typeof candidate === 'object' && candidate !== null && '$$typeof' in candidate;
+}
+
+function adapt(LottieView: LottieViewLike): ComponentType<LottiePlayerProps> {
+  function NativeLottiePlayer({ uri, loop, paused, onLoad, onError, style }: LottiePlayerProps) {
+    const ref = useRef<LottieViewHandle | null>(null);
+    useEffect(() => {
+      if (paused) ref.current?.pause();
+      else ref.current?.resume();
+    }, [paused]);
+    return createElement(LottieView, {
+      ref,
+      source: { uri },
+      autoPlay: !paused,
+      loop,
+      resizeMode: 'contain',
+      onAnimationLoaded: onLoad,
+      onAnimationFailure: onError,
+      style,
+    });
+  }
+  return NativeLottiePlayer;
+}
+
+/** The native player, adapted, or `null` when `lottie-react-native` is not installed. */
+export function loadLottiePlayer(): ComponentType<LottiePlayerProps> | null {
+  if (providedPlayer !== undefined && providedPlayer !== null) return providedPlayer;
+  if (loadedPlayer !== undefined) return loadedPlayer;
+  loadedPlayer = null;
+
+  if (typeof require === 'undefined') return loadedPlayer;
+
+  try {
+    const loaded = require('lottie-react-native') as { default?: unknown } | null | undefined;
+    const view = isComponent(loaded) ? loaded : loaded?.default;
+    if (isComponent(view)) loadedPlayer = adapt(view);
+  } catch {
+    loadedPlayer = null;
+  }
+  return loadedPlayer;
+}
+
+/** One dev warning per module lifetime: a still sticker looks like a working one. */
+export function warnLottieUnavailable(): void {
+  if (process.env.NODE_ENV === 'production' || hasWarned) return;
+  hasWarned = true;
+  // eslint-disable-next-line no-console
+  console.warn(
+    '[Bloom] An animated Sticker fell back to its still image: the optional peer ' +
+      '`lottie-react-native` could not be loaded. Install it (`npx expo install ' +
+      'lottie-react-native`) to animate stickers.',
+  );
+}
+

package/src/sticker/lottie-module.web.ts

@@ -0,0 +1,107 @@
+/**
+ * The optional-peer boundary for the WEB Lottie player,
+ * `@lottiefiles/dotlottie-react` — the web half of `lottie-module.ts`, with the
+ * same loading contract and the same adapted surface.
+ *
+ * dotLottie draws with ThorVG compiled to WebAssembly, which plays both `.lottie`
+ * archives and plain Lottie JSON, and exposes its instance through a ref
+ * callback rather than props: load, failure and pause all go through it.
+ */
+import { createElement, useEffect, useRef, type ComponentType } from 'react';
+
+import type { LottiePlayerProps } from './types';
+
+declare const require: (moduleName: string) => unknown;
+
+interface DotLottieInstance {
+  play(): void;
+  pause(): void;
+  addEventListener(event: 'load' | 'loadError', listener: () => void): void;
+  removeEventListener(event: 'load' | 'loadError', listener: () => void): void;
+}
+
+interface DotLottieReactLikeProps {
+  src: string;
+  autoplay?: boolean;
+  loop?: boolean;
+  dotLottieRefCallback?: (instance: DotLottieInstance | null) => void;
+  style?: unknown;
+}
+
+type DotLottieReactLike = ComponentType<DotLottieReactLikeProps>;
+
+let providedPlayer: ComponentType<LottiePlayerProps> | null | undefined;
+let loadedPlayer: ComponentType<LottiePlayerProps> | null | undefined;
+let hasWarned = false;
+
+export function provideLottiePlayer(player: ComponentType<LottiePlayerProps> | null): void {
+  providedPlayer = player;
+}
+
+/** Forget the loaded player — for tests. */
+export function resetLottiePlayer(): void {
+  providedPlayer = undefined;
+  loadedPlayer = undefined;
+  hasWarned = false;
+}
+
+function isComponent(candidate: unknown): candidate is DotLottieReactLike {
+  if (typeof candidate === 'function') return true;
+  return typeof candidate === 'object' && candidate !== null && '$$typeof' in candidate;
+}
+
+function adapt(DotLottieReact: DotLottieReactLike): ComponentType<LottiePlayerProps> {
+  function WebLottiePlayer({ uri, loop, paused, onLoad, onError, style }: LottiePlayerProps) {
+    const instance = useRef<DotLottieInstance | null>(null);
+    const callbacks = useRef({ onLoad, onError });
+    callbacks.current = { onLoad, onError };
+
+    useEffect(() => {
+      if (paused) instance.current?.pause();
+      else instance.current?.play();
+    }, [paused]);
+
+    return createElement(DotLottieReact, {
+      src: uri,
+      autoplay: !paused,
+      loop,
+      style,
+      dotLottieRefCallback: (next) => {
+        if (instance.current === next) return;
+        instance.current = next;
+        if (!next) return;
+        next.addEventListener('load', () => callbacks.current.onLoad?.());
+        next.addEventListener('loadError', () => callbacks.current.onError?.('load failed'));
+      },
+    });
+  }
+  return WebLottiePlayer;
+}
+
+/** The web player, adapted, or `null` when `@lottiefiles/dotlottie-react` is not installed. */
+export function loadLottiePlayer(): ComponentType<LottiePlayerProps> | null {
+  if (providedPlayer !== undefined && providedPlayer !== null) return providedPlayer;
+  if (loadedPlayer !== undefined) return loadedPlayer;
+  loadedPlayer = null;
+
+  if (typeof require === 'undefined') return loadedPlayer;
+
+  try {
+    const loaded = require('@lottiefiles/dotlottie-react') as { DotLottieReact?: unknown } | null | undefined;
+    if (isComponent(loaded?.DotLottieReact)) loadedPlayer = adapt(loaded.DotLottieReact);
+  } catch {
+    loadedPlayer = null;
+  }
+  return loadedPlayer;
+}
+
+export function warnLottieUnavailable(): void {
+  if (process.env.NODE_ENV === 'production' || hasWarned) return;
+  hasWarned = true;
+  // eslint-disable-next-line no-console
+  console.warn(
+    '[Bloom] An animated Sticker fell back to its still image: the optional peer ' +
+      '`@lottiefiles/dotlottie-react` could not be loaded. Install it to animate ' +
+      'stickers on the web.',
+  );
+}

package/src/sticker/types.ts

@@ -0,0 +1,45 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import type { MessageMediaSource } from '../message-media/types';
+
+export interface StickerProps {
+  /**
+   * URL of the Lottie animation (JSON or `.lottie`). Omit it for a still
+   * sticker; the `fallback` is then the sticker.
+   */
+  animation?: string;
+  /**
+   * The still image of the same sticker. Shown while the animation loads, when
+   * it cannot play (no Lottie player installed, the file failed), and always
+   * when the person asked for reduced motion.
+   */
+  fallback: MessageMediaSource;
+  /** Square edge. Default 128. */
+  size?: number;
+  /** Default true. */
+  loop?: boolean;
+  /** Hold the current frame — e.g. while the sticker is scrolled out of view. */
+  paused?: boolean;
+  /**
+   * A sticker IS its meaning; with no name it announces "Sticker" and conveys
+   * nothing. Pass what the pack author gave it — its emoji or its word.
+   */
+  accessibilityLabel?: string;
+  /**
+   * Hide it from assistive technology because its container already names it —
+   * `StickerMessage` does, on its pressable. Default false.
+   */
+  decorative?: boolean;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+/** What `Sticker` needs from a Lottie player, whichever platform supplies it. */
+export interface LottiePlayerProps {
+  uri: string;
+  loop: boolean;
+  paused: boolean;
+  onLoad?: () => void;
+  onError?: (error: string) => void;
+  style?: StyleProp<ViewStyle>;
+}