refactor(overlays): use vue instead of react

twirapp · Sep 18, 2023 · 42e9a76 · 42e9a76
1 parent 5be9de3
commit 42e9a76
Show file tree

Hide file tree

Showing 43 changed files with 779 additions and 956 deletions.
diff --git a/.gitignore b/.gitignore
@@ -29,3 +29,5 @@ main.~
 .idea
 !.vscode/extensions.json
 !traefik/*
+
+vite.config.ts.timestamp-*
diff --git a/apps/websockets/internal/namespaces/alerts/alerts.go b/apps/websockets/internal/namespaces/alerts/alerts.go
@@ -2,10 +2,12 @@ package alerts
 
 import (
 	"encoding/json"
+	"net/http"
+	"time"
+
 	"github.com/olahol/melody"
 	"github.com/satont/twir/apps/websockets/internal/namespaces/helpers"
 	"github.com/satont/twir/apps/websockets/types"
-	"net/http"
 )
 
 type Alerts struct {
@@ -43,6 +45,7 @@ func (c *Alerts) SendEvent(channelId, eventName string, data any) error {
 	message := &types.WebSocketMessage{
 		EventName: eventName,
 		Data:      data,
+		CreatedAt: time.Now().UTC().String(),
 	}
 
 	bytes, err := json.Marshal(message)

diff --git a/apps/websockets/internal/namespaces/base.go b/apps/websockets/internal/namespaces/base.go
@@ -3,6 +3,7 @@ package namespaces
 import (
 	"encoding/json"
 	"net/http"
+	"time"
 
 	"github.com/olahol/melody"
 	"github.com/satont/twir/apps/websockets/internal/namespaces/helpers"
@@ -39,6 +40,7 @@ func (c *NameSpace) SendEvent(userId, eventName string, data any) error {
 	message := &types.WebSocketMessage{
 		EventName: eventName,
 		Data:      data,
+		CreatedAt: time.Now().UTC().String(),
 	}
 
 	bytes, err := json.Marshal(message)

diff --git a/apps/websockets/internal/namespaces/obs/handle_message.go b/apps/websockets/internal/namespaces/obs/handle_message.go
@@ -19,7 +19,9 @@ func (c *OBS) handleMessage(session *melody.Session, msg []byte) {
 		return
 	}
 
-	data := &types.WebSocketMessage{}
+	data := &types.WebSocketMessage{
+		CreatedAt: time.Now().UTC().String(),
+	}
 	err := json.Unmarshal(msg, data)
 	if err != nil {
 		c.services.Logger.Error(err)
@@ -133,6 +135,7 @@ func (c *OBS) handleRequestSettings(channelId string) {
 	outCome := &types.WebSocketMessage{
 		EventName: "settings",
 		Data:      obsSettings,
+		CreatedAt: time.Now().UTC().String(),
 	}
 
 	bytes, err := json.Marshal(outCome)

diff --git a/apps/websockets/internal/namespaces/obs/obs.go b/apps/websockets/internal/namespaces/obs/obs.go
@@ -2,6 +2,7 @@ package obs
 
 import (
 	"encoding/json"
+	"time"
 
 	"github.com/olahol/melody"
 	"github.com/satont/twir/apps/websockets/internal/namespaces/helpers"
@@ -70,6 +71,7 @@ func (c *OBS) SendEvent(userId, eventName string, data any) error {
 	message := &types.WebSocketMessage{
 		EventName: eventName,
 		Data:      data,
+		CreatedAt: time.Now().UTC().String(),
 	}
 
 	bytes, err := json.Marshal(message)

diff --git a/apps/websockets/internal/namespaces/registry/overlays/overlays.go b/apps/websockets/internal/namespaces/registry/overlays/overlays.go
@@ -3,6 +3,7 @@ package overlays
 import (
 	"encoding/json"
 	"net/http"
+	"time"
 
 	"github.com/olahol/melody"
 	"github.com/satont/twir/apps/websockets/internal/namespaces/helpers"
@@ -49,6 +50,7 @@ func (c *Registry) SendEvent(channelId, eventName string, data any) error {
 	message := &types.WebSocketMessage{
 		EventName: eventName,
 		Data:      data,
+		CreatedAt: time.Now().UTC().String(),
 	}
 
 	bytes, err := json.Marshal(message)

diff --git a/apps/websockets/internal/namespaces/tts/skip.go b/apps/websockets/internal/namespaces/tts/skip.go
@@ -3,6 +3,7 @@ package tts
 import (
 	"context"
 	"encoding/json"
+	"time"
 
 	"github.com/olahol/melody"
 	"github.com/satont/twir/apps/websockets/types"
@@ -14,6 +15,7 @@ func (c *TTS) Skip(ctx context.Context, msg *websockets.TTSSkipMessage) (*emptyp
 	message := &types.WebSocketMessage{
 		EventName: "skip",
 		Data:      msg,
+		CreatedAt: time.Now().UTC().String(),
 	}
 
 	bytes, err := json.Marshal(message)

diff --git a/apps/websockets/internal/namespaces/tts/tts.go b/apps/websockets/internal/namespaces/tts/tts.go
@@ -3,6 +3,7 @@ package tts
 import (
 	"encoding/json"
 	"net/http"
+	"time"
 
 	"github.com/olahol/melody"
 	"github.com/satont/twir/apps/websockets/internal/namespaces/helpers"
@@ -38,6 +39,7 @@ func (c *TTS) SendEvent(userId, eventName string, data any) error {
 	message := &types.WebSocketMessage{
 		EventName: eventName,
 		Data:      data,
+		CreatedAt: time.Now().UTC().String(),
 	}
 
 	bytes, err := json.Marshal(message)

diff --git a/apps/websockets/internal/namespaces/youtube/add_song_to_queue.go b/apps/websockets/internal/namespaces/youtube/add_song_to_queue.go
@@ -3,6 +3,7 @@ package youtube
 import (
 	"context"
 	"encoding/json"
+	"time"
 
 	"github.com/olahol/melody"
 	"github.com/satont/twir/apps/websockets/types"
@@ -25,6 +26,7 @@ func (c *YouTube) AddSongToQueue(_ context.Context, msg *websockets.YoutubeAddSo
 	message := &types.WebSocketMessage{
 		EventName: "newTrack",
 		Data:      song,
+		CreatedAt: time.Now().UTC().String(),
 	}
 
 	bytes, err := json.Marshal(message)

diff --git a/apps/websockets/internal/namespaces/youtube/handle_connect.go b/apps/websockets/internal/namespaces/youtube/handle_connect.go
@@ -2,22 +2,23 @@ package youtube
 
 import (
 	"encoding/json"
+	"time"
 
 	"github.com/olahol/melody"
 	"github.com/satont/twir/apps/websockets/types"
 	model "github.com/satont/twir/libs/gomodels"
 )
 
 func (c *YouTube) handleConnect(session *melody.Session) {
-	//const songs = await repository.find({
-	//where: {
+	// const songs = await repository.find({
+	// where: {
 	//	channelId,
 	//		deletedAt: IsNull(),
-	//},
-	//order: {
-	//queuePosition: 'asc',
-	//},
-	//});
+	// },
+	// order: {
+	// queuePosition: 'asc',
+	// },
+	// });
 
 	userId, _ := session.Get("userId")
 
@@ -36,6 +37,7 @@ func (c *YouTube) handleConnect(session *melody.Session) {
 	outCome := &types.WebSocketMessage{
 		EventName: "currentQueue",
 		Data:      currentSongs,
+		CreatedAt: time.Now().UTC().String(),
 	}
 
 	bytes, err := json.Marshal(outCome)

diff --git a/apps/websockets/internal/namespaces/youtube/handle_message.go b/apps/websockets/internal/namespaces/youtube/handle_message.go
@@ -27,7 +27,9 @@ func (c *YouTube) handleMessage(session *melody.Session, msg []byte) {
 		return
 	}
 
-	data := &types.WebSocketMessage{}
+	data := &types.WebSocketMessage{
+		CreatedAt: time.Now().UTC().String(),
+	}
 	err := json.Unmarshal(msg, data)
 	if err != nil {
 		c.services.Logger.Error(err)
@@ -69,7 +71,7 @@ func (c *YouTube) handleMessage(session *melody.Session, msg []byte) {
 	}
 
 	if data.EventName == "pause" {
-		//fmt.Println("get paused")
+		// fmt.Println("get paused")
 	}
 
 }
@@ -156,7 +158,11 @@ func (c *YouTube) handlePlay(userId string, data *playEvent) {
 		message = strings.ReplaceAll(message, "{{songTitle}}", song.Title)
 		message = strings.ReplaceAll(message, "{{songLink}}", songLink)
 		message = strings.ReplaceAll(message, "{{orderedByName}}", song.OrderedByName)
-		message = strings.ReplaceAll(message, "{{orderedByDisplayName}}", song.OrderedByDisplayName.String)
+		message = strings.ReplaceAll(
+			message,
+			"{{orderedByDisplayName}}",
+			song.OrderedByDisplayName.String,
+		)
 
 		c.services.Grpc.Bots.SendMessage(
 			ctx, &bots.SendMessageRequest{

diff --git a/apps/websockets/internal/namespaces/youtube/remove_song_from_queue.go b/apps/websockets/internal/namespaces/youtube/remove_song_from_queue.go
@@ -3,6 +3,7 @@ package youtube
 import (
 	"context"
 	"encoding/json"
+	"time"
 
 	"github.com/olahol/melody"
 	"github.com/satont/twir/apps/websockets/types"
@@ -24,6 +25,7 @@ func (c *YouTube) RemoveSongFromQueue(
 	message := &types.WebSocketMessage{
 		EventName: "removeTrack",
 		Data:      song,
+		CreatedAt: time.Now().UTC().String(),
 	}
 
 	bytes, err := json.Marshal(message)

diff --git a/apps/websockets/types/types.go b/apps/websockets/types/types.go
@@ -23,4 +23,5 @@ type Services struct {
 type WebSocketMessage struct {
 	EventName string `json:"eventName"`
 	Data      any    `json:"data"`
+	CreatedAt string `json:"createdAt"`
 }
diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml
@@ -64,7 +64,7 @@ services:
     restart: unless-stopped
     image: aculeasis/rhvoice-rest
     ports:
-      - "7000:8080"
+      - "7001:8080"
     networks:
       - tsuwari-dev
 

diff --git a/frontend/dashboard/src/components/overlays/obs/settings.vue b/frontend/dashboard/src/components/overlays/obs/settings.vue
@@ -15,15 +15,21 @@ import {
 	NSpace,
 	useMessage,
 } from 'naive-ui';
-import { ref, watch, toRaw } from 'vue';
+import { ref, toRaw, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import { useObsOverlayManager } from '@/api/index.js';
 
 const obsSettingsManager = useObsOverlayManager();
-const obsSettings = obsSettingsManager.getSettings();
+const { refetch, data: settings } = obsSettingsManager.getSettings();
 const obsSettingsUpdater = obsSettingsManager.updateSettings();
 
+onMounted(async () => {
+	const settings = await refetch();
+	if (!settings.data) return;
+	formValue.value = toRaw(settings.data);
+});
+
 const { t } = useI18n();
 
 const formRef = ref<FormInst | null>(null);
@@ -68,11 +74,6 @@ const rules: FormRules = {
 	},
 };
 
-watch(obsSettings.data, (v) => {
-	if (!v) return;
-	formValue.value = toRaw(v);
-}, { immediate: true });
-
 const message = useMessage();
 
 async function save() {
@@ -86,7 +87,7 @@ async function save() {
 }
 
 async function checkConnection() {
-	await obsSettings.refetch();
+	await refetch();
 }
 </script>
 
@@ -127,9 +128,9 @@ async function checkConnection() {
 			/>
 		</n-form-item>
 
-		<n-alert :type="obsSettings.data.value?.isConnected ? 'success' : 'error'" :bordered="false">
+		<n-alert :type="settings?.isConnected ? 'success' : 'error'" :bordered="false">
 			{{
-				obsSettings.data.value?.isConnected ? t('overlays.obs.connected') : t('overlays.obs.notConnected')
+				settings?.isConnected ? t('overlays.obs.connected') : t('overlays.obs.notConnected')
 			}}
 		</n-alert>
 

diff --git a/frontend/overlays/Dockerfile b/frontend/overlays/Dockerfile
diff --git a/frontend/overlays/README.md b/frontend/overlays/README.md
@@ -0,0 +1,18 @@
+# Vue 3 + TypeScript + Vite
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended IDE Setup
+
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+
+## Type Support For `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
+
+If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+
+1. Disable the built-in TypeScript Extension
+   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
+   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
+2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
diff --git a/frontend/overlays/index.html b/frontend/overlays/index.html
@@ -1,12 +1,12 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Overlays</title>
   </head>
   <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/frontend/overlays/package.json b/frontend/overlays/package.json
@@ -1,28 +1,26 @@
 {
-  "name": "@twir/overlays",
+  "name": "overlays",
   "private": true,
+  "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "node ./vite.dev.js",
-    "build": "tsc && vite build",
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
     "preview": "vite preview"
   },
   "dependencies": {
     "@protobuf-ts/twirp-transport": "^2.9.1",
     "@twir/grpc": "workspace:^",
+    "@vueuse/core": "^10.4.1",
     "nested-css-to-flat": "^1.0.5",
     "obs-websocket-js": "^5.0.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.12.1",
-    "react-use-websocket": "^4.3.1",
-    "socket.io-client": "^4.6.2"
+    "vue": "^3.3.4",
+    "vue-router": "^4.2.4"
   },
   "devDependencies": {
-    "@types/react": "^18.2.12",
-    "@types/react-dom": "^18.2.5",
-    "@vitejs/plugin-react": "^4.0.0",
-    "typescript": "^5.1.3",
-    "vite": "^4.3.9"
+    "@vitejs/plugin-vue": "^4.2.3",
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5",
+    "vue-tsc": "^1.8.5"
   }
 }