add volume inputs

src/views/Styles.scss

@@ -16,3 +16,4 @@
 @import './wired/WiredView';
 @import './mod-tools/ModToolsView';
 @import './achievements/AchievementsView';
+@import './user-settings/UserSettingsView';

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;
+    }
+}

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';
@@ -50,7 +50,7 @@ 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;
 
@@ -60,25 +60,50 @@ export const UserSettingsView: FC<{}> = props =>
         {
             case 'close_view':
                 setIsVisible(false);
+                doUpdate = false;
                 return;
             case 'oldchat':
-                clone.oldChat = value;
+                clone.oldChat = value as boolean;
-                SendMessageHook(new UserSettingsOldChatComposer(value));
+                SendMessageHook(new UserSettingsOldChatComposer(clone.oldChat));
                 break;
             case 'room_invites':
-                clone.roomInvites = value;
+                clone.roomInvites = value as boolean;
-                SendMessageHook(new UserSettingsRoomInvitesComposer(value));
+                SendMessageHook(new UserSettingsRoomInvitesComposer(clone.roomInvites));
                 break;
             case 'camera_follow':
-                console.log(value);
+                clone.cameraFollow = value as boolean;
-                clone.cameraFollow = value;
+                SendMessageHook(new UserSettingsCameraFollowComposer(clone.cameraFollow));
-                SendMessageHook(new UserSettingsCameraFollowComposer(value));
+                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]);
 
+    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;
@@ -108,8 +133,46 @@ export const UserSettingsView: FC<{}> = props =>
                     <div className="mt-3 mb-2">{LocalizeText('widget.memenu.settings.volume')}</div>
                     <div className="mb-2">
                         <label>{LocalizeText('widget.memenu.settings.volume.ui')}</label>
+                        <div className="d-flex flex-row">
+                            <div className={ 'icon-container ' + (userSettings.volumeSystem >= 50 ? 'text-muted' : '')}>
+                                <i className={'fas ' + (userSettings.volumeSystem === 0 ? 'fa-volume-mute' : '') + (userSettings.volumeSystem > 0 ? 'fa-volume-down' : '')}></i>
+                            </div>
+                            <div className="w-100 ml-2 mr-2">
+                                <input type="range" className="custom-range" min="0" max="100" step="1" id="volumeSystem" value={userSettings.volumeSystem} onChange={event => processAction("system_volume", event.target.value)} onMouseUp={ () => saveRangeSlider("volume")}/>
+                            </div>
+                            <div className={ userSettings.volumeSystem < 50 ? 'text-muted': '' }>
+                                <i className="fas fa-volume-up"></i>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="mb-2">
+                        <label>{LocalizeText('widget.memenu.settings.volume.furni')}</label>
+                        <div className="d-flex flex-row">
+                            <div className={ 'icon-container ' + (userSettings.volumeFurni >= 50 ? 'text-muted' : '')}>
+                                <i className={'fas ' + (userSettings.volumeFurni === 0 ? 'fa-volume-mute' : '') + (userSettings.volumeFurni > 0 ? 'fa-volume-down' : '')}></i>
+                            </div>
+                            <div className="w-100 ml-2 mr-2">
+                                <input type="range" className="custom-range" min="0" max="100" step="1" id="volumeSystem" value={userSettings.volumeFurni} onChange={event => processAction("furni_volume", event.target.value)} onMouseUp={ () => saveRangeSlider("volume")}/>
+                            </div>
+                            <div className={ userSettings.volumeFurni < 50 ? 'text-muted': '' }>
+                                <i className="fas fa-volume-up"></i>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="mb-2">
+                        <label>{LocalizeText('widget.memenu.settings.volume.trax')}</label>
+                        <div className="d-flex flex-row">
+                            <div className={'icon-container ' + (userSettings.volumeTrax >= 50 ? 'text-muted' : '')}>
+                                <i className={'fas ' + (userSettings.volumeTrax === 0 ? 'fa-volume-mute' : '') + (userSettings.volumeTrax > 0 ? 'fa-volume-down' : '')}></i>
+                            </div>
+                            <div className="w-100 ml-2 mr-2">
+                                <input type="range" className="custom-range" min="0" max="100" step="1" id="volumeSystem" value={userSettings.volumeTrax} onChange={event => processAction("trax_volume", event.target.value)} onMouseUp={ () => saveRangeSlider("volume")}/>
+                            </div>
+                            <div className={ userSettings.volumeTrax < 50 ? 'text-muted': '' }>
+                                <i className="fas fa-volume-up"></i>
+                            </div>
+                        </div>
                     </div>
-
                 </NitroCardContentView>
             </NitroCardView>
         </div>