feat: show human playback markers on timeline

Resolves #105
2026-04-01 11:02:48 -07:00
parent 4d1ad717ad
commit 7c77d02ab5
6 changed files with 156 additions and 91 deletions
@@ -98,7 +98,7 @@ export function MediaParticleView({
        />

        {audioSource && (
-          <div className="z-10 absolute bottom-10">
+          <div className="z-10 absolute bottom-20">
            <AudioLevelBars sourceNode={audioSource.sourceNode} />
          </div>
        )}
@@ -1,10 +1,20 @@
 import { cn } from "@/lib/utils";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import type { HumanPresence } from "@/hooks/use-presence-positions";
+
+const MAX_VISIBLE_AVATARS = 3;

 interface PlaybackPageIndicatorProps {
  total: number;
  current: number;
  progress: number;
  onGoTo: (index: number) => void;
+  presenceBySegment?: Map<number, HumanPresence[]>;
 }

 export function PlaybackPageIndicator({
@@ -12,45 +22,79 @@ export function PlaybackPageIndicator({
  current,
  progress,
  onGoTo,
+  presenceBySegment,
 }: PlaybackPageIndicatorProps) {
  if (total === 0) return null;

  return (
-    <div className="flex w-full items-center gap-0.5 px-1">
-      {Array.from({ length: total }, (_, i) => (
-        <button
-          key={i}
-          onClick={(e) => {
-            e.stopPropagation();
-            onGoTo(i);
-          }}
-          className="group relative h-3 flex-1"
-        >
-          {/* Dim track */}
-          <div
-            className={cn(
-              "absolute inset-x-0 top-0 h-1 bg-white/30 transition-all",
-              "group-hover:h-1.5 group-hover:top-0.5",
+    <div className="flex w-full items-end gap-px leading-none">
+      {Array.from({ length: total }, (_, i) => {
+        const presence = presenceBySegment?.get(i);
+        return (
+          <div key={i} className="flex flex-1 flex-col items-stretch">
+            {/* Presence avatars above the track */}
+            {presence && presence.length > 0 && (
+              <SegmentPresenceAvatars presence={presence} />
            )}
-          />
-          {/* Fill */}
-          <div
-            className={cn(
-              "absolute left-0 top-0 h-1 bg-white/90 transition-all",
-              "group-hover:h-1.5 group-hover:top-0.5",
-            )}
-            style={{
-              width:
-                i < current
-                  ? "100%"
-                  : i === current
-                    ? `${progress * 100}%`
-                    : "0%",
-              transition: i === current ? "width 300ms linear" : "none",
-            }}
-          />
-        </button>
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                onGoTo(i);
+              }}
+              className="group relative block h-3 w-full"
+            >
+              {/* Dim track */}
+              <div className="absolute inset-x-0 bottom-0 h-[3px] bg-white/30 transition-all group-hover:h-1.5" />
+              {/* Fill */}
+              <div
+                className="absolute left-0 bottom-0 h-[3px] bg-white/90 transition-all group-hover:h-1.5"
+                style={{
+                  width:
+                    i < current
+                      ? "100%"
+                      : i === current
+                        ? `${progress * 100}%`
+                        : "0%",
+                  transition: i === current ? "width 300ms linear" : "none",
+                }}
+              />
+            </button>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function SegmentPresenceAvatars({
+  presence,
+}: {
+  presence: HumanPresence[];
+}) {
+  const visible = presence.slice(0, MAX_VISIBLE_AVATARS);
+  const overflow = presence.length - MAX_VISIBLE_AVATARS;
+
+  return (
+    <div className="flex items-center justify-center -space-x-1.5 pb-0.5">
+      {visible.map((human) => (
+        <Tooltip key={human.humanId}>
+          <TooltipTrigger asChild>
+            <Avatar size="xs" className="ring-1 ring-black/50">
+              <AvatarFallback>
+                {human.emailPrefix.slice(0, 2).toUpperCase()}
+              </AvatarFallback>
+            </Avatar>
+          </TooltipTrigger>
+          <TooltipContent side="top" className="text-xs">
+            {human.email}
+          </TooltipContent>
+        </Tooltip>
      ))}
+      {overflow > 0 && (
+        <span className="text-[10px] text-white/70 pl-1">
+          +{overflow}
+        </span>
+      )}
    </div>
  );
 }
@@ -20,6 +20,7 @@ import { WindowControls } from "@/components/window-controls";
 import { RelativeTimestamp } from "@/components/relative-timestamp";
 import { useStreamPlayback } from "@/hooks/use-stream-playback";
 import { usePrefetchAdjacentMedia } from "@/hooks/use-prefetch-adjacent-media";
+import { usePresencePositions } from "@/hooks/use-presence-positions";
 import { getInitials } from "@/lib/utils";

 function getParticleDisplayName(particle: Particle): string {
@@ -119,6 +120,15 @@ export function StreamView({ path, streamParticle }: StreamViewProps) {

  usePrefetchAdjacentMedia(children, currentIndex);

+  const authedUser = useAuthStore((s) => s.user);
+  const network = useNetwork(networkId);
+  const presenceBySegment = usePresencePositions(
+    streamParticle.playback_markers,
+    children,
+    network?.humans,
+    authedUser?.id,
+  );
+
  const [composeActive, setComposeActive] = useState(false);
  const [progress, setProgress] = useState(0);

@@ -268,16 +278,6 @@ export function StreamView({ path, streamParticle }: StreamViewProps) {
      {/* Bottom gradient safe zone — keeps captions & controls readable */}
      <div className="pointer-events-none absolute inset-x-0 bottom-0 z-[5] h-48 bg-gradient-to-t from-black/60 to-transparent" />

-      {/* Progress indicator */}
-      <div className="z-10 absolute left-0 right-0">
-        <PlaybackPageIndicator
-          total={children.length}
-          current={currentIndex}
-          progress={progress}
-          onGoTo={goTo}
-        />
-      </div>
-
      <div className="z-10 absolute left-0 right-0 mt-3">
        <TopBar networkId={networkId} particle={currentParticle} streamParticle={streamParticle} />
      </div>
@@ -303,9 +303,6 @@ export function StreamView({ path, streamParticle }: StreamViewProps) {

      {/* Bottom-left: metadata */}
      <div className="absolute bottom-0 left-0 z-10 flex items-center gap-2 px-2 pb-2 text-xs text-white/70">
-        {currentParticle && (
-          <SeenIndicator stream={streamParticle} currentParticle={currentParticle} networkId={networkId} />
-        )}
        {exitRemainingMs !== null && (
          <span className="rounded-full bg-black/30 px-2 py-1 backdrop-blur-sm">
            Closing in {Math.ceil(exitRemainingMs / 1000)}s
@@ -324,6 +321,17 @@ export function StreamView({ path, streamParticle }: StreamViewProps) {
          </span>
        </ControlsIndicator>
      </div>
+
+      {/* Progress indicator — bottom */}
+      <div className="z-10 absolute inset-x-0 bottom-0 mb-12">
+        <PlaybackPageIndicator
+          total={children.length}
+          current={currentIndex}
+          progress={progress}
+          onGoTo={goTo}
+          presenceBySegment={presenceBySegment}
+        />
+      </div>
    </div>
  );
 }
@@ -388,7 +396,7 @@ function TopBar({ networkId, particle, streamParticle }: { networkId: string; pa
                      </AvatarFallback>
                    </Avatar>
                  </TooltipTrigger>
-                  <TooltipContent>{human?.email_prefix ?? humanId}</TooltipContent>
+                  <TooltipContent>{human?.email ?? humanId}</TooltipContent>
                </Tooltip>
              );
            })}
@@ -446,41 +454,3 @@ function ParticleBreadcrumbContent({ particle, networkId }: { particle: Particle
  )
 }

-// Shows a list of avatars of users who have seen the current particle, based on playback markers in the stream particle.
-const SeenIndicator = ({ stream, currentParticle, networkId }: { stream: Particle & { type: "stream" }, currentParticle: Particle, networkId: string }) => {
-  const authedUser = useAuthStore((s) => s.user);
-  const network = useNetwork(networkId);
-  const playbackMarkers = stream.playback_markers ?? {};
-
-  const seenUserIds = Object.entries(playbackMarkers)
-    .filter(([userId, timestamp]) => timestamp.getTime() >= currentParticle.created_at.getTime() && userId !== authedUser?.id)
-    .map(([userId, _]) => userId);
-
-  const seenHumans = seenUserIds
-    .map((userId) => network?.humans?.find((h) => h.id === userId))
-    .filter((h): h is NonNullable<typeof h> => !!h && h.id !== currentParticle.created_by_human_id);
-
-  if (seenHumans.length === 0) return null;
-
-  return (
-    <>
-      {"Seen by"}
-      <AvatarGroup>
-        {seenHumans.map((human) => (
-          <Tooltip key={human.id}>
-            <TooltipTrigger asChild>
-              <Avatar size="sm">
-                <AvatarFallback>
-                  {human.email_prefix.slice(0, 2)}
-                </AvatarFallback>
-              </Avatar>
-            </TooltipTrigger>
-            <TooltipContent>
-              <p>Seen by {human.email_prefix}</p>
-            </TooltipContent>
-          </Tooltip>
-        ))}
-      </AvatarGroup>
-    </>
-  );
-}
@@ -75,7 +75,7 @@ export function TranscriptOverlay({
  return (
    <div className={centered
      ? "absolute inset-0 flex items-center justify-center px-6"
-      : "absolute bottom-6 left-0 right-0 flex justify-center px-6"
+      : "absolute bottom-17 left-0 right-0 flex justify-center px-6"
    }>
      <p className="rounded-lg px-5 py-3 text-2xl text-center max-w-lg">
        {activeChunk.map((word, i) => {