Refactor persistent storage to use UserChoices

instead of DeviceSettings

packages/core/src/persistent-storage/index.ts

@@ -1 +1 @@
-export { setDeviceSettings, getDeviceSettings, type DeviceSettings } from './device-settings';
+export { saveUserChoices, loadUserChoices, type UserChoices } from './user-choices';

packages/core/src/persistent-storage/user-choices.ts

@@ -0,0 +1,38 @@
+import { cssPrefix } from '../constants';
+import { getLocalStorageObject, setLocalStorageObject } from './local-storage-helpers';
+
+const USER_CHOICES_KEY = `${cssPrefix}-device-settings` as const;
+
+export type UserChoices = {
+  videoInputEnabled: boolean;
+  audioInputEnabled: boolean;
+  videoInputDeviceId: string;
+  audioInputDeviceId: string;
+  username: string;
+};
+
+const defaultUserChoices: UserChoices = {
+  videoInputEnabled: true,
+  audioInputEnabled: true,
+  videoInputDeviceId: '',
+  audioInputDeviceId: '',
+  username: '',
+};
+
+/**
+ * Sets the user choices in local storage.
+ * @param deviceSettings - The device settings to be stored.
+ * @alpha
+ */
+export function saveUserChoices(deviceSettings: UserChoices): void {
+  setLocalStorageObject(USER_CHOICES_KEY, deviceSettings);
+}
+
+/**
+ * Reads the user choices from local storage, or returns the default settings if none are found.
+ * @param defaults - The default device settings to use if none are found in local storage.
+ * @alpha
+ */
+export function loadUserChoices(defaults?: UserChoices): UserChoices {
+  return getLocalStorageObject(USER_CHOICES_KEY) ?? defaults ?? defaultUserChoices;
+}

packages/react/src/hooks/usePersistentUserChoices.ts

@@ -1,5 +1,5 @@
-import type { DeviceSettings } from '@livekit/components-core';
-import { getDeviceSettings, setDeviceSettings } from '@livekit/components-core';
+import type { UserChoices } from '@livekit/components-core';
+import { loadUserChoices, saveUserChoices } from '@livekit/components-core';
 import * as React from 'react';
 
 /**
@@ -10,7 +10,7 @@ interface UsePersistentUserChoicesOptions {
   /**
    * The default value to use if reading from local storage returns no results or fails.
    */
-  defaults?: DeviceSettings;
+  defaults?: UserChoices;
   /**
    * Whether to prevent saving the device settings to local storage.
    * @defaultValue false
@@ -20,12 +20,12 @@ interface UsePersistentUserChoicesOptions {
 
 /**
  * A hook that provides access to user choices stored in local storage, such as
- * selected media devices and their current state, as well as the user name.
+ * selected media devices and their current state (on or off), as well as the user name.
  * @alpha
  */
 export function usePersistentUserChoices(options: UsePersistentUserChoicesOptions = {}) {
-  const [deviceSettings, setSettings] = React.useState<DeviceSettings>(
-    getDeviceSettings(options.defaults),
+  const [deviceSettings, setSettings] = React.useState<UserChoices>(
+    loadUserChoices(options.defaults),
   );
 
   const saveAudioInputEnabled = React.useCallback((isEnabled: boolean) => {
@@ -45,7 +45,7 @@ export function usePersistentUserChoices(options: UsePersistentUserChoicesOption
     if (options.preventSave === true) {
       return;
     }
-    setDeviceSettings(deviceSettings);
+    saveUserChoices(deviceSettings);
   }, [deviceSettings, options.preventSave]);
 
   return {

packages/react/src/prefabs/PreJoin.tsx

@@ -250,6 +250,7 @@ export function PreJoin({
       videoInputDeviceId: DEFAULT_USER_CHOICES.videoDeviceId,
       audioInputEnabled: DEFAULT_USER_CHOICES.audioEnabled,
       videoInputEnabled: DEFAULT_USER_CHOICES.videoEnabled,
+      username: DEFAULT_USER_CHOICES.username,
     },
     preventSave: !saveDeviceSettings,
   });