Run Prettier on other Thrimbletrimmer files

It had not been run in previous PRs

thrimbletrimmer/edit.html

@@ -5,7 +5,7 @@
 		<title>VST Video Editor</title>
 
 		<link rel="stylesheet" href="styles/thrimbletrimmer.css" />
-		<link rel="stylesheet" href="styles/jcrop.css">
+		<link rel="stylesheet" href="styles/jcrop.css" />
 
 		<script src="scripts/hls.min.js"></script>
 		<script src="scripts/luxon.min.js"></script>
@@ -259,8 +259,10 @@
 						<details>
 							<summary>Advanced Templating Options</summary>
 							Crop specifies the region of the video frame to capture. <br />
-							Location specifies the region within the template image where the cropped image will be placed. <br/>
+							Location specifies the region within the template image where the cropped image will
-							Regions are given as pixel coordinates of the top-left and bottom-right corners. <br/>
+							be placed. <br />
+							Regions are given as pixel coordinates of the top-left and bottom-right corners.
+							<br />
 							Note that if the regions are different sizes, the image will be stretched. <br />
 
 							<button id="video-info-thumbnail-template-source-image-update">
@@ -274,23 +276,41 @@
 										id="video-info-thumbnail-template-video-source-image"
 										class="hidden"
 										alt="Thumbnail preview image"
-										height="360" width="640"
+										height="360"
+										width="640"
 									/>
 									<br />
 									Crop:
-									<input type="text" class="video-info-thumbnail-position" id="video-info-thumbnail-crop-0" />
+									<input
-									<input type="text" class="video-info-thumbnail-position" id="video-info-thumbnail-crop-1" />
+										type="text"
+										class="video-info-thumbnail-position"
+										id="video-info-thumbnail-crop-0"
+									/>
+									<input
+										type="text"
+										class="video-info-thumbnail-position"
+										id="video-info-thumbnail-crop-1"
+									/>
 									to
-									<input type="text" class="video-info-thumbnail-position" id="video-info-thumbnail-crop-2" />
+									<input
-									<input type="text" class="video-info-thumbnail-position" id="video-info-thumbnail-crop-3" />
+										type="text"
+										class="video-info-thumbnail-position"
+										id="video-info-thumbnail-crop-2"
+									/>
+									<input
+										type="text"
+										class="video-info-thumbnail-position"
+										id="video-info-thumbnail-crop-3"
+									/>
 									<br />
 								</div>
 
-								<div class="video-info-thumbnail-advanced-crop-flex-item hidden" id="video-info-thumbnail-aspect-ratio-controls">
+								<div
+									class="video-info-thumbnail-advanced-crop-flex-item hidden"
+									id="video-info-thumbnail-aspect-ratio-controls"
+								>
 									<div class="video-info-thumbnail-advanced-crop-flex-column">
-										<div>
+										<div>Aspect Ratio</div>
-											Aspect Ratio
-										</div>
 										<div>
 											<button id="video-info-thumbnail-aspect-ratio-match-right">
 												--Match-&gt;
@@ -303,7 +323,7 @@
 										</div>
 										<div>
 											<label>
-												<input type="checkbox" id="video-info-thumbnail-lock-aspect-ratio">
+												<input type="checkbox" id="video-info-thumbnail-lock-aspect-ratio" />
 												Lock
 											</label>
 										</div>
@@ -315,19 +335,35 @@
 										id="video-info-thumbnail-template-overlay-image"
 										class="hidden"
 										alt="Thumbnail preview image"
-										height="360" width="640"
+										height="360"
+										width="640"
 									/>
 									<br />
 									Location:
-									<input type="text" class="video-info-thumbnail-position" id="video-info-thumbnail-location-0" />
+									<input
-									<input type="text" class="video-info-thumbnail-position" id="video-info-thumbnail-location-1" />
+										type="text"
+										class="video-info-thumbnail-position"
+										id="video-info-thumbnail-location-0"
+									/>
+									<input
+										type="text"
+										class="video-info-thumbnail-position"
+										id="video-info-thumbnail-location-1"
+									/>
 									to
