feat: file manager non-ready state thumbnail

server/controllers/common.js

@@ -38,7 +38,6 @@ router.get('/_site/:siteId?/:resource', async (req, res, next) => {
   if (!site) {
     return res.status(404).send('Site Not Found')
   }
-  console.info(req.params)
   switch (req.params.resource) {
     case 'logo': {
       if (site.config.assets.logo) {
@@ -76,7 +75,7 @@ router.get('/_site/:siteId?/:resource', async (req, res, next) => {
 /**
  * Asset Thumbnails / Download
  */
-router.get('/_thumb/:id.png', async (req, res, next) => {
+router.get('/_thumb/:id.webp', async (req, res, next) => {
   const thumb = await WIKI.db.assets.getThumbnail({
     id: req.params.id
   })
@@ -86,16 +85,16 @@ router.get('/_thumb/:id.png', async (req, res, next) => {
 
     switch (thumb.previewState) {
       case 'pending': {
-        res.send('PENDING')
+        res.redirect('/_assets/illustrations/fileman-pending.svg')
         break
       }
       case 'ready': {
-        res.set('Content-Type', 'image/png')
+        res.set('Content-Type', 'image/webp')
         res.send(thumb.preview)
         break
       }
       case 'failed': {
-        res.status(500).send('Thumbnail Preview Failed').end()
+        res.redirect('/_assets/illustrations/fileman-failed.svg')
         break
       }
       default: {

server/graph/resolvers/asset.js

@@ -309,10 +309,10 @@ module.exports = {
               WIKI.logger.warn('Cannot generate asset thumbnail because the Sharp extension is not installed.')
             } else {
               WIKI.logger.debug(`Generating thumbnail of asset ${sanitizedFilename}...`)
-              const previewDestPath = path.resolve(WIKI.ROOTPATH, WIKI.config.dataPath, `uploads/${tempFileId}-thumb.png`)
+              const previewDestPath = path.resolve(WIKI.ROOTPATH, WIKI.config.dataPath, `uploads/${tempFileId}-thumb.webp`)
               // -> Resize
               await WIKI.extensions.ext.sharp.resize({
-                format: 'png',
+                format: 'webp',
                 inputStream: createReadStream(),
                 outputPath: previewDestPath,
                 width: 320,

server/models/tree.js

@@ -176,8 +176,9 @@ module.exports = class Tree extends Model {
       folderPath: '',
       fileName: ''
     }
-    const folderPath = commonHelper.decodeTreePath(folder.folderPath ? `${folder.folderPath}.${folder.fileName}` : folder.fileName)
-    const fullPath = folderPath ? `${folderPath}/${fileName}` : fileName
+    const folderPath = folder.folderPath ? `${folder.folderPath}.${folder.fileName}` : folder.fileName
+    const decodedFolderPath = commonHelper.decodeTreePath(folderPath)
+    const fullPath = decodedFolderPath ? `${decodedFolderPath}/${fileName}` : fileName
 
     WIKI.logger.debug(`Adding asset ${fullPath} to tree...`)
 

ux/public/_assets/illustrations/fileman-failed.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 320 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <rect x="0" y="0" width="320" height="200" style="fill:url(#_Linear1);"/>
+    <g transform="matrix(1,0,0,1,112,52)">
+        <path d="M48,84C28.204,84 12,67.796 12,48C12,28.204 28.204,12 48,12C67.796,12 84,28.204 84,48C84,67.796 67.796,84 48,84ZM48,18C31.398,18 18,31.398 18,48C18,64.602 31.398,78 48,78C64.602,78 78,64.602 78,48C78,31.398 64.602,18 48,18Z" style="fill:rgb(255,111,0);fill-rule:nonzero;"/>
+    </g>
+    <g transform="matrix(1,0,0,1,112,52)">
+        <path d="M84.88,17.32C84.28,16.6 83.68,15.92 83.04,15.24L78.8,19.48C79.44,20.16 80.04,20.86 80.62,21.58C86.48,28.8 90,38 90,48C90,58 86.48,67.2 80.62,74.42C80.04,75.14 79.44,75.84 78.8,76.52L83.04,80.76C83.68,80.08 84.28,79.4 84.88,78.68C91.82,70.36 96,59.66 96,48C96,36.34 91.82,25.64 84.88,17.32ZM6,48C6,38 9.52,28.8 15.38,21.58C15.96,20.86 16.56,20.16 17.2,19.48L12.96,15.24C12.32,15.92 11.72,16.6 11.12,17.32C4.18,25.64 0,36.34 0,48C0,59.66 4.18,70.36 11.12,78.68C11.72,79.4 12.32,80.08 12.96,80.76L17.2,76.52C16.56,75.84 15.96,75.14 15.38,74.42C9.52,67.2 6,58 6,48Z" style="fill:rgb(230,81,0);fill-rule:nonzero;"/>
+    </g>
+    <g transform="matrix(1,0,0,1,112,52)">
+        <rect x="44" y="26" width="8" height="30" style="fill:rgb(230,81,0);"/>
+    </g>
+    <g transform="matrix(1,0,0,1,112,52)">
+        <rect x="44" y="62" width="8" height="8" style="fill:rgb(230,81,0);"/>
+    </g>
+    <defs>
+        <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(320,0,0,200,0,100)"><stop offset="0" style="stop-color:rgb(189,0,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(125,13,0);stop-opacity:1"/></linearGradient>
+    </defs>
+</svg>

ux/public/_assets/illustrations/fileman-pending.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 320 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <rect x="0" y="0" width="320" height="200" style="fill:url(#_Linear1);"/>
+    <g transform="matrix(1,0,0,1,96.0007,36)">
+        <path d="M92.175,96.533L92.175,114.25L84.507,114.25L84.507,114.175L63.87,90.173L43.23,114.175L43.23,114.25L37.023,114.25L37.023,96.328C37.023,91.936 38.847,87.736 42.055,84.738L64,63.715L86.893,84.71C90.253,87.719 92.176,92.022 92.175,96.532Z" style="fill:rgb(0,172,234);fill-rule:nonzero;"/>
+    </g>
+    <g transform="matrix(1,0,0,1,96.0007,36)">
+        <path d="M84.507,114.175L84.507,114.25L43.23,114.25L43.23,114.175L63.87,90.173L84.507,114.175Z" style="fill:rgb(0,239,209);fill-rule:nonzero;"/>
+    </g>
+    <g transform="matrix(1,0,0,1,96.0007,36)">
+        <path d="M90.978,13.75L90.978,29.995C90.977,34.387 89.154,38.588 85.945,41.588L64,62.608L41.108,41.612C37.747,38.604 35.824,34.301 35.825,29.79L35.825,13.75L90.978,13.75Z" style="fill:rgb(0,239,209);fill-rule:nonzero;"/>
+    </g>
+    <g transform="matrix(1,0,0,1,96.0007,36)">
+        <path d="M93.478,29.995L93.478,16.25L101.028,16.25C102.399,16.25 103.528,15.121 103.528,13.75C103.528,12.379 102.399,11.25 101.028,11.25L26.973,11.25C25.601,11.25 24.473,12.379 24.473,13.75C24.473,15.121 25.601,16.25 26.973,16.25L33.325,16.25L33.325,29.79C33.327,35.005 35.548,39.981 39.428,43.465L60.935,63.19L40.335,82.923C36.634,86.398 34.529,91.252 34.521,96.329L34.521,111.75L26.971,111.75C25.6,111.75 24.471,112.879 24.471,114.25C24.471,115.621 25.6,116.75 26.971,116.75L101.028,116.75C102.399,116.75 103.528,115.621 103.528,114.25C103.528,112.879 102.399,111.75 101.028,111.75L94.675,111.75L94.675,96.533C94.673,91.317 92.452,86.342 88.571,82.857L67.065,63.134L87.665,43.403C91.365,39.926 93.469,35.072 93.478,29.995ZM48.612,111.75L63.87,94.007L79.125,111.75L48.612,111.75ZM85.225,86.573C88.054,89.109 89.674,92.733 89.675,96.533L89.675,111.75L85.72,111.75L65.766,88.543C65.291,87.99 64.598,87.672 63.87,87.672C63.142,87.672 62.449,87.99 61.975,88.543L42.018,111.75L39.523,111.75L39.523,96.328C39.528,92.629 41.064,89.093 43.762,86.564L43.785,86.543L64.037,67.141L85.203,86.553L85.225,86.573ZM84.237,39.762C84.23,39.768 84.223,39.775 84.216,39.782L63.963,59.182L42.797,39.771L42.775,39.75C39.946,37.214 38.326,33.59 38.325,29.79L38.325,16.25L88.477,16.25L88.477,29.995C88.471,33.694 86.936,37.231 84.237,39.762Z" style="fill:rgb(8,56,99);fill-rule:nonzero;"/>
+    </g>
+    <defs>
+        <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(320,0,0,200,0,100)"><stop offset="0" style="stop-color:rgb(0,239,209);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(0,172,234);stop-opacity:1"/></linearGradient>
+    </defs>
+</svg>

ux/src/components/FileManager.vue

@@ -473,7 +473,7 @@ const currentFileDetails = computed(() => {
         break
       }
       case 'asset': {
-        thumbnail = `/_thumb/${item.id}.png`
+        thumbnail = `/_thumb/${item.id}.webp`
         items.push({
           label: t('fileman.detailsAssetType'),
           value: fileTypes[item.fileExt] ? t(`fileman.${item.fileExt}FileType`) : t('fileman.unknownFileType', { type: item.fileExt.toUpperCase() })