Upload 7 files

components/ConnectedDeviceCard.tsx

@@ -0,0 +1,75 @@
+
+import React from 'react';
+import type { BluetoothDevice, Action } from '../types.ts';
+import { InfoIcon } from './icons.tsx';
+
+interface ConnectedDeviceCardProps {
+    device: BluetoothDevice;
+    dispatch: React.Dispatch<Action>;
+    onDisconnect: (id: string) => void;
+}
+
+export const ConnectedDeviceCard: React.FC<ConnectedDeviceCardProps> = ({ device, dispatch, onDisconnect }) => {
+    const totalDelay = device.latency + device.delay;
+
+    const handleUpdateVolume = (id: string, volume: number) => {
+        dispatch({ type: 'UPDATE_VOLUME', payload: { id, volume } });
+    }
+    const handleUpdateDelay = (id: string, delay: number) => {
+        dispatch({ type: 'UPDATE_DELAY', payload: { id, delay } });
+    }
+    
+    const calibrationClass = device.isCalibrating ? 'calibrating-shimmer' : '';
+    
+    return (
+        <div className={`bg-slate-700/50 p-4 rounded-lg relative overflow-hidden ${calibrationClass}`}>
+            <div className="flex justify-between items-start">
+                <div>
+                    <p className="font-semibold text-white">{device.name}</p>
+                    <div className="text-xs text-slate-400 space-x-2">
+                        <span title="Inherent device latency">{`Latency: ${device.latency}ms`}</span>
+                        <span className="font-bold text-cyan-400" title="Total effective delay after calibration">{`Total Delay: ${totalDelay}ms`}</span>
+                    </div>
+                </div>
+                <button 
+                    onClick={() => onDisconnect(device.id)} 
+                    className="text-xs text-red-400 hover:text-red-300 transition-colors focus:outline-none focus:ring-2 focus:ring-red-500 rounded"
+                    aria-label={`Disconnect ${device.name}`}
+                >
+                    Disconnect
+                </button>
+            </div>
+            <div className="mt-4 space-y-3">
+                <div>
+                    <label htmlFor={`volume-${device.id}`} className="text-xs text-slate-300">Volume: {device.volume}</label>
+                    <input 
+                        id={`volume-${device.id}`}
+                        type="range" 
+                        min="0" max="100" 
+                        value={device.volume} 
+                        onChange={(e) => handleUpdateVolume(device.id, parseInt(e.target.value))} 
+                        className="w-full h-2 bg-slate-600 rounded-lg appearance-none cursor-pointer accent-blue-500" 
+                        aria-label={`${device.name} volume control`}
+                    />
+                </div>
+                 <div>
+                    <label htmlFor={`delay-${device.id}`} className="flex items-center space-x-1 text-xs text-slate-300">
+                        <span>Manual Delay: {device.delay}ms</span>
+                        <span title="Manual offset to sync with other devices. Auto-calibrate sets this to compensate for latency.">
+                            <InfoIcon className="w-3 h-3"/>
+                        </span>
+                    </label>
+                    <input 
+                        id={`delay-${device.id}`}
+                        type="range" 
+                        min="0" max="100" 
+                        value={device.delay} 
+                        onChange={(e) => handleUpdateDelay(device.id, parseInt(e.target.value))} 
+                        className="w-full h-2 bg-slate-600 rounded-lg appearance-none cursor-pointer accent-cyan-500" 
+                        aria-label={`${device.name} manual delay control`}
+                    />
+                </div>
+            </div>
+        </div>
+    );
+}

components/DeviceCard.tsx

