legop3/MultiRoombaRover
1
0
Fork 0
mirror of https://github.com/legop3/MultiRoombaRover.git synced 2026-09-16 01:21:20 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

unmute forever

Browse Source
This commit is contained in:
legop3
2025-11-20 16:31:51 -05:00
parent 220535e72a
commit da494043c8
3 changed files with 45 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/public/assets/index-DBM9rsb_.js → server/public/assets/index-CL4IxhxM.js
+4 -4
View File
File diff suppressed because one or more lines are too long
server/public/index.html
+1 -1
View File
@@ -5,7 +5,7 @@
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>webui</title> <title>webui</title>
<script type="module" crossorigin src="/assets/index-DBM9rsb_.js"></script> <script type="module" crossorigin src="/assets/index-CL4IxhxM.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-BlCqEIWr.css"> <link rel="stylesheet" crossorigin href="/assets/index-BlCqEIWr.css">
</head> </head>
<body> <body>
webui/src/components/RoomCameraFeed.jsx
+40 -2
View File
@@ -2,13 +2,16 @@ import { useCallback, useEffect, useRef, useState } from 'react';
import { WhepPlayer } from '../lib/whepPlayer.js'; import { WhepPlayer } from '../lib/whepPlayer.js';
const RESTART_DELAY_MS = 2000; const RESTART_DELAY_MS = 2000;
const UNMUTE_RETRY_MS = 3000;
export default function RoomCameraFeed({ sessionInfo, label }) { export default function RoomCameraFeed({ sessionInfo, label }) {
const videoRef = useRef(null); const videoRef = useRef(null);
const restartTimer = useRef(null); const restartTimer = useRef(null);
const unmuteTimer = useRef(null);
const [status, setStatus] = useState('idle'); const [status, setStatus] = useState('idle');
const [detail, setDetail] = useState(null); const [detail, setDetail] = useState(null);
const [restartToken, setRestartToken] = useState(0); const [restartToken, setRestartToken] = useState(0);
const [muted, setMuted] = useState(true);
const scheduleRestart = useCallback(() => { const scheduleRestart = useCallback(() => {
clearTimeout(restartTimer.current); clearTimeout(restartTimer.current);
@@ -26,9 +29,41 @@ export default function RoomCameraFeed({ sessionInfo, label }) {
} }
}, []); }, []);
const attemptUnmute = useCallback(
(delay = 0) => {
clearTimeout(unmuteTimer.current);
const scheduleRetry = () => {
clearTimeout(unmuteTimer.current);
unmuteTimer.current = setTimeout(() => {
tryPlay();
}, UNMUTE_RETRY_MS);
};
const tryPlay = async () => {
const video = videoRef.current;
if (!video) return;
try {
await ensurePlayback();
video.muted = false;
await video.play();
setMuted(false);
} catch {
video.muted = true;
setMuted(true);
scheduleRetry();
}
};
unmuteTimer.current = setTimeout(tryPlay, delay);
},
[ensurePlayback],
);
useEffect( useEffect(
() => () => { () => () => {
clearTimeout(restartTimer.current); clearTimeout(restartTimer.current);
clearTimeout(unmuteTimer.current);
}, },
[], [],
); );
@@ -39,12 +74,14 @@ export default function RoomCameraFeed({ sessionInfo, label }) {
} }
let active = true; let active = true;
let player; let player;
const resetMuteId = setTimeout(() => setMuted(true), 0);
const handleStatus = (nextStatus, info) => { const handleStatus = (nextStatus, info) => {
if (!active) return; if (!active) return;
setStatus(nextStatus); setStatus(nextStatus);
setDetail(info || null); setDetail(info || null);
if (nextStatus === 'playing') { if (nextStatus === 'playing') {
ensurePlayback(); ensurePlayback();
attemptUnmute(0);
} }
if (['error', 'failed', 'disconnected', 'closed'].includes(nextStatus)) { if (['error', 'failed', 'disconnected', 'closed'].includes(nextStatus)) {
scheduleRestart(); scheduleRestart();
@@ -67,9 +104,10 @@ export default function RoomCameraFeed({ sessionInfo, label }) {
return () => { return () => {
active = false; active = false;
clearTimeout(resetMuteId);
player?.stop(); player?.stop();
}; };
}, [sessionInfo?.url, sessionInfo?.token, restartToken, scheduleRestart, ensurePlayback]); }, [sessionInfo?.url, sessionInfo?.token, restartToken, scheduleRestart, ensurePlayback, attemptUnmute]);
useEffect(() => { useEffect(() => {
if (status === 'stopped' && sessionInfo?.url) { if (status === 'stopped' && sessionInfo?.url) {
@@ -88,7 +126,7 @@ export default function RoomCameraFeed({ sessionInfo, label }) {
return ( return (
<div className="space-y-0.5"> <div className="space-y-0.5">
<div className="relative aspect-video w-full overflow-hidden bg-black"> <div className="relative aspect-video w-full overflow-hidden bg-black">
<video ref={videoRef} muted playsInline autoPlay controls={false} className="h-full w-full object-cover" /> <video ref={videoRef} muted={muted} playsInline autoPlay controls={false} className="h-full w-full object-cover" />
<div className="pointer-events-none absolute left-0 top-0 bg-black/70 px-0.5 py-0.5 text-xs font-semibold text-white"> <div className="pointer-events-none absolute left-0 top-0 bg-black/70 px-0.5 py-0.5 text-xs font-semibold text-white">
{label} {label}
</div> </div>