I’m building a React application that needs to render multiple frame players simultaneously (up to 25 players). Each player displays a sequence of images (10-100 frames) stored in S3, playing at 2 frames per second.
Current Implementation:
- Multiple frame players in a grid layout
- Each player loads and plays image sequences from S3
- Implemented preloading strategy for better performance
- Target framerate: 2 FPS
Technical Specs:
- React (latest version)
- Images hosted on S3
- Each frame player is independent
- Number of players: up to 25
- Frames per player: 10-100
The Issue:
When rendering multiple players with high frame counts simultaneously, some frame player gets stuck. The network tab shows numerous cancelled requests.
Current Frame Player Implementation:
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { formatTime } from '../utils';
export interface FrameData {
id: string;
frameUrl: string;
createdTime: number;
}
interface Props {
frames: Array<FrameData>;
currentFrameIndex: number;
fps: number;
timeZone: string;
loop?: boolean;
onComplete?: () => void;
width?: number | string;
height?: number | string;
className?: string;
onFrameChange: (idx: number) => void;
elaborateFrames?: boolean;
preloadCount?: number;
}
interface FrameStatus {
loaded: boolean;
error: boolean;
}
export function FramePlayer({
frames,
currentFrameIndex,
timeZone,
fps,
loop = true,
onComplete,
width = '100%',
height = '100%',
className = '',
onFrameChange,
elaborateFrames,
preloadCount = 8,
}: Props) {
const [isPlaying, setIsPlaying] = useState(true);
const frameStatusRef = useRef<Record<string, FrameStatus>>({});
const requestRef = useRef<number>();
const previousTimeRef = useRef<number>();
const preloadingRef = useRef<Set<string>>(new Set());
const frameDuration = 1000 / fps;
// Preload frames around current index
useEffect(() => {
const preloadFrames = async () => {
const startIdx = Math.max(0, currentFrameIndex);
const endIdx = Math.min(frames.length, currentFrameIndex + preloadCount);
// const frameStatus = frameStatusRef.current;
for (let i = startIdx; i < endIdx; i++) {
const frame = frames[i];
const frameKey = frame.frameUrl;
// Skip if already loaded or currently preloading
if (
frameStatusRef.current[frameKey]?.loaded ||
// frameStatus[frameKey]?.error ||
preloadingRef.current.has(frameKey)
) {
continue;
}
preloadingRef.current.add(frameKey);
const img = new Image();
img.src = frame.frameUrl;
img.onload = () => {
frameStatusRef.current = {
...frameStatusRef.current,
[frameKey]: { loaded: true, error: false },
};
preloadingRef.current.delete(frameKey);
};
img.onerror = () => {
frameStatusRef.current = {
...frameStatusRef.current,
[frameKey]: { loaded: false, error: true },
};
preloadingRef.current.delete(frameKey);
};
}
};
preloadFrames();
}, [currentFrameIndex, frames, preloadCount]);
// Check if current frame is loaded before advancing
const shouldAdvanceFrame = useCallback(() => {
const frameStatus = frameStatusRef.current;
const currentFrame = frames[currentFrameIndex];
return currentFrame ? frameStatus[currentFrame.frameUrl]?.loaded : false;
}, [currentFrameIndex, frames]);
const animate = useCallback(
(time: number) => {
if (previousTimeRef.current === undefined) {
previousTimeRef.current = time;
requestRef.current = requestAnimationFrame(animate);
return;
}
const deltaTime = time - previousTimeRef.current;
if (deltaTime >= frameDuration && shouldAdvanceFrame()) {
let nextFrame = currentFrameIndex + 1;
if (nextFrame >= frames.length) {
if (loop) {
nextFrame = 0;
} else {
setIsPlaying(false);
onComplete?.();
nextFrame = currentFrameIndex;
}
}
onFrameChange(nextFrame);
previousTimeRef.current = time;
}
requestRef.current = requestAnimationFrame(animate);
},
[
currentFrameIndex,
frameDuration,
frames,
loop,
onComplete,
onFrameChange,
shouldAdvanceFrame,
]
);
useEffect(() => {
if (isPlaying) {
requestRef.current = requestAnimationFrame(animate);
} else if (requestRef.current) {
cancelAnimationFrame(requestRef.current);
requestRef.current = undefined;
previousTimeRef.current = undefined;
}
return () => {
if (requestRef.current) {
cancelAnimationFrame(requestRef.current);
}
};
}, [isPlaying, animate]);
const frame = useMemo(
() => (frames.length > 0 ? frames[currentFrameIndex] : undefined),
[currentFrameIndex, frames]
);
const handleImageLoad = (frameKey: string) => () => {
if (!frameStatusRef.current[frameKey]?.loaded) {
frameStatusRef.current = {
...frameStatusRef.current,
[frameKey]: { loaded: true, error: false },
};
}
};
return (
<div
className={`frame-player relative flex items-center justify-center ${className}`}
style={{ width, height }}
>
{frame ? (
<div className="h-full">
{elaborateFrames && (
<span className="bg-ondark-bg-2 text-ondark-text-1 absolute top-0 right-0 rounded text-xs">
{formatTime(new Date(frame.createdTime), timeZone, true)}
</span>
)}
<img
src={frame.frameUrl}
alt={`Frame ${currentFrameIndex + 1}`}
style={{ objectFit: 'contain', height: '100%' }}
onLoad={handleImageLoad(frame.frameUrl)}
/>
</div>
) : (
<p className="text-ondark-text-1 absolute inset-0 flex animate-pulse items-center justify-center text-xs">
Events loading...
</p>
)}
</div>
);
}
export default FramePlayer;
Questions:
What’s the best approach to handle multiple image sequence players efficiently?
How can I optimize the preloading strategy to prevent request cancellations?
Are there better alternatives to manage multiple simultaneous intervals?
Any suggestions for performance optimization or alternative approaches would be greatly appreciated.
Attached network screenshot Network tab screenshot
