milas/jellyfish-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #3549 from Madh93/show-subtitle-text-color-setting

Browse source 
Show subtitle text color setting
This commit is contained in:
Bill Thornton 2022-06-27 11:11:37 -04:00 • committed by GitHub
commit 0abd937c5e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
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.dropShadow = context.querySelector('#selectDropShadow').value;
appearanceSettings.font = context.querySelector('#selectFont').value; appearanceSettings.font = context.querySelector('#selectFont').value;
appearanceSettings.textBackground = context.querySelector('#inputTextBackground').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; appearanceSettings.verticalPosition = context.querySelector('#sliderVerticalPosition').value;
return appearanceSettings; return appearanceSettings;
@ -57,6 +57,7 @@ function loadForm(context, user, userSettings, appearanceSettings, apiClient) {
context.querySelector('#selectTextWeight').value = appearanceSettings.textWeight || 'normal'; context.querySelector('#selectTextWeight').value = appearanceSettings.textWeight || 'normal';
context.querySelector('#selectDropShadow').value = appearanceSettings.dropShadow || ''; context.querySelector('#selectDropShadow').value = appearanceSettings.dropShadow || '';
context.querySelector('#inputTextBackground').value = appearanceSettings.textBackground || 'transparent'; context.querySelector('#inputTextBackground').value = appearanceSettings.textBackground || 'transparent';
context.querySelector('#selectTextColor').value = appearanceSettings.textColor || '#ffffff';
context.querySelector('#inputTextColor').value = appearanceSettings.textColor || '#ffffff'; context.querySelector('#inputTextColor').value = appearanceSettings.textColor || '#ffffff';
context.querySelector('#selectFont').value = appearanceSettings.font || ''; context.querySelector('#selectFont').value = appearanceSettings.font || '';
context.querySelector('#sliderVerticalPosition').value = appearanceSettings.verticalPosition; context.querySelector('#sliderVerticalPosition').value = appearanceSettings.verticalPosition;
@ -171,6 +172,7 @@ function embed(options, self) {
options.element.querySelector('#selectTextWeight').addEventListener('change', onAppearanceFieldChange); options.element.querySelector('#selectTextWeight').addEventListener('change', onAppearanceFieldChange);
options.element.querySelector('#selectDropShadow').addEventListener('change', onAppearanceFieldChange); options.element.querySelector('#selectDropShadow').addEventListener('change', onAppearanceFieldChange);
options.element.querySelector('#selectFont').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('#inputTextColor').addEventListener('change', onAppearanceFieldChange);
options.element.querySelector('#inputTextBackground').addEventListener('change', onAppearanceFieldChange); options.element.querySelector('#inputTextBackground').addEventListener('change', onAppearanceFieldChange);
@ -201,6 +203,10 @@ function embed(options, self) {
sliderVerticalPosition.classList.add('focusable'); sliderVerticalPosition.classList.add('focusable');
sliderVerticalPosition.enableKeyboardDragging(); sliderVerticalPosition.enableKeyboardDragging();
}, 0); }, 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) => { 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" /> <input is="emby-input" id="inputTextBackground" label="${LabelTextBackgroundColor}" type="text" />
</div> </div>
<div class="inputContainer hide"> <div class="selectContainer">
<input is="emby-input" id="inputTextColor" label="${LabelTextColor}" type="text" /> <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>
<div class="selectContainer"> <div class="selectContainer">

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

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