Properly handle when video or just metadata can be edited

pull/335/head
ElementalAlchemist 2 years ago committed by Mike Lang
parent 2ddf2f8426
commit 8648ad52ee

@ -160,8 +160,8 @@ window.addEventListener("DOMContentLoaded", async (event) => {
});
const addRangeIcon = document.getElementById("add-range-definition");
if (videoInfo.state !== "DONE") {
addRangeIcon.addEventListener("click", (event) => {
if (canEditVideo()) {
addRangeIcon.addEventListener("click", (_event) => {
addRangeDefinition();
handleFieldChange(event);
});
@ -171,6 +171,8 @@ window.addEventListener("DOMContentLoaded", async (event) => {
handleFieldChange(event);
}
});
} else {
addRangeIcon.classList.add("hidden");
}
const enableChaptersElem = document.getElementById("enable-chapter-markers");
@ -179,6 +181,7 @@ window.addEventListener("DOMContentLoaded", async (event) => {
handleFieldChange(event);
});
if (canEditVideo()) {
for (const rangeStartSet of document.getElementsByClassName("range-definition-set-start")) {
rangeStartSet.addEventListener("click", getRangeSetClickHandler("start"));
}
@ -191,6 +194,7 @@ window.addEventListener("DOMContentLoaded", async (event) => {
for (const rangeEndPlay of document.getElementsByClassName("range-definition-play-end")) {
rangeEndPlay.addEventListener("click", rangePlayFromEndHandler);
}
}
for (const rangeStart of document.getElementsByClassName("range-definition-start")) {
rangeStart.addEventListener("change", (event) => {
rangeDataUpdated();
@ -203,11 +207,13 @@ window.addEventListener("DOMContentLoaded", async (event) => {
handleFieldChange(event);
});
}
if (canEditMetadata()) {
for (const addChapterMarker of document.getElementsByClassName(
"add-range-definition-chapter-marker"
)) {
addChapterMarker.addEventListener("click", addChapterMarkerHandler);
}
}
document.getElementById("video-info-title").addEventListener("input", (event) => {
validateVideoTitle();
@ -225,13 +231,17 @@ window.addEventListener("DOMContentLoaded", async (event) => {
document
.getElementById("video-info-thumbnail-time")
.addEventListener("change", handleFieldChange);
if (canEditMetadata()) {
document.getElementById("video-info-thumbnail-time-set").addEventListener("click", (_event) => {
const field = document.getElementById("video-info-thumbnail-time");
const videoPlayer = document.getElementById("video");
const videoPlayerTime = videoPlayer.currentTime;
field.value = videoHumanTimeFromVideoPlayerTime(videoPlayerTime);
});
document.getElementById("video-info-thumbnail-time-play").addEventListener("click", (_event) => {
document
.getElementById("video-info-thumbnail-time-play")
.addEventListener("click", (_event) => {
const field = document.getElementById("video-info-thumbnail-time");
const thumbnailTime = videoPlayerTimeFromVideoHumanTime(field.value);
if (thumbnailTime === null) {
@ -241,6 +251,8 @@ window.addEventListener("DOMContentLoaded", async (event) => {
const videoPlayer = document.getElementById("video");
videoPlayer.currentTime = thumbnailTime;
});
}
document
.getElementById("video-info-thumbnail-template-preview-generate")
.addEventListener("click", (_event) => {
@ -511,7 +523,8 @@ async function initializeVideoInfo() {
uploaderAllowlistBox.value = videoInfo.uploader_whitelist.join(",");
}
if (videoInfo.state === "DONE") {
if (!canEditVideo()) {
if (canEditMetadata()) {
const submitButton = document.getElementById("submit-button");
submitButton.classList.add("hidden");
const saveButton = document.getElementById("save-button");
@ -528,6 +541,27 @@ async function initializeVideoInfo() {
for (const timeField of endTimes) {
timeField.disabled = true;
}
for (const editIcon of document.getElementsByClassName("range-definition-set-start")) {
editIcon.classList.add("hidden");
}
for (const editIcon of document.getElementsByClassName("range-definition-set-end")) {
editIcon.classList.add("hidden");
}
} else {
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;
}
}
}
if (modifiedAdvancedOptions) {
@ -1313,11 +1347,20 @@ function rangeDefinitionDOM() {
removeRange.classList.add("range-definition-remove");
removeRange.classList.add("click");
if (canEditVideo()) {
rangeStartSet.addEventListener("click", getRangeSetClickHandler("start"));
rangeStartPlay.addEventListener("click", rangePlayFromStartHandler);
rangeEndSet.addEventListener("click", getRangeSetClickHandler("end"));
} else {
rangeStartSet.classList.add("hidden");
rangeEndSet.classList.add("hidden");
rangeStart.disabled = true;
rangeEnd.disabled = true;
}
rangeStartPlay.addEventListener("click", rangePlayFromStartHandler);
rangeEndPlay.addEventListener("click", rangePlayFromEndHandler);
if (canEditVideo()) {
removeRange.addEventListener("click", (event) => {
handleFieldChange(event);
@ -1341,6 +1384,9 @@ function rangeDefinitionDOM() {
rangeDataUpdated();
}
});
} else {
removeRange.classList.add("hidden");
}
const currentRangeMarker = document.createElement("img");
currentRangeMarker.alt = "Range affected by keyboard shortcuts";
@ -1376,7 +1422,11 @@ function rangeDefinitionDOM() {
if (!chaptersEnabled) {
rangeAddChapterElem.classList.add("hidden");
}
if (canEditMetadata()) {
rangeAddChapterElem.addEventListener("click", addChapterMarkerHandler);
} else {
rangeAddChapterElem.classList.add("hidden");
}
rangeContainer.appendChild(rangeTimesContainer);
rangeContainer.appendChild(rangeChaptersContainer);
@ -1387,6 +1437,9 @@ function rangeDefinitionDOM() {
function getRangeSetClickHandler(startOrEnd) {
return (event) => {
if (!canEditVideo()) {
return;
}
const setButton = event.currentTarget;
const setField = setButton.parentElement.getElementsByClassName(
`range-definition-${startOrEnd}`
@ -1402,7 +1455,10 @@ function getRangeSetClickHandler(startOrEnd) {
function moveToNextRange() {
currentRange++;
if (currentRange > document.getElementById("range-definitions").children.length) {
if (
canEditVideo() &&
currentRange > document.getElementById("range-definitions").children.length
) {
addRangeDefinition();
}
updateCurrentRangeIndicator();
@ -1484,6 +1540,7 @@ function chapterMarkerDefinitionDOM() {
playFromStartTime.classList.add("range-definition-chapter-marker-play-start");
playFromStartTime.classList.add("click");
if (canEditMetadata()) {
playFromStartTime.addEventListener("click", (event) => {
const chapterContainer = event.currentTarget.parentElement;
const startTimeField = chapterContainer.getElementsByClassName(
@ -1495,6 +1552,9 @@ function chapterMarkerDefinitionDOM() {
videoElement.currentTime = newVideoTime;
}
});
} else {
playFromStartTime.classList.add("hidden");
}
startFieldContainer.appendChild(startField);
startFieldContainer.appendChild(setStartTime);
@ -1512,10 +1572,14 @@ function chapterMarkerDefinitionDOM() {
removeButton.classList.add("range-definition-chapter-marker-remove");
removeButton.classList.add("click");
if (canEditMetadata()) {
removeButton.addEventListener("click", (event) => {
const thisDefinition = event.currentTarget.parentElement;
thisDefinition.parentNode.removeChild(thisDefinition);
});
} else {
removeButton.classList.add("hidden");
}
const chapterContainer = document.createElement("div");
chapterContainer.appendChild(startFieldContainer);
@ -1526,10 +1590,12 @@ function chapterMarkerDefinitionDOM() {
}
function addChapterMarkerHandler(event) {
if (canEditMetadata()) {
const newChapterMarker = chapterMarkerDefinitionDOM();
event.currentTarget.previousElementSibling.appendChild(newChapterMarker);
handleFieldChange(event);
}
}
async function rangeDataUpdated() {
const clipBar = document.getElementById("clip-bar");
@ -1559,6 +1625,10 @@ async function rangeDataUpdated() {
}
function setCurrentRangeStartToVideoTime() {
if (!canEditVideo()) {
return;
}
const rangeStartField = document.querySelector(
`#range-definitions > div:nth-child(${currentRange}) .range-definition-start`
);
@ -1568,6 +1638,10 @@ function setCurrentRangeStartToVideoTime() {
}
function setCurrentRangeEndToVideoTime() {
if (!canEditVideo()) {
return;
}
const rangeEndField = document.querySelector(
`#range-definitions > div:nth-child(${currentRange}) .range-definition-end`
);
@ -1693,3 +1767,13 @@ function wubloaderTimeFromVideoHumanTime(videoHumanTime) {
}
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";
}

Loading…
Cancel
Save