90 lines
2.4 KiB
TypeScript
90 lines
2.4 KiB
TypeScript
import { useEffect } from "react";
|
|
import { Text, View } from "react-native";
|
|
import {
|
|
FileIcon,
|
|
HelpCircle,
|
|
ScrollText,
|
|
BookOpen,
|
|
type LucideIcon,
|
|
} from "lucide-react-native";
|
|
import type { Particle } from "@/api/types";
|
|
import { useNetwork } from "@/hooks/use-networks";
|
|
import { resolveHumanDisplay } from "@/lib/humans";
|
|
|
|
const TYPE_META: Record<string, { icon: LucideIcon; label: string }> = {
|
|
quest: { icon: ScrollText, label: "Quest" },
|
|
paper: { icon: BookOpen, label: "Paper" },
|
|
file: { icon: FileIcon, label: "File" },
|
|
};
|
|
|
|
const PLACEHOLDER_DURATION_MS = 5000;
|
|
|
|
interface FallbackParticleViewProps {
|
|
particle: Particle;
|
|
networkId: string;
|
|
paused: boolean;
|
|
onEnded: () => void;
|
|
}
|
|
|
|
export function FallbackParticleView({
|
|
particle,
|
|
networkId,
|
|
paused,
|
|
onEnded,
|
|
}: FallbackParticleViewProps) {
|
|
const network = useNetwork(networkId);
|
|
const creator = resolveHumanDisplay(
|
|
particle.created_by_human_id,
|
|
network?.humans,
|
|
);
|
|
const meta = TYPE_META[particle.type] ?? {
|
|
icon: HelpCircle,
|
|
label: particle.type,
|
|
};
|
|
const Icon = meta.icon;
|
|
const title = (() => {
|
|
switch (particle.type) {
|
|
case "quest":
|
|
return particle.properties.title;
|
|
case "paper":
|
|
return particle.properties.title;
|
|
case "file":
|
|
return particle.properties.filename;
|
|
case "folder":
|
|
return particle.properties.name;
|
|
default:
|
|
return null;
|
|
}
|
|
})();
|
|
|
|
useEffect(() => {
|
|
if (paused) return;
|
|
const timeout = setTimeout(onEnded, PLACEHOLDER_DURATION_MS);
|
|
return () => clearTimeout(timeout);
|
|
}, [paused, onEnded, particle.id]);
|
|
|
|
return (
|
|
<View className="flex-1 items-center justify-center px-8">
|
|
<View className="bg-white/10 w-full max-w-sm rounded-2xl px-5 py-5">
|
|
<View className="flex-row items-center gap-3">
|
|
<Icon color="rgba(255,255,255,0.7)" size={22} strokeWidth={1.5} />
|
|
<View className="flex-1">
|
|
<Text className="text-white text-base font-semibold">
|
|
{meta.label}
|
|
</Text>
|
|
{title ? (
|
|
<Text className="text-white/70 text-sm" numberOfLines={2}>
|
|
{title}
|
|
</Text>
|
|
) : null}
|
|
</View>
|
|
</View>
|
|
<Text className="text-white/50 mt-4 text-xs">
|
|
From {creator.displayName}
|
|
</Text>
|
|
<Text className="text-white/50 mt-1 text-xs">View on desktop</Text>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|