From 609597a5477b2b77f3de5b017a7e1511d381830f Mon Sep 17 00:00:00 2001
From: ElementalAlchemist <ElementAlchemist7@gmail.com>
Date: Tue, 19 Oct 2021 23:30:33 -0500
Subject: [PATCH] Add a way to jump player time to a range start point

---
 thrimbletrimmer/edit.html          |   5 +++++
 thrimbletrimmer/images/play_to.png | Bin 0 -> 637 bytes
 thrimbletrimmer/scripts/edit.js    |  26 ++++++++++++++++++++++++--
 3 files changed, 29 insertions(+), 2 deletions(-)
 create mode 100644 thrimbletrimmer/images/play_to.png

diff --git a/thrimbletrimmer/edit.html b/thrimbletrimmer/edit.html
index 7a4b990..c700de6 100644
--- a/thrimbletrimmer/edit.html
+++ b/thrimbletrimmer/edit.html
@@ -86,6 +86,11 @@
 					alt="Set range start point to current video time"
 					class="range-definition-set-start click"
 				/>
+				<img
+					src="images/play_to.png"
+					alt="Play from start point"
+					class="range-definition-play-start click"
+				/>
 				<div class="range-definition-between-time-gap"></div>
 				<input type="text" class="range-definition-end" />
 				<img
diff --git a/thrimbletrimmer/images/play_to.png b/thrimbletrimmer/images/play_to.png
new file mode 100644
index 0000000000000000000000000000000000000000..54995bee30df484b963d867b1c230376022d569f
GIT binary patch
literal 637
zcmV-@0)qXCP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV0004mX+uL$Nkc;*
zaB^>EX>4Tx04R}tkv&MmKpe$iTSX}q2Q!E`M5s<Jh>AFB6^c+H)C#RSm|Xe=O&XFE
z7e~Rh;NZt%)xpJCR|i)?5c~jfb8}L3krMxx6k5c1aNLh~_a1lefMBD-G^=YI&~)2O
zClg{ew<`9$A`Af`#4sW=%b1g-6nw|mJpz2ai}Ni1bAOILHE%H>AQI0q!?cMvh^IGg
zgY!PIz)G@8d`=uQ>4L<MTvt4P<6Lw($TI~qlb$CQh{a+DD;>;ArbawP991=)@`G8A
zRnA+SwMvb(?#W*m$?Gf2T&FpVBo?s*2_h8KP(}qd;<W0dSV+@;!pA@4`XzEH<SK)a
zV*yoYkX=9cAN=mtDojpzNs$E5{o*(uqd?Ct(5ySo_p#$NPk_)faHY5X)dn#0NqW7l
zMUQ~~ZQ$a%ttorJ<qk0TWXPuMN+FuTLIHR`qi@Oq1GhkU&FihTkJASrLtUkAfP+I|
ztVr4GKJV`B?Csw(t^R%he~5Cdn*!qF00006VoOIv0RI600RN!9r;`8x010qNS#tmY
zE+YT{E+YYWr9XB6000McNliru<q8x7E*J&7*V_O902y>eSad^gZEa<4bO1wgWnpw>
zWFU8GbZ8()Nlj2!fese{0031<L_t(I%camk62Kq`L(w#c&7rugT{~I`l&${f2qY~@
z3&~{XbS`B>_azIMAng9x0y+q%+qVD*A%0E?M8q=&syGFl_!DsBE6|A#pc`+%BnE&N
Xvi%~mUEq+200000NkvXXu0mjfaCZf;

literal 0
HcmV?d00001

diff --git a/thrimbletrimmer/scripts/edit.js b/thrimbletrimmer/scripts/edit.js
index dd85c2d..30f58fe 100644
--- a/thrimbletrimmer/scripts/edit.js
+++ b/thrimbletrimmer/scripts/edit.js
@@ -133,6 +133,9 @@ window.addEventListener("DOMContentLoaded", async (event) => {
 	for (const rangeEndSet of document.getElementsByClassName("range-definition-set-end")) {
 		rangeEndSet.addEventListener("click", getRangeSetClickHandler("end"));
 	}
+	for (const rangeStartPlay of document.getElementsByClassName("range-definition-play-start")) {
+		rangeStartPlay.addEventListener("click", rangePlayFromStartHandler);
+	}
 	for (const rangeStart of document.getElementsByClassName("range-definition-start")) {
 		rangeStart.addEventListener("change", (_event) => {
 			rangeDataUpdated();
@@ -811,6 +814,11 @@ function rangeDefinitionDOM() {
 	rangeStartSet.alt = "Set range start point to current video time";
 	rangeStartSet.classList.add("range-definition-set-start");
 	rangeStartSet.classList.add("click");
+	const rangeStartPlay = document.createElement("img");
+	rangeStartPlay.src = "images/play_to.png";
+	rangeStartPlay.alt = "Play from start point";
+	rangeStartPlay.classList.add("range-definition-play-start");
+	rangeStartPlay.classList.add("click");
 	const rangeTimeGap = document.createElement("div");
 	rangeTimeGap.classList.add("range-definition-between-time-gap");
 	const rangeEnd = document.createElement("input");
@@ -828,7 +836,7 @@ function rangeDefinitionDOM() {
 	removeRange.classList.add("click");
 
 	rangeStartSet.addEventListener("click", getRangeSetClickHandler("start"));
-
+	rangeStartPlay.addEventListener("click", rangePlayFromStartHandler);
 	rangeEndSet.addEventListener("click", getRangeSetClickHandler("end"));
 
 	removeRange.addEventListener("click", (event) => {
@@ -862,6 +870,7 @@ function rangeDefinitionDOM() {
 
 	rangeContainer.appendChild(rangeStart);
 	rangeContainer.appendChild(rangeStartSet);
+	rangeContainer.appendChild(rangeStartPlay);
 	rangeContainer.appendChild(rangeTimeGap);
 	rangeContainer.appendChild(rangeEnd);
 	rangeContainer.appendChild(rangeEndSet);
@@ -874,7 +883,7 @@ function rangeDefinitionDOM() {
 }
 
 function getRangeSetClickHandler(startOrEnd) {
-	return function (event) {
+	return (event) => {
 		const setButton = event.currentTarget;
 		const setField = setButton.parentElement.getElementsByClassName(
 			`range-definition-${startOrEnd}`
@@ -913,6 +922,19 @@ function updateCurrentRangeIndicator() {
 		.classList.remove("hidden");
 }
 
+function rangePlayFromStartHandler(event) {
+	const playButton = event.currentTarget;
+	const startField = playButton.parentElement.getElementsByClassName("range-definition-start")[0];
+	const startTime = videoPlayerTimeFromVideoHumanTime(startField.value);
+	if (startTime === null) {
+		addError("Couldn't play from range start: failed to parse time");
+		return;
+	}
+
+	const player = getVideoJS();
+	player.currentTime(startTime);
+}
+
 function rangeDataUpdated() {
 	const clipBar = document.getElementById("clip-bar");
 	clipBar.innerHTML = "";