thrimbletrimmer: Replace ad-hoc query string building with URLSearchParams

This handles edge cases like special characters properly, and is easier/more readable.

thrimbletrimmer/scripts/common.js

@@ -445,25 +445,25 @@ function videoHumanTimeFromDateTime(dateTime) {
 function assembleVideoPlaylistURL(basePlaylistURL) {
 	let playlistURL = basePlaylistURL;
 
-	const queryStringParts = startAndEndTimeQueryStringParts();
-	if (queryStringParts) {
-		playlistURL += "?" + queryStringParts.join("&");
+	const query = startAndEndTimeQuery();
+	if (query.toString() !== "") {
+		playlistURL += "?" + query.toString();
 	}
 	return playlistURL;
 }
 
-function startAndEndTimeQueryStringParts() {
+function startAndEndTimeQuery() {
 	const startTime = getStartTime();
 	const endTime = getEndTime();
 
-	let queryStringParts = [];
+	const query = new URLSearchParams();
 	if (startTime) {
-		queryStringParts.push(`start=${wubloaderTimeFromDateTime(startTime)}`);
+		query.append("start", wubloaderTimeFromDateTime(startTime));
 	}
 	if (endTime) {
-		queryStringParts.push(`end=${wubloaderTimeFromDateTime(endTime)}`);
+		query.append("end", wubloaderTimeFromDateTime(endTime));
 	}
-	return queryStringParts;
+	return query;
 }
 
 function getSegmentList() {

thrimbletrimmer/scripts/edit.js

@@ -272,13 +272,13 @@ window.addEventListener("DOMContentLoaded", async (event) => {
 			}
 			const imageTemplate = document.getElementById("video-info-thumbnail-template").value;
 			const [crop, loc] = getTemplatePosition();
-			const queryParts = [
-				`timestamp=${imageTime}`,
-				`template=${imageTemplate}`,
-				`crop=${crop.join(",")}`,
-				`location=${loc.join(",")}`,
-			];
-			imageElement.src = `/thumbnail/${globalStreamName}/source.png?${queryParts.join("&")}`;
+			const query = new URLSearchParams({
+				timestamp: imageTime,
+				template: imageTemplate,
+				crop: crop.join(","),
+				location: loc.join(","),
+			});
+			imageElement.src = `/thumbnail/${globalStreamName}/source.png?${query}`;
 			imageElement.classList.remove("hidden");
 		});
 
@@ -831,8 +831,8 @@ function updateWaveform() {
 	let waveformURL =
 		"/waveform/" + globalStreamName + "/" + videoInfo.video_quality + ".png?size=1920x125&";
 
-	const queryStringParts = startAndEndTimeQueryStringParts();
-	waveformURL += queryStringParts.join("&");
+	const query = startAndEndTimeQuery();
+	waveformURL += query.toString();
 
 	const waveformElem = document.getElementById("waveform");
 	waveformElem.src = waveformURL;
@@ -1374,7 +1374,10 @@ function handleLeavePage(event) {
 }
 
 function generateDownloadURL(timeRanges, transitions, downloadType, allowHoles, quality) {
-	const queryParts = [`type=${downloadType}`, `allow_holes=${allowHoles}`];
+	const query = new URLSearchParams({
+		type: downloadType,
+		allow_holes: allowHoles,
+	});
 	for (const range of timeRanges) {
 		let timeRangeString = "";
 		if (range.hasOwnProperty("start")) {
@@ -1384,13 +1387,13 @@ function generateDownloadURL(timeRanges, transitions, downloadType, allowHoles,
 		if (range.hasOwnProperty("end")) {
 			timeRangeString += range.end;
 		}
-		queryParts.push(`range=${timeRangeString}`);
+		query.append("range", timeRangeString);
 	}
 	for (const transition of transitions) {
-		queryParts.push(`transition=${transition}`);
+		query.append("transition", transition);
 	}
 
-	const downloadURL = `/cut/${globalStreamName}/${quality}.ts?${queryParts.join("&")}`;
+	const downloadURL = `/cut/${globalStreamName}/${quality}.ts?${query.toString()}`;
 	return downloadURL;
 }
 

thrimbletrimmer/scripts/stream.js

@@ -121,28 +121,32 @@ async function updateTimeSettings() {
 
 	const startTime = getStartTime();
 	const endTime = getEndTime();
-	const queryParts = [];
-	queryParts.push(`stream=${globalStreamName}`);
-	queryParts.push(`start=${wubloaderTimeFromDateTime(startTime)}`);
+	const query = new URLSearchParams({
+		stream: globalStreamName,
+		start: wubloaderTimeFromDateTime(startTime),
+	});
 	if (endTime) {
-		queryParts.push(`end=${wubloaderTimeFromDateTime(endTime)}`);
+		query.append("end", wubloaderTimeFromDateTime(endTime));
 	}
-	document.getElementById("stream-time-link").href = `?${queryParts.join("&")}`;
+	document.getElementById("stream-time-link").href = `?${query}`;
 }
 
 function generateDownloadURL(startTime, endTime, downloadType, allowHoles, quality) {
 	const startURLTime = wubloaderTimeFromDateTime(startTime);
 	const endURLTime = wubloaderTimeFromDateTime(endTime);
 
-	const queryParts = [`type=${downloadType}`, `allow_holes=${allowHoles}`];
+	const query = new URLSearchParams({
+		type: downloadType,
+		allow_holes: allowHoles
+	});
 	if (startURLTime) {
-		queryParts.push(`start=${startURLTime}`);
+		query.append("start", startURLTime);
 	}
 	if (endURLTime) {
-		queryParts.push(`end=${endURLTime}`);
+		query.append("end", endURLTime);
 	}
 
-	const downloadURL = `/cut/${globalStreamName}/${quality}.ts?${queryParts.join("&")}`;
+	const downloadURL = `/cut/${globalStreamName}/${quality}.ts?${query}`;
 	return downloadURL;
 }