Move binary detection to TextViewer

src-web/components/ResponsePane.tsx

@@ -5,7 +5,6 @@ import { createGlobalState } from 'react-use';
 import { useContentTypeFromHeaders } from '../hooks/useContentTypeFromHeaders';
 import { usePinnedHttpResponse } from '../hooks/usePinnedHttpResponse';
 import { useResponseViewMode } from '../hooks/useResponseViewMode';
-import { isBinaryContentType } from '../lib/data/mimetypes';
 import type { HttpRequest } from '../lib/models';
 import { isResponseLoading } from '../lib/models';
 import { Banner } from './core/Banner';
@@ -22,7 +21,6 @@ import { EmptyStateText } from './EmptyStateText';
 import { RecentResponsesDropdown } from './RecentResponsesDropdown';
 import { ResponseHeaders } from './ResponseHeaders';
 import { AudioViewer } from './responseViewers/AudioViewer';
-import { BinaryViewer } from './responseViewers/BinaryViewer';
 import { CsvViewer } from './responseViewers/CsvViewer';
 import { ImageViewer } from './responseViewers/ImageViewer';
 import { PdfViewer } from './responseViewers/PdfViewer';
@@ -163,12 +161,8 @@ export const ResponsePane = memo(function ResponsePane({ style, className, activ
                   <VideoViewer response={activeResponse} />
                 ) : contentType?.match(/pdf/) ? (
                   <PdfViewer response={activeResponse} />
-                ) : isBinaryContentType(contentType) ? (
-                  <BinaryViewer response={activeResponse} />
                 ) : contentType?.match(/csv|tab-separated/) ? (
                   <CsvViewer className="pb-2" response={activeResponse} />
-                ) : activeResponse.contentLength > 2 * 1000 * 1000 ? (
-                  <EmptyStateText>Cannot preview text responses larger than 2MB</EmptyStateText>
                 ) : viewMode === 'pretty' && contentType?.includes('html') ? (
                   <WebPageViewer response={activeResponse} />
                 ) : (

src-web/components/responseViewers/TextViewer.tsx

@@ -12,6 +12,8 @@ import { Editor } from '../core/Editor';
 import { hyperlink } from '../core/Editor/hyperlink/extension';
 import { IconButton } from '../core/IconButton';
 import { Input } from '../core/Input';
+import { EmptyStateText } from '../EmptyStateText';
+import { BinaryViewer } from './BinaryViewer';
 
 const extraExtensions = [hyperlink];
 
@@ -98,7 +100,11 @@ export function TextViewer({ response, pretty, className }: Props) {
   }, [canFilter, filterText, isJson, isSearching, response.id, setFilterText, toggleSearch]);
 
   if (rawBody == null) {
-    return 'bad';
+    return <BinaryViewer response={response} />;
+  }
+
+  if ((response.contentLength ?? 0) > 2 * 1000 * 1000) {
+    return <EmptyStateText>Cannot preview text responses larger than 2MB</EmptyStateText>;
   }
 
   const formattedBody =

src-web/lib/data/mimetypes.ts

@@ -206,28 +206,3 @@ export const mimeTypes = [
   'video/x-flv',
   'video/x-m4v',
 ];
-
-export function isBinaryContentType(contentType: string | null) {
-  const mimeType = contentType?.split(';')[0];
-  if (mimeType == null) return false;
-
-  const [first, second] = mimeType.split('/').map((s) => s.trim().toLowerCase());
-  if (first == 'text' || second == null) {
-    return false;
-  }
-
-  if (first != 'application') {
-    return true;
-  }
-
-  const isTextSubtype =
-    second === 'json' ||
-    second === 'ld+json' ||
-    second === 'x-httpd-php' ||
-    second === 'x-sh' ||
-    second === 'x-csh' ||
-    second === 'xhtml+xml' ||
-    second === 'xml';
-
-  return !isTextSubtype;
-}