Fix issues with updating the ranges when the time range updates

There were a couple issues with this:
- The range data was updated in the wrong direction
- If no adjustments were made, the problem was masked by the range data reapplying from draft data. However, if adjustments were made, the adjustments were overwritten (or, if ranges were added, partially overwritten) by the defaults.

thrimbletrimmer/scripts/edit.js

@@ -1,6 +1,7 @@
 var googleUser = null;
 var videoInfo;
 var currentRange = 1;
+var globalLoadedRangeData = false;
 
 window.addEventListener("DOMContentLoaded", async (event) => {
 	commonPageSetup();
@@ -39,9 +40,9 @@ window.addEventListener("DOMContentLoaded", async (event) => {
 
 		// The video duration isn't precisely the video times, but can be padded by up to the
 		// segment length on either side.
-		// This makes the assumption that all segments have the same length.
+		const segmentList = getPlaylistData().segments;
-		const segmentLength = getPlaylistData().segments[0].duration;
+		newDuration += segmentList[0].duration;
-		newDuration += segmentLength * 2;
+		newDuration += segmentList[segmentList.length - 1].duration;
 
 		// Abort for ranges that exceed new times
 		for (const rangeContainer of document.getElementById("range-definitions").children) {
@@ -74,14 +75,14 @@ window.addEventListener("DOMContentLoaded", async (event) => {
 			if (rangeStart === null) {
 				rangeErrorCount++;
 			} else {
-				rangeStartField.value = videoHumanTimeFromVideoPlayerTime(startAdjustment + rangeStart);
+				rangeStartField.value = videoHumanTimeFromVideoPlayerTime(rangeStart - startAdjustment);
 			}
 
 			const rangeEnd = videoPlayerTimeFromVideoHumanTime(rangeEndField.value);
 			if (rangeEnd === null) {
 				rangeErrorCount++;
 			} else {
-				rangeEndField.value = videoHumanTimeFromVideoPlayerTime(startAdjustment + rangeEnd);
+				rangeEndField.value = videoHumanTimeFromVideoPlayerTime(rangeEnd - startAdjustment);
 			}
 		}
 		if (rangeErrorCount > 0) {
@@ -89,6 +90,7 @@ window.addEventListener("DOMContentLoaded", async (event) => {
 				"Some ranges couldn't be updated for the new video time endpoints. Please verify the time range values."
 			);
 		}
+		rangeDataUpdated();
 
 		const waveformImage = document.getElementById("waveform");
 		if (newEnd === null) {
@@ -376,40 +378,43 @@ async function initializeVideoInfo() {
 
 	const player = getVideoJS();
 	player.on("loadedmetadata", () => {
-		const rangeDefinitionsContainer = document.getElementById("range-definitions");
+		if (!globalLoadedRangeData) {
-		if (videoInfo.video_ranges && videoInfo.video_ranges.length > 0) {
+			const rangeDefinitionsContainer = document.getElementById("range-definitions");
-			for (let rangeIndex = 0; rangeIndex < videoInfo.video_ranges.length; rangeIndex++) {
+			if (videoInfo.video_ranges && videoInfo.video_ranges.length > 0) {
-				if (rangeIndex >= rangeDefinitionsContainer.children.length) {
+				for (let rangeIndex = 0; rangeIndex < videoInfo.video_ranges.length; rangeIndex++) {
-					addRangeDefinition();
+					if (rangeIndex >= rangeDefinitionsContainer.children.length) {
-				}
+						addRangeDefinition();
-				const startWubloaderTime = videoInfo.video_ranges[rangeIndex][0];
+					}
-				const endWubloaderTime = videoInfo.video_ranges[rangeIndex][1];
+					const startWubloaderTime = videoInfo.video_ranges[rangeIndex][0];
-				if (startWubloaderTime) {
+					const endWubloaderTime = videoInfo.video_ranges[rangeIndex][1];
-					const startField =
+					if (startWubloaderTime) {
-						rangeDefinitionsContainer.children[rangeIndex].getElementsByClassName(
+						const startField =
-							"range-definition-start"
+							rangeDefinitionsContainer.children[rangeIndex].getElementsByClassName(
-						)[0];
+								"range-definition-start"
-					startField.value = videoHumanTimeFromWubloaderTime(startWubloaderTime);
+							)[0];
+						startField.value = videoHumanTimeFromWubloaderTime(startWubloaderTime);
+					}
+					if (endWubloaderTime) {
+						const endField =
+							rangeDefinitionsContainer.children[rangeIndex].getElementsByClassName(
+								"range-definition-end"
+							)[0];
+						endField.value = videoHumanTimeFromWubloaderTime(endWubloaderTime);
+					}
 				}
-				if (endWubloaderTime) {
+			} else {
-					const endField =
+				const rangeStartField =
-						rangeDefinitionsContainer.children[rangeIndex].getElementsByClassName(
+					rangeDefinitionsContainer.getElementsByClassName("range-definition-start")[0];
-							"range-definition-end"
+				rangeStartField.value = videoHumanTimeFromWubloaderTime(globalStartTimeString);
-						)[0];
+				if (globalEndTimeString) {
-					endField.value = videoHumanTimeFromWubloaderTime(endWubloaderTime);
+					const rangeEndField =
+						rangeDefinitionsContainer.getElementsByClassName("range-definition-end")[0];
+					rangeEndField.value = videoHumanTimeFromWubloaderTime(globalEndTimeString);
 				}
 			}
-		} else {
+			rangeDataUpdated();
-			const rangeStartField =
+			globalLoadedRangeData = true;
-				rangeDefinitionsContainer.getElementsByClassName("range-definition-start")[0];
-			rangeStartField.value = videoHumanTimeFromWubloaderTime(globalStartTimeString);
-			if (globalEndTimeString) {
-				const rangeEndField =
-					rangeDefinitionsContainer.getElementsByClassName("range-definition-end")[0];
-				rangeEndField.value = videoHumanTimeFromWubloaderTime(globalEndTimeString);
-			}
 		}
-		rangeDataUpdated();
 	});
 	player.on("timeupdate", () => {
 		const player = getVideoJS();