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.
pull/361/head
ElementalAlchemist 1 year ago committed by Mike Lang
parent 2ae273a75c
commit d979b40d9f

@ -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>

@ -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();
}

@ -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;
}

Loading…
Cancel
Save