From f4bcc083aeb14f1cecd3d7c47c78e0df32a81329 Mon Sep 17 00:00:00 2001 From: Vitalij Ryndin Date: Sun, 17 Dec 2023 08:02:52 +0800 Subject: [PATCH] feat(overlays): chat directions (#484) --- .../internal/impl_protected/overlays/chat.go | 4 +- frontend/dashboard/package.json | 2 +- frontend/dashboard/src/locales/en.json | 8 +- frontend/dashboard/src/locales/ru.json | 8 +- .../src/pages/overlays/chat/Chat.vue | 34 +++-- frontend/overlays/package.json | 2 +- frontend/overlays/src/pages/overlays/chat.vue | 2 +- frontend/overlays/src/sockets/chat_overlay.ts | 2 +- frontend/public-page/package.json | 2 +- libs/frontend-chat/package.json | 1 + libs/frontend-chat/src/chatBox.vue | 122 +++++++++++++----- .../src/components/messageContent.vue | 29 ++++- libs/frontend-chat/src/helpers.ts | 39 ++++++ libs/frontend-chat/src/styles/boxed.vue | 28 +++- libs/frontend-chat/src/styles/clean.vue | 31 +++-- libs/gomodels/channel_modules_settings.go | 2 +- libs/grpc/protos/api/overlays_chat.proto | 8 +- ...31215182749_add_chat_overlay_direction.sql | 12 ++ pnpm-lock.yaml | 42 ++++-- 19 files changed, 286 insertions(+), 92 deletions(-) create mode 100644 libs/migrations/migrations/20231215182749_add_chat_overlay_direction.sql diff --git a/apps/api/internal/impl_protected/overlays/chat.go b/apps/api/internal/impl_protected/overlays/chat.go index 66fd00d2f..1f949566b 100644 --- a/apps/api/internal/impl_protected/overlays/chat.go +++ b/apps/api/internal/impl_protected/overlays/chat.go @@ -25,10 +25,10 @@ func (c *Overlays) chatOverlayDbToGrpc(s model.ChatOverlaySettings) *overlays_ch FontFamily: s.FontFamily, ShowBadges: s.ShowBadges, ShowAnnounceBadge: s.ShowAnnounceBadge, - ReverseMessages: s.ReverseMessages, TextShadowColor: s.TextShadowColor, TextShadowSize: s.TextShadowSize, ChatBackgroundColor: s.ChatBackgroundColor, + Direction: s.Direction, } } @@ -43,10 +43,10 @@ func (c *Overlays) chatOverlayGrpcToDb(s *overlays_chat.Settings) model.ChatOver FontFamily: s.FontFamily, ShowBadges: s.ShowBadges, ShowAnnounceBadge: s.ShowAnnounceBadge, - ReverseMessages: s.ReverseMessages, TextShadowColor: s.TextShadowColor, TextShadowSize: s.TextShadowSize, ChatBackgroundColor: s.ChatBackgroundColor, + Direction: s.Direction, } } diff --git a/frontend/dashboard/package.json b/frontend/dashboard/package.json index 00211f348..ddb07e5ef 100644 --- a/frontend/dashboard/package.json +++ b/frontend/dashboard/package.json @@ -20,7 +20,7 @@ "@twir/grpc": "workspace:^", "@types/lodash.chunk": "^4.2.9", "@vueuse/components": "^10.7.0", - "@vueuse/core": "^10.7.0", + "@vueuse/core": "10.7.0", "date-fns": "^2.30.0", "grid-layout-plus": "^1.0.3", "kappagen": "^0.3.5", diff --git a/frontend/dashboard/src/locales/en.json b/frontend/dashboard/src/locales/en.json index 96c0be488..63d53450f 100644 --- a/frontend/dashboard/src/locales/en.json +++ b/frontend/dashboard/src/locales/en.json @@ -365,10 +365,14 @@ "fontFamilyDescription": "We use Google fonts, you can find any font there with your prefered variant (i.e cyrillic)", "showBadges": "Show badges", "showAnnounceBadge": "Show announce badge (only for boxed style)", - "reverseMessages": "Show new messages on top, instead bottom", "resetToDefault": "Reset to default", "textShadow": "Text shadow", - "backgroundColor": "Background color" + "backgroundColor": "Background color", + "direction": "Direction of message display", + "directionTop": "Top", + "directionBottom": "Bottom", + "directionLeft": "Left", + "directionRight": "Right" }, "kappagen": { "description": "Liven up your screen with explosions, movements, fireworks, walls of emoticons", diff --git a/frontend/dashboard/src/locales/ru.json b/frontend/dashboard/src/locales/ru.json index dc92c09e1..80fb49dbf 100644 --- a/frontend/dashboard/src/locales/ru.json +++ b/frontend/dashboard/src/locales/ru.json @@ -351,13 +351,17 @@ "fontFamily": "Шрифт", "showBadges": "Отображать значки", "showAnnounceBadge": "Отображать значок объявления (только для рамочного стиля)", - "reverseMessages": "Отображать новые сообщения сверху, а не снизу", "description": "Встраивание оверлея чата в Ваше ПО для проведения прямых трансляций", "hideCommands": "Скрывать команды, не отображать сообщения начинающиеся с \"!\"", "fontSize": "Размер шрифта", "resetToDefault": "Сбросить настройки", "textShadow": "Тень от текста", - "backgroundColor": "Цвет фона" + "backgroundColor": "Цвет фона", + "direction": "Направление отображения сообщений", + "directionTop": "Сверху", + "directionBottom": "Снизу", + "directionLeft": "Слева", + "directionRight": "Справа" }, "kappagen": { "description": "Оживите свой экран взрывами, движениями, фейерверками, стенами смайликов", diff --git a/frontend/dashboard/src/pages/overlays/chat/Chat.vue b/frontend/dashboard/src/pages/overlays/chat/Chat.vue index 98d1bc876..6302a0961 100644 --- a/frontend/dashboard/src/pages/overlays/chat/Chat.vue +++ b/frontend/dashboard/src/pages/overlays/chat/Chat.vue @@ -98,14 +98,23 @@ const defaultSettings: Settings = { fontFamily: defaultFont, showBadges: true, showAnnounceBadge: true, - reverseMessages: false, textShadowColor: 'rgba(0,0,0,1)', textShadowSize: 0, chatBackgroundColor: 'rgba(0, 0, 0, 0)', + direction: 'top', }; const formValue = ref(structuredClone(defaultSettings)); +const directionOptions = computed(() => { + return [ + { label: t('overlays.chat.directionTop'), value: 'top' }, + { label: t('overlays.chat.directionRight'), value: 'right' }, + { label: t('overlays.chat.directionBottom'), value: 'bottom' }, + { label: t('overlays.chat.directionLeft'), value: 'left' }, + ]; +}); + const chatBoxSettings = computed(() => { return { channelId: '', @@ -205,32 +214,32 @@ const canCopyLink = computed(() => { -
- - {{ t('overlays.chat.hideBots') }} +
+ {{ t('overlays.chat.direction') }} +
- - {{ t('overlays.chat.hideCommands') }} + {{ t('overlays.chat.hideBots') }} +
- - {{ t('overlays.chat.reverseMessages') }} + {{ t('overlays.chat.hideCommands') }} +
- {{ t('overlays.chat.showBadges') }} +
+ {{ t('overlays.chat.showAnnounceBadge') }} - {{ t('overlays.chat.showAnnounceBadge') }}
@@ -339,6 +348,11 @@ const canCopyLink = computed(() => { background-color: v-bind('themeVars.cardColor'); } +.switch { + display: flex; + justify-content: space-between; +} + :deep(.chat) { height: 80dvh; } diff --git a/frontend/overlays/package.json b/frontend/overlays/package.json index b2a4be651..5fd6c3128 100644 --- a/frontend/overlays/package.json +++ b/frontend/overlays/package.json @@ -12,7 +12,7 @@ "@protobuf-ts/twirp-transport": "2.9.3", "@twir/frontend-chat": "workspace:^", "@twir/grpc": "workspace:^", - "@vueuse/core": "10.6.1", + "@vueuse/core": "10.7.0", "emoji-regex": "10.3.0", "kappagen": "0.3.5", "nested-css-to-flat": "1.0.5", diff --git a/frontend/overlays/src/pages/overlays/chat.vue b/frontend/overlays/src/pages/overlays/chat.vue index 602a50d57..4b6e79205 100644 --- a/frontend/overlays/src/pages/overlays/chat.vue +++ b/frontend/overlays/src/pages/overlays/chat.vue @@ -14,7 +14,7 @@ const route = useRoute(); const apiKey = route.params.apiKey as string; const messages = ref([]); -const maxMessages = ref(100); +const maxMessages = ref(30); const { settings } = useChatOverlaySocket(apiKey); diff --git a/frontend/overlays/src/sockets/chat_overlay.ts b/frontend/overlays/src/sockets/chat_overlay.ts index d4b643ce1..4fc4409e7 100644 --- a/frontend/overlays/src/sockets/chat_overlay.ts +++ b/frontend/overlays/src/sockets/chat_overlay.ts @@ -22,10 +22,10 @@ export const useChatOverlaySocket = (apiKey: string): { settings: Ref fontFamily: 'Roboto', showAnnounceBadge: true, showBadges: true, - reverseMessages: false, textShadowColor: '', textShadowSize: 0, chatBackgroundColor: '', + direction: 'top', }); const { data, send } = useWebSocket( diff --git a/frontend/public-page/package.json b/frontend/public-page/package.json index 9b430f58f..a769b192b 100644 --- a/frontend/public-page/package.json +++ b/frontend/public-page/package.json @@ -14,7 +14,7 @@ "@tanstack/vue-table": "8.10.7", "@twir/grpc": "workspace:^", "@vueuse/components": "10.6.1", - "@vueuse/core": "10.6.1", + "@vueuse/core": "10.7.0", "vue": "3.3.9", "vue-router": "4.2.5" }, diff --git a/libs/frontend-chat/package.json b/libs/frontend-chat/package.json index bad81e27f..e7bce60f9 100644 --- a/libs/frontend-chat/package.json +++ b/libs/frontend-chat/package.json @@ -13,6 +13,7 @@ "preview": "vite preview" }, "dependencies": { + "@vueuse/core": "10.7.0", "vue": "3.3.9" }, "devDependencies": { diff --git a/libs/frontend-chat/src/chatBox.vue b/libs/frontend-chat/src/chatBox.vue index 15aa94b8e..be47392a7 100644 --- a/libs/frontend-chat/src/chatBox.vue +++ b/libs/frontend-chat/src/chatBox.vue @@ -1,37 +1,81 @@ diff --git a/libs/frontend-chat/src/components/messageContent.vue b/libs/frontend-chat/src/components/messageContent.vue index e3c2431e9..0134d402d 100644 --- a/libs/frontend-chat/src/components/messageContent.vue +++ b/libs/frontend-chat/src/components/messageContent.vue @@ -8,6 +8,8 @@ const props = defineProps<{ isItalic?: boolean textShadowColor?: string textShadowSize?: number + userColor: string + messageAlign: string }>(); const computeWidth = (w?: number) => { @@ -24,10 +26,20 @@ const textShadow = computed(() => { return array.join(', '); }); + +const wordBreak = computed(() => { + return props.messageAlign === 'flex-start' ? 'break-all' : 'initial'; +}); diff --git a/libs/frontend-chat/src/styles/clean.vue b/libs/frontend-chat/src/styles/clean.vue index 19ebb4822..4b28a0208 100644 --- a/libs/frontend-chat/src/styles/clean.vue +++ b/libs/frontend-chat/src/styles/clean.vue @@ -1,13 +1,20 @@
-
+
{{ normalizeDisplayName(msg.sender!, msg.senderDisplayName!) }}{{ msg.isItalic ? '' : ':' }}
diff --git a/libs/gomodels/channel_modules_settings.go b/libs/gomodels/channel_modules_settings.go index 690b3014f..98f9a1eb2 100644 --- a/libs/gomodels/channel_modules_settings.go +++ b/libs/gomodels/channel_modules_settings.go @@ -186,8 +186,8 @@ type ChatOverlaySettings struct { FontFamily string `json:"fontFamily"` ShowBadges bool `json:"showBadges"` ShowAnnounceBadge bool `json:"showAnnounceBadge"` - ReverseMessages bool `json:"reverseMessages"` TextShadowColor string `json:"textShadowColor"` TextShadowSize uint32 `json:"textShadowSize"` ChatBackgroundColor string `json:"chatBackgroundColor"` + Direction string `json:"direction"` } diff --git a/libs/grpc/protos/api/overlays_chat.proto b/libs/grpc/protos/api/overlays_chat.proto index f6c6b0a77..6c6125ac8 100644 --- a/libs/grpc/protos/api/overlays_chat.proto +++ b/libs/grpc/protos/api/overlays_chat.proto @@ -12,8 +12,8 @@ message Settings { string font_family = 7; bool show_badges = 8; bool show_announce_badge = 9; - bool reverse_messages = 10; - string text_shadow_color = 11; - uint32 text_shadow_size = 12; - string chat_background_color = 13; + string text_shadow_color = 10; + uint32 text_shadow_size = 11; + string chat_background_color = 12; + string direction = 13; } diff --git a/libs/migrations/migrations/20231215182749_add_chat_overlay_direction.sql b/libs/migrations/migrations/20231215182749_add_chat_overlay_direction.sql new file mode 100644 index 000000000..5028e068a --- /dev/null +++ b/libs/migrations/migrations/20231215182749_add_chat_overlay_direction.sql @@ -0,0 +1,12 @@ +-- +goose Up +-- +goose StatementBegin +SELECT 'up SQL query'; +UPDATE "channels_modules_settings" +SET settings = settings || '{"direction": "top"}' +WHERE "type" = 'chat_overlay'; +-- +goose StatementEnd + +-- +goose Down +-- +goose StatementBegin +SELECT 'down SQL query'; +-- +goose StatementEnd diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9327d93f8..93050e8e9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -192,7 +192,7 @@ importers: specifier: ^10.7.0 version: 10.7.0(vue@3.3.11) '@vueuse/core': - specifier: ^10.7.0 + specifier: 10.7.0 version: 10.7.0(vue@3.3.11) date-fns: specifier: ^2.30.0 @@ -350,8 +350,8 @@ importers: specifier: workspace:^ version: link:../../libs/grpc '@vueuse/core': - specifier: 10.6.1 - version: 10.6.1(vue@3.3.9) + specifier: 10.7.0 + version: 10.7.0(vue@3.3.9) emoji-regex: specifier: 10.3.0 version: 10.3.0 @@ -411,8 +411,8 @@ importers: specifier: 10.6.1 version: 10.6.1(vue@3.3.9) '@vueuse/core': - specifier: 10.6.1 - version: 10.6.1(vue@3.3.9) + specifier: 10.7.0 + version: 10.7.0(vue@3.3.9) vue: specifier: 3.3.9 version: 3.3.9(typescript@5.3.2) @@ -459,6 +459,9 @@ importers: libs/frontend-chat: dependencies: + '@vueuse/core': + specifier: 10.7.0 + version: 10.7.0(vue@3.3.9) vue: specifier: 3.3.9 version: 3.3.9(typescript@5.3.3) @@ -3202,7 +3205,7 @@ packages: vue: ^3.2.25 dependencies: vite: 5.0.4(@types/node@20.10.3) - vue: 3.3.9(typescript@5.3.2) + vue: 3.3.9(typescript@5.3.3) dev: true /@vitejs/plugin-vue@4.5.2(vite@5.0.6)(vue@3.3.10): @@ -3559,7 +3562,7 @@ packages: dependencies: '@vue/compiler-ssr': 3.3.9 '@vue/shared': 3.3.9 - vue: 3.3.9(typescript@5.3.2) + vue: 3.3.9(typescript@5.3.3) /@vue/shared@3.3.10: resolution: {integrity: sha512-2y3Y2J1a3RhFa0WisHvACJR2ncvWiVHcP8t0Inxo+NKz+8RKO4ZV8eZgCxRgQoA6ITfV12L4E6POOL9HOU5nqw==} @@ -3628,6 +3631,18 @@ packages: - vue dev: false + /@vueuse/core@10.7.0(vue@3.3.9): + resolution: {integrity: sha512-4EUDESCHtwu44ZWK3Gc/hZUVhVo/ysvdtwocB5vcauSV4B7NiGY5972WnsojB3vRNdxvAt7kzJWE2h9h7C9d5w==} + dependencies: + '@types/web-bluetooth': 0.0.20 + '@vueuse/metadata': 10.7.0 + '@vueuse/shared': 10.7.0(vue@3.3.9) + vue-demi: 0.14.6(vue@3.3.9) + transitivePeerDependencies: + - '@vue/composition-api' + - vue + dev: false + /@vueuse/metadata@10.6.1: resolution: {integrity: sha512-qhdwPI65Bgcj23e5lpGfQsxcy0bMjCAsUGoXkJ7DsoeDUdasbZ2DBa4dinFCOER3lF4gwUv+UD2AlA11zdzMFw==} dev: false @@ -3663,6 +3678,15 @@ packages: - vue dev: false + /@vueuse/shared@10.7.0(vue@3.3.9): + resolution: {integrity: sha512-kc00uV6CiaTdc3i1CDC4a3lBxzaBE9AgYNtFN87B5OOscqeWElj/uza8qVDmk7/U8JbqoONLbtqiLJ5LGRuqlw==} + dependencies: + vue-demi: 0.14.6(vue@3.3.9) + transitivePeerDependencies: + - '@vue/composition-api' + - vue + dev: false + /abbrev@1.1.1: resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==} dev: true @@ -10303,7 +10327,7 @@ packages: '@vue/composition-api': optional: true dependencies: - vue: 3.3.9(typescript@5.3.2) + vue: 3.3.9(typescript@5.3.3) dev: false /vue-draggable-next@2.2.1(sortablejs@1.15.1)(vue@3.3.11): @@ -10445,6 +10469,7 @@ packages: '@vue/server-renderer': 3.3.9(vue@3.3.9) '@vue/shared': 3.3.9 typescript: 5.3.2 + dev: false /vue@3.3.9(typescript@5.3.3): resolution: {integrity: sha512-sy5sLCTR8m6tvUk1/ijri3Yqzgpdsmxgj6n6yl7GXXCXqVbmW2RCXe9atE4cEI6Iv7L89v5f35fZRRr5dChP9w==} @@ -10460,7 +10485,6 @@ packages: '@vue/server-renderer': 3.3.9(vue@3.3.9) '@vue/shared': 3.3.9 typescript: 5.3.3 - dev: false /vueuc@0.4.51(vue@3.3.11): resolution: {integrity: sha512-pLiMChM4f+W8czlIClGvGBYo656lc2Y0/mXFSCydcSmnCR1izlKPGMgiYBGjbY9FDkFG8a2HEVz7t0DNzBWbDw==}