This commit is contained in:
2025-11-18 14:17:53 +01:00
parent ea6e42175a
commit 3e21e72953
11 changed files with 118 additions and 130 deletions
+16 -16
View File
@@ -13,7 +13,7 @@ interface DocumentLike {
[key: string]: unknown;
}
interface PreviewEntry {
interface DocumentLink {
url?: string;
contentType?: string;
filename?: string;
@@ -36,7 +36,7 @@ type LayoutMode = 'split' | 'stacked' | (string & {});
interface DocumentViewerLayoutProps {
document?: DocumentLike | null;
previewEntry?: PreviewEntry | null;
documentLink?: DocumentLink | null;
summaryProps?: Record<string, unknown>;
metadataPayload?: unknown;
contentTabConfig?: ContentTabConfig | null;
@@ -81,7 +81,7 @@ const getFileExtension = (filename?: string | null) => {
const DocumentViewerLayout = ({
document,
previewEntry,
documentLink,
summaryProps = {},
metadataPayload,
contentTabConfig,
@@ -96,15 +96,15 @@ const DocumentViewerLayout = ({
const viewportRef = useRef<HTMLDivElement>(null);
const previewContent = useMemo(() => {
if (!document || !previewEntry?.url) {
if (!document || !documentLink?.url) {
return null;
}
const normalizedContentType = (previewEntry.contentType
const normalizedContentType = (documentLink.contentType
|| document.content_type
|| '')
.toLowerCase();
const normalizedFilename = previewEntry.filename
const normalizedFilename = documentLink.filename
|| document.filename
|| document.original_name
|| '';
@@ -123,7 +123,7 @@ const DocumentViewerLayout = ({
if (isImage) {
return (
<img
src={previewEntry.url}
src={documentLink.url}
alt={`Preview of ${document.title}`}
className="document-viewer__object document-viewer__object--image"
draggable={false}
@@ -137,7 +137,7 @@ const DocumentViewerLayout = ({
|| document.original_name;
return (
<PdfViewer
src={previewEntry.url}
src={documentLink.url}
title={documentTitle ? `Preview of ${documentTitle}` : undefined}
viewportRef={viewportRef}
/>
@@ -150,7 +150,7 @@ const DocumentViewerLayout = ({
className="document-viewer__object document-viewer__object--audio"
controls
preload="metadata"
src={previewEntry.url}
src={documentLink.url}
aria-label={`Audio preview of ${mediaLabel}`}
>
</audio>
@@ -163,15 +163,15 @@ const DocumentViewerLayout = ({
className="document-viewer__object document-viewer__object--video"
controls
preload="metadata"
src={previewEntry.url}
src={documentLink.url}
aria-label={`Video preview of ${mediaLabel}`}
>
</video>
);
}
const displayContentType = document.content_type || previewEntry.contentType || 'this file type';
const displayFilename = previewEntry.filename
const displayContentType = document.content_type || documentLink.contentType || 'this file type';
const displayFilename = documentLink.filename
|| document.filename
|| document.original_name
|| 'download';
@@ -184,7 +184,7 @@ const DocumentViewerLayout = ({
<div className="document-viewer__unsupported-filename">{displayFilename}</div>
<a
className="button-link document-viewer__unsupported-download"
href={previewEntry.url}
href={documentLink.url}
download={displayFilename}
target="_blank"
rel="noopener noreferrer"
@@ -194,17 +194,17 @@ const DocumentViewerLayout = ({
</a>
</div>
);
}, [document, previewEntry, viewportRef]);
}, [document, documentLink, viewportRef]);
const renderViewportPane = useCallback(() => (
<div className="document-viewer__viewport" ref={viewportRef}>
{!previewEntry?.url ? (
{!documentLink?.url ? (
<div className="document-viewer__message">{previewLoadingMessage}</div>
) : (
previewContent
)}
</div>
), [previewContent, previewEntry?.url, previewLoadingMessage, viewportRef]);
), [previewContent, documentLink?.url, previewLoadingMessage, viewportRef]);
const viewportPane = renderViewportPane();
+17 -17
View File
@@ -39,7 +39,7 @@ interface DocumentLike {
version_number?: number;
version?: { content_type?: string | null } | null;
} | null;
previewEntry?: {
documentLink?: {
url: string;
alt?: string;
contentType?: string | null;
@@ -56,7 +56,7 @@ interface AssetLike {
interface DocumentViewerPanelProps extends DocumentSummarySectionProps {
document: DocumentLike | null;
previewEntry?: {
documentLink?: {
url?: string;
contentType?: string | null;
filename?: string | null;
@@ -79,7 +79,7 @@ interface DocumentViewerPanelProps extends DocumentSummarySectionProps {
export const createDocumentViewerHeaderActions = ({
document,
actionState,
previewEntry,
documentLink,
onZoom,
canZoom = false,
}) => {
@@ -87,7 +87,7 @@ export const createDocumentViewerHeaderActions = ({
return null;
}
const downloadHref = actionState?.downloadHref || previewEntry?.url;
const downloadHref = actionState?.downloadHref || documentLink?.url;
if (!downloadHref && !(canZoom && onZoom)) {
return null;
}
@@ -123,7 +123,7 @@ export const createDocumentViewerHeaderActions = ({
const DocumentViewerPanel: React.FC<DocumentViewerPanelProps> = ({
document,
previewEntry,
documentLink,
hydrateDocument,
tagLookupById,
tagOptions,
@@ -254,11 +254,11 @@ const DocumentViewerPanel: React.FC<DocumentViewerPanelProps> = ({
const [zoomOverlayOpen, setZoomOverlayOpen] = useState(false);
const handleZoomOpen = useCallback(() => {
if (!previewEntry?.url) {
if (!documentLink?.url) {
return;
}
setZoomOverlayOpen(true);
}, [previewEntry?.url]);
}, [documentLink?.url]);
const handleZoomClose = useCallback(() => {
setZoomOverlayOpen(false);
@@ -266,7 +266,7 @@ const DocumentViewerPanel: React.FC<DocumentViewerPanelProps> = ({
useEffect(() => {
setZoomOverlayOpen(false);
}, [previewEntry?.url, document?.id]);
}, [documentLink?.url, document?.id]);
useEffect(() => {
if (hydrateDocument && document?.id) {
@@ -355,23 +355,23 @@ const DocumentViewerPanel: React.FC<DocumentViewerPanelProps> = ({
}, [breadcrumbs, handleBreadcrumbNavigate]);
const zoomDisplay = useMemo(() => {
if (!previewEntry?.url || !document) {
if (!documentLink?.url || !document) {
return null;
}
const docContentType = document.content_type;
const versionContentType = document.current_version?.version?.content_type;
const normalizedContentType = previewEntry.contentType || docContentType || versionContentType || null;
const normalizedContentType = documentLink.contentType || docContentType || versionContentType || null;
return {
url: previewEntry.url,
url: documentLink.url,
alt: document.title,
contentType: normalizedContentType || undefined,
};
}, [previewEntry?.url, previewEntry?.contentType, document]);
}, [documentLink?.url, documentLink?.contentType, document]);
const headerActions = createDocumentViewerHeaderActions({
document,
actionState,
previewEntry,
documentLink,
onZoom: zoomDisplay ? handleZoomOpen : null,
canZoom: Boolean(zoomDisplay),
});
@@ -471,7 +471,7 @@ const DocumentViewerPanel: React.FC<DocumentViewerPanelProps> = ({
<section className={viewerClassName}>
<DocumentViewerLayout
document={document}
previewEntry={previewEntry}
documentLink={documentLink}
summaryProps={summaryProps}
metadataPayload={metadataPayload}
contentTabConfig={contentTabConfig}
@@ -495,7 +495,7 @@ const DocumentViewerPanel: React.FC<DocumentViewerPanelProps> = ({
const overlayDocument = useMemo(() => (
document && zoomDisplay?.url
? { ...document, previewEntry: zoomDisplay }
? { ...document, documentLink: zoomDisplay }
: document
), [document, zoomDisplay]);
@@ -549,7 +549,7 @@ export default DocumentViewerPanel;
export const createDocumentViewerSurface = ({
document,
previewEntry,
documentLink,
ensureAssetUrl,
ensurePreviewData,
getDocumentAsset,
@@ -581,7 +581,7 @@ export const createDocumentViewerSurface = ({
content: (
<DocumentViewerPanel
document={document}
previewEntry={previewEntry}
documentLink={documentLink}
hydrateDocument={ensurePreviewData}
tagLookupById={tagLookupById}
tagOptions={tagOptions}