feat(app): move realtime voice controls into input overlay

2026-02-09 16:19:33 +07:00
parent 4bb536768b
commit ef29319baf
3 changed files with 204 additions and 52 deletions
@@ -0,0 +1,138 @@
+import { ActivityIndicator, Pressable, View } from "react-native";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { Mic, MicOff, Square } from "lucide-react-native";
+import { FOOTER_HEIGHT } from "@/constants/layout";
+import { VolumeMeter } from "./volume-meter";
+
+interface RealtimeVoiceOverlayProps {
+  volume: number;
+  isMuted: boolean;
+  isDetecting: boolean;
+  isSpeaking: boolean;
+  isSwitching: boolean;
+  onToggleMute: () => void;
+  onStop: () => void;
+}
+
+const OVERLAY_BUTTON_SIZE = 44;
+const OVERLAY_VERTICAL_PADDING = (FOOTER_HEIGHT - OVERLAY_BUTTON_SIZE) / 2;
+
+export function RealtimeVoiceOverlay({
+  volume,
+  isMuted,
+  isDetecting,
+  isSpeaking,
+  isSwitching,
+  onToggleMute,
+  onStop,
+}: RealtimeVoiceOverlayProps) {
+  const { theme } = useUnistyles();
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.meterContainer}>
+        <VolumeMeter
+          volume={volume}
+          isMuted={isMuted}
+          isDetecting={isDetecting}
+          isSpeaking={isSpeaking}
+          orientation="horizontal"
+        />
+      </View>
+
+      <View style={styles.actionsContainer}>
+        <Pressable
+          onPress={onToggleMute}
+          disabled={isSwitching}
+          accessibilityRole="button"
+          accessibilityLabel={isMuted ? "Unmute realtime voice" : "Mute realtime voice"}
+          style={[
+            styles.actionButton,
+            styles.muteButton,
+            isMuted ? styles.muteButtonMuted : undefined,
+            isSwitching ? styles.buttonDisabled : undefined,
+          ]}
+        >
+          {isMuted ? (
+            <MicOff size={20} color={theme.colors.palette.white} strokeWidth={2.5} />
+          ) : (
+            <Mic size={20} color={theme.colors.foreground} strokeWidth={2.5} />
+          )}
+        </Pressable>
+
+        <Pressable
+          onPress={onStop}
+          disabled={isSwitching}
+          accessibilityRole="button"
+          accessibilityLabel="Stop realtime voice and interrupt turn"
+          style={[
+            styles.actionButton,
+            styles.stopButton,
+            isSwitching ? styles.buttonDisabled : undefined,
+          ]}
+        >
+          {isSwitching ? (
+            <ActivityIndicator size="small" color={theme.colors.palette.white} />
+          ) : (
+            <Square
+              size={20}
+              color={theme.colors.palette.white}
+              fill={theme.colors.palette.white}
+              strokeWidth={2.5}
+            />
+          )}
+        </Pressable>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    width: "100%",
+    height: FOOTER_HEIGHT,
+    borderRadius: theme.borderRadius["2xl"],
+    justifyContent: "space-between",
+    paddingHorizontal: theme.spacing[4],
+    paddingVertical: OVERLAY_VERTICAL_PADDING,
+    backgroundColor: theme.colors.surface1,
+    borderWidth: theme.borderWidth[1],
+    borderColor: theme.colors.border,
+  },
+  meterContainer: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  actionsContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.spacing[2],
+  },
+  actionButton: {
+    width: OVERLAY_BUTTON_SIZE,
+    height: OVERLAY_BUTTON_SIZE,
+    borderRadius: theme.borderRadius.full,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  muteButton: {
+    backgroundColor: theme.colors.surface0,
+    borderWidth: theme.borderWidth[1],
+    borderColor: theme.colors.border,
+  },
+  muteButtonMuted: {
+    backgroundColor: theme.colors.palette.red[600],
+    borderColor: theme.colors.palette.red[800],
+  },
+  stopButton: {
+    backgroundColor: theme.colors.palette.red[600],
+    borderWidth: theme.borderWidth[1],
+    borderColor: theme.colors.palette.red[800],
+  },
+  buttonDisabled: {
+    opacity: 0.5,
+  },
+}));