step 4: stream playback experience

js/mobile/src/features/stream-view/StreamViewScreen.tsx

@@ -1,17 +1,48 @@
-import { Pressable, Text, View } from "react-native";
+import { ActivityIndicator, Pressable, Text, View } from "react-native";
+import { StatusBar } from "expo-status-bar";
 import type { RootStackScreenProps } from "@/navigation/types";
+import { particlePath } from "@/lib/particle-path";
+import { useLiveParticle } from "@/hooks/use-particle";
+import { StreamView } from "./StreamView";
 
 export function StreamViewScreen({
   navigation,
+  route,
 }: RootStackScreenProps<"StreamView">) {
+  const { networkId, streamId } = route.params;
+  const streamPath = particlePath(networkId, [streamId]);
+  const { particle, isLoading, error } = useLiveParticle(streamPath);
+
+  if (isLoading && !particle) {
+    return (
+      <View className="flex-1 bg-black items-center justify-center">
+        <StatusBar style="light" hidden />
+        <ActivityIndicator color="white" />
+      </View>
+    );
+  }
+
+  if (error || !particle || particle.type !== "stream") {
+    return (
+      <View className="flex-1 bg-black items-center justify-center px-8">
+        <StatusBar style="light" hidden />
+        <Text className="text-white/70 text-center">
+          {error
+            ? "Couldn't load this stream."
+            : "This stream is no longer available."}
+        </Text>
+        <Pressable onPress={() => navigation.goBack()} className="mt-6 px-4 py-2">
+          <Text className="text-white/60">Close</Text>
+        </Pressable>
+      </View>
+    );
+  }
+
   return (
-    <View className="flex-1 bg-black items-center justify-center">
-      <Text className="text-white text-base">
-        Stream view — coming in step 4.
-      </Text>
-      <Pressable onPress={() => navigation.goBack()} className="mt-6 px-4 py-2">
-        <Text className="text-white/70">Close</Text>
-      </Pressable>
-    </View>
+    <StreamView
+      streamParticle={particle}
+      path={streamPath}
+      onExit={() => navigation.goBack()}
+    />
   );
 }