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

gulp/res/js/expand.js

@@ -1,9 +1,12 @@
 window.addEventListener('DOMContentLoaded', (event) => {
 
+	const isCatalog = window.location.pathname.endsWith('catalog.html');
+
+	if (!isCatalog) {
 		const thumbs = document.getElementsByClassName('post-file-src');
 
 		const toggle = function(thumb, exp, fn) {
-		const close = exp.previousSibling.innerText === 'Close video' ? exp.previousSibling : null;
+			const close = exp.previousSibling.innerText === 'Close' ? exp.previousSibling : null;
 			if (thumb.style.display === 'none') {
 				thumb.style.display = '';
 				exp.style.display = 'none';
@@ -33,18 +36,18 @@ window.addEventListener('DOMContentLoaded', (event) => {
 			const next = thumbElement.nextSibling;
 			let expandedElement;
 			if (next) {
-			if (next.innerText === 'Close video') {
+				if (next.innerText === 'Close') {
 					expandedElement = next.nextSibling;
 				} else {
 					expandedElement = next;
 				}
 			}
 			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':
+						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');
@@ -57,9 +60,12 @@ window.addEventListener('DOMContentLoaded', (event) => {
 						}
 						break;
 					case 'video':
-					expandedElement = document.createElement('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 video';
+						close.innerText = 'Close';
 						close.addEventListener('click', function(e) {
 							e.preventDefault();
 							e.stopPropagation();
@@ -93,5 +99,6 @@ window.addEventListener('DOMContentLoaded', (event) => {
 				newthumbs[i].addEventListener('click', expand, false);
 			}
 		});
+	}
 
 });

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

views/mixins/catalogtile.pug

@@ -13,11 +13,13 @@ 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
+					else if file.mimetype.startsWith('audio')
-						if post.files[0].hasThumb
+						img.catalog-thumb(src='/img/audio.png' width='64' height='64')
-							img.catalog-thumb(src=`/img/thumb-${post.files[0].hash}${post.files[0].thumbextension}` width='64' height='64')
+					else if file.hasThumb
+						img.catalog-thumb(src=`/img/thumb-${file.hash}${file.thumbextension}` width='64' height='64')
 					else
 						img.catalog-thumb(src=`/img/${post.files[0].filename}` width='64' height='64')
 		if post.message