dotted underlines when hovering reply link to post w/ multiple quotes, and CSS trick to show play button on video/audio for nojs users

gulp/res/css/style.css

@@ -572,6 +572,7 @@ video, img {
 	justify-content: center;
 	display: flex;
 	image-orientation: from-image;
+	position:relative;
 }
 
 .expanded {
@@ -879,6 +880,37 @@ table.boardtable td:nth-child(6) {
 	color: white;
 }
 
+.post-file-src[data-type="audio"]::after,
+.post-file-src[data-type="video"]::after {
+	content: "▶";
+	display: inline-block;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	background: #000;
+	color: #fff;
+	border-radius: 100%;
+	width: 50px;
+	height: 50px;
+	line-height: 50px;
+	text-align:center;
+	box-sizing:border-box;
+	font-size: 20px;
+	padding-left: 4px;
+	transform: translate(-50%, -50%);
+	opacity: 0.5;
+	box-shadow: 0 0 3px #fff;
+	pointer-events: none;
+}
+
+.post-file-src:hover::after {
+	opacity: 1;
+}
+
+.post-file-src * {
+	visibility: visible;
+}
+
 @media only screen and (max-width: 700px) {
 	table {
 		width: 100%;

gulp/res/js/expand.js

@@ -17,21 +17,25 @@ window.addEventListener('DOMContentLoaded', (event) => {
 		volumeSetting.value = volumeLevel;
 		volumeSetting.addEventListener('change', changeVolume, false);
 
-		const toggle = function(thumb, exp, fn) {
+		const toggle = function(thumb, exp, fn, src) {
 			const close = exp.previousSibling.innerText === 'Close' ? exp.previousSibling : null;
 			if (thumb.style.display === 'none') {
+				//closing
 				thumb.style.display = '';
 				exp.style.display = 'none';
 				fn.style.maxWidth = '';
 				if (close) {
+					src.style.visibility = 'visible';
 					close.style.display = 'none';
 					exp.pause();
 				}
 			} else {
+				//expanding
 				thumb.style.display = 'none';
 				exp.style.display = '';
 				fn.style.maxWidth = exp.offsetWidth+'px';
 				if (close) {
+					src.style.visibility = 'hidden';
 					close.style.display = '';
 					exp.play();
 				}
@@ -46,6 +50,7 @@ window.addEventListener('DOMContentLoaded', (event) => {
 			const thumbElement = fileLink.firstChild;
 			const fileName = this.previousSibling;
 			const next = thumbElement.nextSibling;
+			const pfs = this.closest('.post-file-src');
 			let expandedElement;
 			if (next) {
 				if (next.innerText === 'Close') {
@@ -68,7 +73,7 @@ window.addEventListener('DOMContentLoaded', (event) => {
 							thumbElement.style.opacity = '';
 							thumbElement.style.cursor = '';
 							fileLink.appendChild(expandedElement);
-							toggle(thumbElement, expandedElement, fileName);
+							toggle(thumbElement, expandedElement, fileName, pfs);
 						}
 						break;
 					case 'video':
@@ -81,7 +86,7 @@ window.addEventListener('DOMContentLoaded', (event) => {
 						close.addEventListener('click', function(e) {
 							e.preventDefault();
 							e.stopPropagation();
-							toggle(thumbElement, expandedElement, fileName);
+							toggle(thumbElement, expandedElement, fileName, pfs);
 						}, true);
 						expandedElement.controls = 'true';
 						expandedElement.volume = volumeLevel/100;
@@ -89,14 +94,14 @@ window.addEventListener('DOMContentLoaded', (event) => {
 						expandedElement.appendChild(source);
 						fileLink.appendChild(expandedElement);
 						fileLink.insertBefore(close, expandedElement);
-						toggle(thumbElement, expandedElement, fileName);
+						toggle(thumbElement, expandedElement, fileName, pfs);
 						break;
 					deault:
 						break; //uh oh
 				}
 				source.src = fileSrc;
 			} else if (expandedElement) {
-				toggle(thumbElement, expandedElement, fileName);
+				toggle(thumbElement, expandedElement, fileName, pfs);
 			}
 			return false;
 		};

gulp/res/js/hover.js

@@ -5,6 +5,19 @@ window.addEventListener('DOMContentLoaded', (event) => {
 	let hovering = false;
 	let lastHover;
 
+	const toggleDottedUnderlines = (hoveredPost, id) => {
+		let uniqueQuotes = new Set();
+		hoveredPost.querySelectorAll('.post-message .quote').forEach(q => uniqueQuotes.add(q.href));
+		if (uniqueQuotes.size > 1) {
+			const matchingQuotes = hoveredPost.querySelectorAll(`.post-message .quote[href$="${id}"]`);
+			for (let i = 0; i < matchingQuotes.length; i++) {
+				const mq = matchingQuotes[i];
+				mq.style.borderBottom = mq.style.borderBottom == '' ? '1px dashed' : '';
+				mq.style.textDecoration = mq.style.textDecoration == '' ? 'none' : '';
+			}
+		}
+	}
+
 	const isVisible = (e) => {
 		const top = e.getBoundingClientRect().top;
 		const bottom = e.getBoundingClientRect().bottom;
@@ -60,9 +73,10 @@ window.addEventListener('DOMContentLoaded', (event) => {
 			return; //non-post number board quote
 		}
 		const float = document.getElementById('float');
-		if (float != null) {
-			return document.body.removeChild(float);
+		if (float) {
+			document.body.removeChild(float);
 		}
+		const thisId = this.closest('.post-container').dataset.postId;
 		const loading = Date.now();
 		lastHover = loading;
 		const hash = this.hash.substring(1);
@@ -127,9 +141,10 @@ window.addEventListener('DOMContentLoaded', (event) => {
             });
             window.dispatchEvent(newPostEvent);
 		}
+		toggleDottedUnderlines(hoveredPost, thisId);
 		if (anchor && isVisible(hoveredPost)) {
 			hoveredPost.classList.toggle('highlighted');
-		} else {
+		} else if (hovering) {
 			floatPost(hoveredPost, e.clientX, e.clientY);
 		}
 	}