diff --git a/thrimbletrimmer/edit.html b/thrimbletrimmer/edit.html
index 912a66d..6ed4bfb 100644
--- a/thrimbletrimmer/edit.html
+++ b/thrimbletrimmer/edit.html
@@ -98,6 +98,11 @@
alt="Set range end point to current video time"
class="range-definition-set-end click"
/>
+
{
for (const rangeStartPlay of document.getElementsByClassName("range-definition-play-start")) {
rangeStartPlay.addEventListener("click", rangePlayFromStartHandler);
}
+ for (const rangeEndPlay of document.getElementsByClassName("range-definition-play-end")) {
+ rangeEndPlay.addEventListener("click", rangePlayFromEndHandler);
+ }
for (const rangeStart of document.getElementsByClassName("range-definition-start")) {
rangeStart.addEventListener("change", (_event) => {
rangeDataUpdated();
@@ -765,6 +768,11 @@ function rangeDefinitionDOM() {
rangeEndSet.alt = "Set range end point to current video time";
rangeEndSet.classList.add("range-definition-set-end");
rangeEndSet.classList.add("click");
+ const rangeEndPlay = document.createElement("img");
+ rangeEndPlay.src = "images/play_to.png";
+ rangeEndPlay.alt = "Play from end point";
+ rangeEndPlay.classList.add("range-definition-play-end");
+ rangeEndPlay.classList.add("click");
const removeRange = document.createElement("img");
removeRange.alt = "Remove range";
removeRange.src = "images/minus.png";
@@ -774,6 +782,7 @@ function rangeDefinitionDOM() {
rangeStartSet.addEventListener("click", getRangeSetClickHandler("start"));
rangeStartPlay.addEventListener("click", rangePlayFromStartHandler);
rangeEndSet.addEventListener("click", getRangeSetClickHandler("end"));
+ rangeEndPlay.addEventListener("click", rangePlayFromEndHandler);
removeRange.addEventListener("click", (event) => {
let rangeContainer = event.currentTarget;
@@ -810,6 +819,7 @@ function rangeDefinitionDOM() {
rangeContainer.appendChild(rangeTimeGap);
rangeContainer.appendChild(rangeEnd);
rangeContainer.appendChild(rangeEndSet);
+ rangeContainer.appendChild(rangeEndPlay);
rangeContainer.appendChild(removeRange);
rangeContainer.appendChild(currentRangeMarker);
@@ -870,6 +880,19 @@ function rangePlayFromStartHandler(event) {
player.currentTime(startTime);
}
+function rangePlayFromEndHandler(event) {
+ const playButton = event.currentTarget;
+ const endField = playButton.parentElement.getElementsByClassName("range-definition-end")[0];
+ const endTime = videoPlayerTimeFromVideoHumanTime(endField.value);
+ if (endTime === null) {
+ addError("Couldn't play from range end; failed to parse time");
+ return;
+ }
+
+ const player = getVideoJS();
+ player.currentTime(endTime);
+}
+
function rangeDataUpdated() {
const clipBar = document.getElementById("clip-bar");
clipBar.innerHTML = "";