Add headphones notice (#37)

* add headphones notice

* format lint

* Update deep-sea-stories/packages/web/src/components/HowToPlay.tsx

Co-authored-by: Copilot <[email protected]>

* VideoOff lucide icon instead of text

* fit outline, center

---------

Co-authored-by: Copilot <[email protected]>

Author: Gawor270

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

@@ -0,0 +1,18 @@
+import { Headphones } from 'lucide-react';
+import type { FC } from 'react';
+
+const HeadphonesNotice: FC = () => (
+	<div className="flex items-center gap-3 rounded-xl border bg-card px-4 py-3 text-sm text-muted-foreground">
+		<div className="p-2 rounded-xl bg-primary/10 text-primary">
+			<Headphones size={24} aria-hidden />
+		</div>
+		<div>
+			<div className="font-semibold text-primary">Headphones recommended</div>
+			<div className="text-xs sm:text-sm text-muted-foreground">
+				Keeps audio clear and echo-free.
+			</div>
+		</div>
+	</div>
+);
+
+export default HeadphonesNotice;

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

@@ -87,6 +87,7 @@ const HowToPlay: FC<ButtonProps> = ({ variant, ...props }) => (
 				<section>
 					<h3 className="font-semibold text-xl mb-3">Tips</h3>
 					<ul className="list-disc pl-6 space-y-2">
+						<li>Headphones recommended for the best audio experience</li>
 						<li>
 							Watch out for wordplay and double meanings used in the scenarios
 							presented by the AI Storyteller

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

@@ -6,6 +6,7 @@ import {
 	useRef,
 } from 'react';
 import { cn } from '@/lib/utils';
+import { VideoOff } from 'lucide-react';
 
 export type PeerTileProps = {
 	stream?: MediaStream | null;
@@ -57,7 +58,7 @@ export const PeerTile: FC<PropsWithChildren<PeerTileProps>> = ({
 					/>
 				) : (
 					<div className="text-sm md:text-xl font-display text-center p-2">
-						{name}
+						{name || <VideoOff size={96} className="text-muted-foreground" />}
 					</div>
 				)}
 				{/* biome-ignore lint/a11y/useMediaCaption: Peer audio feed from WebRTC doesn't have captions */}

deep-sea-stories/packages/web/src/views/JoinView.tsx

@@ -9,6 +9,7 @@ import type { FC } from 'react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { DeviceSelect } from '@/components/DeviceSelect';
 import { PeerTile } from '@/components/PeerTile';
+import HeadphonesNotice from '@/components/HeadphonesNotice';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { toast } from '@/components/ui/sonner';
@@ -112,6 +113,7 @@ const JoinView: FC<JoinViewProps> = ({ roomId }) => {
 							<Mic size={24} className="flex-none" />
 						</DeviceSelect>
 					</div>
+					<HeadphonesNotice />
 				</div>
 			</section>