From 2417cfbd777956a09bf798ca37c5da78aa03ef84 Mon Sep 17 00:00:00 2001 From: Dank074 Date: Sun, 8 Aug 2021 22:01:13 -0500 Subject: [PATCH] add volume inputs --- src/views/Styles.scss | 1 + src/views/user-settings/UserSettingsView.scss | 15 +++ src/views/user-settings/UserSettingsView.tsx | 103 ++++++++++++++---- 3 files changed, 99 insertions(+), 20 deletions(-) create mode 100644 src/views/user-settings/UserSettingsView.scss diff --git a/src/views/Styles.scss b/src/views/Styles.scss index 7949875c..5a81e730 100644 --- a/src/views/Styles.scss +++ b/src/views/Styles.scss @@ -16,3 +16,4 @@ @import './wired/WiredView'; @import './mod-tools/ModToolsView'; @import './achievements/AchievementsView'; +@import './user-settings/UserSettingsView'; diff --git a/src/views/user-settings/UserSettingsView.scss b/src/views/user-settings/UserSettingsView.scss new file mode 100644 index 00000000..bd87fb17 --- /dev/null +++ b/src/views/user-settings/UserSettingsView.scss @@ -0,0 +1,15 @@ +.user-settings-window +{ + .content-area + { + color: black; + } + + .custom-range { + margin-top: 3px; + } + + .icon-container { + width: 50px; + } +} diff --git a/src/views/user-settings/UserSettingsView.tsx b/src/views/user-settings/UserSettingsView.tsx index 816034c8..f30a2c34 100644 --- a/src/views/user-settings/UserSettingsView.tsx +++ b/src/views/user-settings/UserSettingsView.tsx @@ -1,4 +1,4 @@ -import { NitroSettingsEvent, UserSettingsCameraFollowComposer, UserSettingsEvent, UserSettingsOldChatComposer, UserSettingsRoomInvitesComposer } from '@nitrots/nitro-renderer'; +import { NitroSettingsEvent, UserSettingsCameraFollowComposer, UserSettingsEvent, UserSettingsOldChatComposer, UserSettingsRoomInvitesComposer, UserSettingsSoundComposer } from '@nitrots/nitro-renderer'; import { FC, useCallback, useEffect, useState } from 'react'; import { UserSettingsUIEvent } from '../../events/user-settings/UserSettingsUIEvent'; import { CreateMessageHook, dispatchMainEvent, SendMessageHook, useUiEvent } from '../../hooks'; @@ -8,8 +8,8 @@ import { LocalizeText } from '../../utils'; export const UserSettingsView: FC<{}> = props => { - const [ isVisible, setIsVisible ] = useState(false); - const [ userSettings, setUserSettings ] = useState(null); + const [isVisible, setIsVisible] = useState(false); + const [userSettings, setUserSettings] = useState(null); const onUserSettingsUIEvent = useCallback((event: UserSettingsUIEvent) => { @@ -50,41 +50,66 @@ export const UserSettingsView: FC<{}> = props => CreateMessageHook(UserSettingsEvent, onUserSettingsEvent); - const processAction = useCallback((type: string, value: boolean = false) => + const processAction = useCallback((type: string, value?: boolean | number | string) => { let doUpdate = true; const clone = userSettings.clone(); - switch(type) + switch (type) { case 'close_view': setIsVisible(false); + doUpdate = false; return; case 'oldchat': - clone.oldChat = value; - SendMessageHook(new UserSettingsOldChatComposer(value)); + clone.oldChat = value as boolean; + SendMessageHook(new UserSettingsOldChatComposer(clone.oldChat)); break; case 'room_invites': - clone.roomInvites = value; - SendMessageHook(new UserSettingsRoomInvitesComposer(value)); + clone.roomInvites = value as boolean; + SendMessageHook(new UserSettingsRoomInvitesComposer(clone.roomInvites)); break; case 'camera_follow': - console.log(value); - clone.cameraFollow = value; - SendMessageHook(new UserSettingsCameraFollowComposer(value)); + clone.cameraFollow = value as boolean; + SendMessageHook(new UserSettingsCameraFollowComposer(clone.cameraFollow)); + break; + case 'system_volume': + clone.volumeSystem = value as number; + clone.volumeSystem = Math.max(0, clone.volumeSystem); + clone.volumeSystem = Math.min(100, clone.volumeSystem); + break; + case 'furni_volume': + clone.volumeFurni = value as number; + clone.volumeFurni = Math.max(0, clone.volumeFurni); + clone.volumeFurni = Math.min(100, clone.volumeFurni); + break; + case 'trax_volume': + clone.volumeTrax = value as number; + clone.volumeTrax = Math.max(0, clone.volumeTrax); + clone.volumeTrax = Math.min(100, clone.volumeTrax); break; } - if(doUpdate) setUserSettings(clone); - }, [ userSettings ]); + if (doUpdate) setUserSettings(clone); + }, [userSettings]); + + const saveRangeSlider = useCallback((type: string) => + { + switch(type) + { + case 'volume': + SendMessageHook(new UserSettingsSoundComposer(Math.round(userSettings.volumeSystem), Math.round(userSettings.volumeFurni), Math.round(userSettings.volumeTrax))); + break; + } + }, [userSettings]); useEffect(() => { - if(!userSettings) return; + if (!userSettings) return; dispatchMainEvent(userSettings); - }, [ userSettings ]); + }, [userSettings]); if (!isVisible) return null; @@ -94,22 +119,60 @@ export const UserSettingsView: FC<{}> = props => processAction('close_view')} />
- processAction('oldchat', event.target.checked)} /> + processAction('oldchat', event.target.checked)} />
- processAction('room_invites', event.target.checked)} /> + processAction('room_invites', event.target.checked)} />
- processAction('camera_follow', event.target.checked)} /> + processAction('camera_follow', event.target.checked)} />
{LocalizeText('widget.memenu.settings.volume')}
+
+
= 50 ? 'text-muted' : '')}> + 0 ? 'fa-volume-down' : '')}> +
+
+ processAction("system_volume", event.target.value)} onMouseUp={ () => saveRangeSlider("volume")}/> +
+
+ +
+
+
+
+ +
+
= 50 ? 'text-muted' : '')}> + 0 ? 'fa-volume-down' : '')}> +
+
+ processAction("furni_volume", event.target.value)} onMouseUp={ () => saveRangeSlider("volume")}/> +
+
+ +
+
+
+
+ +
+
= 50 ? 'text-muted' : '')}> + 0 ? 'fa-volume-down' : '')}> +
+
+ processAction("trax_volume", event.target.value)} onMouseUp={ () => saveRangeSlider("volume")}/> +
+
+ +
+
-