Improve draggable slider thumbs (wulkano#281)

Osub · Oct 31, 2017 · 4c148e0 · 4c148e0
1 parent 605e5c8
commit 4c148e0
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 28 deletions.
diff --git a/app/src/renderer/css/components/_slider.css b/app/src/renderer/css/components/_slider.css
@@ -10,22 +10,13 @@
   position: absolute;
   pointer-events: none;
   border: none;
+  height: 1.6rem;
   width: 100%;
   padding: 0;
   margin: 0;
+  padding-right: 1px;
 
-  &#trimmer-in::-webkit-slider-thumb {
-    background: white;
-    margin-left: 4px;
-  }
-  &#trimmer-out::-webkit-slider-thumb {
-    background: white;
-    margin-right: 4px;
-  }
-
-  &:focus {
-    outline: none;
-  }
+  &:focus { outline: none; }
 
   &::-ms-track {
     width: 100%;
@@ -39,20 +30,18 @@
   &::-webkit-slider-thumb {
     -webkit-appearance: none;
     pointer-events: auto;
-    transform: translateY(8px);
-    width: 8px;
-    height: 16px;
+    width: 2px;
+    height: 8px;
     border-radius: 8px;
-    transition: all .2s ease;
+    transition: all .12s ease;
+    background: white;
 
     &:hover {
       cursor: -webkit-grab;
-      height: 24px;
     }
 
     &:active {
       cursor: -webkit-grabbing;
-      height: 32px;
     }
   }
 }
diff --git a/app/src/renderer/css/editor.css b/app/src/renderer/css/editor.css
@@ -60,11 +60,18 @@ main.content {
     .c-progress.editor-progress {
       width: 60%;
       left: 50%;
-      padding: 0 7px;
       transform: translateX(-50%);
       bottom: 26px;
       border-radius: 4px;
     }
+
+    .timeline-markers {
+      left: 50%;
+      transform: translateX(-50%);
+      width: 60%;
+      bottom: 20px;
+      height: 16px;
+    }
   }
 }
 
@@ -146,19 +153,23 @@ video {
   transition: 200ms ease-out transform;
 }
 
-.timeline-container {
-  cursor: pointer;
+.timeline-container { cursor: pointer; }
+
+.timeline-container:hover .timeline-markers .slider::-webkit-slider-thumb {
+  width: 4px;
+  height: 24px;
 }
 
 .timeline-markers {
   opacity: 0;
   transition: opacity .12s ease-in-out;
-  position: absolute;
-  width: 60%;
+  width: 100%;
   height: 100%;
-  transform: translateX(-50%);
-  top: 6px;
+  position: absolute;
+  left: 0;
+  bottom: 0;
   -webkit-app-region: no-drag;
+  transition: .12s ease-in-out;
 }
 
 section.output {

diff --git a/app/src/renderer/js/editor.js b/app/src/renderer/js/editor.js
@@ -39,6 +39,7 @@ document.addEventListener('DOMContentLoaded', () => {
   let lastValidInputWidth;
   let lastValidInputHeight;
   let aspectRatioBaseValues;
+  let currentPreviewDuration;
 
   handleTrafficLightsClicks({hide: true});
   handleActiveButtonGroup({buttonGroup: fps15Btn.parentNode});
@@ -50,6 +51,7 @@ document.addEventListener('DOMContentLoaded', () => {
     [inputWidth.value, inputHeight.value] = aspectRatioBaseValues;
     [lastValidInputWidth, lastValidInputHeight] = aspectRatioBaseValues;
 
+    currentPreviewDuration = preview.duration;
     progressBar.max = preview.duration;
     setInterval(() => {
       const inValue = getTrimmerValue(trimmerIn);
@@ -92,7 +94,7 @@ document.addEventListener('DOMContentLoaded', () => {
     if (preview.duration) {
       const timeAtEvent = getTimestampAtEvent(event, preview.duration);
       previewTimeTip.style.left = `${event.pageX}px`;
-      previewTimeTip.textContent = `${moment().startOf('day').milliseconds(timeAtEvent * 1000).format('m:ss.SS')}`;
+      previewTimeTip.textContent = `${moment().startOf('day').milliseconds(timeAtEvent * 1000).format('m:ss.SS')} (${moment().startOf('day').milliseconds(currentPreviewDuration * 1000).format('m:ss.SS')})`;
     }
   }
 
@@ -105,6 +107,13 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   }
 
+  function getTrimmedVideoDuration() {
+    const inValue = getTrimmerValue(trimmerIn);
+    const outValue = getTrimmerValue(trimmerOut);
+    currentPreviewDuration = outValue - inValue;
+    return currentPreviewDuration;
+  }
+
   maximizeBtn.onclick = function () {
     this.classList.add('hidden');
     unmaximizeBtn.classList.remove('hidden');
@@ -303,9 +312,11 @@ document.addEventListener('DOMContentLoaded', () => {
 
     trimmerIn.oninput = () => {
       handleTrimmerInput(trimmerIn.id);
+      getTrimmedVideoDuration();
     };
     trimmerOut.oninput = () => {
       handleTrimmerInput(trimmerOut.id);
+      getTrimmedVideoDuration();
     };
     trimmerIn.onchange = play;
     trimmerOut.onchange = play;

diff --git a/app/src/renderer/views/editor.pug b/app/src/renderer/views/editor.pug
@@ -20,8 +20,8 @@ block body
         label.progress-bar-time-tip.js-video-time-tip.txt(for='progress-bar') 00:00
         progress.c-progress.c-progress__transparent.editor-progress(max='100' value=0)
         .timeline-markers
-          input.slider#trimmer-in(type="range", step="0.00001")
-          input.slider#trimmer-out(type="range", step="0.00001")
+          input.slider#trimmer-in(type="range" step="0.00001")
+          input.slider#trimmer-out(type="range" step="0.00001")
       .video-controls-right
         a.video__maximize-button.js-maximize-video
           +icon('fullscreen')