jumping a/b slider handles fixed

agrahn · Nov 15, 2023 · d7f6d87 · d7f6d87
1 parent ad821fb
commit d7f6d87
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 35 deletions.
diff --git a/ABLoopPlayer.html b/ABLoopPlayer.html
@@ -55,7 +55,7 @@
   <link rel="preload" type="image/svg+xml" href="svg/comment.svg" as="image"/>
 </head>
 
-<body style="margin-left:1em;margin-right:1em;min-width:max-content;display:inline-block;font-family:serif;">
+<body style="margin-left:16px;margin-right:16px;min-width:max-content;display:inline-block;font-family:serif;">
 
 <h1 style="font-size:150%;margin-top:0;margin-bottom:0.5em;">AB Loop Player</h1>
 <div id="mainDiv" hidden>

diff --git a/css/main.css b/css/main.css
@@ -32,20 +32,32 @@ hr.double {
   height: 3px; border: 1px solid #888;
 }
 
-#slider {border-width: 1px;}
+#slider {
+  border-width: 1px;
+  height: 15px;
+}
 
 #slider .ui-slider-handle {
   text-align: center;
-  height: 1em; width: 1em; top: 0px;
+  height: 15px; width: 0em; top: 0px;
   border: 0px;
   padding: 0;
   color: #000000;
+  margin-left: 0;
+  margin-right: 0;
 }
 
-#slider .ui-slider-handle:focus {
-  background-color: #fcc;
+.abhandle {
+  display: inline-block;
+  width:16px;
+  height:15px;
 }
 
+/* #slider .ui-slider-handle:focus {
+  background-color: #fcc;
+  background: none;
+} */
+
 #slider .ui-state-default {
   background: none;
 }
@@ -54,7 +66,10 @@ hr.double {
   background-color: #888;
 }
 
-#scrub {border-width: 1px;}
+#scrub {
+  border-width: 1px;
+  height: 6px;
+}
 
 #scrub .ui-slider-range {
   background-color: #F00;

diff --git a/js/main.js b/js/main.js
@@ -86,7 +86,7 @@ var YTids, introTextBr, inputYT, inputVT, ytPlayer, help, searchButtonYT,
   aonly, intro, myTimeA, myTimeB, myBookmarks, loopButton, bmkAddButton,
   loopBackwardsButton, loopHalveButton, loopDoubleButton, loopForwardsButton,
   annotButton, trashButton, tapButton, importButton, exportButton, shareButton,
-  quant;
+  quant, handleA, handleB;
 
 $(document).ready(function(){
   $("#introText").width($("#widthA").width()+1);
@@ -103,6 +103,7 @@ $(document).ready(function(){
   YTids=document.getElementById("YTids");
   help=document.getElementById("help");
   searchButtonYT=document.getElementById("searchButtonYT");
+  searchButtonYT.focus();
   inputVT=document.getElementById("inputVT");
   aonly=document.getElementById("aonly");
   intro=document.getElementById("intro");
@@ -157,7 +158,6 @@ $(document).ready(function(){
       setCurrentTime(ui.value);
     },
   })
-  $("#scrub").css("height", "6px").hide();
   $("#slider").slider({
     min: 0,
     step: 0.005,
@@ -166,9 +166,16 @@ $(document).ready(function(){
     slide: function(e,ui){onSliderSlide(e,ui);},
     change: function(e,ui){onSliderChange(e,ui);},
   });
-  $("#slider").css("height", "1em");
-  $("#slider .ui-slider-handle").first().css("margin-left", "-1em").text("A");
-  $("#slider .ui-slider-handle").last().css("margin-left", "0em").text("B");
+  $("#slider .ui-slider-handle").first().html(
+    '<span id="handleA" class="abhandle" style="margin-left: -16px;">'+'A'+'</span>'
+  ).focus(0,()=>{handleA.style.backgroundColor="#fcc";})
+   .on("blur", ()=>{handleA.style.background="none";});
+  $("#slider .ui-slider-handle").last().html(
+    '<span id="handleB" class="abhandle" style="margin-right: -16px;">'+'B'+'</span>'
+  ).focus(0,()=>{handleB.style.backgroundColor="#fcc";})
+   .on("blur", ()=>{handleB.style.background="none";});
+  handleA=document.getElementById("handleA");
+  handleB=document.getElementById("handleB");
   if(storage.getItem("ab.help")!="unchecked") help.checked=true;
   contextHelp(help);
   if(storage.getItem("ab.aonly")=="checked") aonly.checked=true;
@@ -241,7 +248,7 @@ window.addEventListener("keydown", function(e){
     && !$("select").is(":focus")
   ){try{
     let t=getCurrentTime()+5;
-    if(isPlaying() && isTimeBSet && t>timeB){
+    if(isPlaying() && isTimeBSet && t>=timeB){
       pauseVideo();
       setCurrentTime(timeA);
       doAfterSeek(playVideo, timeA);
@@ -402,37 +409,34 @@ var onSliderStart=function(e,ui){
 }
 
 var onSliderChange=function(e,ui){
-  timeA=ui.values[0];
-  timeB=ui.values[1];
-  myTimeA.value=secToTimeString(Math.max(timeA,0));
-  myTimeB.value=secToTimeString(Math.min(timeB,getDuration()));
+  if(ui.handleIndex==0){
+    timeA=ui.values[0];
+    myTimeA.value=secToTimeString(Math.max(timeA,0));
+  }
+  else{
+    timeB=ui.values[1];
+    myTimeB.value=secToTimeString(Math.min(timeB,getDuration()));
+  }
   loopMeas.splice(0);
 }
 
 var onSliderSlide=function(e,ui){
+  e.preventDefault();
   if(e.ctrlKey){
     if(ui.handleIndex==0){
-      if(timeB>=getDuration()-0.005) {
-        e.preventDefault();
-        timeA=getDuration()-dtAB;
-        timeB=getDuration();
-      }else{
-        timeA=ui.values[0];
-        timeB=timeA+dtAB;
-      }
+      ui.values[0]=Math.min(getDuration()-dtAB,ui.values[0]);
+      timeA=ui.values[0];
+      timeB=timeA+dtAB;
     }else{
-      if(timeA<=0.005) {
-        e.preventDefault();
-        timeA=0;
-        timeB=dtAB;
-      }else{
-        timeB=ui.values[1];
-        timeA=timeB-dtAB;
-      }
+      ui.values[1]=Math.max(dtAB,ui.values[1]);
+      timeB=ui.values[1];
+      timeA=timeB-dtAB;
     }
-  }else{
-    timeA=ui.values[0];
-    timeB=ui.values[1];
+  }
+  else{
+    if(ui.handleIndex==0) timeA=ui.values[0];
+    else timeB=ui.values[1];
+    dtAB=timeB-timeA;
   }
   loopMeas.splice(0);
   updateLoopUI();

diff --git a/zip/ABLoopPlayer.zip b/zip/ABLoopPlayer.zip