diff --git a/thrimbletrimmer/scripts/edit.js b/thrimbletrimmer/scripts/edit.js index 530ef82..1c8edf4 100644 --- a/thrimbletrimmer/scripts/edit.js +++ b/thrimbletrimmer/scripts/edit.js @@ -1382,6 +1382,35 @@ function rangeDefinitionDOM() { const rangeContainer = makeElement("div", ["range-definition-removable"]); + const transitionContainer = makeElement("div", ["range-transition"]); + + const transitionType = makeElement("select", ["range-transition-type"]); + // Always add the special-case hard cut option first. + transitionType.append( + makeElement("option", [], { + value: "", + textContent: "cut", + title: "A hard cut with no transition. Duration is ignored.", + }), + ...(videoInfo.transitions ?? []).map( + type => makeElement("option", [], { + value: type.name, + textContent: type.name, + title: type.description, + }) + ), + ); + const transitionDurationSection = makeElement("div", ["range-transition-duration-section"]); + if (transitionType.value == "") { + transitionDurationSection.classList.add("hidden"); + } + const transitionDuration = makeElement("input", ["range-transition-duration"], { + type: "text", + value: "1", + }); + transitionDurationSection.append(" over ", transitionDuration, " seconds"); + transitionContainer.append("Transition: ", transitionType, transitionDurationSection); + const rangeTimesContainer = makeElement("div", ["range-definition-times"]); const rangeStart = makeElement("input", ["range-definition-start"], {type: "text"}); const rangeStartSet = button( @@ -1494,6 +1523,7 @@ function rangeDefinitionDOM() { } rangeContainer.append( + transitionContainer, rangeTimesContainer, rangeChaptersContainer, rangeAddChapterElem, diff --git a/thrimbletrimmer/styles/thrimbletrimmer.css b/thrimbletrimmer/styles/thrimbletrimmer.css index 991a586..84be896 100644 --- a/thrimbletrimmer/styles/thrimbletrimmer.css +++ b/thrimbletrimmer/styles/thrimbletrimmer.css @@ -246,6 +246,14 @@ a.click { gap: 1px; } +.range-transition-duration-section { + display: inline-block; +} + +.range-transition-duration { + width: 50px; +} + .range-definition-times { display: flex; align-items: center;