Skip to content

Commit 95d0f4e

Browse files
MindgamesnlMindgamesnl
committed
updated settings and empty page
1 parent f84891b commit 95d0f4e

File tree

14 files changed

+572
-286
lines changed

14 files changed

+572
-286
lines changed

‎client/package-lock.json

Lines changed: 32 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎client/package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,10 @@
77
"dependencies": {
88
"@fontsource/roboto": "^5.0.8",
99
"@million/lint": "^1.0.0-rc.84",
10+
"class-variance-authority": "^0.7.1",
1011
"immer": "^9.0.17",
1112
"js-cookie": "^3.0.1",
13+
"lucide-react": "^0.462.0",
1214
"mediastream-gain": "^1.0.1",
1315
"prop-types": "^15.8.1",
1416
"react": "^18.2.0",

‎client/public/en.lang

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,8 +72,14 @@ vc.safetyTitle=For your safety
7272
vc.safetyDisclaimer=You'll receive in-game messages when people appear and leave your voice chat range, and you'll be able to view a list of people who you can hear (and can hear you in turn), and mute them if desired. OpenAudioMc relies on your server to handle moderation and handle reports of abuse when necessary. Please contact a member of staff if you have any questions or concerns.
7373
vc.safetyFooter=<b>Want some privacy? you can mute your microphone at any time by running <pre style="display: inline;">/mm</pre> or holding <pre style="display: inline;">shift + F</pre> in game, or alternatively by pressing the button on this web page.</b>
7474
vc.join=Join Voice Chat
75-
vc.empty.title=You're all alone!
76-
vc.empty.body=There's no one around you to talk to, try moving around a bit or ask your friends to join you.
75+
vc.empty.title=Looking for Someone?
76+
vc.empty.description=Voice chat is more fun together! Here's how you can connect with others:
77+
vc.empty.move.title=Move closer to other players
78+
vc.empty.move.description=Voice chat works based on proximity. Find and approach other players!
79+
vc.empty.channel.title=Join a voice chat channel
80+
vc.empty.channel.description=Some servers have voice chat channels. Check if there's a channel you can join! do "/channel list" to see all available channels.
81+
vc.empty.invite.title=Invite your friends
82+
vc.empty.invite.description=Let others know about voice chat - they might not have enabled it yet!
7783
vc.muteMicrophone=Mute
7884
vc.unmuteMicrophone=Unmute
7985
vc.myStatus=Your own microphone status

‎client/public/metadata.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{"buildMajor":1,"buildMinor":125,"buildRevision":269,"buildTag":"dev","buildDate":"Sat Oct 12 2024","build":"1.125.269 dev"}
1+
{"buildMajor":1,"buildMinor":125,"buildRevision":272,"buildTag":"dev","buildDate":"Sat Nov 30 2024","build":"1.125.272 dev"}

‎client/src/components/settings/CheckboxSetting.jsx

Lines changed: 0 additions & 37 deletions
This file was deleted.

‎client/src/components/settings/DropdownSetting.jsx

Lines changed: 0 additions & 30 deletions
This file was deleted.

‎client/src/components/settings/SettingsInputs.jsx

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
/* eslint-disable */
2+
import React from 'react';
3+
import PropTypes from 'prop-types';
4+
5+
export function CheckboxSetting({
6+
title, description, icon, isChecked, buttonText, onChange,
7+
}) {
8+
return (
9+
<div className="flex flex-col h-full">
10+
<div className="flex items-center space-x-3 mb-4">
11+
<div
12+
className="w-6 h-6"
13+
style={{ color: 'var(--primary-accent)' }}
14+
dangerouslySetInnerHTML={{ __html: icon }}
15+
/>
16+
<h3 className="text-lg font-medium">{title}</h3>
17+
</div>
18+
19+
<p className="text-sm opacity-80 mb-6 flex-grow">
20+
{description}
21+
</p>
22+
23+
<label className="flex items-center cursor-pointer group">
24+
<input
25+
type="checkbox"
26+
className="sr-only"
27+
checked={isChecked}
28+
onChange={onChange}
29+
/>
30+
<div
31+
className={`relative w-11 h-6 rounded-full transition-colors duration-200 ease-in-out ${
32+
isChecked ? 'bg-primary-accent' : 'bg-gray-600'
33+
}`}
34+
style={{
35+
backgroundColor: isChecked ? 'var(--primary-accent)' : 'rgba(255, 255, 255, 0.1)',
36+
}}
37+
>
38+
<div
39+
className={`absolute left-1 top-1 w-4 h-4 rounded-full bg-white transition-transform duration-200 ease-in-out ${
40+
isChecked ? 'translate-x-5' : 'translate-x-0'
41+
}`}
42+
/>
43+
</div>
44+
<span className="ml-3 text-sm font-medium group-hover:opacity-80">
45+
{buttonText}
46+
</span>
47+
</label>
48+
</div>
49+
);
50+
}
51+
52+
export function SettingsInputs({
53+
title, description, icon, options, value, onChange,
54+
}) {
55+
return (
56+
<div className="flex flex-col h-full">
57+
<div className="flex items-center space-x-3 mb-4">
58+
<div
59+
className="w-6 h-6"
60+
style={{ color: 'var(--primary-accent)' }}
61+
dangerouslySetInnerHTML={{ __html: icon }}
62+
/>
63+
<h3 className="text-lg font-medium">{title}</h3>
64+
</div>
65+
66+
<p className="text-sm opacity-80 mb-6 flex-grow">
67+
{description}
68+
</p>
69+
70+
<select
71+
value={value}
72+
onChange={onChange}
73+
className="w-full px-4 py-2 rounded-lg bg-opacity-10 border border-white border-opacity-10 focus:border-opacity-20 focus:outline-none transition-colors duration-200"
74+
style={{
75+
background: 'rgba(255, 255, 255, 0.05)',
76+
borderRadius: 'var(--common-border-radius)',
77+
}}
78+
>
79+
{options.map((option) => (
80+
<option
81+
key={option.key}
82+
value={option.key}
83+
className="bg-gray-800"
84+
>
85+
{option.value}
86+
</option>
87+
))}
88+
</select>
89+
</div>
90+
);
91+
}
92+
93+
CheckboxSetting.propTypes = {
94+
title: PropTypes.string.isRequired,
95+
description: PropTypes.string.isRequired,
96+
icon: PropTypes.string.isRequired,
97+
isChecked: PropTypes.bool.isRequired,
98+
buttonText: PropTypes.string.isRequired,
99+
onChange: PropTypes.func.isRequired,
100+
};
101+
102+
SettingsInputs.propTypes = {
103+
title: PropTypes.string.isRequired,
104+
description: PropTypes.string.isRequired,
105+
icon: PropTypes.string.isRequired,
106+
options: PropTypes.arrayOf(PropTypes.shape({
107+
key: PropTypes.string,
108+
value: PropTypes.string,
109+
})).isRequired,
110+
value: PropTypes.string.isRequired,
111+
onChange: PropTypes.func.isRequired,
112+
};

‎client/src/components/voice/VoicePeerBox.jsx

Lines changed: 3 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
33
import { Tooltip } from 'react-tooltip';
44
import { VoicePeerRow } from './VoicePeerRow';
55
import { msg } from '../../client/OpenAudioAppContainer';
6+
import EmptyVoiceState from './ui/NoPeers';
67

78
const VoicePeerRowMemo = React.memo(VoicePeerRow);
89

@@ -73,25 +74,7 @@ function VoicePeerBox(props) {
7374
// is there anyone?
7475
if (peers.length === 0) {
7576
return (
76-
<div className="w-full flex justify-center align-middle">
77-
<div className="content-section flex justify-center w-4/5">
78-
<div className="flex content-card-collection items-stretch">
79-
<div className="w-full content-card small-card order-2 2xl:order-1">
80-
<div className="container mx-auto px-4 py-8">
81-
<div className="text-center">
82-
<p className="mt-1 text-4xl font-bold tracking-tight text-gray-200 sm:text-5xl lg:text-6xl">
83-
{msg('vc.empty.title')}
84-
</p>
85-
<p className="mx-auto mt-5 max-w-xl text-xl text-gray-300">
86-
{msg('vc.empty.body')}
87-
</p>
88-
</div>
89-
</div>
90-
91-
</div>
92-
</div>
93-
</div>
94-
</div>
77+
<EmptyVoiceState />
9578
);
9679
}
9780

@@ -114,6 +97,7 @@ function VoicePeerBox(props) {
11497
}
11598

11699
export default connect(mapStateToProps)(VoicePeerBox);
100+
117101
function mapStateToProps(state) {
118102
return {
119103
voicePeers: state.voiceState.peers,

0 commit comments

Comments
 (0)