kruto

apps/api-gql/internal/gql/resolvers/overlays.resolver.service.go

@@ -5,6 +5,7 @@ import (
 	"fmt"
 	"log/slog"
 
+	"github.com/google/uuid"
 	"github.com/samber/lo"
 	model "github.com/satont/twir/libs/gomodels"
 	"github.com/twirapp/twir/apps/api-gql/internal/gql/gqlmodel"
@@ -38,16 +39,42 @@ func chatOverlayDbToGql(entity *model.ChatOverlaySettings) *gqlmodel.ChatOverlay
 	}
 }
 
+func (r *queryResolver) chatOverlays(
+	ctx context.Context,
+) ([]gqlmodel.ChatOverlay, error) {
+	dashboardId, err := r.sessions.GetSelectedDashboard(ctx)
+	if err != nil {
+		return nil, err
+	}
+
+	var entities []model.ChatOverlaySettings
+	if err := r.gorm.
+		WithContext(ctx).
+		Where("channel_id = ?", dashboardId).
+		Find(&entities).Error; err != nil {
+		return nil, fmt.Errorf("failed to get chat overlay settings: %w", err)
+	}
+
+	var result []gqlmodel.ChatOverlay
+	for _, entity := range entities {
+		result = append(result, *chatOverlayDbToGql(&entity))
+	}
+
+	return result, nil
+}
+
 func (r *Resolver) getChatOverlaySettings(
 	ctx context.Context,
+	id,
 	channelId string,
 ) (*gqlmodel.ChatOverlay, error) {
 	entity := model.ChatOverlaySettings{
+		ID:        uuid.MustParse(id),
 		ChannelID: channelId,
 	}
 	if err := r.gorm.
 		WithContext(ctx).
-		FirstOrCreate(&entity).Error; err != nil {
+		First(&entity).Error; err != nil {
 		return nil, fmt.Errorf("failed to get chat overlay settings: %w", err)
 	}
 
@@ -66,7 +93,7 @@ func (r *mutationResolver) updateChatOverlay(
 	entity := model.ChatOverlaySettings{}
 	if err := r.gorm.
 		WithContext(ctx).
-		Where("channel_id = ?", dashboardId).
+		Where("channel_id = ? AND id = ?", dashboardId, opts.ID).
 		First(&entity).Error; err != nil {
 		return false, fmt.Errorf("failed to get chat overlay settings: %w", err)
 	}
@@ -146,7 +173,7 @@ func (r *mutationResolver) updateChatOverlay(
 	}
 
 	if err := r.wsRouter.Publish(
-		chatOverlaySubscriptionKeyCreate(entity.ChannelID),
+		chatOverlaySubscriptionKeyCreate(entity.ID.String(), entity.ChannelID),
 		chatOverlayDbToGql(&entity),
 	); err != nil {
 		r.logger.Error("failed to publish settings", slog.Any("err", err))

apps/api-gql/internal/gql/resolvers/subscriptions.keys.go

@@ -5,6 +5,6 @@ const (
 	chatOverlaySubscriptionKey   = "api.chatOverlaySettings"
 )
 
-func chatOverlaySubscriptionKeyCreate(userId string) string {
-	return chatOverlaySubscriptionKey + "." + userId
+func chatOverlaySubscriptionKeyCreate(id, userId string) string {
+	return chatOverlaySubscriptionKey + "." + userId + "." + id
 }

apps/api-gql/schema/overlays.graphqls

@@ -1,13 +1,14 @@
 extend type Query {
-	chatOverlay: ChatOverlay! @isAuthenticated @hasChannelRolesDashboardPermission(permission: VIEW_OVERLAYS)
+	chatOverlays: [ChatOverlay!]! @isAuthenticated @hasChannelRolesDashboardPermission(permission: VIEW_OVERLAYS)
+	chatOverlaysById(id: String!): ChatOverlay @isAuthenticated @hasChannelRolesDashboardPermission(permission: VIEW_OVERLAYS)
 }
 
 extend type Mutation {
 	chatOverlayUpdate(opts: ChatOverlayUpdateOpts!): Boolean! @isAuthenticated @hasChannelRolesDashboardPermission(permission: MANAGE_OVERLAYS)
 }
 
 extend type Subscription {
-	chatOverlaySettings(apiKey: String!): ChatOverlay!
+	chatOverlaySettings(id: String!, apiKey: String!): ChatOverlay
 }
 
 enum ChatOverlayAnimation {
@@ -36,6 +37,7 @@ type ChatOverlay {
 }
 
 input ChatOverlayUpdateOpts {
+	id: String!
 	messageHideTimeout: Int
 	messageShowDelay: Int
 	preset: String

frontend/overlays/.gitignore

@@ -0,0 +1 @@
+src/gql

frontend/overlays/codegen.ts

@@ -0,0 +1,27 @@
+import { join, resolve } from 'node:path'
+import process from 'node:process'
+
+import type { CodegenConfig } from '@graphql-codegen/cli'
+
+const schemaDir = resolve(join(process.cwd(), '..', '..', 'apps', 'api-gql', 'schema', '*.graphqls'))
+
+const config: CodegenConfig = {
+	config: {
+		scalars: {
+			Upload: 'File',
+		},
+	},
+	schema: schemaDir,
+	documents: ['src/**/*.ts'],
+	ignoreNoDocuments: true, // for better experience with the watcher
+	generates: {
+		'./src/gql/': {
+			preset: 'client',
+			config: {
+				useTypeImports: true,
+			},
+		},
+	},
+}
+
+export default config

frontend/overlays/package.json

@@ -5,7 +5,8 @@
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "codegen": "graphql-codegen"
   },
   "dependencies": {
     "@plugin-web-update-notification/vite": "1.7.1",
@@ -17,21 +18,25 @@
     "@twir/grpc": "workspace:*",
     "@twirapp/dudes-vue": "0.1.0",
     "@twirapp/kappagen": "1.0.1",
+    "@urql/vue": "1.1.3",
     "@vueuse/core": "10.9.0",
     "@zero-dependency/utils": "1.7.7",
     "emoji-regex": "10.3.0",
+    "graphql-ws": "5.16.0",
     "nested-css-to-flat": "1.0.5",
     "obs-websocket-js": "5.0.5",
     "tmi.js": "1.8.5",
     "vue": "3.4.21",
     "vue-router": "4.3.0"
   },
   "devDependencies": {
+    "@graphql-codegen/cli": "5.0.2",
     "@twir/types": "workspace:*",
     "@types/tmi.js": "1.8.6",
     "@vitejs/plugin-vue": "5.0.4",
     "typescript": "5.4.5",
     "vite": "5.2.8",
+    "vite-plugin-watch": "0.3.1",
     "vue-tsc": "2.0.13"
   }
 }

frontend/overlays/src/composables/chat/use-chat-overlay-socket.ts

@@ -1,12 +1,73 @@
+import { useQuery, useSubscription } from '@urql/vue'
 import { createGlobalState, useWebSocket } from '@vueuse/core'
 import { ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
 
 import type { TwirWebSocketEvent } from '@/api.js'
 import type { BadgeVersion, ChatBadge, Settings } from '@twir/frontend-chat'
 
+import { graphql } from '@/gql'
 import { generateSocketUrlWithParams } from '@/helpers.js'
 
 export const useChatOverlaySocket = createGlobalState(() => {
+	const route = useRoute()
+
+	useQuery({
+		query: graphql(`
+			query ChatOverlayWithAdditionalData($overlayId: String!) {
+				authenticatedUser {
+					id
+					twitchProfile {
+						login
+						displayName
+						profileImageUrl
+					}
+				}
+				chatOverlaysById(id: $overlayId) {
+					id
+					messageHideTimeout
+				}
+				twitchGetGlobalBadges {
+					badges {
+						set_id
+						versions {
+							image_url_1x
+						}
+					}
+				}
+				twitchGetChannelBadges {
+					badges {
+						set_id
+						versions {
+							image_url_1x
+						}
+					}
+				}
+			}
+		`),
+		variables: {
+			overlayId: route.query.id,
+		},
+	})
+
+	const sub = useSubscription({
+		query: graphql(`
+			subscription ChatOverlaySettings($id: String!, $apiKey: String!) {
+				chatOverlaySettings(id: $id, apiKey: $apiKey) {
+					id
+					animation
+					fontSize
+				}
+			}
+		`),
+		variables: {
+			id: route.query.id,
+			apiKey: route.params.apiKey,
+		},
+	})
+
+	watch(sub.data, (n) => console.log(n))
+
 	const settings = ref<Settings>({
 		channelId: '',
 		channelName: '',