feat: add WHEP control, WHEPStatus badge, Wild Dragon Logo components: WHEPStatus.js

overlay/src/views/Main/WHEPStatus.js

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { Trans } from '@lingui/macro';
+import Chip from '@mui/material/Chip';
+
+export default function WHEPStatus({ address, channelid }) {
+	const [count, setCount] = React.useState(null);
+
+	React.useEffect(() => {
+		if (!address || !channelid) return;
+
+		const poll = () => {
+			fetch(`${address}/api/v3/webrtc/streams/${channelid}/peers`, { credentials: 'include' })
+				.then((r) => (r.ok ? r.json() : null))
+				.then((data) => {
+					if (data !== null && typeof data.count === 'number') {
+						setCount(data.count);
+					}
+				})
+				.catch(() => {});
+		};
+
+		poll();
+		const t = setInterval(poll, 5000);
+		return () => clearInterval(t);
+	}, [address, channelid]);
+
+	if (count === null) return null;
+
+	return (
+		<Chip
+			size="small"
+			label={
+				<Trans>
+					{count} viewer{count !== 1 ? 's' : ''}
+				</Trans>
+			}
+			color={count > 0 ? 'primary' : 'default'}
+			variant="outlined"
+		/>
+	);
+}