LogalDeveloper/owncast
0
Fork 0
Code Activity

Add support for changing user color in name modal. Closes #1805

Browse Source
This commit is contained in:
Gabe Kangas
2022-08-09 19:56:45 -07:00
parent 9187a7a435
commit 68414445c2
22 changed files with 171 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
web/components/modals/NameChangeModal.tsx
View File

@@ -1,16 +1,34 @@
import { useState } from 'react';
import React, { CSSProperties, useState } from 'react';
import { useRecoilValue } from 'recoil';
import { Input, Button } from 'antd';
import { Input, Button, Select } from 'antd';
import { MessageType } from '../../interfaces/socket-events';
import WebsocketService from '../../services/websocket-service';
import { websocketServiceAtom, chatDisplayNameAtom } from '../stores/ClientConfigStore';
import {
websocketServiceAtom,
chatDisplayNameAtom,
chatDisplayColorAtom,
} from '../stores/ClientConfigStore';
const { Option } = Select;
/* eslint-disable @typescript-eslint/no-unused-vars */
interface Props {}
function UserColor(props: { color: number }): React.ReactElement {
const { color } = props;
const style: CSSProperties = {
textAlign: 'center',
backgroundColor: `var(--theme-user-colors-${color})`,
width: '100%',
height: '100%',
};
return <div style={style} />;
}
export default function NameChangeModal(props: Props) {
const websocketService = useRecoilValue<WebsocketService>(websocketServiceAtom);
const chatDisplayName = useRecoilValue<string>(chatDisplayNameAtom);
const chatDisplayColor = useRecoilValue<number>(chatDisplayColorAtom);
const [newName, setNewName] = useState<any>(chatDisplayName);
const handleNameChange = () => {
@@ -24,6 +42,17 @@ export default function NameChangeModal(props: Props) {
const saveEnabled =
newName !== chatDisplayName && newName !== '' && websocketService?.isConnected();
const handleColorChange = (color: string) => {
const colorChange = {
type: MessageType.COLOR_CHANGE,
newColor: Number(color),
};
websocketService.send(colorChange);
};
const maxColor = 8; // 0...n
const colorOptions = [...Array(maxColor)].map((e, i) => i);
return (
<div>
Your chat display name is what people see when you send chat messages. Other information can
@@ -32,13 +61,28 @@ export default function NameChangeModal(props: Props) {
value={newName}
onChange={e => setNewName(e.target.value)}
placeholder="Your chat display name"
maxLength={10}
maxLength={30}
showCount
defaultValue={chatDisplayName}
/>
<Button disabled={!saveEnabled} onClick={handleNameChange}>
Change name
</Button>
<div>
Your Color
<Select
style={{ width: 120 }}
onChange={handleColorChange}
defaultValue={chatDisplayColor.toString()}
getPopupContainer={triggerNode => triggerNode.parentElement}
>
{colorOptions.map(e => (
<Option key={e.toString()} title={e}>
<UserColor color={e} />
</Option>
))}
</Select>
</div>
</div>
);
}

10
web/components/stores/ClientConfigStore.tsx
View File

@@ -46,6 +46,11 @@ export const chatDisplayNameAtom = atom<string>({
default: null,
});
export const chatDisplayColorAtom = atom<number>({
key: 'chatDisplayColor',
default: null,
});
export const chatUserIdAtom = atom<string>({
key: 'chatUserIdAtom',
default: null,
@@ -149,6 +154,7 @@ export function ClientConfigStore() {
const [appState, appStateSend, appStateService] = useMachine(appStateModel);
const setChatDisplayName = useSetRecoilState<string>(chatDisplayNameAtom);
const setChatDisplayColor = useSetRecoilState<Number>(chatDisplayColorAtom);
const setChatUserId = useSetRecoilState<string>(chatUserIdAtom);
const setIsChatModerator = useSetRecoilState<boolean>(isChatModeratorAtom);
const setClientConfig = useSetRecoilState<ClientConfig>(clientConfigStateAtom);
@@ -225,7 +231,7 @@ export function ClientConfigStore() {
sendEvent(AppStateEvent.NeedsRegister);
const response = await ChatService.registerUser(optionalDisplayName);
console.log(`ChatService -> registerUser() response: \n${response}`);
const { accessToken: newAccessToken, displayName: newDisplayName } = response;
const { accessToken: newAccessToken, displayName: newDisplayName, displayColor } = response;
if (!newAccessToken) {
return;
}
@@ -234,6 +240,7 @@ export function ClientConfigStore() {
setAccessToken(newAccessToken);
setLocalStorage(ACCESS_TOKEN_KEY, newAccessToken);
setChatDisplayName(newDisplayName);
setChatDisplayColor(displayColor);
} catch (e) {
sendEvent(AppStateEvent.Fail);
console.error(`ChatService -> registerUser() ERROR: \n${e}`);
@@ -255,6 +262,7 @@ export function ClientConfigStore() {
handleConnectedClientInfoMessage(
message as ConnectedClientInfoEvent,
setChatDisplayName,
setChatDisplayColor,
setChatUserId,
setIsChatModerator,
);

4
web/components/stores/eventhandlers/connected-client-info-handler.ts
View File

@@ -3,12 +3,14 @@ import { ConnectedClientInfoEvent } from '../../../interfaces/socket-events';
export default function handleConnectedClientInfoMessage(
message: ConnectedClientInfoEvent,
setChatDisplayName: (string) => void,
setChatDisplayColor: (number) => void,
setChatUserId: (number) => void,
setIsChatModerator: (boolean) => void,
) {
const { user } = message;
const { id, displayName, scopes } = user;
const { id, displayName, displayColor, scopes } = user;
setChatDisplayName(displayName);
setChatDisplayColor(displayColor);
setChatUserId(id);
setIsChatModerator(scopes?.includes('moderator'));
}

1
web/interfaces/socket-events.ts
View File

@@ -4,6 +4,7 @@ export enum MessageType {
CHAT = 'CHAT',
PING = 'PING',
NAME_CHANGE = 'NAME_CHANGE',
COLOR_CHANGE = 'COLOR_CHANGE',
PONG = 'PONG',
SYSTEM = 'SYSTEM',
USER_JOINED = 'USER_JOINED',

1
web/services/chat-service.ts
View File

@@ -8,6 +8,7 @@ interface UserRegistrationResponse {
id: string;
accessToken: string;
displayName: string;
displayColor: number;
}
class ChatService {

2
web/stories/Colors.stories.mdx
View File

@@ -22,6 +22,7 @@ Toggle dark mode on and off in the above toolbar to see how these colors look on
<ColorRow
colors={[
'theme-user-colors-0',
'theme-user-colors-1',
'theme-user-colors-2',
'theme-user-colors-3',
@@ -29,6 +30,5 @@ Toggle dark mode on and off in the above toolbar to see how these colors look on
'theme-user-colors-5',
'theme-user-colors-6',
'theme-user-colors-7',
'theme-user-colors-8',
]}
/>

16
web/style-definitions/tokens/color/default-theme.yaml
View File

@@ -36,19 +36,19 @@ theme:
user-colors:
comment: 'Colors used to display chat users.'
1:
0:
value: '{color.owncast.user.1.value}'
2:
1:
value: '{color.owncast.user.2.value}'
3:
2:
value: '{color.owncast.user.3.value}'
4:
3:
value: '{color.owncast.user.4.value}'
5:
4:
value: '{color.owncast.user.5.value}'
6:
5:
value: '{color.owncast.user.6.value}'
7:
6:
value: '{color.owncast.user.7.value}'
8:
7:
value: '{color.owncast.user.8.value}'

18
web/styles/theme.less
View File

@@ -1,6 +1,6 @@
// Do not edit directly
// Generated on Tue, 12 Jul 2022 21:03:36 GMT
// Generated on Wed, 10 Aug 2022 02:31:18 GMT
//
// How to edit these values:
// Edit the corresponding token file under the style-definitions directory
@@ -26,14 +26,14 @@
@theme-background-primary: #fffcf2; // The main background color of the page.
@theme-background-secondary: #f0efe4; // A secondary background color used in sections and controls.
@theme-rounded-corners: 0.5em;
@theme-user-colors-1: #f40b0b;
@theme-user-colors-2: #f4800b;
@theme-user-colors-3: #f4f40b;
@theme-user-colors-4: #58f40b;
@theme-user-colors-5: #0bf4f4;
@theme-user-colors-6: #0ba6f4;
@theme-user-colors-7: #6666ff;
@theme-user-colors-8: #f40bf4;
@theme-user-colors-0: #f40b0b;
@theme-user-colors-1: #f4800b;
@theme-user-colors-2: #f4f40b;
@theme-user-colors-3: #58f40b;
@theme-user-colors-4: #0bf4f4;
@theme-user-colors-5: #0ba6f4;
@theme-user-colors-6: #6666ff;
@theme-user-colors-7: #f40bf4;
@owncast-purple: #00ff00;
@owncast-purple-25: rgba(120, 113, 255, 0.25);
@owncast-purple-50: rgba(120, 113, 255, 0.5);

34
web/styles/variables.css
View File

@@ -1,6 +1,6 @@
/**
* Do not edit directly
* Generated on Tue, 12 Jul 2022 21:03:36 GMT
* Generated on Wed, 10 Aug 2022 02:31:18 GMT
*
* How to edit these values:
* Edit the corresponding token file under the style-definitions directory
@@ -23,23 +23,19 @@
--theme-text-primary: #030208; /* The color of the text in the application. */
--theme-text-secondary: #63638e;
--theme-text-link: #5353a6;
--theme-text-body-font-family: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--theme-text-display-font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--theme-text-body-font-family: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--theme-text-display-font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--theme-background-primary: #fffcf2; /* The main background color of the page. */
--theme-background-secondary: #f0efe4; /* A secondary background color used in sections and controls. */
--theme-rounded-corners: 0.5em;
--theme-user-colors-1: #f40b0b;
--theme-user-colors-2: #f4800b;
--theme-user-colors-3: #f4f40b;
--theme-user-colors-4: #58f40b;
--theme-user-colors-5: #0bf4f4;
--theme-user-colors-6: #0ba6f4;
--theme-user-colors-7: #6666ff;
--theme-user-colors-8: #f40bf4;
--theme-user-colors-0: #f40b0b;
--theme-user-colors-1: #f4800b;
--theme-user-colors-2: #f4f40b;
--theme-user-colors-3: #58f40b;
--theme-user-colors-4: #0bf4f4;
--theme-user-colors-5: #0ba6f4;
--theme-user-colors-6: #6666ff;
--theme-user-colors-7: #f40bf4;
--owncast-purple: #00ff00;
--owncast-purple-25: rgba(120, 113, 255, 0.25);
--owncast-purple-50: rgba(120, 113, 255, 0.5);
@@ -71,10 +67,6 @@
--color-owncast-background-primary: #fffcf2;
--color-owncast-background-secondary: #f0efe4;
--rounded-corners: 0.5em;
--font-owncast-body: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol', 'Noto Color Emoji';
--font-owncast-display: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol', 'Noto Color Emoji';
--font-owncast-body: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-owncast-display: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}