henine
/
wubloader
mirror of https://github.com/ekimekim/wubloader
1
0
Fork 0
Code Issues Releases Wiki Activity

Properly handle when video or just metadata can be edited

Browse Source
pull/335/head
ElementalAlchemist 2 years ago committed by Mike Lang
parent 2ddf2f8426
commit 8648ad52ee
1 changed files with 173 additions and 89 deletions
Show Stats Download Patch File Download Diff File

262
thrimbletrimmer/scripts/edit.js
Unescape Escape View File

@ -160,8 +160,8 @@ window.addEventListener("DOMContentLoaded", async (event) => {
}); });
const addRangeIcon = document.getElementById("add-range-definition"); const addRangeIcon = document.getElementById("add-range-definition");
if (videoInfo.state !== "DONE") { if (canEditVideo()) {
addRangeIcon.addEventListener("click", (event) => { addRangeIcon.addEventListener("click", (_event) => {
addRangeDefinition(); addRangeDefinition();
handleFieldChange(event); handleFieldChange(event);
}); });
@ -171,6 +171,8 @@ window.addEventListener("DOMContentLoaded", async (event) => {
handleFieldChange(event); handleFieldChange(event);
} }
}); });
} else {
addRangeIcon.classList.add("hidden");
} }
const enableChaptersElem = document.getElementById("enable-chapter-markers"); const enableChaptersElem = document.getElementById("enable-chapter-markers");
@ -179,17 +181,19 @@ window.addEventListener("DOMContentLoaded", async (event) => {
handleFieldChange(event); handleFieldChange(event);
}); });
for (const rangeStartSet of document.getElementsByClassName("range-definition-set-start")) { if (canEditVideo()) {
rangeStartSet.addEventListener("click", getRangeSetClickHandler("start")); for (const rangeStartSet of document.getElementsByClassName("range-definition-set-start")) {
} rangeStartSet.addEventListener("click", getRangeSetClickHandler("start"));
for (const rangeEndSet of document.getElementsByClassName("range-definition-set-end")) { }
rangeEndSet.addEventListener("click", getRangeSetClickHandler("end")); for (const rangeEndSet of document.getElementsByClassName("range-definition-set-end")) {
} rangeEndSet.addEventListener("click", getRangeSetClickHandler("end"));
for (const rangeStartPlay of document.getElementsByClassName("range-definition-play-start")) { }
rangeStartPlay.addEventListener("click", rangePlayFromStartHandler); for (const rangeStartPlay of document.getElementsByClassName("range-definition-play-start")) {
} rangeStartPlay.addEventListener("click", rangePlayFromStartHandler);
for (const rangeEndPlay of document.getElementsByClassName("range-definition-play-end")) { }
rangeEndPlay.addEventListener("click", rangePlayFromEndHandler); for (const rangeEndPlay of document.getElementsByClassName("range-definition-play-end")) {
rangeEndPlay.addEventListener("click", rangePlayFromEndHandler);
}
} }
for (const rangeStart of document.getElementsByClassName("range-definition-start")) { for (const rangeStart of document.getElementsByClassName("range-definition-start")) {
rangeStart.addEventListener("change", (event) => { rangeStart.addEventListener("change", (event) => {
@ -203,10 +207,12 @@ window.addEventListener("DOMContentLoaded", async (event) => {
handleFieldChange(event); handleFieldChange(event);
}); });
} }
for (const addChapterMarker of document.getElementsByClassName( if (canEditMetadata()) {
"add-range-definition-chapter-marker" for (const addChapterMarker of document.getElementsByClassName(
)) { "add-range-definition-chapter-marker"
addChapterMarker.addEventListener("click", addChapterMarkerHandler); )) {
addChapterMarker.addEventListener("click", addChapterMarkerHandler);
}
} }
document.getElementById("video-info-title").addEventListener("input", (event) => { document.getElementById("video-info-title").addEventListener("input", (event) => {
@ -225,22 +231,28 @@ window.addEventListener("DOMContentLoaded", async (event) => {
document document
.getElementById("video-info-thumbnail-time") .getElementById("video-info-thumbnail-time")
.addEventListener("change", handleFieldChange); .addEventListener("change", handleFieldChange);
document.getElementById("video-info-thumbnail-time-set").addEventListener("click", (_event) => {
const field = document.getElementById("video-info-thumbnail-time"); if (canEditMetadata()) {
const videoPlayer = document.getElementById("video"); document.getElementById("video-info-thumbnail-time-set").addEventListener("click", (_event) => {
const videoPlayerTime = videoPlayer.currentTime; const field = document.getElementById("video-info-thumbnail-time");
field.value = videoHumanTimeFromVideoPlayerTime(videoPlayerTime); const videoPlayer = document.getElementById("video");
}); const videoPlayerTime = videoPlayer.currentTime;
document.getElementById("video-info-thumbnail-time-play").addEventListener("click", (_event) => { field.value = videoHumanTimeFromVideoPlayerTime(videoPlayerTime);
const field = document.getElementById("video-info-thumbnail-time"); });
const thumbnailTime = videoPlayerTimeFromVideoHumanTime(field.value); document
if (thumbnailTime === null) { .getElementById("video-info-thumbnail-time-play")
addError("Couldn't play from thumbnail frame; failed to parse time"); .addEventListener("click", (_event) => {
return; const field = document.getElementById("video-info-thumbnail-time");
} const thumbnailTime = videoPlayerTimeFromVideoHumanTime(field.value);
const videoPlayer = document.getElementById("video"); if (thumbnailTime === null) {
videoPlayer.currentTime = thumbnailTime; addError("Couldn't play from thumbnail frame; failed to parse time");
}); return;
}
const videoPlayer = document.getElementById("video");
videoPlayer.currentTime = thumbnailTime;
});
}
document document
.getElementById("video-info-thumbnail-template-preview-generate") .getElementById("video-info-thumbnail-template-preview-generate")
.addEventListener("click", (_event) => { .addEventListener("click", (_event) => {
@ -511,22 +523,44 @@ async function initializeVideoInfo() {
uploaderAllowlistBox.value = videoInfo.uploader_whitelist.join(","); uploaderAllowlistBox.value = videoInfo.uploader_whitelist.join(",");
} }
if (videoInfo.state === "DONE") { if (!canEditVideo()) {
const submitButton = document.getElementById("submit-button"); if (canEditMetadata()) {
submitButton.classList.add("hidden"); const submitButton = document.getElementById("submit-button");
const saveButton = document.getElementById("save-button"); submitButton.classList.add("hidden");
saveButton.classList.add("hidden"); const saveButton = document.getElementById("save-button");
const submitChangesButton = document.getElementById("submit-changes-button"); saveButton.classList.add("hidden");
submitChangesButton.classList.remove("hidden"); const submitChangesButton = document.getElementById("submit-changes-button");
submitChangesButton.classList.remove("hidden");
document.getElementById("add-range-definition").classList.add("hidden");
const startTimes = document.getElementsByClassName("range-definition-start");
const endTimes = document.getElementsByClassName("range-definition-end");
for (const timeField of startTimes) {
timeField.disabled = true;
}
for (const timeField of endTimes) {
timeField.disabled = true;
}
document.getElementById("add-range-definition").classList.add("hidden"); for (const editIcon of document.getElementsByClassName("range-definition-set-start")) {
const startTimes = document.getElementsByClassName("range-definition-start"); editIcon.classList.add("hidden");
const endTimes = document.getElementsByClassName("range-definition-end"); }
for (const timeField of startTimes) { for (const editIcon of document.getElementsByClassName("range-definition-set-end")) {
timeField.disabled = true; editIcon.classList.add("hidden");
} }
for (const timeField of endTimes) { } else {
timeField.disabled = true; for (const input of document.getElementsByTagName("input")) {
input.disabled = true;
}
for (const textArea of document.getElementsByTagName("textarea")) {
textArea.disabled = true;
}
for (const button of document.getElementsByTagName("button")) {
button.disabled = true;
}
for (const selectBox of document.getElementsByTagName("select")) {
selectBox.disabled = true;
}
} }
} }
@ -1313,34 +1347,46 @@ function rangeDefinitionDOM() {
removeRange.classList.add("range-definition-remove"); removeRange.classList.add("range-definition-remove");
removeRange.classList.add("click"); removeRange.classList.add("click");
rangeStartSet.addEventListener("click", getRangeSetClickHandler("start")); if (canEditVideo()) {
rangeStartSet.addEventListener("click", getRangeSetClickHandler("start"));
rangeEndSet.addEventListener("click", getRangeSetClickHandler("end"));
} else {
rangeStartSet.classList.add("hidden");
rangeEndSet.classList.add("hidden");
rangeStart.disabled = true;
rangeEnd.disabled = true;
}
rangeStartPlay.addEventListener("click", rangePlayFromStartHandler); rangeStartPlay.addEventListener("click", rangePlayFromStartHandler);
rangeEndSet.addEventListener("click", getRangeSetClickHandler("end"));
rangeEndPlay.addEventListener("click", rangePlayFromEndHandler); rangeEndPlay.addEventListener("click", rangePlayFromEndHandler);
removeRange.addEventListener("click", (event) => { if (canEditVideo()) {
handleFieldChange(event); removeRange.addEventListener("click", (event) => {
handleFieldChange(event);
let rangeContainer = event.currentTarget; let rangeContainer = event.currentTarget;
while (rangeContainer && !rangeContainer.classList.contains("range-definition-removable")) { while (rangeContainer && !rangeContainer.classList.contains("range-definition-removable")) {
rangeContainer = rangeContainer.parentElement; rangeContainer = rangeContainer.parentElement;
} }
if (rangeContainer) { if (rangeContainer) {
const rangeParent = rangeContainer.parentNode; const rangeParent = rangeContainer.parentNode;
for (let rangeNum = 0; rangeNum < rangeParent.children.length; rangeNum++) { for (let rangeNum = 0; rangeNum < rangeParent.children.length; rangeNum++) {
if (rangeContainer === rangeParent.children[rangeNum]) { if (rangeContainer === rangeParent.children[rangeNum]) {
if (rangeNum + 1 <= currentRange) { if (rangeNum + 1 <= currentRange) {
// currentRange is 1-indexed to index into DOM with querySelector // currentRange is 1-indexed to index into DOM with querySelector
currentRange--; currentRange--;
break; break;
}
} }
} }
rangeParent.removeChild(rangeContainer);
updateCurrentRangeIndicator();
rangeDataUpdated();
} }
rangeParent.removeChild(rangeContainer); });
updateCurrentRangeIndicator(); } else {
rangeDataUpdated(); removeRange.classList.add("hidden");
} }
});
const currentRangeMarker = document.createElement("img"); const currentRangeMarker = document.createElement("img");
currentRangeMarker.alt = "Range affected by keyboard shortcuts"; currentRangeMarker.alt = "Range affected by keyboard shortcuts";
@ -1376,7 +1422,11 @@ function rangeDefinitionDOM() {
if (!chaptersEnabled) { if (!chaptersEnabled) {
rangeAddChapterElem.classList.add("hidden"); rangeAddChapterElem.classList.add("hidden");
} }
rangeAddChapterElem.addEventListener("click", addChapterMarkerHandler); if (canEditMetadata()) {
rangeAddChapterElem.addEventListener("click", addChapterMarkerHandler);
} else {
rangeAddChapterElem.classList.add("hidden");
}
rangeContainer.appendChild(rangeTimesContainer); rangeContainer.appendChild(rangeTimesContainer);
rangeContainer.appendChild(rangeChaptersContainer); rangeContainer.appendChild(rangeChaptersContainer);
@ -1387,6 +1437,9 @@ function rangeDefinitionDOM() {
function getRangeSetClickHandler(startOrEnd) { function getRangeSetClickHandler(startOrEnd) {
return (event) => { return (event) => {
if (!canEditVideo()) {
return;
}
const setButton = event.currentTarget; const setButton = event.currentTarget;
const setField = setButton.parentElement.getElementsByClassName( const setField = setButton.parentElement.getElementsByClassName(
`range-definition-${startOrEnd}` `range-definition-${startOrEnd}`
@ -1402,7 +1455,10 @@ function getRangeSetClickHandler(startOrEnd) {
function moveToNextRange() { function moveToNextRange() {
currentRange++; currentRange++;
if (currentRange > document.getElementById("range-definitions").children.length) { if (
canEditVideo() &&
currentRange > document.getElementById("range-definitions").children.length
) {
addRangeDefinition(); addRangeDefinition();
} }
updateCurrentRangeIndicator(); updateCurrentRangeIndicator();
@ -1484,17 +1540,21 @@ function chapterMarkerDefinitionDOM() {
playFromStartTime.classList.add("range-definition-chapter-marker-play-start"); playFromStartTime.classList.add("range-definition-chapter-marker-play-start");
playFromStartTime.classList.add("click"); playFromStartTime.classList.add("click");
playFromStartTime.addEventListener("click", (event) => { if (canEditMetadata()) {
const chapterContainer = event.currentTarget.parentElement; playFromStartTime.addEventListener("click", (event) => {
const startTimeField = chapterContainer.getElementsByClassName( const chapterContainer = event.currentTarget.parentElement;
"range-definition-chapter-marker-start" const startTimeField = chapterContainer.getElementsByClassName(
)[0]; "range-definition-chapter-marker-start"
const newVideoTime = videoPlayerTimeFromVideoHumanTime(startTimeField.value); )[0];
if (newVideoTime !== null) { const newVideoTime = videoPlayerTimeFromVideoHumanTime(startTimeField.value);
const videoElement = document.getElementById("video"); if (newVideoTime !== null) {
videoElement.currentTime = newVideoTime; const videoElement = document.getElementById("video");
} videoElement.currentTime = newVideoTime;
}); }
});
} else {
playFromStartTime.classList.add("hidden");
}
startFieldContainer.appendChild(startField); startFieldContainer.appendChild(startField);
startFieldContainer.appendChild(setStartTime); startFieldContainer.appendChild(setStartTime);
@ -1512,10 +1572,14 @@ function chapterMarkerDefinitionDOM() {
removeButton.classList.add("range-definition-chapter-marker-remove"); removeButton.classList.add("range-definition-chapter-marker-remove");
removeButton.classList.add("click"); removeButton.classList.add("click");
removeButton.addEventListener("click", (event) => { if (canEditMetadata()) {
const thisDefinition = event.currentTarget.parentElement; removeButton.addEventListener("click", (event) => {
thisDefinition.parentNode.removeChild(thisDefinition); const thisDefinition = event.currentTarget.parentElement;
}); thisDefinition.parentNode.removeChild(thisDefinition);
});
} else {
removeButton.classList.add("hidden");
}
const chapterContainer = document.createElement("div"); const chapterContainer = document.createElement("div");
chapterContainer.appendChild(startFieldContainer); chapterContainer.appendChild(startFieldContainer);
@ -1526,9 +1590,11 @@ function chapterMarkerDefinitionDOM() {
} }
function addChapterMarkerHandler(event) { function addChapterMarkerHandler(event) {
const newChapterMarker = chapterMarkerDefinitionDOM(); if (canEditMetadata()) {
event.currentTarget.previousElementSibling.appendChild(newChapterMarker); const newChapterMarker = chapterMarkerDefinitionDOM();
handleFieldChange(event); event.currentTarget.previousElementSibling.appendChild(newChapterMarker);
handleFieldChange(event);
}
} }
async function rangeDataUpdated() { async function rangeDataUpdated() {
@ -1559,6 +1625,10 @@ async function rangeDataUpdated() {
} }
function setCurrentRangeStartToVideoTime() { function setCurrentRangeStartToVideoTime() {
if (!canEditVideo()) {
return;
}
const rangeStartField = document.querySelector( const rangeStartField = document.querySelector(
`#range-definitions > div:nth-child(${currentRange}) .range-definition-start` `#range-definitions > div:nth-child(${currentRange}) .range-definition-start`
); );
@ -1568,6 +1638,10 @@ function setCurrentRangeStartToVideoTime() {
} }
function setCurrentRangeEndToVideoTime() { function setCurrentRangeEndToVideoTime() {
if (!canEditVideo()) {
return;
}
const rangeEndField = document.querySelector( const rangeEndField = document.querySelector(
`#range-definitions > div:nth-child(${currentRange}) .range-definition-end` `#range-definitions > div:nth-child(${currentRange}) .range-definition-end`
); );
@ -1693,3 +1767,13 @@ function wubloaderTimeFromVideoHumanTime(videoHumanTime) {
} }
return wubloaderTimeFromVideoPlayerTime(videoPlayerTime); return wubloaderTimeFromVideoPlayerTime(videoPlayerTime);
} }
function canEditVideo() {
return (
videoInfo.state === "UNEDITED" || videoInfo.state === "EDITED" || videoInfo.state === "CLAIMED"
);
}
function canEditMetadata() {
return canEditVideo() || videoInfo.state === "DONE" || videoInfo.state === "MODIFIED";
}

Write Preview
Loading…
Cancel
Save