From f32aefee689ac98b190f8d9c146acfa2d83eb20d Mon Sep 17 00:00:00 2001
From: fatchan <tom@69420.me>
Date: Sun, 18 Aug 2019 15:07:04 +0000
Subject: [PATCH] script to expand video/images. temporary

---
 gulp/res/css/style.css |  2 +-
 gulp/res/js/expand.js  | 77 ++++++++++++++++++++++++++++++++++++++++++
 views/mixins/post.pug  |  2 +-
 views/pages/board.pug  |  1 +
 views/pages/thread.pug |  1 +
 5 files changed, 81 insertions(+), 2 deletions(-)
 create mode 100644 gulp/res/js/expand.js

diff --git a/gulp/res/css/style.css b/gulp/res/css/style.css
index 971b47d2..021eb894 100644
--- a/gulp/res/css/style.css
+++ b/gulp/res/css/style.css
@@ -440,7 +440,7 @@ td, th {
 	align-items: start;
 }
 
-a, input, summary {
+a, video, img, input, summary {
 	outline: 0;
 }
 
diff --git a/gulp/res/js/expand.js b/gulp/res/js/expand.js
new file mode 100644
index 00000000..cfd1ae5d
--- /dev/null
+++ b/gulp/res/js/expand.js
@@ -0,0 +1,77 @@
+//this is so normies dont complain about multiple tabs until i make something nicer
+window.addEventListener('DOMContentLoaded', (event) => {
+
+	var thumbs = document.getElementsByClassName('post-file-src');
+
+	var toggle = function(thumb, exp) {
+		const close = exp.nextSibling;
+		if (thumb.style.display === 'none') {
+			thumb.style.display = '';
+			exp.style.display = 'none';
+			if (close) {
+				close.style.display = 'none';
+				exp.pause();
+			}
+		} else {
+			thumb.style.display = 'none';
+			exp.style.display = '';
+			if (close) {
+				close.style.display = '';
+				exp.play();
+			}
+		}
+	}
+
+	var expand = function(e) {
+		e.preventDefault();
+		const fileLink = this.firstChild;
+		const fileSrc = fileLink.href;
+		const type = this.previousSibling.lastChild.innerText.replace(/[\(\)]/g, '').split(', ')[0].trim();
+		const thumbElement = fileLink.firstChild;
+		let expandedElement = thumbElement.nextSibling;
+		if (!expandedElement) {
+			fileLink.style.minWidth = fileLink.offsetWidth+'px';
+			fileLink.style.minHeight = fileLink.offsetHeight+'px';
+			let source;
+			switch(type) {
+				case 'image':
+					thumbElement.style.opacity = '0.5';
+					expandedElement = document.createElement('img');
+					source = expandedElement;
+					source.onload = function() {
+						thumbElement.style.opacity = '1';
+						fileLink.appendChild(expandedElement);
+						toggle(thumbElement, expandedElement);
+					}
+					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);
+					}, true);
+					expandedElement.controls = 'true';
+					source = document.createElement('source');
+					expandedElement.appendChild(source);
+					fileLink.appendChild(expandedElement);
+					fileLink.appendChild(close);
+					toggle(thumbElement, expandedElement);
+					break;
+				deault:
+					break; //uh oh
+			}
+			source.src = fileSrc;
+		} else {
+			toggle(thumbElement, expandedElement);
+		}
+		return false;
+	};
+
+	for (var i = 0; i < thumbs.length; i++) {
+		thumbs[i].addEventListener('click', expand, false);
+	}
+
+});
diff --git a/views/mixins/post.pug b/views/mixins/post.pug
index aeecccc9..e8794ef1 100644
--- a/views/mixins/post.pug
+++ b/views/mixins/post.pug
@@ -45,7 +45,7 @@ mixin post(post, truncate, manage=false, globalmanage=false)
 								span: a(href='/img/'+file.filename title='Download '+file.originalFilename download=file.originalFilename) #{post.spoiler ? 'Spoiler File' : file.originalFilename}
 								br
 								span 
-									| (#{file.sizeString}, #{file.geometryString}
+									| (#{file.mimetype.split('/')[0]}, #{file.sizeString}, #{file.geometryString}
 									if file.durationString
 										| , #{file.durationString}
 									| )
diff --git a/views/pages/board.pug b/views/pages/board.pug
index d5fd68ca..b7aee62b 100644
--- a/views/pages/board.pug
+++ b/views/pages/board.pug
@@ -2,6 +2,7 @@ extends ../layout.pug
 include ../mixins/post.pug
 
 block head
+	script(src='/js/expand.js')
 	title /#{board._id}/ - #{board.settings.description} - page #{page}
 
 block content
diff --git a/views/pages/thread.pug b/views/pages/thread.pug
index 7d7c19c3..844507e2 100644
--- a/views/pages/thread.pug
+++ b/views/pages/thread.pug
@@ -2,6 +2,7 @@ extends ../layout.pug
 include ../mixins/post.pug
 
 block head
+	script(src='/js/expand.js')
 	title /#{board._id}/ - #{thread.subject||thread.postId}
 	meta(property='og:site_name', value=meta.siteName)
 	meta(property='og:title', content=thread.subject)