mobile v0.1 with deployment for ios (#191)

* stage 1: project init * stage 2: skeleton with navigation * step 2.5: streams list * step 4: stream playback experience * step 5-6: compose experience * fix: broken record * transcode media particles to mp4 * build: reproducible go generate * build: rename skaffold module for particle processor worker * infra: increase particle processor worker resources Was dealing with OOM errors * tweaks to mobile * log transcode work * view on desktop placeholder * tweak padding * cap video resolution to save on memory * infra: bump memory limits as insurance * ux improvements * update bundle id for mobile * config for mobile
2026-04-29 17:39:11 -07:00
parent 3a11a82cd3
commit e3461dd5cd
110 changed files with 14682 additions and 22 deletions
@@ -0,0 +1,64 @@
+import { Text, View } from "react-native";
+import type { Network, Particle } from "@/api/types";
+import { resolveHumanDisplay } from "@/lib/humans";
+import { RelativeTimestamp } from "@/components/RelativeTimestamp";
+import { Avatar } from "@/components/Avatar";
+import { useStreamPresence } from "./stream-presence-context";
+
+interface StreamMetadataHeaderProps {
+  particle: Particle | null;
+  network: Network | null;
+}
+
+/**
+ * Avatar + display name + relative time. Sits below the segmented bar so the
+ * "who/when" answer is always one glance away — Snapchat-style.
+ */
+export function StreamMetadataHeader({
+  particle,
+  network,
+}: StreamMetadataHeaderProps) {
+  const { onlineHumanIds } = useStreamPresence();
+  if (!particle) return null;
+  const display = resolveHumanDisplay(
+    particle.created_by_human_id,
+    network?.humans,
+  );
+
+  const editedAt =
+    particle.type === "text" ? particle.properties.edited_at : undefined;
+  const isOnline = particle.created_by_human_id
+    ? onlineHumanIds.has(particle.created_by_human_id)
+    : false;
+
+  return (
+    <View className="flex-row items-center gap-3">
+      <Avatar
+        humanId={particle.created_by_human_id}
+        humans={network?.humans}
+        size="sm"
+        online={isOnline}
+      />
+      <View className="flex-1">
+        <Text
+          className="text-white text-sm font-semibold"
+          numberOfLines={1}
+        >
+          {display.displayName}
+        </Text>
+        <View className="flex-row items-center gap-2">
+          <RelativeTimestamp
+            date={particle.created_at}
+            className="text-white/60 text-xs"
+          />
+          {editedAt ? (
+            <Text className="text-white/40 text-xs">
+              · edited{" "}
+              <RelativeTimestamp date={editedAt} className="text-white/40" />
+            </Text>
+          ) : null}
+        </View>
+      </View>
+    </View>
+  );
+}