@vvedantb/native-ui 0.13.0 → 0.17.1

package/src/video/InlineVideo.tsx

@@ -0,0 +1,91 @@
+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;
+
+export type InlineVideoProps = {
+  /** An http(s) or local video URL. */
+  url: string;
+  /** Width over height of the box, fixed so nothing moves when the video loads. Default 16:9. */
+  aspectRatio?: number;
+  /** An image to show before playback. Without it the box is black with the play button. */
+  posterUrl?: string;
+  /** Names the play button. Default "Play video". */
+  accessibilityLabel?: string;
+  testID?: string;
+};
+
+/**
+ * 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({ url, aspectRatio = INLINE_VIDEO_ASPECT, posterUrl, accessibilityLabel = "Play video", testID }: InlineVideoProps) {
+  const scheme = useScheme();
+  const [started, setStarted] = useState(false);
+  return (
+    <View
+      testID={testID}
+      style={{
+        width: "100%",
+        aspectRatio,
+        borderRadius: MEDIA.radius,
+        borderWidth: 1,
+        borderColor: MEDIA.outline[scheme],
+        overflow: "hidden",
+        backgroundColor: tokens.color.black,
+      }}
+    >
+      {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>
+      )}
+    </View>
+  );
+}
+
+/** Mounted on the first press: one player per pressed video, released when the row unmounts. */
+function Player({ url }: { url: string }) {
+  const player = useVideoPlayer(url, (created) => {
+    created.loop = false;
+    created.play();
+  });
+  return (
+    <VideoView
+      player={player}
+      nativeControls
+      contentFit="contain"
+      fullscreenOptions={{ enable: true }}
+      allowsPictureInPicture={false}
+      style={StyleSheet.absoluteFill}
+    />
+  );
+}

package/src/webview/HtmlView.tsx

@@ -0,0 +1,91 @@
+import { useEffect, useRef, useState } from "react";
+import { View } from "react-native";
+import { WebView } from "react-native-webview";
+import { HTML_VIEW_HEIGHT_SCRIPT, htmlViewNavigation, htmlViewPostScript, parseHtmlViewHeight } from "./htmlView";
+
+export type HtmlViewProps = {
+  /** A whole HTML document, shown as written. */
+  html: string;
+  /** Names the view for TalkBack and VoiceOver. */
+  title: string;
+  /** The box height. Pass the page's own (`onContentHeight`) once known; the page scrolls inside past it. */
+  height: number;
+  /** Lets the page run scripts. Default `true`, as an `allow-scripts` iframe. */
+  javaScriptEnabled?: boolean;
+  /** A top-level http(s) link the page opened: show it outside, such as in the system browser. */
+  onOpenLink: (url: string) => void;
+  /** The page's content height in points, each time it changes. */
+  onContentHeight?: (height: number) => void;
+  /**
+   * A JSON message for the page, delivered as a `message` event once it has
+   * loaded and again whenever it changes (a theme switch, say), without a reload.
+   */
+  hostMessage?: string;
+  testID?: string;
+};
+
+/**
+ * An HTML page in a sandboxed `react-native-webview`, as the web's sandboxed
+ * `srcdoc` iframe: transparent on the screen behind it, scripts on, and no
+ * way out of its own document. A top-level link goes to `onOpenLink`; a
+ * popup (`target="_blank"`, `window.open`) does too; any other navigation is
+ * dropped. Incognito, with no DOM storage, cookies or file access, so the page
+ * keeps nothing between views and reaches nothing of the app's. It reports its
+ * height (`onContentHeight`) for a box that fits it.
+ *
+ * `@vvedantb/native-ui/webview` is the only entry that imports
+ * `react-native-webview` (an optional peer). On web, `HtmlView.web.tsx` draws a
+ * sandboxed iframe instead.
+ */
+export function HtmlView({ html, title, height, javaScriptEnabled = true, onOpenLink, onContentHeight, hostMessage, testID }: HtmlViewProps) {
+  const ref = useRef<WebView>(null);
+  const [loaded, setLoaded] = useState(false);
+
+  // The page is an external system: push each host message into it once it can listen.
+  useEffect(() => {
+    if (loaded && hostMessage) ref.current?.injectJavaScript(htmlViewPostScript(hostMessage));
+  }, [loaded, hostMessage]);
+
+  const openIfWeb = (url: string) => {
+    if (htmlViewNavigation(url, true) === "open") onOpenLink(url);
+  };
+
+  return (
+    <View testID={testID} style={{ height }}>
+      <WebView
+        ref={ref}
+        source={{ html }}
+        accessibilityLabel={title}
+        // Every URL reaches `onShouldStartLoadWithRequest`: outside the
+        // whitelist the WebView would hand it to `Linking` itself (an
+        // `intent:` link would open another app).
+        originWhitelist={["*"]}
+        javaScriptEnabled={javaScriptEnabled}
+        injectedJavaScriptBeforeContentLoaded={javaScriptEnabled ? HTML_VIEW_HEIGHT_SCRIPT : undefined}
+        onMessage={(event) => {
+          const reported = parseHtmlViewHeight(event.nativeEvent.data);
+          if (reported !== null) onContentHeight?.(reported);
+        }}
+        onShouldStartLoadWithRequest={(request) => {
+          const action = htmlViewNavigation(request.url, request.isTopFrame);
+          if (action === "open") onOpenLink(request.url);
+          return action === "load";
+        }}
+        setSupportMultipleWindows
+        onOpenWindow={(event) => openIfWeb(event.nativeEvent.targetUrl)}
+        onLoadEnd={() => setLoaded(true)}
+        incognito
+        domStorageEnabled={false}
+        thirdPartyCookiesEnabled={false}
+        sharedCookiesEnabled={false}
+        allowFileAccess={false}
+        allowFileAccessFromFileURLs={false}
+        allowUniversalAccessFromFileURLs={false}
+        mixedContentMode="never"
+        mediaPlaybackRequiresUserAction
+        nestedScrollEnabled
+        style={{ backgroundColor: "transparent" }}
+      />
+    </View>
+  );
+}

