feat(mobile): play audio inline and open shared files in the viewer#21353

@@ -39,12 +59,25 @@ export function resolveMarkdownMediaPreview(
         ? mediaUrlReference(path)
         : mediaFileReference(path, input.workspaceRoot);
     const name = reference && mediaReferenceFileName(reference);
-    if (name && /\.pdf$/i.test(name)) {
-      const common = { kind: "pdf" as const, name, mimeType: "application/pdf" };
+    const extension = name?.slice(name.lastIndexOf(".")).toLowerCase() ?? "";
+    const isFile = classified._tag === "WorkspaceFile" || /^\.[a-z0-9]+$/i.test(extension);
+    if (name && isFile && mediaMimeTypeFromExtension(extension) === null) {

@@ -612,22 +600,62 @@ function MessageAttachmentFile(props: {
     })();
   };
 
+  const openAttachment = () =>
+    isPdf
+      ? props.onPressPreview({
+          kind: "pdf",
+          name: attachment.name,
+          environmentId: props.environmentId,
+          resource: {
+            _tag: "attachment",
+            attachmentId: attachment.id,
+            fileName: attachment.name,
+            mimeType: "application/pdf",
+          },
+          sourceIdentifier,
+        })
+      : navigation.navigate("ThreadAttachment", {
+          environmentId: String(props.environmentId),
+          ...(selectedThread ? { threadId: String(selectedThread.id) } : {}),
+          attachmentId: attachment.id,
+          name: attachment.name,
+          mimeType: attachment.mimeType,
+          sizeBytes: String(attachment.sizeBytes),
+        });
+  const inlineKind = inlineFilePreviewKind(attachment);
+  if (inlineKind) {
+    return (
+      <PresentationSource identifier={sourceIdentifier}>
+        <ThreadInlineFilePreview
+          key={attachment.id}
+          source={{
+            kind: "document",
+            name: attachment.name,
+            mimeType: attachment.mimeType,
+            environmentId: props.environmentId,
+            resource: {
+              _tag: "attachment",
+              attachmentId: attachment.id,
+              fileName: attachment.name,
+              mimeType: attachment.mimeType,
+              disposition: "inline",
+            },
+          }}
+          sizeBytes={attachment.sizeBytes}
+          onOpen={openAttachment}
+          onLongPress={() => shareFile(sourceIdentifier)}
+        />
+      </PresentationSource>
+    );
+  }
+
   if (videoType !== null) {
-    const sourceIdentifier = `attachment:${props.environmentId}:${attachment.id}`;
     return (
-      <VideoAttachmentTile
-        name={attachment.name}
-        sourceIdentifier={sourceIdentifier}
-        thumbnailSource={thumbnailUrl}
-        actionsSource={
-          attachmentVideoPreviewSource(props.environmentId, attachment, sourceIdentifier)
-            .actionsSource
-        }
-        disabled={opening || httpBaseUrl === null}
-        onPress={(sourceIdentifier) => props.onPressVideo(attachment, sourceIdentifier)}
-        className="my-1 rounded-2xl"
-        style={{ width: 224, maxWidth: "100%", aspectRatio: 16 / 9 }}
-      />
+      <View className="my-1" style={{ width: 224, maxWidth: "100%" }}>
+        <ThreadMarkdownVideo

@@ -0,0 +1,298 @@
+/* oxlint-disable react/no-array-index-key -- Preview cells have stable positions and may contain identical values. */
+import { useIsFocused } from "@react-navigation/native";
+import { formatAttachmentSize } from "@t3tools/client-runtime/state/attachments";
+import { filePreviewDelimiter } from "@t3tools/shared/delimitedPreview";
+import { useAudioPlayer, useAudioPlayerStatus } from "expo-audio";
+import { fetch } from "expo/fetch";
+import { useCallback, useContext, useEffect, useRef, useState, type ReactNode } from "react";
+import { AppState, Pressable, View } from "react-native";
+import type { FilePreviewSource } from "../../components/FilePreviewModal";
+import { filePreviewKey } from "../../lib/filePreviewGallery";
+import { PierreEntryIcon } from "../../components/PierreEntryIcon";
+import { AppText as Text } from "../../components/ui/AppText";
+import { SymbolView } from "../../components/ui/AppSymbol";
+import { INLINE_TABLE_MAX_BYTES, readInlineTable } from "../../lib/filePreview";
+import { useFullscreenVideoOpen, useMediaAudioSessionHold } from "../../lib/videoAudioSession";
+import { useRefreshAssetUrl } from "../../state/assets";
+import { ThreadMediaVisibleContext } from "./ThreadMarkdownVideo";
+
+type InlineKind = "audio" | "pdf" | "table";
+type PreviewProps = {
+  readonly kind: InlineKind;
+  readonly source: FilePreviewSource;
+  readonly sizeBytes?: number;
+  readonly onOpen: () => void;
+  readonly onLongPress?: () => void;
+};
+
+function FileCardHeader(props: PreviewProps) {
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={`Open ${props.source.name}`}
+      onPress={props.onOpen}
+      onLongPress={props.onLongPress}
+      className="h-[72px] flex-row items-center gap-3 p-3 active:bg-subtle"
+    >
+      <View className="h-12 w-10 shrink-0 items-center justify-center rounded-lg bg-subtle">
+        <PierreEntryIcon path={props.source.name ?? "file"} kind="file" size={26} />
+      </View>
+      <View className="min-w-0 flex-1 gap-1">
+        <Text className="text-sm font-t3-medium text-foreground" numberOfLines={1}>
+          {props.source.name}
+        </Text>
+        <Text className="text-xs text-foreground-muted" numberOfLines={1}>
+          {props.kind === "table" ? "Table · first 5 rows" : props.kind === "pdf" ? "PDF" : "Audio"}
+          {props.sizeBytes !== undefined ? ` · ${formatAttachmentSize(props.sizeBytes)}` : ""}
+        </Text>
+      </View>
+      <SymbolView name="chevron.right" size={12} tintColorClassName="accent-foreground-muted" />
+    </Pressable>
+  );
+}
+
+function timestamp(seconds: number) {
+  const value = Number.isFinite(seconds) ? Math.max(0, Math.floor(seconds)) : 0;
+  return `${Math.floor(value / 60)}:${String(value % 60).padStart(2, "0")}`;
+}
+
+function InlineAudio(props: PreviewProps & { readonly resolveUri: () => Promise<string | null> }) {
+  // An empty source keeps native buffering off until the user explicitly plays.
+  const player = useAudioPlayer(null, { updateInterval: 500, downloadFirst: false });
+  const status = useAudioPlayerStatus(player);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(false);
+  const active = useRef(true);
+  const opening = useRef(false);
+  const playRequested = useRef(false);
+  useMediaAudioSessionHold(status.playing);
+  const fullscreenVideoOpen = useFullscreenVideoOpen();
+  useEffect(() => {
+    if (fullscreenVideoOpen) {
+      playRequested.current = false;
+      player.pause();
+    }
+  }, [fullscreenVideoOpen, player]);
+  useEffect(() => {
+    active.current = true;
+    const subscription = AppState.addEventListener("change", (state) => {
+      if (state !== "active") {
+        playRequested.current = false;
+        player.pause();
+      }
+    });
+    return () => {
+      active.current = false;
+      playRequested.current = false;
+      subscription.remove();
+    };
+  }, [player]);
+  const toggle = async () => {
+    if (opening.current) return;
+    if (status.playing) {
+      playRequested.current = false;
+      return player.pause();
+    }
+    playRequested.current = true;
+    opening.current = true;
+    setLoading(true);
+    setError(false);
+    try {
+      if (!status.isLoaded || status.error) {
+        const uri = await props.resolveUri();
+        if (!active.current || AppState.currentState !== "active") return;
+        if (!uri) throw new Error("Audio unavailable");
+        player.replace({ uri });
+      } else if (status.didJustFinish || status.currentTime >= status.duration) {
+        await player.seekTo(0);
+      }
+      if (active.current && playRequested.current && AppState.currentState === "active")
+        player.play();
+    } catch {
+      if (active.current) setError(true);
+    } finally {
+      opening.current = false;
+      if (active.current) setLoading(false);
+    }
+  };

@@ -39,12 +57,22 @@ export function resolveMarkdownMediaPreview(
         ? mediaUrlReference(path)
         : mediaFileReference(path, input.workspaceRoot);
     const name = reference && mediaReferenceFileName(reference);
-    if (name && /\.pdf$/i.test(name)) {
-      const common = { kind: "pdf" as const, name, mimeType: "application/pdf" };
+    const extension = name?.slice(name.lastIndexOf(".")).toLowerCase() ?? "";
+    const isFile = classified._tag === "WorkspaceFile" || /^\.[a-z0-9]+$/i.test(extension);

@@ -203,7 +205,8 @@ function defaultViewMode(path: string | null): FileViewMode {
     (isWorkspaceBrowserPreviewPath(path) ||
       isWorkspaceImagePreviewPath(path) ||
       isVideoPreviewFile(path) ||
-      isAudioPreviewFile(path))
+      isAudioPreviewFile(path) ||
+      filePreviewDelimiter({ name: path }) !== null)

@@ -39,12 +60,38 @@ export function resolveMarkdownMediaPreview(
         ? mediaUrlReference(path)
         : mediaFileReference(path, input.workspaceRoot);
     const name = reference && mediaReferenceFileName(reference);
-    if (name && /\.pdf$/i.test(name)) {
-      const common = { kind: "pdf" as const, name, mimeType: "application/pdf" };
+    const extension = name?.slice(name.lastIndexOf(".")).toLowerCase() ?? "";
+    const isFile = classified._tag === "WorkspaceFile" || /^\.[a-z0-9]+$/i.test(extension);
+    if (
+      name &&
+      isFile &&
+      mediaMimeTypeFromExtension(extension) === null &&
+      (classified._tag !== "Direct" ||
+        input.imageEmbed ||
+        Object.hasOwn(DOCUMENT_MIME_TYPES, extension) ||
+        audioMimeTypeFromExtension(extension) !== null)
+    ) {

@@ -39,12 +59,38 @@ export function resolveMarkdownMediaPreview(
         ? mediaUrlReference(path)
         : mediaFileReference(path, input.workspaceRoot);
     const name = reference && mediaReferenceFileName(reference);
-    if (name && /\.pdf$/i.test(name)) {
-      const common = { kind: "pdf" as const, name, mimeType: "application/pdf" };
+    const extension = name?.slice(name.lastIndexOf(".")).toLowerCase() ?? "";
+    const isFile = classified._tag === "WorkspaceFile" || /^\.[a-z0-9]+$/i.test(extension);
+    if (
+      name &&
+      isFile &&
+      mediaMimeTypeFromExtension(extension) === null &&
+      (classified._tag !== "Direct" ||
+        input.imageEmbed ||
+        Object.hasOwn(DOCUMENT_MIME_TYPES, extension) ||
+        audioMimeTypeFromExtension(extension) !== null)
+    ) {
+      const audioMimeType = audioMimeTypeFromExtension(extension);
+      const kind = audioMimeType
+        ? "audio"
+        : extension === ".pdf"
+          ? "pdf"
+          : classified._tag === "WorkspaceFile"
+            ? "file"
+            : "document";

@@ -0,0 +1,142 @@
+import { setAudioModeAsync, setIsAudioActiveAsync } from "expo-audio";
+
+type AudioSessionToken = {
+  readonly kind: "playback" | "recording";
+  readonly onCancel?: () => void;
+  readonly onRelease?: () => void;
+  released: boolean;
+};
+
+let owner: AudioSessionToken | null = null;
+let pending = Promise.resolve();
+
+// Native session calls are async. Finish an old activation before releasing it
+// or configuring its successor, so it cannot reactivate a released session.
+function enqueue<T>(operation: () => Promise<T>): Promise<T> {
+  const result = pending.then(operation);
+  pending = result.then(
+    () => {},
+    () => {},
+  );
+  return result;
+}
+
+export function disposeAudioPlayer(player: { pause(): void; release(): void }): void {
+  void enqueue(async () => {
+    try {
+      player.pause();
+    } finally {
+      player.release();
+    }
+  }).catch(() => {});
+}
+
+export function acquireAudioSession(
+  kind: AudioSessionToken["kind"],
+  onCancel?: () => void,
+  onRelease?: () => void,
+) {
+  const token: AudioSessionToken = { kind, onCancel, onRelease, released: false };
+  if (kind === "playback" && owner?.kind === "recording" && !owner.released) return token;
+  const previous = owner;
+  owner = token;
+  if (previous && !previous.released) previous.onCancel?.();
+  return token;
+}
+
+export function isAudioSessionOwner(token: AudioSessionToken): boolean {
+  return owner === token && !token.released;
+}
+
+export function activateAudioSession(
+  token: AudioSessionToken,
+  nativePlayback = false,
+): Promise<boolean> {
+  return enqueue(async () => {
+    if (!isAudioSessionOwner(token)) return false;
+    // Video configures and activates its own native session, including moviePlayback on iOS.
+    if (nativePlayback) return true;
+    await setAudioModeAsync({
+      allowsRecording: token.kind === "recording",
+      interruptionMode: "doNotMix",
+      playsInSilentMode: true,
+      shouldPlayInBackground: false,
+    });
+    if (!isAudioSessionOwner(token)) return false;
+    await setIsAudioActiveAsync(true);
+    return isAudioSessionOwner(token);
+  });
+}
+
+export function releaseAudioSession(token: AudioSessionToken): Promise<void> {
+  token.released = true;
+  return enqueue(async () => {
+    if (owner !== token) return;
+    try {
+      if (token.kind === "recording") await setAudioModeAsync({ allowsRecording: false });
+    } finally {
+      if (owner === token) {
+        if (token.kind === "recording") await setIsAudioActiveAsync(false);
+        // Expo pause releases the native session without disabling its global playback gate.
+        // Repeat it after any pending activation, even if playback never started.
+        token.onRelease?.();
+        if (owner === token) owner = null;
+      }
+    }
+  });
+}
+
+export function createAudioPlaybackSession(
+  player: { play(): void; pause(): void },
+  nativePlayback = false,
+  onRequestedChange?: (requested: boolean) => void,
+) {
+  let token: AudioSessionToken | null = null;
+  const stopPlayer = () => {
+    // useAudioPlayer/useVideoPlayer may have disposed the native ref during unmount.
+    try {
+      player.pause();
+    } catch {}
+  };
+  const pause = () => {
+    const previous = token;
+    token = null;
+    onRequestedChange?.(false);
+    stopPlayer();

@@ -0,0 +1,216 @@
+import { useIsFocused } from "@react-navigation/native";
+import { formatAttachmentSize } from "@t3tools/client-runtime/state/attachments";
+import { useAudioPlayer, useAudioPlayerStatus } from "expo-audio";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
+import { AppState, Pressable, View } from "react-native";
+import type { FilePreviewSource } from "../../components/FilePreviewModal";
+import { filePreviewKey } from "../../lib/filePreviewGallery";
+import { PierreEntryIcon } from "../../components/PierreEntryIcon";
+import { AppText as Text } from "../../components/ui/AppText";
+import { SymbolView } from "../../components/ui/AppSymbol";
+import { useFullscreenVideoOpen, useMediaAudioSessionHold } from "../../lib/videoAudioSession";
+import { useRefreshAssetUrl } from "../../state/assets";
+import { ThreadMediaVisibleContext } from "./ThreadMarkdownVideo";
+
+type PreviewProps = {
+  readonly source: FilePreviewSource;
+  readonly sizeBytes?: number;
+  readonly onOpen: () => void;
+  readonly onLongPress?: () => void;
+};
+
+function FileCardHeader(props: PreviewProps) {
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={`Open ${props.source.name}`}
+      onPress={props.onOpen}
+      onLongPress={props.onLongPress}
+      className="h-[72px] flex-row items-center gap-3 p-3 active:bg-subtle"
+    >
+      <View className="h-12 w-10 shrink-0 items-center justify-center rounded-lg bg-subtle">
+        <PierreEntryIcon path={props.source.name ?? "file"} kind="file" size={26} />
+      </View>
+      <View className="min-w-0 flex-1 gap-1">
+        <Text className="text-sm font-t3-medium text-foreground" numberOfLines={1}>
+          {props.source.name}
+        </Text>
+        <Text className="text-xs text-foreground-muted" numberOfLines={1}>
+          Audio
+          {props.sizeBytes !== undefined ? ` · ${formatAttachmentSize(props.sizeBytes)}` : ""}
+        </Text>
+      </View>
+      <SymbolView name="chevron.right" size={12} tintColorClassName="accent-foreground-muted" />
+    </Pressable>
+  );
+}
+
+function timestamp(seconds: number) {
+  const value = Number.isFinite(seconds) ? Math.max(0, Math.floor(seconds)) : 0;
+  return `${Math.floor(value / 60)}:${String(value % 60).padStart(2, "0")}`;
+}
+
+function InlineAudio(props: PreviewProps & { readonly resolveUri: () => Promise<string | null> }) {
+  // An empty source keeps native buffering off until the user explicitly plays.
+  const player = useAudioPlayer(null, { updateInterval: 500, downloadFirst: false });
+  const status = useAudioPlayerStatus(player);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(false);
+  const active = useRef(true);
+  const requestGeneration = useRef(0);
+  const playRequested = useRef(false);
+  const [playbackRequested, setPlaybackRequested] = useState(false);
+  const requestPlayback = useCallback((requested: boolean) => {
+    playRequested.current = requested;
+    setPlaybackRequested(requested);
+    if (!requested) {
+      requestGeneration.current += 1;
+      setLoading(false);
+    }
+  }, []);
+  useMediaAudioSessionHold(status.playing);
+  const fullscreenVideoOpen = useFullscreenVideoOpen();
+  useEffect(() => {
+    if (fullscreenVideoOpen || status.didJustFinish || status.error) {
+      // oxlint-disable-next-line react/set-state-in-effect -- Native completion and fullscreen takeover invalidate the pending playback request.
+      requestPlayback(false);
+    }
+    if (fullscreenVideoOpen) player.pause();
+  }, [fullscreenVideoOpen, status.didJustFinish, status.error, player, requestPlayback]);
+  useEffect(() => {
+    active.current = true;
+    const subscription = AppState.addEventListener("change", (state) => {
+      if (state !== "active") {
+        requestPlayback(false);
+        player.pause();
+      }
+    });
+    return () => {
+      active.current = false;
+      playRequested.current = false;
+      requestGeneration.current += 1;
+      subscription.remove();
+    };
+  }, [player, requestPlayback]);
+  const toggle = () => {
+    if (status.playing || playRequested.current) {
+      requestPlayback(false);
+      return player.pause();
+    }
+    requestPlayback(true);
+    const generation = ++requestGeneration.current;
+    const isCurrentRequest = () =>
+      active.current && playRequested.current && requestGeneration.current === generation;
+    setLoading(true);
+    setError(false);
+    void Promise.resolve()
+      .then(async () => {
+        if (!isCurrentRequest()) return;
+        if (!status.isLoaded || status.error) {
+          const uri = await props.resolveUri();
+          if (!isCurrentRequest() || AppState.currentState !== "active") return;
+          if (!uri) {
+            requestPlayback(false);
+            setError(true);
+            return;
+          }
+          player.replace({ uri });
+        } else if (status.didJustFinish || status.currentTime >= status.duration) {
+          await player.seekTo(0);
+        }
+        if (isCurrentRequest() && AppState.currentState === "active") player.play();

@@ -0,0 +1,200 @@
+import { useIsFocused } from "@react-navigation/native";
+import { formatAttachmentSize } from "@t3tools/client-runtime/state/attachments";
+import { useAudioPlayer, useAudioPlayerStatus } from "expo-audio";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
+import { AppState, Pressable, View } from "react-native";
+import type { FilePreviewSource } from "../../components/FilePreviewModal";
+import { filePreviewKey } from "../../lib/filePreviewGallery";
+import { PierreEntryIcon } from "../../components/PierreEntryIcon";
+import { AppText as Text } from "../../components/ui/AppText";
+import { SymbolView } from "../../components/ui/AppSymbol";
+import { useFullscreenVideoOpen, useMediaAudioSessionHold } from "../../lib/videoAudioSession";
+import { useRefreshAssetUrl } from "../../state/assets";
+import { ThreadMediaVisibleContext } from "./ThreadMarkdownVideo";
+
+type PreviewProps = {
+  readonly source: FilePreviewSource;
+  readonly sizeBytes?: number;
+  readonly onOpen: () => void;
+  readonly onLongPress?: () => void;
+};
+
+function FileCardHeader(props: PreviewProps) {
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={`Open ${props.source.name}`}
+      onPress={props.onOpen}
+      onLongPress={props.onLongPress}
+      className="h-[72px] flex-row items-center gap-3 p-3 active:bg-subtle"
+    >
+      <View className="h-12 w-10 shrink-0 items-center justify-center rounded-lg bg-subtle">
+        <PierreEntryIcon path={props.source.name ?? "file"} kind="file" size={26} />
+      </View>
+      <View className="min-w-0 flex-1 gap-1">
+        <Text className="text-sm font-t3-medium text-foreground" numberOfLines={1}>
+          {props.source.name}
+        </Text>
+        <Text className="text-xs text-foreground-muted" numberOfLines={1}>
+          Audio
+          {props.sizeBytes !== undefined ? ` · ${formatAttachmentSize(props.sizeBytes)}` : ""}
+        </Text>
+      </View>
+      <SymbolView name="chevron.right" size={12} tintColorClassName="accent-foreground-muted" />
+    </Pressable>
+  );
+}
+
+function timestamp(seconds: number) {
+  const value = Number.isFinite(seconds) ? Math.max(0, Math.floor(seconds)) : 0;
+  return `${Math.floor(value / 60)}:${String(value % 60).padStart(2, "0")}`;
+}
+
+function InlineAudio(props: PreviewProps & { readonly resolveUri: () => Promise<string | null> }) {
+  // An empty source keeps native buffering off until the user explicitly plays.
+  const player = useAudioPlayer(null, { updateInterval: 500, downloadFirst: false });
+  const status = useAudioPlayerStatus(player);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(false);
+  const active = useRef(true);
+  const opening = useRef(false);
+  const playRequested = useRef(false);
+  useMediaAudioSessionHold(status.playing);
+  const fullscreenVideoOpen = useFullscreenVideoOpen();
+  useEffect(() => {
+    if (fullscreenVideoOpen) {
+      playRequested.current = false;
+      player.pause();
+    }
+  }, [fullscreenVideoOpen, player]);
+  useEffect(() => {
+    active.current = true;
+    const subscription = AppState.addEventListener("change", (state) => {
+      if (state !== "active") {
+        playRequested.current = false;
+        player.pause();
+      }
+    });
+    return () => {
+      active.current = false;
+      playRequested.current = false;
+      subscription.remove();
+    };
+  }, [player]);
+  const toggle = () => {
+    if (opening.current) return;
+    if (status.playing) {

@@ -632,22 +621,63 @@ function MessageAttachmentFile(props: {
     })();
   };
 
+  const openAttachment = () =>
+    isPdf
+      ? props.onPressPreview({
+          kind: "pdf",
+          name: attachment.name,
+          environmentId: props.environmentId,
+          resource: {
+            _tag: "attachment",
+            attachmentId: attachment.id,
+            fileName: attachment.name,
+            mimeType: "application/pdf",
+          },
+          sourceIdentifier,
+        })
+      : navigation.navigate("ThreadAttachment", {
+          environmentId: String(props.environmentId),
+          ...(selectedThread ? { threadId: String(selectedThread.id) } : {}),
+          attachmentId: attachment.id,
+          name: attachment.name,
+          mimeType: attachment.mimeType,
+          sizeBytes: String(attachment.sizeBytes),
+        });
+  const inlineKind = inlineFilePreviewKind(attachment);
+  if (inlineKind) {
+    return (
+      <PresentationSource identifier={sourceIdentifier}>
+        <ThreadInlineFilePreview