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

Add subtitle setting for native vs custom element (#5737)

Browse source 
* Fixed subtitles styling in firefox.

* Fixed subtitles styling in firefox.

* Initial changes to support native or custom styling.

* Changes to support native or custom styling.

* linting changes.

* Changes to support native or custom styling.

* Changes to support native or custom styling.

* minor changes.

* indentation changes and simplification changes.

* minor changes.

---------

Co-authored-by: Bill Thornton <thornbill@users.noreply.github.com>
This commit is contained in:
venkata nadha reddy 2025-01-24 14:46:45 -06:00 • committed by GitHub
parent 9d63a715eb
commit 2689c51b84
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 85 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/components/subtitlesettings/subtitlesettings.js
View file

@ -26,6 +26,7 @@ import template from './subtitlesettings.template.html';
function getSubtitleAppearanceObject(context) {
return {
subtitleStyling: context.querySelector('#selectSubtitleStyling').value,
textSize: context.querySelector('#selectTextSize').value,
textWeight: context.querySelector('#selectTextWeight').value,
dropShadow: context.querySelector('#selectDropShadow').value,
@ -51,6 +52,8 @@ function loadForm(context, user, userSettings, appearanceSettings, apiClient) {
context.querySelector('#selectSubtitlePlaybackMode').dispatchEvent(new CustomEvent('change', {}));
context.querySelector('#selectSubtitleStyling').value = appearanceSettings.subtitleStyling || 'Auto';
context.querySelector('#selectSubtitleStyling').dispatchEvent(new CustomEvent('change', {}));
context.querySelector('#selectTextSize').value = appearanceSettings.textSize || '';
context.querySelector('#selectTextWeight').value = appearanceSettings.textWeight || 'normal';
context.querySelector('#selectDropShadow').value = appearanceSettings.dropShadow || '';
@ -117,6 +120,16 @@ function onSubtitleModeChange(e) {
view.querySelector('.subtitles' + this.value + 'Help').classList.remove('hide');
}
function onSubtitleStyleChange(e) {
const view = dom.parentWithClass(e.target, 'subtitlesettings');
const subtitleStylingHelperElements = view.querySelectorAll('.subtitleStylingHelp');
subtitleStylingHelperElements.forEach((elem)=>{
elem.classList.add('hide');
});
view.querySelector(`.subtitleStyling${this.value}Help`).classList.remove('hide');
}
function onSubtitleBurnInChange(e) {
const view = dom.parentWithClass(e.target, 'subtitlesettings');
const fieldRenderPgs = view.querySelector('.fldRenderPgs');
@ -180,6 +193,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('#selectSubtitleStyling').addEventListener('change', onSubtitleStyleChange);
options.element.querySelector('#selectSubtitleBurnIn').addEventListener('change', onSubtitleBurnInChange);
options.element.querySelector('#selectTextSize').addEventListener('change', onAppearanceFieldChange);
options.element.querySelector('#selectTextWeight').addEventListener('change', onAppearanceFieldChange);

11
src/components/subtitlesettings/subtitlesettings.template.html
View file

@ -77,6 +77,17 @@
<div class="fieldDescription">${SubtitleAppearanceSettingsAlsoPassedToCastDevices}</div>
</div>
<div class="selectContainer">
<select is="emby-select" id="selectSubtitleStyling" label="${LabelSubtitleStyling}">
<option value="Auto">${Auto}</option>
<option value="Custom">${Custom}</option>
<option value="Native">${Native}</option>
</select>
<div class="fieldDescription subtitleStylingAutoHelp subtitleStylingHelp hide">${AutoSubtitleStylingHelp}</div>
<div class="fieldDescription subtitleStylingCustomHelp subtitleStylingHelp hide">${CustomSubtitleStylingHelp}</div>
<div class="fieldDescription subtitleStylingNativeHelp subtitleStylingHelp hide">${NativeSubtitleStylingHelp}</div>
</div>
<div class="selectContainer">
<select is="emby-select" id="selectTextSize" label="${LabelTextSize}">
<option value="smaller">${Smaller}</option>