starred/yaak
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-04-23 17:28:29 +02:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Fix PDF viewer

Browse Source
This commit is contained in:
Gregory Schier
2025-10-22 08:56:36 -07:00
parent b7682db9a3
commit 451c8b9dde
2 changed files with 17 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src-web/components/HttpResponsePane.tsx
View File

@@ -1,7 +1,7 @@
import type { HttpResponse } from '@yaakapp-internal/models'; import type { HttpResponse } from '@yaakapp-internal/models';
import classNames from 'classnames'; import classNames from 'classnames';
import type { CSSProperties, ReactNode} from 'react'; import type { ComponentType, CSSProperties } from 'react';
import React, { Suspense , lazy, useCallback, useMemo } from 'react'; import React, { lazy, Suspense, useCallback, useMemo } from 'react';
import { useLocalStorage } from 'react-use'; import { useLocalStorage } from 'react-use';
import { useCancelHttpResponse } from '../hooks/useCancelHttpResponse'; import { useCancelHttpResponse } from '../hooks/useCancelHttpResponse';
import { usePinnedHttpResponse } from '../hooks/usePinnedHttpResponse'; import { usePinnedHttpResponse } from '../hooks/usePinnedHttpResponse';
@@ -10,16 +10,18 @@ import { getMimeTypeFromContentType } from '../lib/contentType';
import { getContentTypeFromHeaders } from '../lib/model_util'; import { getContentTypeFromHeaders } from '../lib/model_util';
import { ConfirmLargeResponse } from './ConfirmLargeResponse'; import { ConfirmLargeResponse } from './ConfirmLargeResponse';
import { Banner } from './core/Banner'; import { Banner } from './core/Banner';
import { Button } from './core/Button';
import { CountBadge } from './core/CountBadge'; import { CountBadge } from './core/CountBadge';
import { HttpResponseDurationTag } from './core/HttpResponseDurationTag';
import { HotKeyList } from './core/HotKeyList'; import { HotKeyList } from './core/HotKeyList';
import { HttpResponseDurationTag } from './core/HttpResponseDurationTag';
import { HttpStatusTag } from './core/HttpStatusTag';
import { LoadingIcon } from './core/LoadingIcon'; import { LoadingIcon } from './core/LoadingIcon';
import { SizeTag } from './core/SizeTag'; import { SizeTag } from './core/SizeTag';
import { HStack, VStack } from './core/Stacks'; import { HStack, VStack } from './core/Stacks';
import { HttpStatusTag } from './core/HttpStatusTag'; import type { TabItem} from './core/Tabs/Tabs';
import type { TabItem } from './core/Tabs/Tabs'; import { Tabs , TabContent} from './core/Tabs/Tabs';
import { TabContent, Tabs } from './core/Tabs/Tabs';
import { EmptyStateText } from './EmptyStateText'; import { EmptyStateText } from './EmptyStateText';
import { ErrorBoundary } from './ErrorBoundary';
import { RecentHttpResponsesDropdown } from './RecentHttpResponsesDropdown'; import { RecentHttpResponsesDropdown } from './RecentHttpResponsesDropdown';
import { ResponseHeaders } from './ResponseHeaders'; import { ResponseHeaders } from './ResponseHeaders';
import { ResponseInfo } from './ResponseInfo'; import { ResponseInfo } from './ResponseInfo';
@@ -30,8 +32,6 @@ import { HTMLOrTextViewer } from './responseViewers/HTMLOrTextViewer';
import { ImageViewer } from './responseViewers/ImageViewer'; import { ImageViewer } from './responseViewers/ImageViewer';
import { SvgViewer } from './responseViewers/SvgViewer'; import { SvgViewer } from './responseViewers/SvgViewer';
import { VideoViewer } from './responseViewers/VideoViewer'; import { VideoViewer } from './responseViewers/VideoViewer';
import { ErrorBoundary } from './ErrorBoundary';
import { Button } from './core/Button';
const PdfViewer = lazy(() => const PdfViewer = lazy(() =>
import('./responseViewers/PdfViewer').then((m) => ({ default: m.PdfViewer })), import('./responseViewers/PdfViewer').then((m) => ({ default: m.PdfViewer })),
@@ -184,13 +184,13 @@ export function HttpResponsePane({ style, className, activeRequestId }: Props) {
) : mimeType?.match(/^image\/svg/) ? ( ) : mimeType?.match(/^image\/svg/) ? (
<SvgViewer response={activeResponse} /> <SvgViewer response={activeResponse} />
) : mimeType?.match(/^image/i) ? ( ) : mimeType?.match(/^image/i) ? (
<EnsureCompleteResponse response={activeResponse} render={ImageViewer} /> <EnsureCompleteResponse response={activeResponse} Component={ImageViewer} />
) : mimeType?.match(/^audio/i) ? ( ) : mimeType?.match(/^audio/i) ? (
<EnsureCompleteResponse response={activeResponse} render={AudioViewer} /> <EnsureCompleteResponse response={activeResponse} Component={AudioViewer} />
) : mimeType?.match(/^video/i) ? ( ) : mimeType?.match(/^video/i) ? (
<EnsureCompleteResponse response={activeResponse} render={VideoViewer} /> <EnsureCompleteResponse response={activeResponse} Component={VideoViewer} />
) : mimeType?.match(/pdf/i) ? ( ) : mimeType?.match(/pdf/i) ? (
<EnsureCompleteResponse response={activeResponse} render={PdfViewer} /> <EnsureCompleteResponse response={activeResponse} Component={PdfViewer} />
) : mimeType?.match(/csv|tab-separated/i) ? ( ) : mimeType?.match(/csv|tab-separated/i) ? (
<CsvViewer className="pb-2" response={activeResponse} /> <CsvViewer className="pb-2" response={activeResponse} />
) : ( ) : (
@@ -220,10 +220,10 @@ export function HttpResponsePane({ style, className, activeRequestId }: Props) {
function EnsureCompleteResponse({ function EnsureCompleteResponse({
response, response,
render, Component,
}: { }: {
response: HttpResponse; response: HttpResponse;
render: (v: { bodyPath: string }) => ReactNode; Component: ComponentType<{ bodyPath: string }>;
}) { }) {
if (response.bodyPath === null) { if (response.bodyPath === null) {
return <div>Empty response body</div>; return <div>Empty response body</div>;
@@ -238,5 +238,5 @@ function EnsureCompleteResponse({
); );
} }
return render({ bodyPath: response.bodyPath }); return <Component bodyPath={response.bodyPath} />;
} }

6
src-web/components/responseViewers/PdfViewer.tsx
View File

@@ -3,12 +3,10 @@ import 'react-pdf/dist/Page/AnnotationLayer.css';
import { convertFileSrc } from '@tauri-apps/api/core'; import { convertFileSrc } from '@tauri-apps/api/core';
import './PdfViewer.css'; import './PdfViewer.css';
import type { PDFDocumentProxy } from 'pdfjs-dist'; import type { PDFDocumentProxy } from 'pdfjs-dist';
import React, { lazy, useRef, useState } from 'react'; import React, { useRef, useState } from 'react';
import { Document, Page } from 'react-pdf';
import { useContainerSize } from '../../hooks/useContainerQuery'; import { useContainerSize } from '../../hooks/useContainerQuery';
const Document = lazy(() => import('react-pdf').then((m) => ({ default: m.Document })));
const Page = lazy(() => import('react-pdf').then((m) => ({ default: m.Page })));
import('react-pdf').then(({ pdfjs }) => { import('react-pdf').then(({ pdfjs }) => {
pdfjs.GlobalWorkerOptions.workerSrc = new URL( pdfjs.GlobalWorkerOptions.workerSrc = new URL(
'pdfjs-dist/build/pdf.worker.min.mjs', 'pdfjs-dist/build/pdf.worker.min.mjs',