improve attachments experience for media particles
This commit is contained in:
@@ -204,7 +204,7 @@ export function StreamView({ path, streamParticle }: StreamViewProps) {
|
||||
<p className="text-muted-foreground text-sm">
|
||||
No particles in this stream yet
|
||||
</p>
|
||||
<ControlsIndicator type="reply" />
|
||||
<ControlsIndicator type="reply" showEscape={true} />
|
||||
<ComposeOverlay
|
||||
networkId={networkId}
|
||||
targetPath={path}
|
||||
@@ -285,22 +285,24 @@ export function StreamView({ path, streamParticle }: StreamViewProps) {
|
||||
onParticleCreated={onLocalParticleCreated}
|
||||
/>
|
||||
|
||||
{/* Bottom bar: metadata left, controls right */}
|
||||
<div className="absolute inset-x-0 bottom-0 z-10 flex items-end justify-between px-2 pb-2">
|
||||
{/* Left: seen indicator + exit countdown */}
|
||||
<div className="flex items-center gap-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
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{/* 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
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right: recording controls */}
|
||||
<ControlsIndicator type="reply" />
|
||||
{/* Bottom-center: controls */}
|
||||
<div className="absolute inset-x-0 bottom-0 z-10 flex justify-center pb-3">
|
||||
<ControlsIndicator
|
||||
showEscape={true}
|
||||
type="reply"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -315,27 +317,8 @@ function TopBar({ networkId, particle, streamParticle }: { networkId: string; pa
|
||||
|
||||
<Breadcrumb className="no-drag rounded-full bg-black/30 backdrop-blur-sm px-3 py-1 mx-auto">
|
||||
<BreadcrumbList>
|
||||
<BreadcrumbItem className="text-xs">
|
||||
<BreadcrumbLink
|
||||
className="flex cursor-pointer items-center gap-1"
|
||||
onClick={() => navigate("/")}
|
||||
>
|
||||
<Home className="size-3.5" />
|
||||
</BreadcrumbLink>
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbSeparator />
|
||||
<BreadcrumbItem className="text-xs">
|
||||
<BreadcrumbLink
|
||||
className="cursor-pointer"
|
||||
onClick={() => navigate(`/${networkId}`)}
|
||||
>
|
||||
<NetworkBreadcrumbContent networkId={networkId} />
|
||||
</BreadcrumbLink>
|
||||
</BreadcrumbItem>
|
||||
|
||||
{streamParticle && (
|
||||
<>
|
||||
<BreadcrumbSeparator />
|
||||
<BreadcrumbItem className="text-xs">
|
||||
<BreadcrumbPage>{getParticleDisplayName(streamParticle)}</BreadcrumbPage>
|
||||
</BreadcrumbItem>
|
||||
|
||||
Reference in New Issue
Block a user