From 0da1bacd4fd87bcf8be25ca80687cbb70557abfa Mon Sep 17 00:00:00 2001 From: fatchan Date: Sat, 9 Nov 2019 21:30:46 +1100 Subject: [PATCH] patching up various things to do with audio support like default thumbnail, expanding, thumb extensions, live post template, catalog tiles, etc --- gulp/res/img/audio.png | Bin 0 -> 1166 bytes gulp/res/js/expand.js | 171 ++++++++++++++++++----------------- gulp/res/js/post.js | 16 +++- models/forms/makepost.js | 10 +- schedules/prune.js | 2 +- views/mixins/catalogtile.pug | 10 +- 6 files changed, 115 insertions(+), 94 deletions(-) create mode 100644 gulp/res/img/audio.png diff --git a/gulp/res/img/audio.png b/gulp/res/img/audio.png new file mode 100644 index 0000000000000000000000000000000000000000..c13185e48cb53b8ca2bf5bd07b1db4eba885b050 GIT binary patch literal 1166 zcmeAS@N?(olHy`uVBq!ia0vp^CqS5k4M?tyST~P>fw48y**U<|*;%2WC_gPTCzXLg zV`A+@TaUvI5^eXldHr2!al>(m^MqF^jv+?^R|m9kEey-Jdhp35`;1Eymh7 zFSeRb@7yk{9b8Qh_&d5+PhQkLQffVv2T(1U6Xdfi8EH7?@SV!_xQD(-M;%rE2fp-oxj-sCqoJThMnCm>^ee}}T z`}rP!nKV~VMLTsl;}=aw`eUZY);*3XxN+Y2u$z^szl@p~SFX->Lv1Ook0OO3fu^Uv zr^kd@0~IA@^L1u07c8X5B5LqMjP8(K2&RcH=O_Q%|uoGQv(O=3PkA;}Wgh!W@g+}zZ>5(ej@ z)Wnk16ovB4k_-iRPv3y>Mm}){2BuU`7srr_TW@bW<{dH+aJa~G>hF3Rof~c^_zIJb zz0bYvHudQH8%JHzp0UYPMKTF+aImm2F)=naI5;RM2ncY1Fd-p`N)%N{LMwHZbesZr zt4auarbUS~UJ&YuU}<`(B;X_7n6OJh;4*7t2W#VvE=7m{2g_wwg&BILJJ#$-FwhI< zVqq~dj+RUpuu|H%R*)kJjQZz>vM7U;D~N&6gF7I@Sd_$m?Z^tU5ett)@c;)4VGm&O zCXxqWfdLZQaVU?|PU+F>>&BOrI9)_^?`w-Sax8xMy!8=}Qs3-(tqxvC6@?l*m>VOQ zB5VXMGeg30!l^xt8Uhhbr@QJ8rFu2;-2HUt>-u}E<5uk5zy9KNPG52Q6NW~wMl$6 zFrsEe00aNg`du#-1txYlD=1n1_bKFXQCW6Oz|O$5Qf2S^E!|EEYFyhQ5V46CMj$SR l5K4?fLJ>m_3ikAnaJ literal 0 HcmV?d00001 diff --git a/gulp/res/js/expand.js b/gulp/res/js/expand.js index db30c3cc..d7c09e38 100644 --- a/gulp/res/js/expand.js +++ b/gulp/res/js/expand.js @@ -1,97 +1,104 @@ window.addEventListener('DOMContentLoaded', (event) => { - const thumbs = document.getElementsByClassName('post-file-src'); + const isCatalog = window.location.pathname.endsWith('catalog.html'); - const toggle = function(thumb, exp, fn) { - const close = exp.previousSibling.innerText === 'Close video' ? exp.previousSibling : null; - if (thumb.style.display === 'none') { - thumb.style.display = ''; - exp.style.display = 'none'; - fn.style.maxWidth = ''; - if (close) { - close.style.display = 'none'; - exp.pause(); - } - } else { - thumb.style.display = 'none'; - exp.style.display = ''; - fn.style.maxWidth = exp.offsetWidth+'px'; - if (close) { - close.style.display = ''; - exp.play(); - } - } - } + if (!isCatalog) { + const thumbs = document.getElementsByClassName('post-file-src'); - const expand = function(e) { - e.preventDefault(); - const fileLink = this.firstChild; - const fileSrc = fileLink.href; - const type = this.dataset.type; - const thumbElement = fileLink.firstChild; - const fileName = this.previousSibling; - const next = thumbElement.nextSibling; - let expandedElement; - if (next) { - if (next.innerText === 'Close video') { - expandedElement = next.nextSibling; + const toggle = function(thumb, exp, fn) { + const close = exp.previousSibling.innerText === 'Close' ? exp.previousSibling : null; + if (thumb.style.display === 'none') { + thumb.style.display = ''; + exp.style.display = 'none'; + fn.style.maxWidth = ''; + if (close) { + close.style.display = 'none'; + exp.pause(); + } } else { - expandedElement = next; + thumb.style.display = 'none'; + exp.style.display = ''; + fn.style.maxWidth = exp.offsetWidth+'px'; + if (close) { + close.style.display = ''; + exp.play(); + } } } - if (!expandedElement && thumbElement.style.opacity !== '0.5') { - fileLink.style.minWidth = fileLink.offsetWidth+'px'; - fileLink.style.minHeight = fileLink.offsetHeight+'px'; - let source; - switch(type) { - case 'image': - thumbElement.style.opacity = '0.5'; - thumbElement.style.cursor = 'wait' - expandedElement = document.createElement('img'); - source = expandedElement; - source.onload = function() { - thumbElement.style.opacity = ''; - thumbElement.style.cursor = ''; + + const expand = function(e) { + e.preventDefault(); + const fileLink = this.firstChild; + const fileSrc = fileLink.href; + const type = this.dataset.type; + const thumbElement = fileLink.firstChild; + const fileName = this.previousSibling; + const next = thumbElement.nextSibling; + let expandedElement; + if (next) { + if (next.innerText === 'Close') { + expandedElement = next.nextSibling; + } else { + expandedElement = next; + } + } + if (!expandedElement && thumbElement.style.opacity !== '0.5') { + let source; + switch(type) { + case 'image': + fileLink.style.minWidth = fileLink.offsetWidth+'px'; + fileLink.style.minHeight = fileLink.offsetHeight+'px'; + thumbElement.style.opacity = '0.5'; + thumbElement.style.cursor = 'wait' + expandedElement = document.createElement('img'); + source = expandedElement; + source.onload = function() { + thumbElement.style.opacity = ''; + thumbElement.style.cursor = ''; + fileLink.appendChild(expandedElement); + toggle(thumbElement, expandedElement, fileName); + } + break; + case 'video': + fileLink.style.minWidth = fileLink.offsetWidth+'px'; + fileLink.style.minHeight = fileLink.offsetHeight+'px'; + case 'audio': + expandedElement = document.createElement(type); + close = document.createElement('div'); + close.innerText = 'Close'; + close.addEventListener('click', function(e) { + e.preventDefault(); + e.stopPropagation(); + toggle(thumbElement, expandedElement, fileName); + }, true); + expandedElement.controls = 'true'; + source = document.createElement('source'); + expandedElement.appendChild(source); fileLink.appendChild(expandedElement); + fileLink.insertBefore(close, expandedElement); toggle(thumbElement, expandedElement, fileName); - } - break; - case 'video': - expandedElement = document.createElement('video'); - close = document.createElement('div'); - close.innerText = 'Close video'; - close.addEventListener('click', function(e) { - e.preventDefault(); - e.stopPropagation(); - toggle(thumbElement, expandedElement, fileName); - }, true); - expandedElement.controls = 'true'; - source = document.createElement('source'); - expandedElement.appendChild(source); - fileLink.appendChild(expandedElement); - fileLink.insertBefore(close, expandedElement); - toggle(thumbElement, expandedElement, fileName); - break; - deault: - break; //uh oh + break; + deault: + break; //uh oh + } + source.src = fileSrc; + } else if (expandedElement) { + toggle(thumbElement, expandedElement, fileName); } - source.src = fileSrc; - } else if (expandedElement) { - toggle(thumbElement, expandedElement, fileName); + return false; + }; + + for (let i = 0; i < thumbs.length; i++) { + thumbs[i].addEventListener('click', expand, false); } - return false; - }; - for (let i = 0; i < thumbs.length; i++) { - thumbs[i].addEventListener('click', expand, false); + window.addEventListener('addPost', function(e) { + const post = e.detail.post; + const newthumbs = post.getElementsByClassName('post-file-src'); + for (let i = 0; i < newthumbs.length; i++) { + newthumbs[i].addEventListener('click', expand, false); + } + }); } - window.addEventListener('addPost', function(e) { - const post = e.detail.post; - const newthumbs = post.getElementsByClassName('post-file-src'); - for (let i = 0; i < newthumbs.length; i++) { - newthumbs[i].addEventListener('click', expand, false); - } - }); - }); diff --git a/gulp/res/js/post.js b/gulp/res/js/post.js index 49a21efa..c867abbd 100644 --- a/gulp/res/js/post.js +++ b/gulp/res/js/post.js @@ -81,11 +81,17 @@ pug_html = pug_html + ("\u003Cdiv class=\"post-file\"\u003E\u003Cspan class=\"po if (file.durationString) { pug_html = pug_html + (", " + (pug_escape(null == (pug_interp = file.durationString) ? "" : pug_interp))); } -pug_html = pug_html + ")\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003Cdiv" + (" class=\"post-file-src\""+pug_attr("data-type", file.mimetype.split('/')[0], true, false)) + "\u003E\u003Ca" + (" target=\"_blank\""+pug_attr("href", `/img/${file.filename}`, true, false)) + "\u003E"; +pug_html = pug_html + ")\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E"; +const type = file.mimetype.split('/')[0] +pug_html = pug_html + "\u003Cdiv" + (" class=\"post-file-src\""+pug_attr("data-type", type, true, false)) + "\u003E\u003Ca" + (" target=\"_blank\""+pug_attr("href", `/img/${file.filename}`, true, false)) + "\u003E"; if (post.spoiler) { pug_html = pug_html + "\u003Cimg class=\"file-thumb\" src=\"\u002Fimg\u002Fspoiler.png\" width=\"200\" height=\"200\"\u002F\u003E"; } else +if (type === 'audio') { +pug_html = pug_html + "\u003Cimg class=\"file-thumb\" src=\"\u002Fimg\u002Faudio.png\" width=\"200\" height=\"200\"\u002F\u003E"; +} +else if (file.hasThumb) { pug_html = pug_html + "\u003Cimg" + (" class=\"file-thumb\""+pug_attr("src", `/img/thumb-${file.hash}${file.thumbextension}`, true, false)+pug_attr("height", file.geometry.thumbheight, true, false)+pug_attr("width", file.geometry.thumbwidth, true, false)) + "\u002F\u003E"; } @@ -103,11 +109,17 @@ pug_html = pug_html + ("\u003Cdiv class=\"post-file\"\u003E\u003Cspan class=\"po if (file.durationString) { pug_html = pug_html + (", " + (pug_escape(null == (pug_interp = file.durationString) ? "" : pug_interp))); } -pug_html = pug_html + ")\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003Cdiv" + (" class=\"post-file-src\""+pug_attr("data-type", file.mimetype.split('/')[0], true, false)) + "\u003E\u003Ca" + (" target=\"_blank\""+pug_attr("href", `/img/${file.filename}`, true, false)) + "\u003E"; +pug_html = pug_html + ")\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E"; +const type = file.mimetype.split('/')[0] +pug_html = pug_html + "\u003Cdiv" + (" class=\"post-file-src\""+pug_attr("data-type", type, true, false)) + "\u003E\u003Ca" + (" target=\"_blank\""+pug_attr("href", `/img/${file.filename}`, true, false)) + "\u003E"; if (post.spoiler) { pug_html = pug_html + "\u003Cimg class=\"file-thumb\" src=\"\u002Fimg\u002Fspoiler.png\" width=\"200\" height=\"200\"\u002F\u003E"; } else +if (type === 'audio') { +pug_html = pug_html + "\u003Cimg class=\"file-thumb\" src=\"\u002Fimg\u002Faudio.png\" width=\"200\" height=\"200\"\u002F\u003E"; +} +else if (file.hasThumb) { pug_html = pug_html + "\u003Cimg" + (" class=\"file-thumb\""+pug_attr("src", `/img/thumb-${file.hash}${file.thumbextension}`, true, false)+pug_attr("height", file.geometry.thumbheight, true, false)+pug_attr("width", file.geometry.thumbwidth, true, false)) + "\u002F\u003E"; } diff --git a/models/forms/makepost.js b/models/forms/makepost.js index a886de0c..1cd2a028 100644 --- a/models/forms/makepost.js +++ b/models/forms/makepost.js @@ -159,16 +159,16 @@ module.exports = async (req, res, next) => { mimetype: file.mimetype, size: file.size, extension, - thumbextension: thumbExtension, }; + const type = processedFile.mimetype.split('/')[0]; + if (type !== 'audio') { + processedFile.thumbextension = thumbExtension; + } await Files.increment(processedFile); - //check if already exists const existsFull = await pathExists(`${uploadDirectory}/img/${processedFile.filename}`); - - //handle video/image ffmpeg or graphicsmagick - switch (processedFile.mimetype.split('/')[0]) { + switch (type) { case 'image': { const existsThumb = await pathExists(`${uploadDirectory}/img/thumb-${processedFile.hash}${processedFile.thumbextension}`); const imageData = await imageIdentify(req.files.file[i].tempFilePath, null, true); diff --git a/schedules/prune.js b/schedules/prune.js index 4b93ee69..efa69a0c 100644 --- a/schedules/prune.js +++ b/schedules/prune.js @@ -24,7 +24,7 @@ module.exports = async() => { await Promise.all(files.map(async file => { return Promise.all( [remove(`${uploadDirectory}/img/${file._id}`)] - .concat(file.exts.map(ext => { + .concat(file.exts.filter(ext => ext).map(ext => { remove(`${uploadDirectory}/img/thumb-${file._id.split('.')[0]}${ext}`) })) ) diff --git a/views/mixins/catalogtile.pug b/views/mixins/catalogtile.pug index e9982164..ec569a1f 100644 --- a/views/mixins/catalogtile.pug +++ b/views/mixins/catalogtile.pug @@ -13,12 +13,14 @@ mixin catalogtile(board, post, index) if post.files.length > 0 .post-file-src a(href=postURL) + - const file = post.files[0] if post.spoiler img.catalog-thumb(src='/img/spoiler.png' width='64' height='64') + else if file.mimetype.startsWith('audio') + img.catalog-thumb(src='/img/audio.png' width='64' height='64') + else if file.hasThumb + img.catalog-thumb(src=`/img/thumb-${file.hash}${file.thumbextension}` width='64' height='64') else - if post.files[0].hasThumb - img.catalog-thumb(src=`/img/thumb-${post.files[0].hash}${post.files[0].thumbextension}` width='64' height='64') - else - img.catalog-thumb(src=`/img/${post.files[0].filename}` width='64' height='64') + img.catalog-thumb(src=`/img/${post.files[0].filename}` width='64' height='64') if post.message pre.no-m-p.post-message !{post.message}