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',
width: size,
height: size,
border: 'none',
...style
}
@ -151,7 +150,7 @@ const Thumbnail = function Thumbnail({
<Card
className={className}
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%' }}>
{fallback || (

View File

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

View File

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