diff --git a/thrimbletrimmer/scripts/edit.js b/thrimbletrimmer/scripts/edit.js index 43fd2b9..a2d7389 100644 --- a/thrimbletrimmer/scripts/edit.js +++ b/thrimbletrimmer/scripts/edit.js @@ -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"; diff --git a/thrimbletrimmer/styles/thrimbletrimmer.css b/thrimbletrimmer/styles/thrimbletrimmer.css index 7557f62..27074a2 100644 --- a/thrimbletrimmer/styles/thrimbletrimmer.css +++ b/thrimbletrimmer/styles/thrimbletrimmer.css @@ -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;