fix(media): preview host files and stream videos across clients (#9023)

Author: juliusmarminge

apps/desktop/src/electron/ElectronProtocol.test.ts

@@ -225,7 +225,13 @@ describe("ElectronProtocol", () => {
       "http:",
       "https:",
     ]);
-    assert.deepEqual(directives["media-src"], ["'self'", "pylon-code:", "blob:"]);
+    assert.deepEqual(directives["media-src"], [
+      "'self'",
+      "pylon-code:",
+      "blob:",
+      "http:",
+      "https:",
+    ]);
     assert.deepEqual(directives["font-src"], ["'self'", "pylon-code:", "data:"]);
   });
 });

apps/desktop/src/electron/ElectronProtocol.ts

@@ -87,7 +87,7 @@ export function makeDesktopContentSecurityPolicy(input: DesktopProtocolRegistrat
     `script-src ${scriptSources.join(" ")}`,
     `connect-src ${connectSources.join(" ")}`,
     `img-src 'self' ${input.scheme}: blob: data: http: https:`,
-    `media-src 'self' ${input.scheme}: blob:`,
+    `media-src 'self' ${input.scheme}: blob: http: https:`,
     "style-src 'self' 'unsafe-inline'",
     `font-src 'self' ${input.scheme}: data:`,
     "worker-src 'self' blob:",
@@ -118,6 +118,7 @@ export function registerDesktopSchemePrivilegesSync(): void {
         secure: true,
         supportFetchAPI: true,
         corsEnabled: true,
+        stream: true,
       },
     },
     {
@@ -127,6 +128,7 @@ export function registerDesktopSchemePrivilegesSync(): void {
         secure: true,
         supportFetchAPI: true,
         corsEnabled: true,
+        stream: true,
       },
     },
   ]);

apps/mobile/modules/t3-markdown-text/assets/file-icons/pierre_video.png

