@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/theme.jsx

@@ -0,0 +1,62 @@
+import { c as _c } from "react/compiler-runtime";
+import { createContext, useContext, useSyncExternalStore } from "react";
+import { getThemeVersion, subscribeTheme } from "./configureTheme";
+import { tokens } from "./tokens";
+import { ThemeVersionContext } from "./useScheme";
+export const DEFAULT_ACCENT = "#db2777";
+const NativeUiContext = createContext({
+  largerText: false,
+  accentColor: DEFAULT_ACCENT
+});
+export function NativeUiProvider(t0) {
+  const $ = _c(9);
+  const {
+    largerText: t1,
+    accentColor: t2,
+    children
+  } = t0;
+  const largerText = t1 === undefined ? false : t1;
+  const accentColor = t2 === undefined ? DEFAULT_ACCENT : t2;
+  const themeVersion = useSyncExternalStore(subscribeTheme, getThemeVersion, getThemeVersion);
+  let t3;
+  if ($[0] !== accentColor || $[1] !== largerText) {
+    t3 = {
+      largerText,
+      accentColor
+    };
+    $[0] = accentColor;
+    $[1] = largerText;
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  let t4;
+  if ($[3] !== children || $[4] !== themeVersion) {
+    t4 = <ThemeVersionContext.Provider value={themeVersion}>{children}</ThemeVersionContext.Provider>;
+    $[3] = children;
+    $[4] = themeVersion;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  let t5;
+  if ($[6] !== t3 || $[7] !== t4) {
+    t5 = <NativeUiContext.Provider value={t3}>{t4}</NativeUiContext.Provider>;
+    $[6] = t3;
+    $[7] = t4;
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+  return t5;
+}
+export function useNativeUi() {
+  return useContext(NativeUiContext);
+}
+export function useLargerText() {
+  return useContext(NativeUiContext).largerText;
+}
+export function useAccentColor() {
+  return useContext(NativeUiContext).accentColor;
+}
+export { tokens };

package/dist/toastChrome.js

@@ -0,0 +1,110 @@
+/**
+ * The `Toaster` look, from the web `SonnerToaster` at its default density
+ * (`createToasterClassNames` in `sonner.tsx`) with `toastIcons="filled24"`
+ * (`sonner-icons.tsx`). No React Native import, so the tests can load this
+ * file.
+ */
+import { palette, withAlpha } from "./palette";
+import { tokens } from "./tokens";
+/** Web `rounded-lg` (`--radius`, 16), the default `toastRadius`. */
+export const TOAST_RADIUS = tokens.radius.lg;
+
+/**
+ * The web `smooth-shadow-ring-md`: a 1 px ring in the border colour at 60%
+ * (`color-mix(in srgb, var(--color-border) 60%, transparent)`) and a
+ * `0 4px 12px rgb(0 0 0 / 0.08)` drop shadow. Native draws the ring as a
+ * border, so the painted toast is the web toast plus its ring.
+ */
+export const TOAST_RING = {
+  width: 1,
+  alpha: 0.6
+};
+export const TOAST_SHADOW = {
+  offsetY: 4,
+  blur: 12,
+  opacity: 0.08
+};
+
+/**
+ * Fill, ring and radius of a toast. The fill is the web `glass-panel-strong`,
+ * the flat `--overlay` (`palette.overlay`), with no blur.
+ */
+export function toastSurfaceStyle(scheme) {
+  return {
+    backgroundColor: palette.overlay[scheme],
+    borderColor: withAlpha(tokens.color.border[scheme], TOAST_RING.alpha),
+    borderWidth: TOAST_RING.width,
+    borderRadius: TOAST_RADIUS
+  };
+}
+
+/**
+ * The drop shadow as a style: `boxShadow` on Android and web, the shadow
+ * props on iOS. The iOS radius is half the CSS blur, as a CSS blur is twice
+ * the Gaussian deviation.
+ */
+export function toastShadowStyle(os) {
+  const {
+    offsetY,
+    blur,
+    opacity
+  } = TOAST_SHADOW;
+  if (os === "ios") {
+    return {
+      shadowColor: tokens.color.black,
+      shadowOffset: {
+        width: 0,
+        height: offsetY
+      },
+      shadowOpacity: opacity,
+      shadowRadius: blur / 2
+    };
+  }
+  return {
+    boxShadow: `0px ${offsetY}px ${blur}px rgba(0, 0, 0, ${opacity})`
+  };
+}
+/** Web `h-6 w-6`. */
+export const TOAST_ICON_SIZE = 24;
+
+/**
+ * The web `filledToastIcons`, path for path: filled shapes painted in the
+ * variant colour, with no stroke. `error` keeps the web 20 × 20 viewBox and
+ * `warning` its even-odd fill.
+ */
+export const TOAST_ICONS = {
+  success: {
+    viewBox: "0 0 24 24",
+    d: "M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z"
+  },
+  info: {
+    viewBox: "0 0 24 24",
+    d: "M12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22ZM12.75 16C12.75 16.41 12.41 16.75 12 16.75C11.59 16.75 11.25 16.41 11.25 16L11.25 11C11.25 10.59 11.59 10.25 12 10.25C12.41 10.25 12.75 10.59 12.75 11L12.75 16ZM11.08 7.62C11.13 7.49 11.2 7.39 11.29 7.29C11.39 7.2 11.5 7.13 11.62 7.08C11.74 7.03 11.87 7 12 7C12.13 7 12.26 7.03 12.38 7.08C12.5 7.13 12.61 7.2 12.71 7.29C12.8 7.39 12.87 7.49 12.92 7.62C12.97 7.74 13 7.87 13 8C13 8.13 12.97 8.26 12.92 8.38C12.87 8.5 12.8 8.61 12.71 8.71C12.61 8.8 12.5 8.87 12.38 8.92C12.14 9.02 11.86 9.02 11.62 8.92C11.5 8.87 11.39 8.8 11.29 8.71C11.2 8.61 11.13 8.5 11.08 8.38C11.03 8.26 11 8.13 11 8C11 7.87 11.03 7.74 11.08 7.62Z"
+  },
+  warning: {
+    viewBox: "0 0 24 24",
+    d: "M3 10.417C3 7.219 3 5.62 3.378 5.082C3.755 4.545 5.258 4.03 8.265 3.001L8.838 2.805C10.405 2.268 11.188 2 12 2C12.812 2 13.595 2.268 15.162 2.805L15.735 3.001C18.742 4.03 20.245 4.545 20.622 5.082C21 5.62 21 7.22 21 10.417V11.991C21 17.629 16.761 20.366 14.101 21.527C13.38 21.842 13.02 22 12 22C10.98 22 10.62 21.842 9.899 21.527C7.239 20.365 3 17.63 3 11.991V10.417ZM12 7.25C12.1989 7.25 12.3897 7.32902 12.5303 7.46967C12.671 7.61032 12.75 7.80109 12.75 8V12C12.75 12.1989 12.671 12.3897 12.5303 12.5303C12.3897 12.671 12.1989 12.75 12 12.75C11.8011 12.75 11.6103 12.671 11.4697 12.5303C11.329 12.3897 11.25 12.1989 11.25 12V8C11.25 7.80109 11.329 7.61032 11.4697 7.46967C11.6103 7.32902 11.8011 7.25 12 7.25ZM12 16C12.2652 16 12.5196 15.8946 12.7071 15.7071C12.8946 15.5196 13 15.2652 13 15C13 14.7348 12.8946 14.4804 12.7071 14.2929C12.5196 14.1054 12.2652 14 12 14C11.7348 14 11.4804 14.1054 11.2929 14.2929C11.1054 14.4804 11 14.7348 11 15C11 15.2652 11.1054 15.5196 11.2929 15.7071C11.4804 15.8946 11.7348 16 12 16Z",
+    evenOdd: true
+  },
+  error: {
+    viewBox: "0 0 20 20",
+    d: "M17.51 3.85L11.57 0.42C10.6 -0.14 9.4 -0.14 8.42 0.42L2.49 3.85C1.52 4.41 0.919998 5.45 0.919998 6.58V13.42C0.919998 14.54 1.52 15.58 2.49 16.15L8.43 19.58C9.4 20.14 10.6 20.14 11.58 19.58L17.52 16.15C18.49 15.59 19.09 14.55 19.09 13.42V6.58C19.08 5.45 18.48 4.42 17.51 3.85ZM9.25 5.75C9.25 5.34 9.59 5 10 5C10.41 5 10.75 5.34 10.75 5.75V11C10.75 11.41 10.41 11.75 10 11.75C9.59 11.75 9.25 11.41 9.25 11V5.75ZM10.92 14.63C10.87 14.75 10.8 14.86 10.71 14.96C10.52 15.15 10.27 15.25 10 15.25C9.87 15.25 9.74 15.22 9.62 15.17C9.49 15.12 9.39 15.05 9.29 14.96C9.2 14.86 9.13 14.75 9.07 14.63C9.02 14.51 9 14.38 9 14.25C9 13.99 9.1 13.73 9.29 13.54C9.39 13.45 9.49 13.38 9.62 13.33C9.99 13.17 10.43 13.26 10.71 13.54C10.8 13.64 10.87 13.74 10.92 13.87C10.97 13.99 11 14.12 11 14.25C11 14.38 10.97 14.51 10.92 14.63Z"
+  }
+};
+
+/**
+ * Icon colour per variant: the web `text-success`, `text-destructive` (the
+ * `--danger` token), `text-warning` and `text-primary`.
+ */
+export function toastIconColor(variant, scheme) {
+  switch (variant) {
+    case "success":
+      return palette.success[scheme];
+    case "error":
+      return palette.danger[scheme];
+    case "warning":
+      return palette.warning[scheme];
+    case "info":
+      return palette.primary[scheme];
+  }
+}

package/dist/toastDrag.js

@@ -0,0 +1,51 @@
+import { createContext } from "react";
+
+/**
+ * The rules of a toast's drag to dismiss, as plain numbers, so they stay
+ * testable apart from the gesture. A toast enters down from the top edge, so
+ * it leaves the same way: up. `dy` is the drag's travel in points (up
+ * negative) and `vy` the finger's speed in points per second (the Gesture
+ * Handler unit). Each rule is a worklet, so the drag runs it on the UI thread.
+ */
+
+/** Vertical travel (pt) before a drag takes the toast: a tap still presses it. */
+export const TOAST_DRAG_ACTIVE_OFFSET_Y = 8;
+
+/** A flick up at this speed (pt/s) dismisses the toast, however short the drag. */
+const FLICK_VELOCITY = 500;
+
+/** How far ahead (s) the release velocity carries the toast when deciding to dismiss it. */
+const PROJECTION_S = 0.2;
+
+/** How far a downward pull may move the toast: it is already as low as it goes. */
+const DOWN_REACH = 24;
+
+/**
+ * Where the toast sits for a drag of `dy`: it follows the finger up 1:1, and
+ * down it meets growing resistance, up to `DOWN_REACH`.
+ */
+export function toastDragOffset(dy) {
+  "worklet";
+
+  if (dy <= 0) return dy;
+  return DOWN_REACH * (1 - 1 / (1 + dy / (DOWN_REACH * 2)));
+}
+
+/**
+ * Whether a released drag dismisses the toast: a quick flick up, or a drag
+ * whose position, carried on by its speed, passes half the toast's height.
+ * A slow, short drag springs back.
+ */
+export function toastDragDismisses(dy, vy, height) {
+  "worklet";
+
+  if (dy >= 0) return false;
+  if (vy <= -FLICK_VELOCITY) return true;
+  return dy + Math.min(0, vy) * PROJECTION_S < -height / 2;
+}
+/**
+ * The Gesture Handler toast drag, from `@vvedantb/native-ui/gesture-handler`
+ * (`GestureHandlerProvider`). A context, so only that entry imports
+ * `react-native-gesture-handler`; without it a toast closes on a tap only.
+ */
+export const ToastDragContext = createContext(null);

package/dist/toastStore.js

@@ -0,0 +1,54 @@
+// Module-level toast queue behind `toast()` and `<Toaster />`. No React Native
+// imports, so it runs anywhere (tests, non-component code).
+
+/** At most this many toasts show; the oldest drop first. */
+export const MAX_TOASTS = 3;
+export const DEFAULT_TOAST_DURATION = 4000;
+let toasts = [];
+let counter = 0;
+const listeners = new Set();
+function emit() {
+  for (const listener of listeners) listener();
+}
+export function subscribeToasts(listener) {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+export function getToasts() {
+  return toasts;
+}
+function show(variant, title, options = {}) {
+  const id = options.id ?? `toast-${++counter}`;
+  const item = {
+    id,
+    variant,
+    title,
+    description: options.description,
+    duration: options.duration ?? (variant === "loading" ? Infinity : DEFAULT_TOAST_DURATION),
+    action: options.action
+  };
+  toasts = toasts.some(toast => toast.id === id) ? toasts.map(toast => toast.id === id ? item : toast) : [...toasts, item].slice(-MAX_TOASTS);
+  emit();
+  return id;
+}
+
+/**
+ * Shows a toast and returns its id. The sonner-style shape of the web `toast`:
+ * `toast("Saved")`, `toast.success(...)`, `toast.error(...)`, `toast.warning(...)`,
+ * `toast.info(...)`, `toast.loading(...)` and `toast.dismiss(id?)`. Needs one
+ * `<Toaster />` mounted near the app root.
+ */
+export const toast = Object.assign((title, options) => show("default", title, options), {
+  success: (title, options) => show("success", title, options),
+  error: (title, options) => show("error", title, options),
+  warning: (title, options) => show("warning", title, options),
+  info: (title, options) => show("info", title, options),
+  loading: (title, options) => show("loading", title, options),
+  /** Closes one toast, or every toast without an id. */
+  dismiss(id) {
+    toasts = id === undefined ? [] : toasts.filter(toast => toast.id !== id);
+    emit();
+  }
+});

package/dist/tokens.js

@@ -0,0 +1,70 @@
+/**
+ * JS tokens for React Native: colours, radii and spacing (1rem = 16).
+ *
+ * Copy of `packages/ui/tokens/src/native.ts`, kept here so native-ui has no
+ * dependency on the web package. A test in `@vvedantb/ui` and one in this
+ * package fail when the two differ below this header: change both together.
+ *
+ * The neutrals and `radius.field` match `tokens.css` (oklch → sRGB hex); a
+ * test converts `tokens.css` and fails when they drift. `fill` and `hairline`
+ * are native glass chrome with no web token. `radius.card` has no web token
+ * either; `docs/native-ui-parity.md` lists it. The web semantic colours
+ * (primary, danger, success, warning) are in `palette.ts`.
+ */
+export const tokens = {
+  color: {
+    background: {
+      light: "#f5f5f5",
+      dark: "#060606"
+    },
+    foreground: {
+      light: "#181818",
+      dark: "#fcfcfc"
+    },
+    muted: {
+      light: "#727272",
+      dark: "#a0a0a0"
+    },
+    border: {
+      light: "#dedede",
+      dark: "#292929"
+    },
+    surface: {
+      light: "#ffffff",
+      dark: "#181818"
+    },
+    surfaceSecondary: {
+      light: "#efefef",
+      dark: "#242323"
+    },
+    surfaceCard: {
+      light: "#f8f8f8",
+      dark: "#242323"
+    },
+    separator: {
+      light: "#e4e4e4",
+      dark: "#222222"
+    },
+    white: "#ffffff",
+    black: "#000000",
+    hairline: {
+      light: "rgba(255, 255, 255, 0.7)",
+      dark: "rgba(255, 255, 255, 0.12)"
+    },
+    fill: {
+      light: "rgba(255, 255, 255, 0.86)",
+      dark: "rgba(24, 24, 24, 0.88)"
+    }
+  },
+  radius: {
+    lg: 16,
+    field: 10,
+    md: 14,
+    sm: 12,
+    card: 24,
+    pill: 999
+  },
+  spacing: {
+    unit: 16
+  }
+};

package/dist/typography.js

@@ -0,0 +1,40 @@
+/** The four font families: one per weight, as the app loads them. */
+
+/**
+ * The font family names JS styles use, Instrument Sans by default (the
+ * Expo Google Fonts names, as `INSTRUMENT_SANS` in tailwind-preset.cjs).
+ * `configureTheme({ font })` writes into this object, and components read it at
+ * render, so do not copy a value out at import.
+ */
+export const fontFamily = {
+  regular: "InstrumentSans_400Regular",
+  medium: "InstrumentSans_500Medium",
+  semibold: "InstrumentSans_600SemiBold",
+  bold: "InstrumentSans_700Bold"
+};
+
+/**
+ * NativeWind classes for the four faces (Instrument Sans by default). The app
+ * loads the font files and maps these classes to them (see README, and the
+ * preset's `font` option). Literal strings, so Tailwind's source scan
+ * generates them.
+ */
+export const fontClass = {
+  regular: "font-instrument-sans",
+  medium: "font-instrument-sans-medium",
+  semibold: "font-instrument-sans-semibold",
+  bold: "font-instrument-sans-bold"
+};
+
+/**
+ * `AppWordmark` geometry, the same numbers as the web `AppWordmark` and
+ * `.landing-wordmark-text`: Instrument Sans 500, letter spacing -0.02em, icon
+ * 1.4x the font size, gap 0.2em. A test checks them against the web source.
+ */
+export const WORDMARK = {
+  fontClass: fontClass.medium,
+  fontWeight: 500,
+  letterSpacingEm: -0.02,
+  iconScale: 1.4,
+  gapEm: 0.2
+};

package/dist/useReduceMotion.js

@@ -0,0 +1,32 @@
+import { c as _c } from "react/compiler-runtime";
+import { useEffect, useState } from "react";
+import { AccessibilityInfo } from "react-native";
+import { useReducedMotion } from "react-native-reanimated";
+
+/**
+ * The system Reduce Motion setting (iOS) or Remove animations (Android). The
+ * first value is Reanimated's synchronous read, so an overlay that mounts open
+ * does not animate once before the setting loads. Later changes come from
+ * `AccessibilityInfo`.
+ */
+export function useReduceMotion() {
+  const $ = _c(2);
+  const initial = useReducedMotion();
+  const [enabled, setEnabled] = useState(initial);
+  let t0;
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      const subscription = AccessibilityInfo.addEventListener("reduceMotionChanged", setEnabled);
+      return () => subscription.remove();
+    };
+    t1 = [];
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t0 = $[0];
+    t1 = $[1];
+  }
+  useEffect(t0, t1);
+  return enabled;
+}

package/dist/useReduceTransparency.js

@@ -0,0 +1,27 @@
+import { c as _c } from "react/compiler-runtime";
+import { useEffect, useState } from "react";
+import { AccessibilityInfo, Platform } from "react-native";
+export function useReduceTransparency() {
+  const $ = _c(2);
+  const [enabled, setEnabled] = useState(false);
+  let t0;
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      if (Platform.OS !== "ios" || typeof AccessibilityInfo.isReduceTransparencyEnabled !== "function") {
+        return;
+      }
+      AccessibilityInfo.isReduceTransparencyEnabled().then(setEnabled);
+      const subscription = AccessibilityInfo.addEventListener("reduceTransparencyChanged", setEnabled);
+      return () => subscription.remove();
+    };
+    t1 = [];
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t0 = $[0];
+    t1 = $[1];
+  }
+  useEffect(t0, t1);
+  return enabled;
+}

