@jobber/components-native 0.101.11 → 0.102.0

package/src/FormatFile/components/MediaView/MediaView.test.tsx

@@ -25,7 +25,7 @@ describe("MediaView", () => {
     showFileTypeIndicator: false,
   };
 
-  const defaultProps = {
+  const defaultProps: React.ComponentProps<typeof MediaView> = {
     accessibilityLabel: "Test image",
     showOverlay: false,
     showError: false,
@@ -38,7 +38,9 @@ describe("MediaView", () => {
     useCreateThumbnail: () => ({ thumbnail: undefined, error: false }),
   };
 
-  const renderWithContext = (props = defaultProps) => {
+  const renderWithContext = (
+    props: React.ComponentProps<typeof MediaView> = defaultProps,
+  ) => {
     return render(
       <AtlantisFormatFileContext.Provider value={mockContextValue}>
         <MediaView {...props} />
@@ -280,4 +282,159 @@ describe("MediaView", () => {
       });
     });
   });
+
+  describe("Video placeholder", () => {
+    const videoFile: FormattedFile = {
+      ...mockFile,
+      type: "video/mp4",
+      source: undefined,
+      thumbnailUrl: undefined,
+      name: "clip.mp4",
+    };
+
+    it("renders the videoFile placeholder when a video has no URI", () => {
+      const { getByTestId, queryByTestId } = renderWithContext({
+        ...defaultProps,
+        file: videoFile,
+      });
+
+      expect(getByTestId("format-file-video-placeholder")).toBeTruthy();
+      expect(queryByTestId("test-image")).toBeNull();
+    });
+
+    it("falls back to the placeholder when the ImageBackground errors", () => {
+      const fileWithSource: FormattedFile = {
+        ...videoFile,
+        source: "https://example.com/broken-video.mp4",
+      };
+      const { getByTestId, queryByTestId } = renderWithContext({
+        ...defaultProps,
+        file: fileWithSource,
+      });
+
+      const image = getByTestId("test-image");
+      expect(queryByTestId("format-file-video-placeholder")).toBeNull();
+
+      fireEvent(image, "error");
+
+      expect(getByTestId("format-file-video-placeholder")).toBeTruthy();
+    });
+
+    it("clears the loading spinner and fires onLoadEnd when the decoder errors", () => {
+      const onLoadEnd = jest.fn();
+      const fileWithSource: FormattedFile = {
+        ...videoFile,
+        source: "https://example.com/broken-video.mp4",
+      };
+      const { getByTestId, queryByTestId } = renderWithContext({
+        ...defaultProps,
+        file: fileWithSource,
+        onLoadEnd,
+      });
+
+      const image = getByTestId("test-image");
+      fireEvent(image, "loadStart");
+      expect(queryByTestId("ActivityIndicator")).toBeTruthy();
+
+      fireEvent(image, "error");
+
+      expect(onLoadEnd).toHaveBeenCalledTimes(1);
+      expect(queryByTestId("ActivityIndicator")).toBeNull();
+      expect(getByTestId("format-file-video-placeholder")).toBeTruthy();
+    });
+
+    it("only fires onLoadEnd once when an error is followed by loadEnd", () => {
+      const onLoadEnd = jest.fn();
+      const fileWithSource: FormattedFile = {
+        ...videoFile,
+        source: "https://example.com/broken-video.mp4",
+      };
+      const { getByTestId } = renderWithContext({
+        ...defaultProps,
+        file: fileWithSource,
+        onLoadEnd,
+      });
+
+      const image = getByTestId("test-image");
+      fireEvent(image, "error");
+      fireEvent(image, "loadEnd");
+
+      expect(onLoadEnd).toHaveBeenCalledTimes(1);
+    });
+
+    it("does not render the placeholder for non-video files with no URI", () => {
+      const imageFileWithoutUri: FormattedFile = {
+        ...mockFile,
+        source: undefined,
+        thumbnailUrl: undefined,
+      };
+      const { queryByTestId } = renderWithContext({
+        ...defaultProps,
+        file: imageFileWithoutUri,
+      });
+
+      expect(queryByTestId("format-file-video-placeholder")).toBeNull();
+      expect(queryByTestId("test-image")).toBeTruthy();
+    });
+
+    it("renders the progress overlay on top of the placeholder during upload", () => {
+      const uploadingVideo: FormattedFile = {
+        ...videoFile,
+        status: StatusCode.InProgress,
+        progress: 0.4,
+      };
+      const { getByTestId } = renderWithContext({
+        ...defaultProps,
+        file: uploadingVideo,
+        showOverlay: true,
+      });
+
+      expect(getByTestId("format-file-video-placeholder")).toBeTruthy();
+      expect(getByTestId("format-file-progress-bar-container")).toBeTruthy();
+    });
+
+    it("renders the error overlay on top of the placeholder when the upload fails", () => {
+      const failedVideo: FormattedFile = {
+        ...videoFile,
+        status: StatusCode.Failed,
+        error: true,
+      };
+      const { getByTestId } = renderWithContext({
+        ...defaultProps,
+        file: failedVideo,
+        showError: true,
+      });
+
+      expect(getByTestId("format-file-video-placeholder")).toBeTruthy();
+      expect(getByTestId("format-file-error-container")).toBeTruthy();
+    });
+
+    it("hides the videoFile placeholder icon when showFileTypeIndicator is false", () => {
+      const { getByTestId, queryByTestId } = renderWithContext({
+        ...defaultProps,
+        file: {
+          ...videoFile,
+          showFileTypeIndicator: false,
+        },
+      });
+
+      expect(getByTestId("format-file-video-placeholder")).toBeTruthy();
+      expect(queryByTestId("videoFile")).toBeNull();
+    });
+
+    it("paints the placeholder with surfaceColor when provided", () => {
+      const { getByTestId } = renderWithContext({
+        ...defaultProps,
+        file: videoFile,
+        surfaceColor: "#F4ECD9",
+      });
+
+      const placeholder = getByTestId("format-file-video-placeholder");
+      const styleArray = Array.isArray(placeholder.props.style)
+        ? placeholder.props.style.filter(Boolean)
+        : [placeholder.props.style];
+      const merged = Object.assign({}, ...styleArray);
+      expect(merged.backgroundColor).toBe("#F4ECD9");
+    });
+  });
 });

package/src/FormatFile/components/MediaView/MediaView.tsx

@@ -19,8 +19,10 @@ interface MediaViewProps {
   readonly styleInGrid: boolean;
   readonly onUploadComplete: () => void;
   readonly onLoadEnd?: () => void;
+  readonly surfaceColor?: string;
 }
 
+// eslint-disable-next-line max-statements
 export function MediaView({
   accessibilityLabel,
   showOverlay,
@@ -29,17 +31,20 @@ export function MediaView({
   styleInGrid,
   onUploadComplete,
   onLoadEnd,
+  surfaceColor,
 }: MediaViewProps) {
   const { t } = useAtlantisI18n();
   const { useCreateThumbnail } = useAtlantisFormatFileContext();
   const { thumbnail, error } = useCreateThumbnail(file);
   const [isLoading, setIsLoading] = useState(false);
+  const [decodeFailed, setDecodeFailed] = useState(false);
   /**
    * Tracks whether onLoadEnd has fired to prevent race conditions.
    * ImageBackground can fire onLoadEnd before onLoadStart when loading cached images,
    * which would cause isLoading to get stuck at true, showing an infinite spinner.
    */
   const hasLoadedRef = useRef(false);
+  const hasNotifiedLoadEndRef = useRef(false);
 
   const a11yLabel = computeA11yLabel({
     accessibilityLabel,
@@ -63,13 +68,44 @@ export function MediaView({
     setIsLoading(false);
   };
 
+  const handleMediaLoadEnd = () => {
+    handleLoadEnd();
+
+    if (!hasNotifiedLoadEndRef.current) {
+      hasNotifiedLoadEndRef.current = true;
+      onLoadEnd?.();
+    }
+  };
+
   useEffect(() => {
     hasLoadedRef.current = false;
+    hasNotifiedLoadEndRef.current = false;
     setIsLoading(false);
+    setDecodeFailed(false);
   }, [uri]);
 
+  if (isVideo(file.type) && (!uri || decodeFailed)) {
+    return (
+      <VideoPlaceholder
+        a11yLabel={a11yLabel}
+        styleInGrid={styleInGrid}
+        surfaceColor={surfaceColor}
+        styles={styles}
+        isLoading={isLoading}
+        showOverlay={showOverlay}
+        hasError={hasError}
+        file={file}
+        onUploadComplete={onUploadComplete}
+      />
+    );
+  }
+
   return (
-    <View accessible={true} accessibilityLabel={a11yLabel}>
+    <View
+      accessible={true}
+      accessibilityLabel={a11yLabel}
+      style={surfaceColor ? { backgroundColor: surfaceColor } : undefined}
+    >
       <ImageBackground
         style={[
           styles.imageBackground,
@@ -79,9 +115,10 @@ export function MediaView({
         source={{ uri }}
         testID={"test-image"}
         onLoadStart={handleLoadStart}
-        onLoadEnd={() => {
-          handleLoadEnd();
-          onLoadEnd?.();
+        onLoadEnd={handleMediaLoadEnd}
+        onError={() => {
+          handleMediaLoadEnd();
+          setDecodeFailed(true);
         }}
       >
         <Overlay
@@ -133,7 +170,7 @@ function Overlay({
     return <Icon name="video" color="white" />;
   }
 
-  return <></>;
+  return null;
 }
 
 interface ProgressOverlayProps {
@@ -183,3 +220,75 @@ function ErrorOverlay({
 function isVideo(fileType = ""): boolean {
   return fileType.includes("video");
 }
+
+interface VideoPlaceholderProps {
+  readonly a11yLabel: string;
+  readonly styleInGrid: boolean;
+  readonly surfaceColor?: string;
+  readonly styles: ReturnType<typeof useStyles>;
+  readonly isLoading: boolean;
+  readonly showOverlay: boolean;
+  readonly hasError: boolean;
+  readonly file: FormattedFile;
+  readonly onUploadComplete: () => void;
+}
+
+function VideoPlaceholder({
+  a11yLabel,
+  styleInGrid,
+  surfaceColor,
+  styles,
+  isLoading,
+  showOverlay,
+  hasError,
+  file,
+  onUploadComplete,
+}: VideoPlaceholderProps) {
+  return (
+    <View
+      accessible={true}
+      accessibilityLabel={a11yLabel}
+      style={[
+        styles.imageBackground,
+        styleInGrid ? styles.imageBackgroundGrid : styles.imageBackgroundFlat,
+        surfaceColor ? { backgroundColor: surfaceColor } : undefined,
+      ]}
+      testID={"format-file-video-placeholder"}
+    >
+      {file.showFileTypeIndicator && <Icon name="videoFile" size="large" />}
+      <PlaceholderStatusOverlay
+        isLoading={isLoading}
+        showOverlay={showOverlay}
+        hasError={hasError}
+        file={file}
+        onUploadComplete={onUploadComplete}
+        styles={styles}
+      />
+    </View>
+  );
+}
+
+function PlaceholderStatusOverlay({
+  isLoading,
+  showOverlay,
+  hasError,
+  file,
+  onUploadComplete,
+  styles,
+}: OverlayProps) {
+  if (isLoading) return <ActivityIndicator />;
+  if (hasError) return <ErrorOverlay styles={styles} />;
+
+  if (showOverlay) {
+    return (
+      <ProgressOverlay
+        status={file.status}
+        progress={file.progress}
+        onUploadComplete={onUploadComplete}
+        styles={styles}
+      />
+    );
+  }
+
+  return null;
+}

package/src/FormatFile/constants.ts

@@ -10,6 +10,70 @@ export const acceptedExtensions = [
 export const videoExtensions = [
   { type: "mov" },
   { type: "mp4" },
+  { type: "m4v" },
+  { type: "webm" },
+  { type: "mkv" },
+  { type: "avi" },
+  { type: "wmv" },
+  { type: "flv" },
+  { type: "mpg" },
+  { type: "mpeg" },
+  { type: "3gp" },
   { type: "3gpp" },
   { type: "hevc" },
 ];
+
+/**
+ * Extensions that should be treated as documents (Word-family + OpenDocument
+ * Text + RTF + Apple Pages + WordPerfect). Used to route to the document
+ * icon and the "document" file category.
+ */
+export const documentExtensions = [
+  { type: "doc" },
+  { type: "docx" },
+  { type: "odt" },
+  { type: "fodt" },
+  { type: "rtf" },
+  { type: "pages" },
+  { type: "wpd" },
+];
+
+/**
+ * Extensions that should be treated as spreadsheets (Excel-family +
+ * OpenDocument Spreadsheet + Apple Numbers + CSV). Used to route to the
+ * spreadsheet icon and the "spreadsheet" file category.
+ */
+export const spreadsheetExtensions = [
+  { type: "xls" },
+  { type: "xlsx" },
+  { type: "ods" },
+  { type: "fods" },
+  { type: "numbers" },
+  { type: "csv" },
+];
+
+/**
+ * Substring patterns matched against the `Content-Type` MIME string for
+ * documents. Substring rather than exact match because real-world MIMEs
+ * vary widely (e.g. `application/msword`,
+ * `application/vnd.openxmlformats-officedocument.wordprocessingml.document`,
+ * `application/vnd.oasis.opendocument.text`).
+ */
+export const documentMimePatterns = [
+  "msword",
+  "ms-word",
+  "wordprocessingml",
+  "opendocument.text",
+  "rtf",
+];
+
+/**
+ * Substring patterns matched against the `Content-Type` MIME string for
+ * spreadsheets.
+ */
+export const spreadsheetMimePatterns = [
+  "ms-excel",
+  "spreadsheetml",
+  "opendocument.spreadsheet",
+  "csv",
+];

package/src/FormatFile/index.ts

@@ -2,6 +2,13 @@ export type { FormatFileProps } from "./FormatFile";
 export { FormatFile } from "./FormatFile";
 export type { FormatFileThumbnailProps } from "./FormatFileThumbnail";
 export { FormatFileThumbnail } from "./FormatFileThumbnail";
+export {
+  getFileCategory,
+  mapFileTypeToIconName,
+  sanitizeFileName,
+  truncateFileNameForLine,
+} from "./utils";
+export type { FileCategory } from "./utils";
 export type {
   FormattedFile,
   File,

package/src/FormatFile/utils/getFileCategory.test.ts

@@ -0,0 +1,96 @@
+import { getFileCategory } from "./getFileCategory";
+
+describe("getFileCategory", () => {
+  it("returns 'other' when neither name nor type is provided", () => {
+    expect(getFileCategory({})).toBe("other");
+  });
+
+  it.each([
+    ["application/pdf", undefined, "pdf"],
+    [undefined, "report.pdf", "pdf"],
+    [undefined, "REPORT.PDF", "pdf"],
+  ])("pdf: type=%s fileName=%s → %s", (fileType, fileName, expected) => {
+    expect(getFileCategory({ fileType, fileName })).toBe(expected);
+  });
+
+  it.each([
+    ["image/jpeg", undefined, "image"],
+    ["image/png", "photo.png", "image"],
+  ])("image: type=%s fileName=%s → %s", (fileType, fileName, expected) => {
+    expect(getFileCategory({ fileType, fileName })).toBe(expected);
+  });
+
+  it.each([
+    ["video/mp4", undefined, "video"],
+    ["video/quicktime", undefined, "video"],
+    [undefined, "clip.mp4", "video"],
+    [undefined, "clip.mov", "video"],
+    [undefined, "clip.webm", "video"],
+    [undefined, "clip.mkv", "video"],
+    [undefined, "clip.avi", "video"],
+  ])("video: type=%s fileName=%s → %s", (fileType, fileName, expected) => {
+    expect(getFileCategory({ fileType, fileName })).toBe(expected);
+  });
+
+  it.each([
+    ["application/msword", undefined, "document"],
+    [
+      "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+      undefined,
+      "document",
+    ],
+    ["application/vnd.oasis.opendocument.text", undefined, "document"],
+    ["application/rtf", undefined, "document"],
+    ["text/rtf", undefined, "document"],
+    [undefined, "report.doc", "document"],
+    [undefined, "report.docx", "document"],
+    [undefined, "report.odt", "document"],
+    [undefined, "report.fodt", "document"],
+    [undefined, "memo.rtf", "document"],
+    [undefined, "notes.pages", "document"],
+    [undefined, "legacy.wpd", "document"],
+  ])("document: type=%s fileName=%s → %s", (fileType, fileName, expected) => {
+    expect(getFileCategory({ fileType, fileName })).toBe(expected);
+  });
+
+  it.each([
+    ["application/vnd.ms-excel", undefined, "spreadsheet"],
+    [
+      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+      undefined,
+      "spreadsheet",
+    ],
+    [
+      "application/vnd.oasis.opendocument.spreadsheet",
+      undefined,
+      "spreadsheet",
+    ],
+    ["text/csv", undefined, "spreadsheet"],
+    [undefined, "data.xls", "spreadsheet"],
+    [undefined, "data.xlsx", "spreadsheet"],
+    [undefined, "data.ods", "spreadsheet"],
+    [undefined, "data.fods", "spreadsheet"],
+    [undefined, "data.numbers", "spreadsheet"],
+    [undefined, "data.csv", "spreadsheet"],
+  ])(
+    "spreadsheet: type=%s fileName=%s → %s",
+    (fileType, fileName, expected) => {
+      expect(getFileCategory({ fileType, fileName })).toBe(expected);
+    },
+  );
+
+  it.each([
+    ["application/octet-stream", "unknown.bin", "other"],
+    [undefined, "no-extension", "other"],
+    [undefined, "presentation.pptx", "other"],
+    [undefined, "presentation.odp", "other"],
+  ])("other: type=%s fileName=%s → %s", (fileType, fileName, expected) => {
+    expect(getFileCategory({ fileType, fileName })).toBe(expected);
+  });
+
+  it("prefers MIME over extension when both are present and disagree", () => {
+    expect(
+      getFileCategory({ fileType: "application/pdf", fileName: "weird.docx" }),
+    ).toBe("pdf");
+  });
+});

package/src/FormatFile/utils/getFileCategory.ts

@@ -0,0 +1,106 @@
+import {
+  documentExtensions,
+  documentMimePatterns,
+  spreadsheetExtensions,
+  spreadsheetMimePatterns,
+  videoExtensions,
+} from "../constants";
+
+export type FileCategory =
+  | "document"
+  | "spreadsheet"
+  | "pdf"
+  | "video"
+  | "image"
+  | "other";
+
+interface GetFileCategoryParams {
+  readonly fileName?: string;
+  readonly fileType?: string;
+}
+
+function extensionOf(fileName: string): string {
+  const dot = fileName.lastIndexOf(".");
+
+  return dot < 0 ? "" : fileName.slice(dot + 1).toLowerCase();
+}
+
+function matchesAnyExtension(
+  fileName: string | undefined,
+  list: { type: string }[],
+): boolean {
+  if (!fileName) return false;
+  const ext = extensionOf(fileName);
+  if (!ext) return false;
+
+  return list.some(({ type }) => type === ext);
+}
+
+function matchesAnyMimePattern(
+  fileType: string | undefined,
+  patterns: string[],
+): boolean {
+  if (!fileType) return false;
+  const lower = fileType.toLowerCase();
+
+  return patterns.some(pattern => lower.includes(pattern));
+}
+
+/**
+ * Bucket a file into one of the generic categories the design system
+ * recognises. Decoupled from icon names so that:
+ *
+ *   1. Consumers can use generic terminology in copy, accessibility
+ *      labels, and filter UI ("Document", "Spreadsheet") without
+ *      coupling to the brand-named icon assets (`word`, `excel`).
+ *   2. When `@jobber/design` adds generic-document / generic-spreadsheet
+ *      icons, the icon mapping can be updated without breaking
+ *      consumers who already use this categorisation.
+ *
+ * Detection precedence: `fileType` (MIME) first, then `fileName`
+ * extension. The extension lists cover OpenDocument Text / Spreadsheet,
+ * RTF, Apple Pages / Numbers, CSV, and WordPerfect alongside the
+ * Microsoft Office formats so callers do not have to enumerate them.
+ *
+ * `fileType` matching is case-insensitive and accepts both full MIME
+ * strings (`"video/mp4"`, `"image/jpeg"`) and coarse type strings
+ * (`"video"`, `"image"`) since `parseFile` collapses video MIMEs to
+ * the bare token `"video"` for external files.
+ */
+export function getFileCategory({
+  fileName,
+  fileType,
+}: GetFileCategoryParams): FileCategory {
+  const normalizedType = fileType?.toLowerCase();
+
+  if (normalizedType?.includes("pdf") || fileName?.match(/\.pdf$/i)) {
+    return "pdf";
+  }
+
+  if (normalizedType?.includes("image")) {
+    return "image";
+  }
+
+  if (
+    normalizedType?.includes("video") ||
+    matchesAnyExtension(fileName, videoExtensions)
+  ) {
+    return "video";
+  }
+
+  if (
+    matchesAnyMimePattern(normalizedType, documentMimePatterns) ||
+    matchesAnyExtension(fileName, documentExtensions)
+  ) {
+    return "document";
+  }
+
+  if (
+    matchesAnyMimePattern(normalizedType, spreadsheetMimePatterns) ||
+    matchesAnyExtension(fileName, spreadsheetExtensions)
+  ) {
+    return "spreadsheet";
+  }
+
+  return "other";
+}

package/src/FormatFile/utils/index.ts

@@ -1,2 +1,7 @@
 export { computeA11yLabel } from "./computeA11yLabel";
 export { parseFile, isMediaFile } from "./parseFile";
+export { mapFileTypeToIconName } from "./mapFileTypeToIconName";
+export { getFileCategory } from "./getFileCategory";
+export type { FileCategory } from "./getFileCategory";
+export { sanitizeFileName } from "./sanitizeFileName";
+export { truncateFileNameForLine } from "./truncateFileNameForLine";

package/src/FormatFile/utils/mapFileTypeToIconName.test.ts

@@ -0,0 +1,43 @@
+import { mapFileTypeToIconName } from "./mapFileTypeToIconName";
+
+describe("mapFileTypeToIconName", () => {
+  it("returns 'alert' when neither name nor type is provided", () => {
+    expect(mapFileTypeToIconName({})).toBe("alert");
+  });
+
+  it.each([
+    ["application/pdf", undefined, "pdf"],
+    [undefined, "report.pdf", "pdf"],
+    [undefined, "report.doc", "word"],
+    [undefined, "report.docx", "word"],
+    [undefined, "report.odt", "word"],
+    [undefined, "report.fodt", "word"],
+    [undefined, "memo.rtf", "word"],
+    [undefined, "notes.pages", "word"],
+    ["application/vnd.ms-excel", undefined, "excel"],
+    [undefined, "data.xls", "excel"],
+    [undefined, "data.xlsx", "excel"],
+    [undefined, "data.ods", "excel"],
+    [undefined, "data.numbers", "excel"],
+    [undefined, "data.csv", "excel"],
+    ["video/mp4", undefined, "videoFile"],
+    ["video/quicktime", undefined, "videoFile"],
+    [undefined, "clip.mp4", "videoFile"],
+    [undefined, "clip.mov", "videoFile"],
+    [undefined, "clip.MOV", "videoFile"],
+    [undefined, "clip.webm", "videoFile"],
+    [undefined, "clip.mkv", "videoFile"],
+    [undefined, "clip.avi", "videoFile"],
+    [undefined, "clip.m4v", "videoFile"],
+    [undefined, "clip.wmv", "videoFile"],
+    [undefined, "clip.flv", "videoFile"],
+    [undefined, "clip.mpg", "videoFile"],
+    [undefined, "clip.mpeg", "videoFile"],
+    [undefined, "clip.3gp", "videoFile"],
+    ["application/octet-stream", "unknown.bin", "file"],
+    [undefined, "no-extension", "file"],
+    [undefined, "presentation.pptx", "file"],
+  ])("maps type=%s fileName=%s → %s", (fileType, fileName, expected) => {
+    expect(mapFileTypeToIconName({ fileType, fileName })).toBe(expected);
+  });
+});