This commit is contained in:
legop3
2025-12-01 23:48:48 -05:00
parent 1d664cbe4c
commit f14aea2070
3 changed files with 16 additions and 10 deletions
File diff suppressed because one or more lines are too long
+1 -1
View File
@@ -11,7 +11,7 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Multi Roomba Rover" /> <meta name="apple-mobile-web-app-title" content="Multi Roomba Rover" />
<title>Multi Roomba Rover</title> <title>Multi Roomba Rover</title>
<script type="module" crossorigin src="/assets/index-BnSgZj98.js"></script> <script type="module" crossorigin src="/assets/index-BnAIu6Ae.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-B1UrCI1T.css"> <link rel="stylesheet" crossorigin href="/assets/index-B1UrCI1T.css">
</head> </head>
<body> <body>
+10 -4
View File
@@ -7,6 +7,11 @@ export function useRoomCameraSnapshots(sourceList = []) {
const objectUrls = useRef(new Map()); const objectUrls = useRef(new Map());
const ids = useMemo(() => sourceList.map((e) => (typeof e === 'string' ? e : e.id)), [sourceList]); const ids = useMemo(() => sourceList.map((e) => (typeof e === 'string' ? e : e.id)), [sourceList]);
const idsKey = useMemo(() => ids.join('|'), [ids]); const idsKey = useMemo(() => ids.join('|'), [ids]);
const idsRef = useRef([]);
useEffect(() => {
idsRef.current = ids;
}, [idsKey, ids]);
useEffect(() => { useEffect(() => {
objectUrls.current.forEach((url) => URL.revokeObjectURL(url)); objectUrls.current.forEach((url) => URL.revokeObjectURL(url));
@@ -15,10 +20,11 @@ export function useRoomCameraSnapshots(sourceList = []) {
}, [idsKey]); }, [idsKey]);
useEffect(() => { useEffect(() => {
if (!ids.length || !socket) { if (!idsRef.current.length || !socket) {
return undefined; return undefined;
} }
let cancelled = false; let cancelled = false;
const currentIds = idsRef.current;
const handleFrame = (meta = {}, buffer) => { const handleFrame = (meta = {}, buffer) => {
if (cancelled || !meta.id || !buffer) return; if (cancelled || !meta.id || !buffer) return;
@@ -59,17 +65,17 @@ export function useRoomCameraSnapshots(sourceList = []) {
socket.on('roomCamera:frame', handleFrame); socket.on('roomCamera:frame', handleFrame);
socket.on('roomCamera:status', handleStatus); socket.on('roomCamera:status', handleStatus);
socket.emit('roomCamera:subscribe', { ids }); socket.emit('roomCamera:subscribe', { ids: currentIds });
return () => { return () => {
cancelled = true; cancelled = true;
socket.emit('roomCamera:unsubscribe', { ids }); socket.emit('roomCamera:unsubscribe', { ids: currentIds });
socket.off('roomCamera:frame', handleFrame); socket.off('roomCamera:frame', handleFrame);
socket.off('roomCamera:status', handleStatus); socket.off('roomCamera:status', handleStatus);
objectUrls.current.forEach((url) => URL.revokeObjectURL(url)); objectUrls.current.forEach((url) => URL.revokeObjectURL(url));
objectUrls.current.clear(); objectUrls.current.clear();
}; };
}, [socket, idsKey, ids]); }, [socket, idsKey]);
return feeds; return feeds;
} }