Add VAD upgrade to production

app.config.ts

@@ -53,7 +53,7 @@ export default ({ config }: ConfigContext): ExpoConfig =>
     owner: 'eten-genesis',
     name: getAppName(appVariant),
     slug: 'langquest',
-    version: '2.0.9',
+    version: '2.0.10',
     orientation: 'portrait',
     icon: iconLight,
     scheme: getScheme(appVariant),

components/AudioPlayer.tsx

@@ -132,7 +132,7 @@ const AudioPlayer: React.FC<AudioPlayerProps> = ({
             style={styles.audioProgressBar}
             max={duration || 100}
             value={isThisAudioPlaying ? position : 0}
-            onValueChange={(value) => handleSliderChange(value[0]!)}
+            onValueChange={(value) => handleSliderChange(value)}
           />
           <View style={styles.audioTimeContainer}>
             <Text style={styles.audioTimeText}>

components/SourceContent.tsx

@@ -25,33 +25,48 @@ export const SourceContent: React.FC<SourceContentProps> = ({
   const { t } = useLocalization();
 
   return (
-    <View className="flex h-[260px] max-h-[260px] flex-col items-center justify-center gap-4 rounded bg-muted p-2">
-      {/* <ScrollView className="flex-1"> */}
-      <Text className="text-base font-bold">
-        {sourceLanguage?.native_name || sourceLanguage?.english_name}
-      </Text>
-      <View className="flex max-h-36 w-full flex-col gap-2 rounded bg-primary-foreground p-2">
-        <ScrollView>
-          <Text className="text-muted-foreground">{content.text}</Text>
+    <View className="flex h-[200px] flex-col items-center gap-2 rounded bg-muted p-3">
+      {/* Language name header */}
+      {sourceLanguage && (
+        <Text className="text-sm font-semibold text-muted-foreground">
+          {sourceLanguage?.native_name || sourceLanguage?.english_name}
+        </Text>
+      )}
+
+      {/* Text content - scrollable */}
+      <View className="w-full flex-1 rounded bg-primary-foreground p-3">
+        <ScrollView
+          showsVerticalScrollIndicator={true}
+          contentContainerStyle={{ flexGrow: 1 }}
+        >
+          <Text className="text-base leading-relaxed text-foreground">
+            {content.text}
+          </Text>
         </ScrollView>
       </View>
-      {/* </ScrollView> */}
-      <View className="flex w-full items-center justify-center">
-        {content.audio && audioSegments ? (
-          <MiniAudioPlayer
-            audioSegments={audioSegments}
-            id={content.id}
-            title={content.text ?? ''}
-            onTranscribe={onTranscribe}
-            isTranscribing={isTranscribing}
-          />
-        ) : content.audio && isLoading ? (
-          <View className="flex flex-row items-center justify-center gap-2">
-            <ActivityIndicator size="small" color={getThemeColor('primary')} />
-            <Text className="text-muted-foreground">{t('loadingAudio')}</Text>
-          </View>
-        ) : null}
-      </View>
+
+      {/* Audio player */}
+      {(content.audio && audioSegments) || (content.audio && isLoading) ? (
+        <View className="w-full items-center justify-center">
+          {audioSegments ? (
+            <MiniAudioPlayer
+              audioSegments={audioSegments}
+              id={content.id}
+              title={content.text ?? ''}
+              onTranscribe={onTranscribe}
+              isTranscribing={isTranscribing}
+            />
+          ) : (
+            <View className="flex-row items-center justify-center gap-2 py-2">
+              <ActivityIndicator
+                size="small"
+                color={getThemeColor('primary')}
+              />
+              <Text className="text-muted-foreground">{t('loadingAudio')}</Text>
+            </View>
+          )}
+        </View>
+      ) : null}
     </View>
   );
 };

components/WaveformVisualization.tsx

@@ -71,6 +71,7 @@ interface WaveformVisualizationProps {
   energyShared: SharedValue<number>; // OPTIMIZED: SharedValue instead of number
   vadThreshold: number;
   isRecordingShared: SharedValue<boolean>; // OPTIMIZED: SharedValue for instant updates
+  isDiscardedShared?: SharedValue<number>; // Trigger to revert recent red bars
   barCount?: number;
   maxHeight?: number;
 }
@@ -80,6 +81,7 @@ export const WaveformVisualization: React.FC<WaveformVisualizationProps> = ({
   energyShared,
   vadThreshold,
   isRecordingShared, // Now a SharedValue - NO SYNC NEEDED!
+  isDiscardedShared,
   barCount = 60,
   maxHeight = 24
 }) => {
@@ -150,28 +152,28 @@ export const WaveformVisualization: React.FC<WaveformVisualizationProps> = ({
     // isRecording removed from deps - we use SharedValue now which updates without recreation
   );
 
-  // TEMPORARILY DISABLED: React to recording state changes to update recent bars
-  // DISABLED FOR TESTING: This reaction might be causing issues if it fires too frequently
-  // The main reaction already sets the last bar's recording state on line 117,
-  // so this retroactive update might be redundant and could cause conflicts.
-  // TODO: Re-enable and optimize if needed, or remove if not necessary
-  /*
+  // Retroactive update: if a segment is discarded, turn all current red bars back to blue
   useAnimatedReaction(
-    () => isRecordingShared.value,
-    (isRecording, previousIsRecording) => {
+    () => isDiscardedShared?.value ?? 0,
+    (discardCount, previousDiscardCount) => {
       'worklet';
-      if (!isVisible || previousIsRecording === isRecording) return;
-
-      // Update the most recent 5 bars to match the new recording state
-      // This ensures smooth color transitions when recording state changes
-      const barsToUpdate = Math.min(5, barCount);
-      for (let i = barCount - barsToUpdate; i < barCount; i++) {
-        waveformRecordingState[i]!.value = isRecording;
+      if (
+        !isVisible ||
+        discardCount === 0 ||
+        discardCount === previousDiscardCount
+      )
+        return;
+
+      // When a discard happens, revert all red bars in the current view to blue
+      // This creates the "retroactive blue" effect
+      for (let i = 0; i < barCount; i++) {
+        if (waveformRecordingState[i]!.value) {
+          waveformRecordingState[i]!.value = false;
+        }
       }
     },
-    [isVisible, barCount]
+    [isVisible, barCount, isDiscardedShared]
   );
-  */
 
   // Reset when hidden
   useEffect(() => {