package/src/webview/HtmlView.web.tsx

@@ -0,0 +1,21 @@
+import { View } from "react-native";
+import type { HtmlViewProps } from "./HtmlView";
+
+/**
+ * `HtmlView` on web (`react-native-webview` has no web build): the page in a
+ * sandboxed `srcdoc` iframe at `height`, scrolling inside. Scripts, forms and
+ * popups only, with no `allow-same-origin`. It does not report a height or
+ * deliver `hostMessage`; the native view does.
+ */
+export function HtmlView({ html, title, height, javaScriptEnabled = true, testID }: HtmlViewProps) {
+  return (
+    <View testID={testID} style={{ height }}>
+      <iframe
+        title={title}
+        srcDoc={html}
+        sandbox={javaScriptEnabled ? "allow-scripts allow-forms allow-popups" : ""}
+        style={{ border: 0, width: "100%", height: "100%", background: "transparent" }}
+      />
+    </View>
+  );
+}

package/src/webview/htmlView.ts

@@ -0,0 +1,45 @@
+/**
+ * The pure half of `HtmlView`: which navigations the page may make, and the
+ * script that reports the page's height to the app.
+ */
+
+/** What `HtmlView` does with a navigation: let it load, hand it to `onOpenLink`, or drop it. */
+export type HtmlViewNavigation = "load" | "open" | "block";
+
+/**
+ * The page never leaves its own document. Its first load (`about:`) and its
+ * frames load; a top-level http(s) link goes to `onOpenLink` (the system
+ * browser), as the web's sandboxed frame opens links in a new tab; any other
+ * scheme (`javascript:`, `intent:`, `file:`, `data:`) is dropped.
+ */
+export function htmlViewNavigation(url: string, isTopFrame: boolean): HtmlViewNavigation {
+  if (!isTopFrame) return "load";
+  if (url.startsWith("about:")) return "load";
+  return /^https?:\/\//i.test(url) ? "open" : "block";
+}
+
+const HEIGHT_PREFIX = "native-ui:height:";
+
+/**
+ * Runs in the page before its own scripts. It posts the document's height
+ * (`native-ui:height:<px>`) whenever it changes: the full scroll height when
+ * the content is taller than the view, else the content's own height, so the
+ * view can both grow and shrink to fit.
+ */
+export const HTML_VIEW_HEIGHT_SCRIPT = `(function(){var h,o;function z(){var r=document.documentElement,b=window.ReactNativeWebView;if(!r||!b)return;var v=Math.ceil(r.scrollHeight>r.clientHeight?r.scrollHeight:r.getBoundingClientRect().height);if(v===h)return;h=v;b.postMessage(${JSON.stringify(HEIGHT_PREFIX)}+v)}if(window.ResizeObserver){o=new ResizeObserver(z);o.observe(document.documentElement)}document.addEventListener("DOMContentLoaded",function(){if(o&&document.body)o.observe(document.body);z()});window.addEventListener("load",z)})();true;`;
+
+/** The height in a message from `HTML_VIEW_HEIGHT_SCRIPT`; `null` for any other message. */
+export function parseHtmlViewHeight(data: string): number | null {
+  if (!data.startsWith(HEIGHT_PREFIX)) return null;
+  const height = Number(data.slice(HEIGHT_PREFIX.length));
+  return Number.isFinite(height) && height > 0 ? height : null;
+}
+
+/**
+ * Script that delivers `message` (a JSON string) to the page as a `message`
+ * event from its own window, as a host frame's `postMessage` would. In a
+ * WebView the page is the top window, so `event.source === window.parent`.
+ */
+export function htmlViewPostScript(message: string): string {
+  return `window.postMessage(JSON.parse(${JSON.stringify(message)}),"*");true;`;
+}