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

96
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,6 +181,7 @@ window.addEventListener("DOMContentLoaded", async (event) => {
handleFieldChange(event); handleFieldChange(event);
}); });
if (canEditVideo()) {
for (const rangeStartSet of document.getElementsByClassName("range-definition-set-start")) { for (const rangeStartSet of document.getElementsByClassName("range-definition-set-start")) {
rangeStartSet.addEventListener("click", getRangeSetClickHandler("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")) { for (const rangeEndPlay of document.getElementsByClassName("range-definition-play-end")) {
rangeEndPlay.addEventListener("click", rangePlayFromEndHandler); 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) => {
rangeDataUpdated(); rangeDataUpdated();
@ -203,11 +207,13 @@ window.addEventListener("DOMContentLoaded", async (event) => {
handleFieldChange(event); handleFieldChange(event);
}); });
} }
if (canEditMetadata()) {
for (const addChapterMarker of document.getElementsByClassName( for (const addChapterMarker of document.getElementsByClassName(
"add-range-definition-chapter-marker" "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) => {
validateVideoTitle(); validateVideoTitle();
@ -225,13 +231,17 @@ window.addEventListener("DOMContentLoaded", async (event) => {
document document
.getElementById("video-info-thumbnail-time") .getElementById("video-info-thumbnail-time")
.addEventListener("change", handleFieldChange); .addEventListener("change", handleFieldChange);
if (canEditMetadata()) {
document.getElementById("video-info-thumbnail-time-set").addEventListener("click", (_event) => { document.getElementById("video-info-thumbnail-time-set").addEventListener("click", (_event) => {
const field = document.getElementById("video-info-thumbnail-time"); const field = document.getElementById("video-info-thumbnail-time");
const videoPlayer = document.getElementById("video"); const videoPlayer = document.getElementById("video");
const videoPlayerTime = videoPlayer.currentTime; const videoPlayerTime = videoPlayer.currentTime;
field.value = videoHumanTimeFromVideoPlayerTime(videoPlayerTime); 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 field = document.getElementById("video-info-thumbnail-time");
const thumbnailTime = videoPlayerTimeFromVideoHumanTime(field.value); const thumbnailTime = videoPlayerTimeFromVideoHumanTime(field.value);
if (thumbnailTime === null) { if (thumbnailTime === null) {
@ -241,6 +251,8 @@ window.addEventListener("DOMContentLoaded", async (event) => {
const videoPlayer = document.getElementById("video"); const videoPlayer = document.getElementById("video");
videoPlayer.currentTime = thumbnailTime; 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,7 +523,8 @@ async function initializeVideoInfo() {
uploaderAllowlistBox.value = videoInfo.uploader_whitelist.join(","); uploaderAllowlistBox.value = videoInfo.uploader_whitelist.join(",");
} }
if (videoInfo.state === "DONE") { if (!canEditVideo()) {
if (canEditMetadata()) {
const submitButton = document.getElementById("submit-button"); const submitButton = document.getElementById("submit-button");
submitButton.classList.add("hidden"); submitButton.classList.add("hidden");
const saveButton = document.getElementById("save-button"); const saveButton = document.getElementById("save-button");
@ -528,6 +541,27 @@ async function initializeVideoInfo() {
for (const timeField of endTimes) { for (const timeField of endTimes) {
timeField.disabled = true; 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) { if (modifiedAdvancedOptions) {
@ -1313,11 +1347,20 @@ function rangeDefinitionDOM() {
removeRange.classList.add("range-definition-remove"); removeRange.classList.add("range-definition-remove");
removeRange.classList.add("click"); removeRange.classList.add("click");
if (canEditVideo()) {
rangeStartSet.addEventListener("click", getRangeSetClickHandler("start")); rangeStartSet.addEventListener("click", getRangeSetClickHandler("start"));
rangeStartPlay.addEventListener("click", rangePlayFromStartHandler);
rangeEndSet.addEventListener("click", getRangeSetClickHandler("end")); 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); rangeEndPlay.addEventListener("click", rangePlayFromEndHandler);
if (canEditVideo()) {
removeRange.addEventListener("click", (event) => { removeRange.addEventListener("click", (event) => {
handleFieldChange(event); handleFieldChange(event);
@ -1341,6 +1384,9 @@ function rangeDefinitionDOM() {
rangeDataUpdated(); rangeDataUpdated();
} }
}); });
} else {
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");
} }
if (canEditMetadata()) {
rangeAddChapterElem.addEventListener("click", addChapterMarkerHandler); 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,6 +1540,7 @@ 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");
if (canEditMetadata()) {
playFromStartTime.addEventListener("click", (event) => { playFromStartTime.addEventListener("click", (event) => {
const chapterContainer = event.currentTarget.parentElement; const chapterContainer = event.currentTarget.parentElement;
const startTimeField = chapterContainer.getElementsByClassName( const startTimeField = chapterContainer.getElementsByClassName(
@ -1495,6 +1552,9 @@ function chapterMarkerDefinitionDOM() {
videoElement.currentTime = newVideoTime; 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");
if (canEditMetadata()) {
removeButton.addEventListener("click", (event) => { removeButton.addEventListener("click", (event) => {
const thisDefinition = event.currentTarget.parentElement; const thisDefinition = event.currentTarget.parentElement;
thisDefinition.parentNode.removeChild(thisDefinition); 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) {
if (canEditMetadata()) {
const newChapterMarker = chapterMarkerDefinitionDOM(); const newChapterMarker = chapterMarkerDefinitionDOM();
event.currentTarget.previousElementSibling.appendChild(newChapterMarker); event.currentTarget.previousElementSibling.appendChild(newChapterMarker);
handleFieldChange(event); 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