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:
parent
6ea5f2848a
commit
12cae32e33
@ -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 || (
|
||||||
|
|||||||
@ -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)
|
||||||
|
|||||||
@ -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
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user