Stretch the wavesurfer waveform to the full height (#1962)

* Stretch the wavesurfer waveform to the full height

* Add waveform stretch setting

src/i18n/locales/en.json

@@ -985,6 +985,8 @@
         "playerbarWaveformBarWidth": "waveform bar width",
         "playerbarWaveformGap": "waveform gap",
         "playerbarWaveformRadius": "waveform radius",
+        "playerbarWaveformStretch": "waveform stretch",
+        "playerbarWaveformStretch_description": "stretches the waveform to fill the available space",
         "preferLocalLyrics_description": "prefer local lyrics over remote lyrics when available",
         "preferLocalLyrics": "prefer local lyrics",
         "showLyricsInSidebar_description": "a panel will be added to the attached play queue that displays the lyrics",

src/renderer/features/player/components/playerbar-waveform.tsx

@@ -58,7 +58,7 @@ export const PlayerbarWaveform = () => {
         height: 18,
         interact: false,
         media: audioElementRef.current,
-        normalize: false,
+        normalize: playerbarSlider?.stretched ?? false,
         progressColor: primaryColor,
         waveColor,
     });

src/renderer/features/settings/components/general/control-settings.tsx

@@ -477,6 +477,32 @@ export const ControlSettings = memo(() => {
                           postProcess: 'sentenceCase',
                       }),
                   },
+                  {
+                      control: (
+                          <Switch
+                              defaultChecked={playerbarSlider?.stretched ?? false}
+                              onChange={(e) =>
+                                  setSettings({
+                                      general: {
+                                          ...settings,
+                                          playerbarSlider: {
+                                              ...playerbarSlider,
+                                              stretched: e.currentTarget.checked,
+                                          },
+                                      },
+                                  })
+                              }
+                          />
+                      ),
+                      description: t('setting.playerbarWaveformStretch', {
+                          context: 'description',
+                          postProcess: 'sentenceCase',
+                      }),
+                      isHidden: false,
+                      title: t('setting.playerbarWaveformStretch', {
+                          postProcess: 'sentenceCase',
+                      }),
+                  },
                   {
                       control: (
                           <NumberInput

src/renderer/store/settings.store.ts

@@ -306,6 +306,7 @@ const PlayerbarSliderSchema = z.object({
     barRadius: z.number(),
     barWidth: z.number(),
     loadingDelay: z.number(),
+    stretched: z.boolean(),
     type: PlayerbarSliderTypeSchema,
 });
 
@@ -1152,6 +1153,7 @@ const initialState: SettingsState = {
             barRadius: 4,
             barWidth: 2,
             loadingDelay: 2,
+            stretched: false,
             type: PlayerbarSliderType.SLIDER,
         },
         playerItems,