Merge branch 'add-tegaki-replay' into '448-tegaki-replay'

add tegaki replay feature

See merge request fatchan/jschan!265

gulp/res/js/forms.js

@@ -161,14 +161,27 @@ class postFormHandler {
 	}
 
 	doTegaki() {
+		let savereplay = this.form.querySelector('#recordTegaki').checked;
+
 		Tegaki.open({
+			saveReplay : savereplay,
 			onCancel: () => {},
 			onDone: () => {
+				let timestamp = (new Date()).getTime();
+
+				if(savereplay){
+					let blob = Tegaki.replayRecorder.toBlob();
+					this.addFile(new File([blob], `${timestamp}-replay.tgkr`, { type: 'tegaki/replay' }));
+				}
+
 				Tegaki.flatten().toBlob(b => {
-					this.addFile(new File([b], 'tegaki.png', { type: 'image/png' }));
-					this.updateFilesText();
-					Tegaki.resetLayers();
+					this.addFile(new File([b], `${timestamp}-tegaki.png`, { type: 'image/png' }));
 				}, 'image/png');
+				
+				this.updateFilesText();
+				Tegaki.resetLayers();
+
+				Tegaki.destroy();
 			},
 			width: tegakiWidth,
 			height: tegakiHeight,
@@ -623,3 +636,14 @@ window.addEventListener('settingsReady', () => {
 	tegakiHeightSetting.addEventListener('change', changeTegakiHeightSetting, false);
 
 });
+
+function showTegakiReplay(url){
+	Tegaki.open({
+		replayMode: true,
+		replayURL: url 
+	});
+}
+
+window.addEventListener('showTegakiReplay',(e)=>{
+	showTegakiReplay(e.detail);
+});

gulp/res/js/tegaki-replay.js

@@ -0,0 +1,74 @@
+function getTegakiReplayBTN(url) {
+	let a = document.createElement('a');
+	a.text = '[View replay]';
+	a.classList.add('dummy-link');
+	a.download = url;
+	a.href = url;
+
+	a.addEventListener('click', (me) => {
+		me.preventDefault();
+		window.dispatchEvent(
+			(new CustomEvent('showTegakiReplay',{detail:url}))
+		);
+	});
+
+	return a;
+}
+
+/**
+ * 
+ * @param {HTMLElement[]} fileInfos 
+ * @param {string} tegakiName 
+ * @returns {HTMLAnchorElement|undefined}
+ */
+function getReplayElement(fileInfos,tegakiName) {
+	let replay = undefined;
+	fileInfos.forEach((e) => {
+		e.querySelectorAll('a').forEach((a) => {
+			let tegaki = tegakiName.replace('tegaki.png', 'replay.tgkr');
+			if (tegaki === a.download) {
+				replay = a;
+				return;
+			}
+		});
+		if (replay) { 
+			return;
+		} 
+	});
+
+	return replay;
+}
+
+function tryAddTegakiReplays(post) {
+	let fileInfos = post.querySelectorAll('.post-file-info');
+
+	fileInfos.forEach((fi) => {
+		let a = fi.querySelector('a');
+		let isTegakiReplay = a.download.endsWith('.tgkr');
+		let isTegaki = a.download.endsWith('-tegaki.png');
+		
+		if (isTegaki) {
+			let replay = getReplayElement(fileInfos, a.download);
+
+			if (replay) {
+				fi.appendChild(getTegakiReplayBTN(`${replay.href}`));
+				replay.parentElement.parentElement.parentElement.remove();
+			}
+
+		} else if (isTegakiReplay) {
+			fi.appendChild(getTegakiReplayBTN(`${a.href}`));
+		}
+	});
+}
+
+window.addEventListener('DOMContentLoaded', () => {
+	let postContainers = document.querySelectorAll('.post-container');
+	
+	postContainers.forEach((post) => {
+		tryAddTegakiReplays(post);
+	});
+});
+
+window.addEventListener('addPost', function (e) {
+	tryAddTegakiReplays(e.detail.post);
+});

views/includes/postform.pug

@@ -47,9 +47,6 @@ section.form-wrapper.flex-center
 					span File#{maxFiles > 1 ? 's' : ''}
 						if fileRequired
 							span.required *
-						if board.settings.enableTegaki && board.settings.allowedFileTypes.image === true
-							|  
-							span.dummy-link.tegaki-button.jsonly 🖌️
 					|
 					| 
 					if maxFiles > 1
@@ -64,6 +61,13 @@ section.form-wrapper.flex-center
 						label.postform-style.ph-5.ml-1.fh
 							input(type='checkbox', name='spoiler_all', value='true')
 							| Spoiler
+			if board.settings.enableTegaki && board.settings.allowedFileTypes.image === true
+				section.row.jsonly
+					.label Tegaki 
+					section.row
+						p Replay?
+						input(id='recordTegaki' type='checkbox', name='tegaki recorder')
+						input.dummy-link.tegaki-button(type='button', value='Draw')
 		if board.settings.userPostSpoiler || board.settings.userPostDelete || board.settings.userPostUnlink || modview
 			section.row
 				.label Password

views/mixins/post.pug

@@ -121,6 +121,7 @@ mixin post(post, truncate, manage=false, globalmanage=false, ban=false, overboar
 										div.audioimg.file-thumb
 									else
 										img.file-thumb(src=`/file/${file.filename}` height=file.geometry.height width=file.geometry.width loading='lazy')
+								
 			- if (post.message && modview) { post.message = post.message.replace(new RegExp(`<a class="quote" href="/${post.board}/`, 'g'), `<a class="quote" href="/${post.board}/manage/`); } //its either this, a subdomain, or nothing.
 			- let truncatedMessage = post.message;
 			if post.message