Add display for abbreviated YouTube titles

pull/308/head
ElementalAlchemist 2 years ago committed by Mike Lang
parent 6b255f5018
commit 131d248251

@ -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>

@ -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);
}
@ -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);
}

@ -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) {
@ -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");

@ -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;
}

Loading…
Cancel
Save