Merge pull request #4893 from thornbill/backport-4754

jellyfin · Oct 19, 2023 · aa09fa7 · aa09fa7
2 parents eb7fb6b + c33c2b1
commit aa09fa7
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 17 deletions.
diff --git 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
@@ -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>