From 68414445c2cba0ed254c52623ab1d1c8c0db32e8 Mon Sep 17 00:00:00 2001 From: Gabe Kangas Date: Tue, 9 Aug 2022 19:56:45 -0700 Subject: [PATCH] Add support for changing user color in name modal. Closes #1805 --- config/constants.go | 3 ++ controllers/admin/externalAPIUsers.go | 3 +- core/chat/events.go | 20 +++++++ core/chat/events/eventtype.go | 2 + core/chat/events/nameChangeEvent.go | 7 +++ core/chat/server.go | 2 + core/data/migrations.go | 2 +- core/user/user.go | 18 ++++++- db/db.go | 2 +- db/models.go | 2 +- db/query.sql | 3 ++ db/query.sql.go | 16 +++++- utils/utils.go | 8 +-- web/components/modals/NameChangeModal.tsx | 52 +++++++++++++++++-- web/components/stores/ClientConfigStore.tsx | 10 +++- .../connected-client-info-handler.ts | 4 +- web/interfaces/socket-events.ts | 1 + web/services/chat-service.ts | 1 + web/stories/Colors.stories.mdx | 2 +- .../tokens/color/default-theme.yaml | 16 +++--- web/styles/theme.less | 18 +++---- web/styles/variables.css | 34 +++++------- 22 files changed, 171 insertions(+), 55 deletions(-) diff --git a/config/constants.go b/config/constants.go index d851f75a1..a2acc7760 100644 --- a/config/constants.go +++ b/config/constants.go @@ -11,6 +11,9 @@ const ( DataDirectory = "data" // EmojiDir is relative to the static directory. EmojiDir = "/img/emoji" + // MaxUserColor is the largest color value available to assign to users. + // They start at 0 and can be treated as IDs more than colors themselves. + MaxUserColor = 7 ) var ( diff --git a/controllers/admin/externalAPIUsers.go b/controllers/admin/externalAPIUsers.go index 3e932936b..b0a281eb6 100644 --- a/controllers/admin/externalAPIUsers.go +++ b/controllers/admin/externalAPIUsers.go @@ -6,6 +6,7 @@ import ( "net/http" "time" + "github.com/owncast/owncast/config" "github.com/owncast/owncast/controllers" "github.com/owncast/owncast/core/user" "github.com/owncast/owncast/utils" @@ -41,7 +42,7 @@ func CreateExternalAPIUser(w http.ResponseWriter, r *http.Request) { return } - color := utils.GenerateRandomDisplayColor() + color := utils.GenerateRandomDisplayColor(config.MaxUserColor) if err := user.InsertExternalAPIUser(token, request.Name, color, request.Scopes); err != nil { controllers.InternalErrorHandler(w, err) diff --git a/core/chat/events.go b/core/chat/events.go index da7c19cc9..454d02d92 100644 --- a/core/chat/events.go +++ b/core/chat/events.go @@ -6,6 +6,7 @@ import ( "strings" "time" + "github.com/owncast/owncast/config" "github.com/owncast/owncast/core/chat/events" "github.com/owncast/owncast/core/data" "github.com/owncast/owncast/core/user" @@ -91,6 +92,25 @@ func (s *Server) userNameChanged(eventData chatClientEvent) { eventData.client.sendConnectedClientInfo() } +func (s *Server) userColorChanged(eventData chatClientEvent) { + var receivedEvent events.ColorChangeEvent + if err := json.Unmarshal(eventData.data, &receivedEvent); err != nil { + log.Errorln("error unmarshalling to ColorChangeEvent", err) + return + } + + // Verify this color is valid + if receivedEvent.NewColor > config.MaxUserColor { + log.Errorln("invalid color requested when changing user display color") + return + } + + // Save the new color + if err := user.ChangeUserColor(eventData.client.User.ID, receivedEvent.NewColor); err != nil { + log.Errorln("error changing user display color", err) + } +} + func (s *Server) userMessageSent(eventData chatClientEvent) { var event events.UserMessageEvent if err := json.Unmarshal(eventData.data, &event); err != nil { diff --git a/core/chat/events/eventtype.go b/core/chat/events/eventtype.go index a0d15b63a..2026c85c6 100644 --- a/core/chat/events/eventtype.go +++ b/core/chat/events/eventtype.go @@ -10,6 +10,8 @@ const ( UserJoined EventType = "USER_JOINED" // UserNameChanged is the event sent when a chat username change takes place. UserNameChanged EventType = "NAME_CHANGE" + // UserColorChanged is the event sent when a chat user color change takes place. + UserColorChanged EventType = "COLOR_CHANGE" // VisibiltyUpdate is the event sent when a chat message's visibility changes. VisibiltyUpdate EventType = "VISIBILITY-UPDATE" // PING is a ping message. diff --git a/core/chat/events/nameChangeEvent.go b/core/chat/events/nameChangeEvent.go index 379db0adf..e5659a18f 100644 --- a/core/chat/events/nameChangeEvent.go +++ b/core/chat/events/nameChangeEvent.go @@ -7,6 +7,13 @@ type NameChangeEvent struct { NewName string `json:"newName"` } +// ColorChangeEvent is received when a user changes their chat display color. +type ColorChangeEvent struct { + Event + UserEvent + NewColor int `json:"newColor"` +} + // NameChangeBroadcast represents a user changing their chat display name. type NameChangeBroadcast struct { Event diff --git a/core/chat/server.go b/core/chat/server.go index 19d071b05..babe332ea 100644 --- a/core/chat/server.go +++ b/core/chat/server.go @@ -359,6 +359,8 @@ func (s *Server) eventReceived(event chatClientEvent) { case events.UserNameChanged: s.userNameChanged(event) + case events.UserColorChanged: + s.userColorChanged(event) default: log.Debugln(eventType, "event not found:", typecheck) } diff --git a/core/data/migrations.go b/core/data/migrations.go index 817010bff..cb63fd375 100644 --- a/core/data/migrations.go +++ b/core/data/migrations.go @@ -291,7 +291,7 @@ func migrateToSchema1(db *sql.DB) { // Recreate them as users for _, token := range oldAccessTokens { - color := utils.GenerateRandomDisplayColor() + color := utils.GenerateRandomDisplayColor(config.MaxUserColor) if err := insertAPIToken(db, token.accessToken, token.displayName, color, token.scopes); err != nil { log.Errorln("Error migrating access token", err) } diff --git a/core/user/user.go b/core/user/user.go index 759e3009d..8ee99482b 100644 --- a/core/user/user.go +++ b/core/user/user.go @@ -8,6 +8,7 @@ import ( "strings" "time" + "github.com/owncast/owncast/config" "github.com/owncast/owncast/core/data" "github.com/owncast/owncast/db" "github.com/owncast/owncast/utils" @@ -70,7 +71,7 @@ func CreateAnonymousUser(displayName string) (*User, string, error) { } } - displayColor := utils.GenerateRandomDisplayColor() + displayColor := utils.GenerateRandomDisplayColor(config.MaxUserColor) user := &User{ ID: id, @@ -125,6 +126,21 @@ func ChangeUsername(userID string, username string) error { return nil } +// ChangeUserColor will change the user associated to userID from one display name to another. +func ChangeUserColor(userID string, color int) error { + _datastore.DbLock.Lock() + defer _datastore.DbLock.Unlock() + + if err := _datastore.GetQueries().ChangeDisplayColor(context.Background(), db.ChangeDisplayColorParams{ + DisplayColor: int32(color), + ID: userID, + }); err != nil { + return errors.Wrap(err, "unable to change display color") + } + + return nil +} + func addAccessTokenForUser(accessToken, userID string) error { return _datastore.GetQueries().AddAccessTokenForUser(context.Background(), db.AddAccessTokenForUserParams{ Token: accessToken, diff --git a/db/db.go b/db/db.go index f30b89ec0..21fc4346d 100644 --- a/db/db.go +++ b/db/db.go @@ -1,6 +1,6 @@ // Code generated by sqlc. DO NOT EDIT. // versions: -// sqlc v1.14.0 +// sqlc v1.15.0 package db diff --git a/db/models.go b/db/models.go index 369309471..f5c13b7b2 100644 --- a/db/models.go +++ b/db/models.go @@ -1,6 +1,6 @@ // Code generated by sqlc. DO NOT EDIT. // versions: -// sqlc v1.14.0 +// sqlc v1.15.0 package db diff --git a/db/query.sql b/db/query.sql index cb29c3b14..03e9ed446 100644 --- a/db/query.sql +++ b/db/query.sql @@ -105,3 +105,6 @@ SELECT count(*) FROM users WHERE display_name = $1 AND authenticated_at is not n -- name: ChangeDisplayName :exec UPDATE users SET display_name = $1, previous_names = previous_names || $2, namechanged_at = $3 WHERE id = $4; + +-- name: ChangeDisplayColor :exec +UPDATE users SET display_color = $1 WHERE id = $2; diff --git a/db/query.sql.go b/db/query.sql.go index 4b966b650..97f73a665 100644 --- a/db/query.sql.go +++ b/db/query.sql.go @@ -1,6 +1,6 @@ // Code generated by sqlc. DO NOT EDIT. // versions: -// sqlc v1.14.0 +// sqlc v1.15.0 // source: query.sql package db @@ -153,6 +153,20 @@ func (q *Queries) BanIPAddress(ctx context.Context, arg BanIPAddressParams) erro return err } +const changeDisplayColor = `-- name: ChangeDisplayColor :exec +UPDATE users SET display_color = $1 WHERE id = $2 +` + +type ChangeDisplayColorParams struct { + DisplayColor int32 + ID string +} + +func (q *Queries) ChangeDisplayColor(ctx context.Context, arg ChangeDisplayColorParams) error { + _, err := q.db.ExecContext(ctx, changeDisplayColor, arg.DisplayColor, arg.ID) + return err +} + const changeDisplayName = `-- name: ChangeDisplayName :exec UPDATE users SET display_name = $1, previous_names = previous_names || $2, namechanged_at = $3 WHERE id = $4 ` diff --git a/utils/utils.go b/utils/utils.go index 95e680dc4..4cce78d70 100644 --- a/utils/utils.go +++ b/utils/utils.go @@ -324,10 +324,10 @@ func StringMapKeys(stringMap map[string]interface{}) []string { // GenerateRandomDisplayColor will return a random number that is used for // referencing a color value client-side. These colors are seen as // --theme-user-colors-n. -func GenerateRandomDisplayColor() int { - rangeLower := 1 - rangeUpper := 8 - return rangeLower + rand.Intn(rangeUpper-rangeLower+1) //nolint +func GenerateRandomDisplayColor(maxColor int) int { + rangeLower := 0 + rangeUpper := maxColor + return rangeLower + rand.Intn(rangeUpper-rangeLower+1) //nolint:gosec } // GetHostnameFromURL will return the hostname component from a URL string. diff --git a/web/components/modals/NameChangeModal.tsx b/web/components/modals/NameChangeModal.tsx index e851bfa68..3942124b9 100644 --- a/web/components/modals/NameChangeModal.tsx +++ b/web/components/modals/NameChangeModal.tsx @@ -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
; +} + export default function NameChangeModal(props: Props) { const websocketService = useRecoilValue(websocketServiceAtom); const chatDisplayName = useRecoilValue(chatDisplayNameAtom); + const chatDisplayColor = useRecoilValue(chatDisplayColorAtom); const [newName, setNewName] = useState(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 (
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} /> +
+ Your Color + +
); } diff --git a/web/components/stores/ClientConfigStore.tsx b/web/components/stores/ClientConfigStore.tsx index ef056f579..880c1ac4c 100644 --- a/web/components/stores/ClientConfigStore.tsx +++ b/web/components/stores/ClientConfigStore.tsx @@ -46,6 +46,11 @@ export const chatDisplayNameAtom = atom({ default: null, }); +export const chatDisplayColorAtom = atom({ + key: 'chatDisplayColor', + default: null, +}); + export const chatUserIdAtom = atom({ key: 'chatUserIdAtom', default: null, @@ -149,6 +154,7 @@ export function ClientConfigStore() { const [appState, appStateSend, appStateService] = useMachine(appStateModel); const setChatDisplayName = useSetRecoilState(chatDisplayNameAtom); + const setChatDisplayColor = useSetRecoilState(chatDisplayColorAtom); const setChatUserId = useSetRecoilState(chatUserIdAtom); const setIsChatModerator = useSetRecoilState(isChatModeratorAtom); const setClientConfig = useSetRecoilState(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, ); diff --git a/web/components/stores/eventhandlers/connected-client-info-handler.ts b/web/components/stores/eventhandlers/connected-client-info-handler.ts index fe6454ec3..6063a5480 100644 --- a/web/components/stores/eventhandlers/connected-client-info-handler.ts +++ b/web/components/stores/eventhandlers/connected-client-info-handler.ts @@ -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')); } diff --git a/web/interfaces/socket-events.ts b/web/interfaces/socket-events.ts index 46beb88de..1672ae712 100644 --- a/web/interfaces/socket-events.ts +++ b/web/interfaces/socket-events.ts @@ -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', diff --git a/web/services/chat-service.ts b/web/services/chat-service.ts index c84cab452..b287fc83f 100644 --- a/web/services/chat-service.ts +++ b/web/services/chat-service.ts @@ -8,6 +8,7 @@ interface UserRegistrationResponse { id: string; accessToken: string; displayName: string; + displayColor: number; } class ChatService { diff --git a/web/stories/Colors.stories.mdx b/web/stories/Colors.stories.mdx index e111e891a..43e3a2f8a 100644 --- a/web/stories/Colors.stories.mdx +++ b/web/stories/Colors.stories.mdx @@ -22,6 +22,7 @@ Toggle dark mode on and off in the above toolbar to see how these colors look on diff --git a/web/style-definitions/tokens/color/default-theme.yaml b/web/style-definitions/tokens/color/default-theme.yaml index 0c1616389..2d1dbaf38 100644 --- a/web/style-definitions/tokens/color/default-theme.yaml +++ b/web/style-definitions/tokens/color/default-theme.yaml @@ -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}' diff --git a/web/styles/theme.less b/web/styles/theme.less index 712308d4c..aaef2fcdb 100644 --- a/web/styles/theme.less +++ b/web/styles/theme.less @@ -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); diff --git a/web/styles/variables.css b/web/styles/variables.css index 29b94d6ea..10647d4e3 100644 --- a/web/styles/variables.css +++ b/web/styles/variables.css @@ -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'; }