Implement Theme Song Volume Control

.gitignore

@@ -21,3 +21,7 @@ config.json
 
 # environment related
 .envrc
+
+# other
+repomix.config.json
+repomix-output.txt

src/apps/experimental/features/preferences/components/LibraryPreferences.tsx

@@ -1,4 +1,5 @@
 import Checkbox from '@mui/material/Checkbox';
+import Slider from '@mui/material/Slider';
 import FormControl from '@mui/material/FormControl';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import FormHelperText from '@mui/material/FormHelperText';
@@ -13,10 +14,11 @@ import type { DisplaySettingsValues } from '../types/displaySettingsValues';
 
 interface LibraryPreferencesProps {
     onChange: (event: React.SyntheticEvent) => void;
+    onSliderChange: () => (event: Event, value: number | number[]) => void;
     values: DisplaySettingsValues;
 }
 
-export function LibraryPreferences({ onChange, values }: Readonly<LibraryPreferencesProps>) {
+export function LibraryPreferences({ onChange, onSliderChange, values }: Readonly<LibraryPreferencesProps>) {
     return (
         <Stack spacing={3}>
             <Typography variant='h2'>{globalize.translate('HeaderLibraries')}</Typography>
@@ -79,6 +81,30 @@ export function LibraryPreferences({ onChange, values }: Readonly<LibraryPrefere
                 </FormHelperText>
             </FormControl>
 
+            <FormControl fullWidth>
+                <FormControlLabel
+                    aria-describedby='display-settings-lib-theme-song-volume-level-description'
+                    control={
+                        <Slider
+                            disabled={!values.enableLibraryThemeSongs}
+                            valueLabelDisplay='auto'
+                            value={values.libraryThemeSongsVolumeLevel}
+                            marks
+                            defaultValue={50}
+                            min={0}
+                            max={100}
+                            step={5}
+                            onChange={onSliderChange}
+                        />
+                    }
+                    label={globalize.translate('LabelThemeSongVolume')}
+                    name='libraryThemeSongsVolumeLevel'
+                />
+                <FormHelperText id='display-settings-lib-theme-song-volume-level-description'>
+                    {globalize.translate('ThemeSongVolumeHelp')}
+                </FormHelperText>
+            </FormControl>
+
             <FormControl fullWidth>
                 <FormControlLabel
                     aria-describedby='display-settings-lib-theme-videos-description'

src/apps/experimental/features/preferences/hooks/useDisplaySettings.ts

@@ -87,6 +87,7 @@ async function loadDisplaySettings({
         enableItemDetailsBanner: Boolean(settings.detailsBanner()),
         enableLibraryBackdrops: Boolean(settings.enableBackdrops()),
         enableLibraryThemeSongs: Boolean(settings.enableThemeSongs()),
+        libraryThemeSongsVolumeLevel: settings.themeSongsVolumeLevel(),
         enableLibraryThemeVideos: Boolean(settings.enableThemeVideos()),
         enableRewatchingInNextUp: Boolean(settings.enableRewatchingInNextUp()),
         episodeImagesInNextUp: Boolean(settings.useEpisodeImagesInNextUpAndResume()),
@@ -132,6 +133,7 @@ async function saveDisplaySettings({
     userSettings.detailsBanner(newDisplaySettings.enableItemDetailsBanner);
     userSettings.enableBackdrops(newDisplaySettings.enableLibraryBackdrops);
     userSettings.enableThemeSongs(newDisplaySettings.enableLibraryThemeSongs);
+    userSettings.themeSongsVolumeLevel(newDisplaySettings.libraryThemeSongsVolumeLevel);
     userSettings.enableThemeVideos(newDisplaySettings.enableLibraryThemeVideos);
     userSettings.enableRewatchingInNextUp(newDisplaySettings.enableRewatchingInNextUp);
     userSettings.useEpisodeImagesInNextUpAndResume(newDisplaySettings.episodeImagesInNextUp);

src/apps/experimental/features/preferences/types/displaySettingsValues.ts

@@ -9,6 +9,7 @@ export interface DisplaySettingsValues {
     enableItemDetailsBanner: boolean;
     enableLibraryBackdrops: boolean;
     enableLibraryThemeSongs: boolean;
+    libraryThemeSongsVolumeLevel: number;
     enableLibraryThemeVideos: boolean;
     enableRewatchingInNextUp: boolean;
     episodeImagesInNextUp: boolean;

src/apps/experimental/routes/user/display/index.tsx

@@ -40,6 +40,19 @@ export default function UserDisplayPreferences() {
         }
     }, [updateField, values]);
 
+    const handleSliderChange = useCallback(() => (e: Event, newValue: number | number[]) => {
+        const target = e.target as HTMLInputElement;
+        const fieldName = target.name as keyof DisplaySettingsValues;
+        const value = Array.isArray(newValue) ? newValue[0] : newValue;
+
+        if (values?.[fieldName] !== value) {
+            updateField({
+                name: fieldName,
+                value: value.toString()
+            });
+        }
+    }, [updateField, values]);
+
     if (loading || !values) {
         return <LoadingComponent />;
     }
@@ -66,6 +79,7 @@ export default function UserDisplayPreferences() {
                         />
                         <LibraryPreferences
                             onChange={handleFieldChange}
+                            onSliderChange={handleSliderChange}
                             values={values}
                         />
                         <NextUpPreferences

src/components/displaySettings/displaySettings.js

@@ -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);

src/components/displaySettings/displaySettings.template.html

@@ -255,6 +255,13 @@ <h2 class="sectionTitle">
         <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" />

src/elements/emby-slider/emby-slider.scss

@@ -248,6 +248,14 @@
     height: 2.83em; /* similar to emby-input with its 110% font-size */
 }
 
+.sliderContainer-settings.disabled {
+    opacity: 0.5;
+}
+
+.sliderContainer-settings.disabled .sliderBubble {
+    display: none;
+}
+
 .sliderLabel {
     display: block;
     margin-bottom: 0.25em;

src/scripts/settings/userSettings.js

@@ -230,6 +230,19 @@ export class UserSettings {
         return toBoolean(this.get('enableThemeSongs', false), false);
     }
 
+    /**
+     * Get or set 'Theme Songs' volume level.
+     * @param {number|undefined} [val] - Volume level to set.
+     * @return {number} Current volume level.
+     */
+    themeSongsVolumeLevel(val) {
+        if (val !== undefined) {
+            return this.set('themeSongsVolumeLevel', val.toString());
+        }
+
+        return parseInt(this.get('themeSongsVolumeLevel') || '100', 10);
+    }
+
     /**
      * Get or set 'Theme Videos' state.
      * @param {boolean|undefined} [val] - Flag to enable 'Theme Videos' or undefined.
@@ -676,6 +689,7 @@ export const selectAudioNormalization = currentSettings.selectAudioNormalization
 export const enableNextVideoInfoOverlay = currentSettings.enableNextVideoInfoOverlay.bind(currentSettings);
 export const enableVideoRemainingTime = currentSettings.enableVideoRemainingTime.bind(currentSettings);
 export const enableThemeSongs = currentSettings.enableThemeSongs.bind(currentSettings);
+export const themeSongsVolumeLevel = currentSettings.themeSongsVolumeLevel.bind(currentSettings);
 export const enableThemeVideos = currentSettings.enableThemeVideos.bind(currentSettings);
 export const enableFastFadein = currentSettings.enableFastFadein.bind(currentSettings);
 export const enableBlurhash = currentSettings.enableBlurhash.bind(currentSettings);

src/strings/en-us.json

@@ -960,6 +960,7 @@
     "LabelTextWeight": "Text weight",
     "Bold": "Bold",
     "LabelTheme": "Theme",
+    "LabelThemeSongVolume": "Theme song volume",
     "LabelTime": "Time",
     "LabelTimeLimitHours": "Time limit (hours)",
     "LabelTitle": "Title",
@@ -1578,6 +1579,7 @@
     "TellUsAboutYourself": "Tell us about yourself",
     "TextSent": "Text sent.",
     "ThemeSongs": "Theme songs",
+    "ThemeSongVolumeHelp": "Adjust the volume of theme songs played while browsing the library.",
     "ThemeVideos": "Theme videos",
     "TheseSettingsAffectSubtitlesOnThisDevice": "These settings affect subtitles on this device",
     "ThisWizardWillGuideYou": "This wizard will help guide you through the setup process. To begin, please select your preferred language.",