This adds a button that opens a modal that allow user to enable video effects on join screen.
57 lines
2.0 KiB
TypeScript
57 lines
2.0 KiB
TypeScript
import { UsePersistentUserChoicesOptions } from '@livekit/components-react'
|
|
import React from 'react'
|
|
import { LocalUserChoices } from '../../routes/Room'
|
|
import { saveUserChoices, loadUserChoices } from '@livekit/components-core'
|
|
import { ProcessorSerialized } from '../components/blur'
|
|
|
|
/**
|
|
* From @livekit/component-react
|
|
*
|
|
* A hook that provides access to user choices stored in local storage, such as
|
|
* selected media devices and their current state (on or off), as well as the user name.
|
|
* @alpha
|
|
*/
|
|
export function usePersistentUserChoices(
|
|
options: UsePersistentUserChoicesOptions = {}
|
|
) {
|
|
const [userChoices, setSettings] = React.useState<LocalUserChoices>(
|
|
loadUserChoices(options.defaults, options.preventLoad ?? false)
|
|
)
|
|
|
|
const saveAudioInputEnabled = React.useCallback((isEnabled: boolean) => {
|
|
setSettings((prev) => ({ ...prev, audioEnabled: isEnabled }))
|
|
}, [])
|
|
const saveVideoInputEnabled = React.useCallback((isEnabled: boolean) => {
|
|
setSettings((prev) => ({ ...prev, videoEnabled: isEnabled }))
|
|
}, [])
|
|
const saveAudioInputDeviceId = React.useCallback((deviceId: string) => {
|
|
setSettings((prev) => ({ ...prev, audioDeviceId: deviceId }))
|
|
}, [])
|
|
const saveVideoInputDeviceId = React.useCallback((deviceId: string) => {
|
|
setSettings((prev) => ({ ...prev, videoDeviceId: deviceId }))
|
|
}, [])
|
|
const saveUsername = React.useCallback((username: string) => {
|
|
setSettings((prev) => ({ ...prev, username: username }))
|
|
}, [])
|
|
const saveProcessorSerialized = React.useCallback(
|
|
(processorSerialized?: ProcessorSerialized) => {
|
|
setSettings((prev) => ({ ...prev, processorSerialized }))
|
|
},
|
|
[]
|
|
)
|
|
|
|
React.useEffect(() => {
|
|
saveUserChoices(userChoices, options.preventSave ?? false)
|
|
}, [userChoices, options.preventSave])
|
|
|
|
return {
|
|
userChoices,
|
|
saveAudioInputEnabled,
|
|
saveVideoInputEnabled,
|
|
saveAudioInputDeviceId,
|
|
saveVideoInputDeviceId,
|
|
saveUsername,
|
|
saveProcessorSerialized,
|
|
}
|
|
}
|