Enhance Thumbnail and ApiServerContext components for improved functionality

- Removed the default border style from the Thumbnail component to streamline its appearance.
- Updated the Thumbnail component to dynamically set the width in the card styles, enhancing layout flexibility.
- Modified the fetchFileThumbnail function in ApiServerContext to include an optional parameter for handling 404 errors, improving error management during thumbnail fetching.
- Added a thumbnail property to the GCodeFile model, enabling thumbnail support for GCode files.
This commit is contained in:
Tom Butcher 2026-08-01 15:11:02 +01:00
parent 6ea5f2848a
commit 12cae32e33
3 changed files with 6 additions and 3 deletions

View File

@ -42,7 +42,6 @@ const Thumbnail = function Thumbnail({
borderRadius: '5px', borderRadius: '5px',
width: size, width: size,
height: size, height: size,
border: 'none',
...style ...style
} }
@ -151,7 +150,7 @@ const Thumbnail = function Thumbnail({
<Card <Card
className={className} className={className}
style={cardStyle} style={cardStyle}
styles={{ body: { padding: 0, height: '100%' } }} styles={{ body: { padding: 0, height: '100%', width: style?.width } }}
> >
<Flex justify='center' align='center' style={{ height: '100%' }}> <Flex justify='center' align='center' style={{ height: '100%' }}>
{fallback || ( {fallback || (

View File

@ -1510,7 +1510,7 @@ const ApiServerProvider = ({ children }) => {
} }
} }
const fetchFileThumbnail = async (file, size) => { const fetchFileThumbnail = async (file, size, show404Error = false) => {
try { try {
const response = await axios.get( const response = await axios.get(
`${config.backendUrl}/files/${file._id}/thumbnail`, `${config.backendUrl}/files/${file._id}/thumbnail`,
@ -1528,6 +1528,9 @@ const ApiServerProvider = ({ children }) => {
}) })
return window.URL.createObjectURL(blob) return window.URL.createObjectURL(blob)
} catch (err) { } catch (err) {
if (err.response.status === 404 && show404Error == false) {
return null
}
console.error(err) console.error(err)
showError(err, () => { showError(err, () => {
fetchFileThumbnail(file, size) fetchFileThumbnail(file, size)

View File

@ -164,6 +164,7 @@ export const GCodeFile = {
showPreview: false, showPreview: false,
showHyperlink: true, showHyperlink: true,
masterFilter: ['.gcode', '.g'], masterFilter: ['.gcode', '.g'],
thumbnail: true,
columnWidth: 200 columnWidth: 200
}, },
{ {