From 8b475e0bd97c3167cfa6f83d63f8fe2724bb818f Mon Sep 17 00:00:00 2001
From: ElementalAlchemist <ElementAlchemist7@gmail.com>
Date: Fri, 29 Oct 2021 21:18:54 -0500
Subject: [PATCH] Show real-time errors for issues with video title or
 description

---
 thrimbletrimmer/scripts/edit.js            | 30 ++++++++++++++++++++++
 thrimbletrimmer/styles/thrimbletrimmer.css |  8 ++++++
 2 files changed, 38 insertions(+)

diff --git a/thrimbletrimmer/scripts/edit.js b/thrimbletrimmer/scripts/edit.js
index d2c88ea..b81bd08 100644
--- a/thrimbletrimmer/scripts/edit.js
+++ b/thrimbletrimmer/scripts/edit.js
@@ -150,6 +150,36 @@ window.addEventListener("DOMContentLoaded", async (event) => {
 		});
 	}
 
+	document.getElementById("video-info-title").addEventListener("input", (_event) => {
+		const videoTitleField = document.getElementById("video-info-title");
+		const videoTitle = videoTitleField.value;
+		if (videoTitle.length > videoInfo.title_max_length) {
+			videoTitleField.classList.add("input-error");
+			videoTitleField.title = "Title is too long";
+		} else if (videoTitle.indexOf("<") !== -1 || videoTitle.indexOf(">") !== -1) {
+			videoTitleField.classList.add("input-error");
+			videoTitleField.title = "Title contains invalid characters";
+		} else {
+			videoTitleField.classList.remove("input-error");
+			videoTitleField.title = "";
+		}
+	});
+
+	document.getElementById("video-info-description").addEventListener("input", (_event) => {
+		const videoDescField = document.getElementById("video-info-description");
+		const videoDesc = videoDescField.value;
+		if (videoDesc.length > 5000) {
+			videoDescField.classList.add("input-error");
+			videoDescField.title = "Description is too long";
+		} else if (videoDesc.indexOf("<") !== -1 || videoDesc.indexOf(">") !== -1) {
+			videoDescField.classList.add("input-error");
+			videoDescField.title = "Description contains invalid characters";
+		} else {
+			videoDescField.classList.remove("input-error");
+			videoDescField.title = "";
+		}
+	});
+
 	document.getElementById("submit-button").addEventListener("click", (_event) => {
 		submitVideo();
 	});
diff --git a/thrimbletrimmer/styles/thrimbletrimmer.css b/thrimbletrimmer/styles/thrimbletrimmer.css
index 2ba78f2..2c39806 100644
--- a/thrimbletrimmer/styles/thrimbletrimmer.css
+++ b/thrimbletrimmer/styles/thrimbletrimmer.css
@@ -40,6 +40,14 @@ a,
 	cursor: pointer;
 }
 
+.input-error {
+	border-color: #b00;
+}
+
+.input-error:focus {
+	outline: #d00 solid 1px;
+}
+
 #errors {
 	color: #f33;
 	display: flex;