From c33c2b1e26f5c37cc01dadc84a774da95e9103bf 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 b5842cf884a..4a59ad8c7dc 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 {
@@ -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);
                         }
diff --git a/src/components/subtitlesync/subtitlesync.template.html b/src/components/subtitlesync/subtitlesync.template.html
index fcd86dbc323..a055d24fcb7 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>