feat(overlays): add eruda devtools

frontend/overlays/src/helpers.ts

@@ -76,3 +76,33 @@ export function normalizeDisplayName(displayName: string, userName: string): str
 
 	return userName
 }
+
+export function loadEruda() {
+	const url = new URL(location.href)
+	const isDebug = url.searchParams.get('debug')
+	if (!isDebug) return
+
+	const script = document.createElement('script')
+	script.src = 'https://cdn.jsdelivr.net/npm/[email protected]/eruda.min.js'
+
+	script.onload = () => {
+		if (!window.eruda) return
+		window.eruda.init()
+		window.eruda.show()
+	}
+
+	script.onerror = () => {
+		const error = document.createElement('div')
+		error.textContent = 'Failed to load eruda'
+		Object.assign(error.style, {
+			background: 'red',
+			color: 'white',
+			textAlign: 'center',
+			fontWeight: 'bold',
+			padding: '10px 0',
+		})
+		document.body.prepend(error)
+	}
+
+	document.head.append(script)
+}

frontend/overlays/src/main.ts

@@ -4,15 +4,19 @@ import { createApp } from 'vue'
 import { urqlClientOptions } from '@/plugins/urql.ts'
 
 import MainApp from './app.vue'
-import './style.css'
 import { router } from './plugins/router.js'
+import { loadEruda } from './helpers.js'
+import './style.css'
 
 const app = createApp(MainApp)
 
 app.use(router).use(urql, urqlClientOptions)
 
 app.mount('#app')
 
+// eruda devtools
+loadEruda()
+
 // refresh the page when new version comes
 document.body.addEventListener('plugin_web_update_notice', () => {
 	window.location.reload()

frontend/overlays/src/pages/alerts.vue

@@ -6,12 +6,6 @@ import { useRoute } from 'vue-router'
 import { openApi } from '@/api.ts'
 import { generateSocketUrlWithParams } from '@/helpers.js'
 
-declare global {
-	interface Window {
-		webkitAudioContext: typeof AudioContext
-	}
-}
-
 const queue = ref<Array<{
 	id: string
 	channel_id: string

frontend/overlays/src/pages/tts.vue

@@ -7,12 +7,6 @@ import type { TTSSayMessage } from '@/types.js'
 import { useTTSOverlayGraphQL } from '@/composables/tts/use-tts-graphql.js'
 import { openApi } from '@/api.js'
 
-declare global {
-	interface Window {
-		webkitAudioContext: typeof AudioContext
-	}
-}
-
 const isProcessing = ref(false)
 const queueMessages = ref<TTSSayMessage[]>([])
 const currentAudioBuffer = ref<AudioBufferSourceNode | null>(null)

frontend/overlays/src/vite-env.d.ts

@@ -1,11 +1,13 @@
 /// <reference types="vite/client" />
 
 declare global {
-  interface Window {
-    webkitAudioContext: typeof AudioContext
-  }
+	interface Window {
+		eruda: any
+	}
 }
 
 /// <reference types="vite/client" />
 /// <reference types="vite-svg-loader" />
 declare module '*.vue';
+
+export {}