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

Show subtitle text color setting

Browse source
This commit is contained in:
Madh93 2022-04-06 17:20:52 +01:00
parent 0e711f4e98
commit c4ab1a5868
No known key found for this signature in database
GPG key ID: 92798C20EED0C422
3 changed files with 27 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -32,7 +32,7 @@ function getSubtitleAppearanceObject(context) {
appearanceSettings.dropShadow = context.querySelector('#selectDropShadow').value;
appearanceSettings.font = context.querySelector('#selectFont').value;
appearanceSettings.textBackground = context.querySelector('#inputTextBackground').value;
appearanceSettings.textColor = context.querySelector('#inputTextColor').value;
appearanceSettings.textColor = layoutManager.tv ? context.querySelector('#selectTextColor').value : context.querySelector('#inputTextColor').value;
appearanceSettings.verticalPosition = context.querySelector('#sliderVerticalPosition').value;
return appearanceSettings;
@ -57,6 +57,7 @@ function loadForm(context, user, userSettings, appearanceSettings, apiClient) {
context.querySelector('#selectTextWeight').value = appearanceSettings.textWeight || 'normal';
context.querySelector('#selectDropShadow').value = appearanceSettings.dropShadow || '';
context.querySelector('#inputTextBackground').value = appearanceSettings.textBackground || 'transparent';
context.querySelector('#selectTextColor').value = appearanceSettings.textColor || '#ffffff';
context.querySelector('#inputTextColor').value = appearanceSettings.textColor || '#ffffff';
context.querySelector('#selectFont').value = appearanceSettings.font || '';
context.querySelector('#sliderVerticalPosition').value = appearanceSettings.verticalPosition;
@ -171,6 +172,7 @@ function embed(options, self) {
options.element.querySelector('#selectTextWeight').addEventListener('change', onAppearanceFieldChange);
options.element.querySelector('#selectDropShadow').addEventListener('change', onAppearanceFieldChange);
options.element.querySelector('#selectFont').addEventListener('change', onAppearanceFieldChange);
options.element.querySelector('#selectTextColor').addEventListener('change', onAppearanceFieldChange);
options.element.querySelector('#inputTextColor').addEventListener('change', onAppearanceFieldChange);
options.element.querySelector('#inputTextBackground').addEventListener('change', onAppearanceFieldChange);
@ -201,6 +203,10 @@ function embed(options, self) {
sliderVerticalPosition.classList.add('focusable');
sliderVerticalPosition.enableKeyboardDragging();
}, 0);
// Replace color picker
dom.parentWithTag(options.element.querySelector('#inputTextColor'), 'DIV').classList.add('hide');
dom.parentWithTag(options.element.querySelector('#selectTextColor'), 'DIV').classList.remove('hide');
}
options.element.querySelector('.chkPreview').addEventListener('change', (e) => {

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

@ -95,8 +95,21 @@
<input is="emby-input" id="inputTextBackground" label="${LabelTextBackgroundColor}" type="text" />
</div>
<div class="inputContainer hide">
<input is="emby-input" id="inputTextColor" label="${LabelTextColor}" type="text" />
<div class="selectContainer">
<input is="emby-input" id="inputTextColor" label="${LabelTextColor}" type="color" />
</div>
<div class="selectContainer hide">
<select is="emby-select" id="selectTextColor" label="${LabelTextColor}">
<option value="#ffffff">${White}</option>
<option value="#ffff00">${Yellow}</option>
<option value="#008000">${Green}</option>
<option value="#00ffff">${Cyan}</option>
<option value="#0000ff">${Blue}</option>
<option value="#ff00ff">${Magenta}</option>
<option value="#ff0000">${Red}</option>
<option value="#000000">${Black}</option>
</select>
</div>
<div class="selectContainer">

5
src/elements/emby-input/emby-input.scss
View file

@ -17,6 +17,11 @@
width: 100%;
}
.emby-input[type=color] {
height: 2.5em;
padding: 0;
}
.emby-input::-moz-focus-inner {
border: 0;
}