@@ -26,6 +26,8 @@
     "./types": "./src/SelectableMarkdownText.types.ts"
   },
   "peerDependencies": {
+    "@t3tools/client-runtime": "*",
+    "@t3tools/shared": "*",
     "expo-asset": "*",
     "expo-clipboard": "*",
     "expo-haptics": "*",

apps/mobile/modules/t3-markdown-text/package.json

@@ -66,6 +66,7 @@ const colors = {
   terraform: "#693acf",
   text: "#84848a",
   typescript: "#1a85d4",
+  video: "#a631be",
   vite: "#a631be",
   vscode: "#1a85d4",
   vue: "#199f43",
@@ -83,6 +84,7 @@ const customIcons = {
   pnpm: "t3-file-icon-pnpm",
   readme: "t3-file-icon-readme",
   tsconfig: "t3-file-icon-tsconfig",
+  video: "t3-file-icon-video",
 };
 
 function symbolFromSprite(sprite, id) {

apps/mobile/modules/t3-markdown-text/scripts/sync-pierre-file-icons.mjs

@@ -51,6 +51,7 @@ export const MARKDOWN_FILE_ICON_SOURCES = {
   text: require("../assets/file-icons/pierre_text.png"),
   tsconfig: require("../assets/file-icons/pierre_tsconfig.png"),
   typescript: require("../assets/file-icons/pierre_typescript.png"),
+  video: require("../assets/file-icons/pierre_video.png"),
   vite: require("../assets/file-icons/pierre_vite.png"),
   vscode: require("../assets/file-icons/pierre_vscode.png"),
   vue: require("../assets/file-icons/pierre_vue.png"),

apps/mobile/modules/t3-markdown-text/src/markdownFileIcons.generated.ts

@@ -1,3 +1,9 @@
+import {
+  inlineCodeFilePathCandidate,
+  isConventionalFilePosition,
+} from "@t3tools/client-runtime/markdown-links";
+import { videoMimeType } from "@t3tools/shared/video";
+
 import type { MARKDOWN_FILE_ICON_SOURCES } from "./markdownFileIcons.generated";
 
 const WINDOWS_DRIVE_PATH_PATTERN = /^[A-Za-z]:[\\/]/;
@@ -253,15 +259,22 @@ function normalizeDestination(value: string): string {
   return trimmed.startsWith("<") && trimmed.endsWith(">") ? trimmed.slice(1, -1) : trimmed;
 }
 
+/** Native link and media APIs have no document scheme to inherit from protocol-relative URLs. */
+export function normalizeNativeMarkdownUrl(value: string): string {
+  return value.startsWith("//") ? `https:${value}` : value;
+}
+
 function fileUrlTarget(href: string): { readonly path: string; readonly hash: string } | null {
   try {
     const parsed = new URL(href);
     if (parsed.protocol.toLowerCase() !== "file:") {
       return null;
     }
-    const path = /^\/[A-Za-z]:[\\/]/.test(parsed.pathname)
-      ? parsed.pathname.slice(1)
+    const uncHostname = parsed.hostname.toLowerCase() === "localhost" ? "" : parsed.hostname;
+    const rawPath = uncHostname
+      ? `\\\\${uncHostname}${parsed.pathname.replaceAll("/", "\\")}`
       : parsed.pathname;
+    const path = /^\/[A-Za-z]:[\\/]/.test(rawPath) ? rawPath.slice(1) : rawPath;
     return { path, hash: parsed.hash };
   } catch {
     return null;
@@ -327,6 +340,7 @@ function looksLikeFilePath(value: string): boolean {
   if (FILE_ICON_BY_NAME[value.replace(POSITION_SUFFIX_PATTERN, "").toLowerCase()]) {
     return true;
   }
+  if (isConventionalFilePosition(value)) return true;
   return RELATIVE_FILE_PATH_PATTERN.test(value) || RELATIVE_FILE_NAME_PATTERN.test(value);
 }
 
@@ -338,6 +352,7 @@ function fileLabel(value: string): string {
 
 export function resolveMarkdownFileIcon(value: string): MarkdownFileIcon {
   const basename = fileLabel(value).replace(POSITION_SUFFIX_PATTERN, "").toLowerCase();
+  if (videoMimeType({ name: basename, mimeType: "" }) !== null) return "video";
   const exactIcon = FILE_ICON_BY_NAME[basename];
   if (exactIcon) return exactIcon;
   if (basename.startsWith("tsconfig.") && basename.endsWith(".json")) {
@@ -354,7 +369,7 @@ export function resolveMarkdownFileIcon(value: string): MarkdownFileIcon {
 export function resolveMarkdownLinkPresentation(href: string): MarkdownLinkPresentation {
   const normalized = normalizeDestination(href);
   try {
-    const parsed = new URL(normalized);
+    const parsed = new URL(normalizeNativeMarkdownUrl(normalized));
     if (parsed.protocol === "http:" || parsed.protocol === "https:") {
       return {
         kind: "external",
@@ -399,3 +414,13 @@ export function resolveMarkdownLinkPresentation(href: string): MarkdownLinkPrese
     href: /^(?:mailto|tel):/i.test(normalized) ? normalized : null,
   };
 }
+
+/** Backticks become file references only when the shared path heuristic recognizes the whole span. */
+export function resolveMarkdownInlineCodePresentation(
+  content: string,
+): Extract<MarkdownLinkPresentation, { readonly kind: "file" }> | null {
+  const candidate = inlineCodeFilePathCandidate(content);
+  if (candidate === null) return null;
+  const presentation = resolveMarkdownLinkPresentation(candidate);
+  return presentation.kind === "file" ? presentation : null;
+}

apps/mobile/modules/t3-markdown-text/src/markdownLinks.ts

@@ -1,7 +1,11 @@
 import type { MarkdownNode } from "react-native-nitro-markdown/headless";
 
 import type { SelectableMarkdownSkill } from "./SelectableMarkdownText.types";
-import { resolveMarkdownLinkPresentation, type MarkdownFileIcon } from "./markdownLinks";
+import {
+  resolveMarkdownInlineCodePresentation,
+  resolveMarkdownLinkPresentation,
+  type MarkdownFileIcon,
+} from "./markdownLinks";
 
 export interface NativeMarkdownTextRun {
   readonly text: string;
@@ -283,8 +287,17 @@ function appendNode(
       return appendRun(runs, textNodeContent(nodeTextContent(node)), context);
     case "html_inline":
       return appendRun(runs, inlineHtmlText(nodeTextContent(node)), context);
-    case "code_inline":
-      return appendRun(runs, nodeTextContent(node), { ...context, code: true });
+    case "code_inline": {
+      const content = nodeTextContent(node);
+      const presentation = context.href ? null : resolveMarkdownInlineCodePresentation(content);
+      return presentation
+        ? appendRun(runs, presentation.label, {
+            ...context,
+            href: presentation.href,
+            fileIcon: presentation.icon,
+          })
+        : appendRun(runs, content, { ...context, code: true });
+    }
     case "soft_break":
       return appendRun(runs, " ", context);
     case "line_break":

apps/mobile/modules/t3-markdown-text/src/nativeMarkdownText.ts

@@ -3,6 +3,7 @@ import { useEffect, useEffectEvent, useId } from "react";
 import { Alert } from "react-native";
 
 import type { ResolvedFilePreviewSource } from "./FilePreviewModal";
+import { MediaImagePreview } from "./MediaImagePreview";
 
 const NativeControls = requireNativeModule<{
   presentFile(
@@ -14,7 +15,7 @@ const NativeControls = requireNativeModule<{
   dismissFile(identifier: string): Promise<void>;
 }>("T3NativeControls");
 
-export function FilePreview(props: {
+function NativeFilePreview(props: {
   readonly source: ResolvedFilePreviewSource;
   readonly onRequestClose: () => void;
 }) {
@@ -41,3 +42,14 @@ export function FilePreview(props: {
 
   return null;
 }
+
+export function FilePreview(props: {
+  readonly source: ResolvedFilePreviewSource;
+  readonly onRequestClose: () => void;
+}) {
+  return props.source.kind === "image" && props.source.actionsSource ? (
+    <MediaImagePreview {...props} />
+  ) : (
+    <NativeFilePreview {...props} />
+  );
+}

apps/mobile/src/components/FilePreview.ios.tsx

@@ -4,6 +4,7 @@ import ImageViewing from "react-native-image-viewing";
 
 import { downloadAndShareAttachment, shareLocalAttachment } from "../lib/attachmentDownload";
 import type { ResolvedFilePreviewSource } from "./FilePreviewModal";
+import { MediaImagePreview } from "./MediaImagePreview";
 
 function PdfPreview(props: {
   readonly source: ResolvedFilePreviewSource;
@@ -39,6 +40,7 @@ export function FilePreview(props: {
   readonly onRequestClose: () => void;
 }) {
   if (props.source.kind === "pdf") return <PdfPreview {...props} />;
+  if (props.source.actionsSource) return <MediaImagePreview {...props} />;
   return (
     <ImageViewing
       images={[{ uri: props.source.uri }]}