@@ -0,0 +1,58 @@
+
+import React from 'react';
+import type { BluetoothDevice } from '../types.ts';
+import { DeviceType, DeviceStatus } from '../types.ts';
+import { SpeakerIcon, HeadphonesIcon, SoundbarIcon } from './icons.tsx';
+
+interface DeviceCardProps {
+  device: BluetoothDevice;
+  onConnect: (id: string) => void;
+}
+
+const DeviceIcon: React.FC<{ type: DeviceType }> = ({ type }) => {
+  const className = "w-8 h-8 text-slate-400 flex-shrink-0";
+  if (type === DeviceType.Headphones) return <HeadphonesIcon className={className} />;
+  if (type === DeviceType.Soundbar) return <SoundbarIcon className={className} />;
+  return <SpeakerIcon className={className} />;
+};
+
+const Battery: React.FC<{ level: number }> = ({ level }) => {
+  const width = `${level}%`;
+  const color = level > 50 ? 'bg-green-500' : level > 20 ? 'bg-yellow-500' : 'bg-red-500';
+
+  return (
+    <div className="w-6 h-3 border border-slate-500 rounded-sm p-0.5 flex items-center" title={`Battery level: ${level}%`}>
+      <div className={`h-full rounded-sm ${color}`} style={{ width }}></div>
+    </div>
+  );
+};
+
+export const DeviceCard: React.FC<DeviceCardProps> = ({ device, onConnect }) => {
+  const isConnecting = device.status === DeviceStatus.Connecting;
+  const connectingClass = isConnecting ? 'animate-pulse ring-2 ring-blue-500 ring-offset-2 ring-offset-slate-800' : '';
+
+  return (
+    <div className={`flex items-center justify-between bg-slate-700/50 p-3 rounded-lg hover:bg-slate-700 transition-all duration-200 ${connectingClass}`}>
+      <div className="flex items-center space-x-4 overflow-hidden">
+        <DeviceIcon type={device.type} />
+        <div className="truncate">
+          <p className="font-medium text-white truncate">{device.name}</p>
+          <div className="flex items-center space-x-2 text-xs text-slate-400">
+            <span>{device.type}</span>
+            <span className="text-slate-600">&bull;</span>
+            <Battery level={device.battery} />
+            <span>{device.battery}%</span>
+          </div>
+        </div>
+      </div>
+      <button
+        onClick={() => onConnect(device.id)}
+        disabled={isConnecting}
+        className="ml-2 flex-shrink-0 px-3 py-1.5 text-sm font-semibold bg-slate-600 text-slate-200 rounded-md hover:bg-slate-500 disabled:bg-slate-800 disabled:text-slate-500 disabled:cursor-wait transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-slate-700"
+        aria-label={isConnecting ? `Connecting to ${device.name}` : `Connect to ${device.name}`}
+      >
+        {isConnecting ? 'Connecting...' : 'Connect'}
+      </button>
+    </div>
+  );
+};

components/DeviceScanner.tsx

@@ -0,0 +1,62 @@
+
+import React, { useCallback } from 'react';
+import type { BluetoothDevice, Action } from '../types.ts';
+import { DeviceStatus } from '../types.ts';
+import { DeviceCard } from './DeviceCard.tsx';
+import { ScanIcon } from './icons.tsx';
+
+interface DeviceScannerProps {
+  devices: BluetoothDevice[];
+  onScan: () => void;
+  dispatch: React.Dispatch<Action>;
+  isScanning: boolean;
+}
+
+export const DeviceScanner: React.FC<DeviceScannerProps> = ({ devices, onScan, dispatch, isScanning }) => {
+  const handleConnect = useCallback((id: string) => {
+    dispatch({ type: 'UPDATE_STATUS', payload: { id, status: DeviceStatus.Connecting } });
+    setTimeout(() => {
+      const randomLatency = Math.floor(Math.random() * 50) + 5;
+      dispatch({ type: 'UPDATE_STATUS', payload: { id, status: DeviceStatus.Connected, latency: randomLatency } });
+    }, 1500);
+  }, [dispatch]);
+
+  return (
+    <div className="bg-slate-800/50 rounded-lg p-6 shadow-lg h-full flex flex-col">
+      <div className="flex justify-between items-center mb-4">
+        <h2 className="text-xl font-semibold text-white">Available Devices</h2>
+        <button
+          onClick={onScan}
+          disabled={isScanning}
+          className="flex items-center space-x-2 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:bg-slate-600 disabled:cursor-not-allowed transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-slate-900"
+          aria-label={isScanning ? 'Scanning for devices' : 'Scan for new devices'}
+        >
+          {isScanning ? (
+            <svg className="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            </svg>
+          ) : (
+            <ScanIcon className="h-5 w-5" />
+          )}
+          <span>{isScanning ? 'Scanning...' : 'Scan'}</span>
+        </button>
+      </div>
+      <div className="flex-grow overflow-y-auto pr-2 -mr-2 space-y-3">
+        {isScanning && devices.length === 0 && (
+          <div className="text-center py-10 text-slate-400">
+            <p>Searching for nearby devices...</p>
+          </div>
+        )}
+        {!isScanning && devices.length === 0 && (
+          <div className="text-center py-10 text-slate-400">
+            <p>No devices found. Try scanning again.</p>
+          </div>
+        )}
+        {devices.map(device => (
+          <DeviceCard key={device.id} device={device} onConnect={handleConnect} />
+        ))}
+      </div>
+    </div>
+  );
+};

components/Footer.tsx

@@ -0,0 +1,11 @@
+
+import React from 'react';
+
+export const Footer: React.FC = () => {
+  return (
+    <footer className="container mx-auto p-4 mt-8 text-center text-slate-500 text-sm">
+      <p>Bluetooth Stereo Sync v1.0.0</p>
+      <p>This is a UI simulation. It does not control actual Bluetooth hardware.</p>
+    </footer>
+  );
+};

components/Header.tsx

