Controls (#35)

Author: AHGIJMKLKKZNPJKQR

deep-sea-stories/packages/web/src/components/LocalPeerOverlay.tsx

@@ -0,0 +1,34 @@
+import { Camera, CameraOff, Mic, MicOff } from 'lucide-react';
+import type { FC } from 'react';
+import { Button } from './ui/button';
+
+export type LocalPeerOverlayProps = {
+	isMuted: boolean;
+	toggleMute: () => void;
+	isCameraOn: boolean;
+	toggleCamera: () => void;
+};
+
+export const LocalPeerOverlay: FC<LocalPeerOverlayProps> = ({
+	isMuted,
+	toggleMute,
+	isCameraOn,
+	toggleCamera,
+}) => {
+	const MicIcon = isMuted ? MicOff : Mic;
+	const micColor = isMuted ? 'text-red-600' : '';
+
+	const CameraIcon = !isCameraOn ? CameraOff : Camera;
+	const cameraColor = !isCameraOn ? 'text-red-600' : '';
+
+	return (
+		<div className="absolute inset-x-0 bottom-0 p-2 gap-2 flex justify-center">
+			<Button variant="outline" className={micColor} onClick={toggleMute}>
+				<MicIcon size={24} />
+			</Button>
+			<Button variant="outline" className={cameraColor} onClick={toggleCamera}>
+				<CameraIcon size={24} />
+			</Button>
+		</div>
+	);
+};

deep-sea-stories/packages/web/src/components/PeerGrid.tsx

@@ -1,14 +1,23 @@
-import type { usePeers } from '@fishjam-cloud/react-client';
+import {
+	useCamera,
+	useMicrophone,
+	type usePeers,
+} from '@fishjam-cloud/react-client';
 import type { FC } from 'react';
-import { PeerTile } from './PeerTile';
 import { cn } from '@/lib/utils';
+import { LocalPeerOverlay } from './LocalPeerOverlay';
+import { PeerTile } from './PeerTile';
+import { RemotePeerOverlay } from './RemotePeerOverlay';
 
 type PeerGridProps = {
 	localPeer: ReturnType<typeof usePeers<{ name: string }>>['localPeer'];
 	displayedPeers: ReturnType<typeof usePeers<{ name: string }>>['remotePeers'];
 };
 
 const PeerGrid: FC<PeerGridProps> = ({ localPeer, displayedPeers }) => {
+	const { isMicrophoneMuted, toggleMicrophoneMute } = useMicrophone();
+	const { isCameraOn, toggleCamera } = useCamera();
+
 	return (
 		<section
 			className={cn(
@@ -21,14 +30,36 @@ const PeerGrid: FC<PeerGridProps> = ({ localPeer, displayedPeers }) => {
 				},
 			)}
 		>
-			<PeerTile name="You" stream={localPeer?.cameraTrack?.stream} />
+			<PeerTile
+				name="You"
+				className="relative"
+				stream={localPeer?.cameraTrack?.stream}
+				videoPaused={localPeer?.cameraTrack?.metadata?.paused}
+			>
+				<LocalPeerOverlay
+					isMuted={isMicrophoneMuted}
+					toggleMute={toggleMicrophoneMute}
+					isCameraOn={isCameraOn}
+					toggleCamera={toggleCamera}
+				/>
+			</PeerTile>
+
 			{displayedPeers.map((peer) => (
 				<PeerTile
+					className="relative"
 					name={peer.metadata?.peer?.name ?? peer.id}
 					key={peer.id}
-					stream={peer.customVideoTracks[0]?.stream ?? peer.cameraTrack?.stream}
+					stream={peer.cameraTrack?.stream}
 					audioStream={peer.microphoneTrack?.stream}
-				/>
+					videoPaused={peer?.cameraTrack?.metadata?.paused}
+				>
+					<RemotePeerOverlay
+						isMuted={
+							!peer.microphoneTrack?.stream ||
+							!!peer.microphoneTrack.metadata?.paused
+						}
+					/>
+				</PeerTile>
 			))}
 		</section>
 	);

deep-sea-stories/packages/web/src/components/PeerTile.tsx

@@ -1,56 +1,67 @@
-import { type FC, type HTMLAttributes, useEffect, useRef } from 'react';
+import {
+	type FC,
+	type HTMLAttributes,
+	type PropsWithChildren,
+	useEffect,
+	useRef,
+} from 'react';
 import { cn } from '@/lib/utils';
 
 export type PeerTileProps = {
 	stream?: MediaStream | null;
 	audioStream?: MediaStream | null;
 	name: string;
+	videoPaused?: boolean | null;
 } & HTMLAttributes<HTMLDivElement>;
 
-export const PeerTile: FC<PeerTileProps> = ({
+export const PeerTile: FC<PropsWithChildren<PeerTileProps>> = ({
 	stream,
 	audioStream,
 	name,
 	className,
+	videoPaused,
+	children,
 	...props
 }) => {
 	const videoRef = useRef<HTMLVideoElement>(null);
 	const audioRef = useRef<HTMLAudioElement>(null);
 
 	useEffect(() => {
-		if (!videoRef.current) return;
+		if (!videoRef.current || videoPaused) return;
 		videoRef.current.srcObject = stream ?? null;
-	}, [stream]);
+	}, [stream, videoPaused]);
 
 	useEffect(() => {
 		if (!audioRef.current) return;
 		audioRef.current.srcObject = audioStream ?? null;
 	}, [audioStream]);
 
 	return (
-		<div
-			className={cn(
-				'h-full w-full flex border items-center max-w-xl justify-center rounded-xl overflow-hidden',
-				className,
-			)}
-			{...props}
-		>
-			{stream ? (
-				<video
-					className="h-full rounded-xl max-w-full object-cover"
+		<div className={cn('h-full w-full max-w-xl', className)} {...props}>
+			<div className="h-full w-full flex border items-center justify-center rounded-xl overflow-hidden">
+				{stream && !videoPaused ? (
+					<video
+						className="h-full rounded-xl max-w-full object-cover"
+						autoPlay
+						muted
+						disablePictureInPicture
+						playsInline
+						ref={videoRef}
+					/>
+				) : (
+					<div className="text-sm md:text-xl font-display text-center p-2">
+						{name}
+					</div>
+				)}
+				{/* biome-ignore lint/a11y/useMediaCaption: Peer audio feed from WebRTC doesn't have captions */}
+				<audio
+					ref={audioRef}
 					autoPlay
-					muted
-					disablePictureInPicture
 					playsInline
-					ref={videoRef}
-				></video>
-			) : (
-				<div className="text-sm md:text-xl font-display text-center p-2">
-					{name}
-				</div>
-			)}
-			{/* biome-ignore lint/a11y/useMediaCaption: Peer audio feed from WebRTC doesn't have captions */}
-			<audio ref={audioRef} autoPlay playsInline title={`Audio from ${name}`} />
+					title={`Audio from ${name}`}
+				/>
+			</div>
+			{children}
 		</div>
 	);
 };

deep-sea-stories/packages/web/src/components/RemotePeerOverlay.tsx

@@ -0,0 +1,13 @@
+import { VolumeOff } from 'lucide-react';
+import type { FC } from 'react';
+
+export type RemotePeerOverlayProps = {
+	isMuted: boolean;
+};
+
+export const RemotePeerOverlay: FC<RemotePeerOverlayProps> = ({ isMuted }) =>
+	isMuted && (
+		<div className="absolute border-2 border-foreground rounded-full bg-background m-2 p-2 top-0 right-0 flex justify-center">
+			<VolumeOff size={24} />
+		</div>
+	);