Yaseen/Tech4biz-channel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: Make Docx and Spreadsheet thumbnails scale responsively to full bleed width

Browse Source
This commit is contained in:
kenilkb 2026-07-16 10:26:38 +05:30
parent 7c6eebb151
commit cf21405c53
2 changed files with 41 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
Channel-Frontend/src/features/assets/components/DocxThumbnail.tsx
View File

@ -8,6 +8,8 @@ interface DocxThumbnailProps {
export const DocxThumbnail: React.FC<DocxThumbnailProps> = ({ url, fallback }) => {
const containerRef = useRef<HTMLDivElement>(null);
const parentRef = useRef<HTMLDivElement>(null);
const [scale, setScale] = useState(0.2);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(false);
@ -43,10 +45,24 @@ export const DocxThumbnail: React.FC<DocxThumbnailProps> = ({ url, fallback }) =
};
}, [url]);
useEffect(() => {
if (!parentRef.current) return;
const updateScale = () => {
if (parentRef.current) {
const width = parentRef.current.offsetWidth || 280;
setScale(width / 800);
}
};
updateScale();
const observer = new ResizeObserver(updateScale);
observer.observe(parentRef.current);
return () => observer.disconnect();
}, []);
if (error) return <>{fallback}</>;
return (
<div className="w-full h-full relative overflow-hidden bg-white select-none pointer-events-none">
<div ref={parentRef} className="w-full h-full relative overflow-hidden bg-white select-none pointer-events-none">
{loading && (
<div className="absolute inset-0 flex items-center justify-center bg-slate-50 z-10">
<div className="w-5 h-5 rounded-full border-2 border-indigo-600 border-t-transparent animate-spin" />
@ -56,9 +72,9 @@ export const DocxThumbnail: React.FC<DocxThumbnailProps> = ({ url, fallback }) =
ref={containerRef}
className="absolute top-0 left-0 origin-top-left"
style={{
width: '760px',
height: '980px',
transform: 'scale(0.18)',
width: '800px',
height: '1000px',
transform: `scale(${scale})`,
padding: '16px',
overflow: 'hidden',
}}

26
Channel-Frontend/src/features/assets/components/SpreadsheetThumbnail.tsx
View File

@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import React, { useEffect, useState, useRef } from 'react';
import { axiosInstance } from '../../../services/axios';
import * as XLSX from 'xlsx';
@ -8,7 +8,9 @@ interface SpreadsheetThumbnailProps {
}
export const SpreadsheetThumbnail: React.FC<SpreadsheetThumbnailProps> = ({ url, fallback }) => {
const parentRef = useRef<HTMLDivElement>(null);
const [html, setHtml] = useState<string>('');
const [scale, setScale] = useState(0.2);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(false);
@ -49,10 +51,24 @@ export const SpreadsheetThumbnail: React.FC<SpreadsheetThumbnailProps> = ({ url,
};
}, [url]);
useEffect(() => {
if (!parentRef.current) return;
const updateScale = () => {
if (parentRef.current) {
const width = parentRef.current.offsetWidth || 280;
setScale(width / 900);
}
};
updateScale();
const observer = new ResizeObserver(updateScale);
observer.observe(parentRef.current);
return () => observer.disconnect();
}, []);
if (error) return <>{fallback}</>;
return (
<div className="w-full h-full relative overflow-hidden bg-white select-none pointer-events-none p-1">
<div ref={parentRef} className="w-full h-full relative overflow-hidden bg-white select-none pointer-events-none p-1">
{loading && (
<div className="absolute inset-0 flex items-center justify-center bg-slate-50 z-10">
<div className="w-5 h-5 rounded-full border-2 border-emerald-600 border-t-transparent animate-spin" />
@ -61,9 +77,9 @@ export const SpreadsheetThumbnail: React.FC<SpreadsheetThumbnailProps> = ({ url,
<div
className="excel-thumbnail-container absolute top-0 left-0 origin-top-left"
style={{
width: '780px',
height: '500px',
transform: 'scale(0.22)',
width: '900px',
height: '600px',
transform: `scale(${scale})`,
overflow: 'hidden',
}}
>