package/dist/useScheme.js

@@ -0,0 +1,15 @@
+import { useColorScheme } from "nativewind";
+import { createContext, useContext } from "react";
+
+/**
+ * The number of `configureTheme` calls, given by `NativeUiProvider`. A part
+ * that reads it redraws after each call, so a palette set at run time shows
+ * at once, even under a memoised parent.
+ */
+export const ThemeVersionContext = createContext(0);
+
+/** Active colour scheme as a `tokens` / `palette` key. Redraws the caller after each `configureTheme`. */
+export function useScheme() {
+  useContext(ThemeVersionContext);
+  return useColorScheme().colorScheme === "dark" ? "dark" : "light";
+}

package/dist/video/InlineVideo.jsx

@@ -0,0 +1,115 @@
+import { c as _c } from "react/compiler-runtime";
+import { useState } from "react";
+import { Image, Pressable, StyleSheet, View } from "react-native";
+import { useVideoPlayer, VideoView } from "expo-video";
+import { IconPlayerPlayFilled } from "@tabler/icons-react-native";
+import { MEDIA } from "../media/imageGrid";
+import { withAlpha } from "../palette";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
+
+/** The box before playback: 16:9 unless the caller knows the video's shape. */
+export const INLINE_VIDEO_ASPECT = 16 / 9;
+/**
+ * An inline video on `expo-video`, as the web `VideoPreview`: no autoplay and
+ * sound on. Until the play button is pressed it is a still box (the poster,
+ * or black), so a list of replies holds no players; pressing it mounts the
+ * player, starts playback and shows the platform controls (play and pause,
+ * scrub, full screen). The box keeps one size throughout, letterboxing the
+ * video (`contain`). Nothing plays or moves on its own, so it needs no Reduce
+ * Motion branch.
+ *
+ * `@vvedantb/native-ui/video` is the only entry that imports `expo-video` (an
+ * optional peer).
+ */
+export function InlineVideo(t0) {
+  const $ = _c(12);
+  const {
+    url,
+    aspectRatio: t1,
+    posterUrl,
+    accessibilityLabel: t2,
+    testID
+  } = t0;
+  const aspectRatio = t1 === undefined ? INLINE_VIDEO_ASPECT : t1;
+  const accessibilityLabel = t2 === undefined ? "Play video" : t2;
+  const scheme = useScheme();
+  const [started, setStarted] = useState(false);
+  const t3 = MEDIA.outline[scheme];
+  let t4;
+  if ($[0] !== aspectRatio || $[1] !== t3) {
+    t4 = {
+      width: "100%",
+      aspectRatio,
+      borderRadius: MEDIA.radius,
+      borderWidth: 1,
+      borderColor: t3,
+      overflow: "hidden",
+      backgroundColor: tokens.color.black
+    };
+    $[0] = aspectRatio;
+    $[1] = t3;
+    $[2] = t4;
+  } else {
+    t4 = $[2];
+  }
+  let t5;
+  if ($[3] !== accessibilityLabel || $[4] !== posterUrl || $[5] !== started || $[6] !== url) {
+    t5 = started ? <Player url={url} /> : <Pressable accessibilityRole="button" accessibilityLabel={accessibilityLabel} onPress={() => setStarted(true)} className="flex-1 items-center justify-center active:opacity-80">{posterUrl ? <Image source={{
+        uri: posterUrl
+      }} resizeMode="cover" style={StyleSheet.absoluteFill} /> : null}<View className="h-14 w-14 items-center justify-center rounded-full" style={{
+        backgroundColor: withAlpha(tokens.color.black, 0.5),
+        borderWidth: 1,
+        borderColor: withAlpha(tokens.color.white, 0.2)
+      }}><IconPlayerPlayFilled size={24} color={tokens.color.white} /></View></Pressable>;
+    $[3] = accessibilityLabel;
+    $[4] = posterUrl;
+    $[5] = started;
+    $[6] = url;
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  let t6;
+  if ($[8] !== t4 || $[9] !== t5 || $[10] !== testID) {
+    t6 = <View testID={testID} style={t4}>{t5}</View>;
+    $[8] = t4;
+    $[9] = t5;
+    $[10] = testID;
+    $[11] = t6;
+  } else {
+    t6 = $[11];
+  }
+  return t6;
+}
+
+/** Mounted on the first press: one player per pressed video, released when the row unmounts. */
+function Player(t0) {
+  const $ = _c(3);
+  const {
+    url
+  } = t0;
+  const player = useVideoPlayer(url, _temp);
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = {
+      enable: true
+    };
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  let t2;
+  if ($[1] !== player) {
+    t2 = <VideoView player={player} nativeControls={true} contentFit="contain" fullscreenOptions={t1} allowsPictureInPicture={false} style={StyleSheet.absoluteFill} />;
+    $[1] = player;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  return t2;
+}
+function _temp(created) {
+  created.loop = false;
+  created.play();
+}