Add option to limit hls segment length for webOS (#6530)

* -Add clientside ability to limit segment length to 1. See https://github.com/jellyfin/jellyfin-webos/issues/248 for details.
-Add translations for this new setting (generated by github copilot).
-Corrected small typo 'perfer'.

* Move this to relevant scope

* Revert translations except en-us

* rewrite and relocate translation to alphabetical order

* Relocate new setting to 'video advanced' heading instead of 'advanced'

* Hide hls segment setting initially but show it for WebOS users.

* Update src/components/playbackSettings/playbackSettings.js

Co-authored-by: Dmitry Lyzo <56478732+dmitrylyzo@users.noreply.github.com>

* Update src/components/playbackSettings/playbackSettings.js

Co-authored-by: Dmitry Lyzo <56478732+dmitrylyzo@users.noreply.github.com>

---------

Co-authored-by: Dmitry Lyzo <56478732+dmitrylyzo@users.noreply.github.com>

src/components/playbackSettings/playbackSettings.js

@@ -190,6 +190,11 @@ function loadForm(context, user, userSettings, systemInfo, apiClient) {
         context.querySelector('.fldEnableHi10p').classList.remove('hide');
     }
 
+    // Show hls segment length setting for webOS only, as the setting only aims to fix an issue on that platform.
+    if (browser.web0s) {
+        context.querySelector('.fldLimitSegmentLength').classList.remove('hide');
+    }
+
     context.querySelector('#selectAllowedAudioChannels').value = userSettings.allowedAudioChannels();
 
     apiClient.getCultures().then(allCultures => {
@@ -220,6 +225,7 @@ function loadForm(context, user, userSettings, systemInfo, apiClient) {
 
     context.querySelector('.chkPlayDefaultAudioTrack').checked = user.Configuration.PlayDefaultAudioTrack || false;
     context.querySelector('.chkPreferFmp4HlsContainer').checked = userSettings.preferFmp4HlsContainer();
+    context.querySelector('.chkLimitSegmentLength').checked = userSettings.limitSegmentLength();
     context.querySelector('.chkEnableDts').checked = appSettings.enableDts();
     context.querySelector('.chkEnableTrueHd').checked = appSettings.enableTrueHd();
     context.querySelector('.chkEnableHi10p').checked = appSettings.enableHi10p();
@@ -293,6 +299,7 @@ function saveUser(context, user, userSettingsInstance, apiClient) {
     user.Configuration.PlayDefaultAudioTrack = context.querySelector('.chkPlayDefaultAudioTrack').checked;
     user.Configuration.EnableNextEpisodeAutoPlay = context.querySelector('.chkEpisodeAutoPlay').checked;
     userSettingsInstance.preferFmp4HlsContainer(context.querySelector('.chkPreferFmp4HlsContainer').checked);
+    userSettingsInstance.limitSegmentLength(context.querySelector('.chkLimitSegmentLength').checked);
     userSettingsInstance.enableCinemaMode(context.querySelector('.chkEnableCinemaMode').checked);
     userSettingsInstance.selectAudioNormalization(context.querySelector('#selectAudioNormalization').value);
     userSettingsInstance.enableNextVideoInfoOverlay(context.querySelector('.chkEnableNextVideoOverlay').checked);

src/components/playbackSettings/playbackSettings.template.html

@@ -190,6 +190,14 @@
              <div class="fieldDescription checkboxFieldDescription">${EnableHi10pHelp}</div>
         </div>
 
+        <div class="checkboxContainer checkboxContainer-withDescription fldLimitSegmentLength hide">
+            <label>
+                <input type="checkbox" is="emby-checkbox" class="chkLimitSegmentLength" />
+                <span>${LimitSegmentLength}</span>
+            </label>
+            <div class="fieldDescription checkboxFieldDescription">${LimitSegmentLengthHelp}</div>
+        </div>
+
         <div class="selectContainer">
             <select is="emby-select" id="selectPreferredTranscodeVideoCodec" label="${LabelSelectPreferredTranscodeVideoCodec}">
                 <option value="">${Auto}</option>