diff --git a/thrimbletrimmer/edit.html b/thrimbletrimmer/edit.html index 508c0dc..f4f67e2 100644 --- a/thrimbletrimmer/edit.html +++ b/thrimbletrimmer/edit.html @@ -188,6 +188,8 @@ + +
diff --git a/thrimbletrimmer/scripts/common.js b/thrimbletrimmer/scripts/common.js index 2875055..84efeba 100644 --- a/thrimbletrimmer/scripts/common.js +++ b/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)); } -} \ No newline at end of file +} diff --git a/thrimbletrimmer/scripts/edit.js b/thrimbletrimmer/scripts/edit.js index a2d7389..287b7a3 100644 --- a/thrimbletrimmer/scripts/edit.js +++ b/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"); diff --git a/thrimbletrimmer/styles/thrimbletrimmer.css b/thrimbletrimmer/styles/thrimbletrimmer.css index 27074a2..4d6c7ac 100644 --- a/thrimbletrimmer/styles/thrimbletrimmer.css +++ b/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; }