mirror of
https://github.com/owncast/owncast.git
synced 2024-12-24 18:18:24 +03:00
d1f3fffe2f
* refactor: move/rename BanUserButton file * refactor: move/rename Chart file * refactor: update generic component filenames to PascalCase * refactor: update config component filenames to PascalCase * refactor: update AdminLayout component filename to PascalCase * refactor: update/move VideoJS component * chore(eslint): disable bad react/require-default-props rule * refactor: normalize ActionButton component * refactor: normalize ActionButtonRow component * refactor: normalize FollowButton component * refactor: normalize NotifyButton component * refactor: normalize ChatActionMessage component * refactor: normalize ChatContainer component * refactor: normalize ChatJoinMessage component * refactor: normalize ChatModerationActionMenu component * refactor: normalize ChatModerationDetailsModal component * refactor: normalize ChatModeratorNotification component * refactor: normalize ChatSocialMessage component * refactor: normalize ChatSystemMessage component * refactor: normalize ChatTextField component * refactor: normalize ChatUserBadge component * refactor: normalize ChatUserMessage component * refactor: normalize ContentHeader component * refactor: normalize OwncastLogo component * refactor: normalize UserDropdown component * chore(eslint): modify react/function-component-definition rule * refactor: normalize CodecSelector component * refactor: update a bunch of functional components using eslint * refactor: update a bunch of functional components using eslint, pt2 * refactor: update a bunch of functional components using eslint, pt3 * refactor: replace all component->component default imports with named imports * refactor: replace all component-stories->component default imports with named imports * refactor: remove default exports from most components * chore(eslint): add eslint config files for the components and pages dirs * fix: use-before-define error in ChatContainer * Fix ChatContainer import * Only process .tsx files in Next builds Co-authored-by: Gabe Kangas <gabek@real-ity.com>
88 lines
2.5 KiB
TypeScript
88 lines
2.5 KiB
TypeScript
import React, { CSSProperties, FC, useState } from 'react';
|
|
import { useRecoilValue } from 'recoil';
|
|
import { Input, Button, Select } from 'antd';
|
|
import { MessageType } from '../../../interfaces/socket-events';
|
|
import WebsocketService from '../../../services/websocket-service';
|
|
import {
|
|
websocketServiceAtom,
|
|
chatDisplayNameAtom,
|
|
chatDisplayColorAtom,
|
|
} from '../../stores/ClientConfigStore';
|
|
|
|
const { Option } = Select;
|
|
|
|
export type UserColorProps = {
|
|
color: number;
|
|
};
|
|
|
|
const UserColor: FC<UserColorProps> = ({ color }) => {
|
|
const style: CSSProperties = {
|
|
textAlign: 'center',
|
|
backgroundColor: `var(--theme-color-users-${color})`,
|
|
width: '100%',
|
|
height: '100%',
|
|
};
|
|
return <div style={style} />;
|
|
};
|
|
|
|
export const NameChangeModal: FC = () => {
|
|
const websocketService = useRecoilValue<WebsocketService>(websocketServiceAtom);
|
|
const chatDisplayName = useRecoilValue<string>(chatDisplayNameAtom);
|
|
const chatDisplayColor = useRecoilValue<number>(chatDisplayColorAtom) || 0;
|
|
const [newName, setNewName] = useState<any>(chatDisplayName);
|
|
|
|
const handleNameChange = () => {
|
|
const nameChange = {
|
|
type: MessageType.NAME_CHANGE,
|
|
newName,
|
|
};
|
|
websocketService.send(nameChange);
|
|
};
|
|
|
|
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
|
|
go here to mention auth, and stuff.
|
|
<Input
|
|
value={newName}
|
|
onChange={e => setNewName(e.target.value)}
|
|
placeholder="Your chat display name"
|
|
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>
|
|
);
|
|
};
|