Fix jumping to the first chapter marker location (#363)

thrimbletrimmer/edit.html

@@ -179,6 +179,7 @@
 										alt="Play from chapter start time"
 										title="Play from chapter start time"
 										class="range-definition-chapter-marker-play-start click"
+										id="range-definition-chapter-marker-first-play-start"
 									/>
 								</div>
 								<input

thrimbletrimmer/scripts/edit.js

@@ -689,6 +689,16 @@ async function initializeVideoInfo() {
 				rangeEndField.value = videoHumanTimeFromWubloaderTime(globalEndTimeString);
 			}
 		}
+
+		const firstChapterPlayFromStartTime = document.getElementById(
+			"range-definition-chapter-marker-first-play-start",
+		);
+		if (canEditMetadata()) {
+			firstChapterPlayFromStartTime.addEventListener("click", chapterMarkerPlayStartTimeHandler);
+		} else {
+			firstChapterPlayFromStartTime.classList.add("hidden");
+		}
+
 		rangeDataUpdated();
 		videoElement.removeEventListener("loadedmetadata", handleInitialSetupForDuration);
 	};
@@ -1581,17 +1591,7 @@ function chapterMarkerDefinitionDOM() {
 	playFromStartTime.classList.add("click");
 
 	if (canEditMetadata()) {
-		playFromStartTime.addEventListener("click", (event) => {
+		playFromStartTime.addEventListener("click", chapterMarkerPlayStartTimeHandler);
-			const chapterContainer = event.currentTarget.parentElement;
-			const startTimeField = chapterContainer.getElementsByClassName(
-				"range-definition-chapter-marker-start",
-			)[0];
-			const newVideoTime = videoPlayerTimeFromVideoHumanTime(startTimeField.value);
-			if (newVideoTime !== null) {
-				const videoElement = document.getElementById("video");
-				videoElement.currentTime = newVideoTime;
-			}
-		});
 	} else {
 		playFromStartTime.classList.add("hidden");
 	}
@@ -1640,6 +1640,18 @@ function addChapterMarkerHandler(event) {
 	}
 }
 
+function chapterMarkerPlayStartTimeHandler(event) {
+	const chapterContainer = event.currentTarget.parentElement;
+	const startTimeField = chapterContainer.getElementsByClassName(
+		"range-definition-chapter-marker-start",
+	)[0];
+	const newVideoTime = videoPlayerTimeFromVideoHumanTime(startTimeField.value);
+	if (newVideoTime !== null) {
+		const videoElement = document.getElementById("video");
+		videoElement.currentTime = newVideoTime;
+	}
+}
+
 async function rangeDataUpdated() {
 	const clipBar = document.getElementById("clip-bar");
 	clipBar.innerHTML = "";