streamplace streaming tools
6
fork

Configure Feed

Select the types of activity you want to include in your feed.

Remove TTS timeout, replace with date time checking

Woovie 2bf1e112 964eb1c0

+32 -35
+32 -35
src/App.vue
··· 2 2 // A lot of initial code structure jacked from Julie 3 3 // https://tangled.org/strings/juli.ee/3m2vdj7abbf22 4 4 // My implementation focuses on making it "Vueish" and implementing TTS 5 - import { ref, onMounted } from "vue" 5 + import { ref, onMounted, computed } from "vue" 6 6 import type { Ref } from "vue" 7 7 import { verifyStreamplaceDid, type VerificationResult } from "./composables/useDidVerification" 8 8 ··· 89 89 parseString 90 90 ) 91 91 92 - const ttsTimeout = getParam( 93 - 'ttsTimeout', 94 - 'VITE_TTS_TIMEOUT', 95 - 3000, 96 - parsePositiveNumber 97 - ) 92 + // Removed VITE_TTS_TIMEOUT - now using VITE_CHAT_LIFE age check instead 98 93 99 94 const repeatUsernames = getParam( 100 95 'repeatUsernames', ··· 115 110 console.warn('VITE_STREAMPLACE_DID not set or invalid. Websocket connection may fail.') 116 111 } 117 112 118 - console.log(`Starting websocket with username ${streamplaceUsername} and TTS timeout ${ttsTimeout}ms`) 113 + console.log(`Starting websocket with username ${streamplaceUsername}. Messages older than ${chatLifespan.value}s will be filtered.`) 119 114 120 115 // TODO enum this 121 116 const websocketStatus = ref<string>('not connected') ··· 132 127 133 128 const lastChatter = ref<string>("") 134 129 135 - // TODO replace with debouncer that waits 100ms or so between initial payload of messageView objects 136 130 const enableTTS = ref(false) 137 131 138 - type ChatMessages = Ref<Map<number, ChatPayload>>; 139 - 140 - const initialChats = ref<ChatMessages>(new Map()) 132 + type ChatMessages = Map<number, ChatPayload> 141 133 142 134 const chatMessages = ref<ChatMessages>(new Map()) 143 135 136 + // Convert import.meta.env to an array of [key, value] pairs for display 137 + const envVars = computed(() => { 138 + return Object.entries(import.meta.env) 139 + .filter(([key]) => key.startsWith('VITE_')) 140 + .sort((a, b) => a[0].localeCompare(b[0])) 141 + }) 142 + 144 143 onMounted(async () => { 145 144 try { 146 145 const response = await fetch('/api/voices') ··· 229 228 230 229 ws.onopen = () => { 231 230 websocketStatus.value = "connected" 232 - setTimeout(() => { 233 - chatMessages.value = new Map([...initialChats.value.entries()].sort((a, b) => a[0] - b[0])) 234 - enableTTS.value = true 235 - console.log("enabled TTS") 236 - }, ttsTimeout) 231 + enableTTS.value = true 232 + console.log("TTS enabled - filtering messages by age") 237 233 } 238 234 239 235 ws.onmessage = (event) => { ··· 278 274 } 279 275 280 276 function addChatLine(author: string, message: string, color: Color, createdAt: string, chatTime: number) { 281 - if (!enableTTS.value) { 282 - initialChats.value.set(chatTime, { 283 - handle: author, 284 - message: message, 285 - color: color, 286 - created: createdAt 287 - }); 288 - } else { 289 - chatMessages.value.set(chatTime, { 290 - handle: author, 291 - message: message, 292 - color: color, 293 - created: createdAt 294 - }); 295 - } 277 + chatMessages.value.set(chatTime, { 278 + handle: author, 279 + message: message, 280 + color: color, 281 + created: createdAt 282 + }) 296 283 setTimeout(() => { 297 284 chatMessages.value.delete(chatTime) 298 285 }, chatLifespan.value * 1000) ··· 319 306 320 307 // TODO i _think_ i'm calling this too often. i already removed it fro mws.onerror, but maybe it also doesn't need to be called in the catch on the websocket try? 321 308 function connectionRestartExponentialBackoff() { 322 - enableTTS.value = false // We need to disable TTS, otherwise on reconnect we'll get a flood of audio 309 + enableTTS.value = false 323 310 websocketStatus.value = "disconnected" 324 311 failures += 1 325 312 const delay = 3000 * Math.pow(2, Math.min(failures - 1, 5)) ··· 355 342 </div> 356 343 <div id="settingsContainer" v-if="showSettingsButton"> 357 344 <div id="settingsUI"> 345 + <div class="optionRow"> 346 + <h1>Status</h1> 347 + <div class="option"> 348 + <ul> 349 + <li v-for="[key, value] in envVars" :key="key"> 350 + <strong>{{ key }}:</strong> {{ value }} 351 + </li> 352 + </ul> 353 + </div> 354 + </div> 358 355 <div class="option"> 359 356 <h1>Default Voice Select</h1> 360 357 <select name="model" v-model="voiceSelector"> ··· 372 369 </div> 373 370 <div class="option"> 374 371 <h1>Websocket Status</h1> 375 - <h2>User: {{ streamplaceUsername }}</h2> 372 + <h2>Configured user: {{ streamplaceUsername }}</h2> 376 373 <h2 v-if="isVerifying">Verifying...</h2> 377 374 <h2 v-else-if="verificationStatus?.isValid" style="color: #4ade80;"> 378 - ✓ Verified: {{ verificationStatus.profile?.displayName || verificationStatus.profile?.handle }} 375 + ✓ Verified: {{ verificationStatus.profile?.handle }} 379 376 </h2> 380 377 <h2 v-else-if="verificationStatus && !verificationStatus.isValid" style="color: #f87171;"> 381 378 ✗ {{ verificationStatus.error }}