mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Change Subtitle Sync slider to go from -300 to 300

Browse source 
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.
This commit is contained in:
Marcus Nilsson 2023-08-18 19:41:12 +02:00
parent c4065a58c6
commit 28ab879f3c
2 changed files with 19 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

34
src/components/subtitlesync/subtitlesync.js
View file

@ -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);
}

2
src/components/subtitlesync/subtitlesync.template.html
View file

@ -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>