Add URL params for video id and baseline spm

Author: Double-A-92

README.md

@@ -11,6 +11,7 @@ RowState is a web application that connects your rowing machine to YouTube video
 - **Heart Rate Monitoring** - Optional Bluetooth heart rate sensor support
 - **Real-time Metrics** - Live display of stroke rate, split time, distance, power, and heart rate
 - **YouTube Integration** - Row along to any YouTube video
+- **URL Parameters** - Share links with pre-configured videos and stroke rates
 - **Visual Metronome** - Animated vertical bar that moves with your rowing rhythm (drive/recovery phases)
 - **Video Volume Control** - Adjustable volume slider in the settings panel
 
@@ -50,6 +51,18 @@ Bluetooth connections will not work in Firefox, Safari, or iOS browsers.
 4. Set your baseline stroke rate (default: 22 SPM = 1.0x speed)
 5. Start rowing - the video speed adjusts automatically
 
+### URL Parameters
+
+You can share RowState links with pre-configured videos and stroke rates using URL parameters:
+
+```
+https://double-a-92.github.io/RowState/?v=VIDEO_ID&spm=STROKE_RATE
+```
+
+**Parameters:**
+- `v` - YouTube video ID (11 characters)
+- `spm` - Baseline strokes per minute (10-40, default: 22)
+
 ## License
 
 MIT

src/App.tsx

@@ -6,12 +6,30 @@ import { useSmartPlaybackRate } from './hooks/useSmartPlaybackRate';
 import { useMetronome, type MetronomePhase } from './hooks/useMetronome';
 import { Overlay } from './components/Overlay';
 
+// Helper function to parse URL parameters
+const getUrlParams = () => {
+  const params = new URLSearchParams(window.location.search);
+  return {
+    videoId: params.get('v'),
+    spm: params.get('spm')
+  };
+};
+
 function App() {
   const { status, metrics, connect, disconnect } = useRowingMetrics();
   const { status: hrStatus, heartRateData, connect: hrConnect, disconnect: hrDisconnect } = useHeartRate();
-  // Default video
-  const [videoUrl, setVideoUrl] = useState('https://www.youtube.com/watch?v=FljjSVANT9I');
-  const [baselineSpm, setBaselineSpm] = useState(22);
+  
+  // Parse URL parameters on initial load
+  const urlParams = getUrlParams();
+  const videoId = urlParams.videoId;
+  const spmParam = urlParams.spm;
+  
+  // Set initial video URL based on URL parameter or default
+  const initialVideoUrl = videoId ? `https://www.youtube.com/watch?v=${videoId}` : 'https://www.youtube.com/watch?v=FljjSVANT9I';
+  const initialSpm = spmParam ? parseInt(spmParam, 10) : 22;
+  
+  const [videoUrl, setVideoUrl] = useState(initialVideoUrl);
+  const [baselineSpm, setBaselineSpm] = useState(initialSpm);
   const [metronomeEnabled, setMetronomeEnabled] = useState(false);
   const [metronomePhase, setMetronomePhase] = useState<MetronomePhase>('recovery');
   const [isVideoPlaying, setIsVideoPlaying] = useState(false);