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