Elijah/drive
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix: update frontend to render css grid and proper aspect ratios for doc thumbnails, fix pdf landscape orientation
All checks were successful
Automated Container Build / build-and-push (push) Successful in 1m19s
Details

Browse source
This commit is contained in:
Elijah 2026-05-25 15:53:45 -07:00
parent 130aa1b806
commit 1c721b6f6f
4 changed files with 57 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/components/FileExplorer.tsx
View file

@ -1222,10 +1222,10 @@ export default function FileExplorer({ onLogout }: FileExplorerProps) {
})();
if (isMedia && file.checksum && viewMode === 'grid') {
const isDoc = file.name.endsWith('.docx') || file.name.endsWith('.pptx') || file.name.endsWith('.xlsx');
const docType = file.name.endsWith('.docx') ? 'docs' : file.name.endsWith('.pptx') ? 'slides' : (file.name.endsWith('.xlsx') || file.name.endsWith('.xls')) ? 'sheets' : null;
return (
<div className="relative w-full h-full flex items-center justify-center overflow-hidden rounded-md">
<ThumbnailImage checksum={file.checksum} fallbackIcon={fallbackIcon} downloadToken={downloadToken} isDocument={isDoc} />
<ThumbnailImage checksum={file.checksum} fallbackIcon={fallbackIcon} downloadToken={downloadToken || ''} docType={docType} />
</div>
);
}

2
frontend/src/components/OfficeHome.tsx
View file

@ -244,7 +244,7 @@ export default function OfficeHome({ type, onFileSelect, onCreateBlank, onPinCha
>
{file.checksum ? (
<div className="absolute inset-0 w-full h-full flex items-center justify-center z-0">
<ThumbnailImage checksum={file.checksum} fallbackIcon={<Icon className="w-16 h-16 text-3xl opacity-30 group-hover:opacity-60 transition-opacity" />} downloadToken={downloadToken} isDocument={true} />
<ThumbnailImage checksum={file.checksum} fallbackIcon={<Icon className="w-16 h-16 text-3xl opacity-30 group-hover:opacity-60 transition-opacity" />} downloadToken={downloadToken} docType={type} />
</div>
) : (
<Icon className="w-16 h-16 text-3xl opacity-30 group-hover:opacity-60 transition-opacity" />

76
frontend/src/components/ThumbnailImage.tsx
View file

@ -5,38 +5,66 @@ interface ThumbnailImageProps {
checksum: string;
fallbackIcon: React.ReactNode;
downloadToken: string;
isDocument?: boolean;
docType?: 'docs' | 'slides' | 'sheets' | null;
}
export default function ThumbnailImage({ checksum, fallbackIcon, downloadToken, isDocument }: ThumbnailImageProps) {
export default function ThumbnailImage({ checksum, fallbackIcon, downloadToken, docType }: ThumbnailImageProps) {
const [errorCount, setErrorCount] = useState(0);
const [key, setKey] = useState(0);
const [showFallback, setShowFallback] = useState(false);
const docStyle = docType === 'docs'
? 'w-[85%] aspect-[1/1.4] bg-white border border-gray-300 dark:border-gray-600 shadow-md'
: docType === 'slides'
? 'w-[85%] aspect-[16/9] bg-white border border-gray-300 dark:border-gray-600 shadow-md'
: docType === 'sheets'
? 'w-[85%] aspect-[1.4/1] bg-white border border-gray-300 dark:border-gray-600 shadow-md'
: 'w-full h-full';
const imgElement = (
<img
key={key}
src={downloadToken ? `${api.getThumbnailUrl(checksum, downloadToken)}${errorCount > 0 ? `&t=${key}` : ''}` : ''}
alt=""
className={`object-contain ${docType ? 'w-full h-full object-cover mix-blend-multiply' : 'w-full h-full'}`}
style={{ display: showFallback ? 'none' : 'block' }}
onError={(e) => {
if (errorCount < 20) {
e.currentTarget.style.display = 'none';
setTimeout(() => {
setErrorCount(c => c + 1);
setKey(Date.now());
}, 2000);
} else {
setShowFallback(true);
}
}}
onLoad={(e) => {
e.currentTarget.style.display = 'block';
setShowFallback(false);
}}
/>
);
if (docType) {
return (
<div
className={`flex items-center justify-center overflow-hidden ${docStyle}`}
style={docType === 'sheets' ? {
backgroundImage: 'linear-gradient(to right, #f3f4f6 1px, transparent 1px), linear-gradient(to bottom, #f3f4f6 1px, transparent 1px)',
backgroundSize: '16px 16px',
backgroundPosition: 'left top'
} : {}}
>
{imgElement}
{showFallback && fallbackIcon}
</div>
);
}
return (
<>
<img
key={key}
src={downloadToken ? `${api.getThumbnailUrl(checksum, downloadToken)}${errorCount > 0 ? `&t=${key}` : ''}` : ''}
alt=""
className={`object-contain ${isDocument ? 'max-w-[85%] max-h-[85%] bg-white border border-gray-300 dark:border-gray-600 shadow-md' : 'w-full h-full'}`}
style={{ display: showFallback ? 'none' : 'block' }}
onError={(e) => {
if (errorCount < 20) {
e.currentTarget.style.display = 'none';
setTimeout(() => {
setErrorCount(c => c + 1);
setKey(Date.now());
}, 2000);
} else {
setShowFallback(true);
}
}}
onLoad={(e) => {
e.currentTarget.style.display = 'block';
setShowFallback(false);
}}
/>
{imgElement}
{showFallback && fallbackIcon}
</>
);