@@ -0,0 +1,17 @@
+
+import React from 'react';
+import { BluetoothIcon } from './icons.tsx';
+
+export const Header: React.FC = () => {
+    return (
+        <header className="bg-slate-800/50 backdrop-blur-sm border-b border-slate-700/50 sticky top-0 z-10">
+            <div className="container mx-auto p-4 flex items-center justify-center space-x-4">
+                <BluetoothIcon className="text-blue-400 h-8 w-8" />
+                <div>
+                    <h1 className="text-2xl font-bold text-white tracking-tight">Bluetooth Stereo Sync</h1>
+                    <p className="text-sm text-slate-400">Combine multiple speakers into one synchronized audio output.</p>
+                </div>
+            </div>
+        </header>
+    );
+}

components/SyncDashboard.tsx

@@ -0,0 +1,137 @@
+
+import React, { useState, useEffect } from 'react';
+import type { BluetoothDevice, Action } from '../types.ts';
+import { DeviceStatus } from '../types.ts';
+import { ConnectedDeviceCard } from './ConnectedDeviceCard.tsx';
+import { VolumeHighIcon, VolumeMuteIcon } from './icons.tsx';
+
+interface SyncDashboardProps {
+  connectedDevices: BluetoothDevice[];
+  dispatch: React.Dispatch<Action>;
+  masterVolume: number;
+  isMuted: boolean;
+  showNotification: (message: string) => void;
+}
+
+const AudioVisualizer: React.FC<{ volume: number, isMuted: boolean }> = ({ volume, isMuted }) => {
+    const barCount = 32;
+    const [bars, setBars] = useState<number[]>(Array(barCount).fill(2));
+  
+    useEffect(() => {
+      const interval = setInterval(() => {
+        if (isMuted || volume === 0) {
+            setBars(Array(barCount).fill(2));
+            return;
+        }
+        const maxEffect = Math.max(2, (volume / 100) * 98 + 2);
+        setBars(bars.map(() => Math.random() * maxEffect + 2));
+      }, 150);
+      return () => clearInterval(interval);
+    }, [bars, volume, isMuted]);
+  
+    return (
+      <div className="flex items-end justify-center h-24 space-x-1 bg-slate-900/50 p-4 rounded-lg">
+        {bars.map((height, i) => (
+          <div
+            key={i}
+            className="w-full bg-gradient-to-t from-blue-500 to-cyan-400 rounded-t-full"
+            style={{ height: `${height}%`, transition: 'height 0.1s ease-in-out' }}
+          ></div>
+        ))}
+      </div>
+    );
+};
+
+export const SyncDashboard: React.FC<SyncDashboardProps> = ({ connectedDevices, dispatch, masterVolume, isMuted, showNotification }) => {
+    const [isCalibrating, setIsCalibrating] = useState(false);
+
+    const handleAutoCalibrate = () => {
+        setIsCalibrating(true);
+        dispatch({ type: 'START_CALIBRATION' });
+
+        const maxLatency = Math.max(...connectedDevices.map(d => d.latency), 0);
+        
+        const calibrationPromises = connectedDevices.map((device, index) => {
+            return new Promise<void>(resolve => {
+                setTimeout(() => {
+                    const delay = maxLatency - device.latency;
+                    dispatch({ type: 'UPDATE_DELAY', payload: { id: device.id, delay } });
+                    resolve();
+                }, (index + 1) * 200); // Faster calibration
+            });
+        });
+
+        Promise.all(calibrationPromises).then(() => {
+            setTimeout(() => {
+                dispatch({ type: 'FINISH_CALIBRATION' });
+                setIsCalibrating(false);
+                showNotification("Calibration complete! Devices are now in sync.");
+            }, 500);
+        });
+    };
+
+    const handleDisconnect = (id: string) => {
+      dispatch({ type: 'UPDATE_STATUS', payload: {id, status: DeviceStatus.Disconnected } });
+    };
+
+  if (connectedDevices.length === 0) {
+    return (
+      <div className="bg-slate-800/50 rounded-lg p-6 shadow-lg h-full flex items-center justify-center min-h-[300px]">
+        <div className="text-center text-slate-400">
+            <h2 className="text-xl font-semibold mb-2 text-white">Synchronized Group</h2>
+            <p>Connect devices from the 'Available Devices' list to create a stereo group.</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-slate-800/50 rounded-lg p-6 shadow-lg h-full space-y-6">
+        <div>
+            <div className="flex flex-col sm:flex-row justify-between sm:items-center gap-4 mb-4">
+                 <h2 className="text-xl font-semibold text-white">Synchronized Group ({connectedDevices.length})</h2>
+                 <button 
+                    onClick={handleAutoCalibrate} 
+                    disabled={isCalibrating} 
+                    className="px-4 py-2 text-sm bg-green-600 text-white rounded-md hover:bg-green-700 disabled:bg-slate-600 disabled:cursor-not-allowed transition-colors focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-slate-800"
+                    aria-label={isCalibrating ? 'Calibrating device delays' : 'Auto-calibrate device delays'}
+                 >
+                     {isCalibrating ? 'Calibrating...' : 'Auto-Calibrate Delays'}
+                 </button>
+            </div>
+            
+            <div className="space-y-4">
+                <div className="bg-slate-900/50 p-4 rounded-lg">
+                    <label className="text-sm font-medium text-white">Master Controls</label>
+                    <div className="flex items-center space-x-4 mt-2">
+                       <button onClick={() => dispatch({ type: 'TOGGLE_MUTE' })} className="p-2 rounded-full hover:bg-slate-700 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500" aria-label={isMuted ? 'Unmute master volume' : 'Mute master volume'}>
+                           {isMuted ? <VolumeMuteIcon className="h-6 w-6 text-slate-300" /> : <VolumeHighIcon className="h-6 w-6 text-slate-300" />}
+                       </button>
+                       <input 
+                           type="range" 
+                           min="0" 
+                           max="100" 
+                           value={isMuted ? 0 : masterVolume} 
+                           onChange={(e) => dispatch({ type: 'SET_MASTER_VOLUME', payload: parseInt(e.target.value) })} 
+                           className="w-full h-2 bg-slate-600 rounded-lg appearance-none cursor-pointer accent-blue-500"
+                           aria-label="Master volume control"
+                        />
+                    </div>
+                </div>
+                 <AudioVisualizer volume={masterVolume} isMuted={isMuted} />
+            </div>
+        </div>
+        
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            {connectedDevices.map(device => (
+                <ConnectedDeviceCard 
+                    key={device.id} 
+                    device={device} 
+                    dispatch={dispatch}
+                    onDisconnect={handleDisconnect}
+                />
+            ))}
+        </div>
+    </div>
+  );
+};

components/icons.tsx

@@ -0,0 +1,53 @@
+
+import React from 'react';
+
+type IconProps = React.SVGProps<SVGSVGElement>;
+
+export const BluetoothIcon: React.FC<IconProps> = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" {...props}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M17.293 4.293a1 1 0 011.414 0l2 2a1 1 0 010 1.414l-7 7a1 1 0 01-1.414 0l-7-7a1 1 0 010-1.414l2-2a1 1 0 011.414 0L12 7.586l5.293-3.293zM12 20v-8" />
+    </svg>
+);
+
+export const ScanIcon: React.FC<IconProps> = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" {...props}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
+  </svg>
+);
+
+export const SpeakerIcon: React.FC<IconProps> = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" {...props}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M19.114 5.636a9 9 0 010 12.728M16.463 8.288a5.25 5.25 0 010 7.424M6.75 8.25l4.72-4.72a.75.75 0 011.28.53v15.88a.75.75 0 01-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.01 9.01 0 012.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75z" />
+  </svg>
+);
+
+export const HeadphonesIcon: React.FC<IconProps> = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" {...props}>
+     <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 8.25v7.5" />
+     <path strokeLinecap="round" strokeLinejoin="round" d="M9 16.5v-2.25m3.75 2.25v-2.25m-7.5 0v2.25m7.5-6.75v-2.25m-3.75 2.25v-2.25m-3.75 0v2.25M9 12a3 3 0 11-6 0 3 3 0 016 0zm9 0a3 3 0 11-6 0 3 3 0 016 0z" />
+  </svg>
+);
+
+export const SoundbarIcon: React.FC<IconProps> = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" {...props}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 18.75v-3.75m16.5 3.75v-3.75m-14.25-3.75h12c.966 0 1.75-.784 1.75-1.75V8.25c0-.966-.784-1.75-1.75-1.75h-12c-.966 0-1.75.784-1.75 1.75v3.25c0 .966.784 1.75 1.75 1.75z" />
+    </svg>
+);
+
+export const InfoIcon: React.FC<IconProps> = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" {...props}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
+    </svg>
+);
+
+export const VolumeHighIcon: React.FC<IconProps> = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" {...props}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M19.114 5.636a9 9 0 010 12.728M16.463 8.288a5.25 5.25 0 010 7.424M6.75 8.25l4.72-4.72a.75.75 0 011.28.53v15.88a.75.75 0 01-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.01 9.01 0 012.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75z" />
+    </svg>
+);
+
+export const VolumeMuteIcon: React.FC<IconProps> = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" {...props}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M17.25 9.75L19.5 12m0 0l2.25 2.25M19.5 12l2.25-2.25M19.5 12l-2.25 2.25m-10.5-6l4.72-4.72a.75.75 0 011.28.53v15.88a.75.75 0 01-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.01 9.01 0 012.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75z" />
+    </svg>
+);