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

Run Prettier on all the files

Browse Source
pull/235/head
ElementalAlchemist 3 years ago committed by Mike Lang
parent 42d2db5f50
commit 00ba7d5293
7 changed files with 277 additions and 110 deletions
Show Stats Download Patch File Download Diff File

89
thrimbletrimmer/beta/edit.html
Unescape Escape View File

@ -13,7 +13,10 @@
<script src="scripts/keyboard-shortcuts.js"></script> <script src="scripts/keyboard-shortcuts.js"></script>
<!-- TODO: Change client ID back to main wubloader one --> <!-- TODO: Change client ID back to main wubloader one -->
<meta name="google-signin-client_id" content="769576855778-phhnmkk2k8h6m1b1sb964ulrq0ulgesm.apps.googleusercontent.com"> <meta
name="google-signin-client_id"
content="769576855778-phhnmkk2k8h6m1b1sb964ulrq0ulgesm.apps.googleusercontent.com"
/>
<script src="https://apis.google.com/js/platform.js?onload=onGLoad" async defer></script> <script src="https://apis.google.com/js/platform.js?onload=onGLoad" async defer></script>
</head> </head>
<body> <body>
@ -35,7 +38,7 @@
<video id="video" class="video-js" controls preload="auto"></video> <video id="video" class="video-js" controls preload="auto"></video>
<div id="clip-bar"></div> <div id="clip-bar"></div>
<img id="waveform" alt="Waveform for the video"> <img id="waveform" alt="Waveform for the video" />
<div id="editor-help"> <div id="editor-help">
<a href="#" id="editor-help-link">Help</a> <a href="#" id="editor-help-link">Help</a>
@ -52,35 +55,63 @@
<li>Period (.): Forward 1 frame</li> <li>Period (.): Forward 1 frame</li>
<li>Equals (=): Increase playback speed one step</li> <li>Equals (=): Increase playback speed one step</li>
<li>Hyphen (-): Decrease playback speed one step</li> <li>Hyphen (-): Decrease playback speed one step</li>
<li>Left bracket ([): Set start point for current range (indicated by arrow) to current video time</li> <li>
Left bracket ([): Set start point for current range (indicated by arrow) to current
video time
</li>
<li>Right bracket (]): Send end point for current range to current video time</li> <li>Right bracket (]): Send end point for current range to current video time</li>
<li>O: Switch the current range up one</li> <li>O: Switch the current range up one</li>
<li>P: Switch the current range down one, adding a new range if the current range was the last one</li> <li>
P: Switch the current range down one, adding a new range if the current range was the
last one
</li>
</ul> </ul>
<h2>Transition Types</h2> <h2>Transition Types</h2>
<p>A visual explanation of the different transition types can be found <a href="https://trac.ffmpeg.org/wiki/Xfade">on the FFMpeg website</a>.</p> <p>
A visual explanation of the different transition types can be found
<a href="https://trac.ffmpeg.org/wiki/Xfade">on the FFMpeg website</a>.
</p>
</div> </div>
</div> </div>
<div id="range-definitions"> <div id="range-definitions">
<div class="range-definition-times"> <div class="range-definition-times">
<input type="text" class="range-definition-start"> <input type="text" class="range-definition-start" />
<img src="images/pencil.png" alt="Set range start point to current video time" class="range-definition-set-start click"> <img
src="images/pencil.png"
alt="Set range start point to current video time"
class="range-definition-set-start click"
/>
<div class="range-definition-between-time-gap"></div> <div class="range-definition-between-time-gap"></div>
<input type="text" class="range-definition-end"> <input type="text" class="range-definition-end" />
<img src="images/pencil.png" alt="Set range end point to current video time" class="range-definition-set-end click"> <img
src="images/pencil.png"
alt="Set range end point to current video time"
class="range-definition-set-end click"
/>
<div class="range-definition-icon-gap"></div> <div class="range-definition-icon-gap"></div>
<img src="images/arrow.png" alt="Range affected by keyboard shortcuts" title="Range affected by keyboard shortcuts" class="range-definition-current"> <img
</div> src="images/arrow.png"
</div> alt="Range affected by keyboard shortcuts"
<img src="images/plus.png" alt="Add range" id="add-range-definition" class="click" tabindex=0> title="Range affected by keyboard shortcuts"
class="range-definition-current"
/>
</div>
</div>
<img
src="images/plus.png"
alt="Add range"
id="add-range-definition"
class="click"
tabindex="0"
/>
<div id="video-info"> <div id="video-info">
<div> <div>
<label for="video-info-title">Title:</label> <label for="video-info-title">Title:</label>
<div id="video-info-title-full"> <div id="video-info-title-full">
<span id="video-info-title-prefix"></span> <span id="video-info-title-prefix"></span>
<input type="text" id="video-info-title"> <input type="text" id="video-info-title" />
</div> </div>
</div> </div>
<div id="video-info-description-entry"> <div id="video-info-description-entry">
@ -89,7 +120,7 @@
</div> </div>
<div> <div>
<label for="video-info-tags">Tags (comma-separated):</label> <label for="video-info-tags">Tags (comma-separated):</label>
<input type="text" id="video-info-tags"> <input type="text" id="video-info-tags" />
</div> </div>
<div id="video-info-editor-notes-container" class="hidden"> <div id="video-info-editor-notes-container" class="hidden">
<div id="video-info-editor-notes-header">Editor Notes:</div> <div id="video-info-editor-notes-header">Editor Notes:</div>
@ -106,7 +137,7 @@
<div id="advanced-submission-options" class="hidden"> <div id="advanced-submission-options" class="hidden">
<div> <div>
<label for="advanced-submission-option-allow-holes">Allow holes</label> <label for="advanced-submission-option-allow-holes">Allow holes</label>
<input type="checkbox" id="advanced-submission-option-allow-holes"> <input type="checkbox" id="advanced-submission-option-allow-holes" />
</div> </div>
<div> <div>
@ -116,7 +147,7 @@
<div> <div>
<label for="advanced-submission-option-uploader-allow">Uploader allowlist:</label> <label for="advanced-submission-option-uploader-allow">Uploader allowlist:</label>
<input type="text" id="advanced-submission-option-uploader-allow"> <input type="text" id="advanced-submission-option-uploader-allow" />
</div> </div>
</div> </div>
<div id="submission-response"></div> <div id="submission-response"></div>
@ -141,17 +172,29 @@
<a id="reset-entire-video" href="#">Force Reset Row</a> <a id="reset-entire-video" href="#">Force Reset Row</a>
</div> </div>
<div id="data-correction-manual-link" class="hidden"> <div id="data-correction-manual-link" class="hidden">
<input type="text" id="data-correction-manual-link-entry"> <input type="text" id="data-correction-manual-link-entry" />
<label for="data-correction-manual-link-youtube">Is YouTube upload (add to playlists)?</label> <label for="data-correction-manual-link-youtube"
<input type="checkbox" id="data-correction-manual-link-youtube"> >Is YouTube upload (add to playlists)?</label
>
<input type="checkbox" id="data-correction-manual-link-youtube" />
<button id="data-correction-manual-link-submit">Set Link</button> <button id="data-correction-manual-link-submit">Set Link</button>
<div id="data-correction-manual-link-response"></div> <div id="data-correction-manual-link-response"></div>
</div> </div>
<div id="data-correction-force-reset-confirm" class="hidden"> <div id="data-correction-force-reset-confirm" class="hidden">
<p>Are you sure you want to reset this event?</p> <p>Are you sure you want to reset this event?</p>
<p>This will set the row back to Unedited and forget about any video that may already exist.</p> <p>
<p>This is intended as a last-ditch effort to clear a malfunctioning cutter, or if a video needs to be reedited and replaced.</p> This will set the row back to Unedited and forget about any video that may already exist.
<p><strong>It is your responsibility to deal with any video that may have already been uploaded.</strong></p> </p>
<p>
This is intended as a last-ditch effort to clear a malfunctioning cutter, or if a video
needs to be reedited and replaced.
</p>
<p>
<strong
>It is your responsibility to deal with any video that may have already been
uploaded.</strong
>
</p>
<p> <p>
<button id="data-correction-force-reset-yes">Yes, reset it!</button> <button id="data-correction-force-reset-yes">Yes, reset it!</button>
<button id="data-correction-force-reset-no">Oh, never mind!</button> <button id="data-correction-force-reset-no">Oh, never mind!</button>

