49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
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 (
|
|
<StreamView
|
|
streamParticle={particle}
|
|
path={streamPath}
|
|
onExit={() => navigation.goBack()}
|
|
/>
|
|
);
|
|
}
|