From f8546b35ec8f2b8693c766fa62e0d6a7413c6784 Mon Sep 17 00:00:00 2001
From: Pat <54077094+patrickd77-eng@users.noreply.github.com>
Date: Fri, 11 Apr 2025 20:51:21 +0100
Subject: [PATCH] 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>
---
 .../playbackSettings/playbackSettings.js       |  7 +++++++
 .../playbackSettings.template.html             |  8 ++++++++
 src/scripts/browserDeviceProfile.js            |  7 +++++--
 src/scripts/settings/userSettings.js           | 18 ++++++++++++++++--
 src/strings/en-us.json                         |  2 ++
 5 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/src/components/playbackSettings/playbackSettings.js b/src/components/playbackSettings/playbackSettings.js
index 81e82d041..f15627a3e 100644
--- a/src/components/playbackSettings/playbackSettings.js
+++ b/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);
diff --git a/src/components/playbackSettings/playbackSettings.template.html b/src/components/playbackSettings/playbackSettings.template.html
index ed1409eff..2bd2026df 100644
--- a/src/components/playbackSettings/playbackSettings.template.html
+++ b/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>
diff --git a/src/scripts/browserDeviceProfile.js b/src/scripts/browserDeviceProfile.js
index f38d7ab6e..086f9443a 100644
--- a/src/scripts/browserDeviceProfile.js
+++ b/src/scripts/browserDeviceProfile.js
@@ -864,6 +864,7 @@ export default function (options) {
     });
 
     if (canPlayHls() && options.enableHls !== false) {
+        const enableLimitedSegmentLength = userSettings.limitSegmentLength();
         if (hlsInFmp4VideoCodecs.length && hlsInFmp4VideoAudioCodecs.length && enableFmp4Hls) {
             // HACK: Since there is no filter for TS/MP4 in the API, specify HLS support in general and rely on retry after DirectPlay error
             // FIXME: Need support for {Container: 'mp4', Protocol: 'hls'} or {Container: 'hls', SubContainer: 'mp4'}
@@ -883,7 +884,8 @@ export default function (options) {
                 Protocol: 'hls',
                 MaxAudioChannels: physicalAudioChannels.toString(),
                 MinSegments: browser.iOS || browser.osx ? '2' : '1',
-                BreakOnNonKeyFrames: hlsBreakOnNonKeyFrames
+                BreakOnNonKeyFrames: hlsBreakOnNonKeyFrames,
+                SegmentLength: enableLimitedSegmentLength ? 1 : undefined
             });
         }
 
@@ -906,7 +908,8 @@ export default function (options) {
                 Protocol: 'hls',
                 MaxAudioChannels: physicalAudioChannels.toString(),
                 MinSegments: browser.iOS || browser.osx ? '2' : '1',
-                BreakOnNonKeyFrames: hlsBreakOnNonKeyFrames
+                BreakOnNonKeyFrames: hlsBreakOnNonKeyFrames,
+                SegmentLength: enableLimitedSegmentLength ? 1 : undefined
             });
         }
     }
diff --git a/src/scripts/settings/userSettings.js b/src/scripts/settings/userSettings.js
index 23e1f000f..30904ac51 100644
--- a/src/scripts/settings/userSettings.js
+++ b/src/scripts/settings/userSettings.js
@@ -152,8 +152,8 @@ export class UserSettings {
     }
 
     /**
-     * Get or set 'Perfer fMP4-HLS Container' state.
-     * @param {boolean|undefined} val - Flag to enable 'Perfer fMP4-HLS Container' or undefined.
+     * Get or set 'Prefer fMP4-HLS Container' state.
+     * @param {boolean|undefined} val - Flag to enable 'Prefer fMP4-HLS Container' or undefined.
      * @return {boolean} 'Prefer fMP4-HLS Container' state.
      */
     preferFmp4HlsContainer(val) {
@@ -165,6 +165,19 @@ export class UserSettings {
         return toBoolean(this.get('preferFmp4HlsContainer', false), browser.safari || browser.firefox || browser.chrome || browser.edgeChromium);
     }
 
+    /**
+     * Get or set 'Limit Segment Length' state.
+     * @param {boolean|undefined} val - Flag to enable 'Limit Segment Length' or undefined.
+     * @returns {boolean} 'Limit Segment Length' state.
+     */
+    limitSegmentLength(val) {
+        if (val !== undefined) {
+            return this.set('limitSegmentLength', val.toString(), false);
+        }
+
+        return toBoolean(this.get('limitSegmentLength', false), false);
+    }
+
     /**
      * Get or set 'Cinema Mode' state.
      * @param {boolean|undefined} val - Flag to enable 'Cinema Mode' or undefined.
@@ -671,6 +684,7 @@ export const get = currentSettings.get.bind(currentSettings);
 export const serverConfig = currentSettings.serverConfig.bind(currentSettings);
 export const allowedAudioChannels = currentSettings.allowedAudioChannels.bind(currentSettings);
 export const preferFmp4HlsContainer = currentSettings.preferFmp4HlsContainer.bind(currentSettings);
+export const limitSegmentLength = currentSettings.limitSegmentLength.bind(currentSettings);
 export const enableCinemaMode = currentSettings.enableCinemaMode.bind(currentSettings);
 export const selectAudioNormalization = currentSettings.selectAudioNormalization.bind(currentSettings);
 export const enableNextVideoInfoOverlay = currentSettings.enableNextVideoInfoOverlay.bind(currentSettings);
diff --git a/src/strings/en-us.json b/src/strings/en-us.json
index f5e71049e..21e3491bf 100644
--- a/src/strings/en-us.json
+++ b/src/strings/en-us.json
@@ -1029,6 +1029,8 @@
     "LibraryScanFanoutConcurrency": "Parallel library scan tasks limit",
     "LibraryScanFanoutConcurrencyHelp": "Maximum number of parallel tasks during library scans. Leaving this empty will choose a limit based on your systems core count. WARNING: Setting this number too high may cause issues with network file systems; if you encounter problems lower this number.",
     "LibraryInvalidItemIdError": "The library is in an invalid state and cannot be edited. You are possibly encountering a bug: the path in the database is not the correct path on the filesystem.",
+    "LimitSegmentLength": "Use shorter HLS segments",
+    "LimitSegmentLengthHelp": "Enabling this option may help prevent the HLS player from hanging during seeking on certain devices, such as webOS TVs.",
     "LimitSupportedVideoResolution": "Limit maximum supported video resolution",
     "LimitSupportedVideoResolutionHelp": "Use 'Maximum Allowed Video Transcoding Resolution' as maximum supported video resolution.",
     "List": "List",