22
thrimbletrimmer/beta/index.html
Unescape Escape View File

@ -29,11 +29,27 @@
</div> </div>
<div> <div>
<div id="stream-time-frame-of-reference"> <div id="stream-time-frame-of-reference">
<input type="radio" name="time-frame-of-reference" id="stream-time-frame-of-reference-utc" value="1" /> <input
type="radio"
name="time-frame-of-reference"
id="stream-time-frame-of-reference-utc"
value="1"
/>
<label for="stream-time-frame-of-reference-utc">UTC</label> <label for="stream-time-frame-of-reference-utc">UTC</label>
<input type="radio" name="time-frame-of-reference" id="stream-time-frame-of-reference-bus" value="2" /> <input
type="radio"
name="time-frame-of-reference"
id="stream-time-frame-of-reference-bus"
value="2"
/>
<label for="stream-time-frame-of-reference-bus">Bus Time</label> <label for="stream-time-frame-of-reference-bus">Bus Time</label>
<input type="radio" name="time-frame-of-reference" id="stream-time-frame-of-reference-ago" value="3" checked /> <input
type="radio"
name="time-frame-of-reference"
id="stream-time-frame-of-reference-ago"
value="3"
checked
/>
<label for="stream-time-frame-of-reference-ago">Time Ago</label> <label for="stream-time-frame-of-reference-ago">Time Ago</label>
</div> </div>
</div> </div>

13
thrimbletrimmer/beta/scripts/common.js
Unescape Escape View File

