thrimbletrimmer: Replace ad-hoc query string building with URLSearchParams

This handles edge cases like special characters properly, and is easier/more readable.
pull/418/head
Mike Lang 3 weeks ago committed by Mike Lang
parent f46481af0c
commit 751271d3c1

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

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

@ -121,28 +121,32 @@ async function updateTimeSettings() {
const startTime = getStartTime(); const startTime = getStartTime();
const endTime = getEndTime(); const endTime = getEndTime();
const queryParts = []; const query = new URLSearchParams({
queryParts.push(`stream=${globalStreamName}`); stream: globalStreamName,
queryParts.push(`start=${wubloaderTimeFromDateTime(startTime)}`); start: wubloaderTimeFromDateTime(startTime),
});
if (endTime) { 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) { function generateDownloadURL(startTime, endTime, downloadType, allowHoles, quality) {
const startURLTime = wubloaderTimeFromDateTime(startTime); const startURLTime = wubloaderTimeFromDateTime(startTime);
const endURLTime = wubloaderTimeFromDateTime(endTime); const endURLTime = wubloaderTimeFromDateTime(endTime);
const queryParts = [`type=${downloadType}`, `allow_holes=${allowHoles}`]; const query = new URLSearchParams({
type: downloadType,
allow_holes: allowHoles
});
if (startURLTime) { if (startURLTime) {
queryParts.push(`start=${startURLTime}`); query.append("start", startURLTime);
} }
if (endURLTime) { 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; return downloadURL;
} }

Loading…
Cancel
Save