Add Live functionality with LiveScreen and LivePlayer components; enhance SearchScreen with optimized speech handling

components/LivePlayer.tsx

@@ -0,0 +1,66 @@
+import React, { useRef } from "react";
+import { View, StyleSheet, Text, ActivityIndicator } from "react-native";
+import { Video, ResizeMode, AVPlaybackStatus } from "expo-av";
+
+interface LivePlayerProps {
+  streamUrl: string | null;
+  channelTitle?: string | null;
+  onPlaybackStatusUpdate: (status: AVPlaybackStatus) => void;
+}
+
+export default function LivePlayer({ streamUrl, channelTitle, onPlaybackStatusUpdate }: LivePlayerProps) {
+  const video = useRef<Video>(null);
+
+  if (!streamUrl) {
+    return (
+      <View style={styles.container}>
+        <Text>Select a channel to play.</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      <Video
+        ref={video}
+        style={styles.video}
+        source={{
+          uri: streamUrl,
+        }}
+        resizeMode={ResizeMode.CONTAIN}
+        shouldPlay
+        onPlaybackStatusUpdate={onPlaybackStatusUpdate}
+      />
+      {channelTitle && (
+        <View style={styles.overlay}>
+          <Text style={styles.title}>{channelTitle}</Text>
+        </View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#000",
+  },
+  video: {
+    flex: 1,
+    alignSelf: "stretch",
+  },
+  overlay: {
+    position: "absolute",
+    top: 20,
+    left: 20,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    padding: 10,
+    borderRadius: 5,
+  },
+  title: {
+    color: "#fff",
+    fontSize: 18,
+  },
+});