@ -57,9 +57,9 @@ async function loadVideoPlayer(playlistURL) {
controlBar: { controlBar: {
fullscreenToggle: true, fullscreenToggle: true,
volumePanel: { volumePanel: {
inline: false inline: false,
} },
} },
}; };
const player = videojs("video", defaultOptions); const player = videojs("video", defaultOptions);
@ -137,7 +137,12 @@ function generateDownloadURL(startTime, endTime, downloadType, allowHoles, quali
const startURLTime = getWubloaderTimeFromDate(startTime); const startURLTime = getWubloaderTimeFromDate(startTime);
const endURLTime = getWubloaderTimeFromDate(endTime); const endURLTime = getWubloaderTimeFromDate(endTime);
const queryParts = [`start=${startURLTime}`, `end=${endURLTime}`, `type=${downloadType}`, `allow_holes=${allowHoles}`]; const queryParts = [
`start=${startURLTime}`,
`end=${endURLTime}`,
`type=${downloadType}`,
`allow_holes=${allowHoles}`,
];
const downloadURL = `/cut/${globalStreamName}/${quality}.ts?${queryParts.join("&")}`; const downloadURL = `/cut/${globalStreamName}/${quality}.ts?${queryParts.join("&")}`;
return downloadURL; return downloadURL;

203
thrimbletrimmer/beta/scripts/edit.js
Unescape Escape View File

@ -9,7 +9,9 @@ window.addEventListener("DOMContentLoaded", async (event) => {
updateDownloadLink(); updateDownloadLink();
const addRangeIcon = document.getElementById("add-range-definition"); const addRangeIcon = document.getElementById("add-range-definition");
addRangeIcon.addEventListener("click", (_event) => { addRangeDefinition(); }); addRangeIcon.addEventListener("click", (_event) => {
addRangeDefinition();
});
addRangeIcon.addEventListener("keypress", (event) => { addRangeIcon.addEventListener("keypress", (event) => {
if (event.key === "Enter") { if (event.key === "Enter") {
addRangeDefinition(); addRangeDefinition();
@ -23,42 +25,70 @@ window.addEventListener("DOMContentLoaded", async (event) => {
rangeEndSet.addEventListener("click", getRangeSetClickHandler("end")); rangeEndSet.addEventListener("click", getRangeSetClickHandler("end"));
} }
for (const rangeStart of document.getElementsByClassName("range-definition-start")) { for (const rangeStart of document.getElementsByClassName("range-definition-start")) {
rangeStart.addEventListener("change", (_event) => { rangeDataUpdated(); }); rangeStart.addEventListener("change", (_event) => {
rangeDataUpdated();
});
} }
for (const rangeEnd of document.getElementsByClassName("range-definition-end")) { for (const rangeEnd of document.getElementsByClassName("range-definition-end")) {
rangeEnd.addEventListener("change", (_event) => { rangeDataUpdated(); }); rangeEnd.addEventListener("change", (_event) => {
rangeDataUpdated();
});
} }
document.getElementById("submit-button").addEventListener("click", (_event) => { submitVideo(); }); document.getElementById("submit-button").addEventListener("click", (_event) => {
document.getElementById("save-button").addEventListener("click", (_event) => { saveVideoDraft(); }); submitVideo();
});
document.getElementById("save-button").addEventListener("click", (_event) => {
saveVideoDraft();
});
document.getElementById("advanced-submission").addEventListener("click", (_event) => { document.getElementById("advanced-submission").addEventListener("click", (_event) => {
const advancedOptionsContainer = document.getElementById("advanced-submission-options"); const advancedOptionsContainer = document.getElementById("advanced-submission-options");
advancedOptionsContainer.classList.toggle("hidden"); advancedOptionsContainer.classList.toggle("hidden");
}); });
document.getElementById("advanced-submission-option-allow-holes").addEventListener("change", () => { updateDownloadLink(); }); document
document.getElementById("download-type-select").addEventListener("change", () => { updateDownloadLink(); }); .getElementById("advanced-submission-option-allow-holes")
.addEventListener("change", () => {
updateDownloadLink();
});
document.getElementById("download-type-select").addEventListener("change", () => {
updateDownloadLink();
});
document.getElementById("manual-link-update").addEventListener("click", (_event) => { document.getElementById("manual-link-update").addEventListener("click", (_event) => {
const manualLinkDataContainer = document.getElementById("data-correction-manual-link"); const manualLinkDataContainer = document.getElementById("data-correction-manual-link");
manualLinkDataContainer.classList.toggle("hidden"); manualLinkDataContainer.classList.toggle("hidden");
}); });
document.getElementById("data-correction-manual-link-submit").addEventListener("click", (_event) => { setManualVideoLink(); }); document
.getElementById("data-correction-manual-link-submit")
.addEventListener("click", (_event) => {
setManualVideoLink();
});
document.getElementById("cancel-video-upload").addEventListener("click", (_event) => { cancelVideoUpload(); }); document.getElementById("cancel-video-upload").addEventListener("click", (_event) => {
cancelVideoUpload();
});
document.getElementById("reset-entire-video").addEventListener("click", (_event) => { document.getElementById("reset-entire-video").addEventListener("click", (_event) => {
const forceResetConfirmationContainer = document.getElementById("data-correction-force-reset-confirm"); const forceResetConfirmationContainer = document.getElementById(
"data-correction-force-reset-confirm"
);
forceResetConfirmationContainer.classList.remove("hidden"); forceResetConfirmationContainer.classList.remove("hidden");
}); });
document.getElementById("data-correction-force-reset-yes").addEventListener("click", (_event) => { resetVideoRow(); }); document.getElementById("data-correction-force-reset-yes").addEventListener("click", (_event) => {
resetVideoRow();
});
document.getElementById("data-correction-force-reset-no").addEventListener("click", (_event) => { document.getElementById("data-correction-force-reset-no").addEventListener("click", (_event) => {
const forceResetConfirmationContainer = document.getElementById("data-correction-force-reset-confirm"); const forceResetConfirmationContainer = document.getElementById(
"data-correction-force-reset-confirm"
);
forceResetConfirmationContainer.classList.add("hidden"); forceResetConfirmationContainer.classList.add("hidden");
}); });
document.getElementById("google-auth-sign-out").addEventListener("click", (_event) => { googleSignOut(); }); document.getElementById("google-auth-sign-out").addEventListener("click", (_event) => {
googleSignOut();
});
}); });
async function loadVideoInfo() { async function loadVideoInfo() {
@ -70,7 +100,9 @@ async function loadVideoInfo() {
const videoID = queryParams.get("id"); const videoID = queryParams.get("id");
const dataResponse = await fetch("/thrimshim/" + videoID); const dataResponse = await fetch("/thrimshim/" + videoID);
if (!dataResponse.ok) { if (!dataResponse.ok) {
addError("Failed to load video data. This probably means that the URL is out of date (video ID changed) or that everything is broken (or that the Wubloader host is down)."); addError(
"Failed to load video data. This probably means that the URL is out of date (video ID changed) or that everything is broken (or that the Wubloader host is down)."
);
return; return;
} }
videoInfo = await dataResponse.json(); videoInfo = await dataResponse.json();
@ -84,8 +116,10 @@ async function initializeVideoInfo() {
globalBusStartTime = new Date(videoInfo.bustime_start); globalBusStartTime = new Date(videoInfo.bustime_start);
document.getElementById("stream-time-setting-stream").innerText = globalStreamName; document.getElementById("stream-time-setting-stream").innerText = globalStreamName;
document.getElementById("stream-time-setting-start").innerText = getBusTimeFromTimeString(globalStartTimeString); document.getElementById("stream-time-setting-start").innerText =
document.getElementById("stream-time-setting-end").innerText = getBusTimeFromTimeString(globalEndTimeString); getBusTimeFromTimeString(globalStartTimeString);
document.getElementById("stream-time-setting-end").innerText =
getBusTimeFromTimeString(globalEndTimeString);
updateWaveform(); updateWaveform();
@ -128,7 +162,9 @@ async function initializeVideoInfo() {
modifiedAdvancedOptions = true; modifiedAdvancedOptions = true;
} }
const uploadLocationSelection = document.getElementById("advanced-submission-option-upload-location"); const uploadLocationSelection = document.getElementById(
"advanced-submission-option-upload-location"
);
for (locationName of videoInfo.upload_locations) { for (locationName of videoInfo.upload_locations) {
const option = document.createElement("option"); const option = document.createElement("option");
option.value = locationName; option.value = locationName;
@ -144,7 +180,9 @@ async function initializeVideoInfo() {
if (videoInfo.uploader_whitelist) { if (videoInfo.uploader_whitelist) {
modifiedAdvancedOptions = true; modifiedAdvancedOptions = true;
const uploaderAllowlistBox = document.getElementById("advanced-submission-option-uploader-allow"); const uploaderAllowlistBox = document.getElementById(
"advanced-submission-option-uploader-allow"
);
uploaderAllowlistBox.value = videoInfo.uploader_whitelist.join(","); uploaderAllowlistBox.value = videoInfo.uploader_whitelist.join(",");
} }
@ -160,10 +198,16 @@ async function initializeVideoInfo() {
// For now, there's only one range in the data we receive from thrimshim, so we'll populate that as-is here. // For now, there's only one range in the data we receive from thrimshim, so we'll populate that as-is here.
// This will need to be updated when thrimshim supports multiple video ranges. // This will need to be updated when thrimshim supports multiple video ranges.
const rangeDefinitionsContainer = document.getElementById("range-definitions"); const rangeDefinitionsContainer = document.getElementById("range-definitions");
const rangeDefinitionStart = rangeDefinitionsContainer.getElementsByClassName("range-definition-start")[0]; const rangeDefinitionStart =
const rangeDefinitionEnd = rangeDefinitionsContainer.getElementsByClassName("range-definition-end")[0]; rangeDefinitionsContainer.getElementsByClassName("range-definition-start")[0];
rangeDefinitionStart.addEventListener("change", (_event) => { rangeDataUpdated(); }); const rangeDefinitionEnd =
rangeDefinitionEnd.addEventListener("change", (_event) => { rangeDataUpdated(); }); rangeDefinitionsContainer.getElementsByClassName("range-definition-end")[0];
rangeDefinitionStart.addEventListener("change", (_event) => {
rangeDataUpdated();
});
rangeDefinitionEnd.addEventListener("change", (_event) => {
rangeDataUpdated();
});
if (videoInfo.video_start) { if (videoInfo.video_start) {
rangeDefinitionStart.value = videoHumanTimeFromWubloaderTime(videoInfo.video_start); rangeDefinitionStart.value = videoHumanTimeFromWubloaderTime(videoInfo.video_start);
} }
@ -283,7 +327,9 @@ async function sendVideoData(edited, overrideChanges) {
} }
let transitionType = rangeContainer.getElementsByClassName("range-definition-transition-type"); let transitionType = rangeContainer.getElementsByClassName("range-definition-transition-type");
let transitionDuration = rangeContainer.getElementsByClassName("range-definition-transition-duration"); let transitionDuration = rangeContainer.getElementsByClassName(
"range-definition-transition-duration"
);
if (transitionType.length > 0 && transitionDuration.length > 0) { if (transitionType.length > 0 && transitionDuration.length > 0) {
transitionType = transitionType[0].value; transitionType = transitionType[0].value;
transitionDuration = transitionDuration[0].value; transitionDuration = transitionDuration[0].value;
@ -302,7 +348,7 @@ async function sendVideoData(edited, overrideChanges) {
start: rangeStartSubmit, start: rangeStartSubmit,
end: rangeEndSubmit, end: rangeEndSubmit,
transition: transitionType, transition: transitionType,
duration: transitionDuration duration: transitionDuration,
}); });
} }
@ -313,10 +359,14 @@ async function sendVideoData(edited, overrideChanges) {
const videoDescription = document.getElementById("video-info-description").value; const videoDescription = document.getElementById("video-info-description").value;
const videoTags = document.getElementById("video-info-tags").value.split(","); const videoTags = document.getElementById("video-info-tags").value.split(",");
const allowHoles = document.getElementById("advanced-submission-option-allow-holes").checked; const allowHoles = document.getElementById("advanced-submission-option-allow-holes").checked;
const uploadLocation = document.getElementById("advanced-submission-option-upload-location").value; const uploadLocation = document.getElementById(
const uploaderAllowlistValue = document.getElementById("advanced-submission-option-uploader-allow").value; "advanced-submission-option-upload-location"
const uploaderAllowlist = (uploaderAllowlistValue) ? uploaderAllowlistValue.split(",") : null; ).value;
const state = (edited) ? "EDITED" : "UNEDITED"; const uploaderAllowlistValue = document.getElementById(
"advanced-submission-option-uploader-allow"
).value;
const uploaderAllowlist = uploaderAllowlistValue ? uploaderAllowlistValue.split(",") : null;
const state = edited ? "EDITED" : "UNEDITED";
const editData = { const editData = {
video_start: videoStart, video_start: videoStart,
@ -338,7 +388,7 @@ async function sendVideoData(edited, overrideChanges) {
category: videoInfo.category, category: videoInfo.category,
description: videoInfo.description, description: videoInfo.description,
notes: videoInfo.notes, notes: videoInfo.notes,
tags: videoInfo.tags tags: videoInfo.tags,
}; };
if (googleUser) { if (googleUser) {
editData.token = googleUser.getAuthResponse().id_token; editData.token = googleUser.getAuthResponse().id_token;
@ -351,9 +401,9 @@ async function sendVideoData(edited, overrideChanges) {
method: "POST", method: "POST",
headers: { headers: {
Accept: "application/json", Accept: "application/json",
"Content-Type": "application/json" "Content-Type": "application/json",
}, },
body: JSON.stringify(editData) body: JSON.stringify(editData),
}); });
if (submitResponse.ok) { if (submitResponse.ok) {
@ -369,12 +419,16 @@ async function sendVideoData(edited, overrideChanges) {
const serverErrorNode = document.createTextNode(await submitResponse.text()); const serverErrorNode = document.createTextNode(await submitResponse.text());
const submitButton = document.createElement("button"); const submitButton = document.createElement("button");
submitButton.text = "Submit Anyway"; submitButton.text = "Submit Anyway";
submitButton.addEventListener("click", (_event) => { sendVideoData(edited, true); }); submitButton.addEventListener("click", (_event) => {
sendVideoData(edited, true);
});
submissionResponseElem.innerHTML = ""; submissionResponseElem.innerHTML = "";
submissionResponseElem.appendChild(serverErrorNode); submissionResponseElem.appendChild(serverErrorNode);
submissionResponseElem.appendChild(submitButton); submissionResponseElem.appendChild(submitButton);
} else { } else {
submissionResponseElem.innerText = `${submitResponse.statusText}: ${await submitResponse.text()}`; submissionResponseElem.innerText = `${
submitResponse.statusText
}: ${await submitResponse.text()}`;
} }
} }
} }
@ -384,13 +438,23 @@ function updateDownloadLink() {
const firstRangeStartField = document.getElementsByClassName("range-definition-start")[0]; const firstRangeStartField = document.getElementsByClassName("range-definition-start")[0];
const firstRangeEndField = document.getElementsByClassName("range-definition-end")[0]; const firstRangeEndField = document.getElementsByClassName("range-definition-end")[0];
const startTime = (firstRangeStartField.value) ? wubloaderTimeFromVideoHumanTime(firstRangeStartField.value) : getStartTime(); const startTime = firstRangeStartField.value
const endTime = (firstRangeEndField.value) ? wubloaderTimeFromVideoHumanTime(firstRangeEndField.value) : getEndTime(); ? wubloaderTimeFromVideoHumanTime(firstRangeStartField.value)
: getStartTime();
const endTime = firstRangeEndField.value
? wubloaderTimeFromVideoHumanTime(firstRangeEndField.value)
: getEndTime();
const downloadType = document.getElementById("download-type-select").value; const downloadType = document.getElementById("download-type-select").value;
const allowHoles = document.getElementById("advanced-submission-option-allow-holes").checked; const allowHoles = document.getElementById("advanced-submission-option-allow-holes").checked;
const downloadURL = generateDownloadURL(startTime, endTime, downloadType, allowHoles, videoInfo.video_quality); const downloadURL = generateDownloadURL(
startTime,
endTime,
downloadType,
allowHoles,
videoInfo.video_quality
);
document.getElementById("download-link").href = downloadURL; document.getElementById("download-link").href = downloadURL;
} }
@ -406,7 +470,7 @@ async function setManualVideoLink() {
const request = { const request = {
link: link, link: link,
upload_location: uploadLocation upload_location: uploadLocation,
}; };
if (googleUser) { if (googleUser) {
request.token = googleUser.getAuthResponse().id_token; request.token = googleUser.getAuthResponse().id_token;
@ -419,9 +483,9 @@ async function setManualVideoLink() {
method: "POST", method: "POST",
headers: { headers: {
Accept: "application/json", Accept: "application/json",
"Content-Type": "application/json" "Content-Type": "application/json",
}, },
body: JSON.stringify(request) body: JSON.stringify(request),
}); });
if (response.ok) { if (response.ok) {
@ -444,14 +508,16 @@ async function cancelVideoUpload() {
method: "POST", method: "POST",
headers: { headers: {
Accept: "application/json", Accept: "application/json",
"Content-Type": "application/json" "Content-Type": "application/json",
}, },
body: JSON.stringify(request) body: JSON.stringify(request),
}); });
if (response.ok) { if (response.ok) {
responseElem.innerText = "Row has been cancelled. Reloading..."; responseElem.innerText = "Row has been cancelled. Reloading...";
setTimeout(() => { window.location.reload(); }, 1000); setTimeout(() => {
window.location.reload();
}, 1000);
} else { } else {
responseElem.innerText = `${response.statusText}: ${await response.text()}`; responseElem.innerText = `${response.statusText}: ${await response.text()}`;
} }
@ -470,14 +536,16 @@ async function resetVideoRow() {
method: "POST", method: "POST",
headers: { headers: {
Accept: "application/json", Accept: "application/json",
"Content-Type": "application/json" "Content-Type": "application/json",
}, },
body: JSON.stringify(request) body: JSON.stringify(request),
}); });
if (response.ok) { if (response.ok) {
responseElem.innerText = "Row has been reset. Reloading..."; responseElem.innerText = "Row has been reset. Reloading...";
setTimeout(() => { window.location.reload(); }, 1000); setTimeout(() => {
window.location.reload();
}, 1000);
} else { } else {
responseElem.innerText = `${response.statusText}: ${await response.text()}`; responseElem.innerText = `${response.statusText}: ${await response.text()}`;
} }
@ -532,7 +600,7 @@ const RANGE_TRANSITION_TYPES = [
"wipebl", "wipebl",
"wipebr", "wipebr",
"squeezeh", "squeezeh",
"squeezev" "squeezev",
]; ];
function rangeDefinitionDOM() { function rangeDefinitionDOM() {
@ -554,7 +622,9 @@ function rangeDefinitionDOM() {
transitionOption.innerText = transitionType; transitionOption.innerText = transitionType;
transitionSelection.appendChild(transitionOption); transitionSelection.appendChild(transitionOption);
} }
transitionSelection.addEventListener("change", (_event) => { rangeDataUpdated(); }); transitionSelection.addEventListener("change", (_event) => {
rangeDataUpdated();
});
transitionContainer.appendChild(transitionSelection); transitionContainer.appendChild(transitionSelection);
const transitionDurationInput = document.createElement("input"); const transitionDurationInput = document.createElement("input");
@ -574,7 +644,7 @@ function rangeDefinitionDOM() {
rangeStart.classList.add("range-definition-start"); rangeStart.classList.add("range-definition-start");
const rangeStartSet = document.createElement("img"); const rangeStartSet = document.createElement("img");
rangeStartSet.src = "images/pencil.png"; rangeStartSet.src = "images/pencil.png";
rangeStartSet.alt = "Set range start point to current video time" rangeStartSet.alt = "Set range start point to current video time";
rangeStartSet.classList.add("range-definition-set-start"); rangeStartSet.classList.add("range-definition-set-start");
rangeStartSet.classList.add("click"); rangeStartSet.classList.add("click");
const rangeEnd = document.createElement("input"); const rangeEnd = document.createElement("input");
@ -604,7 +674,8 @@ function rangeDefinitionDOM() {
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) { // currentRange is 1-indexed to index into DOM with querySelector if (rangeNum + 1 <= currentRange) {
// currentRange is 1-indexed to index into DOM with querySelector
currentRange--; currentRange--;
break; break;
} }
@ -638,7 +709,9 @@ function rangeDefinitionDOM() {
function getRangeSetClickHandler(startOrEnd) { function getRangeSetClickHandler(startOrEnd) {
return function (event) { return function (event) {
const setButton = event.currentTarget; const setButton = event.currentTarget;
const setField = setButton.parentElement.getElementsByClassName(`range-definition-${startOrEnd}`)[0]; const setField = setButton.parentElement.getElementsByClassName(
`range-definition-${startOrEnd}`
)[0];
const player = getVideoJS(); const player = getVideoJS();
const videoPlayerTime = player.currentTime(); const videoPlayerTime = player.currentTime();
@ -668,7 +741,9 @@ function updateCurrentRangeIndicator() {
for (let arrowElem of document.getElementsByClassName("range-definition-current")) { for (let arrowElem of document.getElementsByClassName("range-definition-current")) {
arrowElem.classList.add("hidden"); arrowElem.classList.add("hidden");
} }
document.querySelector(`#range-definitions > div:nth-child(${currentRange}) .range-definition-current`).classList.remove("hidden"); document
.querySelector(`#range-definitions > div:nth-child(${currentRange}) .range-definition-current`)
.classList.remove("hidden");
} }
function rangeDataUpdated() { function rangeDataUpdated() {
@ -688,8 +763,8 @@ function rangeDataUpdated() {
continue; continue;
} }
const rangeStartPercentage = rangeStart / videoDuration * 100; const rangeStartPercentage = (rangeStart / videoDuration) * 100;
const rangeEndPercentage = rangeEnd / videoDuration * 100; const rangeEndPercentage = (rangeEnd / videoDuration) * 100;
const widthPercentage = rangeEndPercentage - rangeStartPercentage; const widthPercentage = rangeEndPercentage - rangeStartPercentage;
const marker = document.createElement("div"); const marker = document.createElement("div");
@ -701,14 +776,18 @@ function rangeDataUpdated() {
} }
function setCurrentRangeStartToVideoTime() { function setCurrentRangeStartToVideoTime() {
const rangeStartField = document.querySelector(`#range-definitions > div:nth-child(${currentRange}) .range-definition-start`); const rangeStartField = document.querySelector(
`#range-definitions > div:nth-child(${currentRange}) .range-definition-start`
);
const player = getVideoJS(); const player = getVideoJS();
rangeStartField.value = videoHumanTimeFromVideoPlayerTime(player.currentTime()); rangeStartField.value = videoHumanTimeFromVideoPlayerTime(player.currentTime());
rangeDataUpdated(); rangeDataUpdated();
} }
function setCurrentRangeEndToVideoTime() { function setCurrentRangeEndToVideoTime() {
const rangeEndField = document.querySelector(`#range-definitions > div:nth-child(${currentRange}) .range-definition-end`); const rangeEndField = document.querySelector(
`#range-definitions > div:nth-child(${currentRange}) .range-definition-end`
);
const player = getVideoJS(); const player = getVideoJS();
rangeEndField.value = videoHumanTimeFromVideoPlayerTime(player.currentTime()); rangeEndField.value = videoHumanTimeFromVideoPlayerTime(player.currentTime());
rangeDataUpdated(); rangeDataUpdated();
@ -720,7 +799,11 @@ function videoPlayerTimeFromWubloaderTime(wubloaderTime) {
let highestDiscontinuitySegmentBefore = 0; let highestDiscontinuitySegmentBefore = 0;
for (start of videoPlaylist.discontinuityStarts) { for (start of videoPlaylist.discontinuityStarts) {
const discontinuityStartSegment = videoPlaylist.segments[start]; const discontinuityStartSegment = videoPlaylist.segments[start];
if (discontinuityStartSegment.dateTimeObject < wubloaderDateObj && discontinuityStartSegment.dateTimeObject > videoPlaylist.segments[highestDiscontinuitySegmentBefore].dateTimeObject) { if (
discontinuityStartSegment.dateTimeObject < wubloaderDateObj &&
discontinuityStartSegment.dateTimeObject >
videoPlaylist.segments[highestDiscontinuitySegmentBefore].dateTimeObject
) {
highestDiscontinuitySegmentBefore = start; highestDiscontinuitySegmentBefore = start;
} }
} }
@ -729,7 +812,13 @@ function videoPlayerTimeFromWubloaderTime(wubloaderTime) {
for (let segment = 0; segment < highestDiscontinuitySegmentBefore; segment++) { for (let segment = 0; segment < highestDiscontinuitySegmentBefore; segment++) {
highestDiscontinuitySegmentStart += videoPlaylist.segments[segment].duration; highestDiscontinuitySegmentStart += videoPlaylist.segments[segment].duration;
} }
return highestDiscontinuitySegmentStart + secondsDifference(videoPlaylist.segments[highestDiscontinuitySegmentBefore].dateTimeObject, wubloaderDateObj); return (
highestDiscontinuitySegmentStart +
secondsDifference(
videoPlaylist.segments[highestDiscontinuitySegmentBefore].dateTimeObject,
wubloaderDateObj
)
);
} }
function wubloaderTimeFromVideoPlayerTime(videoPlayerTime) { function wubloaderTimeFromVideoPlayerTime(videoPlayerTime) {

4
thrimbletrimmer/beta/scripts/keyboard-shortcuts.js
Unescape Escape View File

@ -77,10 +77,10 @@ document.addEventListener("keypress", (event) => {
player.currentTime(player.currentTime() + 5); player.currentTime(player.currentTime() + 5);
break; break;
case ",": case ",":
player.currentTime(player.currentTime() - (1 / VIDEO_FRAMES_PER_SECOND)); player.currentTime(player.currentTime() - 1 / VIDEO_FRAMES_PER_SECOND);
break; break;
case ".": case ".":
player.currentTime(player.currentTime() + (1 / VIDEO_FRAMES_PER_SECOND)); player.currentTime(player.currentTime() + 1 / VIDEO_FRAMES_PER_SECOND);
break; break;
case "=": case "=":
increaseSpeed(player); increaseSpeed(player);

24
thrimbletrimmer/beta/scripts/stream.js
Unescape Escape View File

@ -19,7 +19,9 @@ window.addEventListener("DOMContentLoaded", async (event) => {
async function loadDefaults() { async function loadDefaults() {
const defaultDataResponse = await fetch("/thrimshim/defaults"); const defaultDataResponse = await fetch("/thrimshim/defaults");
if (!defaultDataResponse.ok) { if (!defaultDataResponse.ok) {
addError("Failed to load Thrimbletrimmer data. This probably means that everything is broken (or, possibly, just that the Wubloader host is down). Please sound the alarm."); addError(
"Failed to load Thrimbletrimmer data. This probably means that everything is broken (or, possibly, just that the Wubloader host is down). Please sound the alarm."
);
return; return;
} }
const defaultData = await defaultDataResponse.json(); const defaultData = await defaultDataResponse.json();
@ -36,9 +38,13 @@ function getStartTime() {
case 1: case 1:
return new Date(globalStartTimeString + "Z"); return new Date(globalStartTimeString + "Z");
case 2: case 2:
return new Date(globalBusStartTime.getTime() + (1000 * parseInputTimeAsNumberOfSeconds(globalStartTimeString))); return new Date(
globalBusStartTime.getTime() + 1000 * parseInputTimeAsNumberOfSeconds(globalStartTimeString)
);
case 3: case 3:
return new Date(new Date().getTime() - (1000 * parseInputTimeAsNumberOfSeconds(globalStartTimeString))); return new Date(
new Date().getTime() - 1000 * parseInputTimeAsNumberOfSeconds(globalStartTimeString)
);
} }
} }
@ -51,9 +57,13 @@ function getEndTime() {
case 1: case 1:
return new Date(globalEndTimeString + "Z"); return new Date(globalEndTimeString + "Z");
case 2: case 2:
return new Date(globalBusStartTime.getTime() + (1000 * parseInputTimeAsNumberOfSeconds(globalEndTimeString))); return new Date(
globalBusStartTime.getTime() + 1000 * parseInputTimeAsNumberOfSeconds(globalEndTimeString)
);
case 3: case 3:
return new Date(new Date().getTime() - (1000 * parseInputTimeAsNumberOfSeconds(globalEndTimeString))); return new Date(
new Date().getTime() - 1000 * parseInputTimeAsNumberOfSeconds(globalEndTimeString)
);
} }
} }
@ -69,7 +79,9 @@ function updateTimeSettings() {
updateDownloadLink(); updateDownloadLink();
if (getEndTime() < getStartTime()) { if (getEndTime() < getStartTime()) {
addError("End time is before the start time. This will prevent video loading and cause other problems."); addError(
"End time is before the start time. This will prevent video loading and cause other problems."
);
} }
} }

6
thrimbletrimmer/beta/styles/thrimbletrimmer.css
Unescape Escape View File

@ -1,4 +1,5 @@
a, .click { a,
.click {
cursor: pointer; cursor: pointer;
} }
@ -118,7 +119,8 @@ a, .click {
gap: 4px; gap: 4px;
} }
.range-definition-start, .range-definition-end { .range-definition-start,
.range-definition-end {
width: 100px; width: 100px;
} }

Write Preview
Loading…
Cancel
Save