Use slider to round and limit offset

src/components/subtitlesync/subtitlesync.js

@@ -46,15 +46,8 @@ function init(instance) {
             if (inputOffset) {
                 inputOffset = inputOffset[0];
                 inputOffset = parseFloat(inputOffset);
-                inputOffset = Math.min(30, Math.max(-30, inputOffset));
 
-                // replace current text by considered offset
+                subtitleSyncSlider.updateOffset(inputOffset);
-                this.textContent = inputOffset + 's';
-                // set new offset
-                playbackManager.setSubtitleOffset(inputOffset, player);
-                // synchronize with slider value
-                subtitleSyncSlider.updateOffset(
-                    getSliderValueFromOffset(inputOffset));
             } else {
                 this.textContent = (playbackManager.getPlayerSubtitleOffset(player) || 0) + 's';
             }
@@ -79,23 +72,26 @@ function init(instance) {
         }
     };
 
+    function updateSubtitleOffset() {
+        const value = parseFloat(subtitleSyncSlider.value);
+        // set new offset
+        playbackManager.setSubtitleOffset(value, player);
+        // synchronize with textField value
+        subtitleSyncTextField.updateOffset(value);
+    }
+
     subtitleSyncSlider.updateOffset = function (sliderValue) {
         // default value is 0s = 0ms
         this.value = sliderValue === undefined ? 0 : sliderValue;
+
+        updateSubtitleOffset();
     };
 
-    subtitleSyncSlider.addEventListener('change', function () {
+    subtitleSyncSlider.addEventListener('change', () => updateSubtitleOffset());
-        // set new offset
-        playbackManager.setSubtitleOffset(getOffsetFromSliderValue(this.value), player);
-        // synchronize with textField value
-        subtitleSyncTextField.updateOffset(
-            getOffsetFromSliderValue(this.value));
-    });
 
-    subtitleSyncSlider.getBubbleHtml = function (value) {
+    subtitleSyncSlider.getBubbleHtml = function (_, value) {
-        const newOffset = getOffsetFromPercentage(value);
         return '<h1 class="sliderBubbleText">'
-            + (newOffset > 0 ? '+' : '') + parseFloat(newOffset) + 's'
+            + (value > 0 ? '+' : '') + parseFloat(value) + 's'
             + '</h1>';
     };
 
@@ -107,25 +103,6 @@ function init(instance) {
     instance.element = parent;
 }
 
-function getOffsetFromPercentage(value) {
-    // convert percentage to fraction
-    let offset = (value - 50) / 50;
-    // multiply by offset min/max range value (-x to +x) :
-    offset *= 30;
-    return offset.toFixed(1);
-}
-
-function getOffsetFromSliderValue(value) {
-    // convert slider value to offset
-    const offset = value / 10;
-    return offset.toFixed(1);
-}
-
-function getSliderValueFromOffset(value) {
-    const sliderValue = value * 10;
-    return Math.min(300, Math.max(-300, sliderValue.toFixed(1)));
-}
-
 class SubtitleSync {
     constructor(currentPlayer) {
         player = currentPlayer;

src/components/subtitlesync/subtitlesync.template.html

@@ -3,7 +3,7 @@
         <button type="button" is="paper-icon-button-light" class="subtitleSync-closeButton"><span class="material-icons close" aria-hidden="true"></span></button>
         <div class="subtitleSyncTextField" contenteditable="true" spellcheck="false">0s</div>
         <div class="sliderContainer subtitleSyncSliderContainer">
-            <input is="emby-slider" type="range" step="1" min="-300" max="300" value="0" class="subtitleSyncSlider" data-slider-keep-progress="true" />
+            <input is="emby-slider" type="range" step="0.1" min="-30" max="30" value="0" class="subtitleSyncSlider" data-slider-keep-progress="true" />
         </div>
     </div>
 </div>