Add display for abbreviated YouTube titles

thrimbletrimmer/edit.html

@@ -188,6 +188,8 @@
 					<span id="video-info-title-prefix"></span>
 					<input type="text" id="video-info-title" />
 				</div>
+				<label>Abbreviated title:</label>
+				<div id="video-info-title-abbreviated"></div>
 				<label for="video-info-description">Description:</label>
 				<textarea id="video-info-description"></textarea>
 				<label for="video-info-tags">Tags (comma-separated):</label>

thrimbletrimmer/scripts/common.js

@@ -547,7 +547,9 @@ function renderChatMessage(chatMessageData) {
 
 		if (replyParentMessageText.startsWith("\u0001ACTION")) {
 			replyContainer.classList.add("chat-replay-message-text-action");
-			const substringEnd = (replyParentMessageText.endsWith("\u0001") ? replyParentMessageText.length - 1 : replyParentMessageText);
+			const substringEnd = replyParentMessageText.endsWith("\u0001")
+				? replyParentMessageText.length - 1
+				: replyParentMessageText;
 			replyParentMessageText = replyParentMessageText.substring(7, substringEnd);
 		}
 
@@ -607,7 +609,7 @@ function renderSystemMessages(chatMessageData) {
 	secondMessageContainer.appendChild(senderNameElement);
 	secondMessageContainer.appendChild(messageTextElement);
 	messages.push(secondMessageContainer);
-	
+
 	return messages;
 }
 
@@ -651,7 +653,9 @@ function addChatMessageTextToElement(chatMessageData, messageTextElement) {
 	let chatMessageText = chatMessage.params[1];
 	if (chatMessageText.startsWith("\u0001ACTION")) {
 		messageTextElement.classList.add("chat-replay-message-text-action");
-		const substringEnd = (chatMessageText.endsWith("\u0001") ? chatMessageText.length - 1 : chatMessageText.length);
+		const substringEnd = chatMessageText.endsWith("\u0001")
+			? chatMessageText.length - 1
+			: chatMessageText.length;
 		chatMessageText = chatMessageText.substring(7, substringEnd);
 	}
 
@@ -703,4 +707,4 @@ function addChatMessageTextToElement(chatMessageData, messageTextElement) {
 	} else {
 		messageTextElement.appendChild(document.createTextNode(chatMessageText));
 	}
-}
+}

thrimbletrimmer/scripts/edit.js

@@ -195,6 +195,8 @@ window.addEventListener("DOMContentLoaded", async (event) => {
 
 	document.getElementById("video-info-title").addEventListener("input", (_event) => {
 		validateVideoTitle();
+		document.getElementById("video-info-title-abbreviated").innerText =
+			videoInfo.title_prefix + document.getElementById("video-info-title").value;
 	});
 	document.getElementById("video-info-description").addEventListener("input", (_event) => {
 		validateVideoDescription();
@@ -457,6 +459,8 @@ async function initializeVideoInfo() {
 		titleElem.value = videoInfo.description;
 	}
 	validateVideoTitle();
+	document.getElementById("video-info-title-abbreviated").innerText =
+		videoInfo.title_prefix + titleElem.value;
 
 	const descriptionElem = document.getElementById("video-info-description");
 	if (videoInfo.video_description) {
@@ -1408,7 +1412,7 @@ function rangePlayFromEndHandler(event) {
 function chapterMarkerDefinitionDOM() {
 	const startFieldContainer = document.createElement("div");
 	startFieldContainer.classList.add("range-definition-chapter-marker-start-field");
-	
+
 	const startField = document.createElement("input");
 	startField.type = "text";
 	startField.classList.add("range-definition-chapter-marker-start");
@@ -1439,7 +1443,9 @@ function chapterMarkerDefinitionDOM() {
 
 	playFromStartTime.addEventListener("click", (event) => {
 		const chapterContainer = event.currentTarget.parentElement;
-		const startTimeField = chapterContainer.getElementsByClassName("range-definition-chapter-marker-start")[0];
+		const startTimeField = chapterContainer.getElementsByClassName(
+			"range-definition-chapter-marker-start"
+		)[0];
 		const newVideoTime = videoPlayerTimeFromVideoHumanTime(startTimeField.value);
 		if (newVideoTime !== null) {
 			const videoElement = document.getElementById("video");

thrimbletrimmer/styles/thrimbletrimmer.css

@@ -293,7 +293,7 @@ a,
 	margin: 5px 0;
 	display: grid;
 	grid-template-columns: 200px 1fr;
-	grid-template-rows: minmax(min-content, max-content) 1.25em minmax(4em, max-content) 1.25em;
+	grid-template-rows: minmax(min-content, max-content) 1.25em 3em minmax(4em, max-content) 1.25em;
 	gap: 2px;
 }
 
@@ -323,6 +323,22 @@ a,
 	flex-grow: 1;
 }
 
+#video-info-title-abbreviated {
+	width: 200px;
+	overflow: hidden;
+	font-size: 1em;
+	line-height: 1em;
+	height: 2em;
+	text-overflow: ellipsis;
+
+	/* For some reason, all this Webkit-specific-looking stuff is required to show ellipses
+	   on wrapped text.
+	   It also somehow works on Firefox. */
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+}
+
 .video-info-thumbnail-mode-options {
 	margin: 2px 0;
 }