msb-public
/
wiki
mirror of https://github.com/requarks/wiki
1
0
Code Issues Projects Releases Wiki Activity

feat: file manager non-ready state thumbnail

Browse Source
pull/6775/head
NGPixel 2 years ago
parent 0605f65465
commit 3726a2f9f7
No known key found for this signature in database
GPG Key ID: 8FDA2F1757F60D63
6 changed files with 50 additions and 10 deletions
Show Stats Download Patch File Download Diff File

9
server/controllers/common.js
Unescape View File

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

4
server/graph/resolvers/asset.js
Unescape View File

@ -309,10 +309,10 @@ module.exports = {
WIKI.logger.warn('Cannot generate asset thumbnail because the Sharp extension is not installed.') WIKI.logger.warn('Cannot generate asset thumbnail because the Sharp extension is not installed.')
} else { } else {
WIKI.logger.debug(`Generating thumbnail of asset ${sanitizedFilename}...`) 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 // -> Resize
await WIKI.extensions.ext.sharp.resize({ await WIKI.extensions.ext.sharp.resize({
format: 'png', format: 'webp',
inputStream: createReadStream(), inputStream: createReadStream(),
outputPath: previewDestPath, outputPath: previewDestPath,
width: 320, width: 320,

5
server/models/tree.js
Unescape View File

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

20
ux/public/_assets/illustrations/fileman-failed.svg
Unescape View File

@ -0,0 +1,20 @@
<?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>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

20
ux/public/_assets/illustrations/fileman-pending.svg
Unescape View File

@ -0,0 +1,20 @@
<?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>
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

2
ux/src/components/FileManager.vue
Unescape View File

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

Write Preview
Loading…
Cancel
Save