nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-23 14:40:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

add volume inputs

Browse Source
This commit is contained in:
Dank074 2021-08-08 22:01:13 -05:00
parent 6ec2e0d93f
commit 2417cfbd77
3 changed files with 99 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/views/Styles.scss
View File

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

15
src/views/user-settings/UserSettingsView.scss Normal file
View File

@ -0,0 +1,15 @@
.user-settings-window
{
.content-area
{
color: black;
}
.custom-range {
margin-top: 3px;
}
.icon-container {
width: 50px;
}
}

83
src/views/user-settings/UserSettingsView.tsx
View File

@ -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;
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]);
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>