diff --git a/src/components/subtitlesettings/subtitlesettings.js b/src/components/subtitlesettings/subtitlesettings.js index 5e55adfd51..7231842e68 100644 --- a/src/components/subtitlesettings/subtitlesettings.js +++ b/src/components/subtitlesettings/subtitlesettings.js @@ -61,6 +61,9 @@ function loadForm(context, user, userSettings, appearanceSettings, apiClient) { context.querySelector('#sliderVerticalPosition').value = appearanceSettings.verticalPosition; context.querySelector('#selectSubtitleBurnIn').value = appSettings.get('subtitleburnin') || ''; + context.querySelector('#chkSubtitleRenderPgs').checked = appSettings.get('subtitlerenderpgs') === 'true'; + + context.querySelector('#selectSubtitleBurnIn').dispatchEvent(new CustomEvent('change', {})); onAppearanceFieldChange({ target: context.querySelector('#selectTextSize') @@ -86,6 +89,7 @@ function save(instance, context, userId, userSettings, apiClient, enableSaveConf loading.show(); appSettings.set('subtitleburnin', context.querySelector('#selectSubtitleBurnIn').value); + appSettings.set('subtitlerenderpgs', context.querySelector('#chkSubtitleRenderPgs').checked); apiClient.getUser(userId).then(function (user) { saveUser(context, user, userSettings, instance.appearanceKey, apiClient).then(function () { @@ -111,6 +115,19 @@ function onSubtitleModeChange(e) { view.querySelector('.subtitles' + this.value + 'Help').classList.remove('hide'); } +function onSubtitleBurnInChange(e) { + const view = dom.parentWithClass(e.target, 'subtitlesettings'); + + const fieldRenderPgs = view.querySelector('.fldRenderPgs'); + + // Pgs option is only available if burn-in mode is set to 'auto' (empty string) + if (this.value) { + fieldRenderPgs.classList.add('hide'); + } else { + fieldRenderPgs.classList.remove('hide'); + } +} + function onAppearanceFieldChange(e) { const view = dom.parentWithClass(e.target, 'subtitlesettings'); @@ -166,6 +183,7 @@ function embed(options, self) { options.element.querySelector('form').addEventListener('submit', self.onSubmit.bind(self)); options.element.querySelector('#selectSubtitlePlaybackMode').addEventListener('change', onSubtitleModeChange); + options.element.querySelector('#selectSubtitleBurnIn').addEventListener('change', onSubtitleBurnInChange); options.element.querySelector('#selectTextSize').addEventListener('change', onAppearanceFieldChange); options.element.querySelector('#selectTextWeight').addEventListener('change', onAppearanceFieldChange); options.element.querySelector('#selectDropShadow').addEventListener('change', onAppearanceFieldChange); diff --git a/src/components/subtitlesettings/subtitlesettings.template.html b/src/components/subtitlesettings/subtitlesettings.template.html index 5f1f14ae9d..0bef96d787 100644 --- a/src/components/subtitlesettings/subtitlesettings.template.html +++ b/src/components/subtitlesettings/subtitlesettings.template.html @@ -32,6 +32,15 @@