fatchan
/
jschan
mirror of https://gitgud.io/fatchan/jschan.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

patching up various things to do with audio support like default thumbnail, expanding, thumb extensions, live post template, catalog tiles, etc

Browse Source
merge-requests/208/head
fatchan 5 years ago
parent 632811c636
commit 0da1bacd4f
6 changed files with 115 additions and 94 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      gulp/res/img/audio.png
  2. 171
      gulp/res/js/expand.js
  3. 16
      gulp/res/js/post.js
  4. 10
      models/forms/makepost.js
  5. 2
      schedules/prune.js
  6. 10
      views/mixins/catalogtile.pug

BIN
gulp/res/img/audio.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

171
gulp/res/js/expand.js
Unescape View File

@ -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);
}
});
});

16
gulp/res/js/post.js
Unescape View File

@ -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";
}

10
models/forms/makepost.js
Unescape View File

@ -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);

2
schedules/prune.js
Unescape View File

@ -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}`)
}))
)

10
views/mixins/catalogtile.pug
Unescape View File

@ -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}

Write Preview
Loading…
Cancel
Save