Change Subtitle Sync slider to go from -300 to 300

This patch changes the subtitle sync from using a procentage to a
'slider value' that ranges from -300 to 300. The reasons for this is that
WebOS doesn't jump in 0.1 increments but instead jumps 1.0 increments in
the slider, which results in subtitle sync jumping 0.6s per increment.
Using a value from -300 to 300 makes LG WebOS jump 0.1s instead.

src/components/subtitlesync/subtitlesync.js

@@ -54,7 +54,7 @@ function init(instance) {
                 playbackManager.setSubtitleOffset(inputOffset, player);
                 // synchronize with slider value
                 subtitleSyncSlider.updateOffset(
-                    getPercentageFromOffset(inputOffset));
+                    getSliderValueFromOffset(inputOffset));
             } else {
                 this.textContent = (playbackManager.getPlayerSubtitleOffset(player) || 0) + 's';
             }
@@ -79,17 +79,17 @@ function init(instance) {
         }
     };
 
-    subtitleSyncSlider.updateOffset = function (percent) {
-        // default value is 0s = 50%
-        this.value = percent === undefined ? 50 : percent;
+    subtitleSyncSlider.updateOffset = function (sliderValue) {
+        // default value is 0s = 0ms
+        this.value = sliderValue === undefined ? 0 : sliderValue;
     };
 
     subtitleSyncSlider.addEventListener('change', function () {
         // set new offset
-        playbackManager.setSubtitleOffset(getOffsetFromPercentage(this.value), player);
+        playbackManager.setSubtitleOffset(getOffsetFromSliderValue(this.value), player);
         // synchronize with textField value
         subtitleSyncTextField.updateOffset(
-            getOffsetFromPercentage(this.value));
+            getOffsetFromSliderValue(this.value));
     });
 
     subtitleSyncSlider.getBubbleHtml = function (value) {
@@ -108,20 +108,22 @@ function init(instance) {
 }
 
 function getOffsetFromPercentage(value) {
-    // convert percent to fraction
+    // 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 getPercentageFromOffset(value) {
-    // divide by offset min/max range value (-x to +x) :
-    let percentValue = value / 30;
-    // convert fraction to percent
-    percentValue *= 50;
-    percentValue += 50;
-    return Math.min(100, Math.max(0, percentValue.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 {
@@ -152,8 +154,8 @@ class SubtitleSync {
                     if (playbackManager.isShowingSubtitleOffsetEnabled(player) && playbackManager.canHandleOffsetOnCurrentSubtitle(player)) {
                         // if no subtitle offset is defined or element has focus (offset being defined)
                         if (!(playbackManager.getPlayerSubtitleOffset(player) || subtitleSyncTextField.hasFocus)) {
-                            // set default offset to '0' = 50%
-                            subtitleSyncSlider.value = '50';
+                            // set default offset to '0' = 0ms
+                            subtitleSyncSlider.value = '0';
                             subtitleSyncTextField.textContent = '0s';
                             playbackManager.setSubtitleOffset(0, player);
                         }

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="0" max="100" value="50" class="subtitleSyncSlider" data-slider-keep-progress="true" />
+            <input is="emby-slider" type="range" step="1" min="-300" max="300" value="0" class="subtitleSyncSlider" data-slider-keep-progress="true" />
         </div>
     </div>
 </div>