Controlled inputs for settings + fixes

Author: martpie

src-tauri/capabilities/main.json

@@ -42,6 +42,7 @@
     "database:allow-reset",
     "default-view:allow-set",
     "shell-extension:allow-show-item-in-folder",
+    "sleepblocker:allow-enable",
     "sleepblocker:allow-disable"
   ],
   "platforms": ["linux", "macOS", "windows"]

src-tauri/src/plugins/config.rs

@@ -46,7 +46,7 @@ pub enum DefaultView {
 pub struct Config {
     pub theme: String,
     pub audio_volume: f32,
-    pub audio_playback_rate: f32,
+    pub audio_playback_rate: Option<f32>,
     pub audio_output_device: String,
     pub audio_muted: bool,
     pub audio_shuffle: bool,
@@ -67,7 +67,7 @@ impl Config {
         Config {
             theme: "__system".to_owned(),
             audio_volume: 1.0,
-            audio_playback_rate: 1.0,
+            audio_playback_rate: Some(1.0),
             audio_output_device: "default".to_owned(),
             audio_muted: false,
             audio_shuffle: false,

src/components/AudioOutputSelect/AudioOutputSelect.tsx

@@ -5,7 +5,7 @@ import { logAndNotifyError } from '../../lib/utils';
 import * as Setting from '../Setting/Setting';
 
 type Props = {
-  defaultValue: string;
+  value: string;
   onChange: (deviceID: string) => void;
 } & Setting.InputProps;
 
@@ -73,7 +73,7 @@ export default function AudioOutputSelect(props: Props) {
     <Setting.Select
       {...selectProps}
       key="devicesOk" // avoid default value problems
-      defaultValue={props.defaultValue}
+      value={props.value}
       onChange={setAudioOutputDevice}
     >
       {devices.map((device) => {

src/components/SettingCheckbox/SettingCheckbox.tsx

@@ -5,8 +5,8 @@ import styles from './SettingCheckbox.module.css';
 type Props = {
   title: string;
   slug: string;
-  defaultValue: boolean;
-  onClick: (value: boolean) => void;
+  value: boolean;
+  onChange: (value: boolean) => void;
   description?: string;
 };
 
@@ -17,8 +17,8 @@ export default function CheckboxSetting(props: Props) {
       <input
         id={`setting-${slug}`}
         type="checkbox"
-        onClick={(e) => props.onClick(e.currentTarget.checked)}
-        defaultChecked={props.defaultValue}
+        onChange={(e) => props.onChange(e.currentTarget.checked)}
+        checked={props.value}
       />
       <Setting.Label htmlFor={slug} noMargin>
         {title}

src/generated/typings/Config.ts

@@ -4,4 +4,4 @@ import type { Repeat } from "./Repeat";
 import type { SortBy } from "./SortBy";
 import type { SortOrder } from "./SortOrder";
 
-export interface Config { theme: string, audio_volume: number, audio_playback_rate: number, audio_output_device: string, audio_muted: boolean, audio_shuffle: boolean, audio_repeat: Repeat, default_view: DefaultView, library_sort_by: SortBy, library_sort_order: SortOrder, library_folders: Array<string>, sleepblocker: boolean, auto_update_checker: boolean, minimize_to_tray: boolean, notifications: boolean, track_view_density: string, }
+export interface Config { theme: string, audio_volume: number, audio_playback_rate: number | null, audio_output_device: string, audio_muted: boolean, audio_shuffle: boolean, audio_repeat: Repeat, default_view: DefaultView, library_sort_by: SortBy, library_sort_order: SortOrder, library_folders: Array<string>, sleepblocker: boolean, auto_update_checker: boolean, minimize_to_tray: boolean, notifications: boolean, track_view_density: string, }

src/lib/player.ts

@@ -127,7 +127,7 @@ class Player {
 
 export default new Player({
   volume: config.getInitial('audio_volume'),
-  playbackRate: config.getInitial('audio_playback_rate'),
+  playbackRate: config.getInitial('audio_playback_rate') ?? 1,
   audioOutputDevice: config.getInitial('audio_output_device'),
   muted: config.getInitial('audio_muted'),
 });

src/stores/SettingsAPI.ts

@@ -9,6 +9,7 @@ import { themes } from '../lib/themes';
 import { logAndNotifyError } from '../lib/utils';
 import type { Theme } from '../types/museeks';
 
+import router from '../views/router';
 import useToastsStore from './useToastsStore';
 
 interface UpdateCheckOptions {
@@ -52,6 +53,7 @@ const setTracksDensity = async (
   density: Config['track_view_density'],
 ): Promise<void> => {
   await config.set('track_view_density', density);
+  router.revalidate();
 };
 
 /**
@@ -137,10 +139,11 @@ const check = async (): Promise<void> => {
  */
 const toggleSleepBlocker = async (value: boolean): Promise<void> => {
   if (value === true) {
-    invoke('plugin:sleepblocker|enable');
+    await invoke('plugin:sleepblocker|enable');
   } else {
-    invoke('plugin:sleepblocker|disable');
+    await invoke('plugin:sleepblocker|disable');
   }
+  router.revalidate();
 };
 
 /**
@@ -150,20 +153,23 @@ const setDefaultView = async (defaultView: DefaultView): Promise<void> => {
   await invoke('plugin:default-view|set', {
     defaultView,
   });
+  router.revalidate();
 };
 
 /**
  * Toggle update check on startup
  */
 const toggleAutoUpdateChecker = async (value: boolean): Promise<void> => {
   await config.set('auto_update_checker', value);
+  router.revalidate();
 };
 
 /**
  * Toggle native notifications display
  */
 const toggleDisplayNotifications = async (value: boolean): Promise<void> => {
   await config.set('notifications', value);
+  router.revalidate();
 };
 
 // Should we use something else to harmonize between zustand and non-store APIs?

src/stores/usePlayerStore.ts

@@ -239,7 +239,6 @@ const usePlayerStore = createPlayerStore<PlayerState>((set, get) => ({
 
         const newTrack = queue[newQueueCursor];
 
-        // tslint:disable-next-line
         if (newTrack !== undefined) {
           player.setTrack(newTrack);
           await player.play();
@@ -334,18 +333,22 @@ const usePlayerStore = createPlayerStore<PlayerState>((set, get) => ({
       else player.unmute();
 
       await config.set('audio_muted', muted);
+      router.revalidate();
     },
 
     /**
      * Set audio's playback rate
      */
     setPlaybackRate: async (value) => {
-      if (value >= 0.5 && value <= 5) {
-        // if in allowed range
-        player.setPlaybackRate(value);
-
+      // if in allowed range
+      if (!Number.isNaN(value) && value >= 0.5 && value <= 5) {
         await config.set('audio_playback_rate', value);
+        player.setPlaybackRate(value);
+      } else {
+        await config.set('audio_playback_rate', null);
+        player.setPlaybackRate(1.0);
       }
+      router.revalidate();
     },
 
     /**
@@ -356,6 +359,7 @@ const usePlayerStore = createPlayerStore<PlayerState>((set, get) => ({
         try {
           await player.setOutputDevice(deviceID);
           await config.set('audio_output_device', deviceID);
+          router.revalidate();
         } catch (err) {
           logAndNotifyError(err);
         }
@@ -568,4 +572,5 @@ function createPlayerStore<T extends PlayerState>(store: StateCreator<T>) {
  */
 const saveVolume = debounce(async (volume: number) => {
   await config.set('audio_volume', volume);
+  router.revalidate();
 }, 500);

src/views/ViewSettingsAbout.tsx

@@ -33,8 +33,8 @@ export default function ViewSettingsAbout() {
         <CheckboxSetting
           slug="update"
           title="Automatically check for updates"
-          defaultValue={config.auto_update_checker}
-          onClick={SettingsAPI.toggleAutoUpdateChecker}
+          value={config.auto_update_checker}
+          onChange={SettingsAPI.toggleAutoUpdateChecker}
         />
         <div>
           <Button

src/views/ViewSettingsAudio.tsx

@@ -27,7 +27,7 @@ export default function ViewSettingsAudio() {
           description="Increase the playback rate: a value of 2 will play your music at a 2x
           speed"
           id="setting-playbackrate"
-          defaultValue={config.audio_playback_rate}
+          value={config.audio_playback_rate ?? ''}
           onChange={setPlaybackRate}
           type="number"
           min="0.5"
@@ -40,7 +40,7 @@ export default function ViewSettingsAudio() {
           label="Audio output"
           description="Advanced: set a custom audio output device."
           id="setting-playbackrate"
-          defaultValue={config.audio_output_device}
+          value={config.audio_output_device}
           onChange={playerAPI.setOutputDevice}
         />
       </Setting.Section>