3 lines
1.3 KiB
TypeScript
3 lines
1.3 KiB
TypeScript
import {Box} from "@mui/material";import {useCallback,useEffect,useRef} from "react";import type {Gallery_Case,Gallery_Frame_Mode} from "../protocol/gallery_types";import type {Gallery_Plot_Session} from "../session/gallery_plot_session";import {Plot_Card,type Selected_Plot} from "./plot_card";
|
|
export function Gallery_Page({cases,frame_mode,streams_paused,on_open_inspector}:{cases:Gallery_Case[];frame_mode:Gallery_Frame_Mode;streams_paused:boolean;on_open_inspector:(plot:Selected_Plot)=>void}) {const sessions=useRef(new Set<Gallery_Plot_Session>());const register=useCallback((session:Gallery_Plot_Session,mount:boolean)=>{mount?sessions.current.add(session):sessions.current.delete(session);},[]);useEffect(()=>{let animation_frame=0;const loop=(now:number)=>{for(const session of sessions.current)session.tick(now);animation_frame=requestAnimationFrame(loop);};animation_frame=requestAnimationFrame(loop);return()=>cancelAnimationFrame(animation_frame);},[]);return <Box sx={{display:"grid",gridTemplateColumns:"repeat(auto-fit,minmax(min(100%,520px),1fr))",gap:2.5}}>{cases.map(gallery_case=><Plot_Card key={`${gallery_case.id}:${frame_mode.id}`} gallery_case={gallery_case} frame_mode={frame_mode} active={!document.hidden} streams_paused={streams_paused} on_register={register} on_open_inspector={on_open_inspector}/>)}</Box>;}
|