Make the first chapter marker uneditable and tie it to the first range start time

This is a more usable enforcement of the requirement that YouTube enforces for the first chapter to be at the exact beginning of the video.

thrimbletrimmer/edit.html

@@ -164,7 +164,31 @@
 								class="range-definition-current"
 							/>
 						</div>
-						<div class="range-definition-chapter-markers hidden"></div>
+						<div class="range-definition-chapter-markers hidden">
+							<div>
+								<div class="range-definition-chapter-marker-start-field">
+									<input
+										type="text"
+										class="range-definition-chapter-marker-start"
+										id="range-definition-chapter-marker-first-start"
+										disabled
+									/>
+									<div class="range-definition-chapter-marker-edit-gap"></div>
+									<img
+										src="images/play_to.png"
+										alt="Play from chapter start time"
+										title="Play from chapter start time"
+										class="range-definition-chapter-marker-play-start click"
+									/>
+								</div>
+								<input
+									type="text"
+									class="range-definition-chapter-marker-description"
+									id="range-definition-chapter-marker-first-description"
+									placeholder="Description"
+								/>
+							</div>
+						</div>
 						<img
 							src="images/plus.png"
 							alt="Add chapter marker"
@@ -282,15 +306,9 @@
 			<div id="download">
 				<label for="download-type-select">Download type:</label>
 				<select id="download-type-select">
-					<option value="smart" selected>
-						Smart (experimental but preferred option)
-					</option>
-					<option value="rough">
-						Rough (raw content, pads start and end by a few seconds)
-					</option>
-					<option value="fast">
-						Fast (deprecated, use if smart is broken)
-					</option>
+					<option value="smart" selected>Smart (experimental but preferred option)</option>
+					<option value="rough">Rough (raw content, pads start and end by a few seconds)</option>
+					<option value="fast">Fast (deprecated, use if smart is broken)</option>
 					<option value="mpegts">MPEG-TS (slow, consumes server resources)</option>
 				</select>
 				<a id="download-link">Download Video</a>

thrimbletrimmer/scripts/edit.js

@@ -631,6 +631,21 @@ async function initializeVideoInfo() {
 					const chapterContainer = rangeDefinitionsContainer.children[
 						rangeIndex
 					].getElementsByClassName("range-definition-chapter-markers")[0];
+
+					if (currentChapterIndex === 0) {
+						const chapterStartField = document.getElementById(
+							"range-definition-chapter-marker-first-start",
+						);
+						const chapterDescField = document.getElementById(
+							"range-definition-chapter-marker-first-description",
+						);
+						chapterStartField.value = videoHumanTimeFromVideoPlayerTime(
+							chapterData[currentChapterIndex].start - rangeStartOffset + startPlayerTime,
+						);
+						chapterDescField.value = chapterData[currentChapterIndex].description;
+						currentChapterIndex++;
+					}
+
 					while (
 						currentChapterIndex < chapterData.length &&
 						chapterData[currentChapterIndex].start < rangeEndVideoTime
@@ -1643,6 +1658,13 @@ async function rangeDataUpdated() {
 			clipBar.appendChild(marker);
 		}
 	}
+
+	const firstRangeStartField = document.getElementsByClassName("range-definition-start")[0]; // There should always be a first one
+	const firstChapterStartField = document.getElementById(
+		"range-definition-chapter-marker-first-start",
+	);
+	firstChapterStartField.value = firstRangeStartField.value;
+
 	updateDownloadLink();
 }
 

thrimbletrimmer/styles/thrimbletrimmer.css

@@ -288,6 +288,10 @@ a.click {
 	text-align: right;
 }
 
+.range-definition-chapter-marker-edit-gap {
+	width: 16px;
+}
+
 input.range-definition-chapter-marker-description {
 	width: 500px;
 }