fix: implement stream playback cleaner structure
This commit is contained in:
talksik
@@ -1,7 +1,7 @@
|
||||
import { Particle } from "@/api/types";
|
||||
import { useLiveParticleChildren } from "@/hooks/use-particle";
|
||||
import type { ParticlePath } from "@/lib/particle-path";
|
||||
import { useComposeKeyboard } from "@/features/compose/use-compose-keyboard";
|
||||
import { parseParticlePath, type ParticlePath } from "@/lib/particle-path";
|
||||
import { ComposeOverlay } from "@/features/compose/compose-overlay";
|
||||
|
||||
interface FolderViewProps {
|
||||
folderParticle: Particle;
|
||||
@@ -9,14 +9,15 @@ interface FolderViewProps {
|
||||
}
|
||||
|
||||
export function FolderView({ path, folderParticle }: FolderViewProps) {
|
||||
useComposeKeyboard();
|
||||
const { children, error, isLoading } = useLiveParticleChildren(path);
|
||||
const { networkId } = parseParticlePath(path);
|
||||
|
||||
return (
|
||||
<div className="flex h-full items-center justify-center">
|
||||
<p className="text-muted-foreground text-sm">
|
||||
Folder view — {folderParticle.id}
|
||||
</p>
|
||||
<ComposeOverlay networkId={networkId} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { useMemo } from "react";
|
||||
import { useComposeKeyboard } from "@/features/compose/use-compose-keyboard";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Radio } from "lucide-react";
|
||||
import { useLiveParticleChildren } from "@/hooks/use-particle";
|
||||
@@ -9,7 +8,6 @@ import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { Progress } from "@/components/ui/progress";
|
||||
import { Small } from "@/components/ui/typography";
|
||||
import ControlsIndicator from "@/features/compose/controls-indicator";
|
||||
import type { Particle, StreamProperties } from "@/api/types";
|
||||
|
||||
function StreamRow({
|
||||
@@ -55,7 +53,6 @@ interface ParticleListViewProps {
|
||||
* List of stream particles for a container (network root, folder, etc.).
|
||||
*/
|
||||
export function ParticleListView({ path }: ParticleListViewProps) {
|
||||
useComposeKeyboard();
|
||||
const { children, isLoading } = useLiveParticleChildren(path);
|
||||
const { networkId } = parseParticlePath(path);
|
||||
const navigate = useNavigate();
|
||||
@@ -69,14 +66,6 @@ export function ParticleListView({ path }: ParticleListViewProps) {
|
||||
return <Progress />;
|
||||
}
|
||||
|
||||
if (streams.length === 0) {
|
||||
return (
|
||||
<div className="flex flex-col h-full items-center justify-center gap-2">
|
||||
<ControlsIndicator type={"new"} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ScrollArea className="h-full">
|
||||
<div className="py-1">
|
||||
|
||||
@@ -1,16 +1,93 @@
|
||||
import { useEffect, useCallback } from "react";
|
||||
import { useState, useEffect, useCallback, useReducer } from "react";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import type { Particle } from "@/api/types";
|
||||
import { useLiveParticleChildren } from "@/hooks/use-particle";
|
||||
import type { ParticlePath } from "@/lib/particle-path";
|
||||
import { usePlaybackStore } from "@/stores/playback-store";
|
||||
import { useComposeStore } from "@/stores/compose-store";
|
||||
import { useComposeKeyboard } from "@/features/compose/use-compose-keyboard";
|
||||
import { ComposeOverlay } from "@/features/compose/compose-overlay";
|
||||
import { PlaybackPageIndicator } from "@/features/playback/playback-page-indicator";
|
||||
import { ParticleRenderer } from "@/features/playback/particle-renderer";
|
||||
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
|
||||
import ControlsIndicator from "@/features/compose/controls-indicator";
|
||||
|
||||
// --- Playback reducer ---
|
||||
|
||||
type PlaybackStatus = "idle" | "playing" | "ended";
|
||||
|
||||
interface PlaybackState {
|
||||
currentIndex: number;
|
||||
status: PlaybackStatus;
|
||||
paused: boolean;
|
||||
}
|
||||
|
||||
type PlaybackAction =
|
||||
| { type: "INIT"; particleCount: number }
|
||||
| { type: "NEXT"; particleCount: number }
|
||||
| { type: "PREV" }
|
||||
| { type: "GO_TO"; index: number; particleCount: number }
|
||||
| { type: "PAUSE" }
|
||||
| { type: "RESUME" }
|
||||
| { type: "SYNC_PARTICLES"; particleCount: number };
|
||||
|
||||
function playbackReducer(
|
||||
state: PlaybackState,
|
||||
action: PlaybackAction,
|
||||
): PlaybackState {
|
||||
switch (action.type) {
|
||||
case "INIT":
|
||||
return {
|
||||
currentIndex: 0,
|
||||
status: action.particleCount > 0 ? "playing" : "idle",
|
||||
paused: false,
|
||||
};
|
||||
case "NEXT":
|
||||
if (state.currentIndex < action.particleCount - 1) {
|
||||
return { ...state, currentIndex: state.currentIndex + 1, paused: false };
|
||||
}
|
||||
return { ...state, status: "ended", paused: false };
|
||||
case "PREV":
|
||||
if (state.currentIndex > 0) {
|
||||
return {
|
||||
...state,
|
||||
currentIndex: state.currentIndex - 1,
|
||||
status: "playing",
|
||||
paused: false,
|
||||
};
|
||||
}
|
||||
return state;
|
||||
case "GO_TO":
|
||||
if (action.index >= 0 && action.index < action.particleCount) {
|
||||
return {
|
||||
...state,
|
||||
currentIndex: action.index,
|
||||
status: "playing",
|
||||
paused: false,
|
||||
};
|
||||
}
|
||||
return state;
|
||||
case "PAUSE":
|
||||
return { ...state, paused: true };
|
||||
case "RESUME":
|
||||
return { ...state, paused: false };
|
||||
case "SYNC_PARTICLES":
|
||||
// Clamp index if particles were removed; don't reset position
|
||||
if (action.particleCount === 0) {
|
||||
return { currentIndex: 0, status: "idle", paused: state.paused };
|
||||
}
|
||||
if (state.currentIndex >= action.particleCount) {
|
||||
return { ...state, currentIndex: action.particleCount - 1 };
|
||||
}
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
||||
const initialState: PlaybackState = {
|
||||
currentIndex: 0,
|
||||
status: "idle",
|
||||
paused: false,
|
||||
};
|
||||
|
||||
// --- StreamView ---
|
||||
|
||||
interface StreamViewProps {
|
||||
streamParticle: Particle;
|
||||
path: ParticlePath;
|
||||
@@ -21,44 +98,44 @@ export function StreamView({ path, streamParticle }: StreamViewProps) {
|
||||
const navigate = useNavigate();
|
||||
const { children } = useLiveParticleChildren(path);
|
||||
|
||||
const status = usePlaybackStore((s) => s.status);
|
||||
const currentIndex = usePlaybackStore((s) => s.currentIndex);
|
||||
const particles = usePlaybackStore((s) => s.particles);
|
||||
const initStream = usePlaybackStore((s) => s.initStream);
|
||||
const goTo = usePlaybackStore((s) => s.goTo);
|
||||
const next = usePlaybackStore((s) => s.next);
|
||||
const prev = usePlaybackStore((s) => s.prev);
|
||||
const pause = usePlaybackStore((s) => s.pause);
|
||||
const resume = usePlaybackStore((s) => s.resume);
|
||||
const reset = usePlaybackStore((s) => s.reset);
|
||||
const [state, dispatch] = useReducer(playbackReducer, initialState);
|
||||
const [composeActive, setComposeActive] = useState(false);
|
||||
|
||||
// Compose keyboard (backtick, t, q, escape-during-compose)
|
||||
useComposeKeyboard();
|
||||
|
||||
// Init playback when children change
|
||||
// Init playback when the stream particle changes
|
||||
useEffect(() => {
|
||||
if (children.length > 0) {
|
||||
initStream(streamParticle.id, children, 0);
|
||||
}
|
||||
return () => reset();
|
||||
}, [children, streamParticle.id, initStream, reset]);
|
||||
dispatch({ type: "INIT", particleCount: children.length });
|
||||
}, [streamParticle.id]);
|
||||
|
||||
// Sync when children list changes (e.g. new particle appended via Firestore)
|
||||
useEffect(() => {
|
||||
dispatch({ type: "SYNC_PARTICLES", particleCount: children.length });
|
||||
}, [children.length]);
|
||||
|
||||
// Pause/resume playback when compose overlay opens/closes
|
||||
useEffect(() => {
|
||||
return useComposeStore.subscribe((state) => {
|
||||
if (state.step !== "idle") {
|
||||
pause();
|
||||
} else {
|
||||
resume();
|
||||
}
|
||||
});
|
||||
}, [pause, resume]);
|
||||
if (composeActive) dispatch({ type: "PAUSE" });
|
||||
else dispatch({ type: "RESUME" });
|
||||
}, [composeActive]);
|
||||
|
||||
const next = useCallback(() => {
|
||||
dispatch({ type: "NEXT", particleCount: children.length });
|
||||
}, [children.length]);
|
||||
|
||||
const prev = useCallback(() => {
|
||||
dispatch({ type: "PREV" });
|
||||
}, []);
|
||||
|
||||
const goTo = useCallback(
|
||||
(index: number) => {
|
||||
dispatch({ type: "GO_TO", index, particleCount: children.length });
|
||||
},
|
||||
[children.length],
|
||||
);
|
||||
|
||||
// Playback keyboard: arrows, escape
|
||||
const handleKeyDown = useCallback(
|
||||
(e: KeyboardEvent) => {
|
||||
const composeStep = useComposeStore.getState().step;
|
||||
if (composeStep !== "idle") return;
|
||||
if (composeActive) return;
|
||||
|
||||
const target = e.target as HTMLElement;
|
||||
if (
|
||||
@@ -86,7 +163,7 @@ export function StreamView({ path, streamParticle }: StreamViewProps) {
|
||||
break;
|
||||
}
|
||||
},
|
||||
[next, prev, navigate, networkId],
|
||||
[composeActive, next, prev, navigate, networkId],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -94,7 +171,7 @@ export function StreamView({ path, streamParticle }: StreamViewProps) {
|
||||
return () => window.removeEventListener("keydown", handleKeyDown);
|
||||
}, [handleKeyDown]);
|
||||
|
||||
const currentParticle = particles[currentIndex] ?? null;
|
||||
const currentParticle = children[state.currentIndex] ?? null;
|
||||
|
||||
// Stream name from properties (narrowed to stream type)
|
||||
const streamName =
|
||||
@@ -113,6 +190,11 @@ export function StreamView({ path, streamParticle }: StreamViewProps) {
|
||||
No particles in this stream yet
|
||||
</p>
|
||||
<ControlsIndicator type="reply" />
|
||||
<ComposeOverlay
|
||||
networkId={networkId!}
|
||||
targetPath={path}
|
||||
onActiveChange={setComposeActive}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -120,10 +202,10 @@ export function StreamView({ path, streamParticle }: StreamViewProps) {
|
||||
return (
|
||||
<div className="relative flex h-full flex-col bg-black text-white">
|
||||
{/* Progress indicator */}
|
||||
<div className="z-10 pt-1">
|
||||
<div className="z-10 absolute left-0 right-0">
|
||||
<PlaybackPageIndicator
|
||||
total={particles.length}
|
||||
current={currentIndex}
|
||||
total={children.length}
|
||||
current={state.currentIndex}
|
||||
onGoTo={goTo}
|
||||
/>
|
||||
</div>
|
||||
@@ -144,18 +226,27 @@ export function StreamView({ path, streamParticle }: StreamViewProps) {
|
||||
|
||||
{/* Main playback area */}
|
||||
<div className="flex-1 overflow-hidden">
|
||||
{currentParticle && status !== "ended" ? (
|
||||
<ParticleRenderer particle={currentParticle} />
|
||||
) : (
|
||||
<div className="flex h-full items-center justify-center">
|
||||
<p className="text-muted-foreground text-sm">End of stream</p>
|
||||
</div>
|
||||
{currentParticle && (
|
||||
<ParticleRenderer
|
||||
particle={currentParticle}
|
||||
paused={state.paused}
|
||||
onNext={next}
|
||||
onPrev={prev}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Stream name overlay */}
|
||||
<div className="z-10 flex items-center justify-center pb-3 pt-1">
|
||||
<span className="text-sm font-medium text-white/60">{streamName}</span>
|
||||
<ComposeOverlay
|
||||
networkId={networkId!}
|
||||
targetPath={path}
|
||||
onActiveChange={setComposeActive}
|
||||
/>
|
||||
|
||||
{/* Bottom overlay: stream info + reply */}
|
||||
<div className="absolute right-0 bottom-0 z-10 flex justify-center p-2">
|
||||
<div className="flex w-full items-center gap-2.5 rounded-full bg-black/30 px-2 py-2 backdrop-blur-sm">
|
||||
<ControlsIndicator type={"reply"} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user