Add jump to chapter marker functionality

pull/308/head
ElementalAlchemist 2 years ago committed by Mike Lang
parent 85c4319f2a
commit 6b255f5018

@ -1407,6 +1407,8 @@ function rangePlayFromEndHandler(event) {
function chapterMarkerDefinitionDOM() {
const startFieldContainer = document.createElement("div");
startFieldContainer.classList.add("range-definition-chapter-marker-start-field");
const startField = document.createElement("input");
startField.type = "text";
startField.classList.add("range-definition-chapter-marker-start");
@ -1428,8 +1430,26 @@ function chapterMarkerDefinitionDOM() {
startTimeField.value = videoHumanTimeFromVideoPlayerTime(videoElement.currentTime);
});
const playFromStartTime = document.createElement("img");
playFromStartTime.src = "images/play_to.png";
playFromStartTime.alt = "Play from chapter start time";
playFromStartTime.title = playFromStartTime.alt;
playFromStartTime.classList.add("range-definition-chapter-marker-play-start");
playFromStartTime.classList.add("click");
playFromStartTime.addEventListener("click", (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;
}
});
startFieldContainer.appendChild(startField);
startFieldContainer.appendChild(setStartTime);
startFieldContainer.appendChild(playFromStartTime);
const descriptionField = document.createElement("input");
descriptionField.type = "text";

@ -273,6 +273,12 @@ a,
margin-left: 30px;
}
.range-definition-chapter-marker-start-field {
display: flex;
align-items: center;
gap: 4px;
}
.range-definition-chapter-marker-start {
width: 100px;
text-align: right;

Loading…
Cancel
Save