-									<input type="text" class="video-info-thumbnail-position" id="video-info-thumbnail-location-2" />
+									<input
-									<input type="text" class="video-info-thumbnail-position" id="video-info-thumbnail-location-3" />
+										type="text"
+										class="video-info-thumbnail-position"
+										id="video-info-thumbnail-location-2"
+									/>
+									<input
+										type="text"
+										class="video-info-thumbnail-position"
+										id="video-info-thumbnail-location-3"
+									/>
 									<br />
 								</div>
 							</div>
-
 						</details>
 					</div>
 					<div

thrimbletrimmer/scripts/edit.js

@@ -222,7 +222,9 @@ window.addEventListener("DOMContentLoaded", async (event) => {
 		}
 	}
 
-	document.getElementById("range-definition-chapter-marker-first-description").addEventListener("input", (event) => {
+	document
+		.getElementById("range-definition-chapter-marker-first-description")
+		.addEventListener("input", (event) => {
 			validateChapterDescription(event.target);
 		});
 	document.getElementById("video-info-title").addEventListener("input", (event) => {
@@ -269,7 +271,9 @@ window.addEventListener("DOMContentLoaded", async (event) => {
 	document
 		.getElementById("video-info-thumbnail-template-source-image-update")
 		.addEventListener("click", async (_event) => {
-			const videoFrameImageElement = document.getElementById("video-info-thumbnail-template-video-source-image");
+			const videoFrameImageElement = document.getElementById(
+				"video-info-thumbnail-template-video-source-image",
+			);
 
 			const timeEntryElement = document.getElementById("video-info-thumbnail-time");
 			const imageTime = wubloaderTimeFromVideoHumanTime(timeEntryElement.value);
@@ -285,35 +289,60 @@ window.addEventListener("DOMContentLoaded", async (event) => {
 			videoFrameImageElement.src = `/frame/${globalStreamName}/source.png?${videoFrameQuery}`;
 			videoFrameImageElement.classList.remove("hidden");
 
-			const templateImageElement = document.getElementById("video-info-thumbnail-template-overlay-image");
+			const templateImageElement = document.getElementById(
+				"video-info-thumbnail-template-overlay-image",
+			);
 
 			templateImageElement.src = `/thrimshim/template/${imageTemplate}.png`;
 			templateImageElement.classList.remove("hidden");
 
-			const aspectRatioControls = document.getElementById("video-info-thumbnail-aspect-ratio-controls");
+			const aspectRatioControls = document.getElementById(
+				"video-info-thumbnail-aspect-ratio-controls",
+			);
 			aspectRatioControls.classList.remove("hidden");
 
 			createTemplateCropWidgets();
 		});
 
-	document.getElementById("video-info-thumbnail-crop-0").addEventListener("input", updateTemplateCropWidgets);
+	document
-	document.getElementById("video-info-thumbnail-crop-1").addEventListener("input", updateTemplateCropWidgets);
+		.getElementById("video-info-thumbnail-crop-0")
-	document.getElementById("video-info-thumbnail-crop-2").addEventListener("input", updateTemplateCropWidgets);
+		.addEventListener("input", updateTemplateCropWidgets);
-	document.getElementById("video-info-thumbnail-crop-3").addEventListener("input", updateTemplateCropWidgets);
+	document
-	document.getElementById("video-info-thumbnail-location-0").addEventListener("input", updateTemplateCropWidgets);
+		.getElementById("video-info-thumbnail-crop-1")
-	document.getElementById("video-info-thumbnail-location-1").addEventListener("input", updateTemplateCropWidgets);
+		.addEventListener("input", updateTemplateCropWidgets);
-	document.getElementById("video-info-thumbnail-location-2").addEventListener("input", updateTemplateCropWidgets);
+	document
-	document.getElementById("video-info-thumbnail-location-3").addEventListener("input", updateTemplateCropWidgets);
+		.getElementById("video-info-thumbnail-crop-2")
+		.addEventListener("input", updateTemplateCropWidgets);
+	document
+		.getElementById("video-info-thumbnail-crop-3")
+		.addEventListener("input", updateTemplateCropWidgets);
+	document
+		.getElementById("video-info-thumbnail-location-0")
+		.addEventListener("input", updateTemplateCropWidgets);
+	document
+		.getElementById("video-info-thumbnail-location-1")
+		.addEventListener("input", updateTemplateCropWidgets);
+	document
+		.getElementById("video-info-thumbnail-location-2")
+		.addEventListener("input", updateTemplateCropWidgets);
+	document
+		.getElementById("video-info-thumbnail-location-3")
+		.addEventListener("input", updateTemplateCropWidgets);
 
-	document.getElementById("video-info-thumbnail-lock-aspect-ratio").addEventListener("change", updateTemplateCropAspectRatio);
+	document
+		.getElementById("video-info-thumbnail-lock-aspect-ratio")
+		.addEventListener("change", updateTemplateCropAspectRatio);
 
-	document.getElementById("video-info-thumbnail-aspect-ratio-match-right").addEventListener("click", function(){
+	document
+		.getElementById("video-info-thumbnail-aspect-ratio-match-right")
+		.addEventListener("click", function () {
 			// Calculate and copy the aspect ratio from the video field to the template
 			const videoFieldX1 = document.getElementById("video-info-thumbnail-crop-0");
 			const videoFieldY1 = document.getElementById("video-info-thumbnail-crop-1");
 			const videoFieldX2 = document.getElementById("video-info-thumbnail-crop-2");
 			const videoFieldY2 = document.getElementById("video-info-thumbnail-crop-3");
-		const videoFieldAspectRatio = (videoFieldX2.value-videoFieldX1.value)/(videoFieldY2.value-videoFieldY1.value);
+			const videoFieldAspectRatio =
+				(videoFieldX2.value - videoFieldX1.value) / (videoFieldY2.value - videoFieldY1.value);
 
 			templateStage.setOptions({ aspectRatio: videoFieldAspectRatio });
 
@@ -321,13 +350,17 @@ window.addEventListener("DOMContentLoaded", async (event) => {
 			updateTemplateCropAspectRatio();
 		});
 
-	document.getElementById("video-info-thumbnail-aspect-ratio-match-left").addEventListener("click", function(){
+	document
+		.getElementById("video-info-thumbnail-aspect-ratio-match-left")
+		.addEventListener("click", function () {
 			// Calculate and copy the aspect ratio from the template to the video field
 			const templateFieldX1 = document.getElementById("video-info-thumbnail-location-0");
 			const templateFieldY1 = document.getElementById("video-info-thumbnail-location-1");
 			const templateFieldX2 = document.getElementById("video-info-thumbnail-location-2");
 			const templateFieldY2 = document.getElementById("video-info-thumbnail-location-3");
-		const templateFieldAspectRatio = (templateFieldX2.value-templateFieldX1.value)/(templateFieldY2.value-templateFieldY1.value);
+			const templateFieldAspectRatio =
+				(templateFieldX2.value - templateFieldX1.value) /
+				(templateFieldY2.value - templateFieldY1.value);
 
 			videoFrameStage.setOptions({ aspectRatio: templateFieldAspectRatio });
 
@@ -375,7 +408,7 @@ window.addEventListener("DOMContentLoaded", async (event) => {
 	const thumbnailTemplatesListResponse = await fetch("/thrimshim/templates");
 	if (thumbnailTemplatesListResponse.ok) {
 		const thumbnailTemplatesList = await thumbnailTemplatesListResponse.json();
-		const templateNames = thumbnailTemplatesList.map(t => t.name);
+		const templateNames = thumbnailTemplatesList.map((t) => t.name);
 		templateNames.sort();
 		for (const template of thumbnailTemplatesList) {
 			thumbnailTemplates[template.name] = template;
@@ -401,7 +434,8 @@ window.addEventListener("DOMContentLoaded", async (event) => {
 	}
 	if (videoInfo.thumbnail_location !== null) {
 		for (let i = 0; i < 4; i++) {
-			document.getElementById(`video-info-thumbnail-location-${i}`).value = videoInfo.thumbnail_location[i];
+			document.getElementById(`video-info-thumbnail-location-${i}`).value =
+				videoInfo.thumbnail_location[i];
 		}
 	}
 	document.getElementById("video-info-thumbnail-mode").value = videoInfo.thumbnail_mode;
@@ -479,11 +513,12 @@ window.addEventListener("DOMContentLoaded", async (event) => {
 	});
 });
 
-
 async function loadTransitions() {
 	const response = await fetch("/thrimshim/transitions");
 	if (!response.ok) {
-		addError("Failed to fetch possible transition types. This probably means the wubloader host is down.");
+		addError(
+			"Failed to fetch possible transition types. This probably means the wubloader host is down.",
+		);
 		return;
 	}
 	knownTransitions = await response.json();
@@ -776,8 +811,12 @@ async function initializeVideoInfo() {
 				if (rangeIndex > 0) {
 					const transition = videoInfo.video_transitions[rangeIndex - 1];
 					const transitionType = rangeContainer.getElementsByClassName("range-transition-type")[0];
-					const transitionDuration = rangeContainer.getElementsByClassName("range-transition-duration")[0];
+					const transitionDuration = rangeContainer.getElementsByClassName(
-					const transitionDurationSection = rangeContainer.getElementsByClassName("range-transition-duration-section")[0];
+						"range-transition-duration",
+					)[0];
+					const transitionDurationSection = rangeContainer.getElementsByClassName(
+						"range-transition-duration-section",
+					)[0];
 					if (transition === null) {
 						transitionType.value = "";
 						transitionDuration.value = "";
@@ -796,7 +835,7 @@ async function initializeVideoInfo() {
 							const option = document.createElement("option");
 							option.value = type;
 							option.textContent = type;
-							transitionType.append(option)
+							transitionType.append(option);
 						}
 						// Set type and duration.
 						transitionType.value = type;
@@ -1062,11 +1101,13 @@ function validateChapterDescription(chapterDescField) {
 	if (chapterDesc.indexOf("<") !== -1 || chapterDesc.indexOf(">") !== -1) {
 		chapterDescField.classList.add("input-error");
 		chapterDescField.title = "Chapter description may not contain angle brackets (< or >)";
-	} else if (Array.from(chapterDesc).some(c => c.charCodeAt(0) > 127)) { // any char is non-ascii
+	} else if (Array.from(chapterDesc).some((c) => c.charCodeAt(0) > 127)) {
+		// any char is non-ascii
 		// We don't know what chars are safe outside the ascii range, so we just warn on any of them.
 		// We know emoji are not safe.
 		chapterDescField.classList.add("input-error");
-		chapterDescField.title = "Chapter descriptions with non-ascii characters may cause issues; proceed with caution";
+		chapterDescField.title =
+			"Chapter descriptions with non-ascii characters may cause issues; proceed with caution";
 	} else {
 		chapterDescField.classList.remove("input-error");
 		chapterDescField.title = "";
@@ -1115,7 +1156,9 @@ async function sendVideoData(newState, overrideChanges) {
 		const transitionTypeElements = rangeContainer.getElementsByClassName("range-transition-type");
 		if (transitionTypeElements.length > 0) {
 			const transitionType = transitionTypeElements[0].value;
-			const transitionDurationStr = rangeContainer.getElementsByClassName("range-transition-duration")[0].value;
+			const transitionDurationStr = rangeContainer.getElementsByClassName(
+				"range-transition-duration",
+			)[0].value;
 			if (transitionType === "") {
 				transitions.push(null);
 			} else {
@@ -1124,10 +1167,12 @@ async function sendVideoData(newState, overrideChanges) {
 				// Note that !(x > 0) is not equivalent to (x <= 0) due to NaN.
 				const transitionDuration = Number(transitionDurationStr);
 				if (!(transitionDuration > 0)) {
-					submissionError(`Couldn't submit edits: Invalid transition duration: "${transitionDurationStr}"`);
+					submissionError(
+						`Couldn't submit edits: Invalid transition duration: "${transitionDurationStr}"`,
+					);
 					return;
 				}
-				transitions.push([transitionType, transitionDuration])
+				transitions.push([transitionType, transitionDuration]);
 				// Since we're overlapping with the previous range, this range's start time is
 				// actually earlier. This matters for chapter markers.
 				rangeStartInFinalVideo -= transitionDuration;
@@ -1186,7 +1231,9 @@ async function sendVideoData(newState, overrideChanges) {
 					continue;
 				}
 				if (startFieldTime < rangeStartPlayer || startFieldTime > rangeEndPlayer) {
-					submissionError(`The chapter at "${startField.value}" is outside its containing time range.`);
+					submissionError(
+						`The chapter at "${startField.value}" is outside its containing time range.`,
+					);
 					return;
 				}
 				const chapterStartTime = rangeStartInFinalVideo + startFieldTime - rangeStartPlayer;
@@ -1494,7 +1541,7 @@ async function uploadedImageToBase64() {
 	const fileLoadData = fileReader.result;
 	if (fileLoadData.error) {
 		throw new Error(
-			`An error (${fileLoadData.error.name}) occurred loading the thumbnail: ${fileLoadData.error.message}`
+			`An error (${fileLoadData.error.name}) occurred loading the thumbnail: ${fileLoadData.error.message}`,
 		);
 	}
 	if (fileLoadData.substring(0, 22) !== "data:image/png;base64,") {
@@ -1536,7 +1583,7 @@ async function renderThumbnail() {
 	}
 	// Converting the result into base64 is similarly painful.
 	const blob = await res.blob();
-	const data = await new Promise(resolve => {
+	const data = await new Promise((resolve) => {
 		const reader = new FileReader();
 		reader.onload = () => resolve(reader.result);
 		reader.readAsDataURL(blob);
@@ -1558,7 +1605,9 @@ function updateDownloadLink() {
 		const transitionTypeElements = rangeContainer.getElementsByClassName("range-transition-type");
 		if (transitionTypeElements.length > 0) {
 			const transitionType = transitionTypeElements[0].value;
-			const transitionDurationStr = rangeContainer.getElementsByClassName("range-transition-duration")[0].value;
+			const transitionDurationStr = rangeContainer.getElementsByClassName(
+				"range-transition-duration",
+			)[0].value;
 			if (transitionType === "") {
 				transitions.push("");
 			} else {
@@ -1711,8 +1760,11 @@ function makeElement(tag, classes = [], values = {}) {
 
 function rangeDefinitionDOM() {
 	// Shortcut builder for image-based buttons
-	const button = (cls, src, alt) => makeElement("img", [cls, "click"], {
+	const button = (cls, src, alt) =>
-		src, alt, title: alt,
+		makeElement("img", [cls, "click"], {
+			src,
+			alt,
+			title: alt,
 		});
 
 	const rangeContainer = makeElement("div", ["range-definition-removable"]);
@@ -1731,7 +1783,10 @@ function rangeDefinitionDOM() {
 	updateTransitionTypes([transitionType]);
 
 	// Duration always starts hidden because type always starts as cut.
-	const transitionDurationSection = makeElement("div", ["range-transition-duration-section", "hidden"]);
+	const transitionDurationSection = makeElement("div", [
+		"range-transition-duration-section",
+		"hidden",
+	]);
 	// Add/remove hidden when type changes
 	transitionType.addEventListener("change", (event) => {
 		if (transitionType.value === "") {
@@ -1777,11 +1832,7 @@ function rangeDefinitionDOM() {
 		"images/play_to.png",
 		"Play from end point",
 	);
-	const removeRange = button(
+	const removeRange = button("range-definition-remove", "images/minus.png", "Remove range");
-		"range-definition-remove",
-		"images/minus.png",
-		"Remove range",
-	);
 
 	if (canEditVideo()) {
 		rangeStartSet.addEventListener("click", getRangeSetClickHandler("start"));
@@ -2239,8 +2290,8 @@ function isNonVideoInput(element) {
  */
 function createTemplateCropWidgets() {
 	if (videoFrameStage == null) {
-		videoFrameStage = Jcrop.attach('video-info-thumbnail-template-video-source-image');
+		videoFrameStage = Jcrop.attach("video-info-thumbnail-template-video-source-image");
-		videoFrameStage.listen('crop.update',function(widget,e){
+		videoFrameStage.listen("crop.update", function (widget, e) {
 			const pos = widget.pos;
 			const fieldX1 = document.getElementById("video-info-thumbnail-crop-0");
 			const fieldY1 = document.getElementById("video-info-thumbnail-crop-1");
@@ -2252,7 +2303,7 @@ function createTemplateCropWidgets() {
 			fieldX2.value = Math.round((pos.x + pos.w) * 3);
 			fieldY2.value = Math.round((pos.y + pos.h) * 3);
 		});
-		videoFrameStage.listen('crop.change',function(widget,e){
+		videoFrameStage.listen("crop.change", function (widget, e) {
 			// This only fires when the user is finished dragging, not every time the size
 			// of the cropped area updates. This avoids the template area updating every
 			// instant due to minute changes in the aspect ratio, which causes it to shrink
@@ -2261,8 +2312,8 @@ function createTemplateCropWidgets() {
 		});
 	}
 	if (templateStage == null) {
-		templateStage = Jcrop.attach('video-info-thumbnail-template-overlay-image');
+		templateStage = Jcrop.attach("video-info-thumbnail-template-overlay-image");
-		templateStage.listen('crop.update',function(widget,e){
+		templateStage.listen("crop.update", function (widget, e) {
 			const pos = widget.pos;
 			const fieldX1 = document.getElementById("video-info-thumbnail-location-0");
 			const fieldY1 = document.getElementById("video-info-thumbnail-location-1");
@@ -2290,7 +2341,12 @@ function updateTemplateCropWidgets() {
 	const videoFieldX2 = document.getElementById("video-info-thumbnail-crop-2");
 	const videoFieldY2 = document.getElementById("video-info-thumbnail-crop-3");
 	// Video frame: 640x360 -> 1920x1080
-	const videoFrameRect = Jcrop.Rect.create(videoFieldX1.value/3, videoFieldY1.value/3, (videoFieldX2.value-videoFieldX1.value)/3, (videoFieldY2.value-videoFieldY1.value)/3);
+	const videoFrameRect = Jcrop.Rect.create(
+		videoFieldX1.value / 3,
+		videoFieldY1.value / 3,
+		(videoFieldX2.value - videoFieldX1.value) / 3,
+		(videoFieldY2.value - videoFieldY1.value) / 3,
+	);
 	if (videoFrameStage.active == null) {
 		videoFrameStage.newWidget(videoFrameRect);
 	} else {
@@ -2303,7 +2359,12 @@ function updateTemplateCropWidgets() {
 	const templateFieldX2 = document.getElementById("video-info-thumbnail-location-2");
 	const templateFieldY2 = document.getElementById("video-info-thumbnail-location-3");
 	// Template: 640x360 -> 1280x720
-	const templateRect = Jcrop.Rect.create(templateFieldX1.value/2, templateFieldY1.value/2, (templateFieldX2.value-templateFieldX1.value)/2, (templateFieldY2.value-templateFieldY1.value)/2);
+	const templateRect = Jcrop.Rect.create(
+		templateFieldX1.value / 2,
+		templateFieldY1.value / 2,
+		(templateFieldX2.value - templateFieldX1.value) / 2,
+		(templateFieldY2.value - templateFieldY1.value) / 2,
+	);
 	if (templateStage.active == null) {
 		templateStage.newWidget(templateRect);
 	} else {
@@ -2321,7 +2382,8 @@ function updateTemplateCropAspectRatio() {
 		const videoFieldY1 = document.getElementById("video-info-thumbnail-crop-1");
 		const videoFieldX2 = document.getElementById("video-info-thumbnail-crop-2");
 		const videoFieldY2 = document.getElementById("video-info-thumbnail-crop-3");
-		const videoFieldAspectRatio = (videoFieldX2.value-videoFieldX1.value)/(videoFieldY2.value-videoFieldY1.value);
+		const videoFieldAspectRatio =
+			(videoFieldX2.value - videoFieldX1.value) / (videoFieldY2.value - videoFieldY1.value);
 		videoFrameStage.setOptions({ aspectRatio: videoFieldAspectRatio });
 		templateStage.setOptions({ aspectRatio: videoFieldAspectRatio });
 	} else {

thrimbletrimmer/scripts/stream.js

@@ -137,7 +137,7 @@ function generateDownloadURL(startTime, endTime, downloadType, allowHoles, quali
 
 	const query = new URLSearchParams({
 		type: downloadType,
-		allow_holes: allowHoles
+		allow_holes: allowHoles,
 	});
 	if (startURLTime) {
 		query.append("start", startURLTime);