fix: playback restarting from start of stream
This does a major refactor to using particleId for state of playback instead of index, since index would change if the particle children data does partial hydrations and a particle's index changes. Also it abstracts much of the playback details from the view component.
This commit is contained in:
talksik
@@ -0,0 +1,240 @@
|
||||
import { useCallback, useEffect, useMemo, useReducer, useRef } from "react";
|
||||
import { useAuthStore } from "@/stores/auth-store";
|
||||
import type { Particle } from "@/api/types";
|
||||
import { useLiveParticleChildren } from "@/hooks/use-particle";
|
||||
import { toFirestoreDocPath, type ParticlePath } from "@/lib/particle-path";
|
||||
import { updateStreamPlaybackMarker } from "@/lib/firestore-particles";
|
||||
|
||||
// --- Playback reducer (ID-based) ---
|
||||
|
||||
type PlaybackStatus = "idle" | "playing" | "ended";
|
||||
|
||||
interface PlaybackState {
|
||||
currentParticleId: string | null;
|
||||
status: PlaybackStatus;
|
||||
paused: boolean;
|
||||
initialized: boolean;
|
||||
}
|
||||
|
||||
type PlaybackAction =
|
||||
| { type: "INIT"; particleId: string }
|
||||
| { type: "SET_PARTICLE"; particleId: string }
|
||||
| { type: "END" }
|
||||
| { type: "PARTICLE_REMOVED"; fallbackParticleId: string | null }
|
||||
| { type: "PAUSE" }
|
||||
| { type: "RESUME" };
|
||||
|
||||
const initialState: PlaybackState = {
|
||||
currentParticleId: null,
|
||||
status: "idle",
|
||||
paused: false,
|
||||
initialized: false,
|
||||
};
|
||||
|
||||
function playbackReducer(state: PlaybackState, action: PlaybackAction): PlaybackState {
|
||||
switch (action.type) {
|
||||
case "INIT":
|
||||
return {
|
||||
currentParticleId: action.particleId,
|
||||
status: "playing",
|
||||
paused: false,
|
||||
initialized: true,
|
||||
};
|
||||
case "SET_PARTICLE":
|
||||
return {
|
||||
...state,
|
||||
currentParticleId: action.particleId,
|
||||
status: "playing",
|
||||
paused: false,
|
||||
};
|
||||
case "END":
|
||||
return { ...state, status: "ended", paused: false };
|
||||
case "PARTICLE_REMOVED":
|
||||
if (action.fallbackParticleId) {
|
||||
return { ...state, currentParticleId: action.fallbackParticleId, status: "playing" };
|
||||
}
|
||||
return { ...state, currentParticleId: null, status: "idle" };
|
||||
case "PAUSE":
|
||||
return { ...state, paused: true };
|
||||
case "RESUME":
|
||||
return { ...state, paused: false };
|
||||
}
|
||||
}
|
||||
|
||||
// --- Init timeout ---
|
||||
|
||||
const INIT_FALLBACK_TIMEOUT_MS = 5000;
|
||||
|
||||
// --- Hook ---
|
||||
|
||||
interface UseStreamPlaybackResult {
|
||||
children: Particle[];
|
||||
currentParticle: Particle | null;
|
||||
currentIndex: number;
|
||||
status: PlaybackStatus;
|
||||
paused: boolean;
|
||||
initialized: boolean;
|
||||
next: () => void;
|
||||
prev: () => void;
|
||||
goTo: (index: number) => void;
|
||||
pause: () => void;
|
||||
resume: () => void;
|
||||
}
|
||||
|
||||
export function useStreamPlayback(
|
||||
streamParticle: Particle & { type: "stream" },
|
||||
path: ParticlePath,
|
||||
): UseStreamPlaybackResult {
|
||||
const userId = useAuthStore((s) => s.user?.id);
|
||||
const { children } = useLiveParticleChildren(path, "created_at", "asc");
|
||||
|
||||
const [state, dispatch] = useReducer(playbackReducer, initialState);
|
||||
const initTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
// Track the stream ID we've initialized for, to reset when navigating between streams
|
||||
const initializedForRef = useRef<string | null>(null);
|
||||
|
||||
// Derive current index and particle from ID
|
||||
const currentIndex = useMemo(() => {
|
||||
if (!state.currentParticleId) return -1;
|
||||
return children.findIndex((c) => c.id === state.currentParticleId);
|
||||
}, [children, state.currentParticleId]);
|
||||
|
||||
const currentParticle = currentIndex !== -1 ? children[currentIndex] : null;
|
||||
|
||||
// --- Init logic: runs on every children change until initialized ---
|
||||
useEffect(() => {
|
||||
// Reset if we navigated to a different stream
|
||||
if (initializedForRef.current !== null && initializedForRef.current !== streamParticle.id) {
|
||||
initializedForRef.current = null;
|
||||
if (initTimeoutRef.current) {
|
||||
clearTimeout(initTimeoutRef.current);
|
||||
initTimeoutRef.current = null;
|
||||
}
|
||||
}
|
||||
|
||||
// Already initialized for this stream
|
||||
if (state.initialized && initializedForRef.current === streamParticle.id) return;
|
||||
|
||||
if (children.length === 0) return;
|
||||
|
||||
const playbackPosition = streamParticle.playback_markers?.[userId ?? ""];
|
||||
|
||||
if (!playbackPosition) {
|
||||
// No marker — start from the beginning
|
||||
initializedForRef.current = streamParticle.id;
|
||||
dispatch({ type: "INIT", particleId: children[0].id });
|
||||
return;
|
||||
}
|
||||
|
||||
// Try to find the marker's target particle
|
||||
const found = children.find(
|
||||
(c) => c.created_at.getTime() === playbackPosition.getTime(),
|
||||
);
|
||||
|
||||
if (found) {
|
||||
// Found it — init immediately
|
||||
initializedForRef.current = streamParticle.id;
|
||||
if (initTimeoutRef.current) {
|
||||
clearTimeout(initTimeoutRef.current);
|
||||
initTimeoutRef.current = null;
|
||||
}
|
||||
dispatch({ type: "INIT", particleId: found.id });
|
||||
return;
|
||||
}
|
||||
|
||||
// Marker target not found yet — start timeout if not already running
|
||||
if (!initTimeoutRef.current) {
|
||||
initTimeoutRef.current = setTimeout(() => {
|
||||
initTimeoutRef.current = null;
|
||||
// Fallback: find nearest particle by timestamp, or first child
|
||||
initializedForRef.current = streamParticle.id;
|
||||
dispatch({ type: "INIT", particleId: children[0].id });
|
||||
}, INIT_FALLBACK_TIMEOUT_MS);
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (initTimeoutRef.current) {
|
||||
clearTimeout(initTimeoutRef.current);
|
||||
initTimeoutRef.current = null;
|
||||
}
|
||||
};
|
||||
}, [children, streamParticle.id, streamParticle.playback_markers, userId, state.initialized]);
|
||||
|
||||
// --- Handle current particle disappearing (deletion) ---
|
||||
useEffect(() => {
|
||||
if (!state.initialized || !state.currentParticleId) return;
|
||||
if (children.length === 0) {
|
||||
dispatch({ type: "PARTICLE_REMOVED", fallbackParticleId: null });
|
||||
return;
|
||||
}
|
||||
|
||||
const stillExists = children.some((c) => c.id === state.currentParticleId);
|
||||
if (stillExists) return;
|
||||
|
||||
// Current particle was removed — find nearest neighbor
|
||||
// Use the previous index position, clamped to the new array bounds
|
||||
const fallbackIndex = Math.min(currentIndex, children.length - 1);
|
||||
const fallback = children[Math.max(0, fallbackIndex)];
|
||||
dispatch({ type: "PARTICLE_REMOVED", fallbackParticleId: fallback?.id ?? null });
|
||||
}, [children, state.initialized, state.currentParticleId, currentIndex]);
|
||||
|
||||
// --- Handle new particles appended while at "ended" ---
|
||||
useEffect(() => {
|
||||
if (state.status !== "ended" || !state.currentParticleId) return;
|
||||
|
||||
const idx = children.findIndex((c) => c.id === state.currentParticleId);
|
||||
if (idx !== -1 && idx < children.length - 1) {
|
||||
// New particle after current — advance to it
|
||||
dispatch({ type: "SET_PARTICLE", particleId: children[idx + 1].id });
|
||||
}
|
||||
}, [children, state.status, state.currentParticleId]);
|
||||
|
||||
// --- Persist playback marker ---
|
||||
useEffect(() => {
|
||||
if (!userId || !state.initialized || !currentParticle) return;
|
||||
|
||||
const streamDocPath = toFirestoreDocPath(path);
|
||||
updateStreamPlaybackMarker(streamDocPath, userId, currentParticle.created_at);
|
||||
}, [currentParticle?.id, state.initialized, userId, path]);
|
||||
|
||||
// --- Navigation callbacks ---
|
||||
const next = useCallback(() => {
|
||||
if (currentIndex === -1) return;
|
||||
if (currentIndex < children.length - 1) {
|
||||
dispatch({ type: "SET_PARTICLE", particleId: children[currentIndex + 1].id });
|
||||
} else {
|
||||
dispatch({ type: "END" });
|
||||
}
|
||||
}, [children, currentIndex]);
|
||||
|
||||
const prev = useCallback(() => {
|
||||
if (currentIndex <= 0) return;
|
||||
dispatch({ type: "SET_PARTICLE", particleId: children[currentIndex - 1].id });
|
||||
}, [children, currentIndex]);
|
||||
|
||||
const goTo = useCallback(
|
||||
(index: number) => {
|
||||
if (index >= 0 && index < children.length) {
|
||||
dispatch({ type: "SET_PARTICLE", particleId: children[index].id });
|
||||
}
|
||||
},
|
||||
[children],
|
||||
);
|
||||
|
||||
const pause = useCallback(() => dispatch({ type: "PAUSE" }), []);
|
||||
const resume = useCallback(() => dispatch({ type: "RESUME" }), []);
|
||||
|
||||
return {
|
||||
children,
|
||||
currentParticle,
|
||||
currentIndex,
|
||||
status: state.status,
|
||||
paused: state.paused,
|
||||
initialized: state.initialized,
|
||||
next,
|
||||
prev,
|
||||
goTo,
|
||||
pause,
|
||||
resume,
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user