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

WIP: set theme music volume level via user setting

Browse source
This commit is contained in:
NathanGrenier 2025-03-28 00:13:10 -04:00
parent ccd1070417
commit 56f8ec5947
10 changed files with 99 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/components/displaySettings/displaySettings.js
View file

@ -1,4 +1,5 @@
import escapeHtml from 'escape-html';
import dom from '../../scripts/dom';
import browser from '../../scripts/browser';
import layoutManager from '../layoutManager';
import { pluginManager } from '../pluginManager';
@ -67,6 +68,19 @@ function showOrHideMissingEpisodesField(context) {
context.querySelector('.fldDisplayMissingEpisodes').classList.remove('hide');
}
function updateThemeSongVolumeDisabledState(context) {
const isEnabled = context.querySelector('#chkThemeSong').checked;
const sliderElement = context.querySelector('#sliderThemeSongVolume');
sliderElement.disabled = !isEnabled;
sliderElement.classList.toggle('disabled', !isEnabled);
// Find the slider container and toggle the disabled class on it
const sliderContainer = dom.parentWithClass(sliderElement, 'sliderContainer-settings');
if (sliderContainer) {
sliderContainer.classList.toggle('disabled', !isEnabled);
}
}
function loadForm(context, user, userSettings) {
if (appHost.supports('displaylanguage')) {
context.querySelector('.languageSection').classList.remove('hide');
@ -115,6 +129,11 @@ function loadForm(context, user, userSettings) {
context.querySelector('.chkDisplayMissingEpisodes').checked = user.Configuration.DisplayMissingEpisodes || false;
context.querySelector('#chkThemeSong').checked = userSettings.enableThemeSongs();
context.querySelector('#chkThemeSong').addEventListener('change', function() {
updateThemeSongVolumeDisabledState(context);
});
context.querySelector('#sliderThemeSongVolume').value = userSettings.themeSongsVolumeLevel();
updateThemeSongVolumeDisabledState(context);
context.querySelector('#chkThemeVideo').checked = userSettings.enableThemeVideos();
context.querySelector('#chkFadein').checked = userSettings.enableFastFadein();
context.querySelector('#chkBlurhash').checked = userSettings.enableBlurhash();
@ -150,6 +169,7 @@ function saveUser(context, user, userSettingsInstance, apiClient) {
userSettingsInstance.dateTimeLocale(context.querySelector('.selectDateTimeLocale').value);
userSettingsInstance.enableThemeSongs(context.querySelector('#chkThemeSong').checked);
userSettingsInstance.themeSongsVolumeLevel(context.querySelector('#sliderThemeSongVolume').value);
userSettingsInstance.enableThemeVideos(context.querySelector('#chkThemeVideo').checked);
userSettingsInstance.theme(context.querySelector('#selectTheme').value);
userSettingsInstance.dashboardTheme(context.querySelector('#selectDashboardTheme').value);

7
src/components/displaySettings/displaySettings.template.html
View file

@ -255,6 +255,13 @@
<div class="fieldDescription checkboxFieldDescription">${EnableThemeSongsHelp}</div>
</div>
<div class="sliderContainer-settings">
<div class="sliderContainer">
<input is="emby-slider" id="sliderThemeSongVolume" label="${LabelThemeSongVolume}" type="range" min="0" max="100" step="1" value="50" />
</div>
<div class="fieldDescription">${ThemeSongVolumeHelp}</div>
</div>
<div class="checkboxContainer checkboxContainer-withDescription fldThemeVideo">
<label>
<input type="checkbox" is="emby-checkbox" id="chkThemeVideo" />