From 28ab879f3c99f8c7831c05309199ef2740c66d4a Mon Sep 17 00:00:00 2001
From: Marcus Nilsson <marcus.nilsson@genarp.com>
Date: Fri, 18 Aug 2023 19:41:12 +0200
Subject: [PATCH] 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   | 34 ++++++++++---------
 .../subtitlesync/subtitlesync.template.html   |  2 +-
 2 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/components/subtitlesync/subtitlesync.js b/src/components/subtitlesync/subtitlesync.js
index dcdfe45874..ba8984486b 100644
--- a/src/components/subtitlesync/subtitlesync.js
+++ b/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 {
@@ -155,8 +157,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);
                     }
diff --git a/src/components/subtitlesync/subtitlesync.template.html b/src/components/subtitlesync/subtitlesync.template.html
index fcd86dbc32..a055d24fcb 100644
--- a/src/components/subtitlesync/subtitlesync.template.html
+++ b/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>