Update scripts for wubloader endpoints supporting multiple ranges

thrimbletrimmer/scripts/common.js

@@ -141,19 +141,3 @@ function startAndEndTimeQueryStringParts() {
 	}
 	return queryStringParts;
 }
-
-function generateDownloadURL(startTime, endTime, downloadType, allowHoles, quality) {
-	const startURLTime = getWubloaderTimeFromDate(startTime);
-	const endURLTime = getWubloaderTimeFromDate(endTime);
-
-	const queryParts = [`type=${downloadType}`, `allow_holes=${allowHoles}`];
-	if (startURLTime) {
-		queryParts.push(`start=${startURLTime}`);
-	}
-	if (endURLTime) {
-		queryParts.push(`end=${endURLTime}`);
-	}
-
-	const downloadURL = `/cut/${globalStreamName}/${quality}.ts?${queryParts.join("&")}`;
-	return downloadURL;
-}

thrimbletrimmer/scripts/edit.js

@@ -95,8 +95,6 @@ window.addEventListener("DOMContentLoaded", async (event) => {
 
 	await loadVideoInfo();
 
-	updateDownloadLink();
-
 	document.getElementById("stream-time-setting-start-pad").addEventListener("click", (_event) => {
 		const startTimeField = document.getElementById("stream-time-setting-start");
 		let startTime = startTimeField.value;
@@ -352,33 +350,41 @@ async function initializeVideoInfo() {
 
 	const player = getVideoJS();
 	player.on("loadedmetadata", () => {
-		// 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.
 		const rangeDefinitionsContainer = document.getElementById("range-definitions");
-		const rangeDefinitionStart =
+		if (videoInfo.video_ranges && videoInfo.video_ranges.length > 0) {
-			rangeDefinitionsContainer.getElementsByClassName("range-definition-start")[0];
+			for (const rangeIndex = 0; rangeIndex < videoInfo.video_ranges.length; rangeIndex++) {
-		const rangeDefinitionEnd =
+				if (rangeIndex >= rangeDefinitionsContainer.children.length) {
-			rangeDefinitionsContainer.getElementsByClassName("range-definition-end")[0];
+					addRangeDefinition();
-		rangeDefinitionStart.addEventListener("change", (_event) => {
+				}
-			rangeDataUpdated();
+				const startWubloaderTime = videoInfo.video_ranges[rangeIndex][0];
-		});
+				const endWubloaderTime = videoInfo.video_ranges[rangeIndex][1];
-		rangeDefinitionEnd.addEventListener("change", (_event) => {
+				if (startWubloaderTime) {
-			rangeDataUpdated();
+					const startField =
-		});
+						rangeDefinitionsContainer.children[rangeIndex].getElementsByClassName(
-		if (videoInfo.video_start) {
+							"range-definition-start"
-			rangeDefinitionStart.value = videoHumanTimeFromWubloaderTime(videoInfo.video_start);
+						)[0];
-		} else {
+					startField.value = videoHumanTimeFromWubloaderTime(startWubloaderTime);
-			rangeDefinitionStart.value = videoHumanTimeFromVideoPlayerTime(0);
 				}
+				if (endWubloaderTime) {
+					const endField =
+						rangeDefinitionsContainer.children[rangeIndex].getElementsByClassName(
+							"range-definition-end"
+						)[0];
+					endField.value = videoHumanTimeFromWubloaderTime(endWubloaderTime);
+				}
+			}
+		} else {
+			const rangeStartField =
+				rangeDefinitionsContainer.getElementsByClassName("range-definition-start")[0];
+			rangeStartField.value = videoHumanTimeFromVideoPlayerTime(0);
 			if (videoInfo.video_end) {
-			rangeDefinitionEnd.value = videoHumanTimeFromWubloaderTime(videoInfo.video_end);
-		} else if (videoInfo.event_end) {
 				const player = getVideoJS();
-			rangeDefinitionEnd.value = videoHumanTimeFromVideoPlayerTime(player.duration());
+				const rangeEndField =
+					rangeDefinitionsContainer.getElementsByClassName("range-definition-end")[0];
+				rangeEndField.value = videoHumanTimeFromVideoPlayerTime(player.duration());
 			}
-		if (videoInfo.video_end || videoInfo.event_end) {
-			rangeDataUpdated();
 		}
+		rangeDataUpdated();
 	});
 	player.on("timeupdate", () => {
 		const player = getVideoJS();
@@ -514,9 +520,16 @@ async function sendVideoData(edited, overrideChanges) {
 		});
 	}
 
-	// Currently this only supports one range. When multiple ranges are supported, expand this.
+	const ranges = [];
-	const videoStart = rangesData[0].start;
+	const transitions = [];
-	const videoEnd = rangesData[0].end;
+	for (const range of rangesData) {
+		ranges.push([range.start, range.end]);
+		// In the future, handle transitions
+		transitions.push(null);
+	}
+	// The first range will never have a transition defined, so remove that one
+	transitions.shift();
+
 	const videoTitle = document.getElementById("video-info-title").value;
 	const videoDescription = document.getElementById("video-info-description").value;
 	const videoTags = document.getElementById("video-info-tags").value.split(",");
@@ -531,8 +544,8 @@ async function sendVideoData(edited, overrideChanges) {
 	const state = edited ? "EDITED" : "UNEDITED";
 
 	const editData = {
-		video_start: videoStart,
+		video_ranges: ranges,
-		video_end: videoEnd,
+		video_transitions: transitions,
 		video_title: videoTitle,
 		video_description: videoDescription,
 		video_tags: videoTags,
@@ -597,24 +610,46 @@ async function sendVideoData(edited, overrideChanges) {
 	}
 }
 
-function updateDownloadLink() {
+function generateDownloadURL(timeRanges, downloadType, allowHoles, quality) {
-	// Currently this only supports one range. When download links can download multiple ranges, this should be updated.
+	const queryParts = [`type=${downloadType}`, `allow_holes=${allowHoles}`];
-	const firstRangeStartField = document.getElementsByClassName("range-definition-start")[0];
+	for (const range of timeRanges) {
-	const firstRangeEndField = document.getElementsByClassName("range-definition-end")[0];
+		let timeRangeString = "";
+		if (range.hasOwnProperty("start")) {
+			timeRangeString += getWubloaderTimeFromDateWithMilliseconds(range.start);
+		}
+		timeRangeString += ",";
+		if (range.hasOwnProperty("end")) {
+			timeRangeString += getWubloaderTimeFromDateWithMilliseconds(range.end);
+		}
+		queryParts.push(`range=${timeRangeString}`);
+	}
 
-	const startTime = firstRangeStartField.value
+	const downloadURL = `/cut/${globalStreamName}/${quality}.ts?${queryParts.join("&")}`;
-		? wubloaderTimeFromVideoHumanTime(firstRangeStartField.value)
+	return downloadURL;
-		: getStartTime();
+}
-	const endTime = firstRangeEndField.value
-		? wubloaderTimeFromVideoHumanTime(firstRangeEndField.value)
-		: getEndTime();
 
+function updateDownloadLink() {
 	const downloadType = document.getElementById("download-type-select").value;
 	const allowHoles = document.getElementById("advanced-submission-option-allow-holes").checked;
 
+	const timeRanges = [];
+	for (const rangeContainer of document.getElementById("range-definitions").children) {
+		const startField = rangeContainer.getElementsByClassName("range-definition-start")[0];
+		const endField = rangeContainer.getElementsByClassName("range-definition-end")[0];
+		const timeRangeData = {};
+		const startTime = wubloaderTimeFromVideoHumanTime(startField.value);
+		if (startTime) {
+			timeRangeData.start = startTime;
+		}
+		const endTime = wubloaderTimeFromVideoHumanTime(endField.value);
+		if (endTime) {
+			timeRangeData.end = endTime;
+		}
+		timeRanges.push(timeRangeData);
+	}
+
 	const downloadURL = generateDownloadURL(
-		startTime,
+		timeRanges,
-		endTime,
 		downloadType,
 		allowHoles,
 		videoInfo.video_quality
@@ -810,6 +845,7 @@ function getRangeSetClickHandler(startOrEnd) {
 		const videoPlayerTime = player.currentTime();
 
 		setField.value = videoHumanTimeFromVideoPlayerTime(videoPlayerTime);
+		setField.dispatchEvent(new Event("change"));
 	};
 }
 

thrimbletrimmer/scripts/stream.js

@@ -87,6 +87,22 @@ function updateTimeSettings() {
 	}
 }
 
+function generateDownloadURL(startTime, endTime, downloadType, allowHoles, quality) {
+	const startURLTime = getWubloaderTimeFromDate(startTime);
+	const endURLTime = getWubloaderTimeFromDate(endTime);
+
+	const queryParts = [`type=${downloadType}`, `allow_holes=${allowHoles}`];
+	if (startURLTime) {
+		queryParts.push(`start=${startURLTime}`);
+	}
+	if (endURLTime) {
+		queryParts.push(`end=${endURLTime}`);
+	}
+
+	const downloadURL = `/cut/${globalStreamName}/${quality}.ts?${queryParts.join("&")}`;
+	return downloadURL;
+}
+
 function updateDownloadLink() {
 	const downloadLink = document.getElementById("download");
 	const downloadURL = generateDownloadURL(getStartTime(), getEndTime(), "rough", true, "source");