fix the stuff jules and codex broke xD

Author: alexanderknott

frontend/bun.lock

@@ -180,7 +180,6 @@ const focusedElement = ref(null)
 const audioControls = ref(null)
 
 function onVolumeChange(val) {
-  localVolume.value = val
   emits('handleVolumeChange', { target: { value: val } })
 }
 function handleGenerateSpeech() { 

frontend/package-lock.json

@@ -20,8 +20,13 @@ export function useAudioContext() {
   }
 
   function setVolume(volume) {
+    console.log('useAudioContext setVolume - input volume:', volume)
     if (gainNode.value) {
+      console.log('useAudioContext setVolume - gainNode exists, setting gain value')
       gainNode.value.gain.value = volume
+      console.log('useAudioContext setVolume - gainNode.gain.value after:', gainNode.value.gain.value)
+    } else {
+      console.log('useAudioContext setVolume - gainNode is null/undefined')
     }
   }
 

frontend/src/components/MainContent.vue

@@ -1,20 +1,26 @@
 import { ref } from 'vue'
+import { storeToRefs } from 'pinia'
 import { useTTSStore } from '../stores/ttsStore'
 
 export function usePlayback(audioContext, gainNode) {
   const ttsStore = useTTSStore()
   const {
     volume,
-    setVolumeAndApply,
     isPlaying,
     currentSource,
     playbackProgress,
-    currentTime,
+    currentTime
+  } = storeToRefs(ttsStore)
+  const {
+    setVolumeAndApply,
     setIsPlaying,
     setCurrentSource,
     setPlaybackProgress,
     setCurrentTime
   } = ttsStore
+  
+  console.log('currentSource from ttsStore in usePlayback:', currentSource);
+  console.log('typeof currentSource from ttsStore:', typeof currentSource);
   const startTime = ref(0)
   const pausedTime = ref(0)
   const totalDuration = ref(0)
@@ -116,10 +122,20 @@ export function usePlayback(audioContext, gainNode) {
 
   function handleVolumeChange(event, setVolume) {
     const newVol = parseInt(event.target.value)
+    console.log('handleVolumeChange - raw value:', event.target.value)
+    console.log('handleVolumeChange - parsed newVol:', newVol)
+    console.log('handleVolumeChange - current volume.value before:', volume.value)
     setVolumeAndApply(newVol, setVolume)
-    event.target.style.setProperty('--volume-percentage', `${volume.value}%`)
+    console.log('handleVolumeChange - current volume.value after:', volume.value)
+    // Only set CSS property if the target has a style object (real DOM element)
+    if (event.target.style && event.target.style.setProperty) {
+      event.target.style.setProperty('--volume-percentage', `${volume.value}%`)
+    }
   }
 
+  console.log('About to return from usePlayback. currentSource is:', currentSource);
+  console.log('typeof currentSource before return:', typeof currentSource);
+  
   return {
     isPlaying,
     currentSource,

frontend/src/composables/useAudioContext.js

@@ -52,6 +52,8 @@ export function useTTS() {
     togglePlayback
   } = usePlayback(audioContext, gainNode)
 
+  console.log('currentSource in useTTS setup:', currentSource);
+
   // Audio chunks management
   const { chunkCache, currentChunkIndex, fetchAudioChunk, fetchNextChunks, resetChunks } = useAudioChunks(audioContext)
 
@@ -64,6 +66,8 @@ export function useTTS() {
 
   // Single speaker generation
   async function generateSpeech(text, voice) {
+    console.log('currentSource at start of generateSpeech:', currentSource);
+    
     if (!text.trim()) {
       progressMessage.value = 'Please enter some text'
       return
@@ -97,6 +101,9 @@ export function useTTS() {
       // make sure we start in streaming mode for new generations:
       streamingMode = true
 
+      console.log('About to check currentSource.value. currentSource is:', currentSource);
+      console.log('typeof currentSource:', typeof currentSource);
+      
       if (currentSource.value) {
         currentSource.value.onended = null
         currentSource.value.stop()
@@ -132,6 +139,8 @@ export function useTTS() {
       await playNextChunk(text, voice)
     } catch (error) {
       console.error('Error during speech generation:', error)
+      console.log('currentSource IN CATCH BLOCK:', currentSource);
+      console.log('typeof currentSource IN CATCH BLOCK:', typeof currentSource);
       progressMessage.value = `Error: ${error.message}`
       isGenerating.value = false
       setIsPlaying(false)
@@ -315,9 +324,9 @@ export function useTTS() {
   }
 
   function setSyncedVolume(newVolumeValue) {
-    // newVolumeValue is expected to be 0-100 from UI controls
-    // setVolumeAndApply from the store will handle calling applyVolumeToAudioContext
-    setVolumeAndApply(newVolumeValue, applyVolumeToAudioContext);
+    // newVolumeValue is already normalized (0-1) from usePlayback
+    // Just apply it directly to the audio context
+    applyVolumeToAudioContext(newVolumeValue);
   }
 
   // When the user clicks play/pause we switch out of streaming mode.

frontend/src/composables/usePlayback.js

@@ -11,6 +11,8 @@ export const useTTSStore = defineStore('tts', () => {
   // Playback state
   const isPlaying = ref(false)
   const currentSource = ref(null)
+  console.log('currentSource created in ttsStore:', currentSource);
+  console.log('typeof currentSource in ttsStore:', typeof currentSource);
   const playbackProgress = ref(0)
   const currentTime = ref(0)
 
@@ -58,9 +60,14 @@ export const useTTSStore = defineStore('tts', () => {
   }
 
   function setVolumeAndApply(val, applyFn) {
+    console.log('setVolumeAndApply - input val:', val)
+    console.log('setVolumeAndApply - volume.value before:', volume.value)
     volume.value = val
+    console.log('setVolumeAndApply - volume.value after:', volume.value)
     if (typeof applyFn === 'function') {
-      applyFn(val / 100)
+      const normalizedVal = val / 100
+      console.log('setVolumeAndApply - calling applyFn with normalized value:', normalizedVal)
+      applyFn(normalizedVal)
     }
   }
 
@@ -72,6 +79,8 @@ export const useTTSStore = defineStore('tts', () => {
     }
   }
 
+  console.log('About to return from ttsStore. currentSource is:', currentSource);
+  
   return {
     volume,
     isGenerating,

frontend/src/composables/useTTS.js

@@ -47,7 +47,7 @@
 @app.options("/{path:path}")
 async def preflight_handler(path: str):
     """Handle CORS preflight checks for any endpoint."""
-    return JSONResponse(status_code=200)
+    return JSONResponse(status_code=200, content={})
 
 # Pydantic models for request validation
 class TTSRequest(BaseModel):