Fix external network syntax for podman-compose 1.5.0

Old v1 `external: { name: proxy }` is not parsed correctly by
podman-compose — it looked up "frontend" instead of "proxy".
Split into `external: true` + `name: proxy` (Compose v2 format).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

IMPLEMENTATION_SUMMARY.md

@@ -1,154 +0,0 @@
-# Static Player Feature Implementation Summary
-
-## Overview
-Successfully implemented a static player feature that maintains playback state across route changes and provides access to the player from both desktop sidebar and mobile footer menu.
-
-## Changes Made
-
-### 1. New Files Created
-
-#### `web/src/stores/playerStore.ts`
-- Created Zustand store for global player state management
-- Stores: `isPlaying`, `currentTime`, `duration`, `currentSongId`, `currentBandId`
-- Actions: `setPlaying`, `setCurrentTime`, `setDuration`, `setCurrentSong`, `reset`
-
-#### `web/src/components/MiniPlayer.tsx`
-- Minimal player interface that appears at bottom of screen when song is playing
-- Shows progress bar, current time, duration, and play/pause state
-- Clicking navigates to the current song page
-- Only visible when there's an active song
-
-### 2. Modified Files
-
-#### `web/src/hooks/useWaveform.ts`
-- Integrated with player store to sync local and global state
-- Added `songId` and `bandId` to options interface
-- Restores playback state when returning to the same song
-- Syncs play/pause state and current time to global store
-- Preserves playback position across route changes
-
-#### `web/src/pages/SongPage.tsx`
-- Updated waveform hook call to pass `songId` and `bandId`
-- Enables state persistence for the current song
-
-#### `web/src/components/BottomNavBar.tsx`
-- Added player icon to mobile footer menu
-- Connects to player store to show active state
-- Navigates to current song when clicked
-- Only enabled when there's an active song
-
-#### `web/src/components/Sidebar.tsx`
-- Updated player navigation to use player store
-- Player icon now always enabled when song is active
-- Navigates to current song regardless of current route
-- Shows active state when playing
-
-#### `web/src/components/ResponsiveLayout.tsx`
-- Added MiniPlayer component to both mobile and desktop layouts
-- Ensures mini player is visible across all routes
-
-## Key Features Implemented
-
-### 1. Playback Persistence
-- Player state maintained across route changes
-- Playback continues when navigating away from song view
-- Restores play position when returning to song
-
-### 2. Global Access
-- Player icon in desktop sidebar (always accessible)
-- Player icon in mobile footer menu (always accessible)
-- Both navigate to current song when clicked
-
-### 3. Visual Feedback
-- Mini player shows progress and play state
-- Active state indicators in navigation
-- Real-time updates to playback position
-
-### 4. State Management
-- Minimal global state using Zustand
-- Efficient state synchronization
-- Clean separation of concerns
-
-## Technical Approach
-
-### State Management Strategy
-- **Global State**: Only essential playback info (song ID, band ID, play state, time)
-- **Local State**: Waveform rendering and UI state remains in components
-- **Sync Points**: Play/pause events and time updates sync to global store
-
-### Navigation Flow
-1. User starts playback in song view
-2. Global store updates with song info and play state
-3. User navigates to another view (library, settings, etc.)
-4. Playback continues in background
-5. Mini player shows progress
-6. User can click player icon to return to song
-7. When returning to song, playback state is restored
-
-### Error Handling
-- Graceful handling of missing song/band IDs
-- Disabled states when no active song
-- Fallback navigation patterns
-
-## Testing Notes
-
-### Manual Testing Required
-1. **Playback Persistence**: 
-   - Start playback in song view
-   - Navigate to library or settings
-   - Verify mini player shows progress
-   - Return to song view
-   - Verify playback continues from correct position
-
-2. **Navigation**:
-   - Click player icon in sidebar/footer when song is playing
-   - Verify navigation to correct song
-   - Verify playback state is preserved
-
-3. **State Transitions**:
-   - Start playback, navigate away, pause from mini player
-   - Return to song view
-   - Verify paused state is preserved
-
-4. **Edge Cases**:
-   - Navigate away while song is loading
-   - Switch between different songs
-   - Refresh page during playback
-
-## Performance Considerations
-
-- **Minimal State**: Only essential data stored globally
-- **Efficient Updates**: Zustand provides optimized re-renders
-- **Cleanup**: Proper waveform destruction on unmount
-- **Memory**: No memory leaks from event listeners
-
-## Future Enhancements (Not Implemented)
-
-- Full play/pause control from mini player
-- Volume control in mini player
-- Song title display in mini player
-- Queue management
-- Keyboard shortcuts for player control
-
-## Backward Compatibility
-
-- All existing functionality preserved
-- No breaking changes to existing components
-- Graceful degradation if player store fails
-- Existing tests should continue to pass
-
-## Build Status
-
-✅ TypeScript compilation successful
-✅ Vite build successful
-✅ No critical errors or warnings
-
-## Next Steps
-
-1. Manual testing of playback persistence
-2. Verification of navigation flows
-3. Performance testing with multiple route changes
-4. Mobile responsiveness verification
-5. Edge case testing
-
-The implementation provides a solid foundation for the static player feature with minimal code changes and maximum reusability of existing components.

LOGGING_REDUCTION_SUMMARY.md

@@ -1,67 +0,0 @@
-# Logging Reduction Implementation Summary
-
-## Changes Made
-
-### 1. AudioService Logging Reduction (`web/src/services/audioService.ts`)
-
-**Change 1: Reduced default log level**
-- **Before**: `private logLevel: LogLevel = LogLevel.WARN;`
-- **After**: `private logLevel: LogLevel = LogLevel.ERROR;`
-- **Impact**: Eliminates all DEBUG, INFO, and WARN logging by default, keeping only ERROR logs
-
-**Change 2: Removed high-frequency event logging**
-- **Before**: DEBUG logging for play, pause, and finish events
-- **After**: No logging for these routine events
-- **Impact**: Eliminates 3 debug log calls per playback state change
-
-### 2. useWaveform Hook Logging Reduction (`web/src/hooks/useWaveform.ts`)
-
-**Changes**: Removed all `console.debug()` calls
-- Removed debug logging for container null checks
-- Removed debug logging for URL validation
-- Removed debug logging for initialization
-- Removed debug logging for audio service usage
-- Removed debug logging for playback state restoration
-- Removed debug logging for cleanup
-- Removed debug logging for play/pause/seek operations
-- **Total removed**: 8 `console.debug()` calls
-- **Impact**: Eliminates all routine debug logging from the waveform hook
-
-## Expected Results
-
-### Before Changes:
-- **AudioService**: DEBUG/INFO/WARN logs for every event (play, pause, finish, audioprocess)
-- **useWaveform**: Multiple console.debug calls for initialization, state changes, and operations
-- **Console spam**: High volume of logging during normal playback
-- **Performance impact**: Console I/O causing UI jank
-
-### After Changes:
-- **AudioService**: Only ERROR-level logs by default (can be adjusted via `setLogLevel()`)
-- **useWaveform**: No debug logging (error logging preserved)
-- **Console output**: Minimal - only errors and critical issues
-- **Performance**: Reduced console I/O overhead, smoother UI
-
-## Debugging Capabilities Preserved
-
-1. **Dynamic log level control**: `audioService.setLogLevel(LogLevel.DEBUG)` can re-enable debugging when needed
-2. **Error logging preserved**: All error logging remains intact
-3. **Reversible changes**: Can easily adjust log levels back if needed
-
-## Testing Recommendations
-
-1. **Playback test**: Load a song and verify no debug logs appear in console
-2. **State change test**: Play, pause, seek - should not produce debug logs
-3. **Error test**: Force an error condition to verify ERROR logs still work
-4. **Debug mode test**: Use `setLogLevel(LogLevel.DEBUG)` to verify debugging can be re-enabled
-
-## Files Modified
-
-- `web/src/services/audioService.ts` - Reduced log level and removed event logging
-- `web/src/hooks/useWaveform.ts` - Removed all console.debug calls
-
-## Risk Assessment
-
-- **Risk Level**: Low
-- **Reversibility**: High (can easily change log levels back)
-- **Functional Impact**: None (logging-only changes)
-- **Performance Impact**: Positive (reduced console overhead)

LOGIN_BUG_FIX_SUMMARY.md

@@ -1,99 +0,0 @@
-# Login Bug Fix Summary
-
-## Problem Analysis
-The login issue was caused by CORS and cookie domain restrictions that prevented users from logging in from different hosts (e.g., `rehearshalhub.sschuhmann.de` or IP addresses).
-
-## Root Causes Identified
-1. **CORS Restrictions**: API only allowed requests from `https://{settings.domain}` and `http://localhost:3000`
-2. **Cookie Domain Issues**: `rh_token` cookie was set without explicit domain, causing cross-domain problems
-3. **SameSite Cookie Policy**: `samesite="lax"` was blocking cross-site cookie sending
-4. **Domain Configuration**: Was set to `localhost` instead of the production domain
-
-## Changes Made
-
-### 1. CORS Configuration (`api/src/rehearsalhub/main.py`)
-- Made CORS middleware more flexible by adding the production domain automatically
-- Added support for additional CORS origins via environment variable `CORS_ORIGINS`
-- Now allows both HTTP and HTTPS for the configured domain
-
-### 2. Cookie Configuration (`api/src/rehearsalhub/routers/auth.py`)
-- Added dynamic cookie domain detection for production domains
-- Changed `samesite` policy to `"none"` with `secure=True` for cross-site functionality
-- Made cookie settings adaptive based on domain configuration
-
-### 3. Configuration Updates (`api/src/rehearsalhub/config.py`)
-- Added `cors_origins` configuration option for additional CORS origins
-
-### 4. Environment Files (`.env` and `api/.env`)
-- Updated `DOMAIN` from `localhost` to `rehearshalhub.sschuhmann.de`
-- Added `CORS_ORIGINS` with production domain URLs
-- Updated `ACME_EMAIL` to match the domain
-
-## Technical Details
-
-### Cookie Domain Logic
-```python
-# For production domains like "rehearshalhub.sschuhmann.de"
-# Cookie domain becomes ".sschuhmann.de" to allow subdomains
-cookie_domain = "." + settings.domain.split(".")[-2] + "." + settings.domain.split(".")[-1]
-```
-
-### SameSite Policy
-- Development (`localhost`): `samesite="lax"`, `secure=False` (if debug=True)
-- Production: `samesite="none"`, `secure=True` (requires HTTPS)
-
-### CORS Origins
-- Default: `https://{domain}`, `http://localhost:3000`
-- Production: Also adds `https://{domain}`, `http://{domain}`
-- Additional: From `CORS_ORIGINS` environment variable
-
-## Testing Instructions
-
-### 1. Local Development
-```bash
-# Test with localhost (should work as before)
-curl -X POST http://localhost:8000/api/v1/auth/login \
-  -H "Content-Type: application/json" \
-  -d '{"email":"test@example.com","password":"password"}' \
-  --cookie-jar cookies.txt
-```
-
-### 2. Production Domain
-```bash
-# Test with production domain
-curl -X POST https://rehearshalhub.sschuhmann.de/api/v1/auth/login \
-  -H "Content-Type: application/json" \
-  -d '{"email":"test@example.com","password":"password"}' \
-  --cookie-jar cookies.txt \
-  --insecure  # Only if using self-signed cert
-```
-
-### 3. Cross-Origin Test
-```bash
-# Test CORS headers
-curl -I -X OPTIONS https://rehearshalhub.sschuhmann.de/api/v1/auth/login \
-  -H "Origin: https://rehearshalhub.sschuhmann.de" \
-  -H "Access-Control-Request-Method: POST" \
-  -H "Access-Control-Request-Headers: content-type"
-```
-
-## Security Considerations
-
-1. **HTTPS Required**: The `secure=True` cookie flag requires HTTPS in production
-2. **SameSite=None**: Requires HTTPS and provides cross-site cookie functionality
-3. **CORS Safety**: Credentials are still restricted to allowed origins
-4. **CSRF Protection**: Maintain existing protections as cookies are httpOnly
-
-## Rollback Plan
-
-If issues occur, revert changes by:
-1. Changing domain back to `localhost` in `.env` files
-2. Removing the CORS origins logic
-3. Reverting cookie settings to original values
-
-## Files Modified
-- `api/src/rehearsalhub/main.py` - CORS middleware configuration
-- `api/src/rehearsalhub/routers/auth.py` - Cookie settings
-- `api/src/rehearsalhub/config.py` - Added cors_origins config
-- `.env` - Domain and CORS configuration
-- `api/.env` - Domain and CORS configuration

SONG_LOADING_DEBUG.md

@@ -1,114 +0,0 @@
-# Song Loading Issue Debug Analysis
-
-## Problem Identified
-- Songs are not loading after implementing the audio service
-- Likely caused by changes in waveform initialization
-
-## Potential Issues
-
-### 1. Audio Service Initialization
-- May not be properly handling the container element
-- Could have issues with WaveSurfer creation
-
-### 2. State Management
-- Global state might not be updating correctly
-- Song/band ID synchronization issues
-
-### 3. Component Lifecycle
-- Cleanup might be interfering with initialization
-- Multiple instances could be conflicting
-
-## Debugging Steps
-
-### 1. Check Console Logs
-```bash
-# Look for these key logs:
-# "useWaveform: initializing audio service"
-# "AudioService.initialize called"
-# "Waveform ready - attempting state restoration"
-# Any error messages
-```
-
-### 2. Verify Audio Service
-- Check if audioService.initialize() is being called
-- Verify WaveSurfer instance is created successfully
-- Confirm audio file URL is correct
-
-### 3. Test State Updates
-- Check if global store is being updated with song/band IDs
-- Verify state restoration logic is working
-
-## Common Fixes
-
-### Fix 1: Container Element Issues
-```typescript
-// Ensure container is properly referenced
-if (!containerRef.current) {
-  console.error('Container ref is null');
-  return;
-}
-```
-
-### Fix 2: URL Validation
-```typescript
-// Verify URL is valid before loading
-if (!options.url || options.url === 'null') {
-  console.error('Invalid audio URL:', options.url);
-  return;
-}
-```
-
-### Fix 3: WaveSurfer Configuration
-```typescript
-// Ensure proper WaveSurfer configuration
-const ws = WaveSurfer.create({
-  container: containerRef.current,
-  waveColor: "rgba(255,255,255,0.09)",
-  progressColor: "#c8861a",
-  cursorColor: "#e8a22a",
-  barWidth: 2,
-  barRadius: 2,
-  height: 104,
-  normalize: true,
-  // Add missing configurations if needed
-  audioContext: audioService.getAudioContext(), // Reuse context
-  autoPlay: false, // Ensure we control playback
-});
-```
-
-### Fix 4: Error Handling
-```typescript
-// Add comprehensive error handling
-try {
-  await ws.load(options.url);
-  console.log('Audio loaded successfully');
-} catch (error) {
-  console.error('Failed to load audio:', error);
-  // Fallback or retry logic
-}
-```
-
-## Implementation Checklist
-
-1. [ ] Verify container ref is valid
-2. [ ] Check audio URL is correct
-3. [ ] Confirm WaveSurfer instance creation
-4. [ ] Validate audio file loading
-5. [ ] Test state restoration
-6. [ ] Check error handling
-7. [ ] Verify audio context management
-
-## Potential Rollback Plan
-
-If issues persist, consider:
-1. Reverting to previous waveform hook
-2. Gradual migration to audio service
-3. Hybrid approach (service + component instances)
-
-## Next Steps
-
-1. Add detailed error logging
-2. Test with different audio files
-3. Verify network requests
-4. Check browser console for errors
-5. Test on different browsers

STATIC_PLAYER_DEBUG_ANALYSIS.md

@@ -1,191 +0,0 @@
-# Static Player Debug Analysis
-
-## Issue Identified
-- Player button appears in UI
-- Playback stops when changing views
-- State handling errors suspected
-
-## Architecture Review
-
-### Current Flow Analysis
-
-#### 1. State Initialization
-- `useWaveform.ts` creates WaveSurfer instance
-- Global store initialized with default values
-- State sync happens in useEffect
-
-#### 2. Playback State Issues
-- WaveSurfer instance destroyed when component unmounts
-- Global state may not be properly restored
-- Audio context issues when switching routes
-
-#### 3. Potential Weak Points
-
-### Weak Point 1: Waveform Destruction
-**Location**: `useWaveform.ts` cleanup function
-```typescript
-return () => {
-  ws.destroy();  // This destroys the audio context
-  wsRef.current = null;
-};
-```
-**Issue**: When navigating away, the WaveSurfer instance is destroyed, stopping playback completely.
-
-### Weak Point 2: State Restoration Logic
-**Location**: `useWaveform.ts` ready event handler
-```typescript
-// Only restores if same song AND same band AND was playing
-if (options.songId && options.bandId && 
-    currentSongId === options.songId && 
-    globalBandId === options.bandId && 
-    globalIsPlaying) {
-  ws.play();  // This may not work if audio context is suspended
-}
-```
-**Issue**: Audio context may be suspended after route change, requiring user interaction to resume.
-
-### Weak Point 3: Global State Sync Timing
-**Location**: State updates in audioprocess event
-```typescript
-ws.on("audioprocess", (time) => {
-  setCurrentTime(time);
-  setGlobalCurrentTime(time);
-  options.onTimeUpdate?.(time);
-});
-```
-**Issue**: Local state updates may not properly sync with global state during route transitions.
-
-### Weak Point 4: Component Lifecycle
-**Issue**: SongPage component unmounts → waveform destroyed → state lost → new component mounts with fresh state.
-
-## Root Cause Analysis
-
-### Primary Issue: Audio Context Lifecycle
-1. WaveSurfer creates an AudioContext
-2. When component unmounts, AudioContext is destroyed
-3. New component creates new AudioContext
-4. Browser requires user interaction to resume suspended audio contexts
-5. Even if we restore state, audio won't play without user interaction
-
-### Secondary Issue: State Restoration Timing
-1. Global state may be updated after component unmounts
-2. New component may mount before global state is fully updated
-3. Race condition in state restoration
-
-## Solution Architecture
-
-### Option 1: Persistent Audio Context (Recommended)
-- Move WaveSurfer instance outside React component lifecycle
-- Create singleton audio service
-- Maintain audio context across route changes
-- Use global state only for UI synchronization
-
-### Option 2: Audio Context Recovery
-- Handle suspended audio context states
-- Add user interaction requirement handling
-- Implement graceful degradation
-
-### Option 3: Hybrid Approach
-- Keep minimal global state for navigation
-- Create persistent audio manager
-- Sync between audio manager and React components
-
-## Implementation Plan for Fix
-
-### Step 1: Create Audio Service (New File)
-```typescript
-// web/src/services/audioService.ts
-class AudioService {
-  private static instance: AudioService;
-  private wavesurfer: WaveSurfer | null = null;
-  private audioContext: AudioContext | null = null;
-  
-  private constructor() {}
-  
-  public static getInstance() {
-    if (!this.instance) {
-      this.instance = new AudioService();
-    }
-    return this.instance;
-  }
-  
-  public initialize(container: HTMLElement, url: string) {
-    // Create wavesurfer with persistent audio context
-  }
-  
-  public play() {
-    // Handle suspended audio context
-    if (this.audioContext?.state === 'suspended') {
-      this.audioContext.resume();
-    }
-    this.wavesurfer?.play();
-  }
-  
-  public cleanup() {
-    // Don't destroy audio context, just disconnect nodes
-  }
-}
-```
-
-### Step 2: Modify Waveform Hook
-- Use audio service instead of local WaveSurfer instance
-- Sync service state with global store
-- Handle component mount/unmount gracefully
-
-### Step 3: Update Global State Management
-- Separate audio state from UI state
-- Add audio context status tracking
-- Implement proper error handling
-
-### Step 4: Add User Interaction Handling
-- Detect suspended audio context
-- Provide UI feedback
-- Handle resume on user interaction
-
-## Debugging Steps
-
-### 1. Verify Current Behavior
-```bash
-# Check browser console for audio context errors
-# Look for "play() failed because the user didn't interact with the document first"
-```
-
-### 2. Add Debug Logging
-```typescript
-// Add to useWaveform.ts
-console.log('Waveform ready, attempting to restore state:', {
-  currentSongId,
-  globalBandId,
-  globalIsPlaying,
-  globalCurrentTime
-});
-
-// Add audio context state logging
-console.log('Audio context state:', ws.backend.getAudioContext().state);
-```
-
-### 3. Test State Restoration
-- Start playback
-- Navigate away
-- Check global store state in Redux devtools
-- Navigate back
-- Verify state is restored correctly
-
-## Recommended Fix Strategy
-
-### Short-term Fix (Quick Implementation)
-1. Modify `useWaveform.ts` to handle suspended audio context
-2. Add user interaction requirement detection
-3. Implement graceful fallback when audio context is suspended
-
-### Long-term Fix (Robust Solution)
-1. Create persistent audio service
-2. Separate audio management from React components
-3. Implement proper audio context lifecycle management
-4. Add comprehensive error handling
-
-## Next Steps
-1. Add debug logging to identify exact failure point
-2. Implement suspended audio context handling
-3. Test state restoration with debug logs
-4. Implement persistent audio service if needed

Taskfile.yml

@@ -3,29 +3,11 @@ version: "3"
 vars:
   COMPOSE: docker compose
   DEV_FLAGS: -f docker-compose.yml -f docker-compose.dev.yml
-  DEV_SERVICES: db redis api web audio-worker nc-watcher
+  DEV_SERVICES: db redis api audio-worker nc-watcher
 
 # ── Production ────────────────────────────────────────────────────────────────
 
 tasks:
-  help:
-    desc: Show available tasks
-    cmds:
-      - echo "Available tasks:"
-      - echo "  dev:up           - Start complete development server (recommended)"
-      - echo "  dev:build        - Build development containers"
-      - echo "  dev:clean        - Safe cleanup (preserves network)"
-      - echo "  dev:nuke         - Full cleanup (removes everything)"
-      - echo "  dev:restart      - Restart development services"
-      - echo "  dev:down         - Stop development environment"
-      - echo "  dev:logs         - Follow logs from all services"
-      - echo "  api:logs         - Follow API service logs"
-      - echo "  web:logs         - Follow Web service logs"
-      - echo "  db:migrate       - Run database migrations"
-      - echo "  db:seed          - Seed database with test data"
-      - echo "  test:e2e         - Run end-to-end tests"
-      - echo "  test:unit        - Run unit tests"
-
   up:
     desc: Start all services (production)
     cmds:
@@ -70,21 +52,6 @@ tasks:
     cmds:
       - npm run dev
 
-  dev:up:
-    desc: Start complete development server (recommended)
-    cmds:
-      - echo "Starting development environment..."
-      - "{{.COMPOSE}} {{.DEV_FLAGS}} up -d {{.DEV_SERVICES}}"
-      - echo "Following logs... (Ctrl+C to stop)"
-      - "{{.COMPOSE}} {{.DEV_FLAGS}} logs -f api web audio-worker nc-watcher"
-
-  dev:build:
-    desc: Build development containers (only when dependencies change)
-    cmds:
-      - echo "Building development containers..."
-      - "{{.COMPOSE}} {{.DEV_FLAGS}} build --pull api web"
-      - echo "Containers built successfully"
-
   dev:logs:
     desc: Follow logs in dev mode
     cmds:
@@ -95,31 +62,6 @@ tasks:
     cmds:
       - "{{.COMPOSE}} {{.DEV_FLAGS}} restart {{.SERVICE}}"
 
-  dev:clean:
-    desc: Safe cleanup (preserves network/proxy, removes containers/volumes)
-    cmds:
-      - echo "Stopping development services..."
-      - "{{.COMPOSE}} {{.DEV_FLAGS}} down"
-      - echo "Removing development volumes..."
-      - docker volume rm -f $(docker volume ls -q | grep rehearsalhub) || true
-      - echo "Development environment cleaned (network preserved)"
-
-  dev:nuke:
-    desc: Full cleanup (removes everything including network - use when network is corrupted)
-    cmds:
-      - echo "WARNING: This will remove ALL rehearsalhub containers, networks, and volumes"
-      - echo "Press Enter to continue or Ctrl+C to cancel"
-      - "{{.COMPOSE}} {{.DEV_FLAGS}} down -v"
-      - docker system prune -f --volumes
-      - echo "Complete cleanup performed"
-
-  dev:restart:
-    desc: Restart development services (preserves build cache)
-    cmds:
-      - echo "Restarting development services..."
-      - "{{.COMPOSE}} {{.DEV_FLAGS}} restart {{.DEV_SERVICES}}"
-      - echo "Services restarted"
-
 # ── Database ──────────────────────────────────────────────────────────────────
 
   migrate:

api/src/rehearsalhub/config.py

@@ -21,8 +21,6 @@ class Settings(BaseSettings):
     # App
     domain: str = "localhost"
     debug: bool = False
-    # Additional CORS origins (comma-separated)
-    cors_origins: str = ""
 
     # Worker
     analysis_version: str = "1.0.0"

api/src/rehearsalhub/main.py

@@ -52,24 +52,9 @@ def create_app() -> FastAPI:
     app.state.limiter = limiter
     app.add_exception_handler(RateLimitExceeded, _rate_limit_exceeded_handler)
 
-    # Get allowed origins from environment or use defaults
-    allowed_origins = [f"https://{settings.domain}", "http://localhost:3000"]
-    
-    # Add specific domain for production
-    if settings.domain != "localhost":
-        allowed_origins.extend([
-            f"https://{settings.domain}",
-            f"http://{settings.domain}",
-        ])
-    
-    # Add additional CORS origins from environment variable
-    if settings.cors_origins:
-        additional_origins = [origin.strip() for origin in settings.cors_origins.split(",")]
-        allowed_origins.extend(additional_origins)
-    
     app.add_middleware(
         CORSMiddleware,
-        allow_origins=allowed_origins,
+        allow_origins=[f"https://{settings.domain}", "http://localhost:3000"],
         allow_credentials=True,
         allow_methods=["GET", "POST", "PUT", "PATCH", "DELETE"],
         allow_headers=["Authorization", "Content-Type", "Accept"],

api/src/rehearsalhub/routers/auth.py

@@ -52,29 +52,14 @@ async def login(
             status_code=status.HTTP_401_UNAUTHORIZED, detail="Invalid credentials"
         )
     settings = get_settings()
-    
-    # Determine cookie domain based on settings
-    cookie_domain = None
-    if settings.domain != "localhost":
-        # For production domains, set cookie domain to allow subdomains
-        if "." in settings.domain:  # Check if it's a proper domain
-            cookie_domain = "." + settings.domain.split(".")[-2] + "." + settings.domain.split(".")[-1]
-    
-    # For cross-site functionality, use samesite="none" with secure flag.
-    # localhost is always plain HTTP — never set Secure there or the browser drops the cookie.
-    is_localhost = settings.domain == "localhost"
-    samesite_value = "lax" if is_localhost else "none"
-    secure_flag = False if is_localhost else True
-    
     response.set_cookie(
         key="rh_token",
         value=token.access_token,
         httponly=True,
-        secure=secure_flag,
-        samesite=samesite_value,
+        secure=not settings.debug,
+        samesite="lax",
         max_age=settings.access_token_expire_minutes * 60,
         path="/",
-        domain=cookie_domain,
     )
     return token
 

docker-compose.dev.yml

@@ -25,6 +25,8 @@ services:
     build:
       context: ./api
       target: development
+    volumes:
+      - ./api/src:/app/src
     environment:
       DATABASE_URL: postgresql+asyncpg://${POSTGRES_USER:-rh_user}:${POSTGRES_PASSWORD:-default_secure_password}@db:5432/${POSTGRES_DB:-rehearsalhub}
       NEXTCLOUD_URL: ${NEXTCLOUD_URL:-https://cloud.example.com}
@@ -33,7 +35,7 @@ services:
       REDIS_URL: redis://redis:6379/0
       SECRET_KEY: ${SECRET_KEY:-replace_me_with_32_byte_hex_default}
       INTERNAL_SECRET: ${INTERNAL_SECRET:-replace_me_with_32_byte_hex_default}
-      DOMAIN: localhost
+      DOMAIN: ${DOMAIN:-localhost}
     ports:
       - "8000:8000"
     networks:
@@ -46,10 +48,12 @@ services:
     build:
       context: ./web
       target: development
+    volumes:
+      - ./web/src:/app/src
     environment:
       API_URL: http://api:8000
     ports:
-      - "3001:80"
+      - "3000:3000"
     networks:
       - rh_net
     depends_on:

docker-compose.yml

@@ -134,8 +134,8 @@ services:
 
 networks:
   frontend:
-    external:
-      name: proxy
+    external: true
+    name: proxy
   rh_net:
 
 volumes:

test_logging_reduction.js

@@ -1,29 +0,0 @@
-// Simple test to verify logging reduction
-// This would be run in a browser console to test the changes
-
-console.log("=== Testing Logging Reduction ===");
-
-// Test 1: Check AudioService default log level
-console.log("Test 1: AudioService should default to ERROR level");
-const audioService = require('./web/src/services/audioService.ts');
-console.log("Expected: LogLevel.ERROR, Actual:", audioService.getInstance().logLevel);
-
-// Test 2: Verify DEBUG logs are suppressed
-console.log("\nTest 2: DEBUG logs should be suppressed");
-audioService.getInstance().log(audioService.LogLevel.DEBUG, "This DEBUG message should NOT appear");
-
-// Test 3: Verify INFO logs are suppressed  
-console.log("\nTest 3: INFO logs should be suppressed");
-audioService.getInstance().log(audioService.LogLevel.INFO, "This INFO message should NOT appear");
-
-// Test 4: Verify ERROR logs still work
-console.log("\nTest 4: ERROR logs should still appear");
-audioService.getInstance().log(audioService.LogLevel.ERROR, "This ERROR message SHOULD appear");
-
-// Test 5: Check that useWaveform has no debug logs
-console.log("\nTest 5: useWaveform should have minimal console.debug calls");
-const useWaveformCode = require('fs').readFileSync('./web/src/hooks/useWaveform.ts', 'utf8');
-const debugCount = (useWaveformCode.match(/console\.debug/g) || []).length;
-console.log("console.debug calls in useWaveform:", debugCount, "(should be 0)");
-
-console.log("\n=== Logging Reduction Test Complete ===");

test_login_fix.py

@@ -1,116 +0,0 @@
-#!/usr/bin/env python3
-"""
-Test script to verify the login bug fix configuration.
-This script tests the configuration changes without requiring a running API server.
-"""
-
-import os
-import sys
-from pathlib import Path
-
-def test_configuration():
-    """Test that the configuration changes are correctly applied."""
-    
-    print("🔍 Testing Login Bug Fix Configuration...")
-    print("=" * 50)
-    
-    # Test 1: Check environment files
-    print("\n1. Testing Environment Files:")
-    
-    env_files = ["./.env", "./api/.env"]
-    for env_file in env_files:
-        if os.path.exists(env_file):
-            with open(env_file, 'r') as f:
-                content = f.read()
-                
-            # Check domain
-            if "DOMAIN=rehearshalhub.sschuhmann.de" in content:
-                print(f"   ✅ {env_file}: DOMAIN correctly set to rehearshalhub.sschuhmann.de")
-            else:
-                print(f"   ❌ {env_file}: DOMAIN not correctly configured")
-                
-            # Check CORS origins
-            if "CORS_ORIGINS=" in content:
-                print(f"   ✅ {env_file}: CORS_ORIGINS configured")
-            else:
-                print(f"   ❌ {env_file}: CORS_ORIGINS missing")
-        else:
-            print(f"   ⚠️  {env_file}: File not found")
-    
-    # Test 2: Check Python source files
-    print("\n2. Testing Python Source Files:")
-    
-    source_files = [
-        ("./api/src/rehearsalhub/config.py", ["cors_origins: str = \"\""], "cors_origins configuration"),
-        ("./api/src/rehearsalhub/main.py", ["allowed_origins = [", "settings.cors_origins"], "CORS middleware updates"),
-        ("./api/src/rehearsalhub/routers/auth.py", ["cookie_domain = None", "samesite_value = \"none\""], "cookie configuration updates")
-    ]
-    
-    for file_path, required_strings, description in source_files:
-        if os.path.exists(file_path):
-            with open(file_path, 'r') as f:
-                content = f.read()
-                
-            all_found = True
-            for required_string in required_strings:
-                if required_string not in content:
-                    all_found = False
-                    print(f"   ❌ {file_path}: Missing '{required_string}'")
-                    break
-            
-            if all_found:
-                print(f"   ✅ {file_path}: {description} correctly applied")
-        else:
-            print(f"   ⚠️  {file_path}: File not found")
-    
-    # Test 3: Verify cookie domain logic
-    print("\n3. Testing Cookie Domain Logic:")
-    
-    # Simulate the cookie domain logic
-    test_domains = [
-        ("localhost", None),
-        ("rehearshalhub.sschuhmann.de", ".sschuhmann.de"),
-        ("app.example.com", ".example.com"),
-        ("sub.domain.co.uk", ".co.uk")
-    ]
-    
-    for domain, expected in test_domains:
-        cookie_domain = None
-        if domain != "localhost":
-            if "." in domain:
-                parts = domain.split(".")
-                cookie_domain = "." + parts[-2] + "." + parts[-1]
-        
-        if cookie_domain == expected:
-            print(f"   ✅ Domain '{domain}' → '{cookie_domain}' (correct)")
-        else:
-            print(f"   ❌ Domain '{domain}' → '{cookie_domain}' (expected '{expected}')")
-    
-    # Test 4: Verify SameSite policy logic
-    print("\n4. Testing SameSite Policy Logic:")
-    
-    test_scenarios = [
-        ("localhost", False, "lax"),
-        ("rehearshalhub.sschuhmann.de", False, "none"),
-        ("example.com", True, "none")
-    ]
-    
-    for domain, debug, expected_samesite in test_scenarios:
-        samesite_value = "none" if domain != "localhost" else "lax"
-        secure_flag = True if domain != "localhost" else not debug
-        
-        if samesite_value == expected_samesite:
-            print(f"   ✅ {domain} (debug={debug}) → samesite='{samesite_value}', secure={secure_flag}")
-        else:
-            print(f"   ❌ {domain} (debug={debug}) → samesite='{samesite_value}' (expected '{expected_samesite}')")
-    
-    print("\n" + "=" * 50)
-    print("🎉 Configuration Test Complete!")
-    print("\nNext Steps:")
-    print("1. Start the API server: cd api && python -m rehearsalhub.main")
-    print("2. Test login from different hosts")
-    print("3. Verify CORS headers in browser developer tools")
-    print("4. Check cookie settings in browser storage")
-
-if __name__ == "__main__":
-    test_configuration()

test_playback_fix.md

@@ -1,55 +0,0 @@
-# Playback Fix Implementation Summary
-
-## Changes Made
-
-### 1. MiniPlayer Controls Fixed
-- **File**: `web/src/components/MiniPlayer.tsx`
-- **Change**: Connected play/pause buttons to actual `audioService.play()` and `audioService.pause()` methods
-- **Before**: Buttons had empty onClick handlers with comments
-- **After**: Buttons now properly control playback
-
-### 2. Audio Context Management Improved
-- **File**: `web/src/services/audioService.ts`
-- **Changes**:
-  - Added fallback audio context creation if WaveSurfer doesn't provide one
-  - Improved audio context suspension handling (common in mobile browsers)
-  - Added better error handling for autoplay policy violations
-  - Enhanced logging for debugging playback issues
-
-### 3. State Synchronization Fixed
-- **File**: `web/src/hooks/useWaveform.ts`
-- **Changes**:
-  - Replaced fixed 100ms timeout with interval-based readiness check
-  - Added error state management and propagation
-  - Improved cleanup before initialization to prevent conflicts
-  - Better handling of audio service duration checks
-
-### 4. User Feedback Added
-- **File**: `web/src/pages/SongPage.tsx`
-- **Changes**:
-  - Added error message display when audio initialization fails
-  - Added loading indicator while audio is being loaded
-  - Improved visual feedback for playback states
-
-## Expected Behavior After Fix
-
-1. **MiniPlayer Controls**: Play/pause buttons should now work properly
-2. **Playback Reliability**: Audio should start more reliably, especially on mobile devices
-3. **Error Handling**: Users will see clear error messages if playback fails
-4. **State Synchronization**: Playback state should be properly restored when switching songs
-5. **Mobile Support**: Better handling of audio context suspension on mobile browsers
-
-## Testing Recommendations
-
-1. Test playback on both desktop and mobile browsers
-2. Verify play/pause functionality in MiniPlayer
-3. Test song switching to ensure state is properly restored
-4. Check error handling by simulating failed audio loads
-5. Verify autoplay policy handling (playback should work after user interaction)
-
-## Potential Issues to Monitor
-
-1. **Audio Context Creation**: Some browsers may still block audio context creation
-2. **Mobile Autoplay**: iOS Safari has strict autoplay policies that may require user interaction
-3. **Memory Leaks**: The interval-based readiness check should be properly cleaned up
-4. **Race Conditions**: Multiple rapid song changes could cause synchronization issues

web/Dockerfile

@@ -16,7 +16,6 @@ RUN npm run build
 
 FROM nginx:alpine AS production
 COPY --from=builder /app/dist /usr/share/nginx/html
-ARG NGINX_CONF=nginx.conf
-COPY ${NGINX_CONF} /etc/nginx/conf.d/default.conf
+COPY nginx.conf /etc/nginx/conf.d/default.conf
 EXPOSE 80
 CMD ["nginx", "-g", "daemon off;"]

web/nginx-standalone.conf

@@ -1,26 +0,0 @@
-server {
-    listen 80;
-    root /usr/share/nginx/html;
-    index index.html;
-
-    # Security headers
-    add_header X-Frame-Options "DENY" always;
-    add_header X-Content-Type-Options "nosniff" always;
-    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
-    add_header X-XSS-Protection "0" always;
-    add_header Permissions-Policy "camera=(), microphone=(), geolocation=()" always;
-
-    # SPA routing — all paths fall back to index.html
-    location / {
-        try_files $uri $uri/ /index.html;
-    }
-
-    # Cache static assets aggressively (Vite build output — hashed filenames)
-    location ~* \.(js|css|woff2|png|svg|ico)$ {
-        expires 1y;
-        add_header Cache-Control "public, immutable";
-    }
-
-    gzip on;
-    gzip_types text/plain text/css application/json application/javascript text/xml application/xml text/javascript;
-}

web/nginx.conf

@@ -62,11 +62,6 @@ server {
         proxy_send_timeout 60s;
     }
 
-    # Serve manifest.json directly
-    location = /manifest.json {
-        try_files $uri =404;
-    }
-
     # SPA routing — all other paths fall back to index.html
     location / {
         try_files $uri $uri/ /index.html;

web/public/manifest.json

@@ -1,9 +0,0 @@
-{
-  "name": "RehearsalHub",
-  "short_name": "RehearsalHub",
-  "start_url": "/",
-  "display": "standalone",
-  "background_color": "#0d1117",
-  "theme_color": "#0d1117",
-  "icons": []
-}

web/src/components/BottomNavBar.tsx

@@ -1,5 +1,4 @@
 import { useNavigate, useLocation, matchPath } from "react-router-dom";
-import { usePlayerStore } from "../stores/playerStore";
 
 // ── Icons (inline SVG) ──────────────────────────────────────────────────────
 function IconLibrary() {
@@ -10,14 +9,6 @@ function IconLibrary() {
   );
 }
 
-function IconPlay() {
-  return (
-    <svg width="20" height="20" viewBox="0 0 14 14" fill="currentColor">
-      <path d="M3 2l9 5-9 5V2z" />
-    </svg>
-  );
-}
-
 
 
 function IconSettings() {
@@ -94,10 +85,6 @@ export function BottomNavBar() {
   const isLibrary = !!matchPath("/bands/:bandId", location.pathname) ||
                    !!matchPath("/bands/:bandId/sessions/:sessionId", location.pathname);
   const isSettings = location.pathname.startsWith("/settings");
-  
-  // Player state
-  const { currentSongId, currentBandId: playerBandId, isPlaying } = usePlayerStore();
-  const hasActiveSong = !!currentSongId && !!playerBandId;
 
   return (
     <nav
@@ -128,18 +115,6 @@ export function BottomNavBar() {
         }}
       />
 
-      <NavItem
-        icon={<IconPlay />}
-        label="Player"
-        active={hasActiveSong && isPlaying}
-        onClick={() => {
-          if (hasActiveSong) {
-            navigate(`/bands/${playerBandId}/songs/${currentSongId}`);
-          }
-        }}
-        disabled={!hasActiveSong}
-      />
-
       <NavItem
         icon={<IconMembers />}
         label="Members"

web/src/components/MiniPlayer.tsx

@@ -1,123 +0,0 @@
-import { usePlayerStore } from "../stores/playerStore";
-import { useNavigate } from "react-router-dom";
-import { audioService } from "../services/audioService";
-
-export function MiniPlayer() {
-  const { currentSongId, currentBandId, isPlaying, currentTime, duration } = usePlayerStore();
-  const navigate = useNavigate();
-  
-  if (!currentSongId || !currentBandId) {
-    return null;
-  }
-
-  const formatTime = (seconds: number) => {
-    const m = Math.floor(seconds / 60);
-    const s = Math.floor(seconds % 60);
-    return `${m}:${String(s).padStart(2, "0")}`;
-  };
-
-  const progress = duration > 0 ? (currentTime / duration) * 100 : 0;
-
-  return (
-    <div
-      style={
-        {
-          position: "fixed",
-          bottom: 0,
-          left: 0,
-          right: 0,
-          background: "#18181e",
-          borderTop: "1px solid rgba(255,255,255,0.06)",
-          padding: "8px 16px",
-          zIndex: 999,
-          display: "flex",
-          alignItems: "center",
-          gap: 12,
-        }
-      }
-    >
-      <button
-        onClick={() => navigate(`/bands/${currentBandId}/songs/${currentSongId}`)}
-        style={
-          {
-            background: "transparent",
-            border: "none",
-            color: "white",
-            cursor: "pointer",
-            display: "flex",
-            alignItems: "center",
-            gap: 8,
-            padding: "4px 8px",
-            borderRadius: 4,
-          }
-        }
-        title="Go to song"
-      >
-        <svg width="16" height="16" viewBox="0 0 14 14" fill="currentColor">
-          <path d="M3 2l9 5-9 5V2z" />
-        </svg>
-        <span style={{ fontSize: 12, color: "rgba(255,255,255,0.8)" }}>
-          Now Playing
-        </span>
-      </button>
-
-      <div
-        style={
-          {
-            flex: 1,
-            height: 4,
-            background: "rgba(255,255,255,0.1)",
-            borderRadius: 2,
-            overflow: "hidden",
-            cursor: "pointer",
-          }
-        }
-      >
-        <div
-          style={
-            {
-              width: `${progress}%`,
-              height: "100%",
-              background: "#e8a22a",
-              transition: "width 0.1s linear",
-            }
-          }
-        />
-      </div>
-
-      <div style={{ fontSize: 11, color: "rgba(255,255,255,0.6)", minWidth: 60, textAlign: "right" }}>
-        {formatTime(currentTime)} / {formatTime(duration)}
-      </div>
-
-      <button
-        onClick={() => {
-          if (isPlaying) {
-            audioService.pause();
-          } else {
-            audioService.play();
-          }
-        }}
-        style={
-          {
-            background: "transparent",
-            border: "none",
-            color: "white",
-            cursor: "pointer",
-            padding: "4px",
-          }
-        }
-        title={isPlaying ? "Pause" : "Play"}
-      >
-        {isPlaying ? (
-          <svg width="16" height="16" viewBox="0 0 14 14" fill="currentColor">
-            <path d="M4 2h2v10H4zm4 0h2v10h-2z" />
-          </svg>
-        ) : (
-          <svg width="16" height="16" viewBox="0 0 14 14" fill="currentColor">
-            <path d="M3 2l9 5-9 5V2z" />
-          </svg>
-        )}
-      </button>
-    </div>
-  );
-}

web/src/components/ResponsiveLayout.tsx

@@ -2,7 +2,6 @@ import { useState, useEffect } from "react";
 import { BottomNavBar } from "./BottomNavBar";
 import { Sidebar } from "./Sidebar";
 import { TopBar } from "./TopBar";
-import { MiniPlayer } from "./MiniPlayer";
 
 export function ResponsiveLayout({ children }: { children: React.ReactNode }) {
   const [isMobile, setIsMobile] = useState(false);
@@ -36,12 +35,8 @@ export function ResponsiveLayout({ children }: { children: React.ReactNode }) {
         {children}
       </div>
       <BottomNavBar />
-      <MiniPlayer />
     </>
   ) : (
-    <>
-      <Sidebar>{children}</Sidebar>
-      <MiniPlayer />
-    </>
+    <Sidebar>{children}</Sidebar>
   );
 }

web/src/components/Sidebar.tsx

@@ -6,7 +6,6 @@ import { api } from "../api/client";
 import { logout } from "../api/auth";
 import { getInitials } from "../utils";
 import type { MemberRead } from "../api/auth";
-import { usePlayerStore } from "../stores/playerStore";
 
 // ── Icons (inline SVG) ──────────────────────────────────────────────────────
 function IconWaveform() {
@@ -169,10 +168,6 @@ export function Sidebar({ children }: { children: React.ReactNode }) {
   const isSettings = location.pathname.startsWith("/settings");
   const isBandSettings = !!matchPath("/bands/:bandId/settings/*", location.pathname);
   const bandSettingsPanel = matchPath("/bands/:bandId/settings/:panel", location.pathname)?.params?.panel ?? null;
-  
-  // Player state
-  const { currentSongId, currentBandId: playerBandId, isPlaying: isPlayerPlaying } = usePlayerStore();
-  const hasActiveSong = !!currentSongId && !!playerBandId;
 
   // Close dropdown on outside click
   useEffect(() => {
@@ -434,13 +429,9 @@ export function Sidebar({ children }: { children: React.ReactNode }) {
               <NavItem
                 icon={<IconPlay />}
                 label="Player"
-                active={hasActiveSong && (isPlayer || isPlayerPlaying)}
-                onClick={() => {
-                  if (hasActiveSong) {
-                    navigate(`/bands/${playerBandId}/songs/${currentSongId}`);
-                  }
-                }}
-                disabled={!hasActiveSong}
+                active={isPlayer}
+                onClick={() => {}}
+                disabled={!isPlayer}
               />
             </>
           )}

web/src/hooks/useWaveform.ts

@@ -1,14 +1,11 @@
 import { useEffect, useRef, useState } from "react";
-import { audioService } from "../services/audioService";
-import { usePlayerStore } from "../stores/playerStore";
+import WaveSurfer from "wavesurfer.js";
 
 export interface UseWaveformOptions {
   url: string | null;
   peaksUrl: string | null;
   onReady?: (duration: number) => void;
   onTimeUpdate?: (currentTime: number) => void;
-  songId?: string | null;
-  bandId?: string | null;
 }
 
 export interface CommentMarker {
@@ -22,186 +19,116 @@ export function useWaveform(
   containerRef: React.RefObject<HTMLDivElement>,
   options: UseWaveformOptions
 ) {
+  const wsRef = useRef<WaveSurfer | null>(null);
   const [isPlaying, setIsPlaying] = useState(false);
   const [isReady, setIsReady] = useState(false);
   const [currentTime, setCurrentTime] = useState(0);
   const [duration, setDuration] = useState(0);
-  const [error, setError] = useState<string | null>(null);
+  const wasPlayingRef = useRef(false);
   const markersRef = useRef<CommentMarker[]>([]);
-  
-  // Global player state - use shallow comparison to reduce re-renders
-  const { 
-    isPlaying: globalIsPlaying, 
-    currentTime: globalCurrentTime, 
-    currentSongId, 
-    currentBandId: globalBandId,
-    setCurrentSong 
-  } = usePlayerStore(state => ({
-    isPlaying: state.isPlaying,
-    currentTime: state.currentTime,
-    currentSongId: state.currentSongId,
-    currentBandId: state.currentBandId,
-    setCurrentSong: state.setCurrentSong
-  }));
 
   useEffect(() => {
-    if (!containerRef.current) {
-      return;
-    }
+    if (!containerRef.current || !options.url) return;
 
-    if (!options.url || options.url === 'null' || options.url === 'undefined') {
-      return;
-    }
+    const ws = WaveSurfer.create({
+      container: containerRef.current,
+      waveColor: "rgba(255,255,255,0.09)",
+      progressColor: "#c8861a",
+      cursorColor: "#e8a22a",
+      barWidth: 2,
+      barRadius: 2,
+      height: 104,
+      normalize: true,
+    });
 
-    const initializeAudio = async () => {
-      try {
+    // The rh_token httpOnly cookie is sent automatically by the browser.
+    ws.load(options.url);
 
-        
-        await audioService.initialize(containerRef.current!, options.url!);
-        
-        // Set up local state synchronization with requestAnimationFrame for smoother updates
-        let animationFrameId: number | null = null;
-        let lastUpdateTime = 0;
-        const updateInterval = 1000 / 15; // ~15fps for state updates
-        
-        const handleStateUpdate = () => {
-          const now = Date.now();
-          if (now - lastUpdateTime >= updateInterval) {
-            const state = usePlayerStore.getState();
-            setIsPlaying(state.isPlaying);
-            setCurrentTime(state.currentTime);
-            setDuration(state.duration);
-            lastUpdateTime = now;
-          }
-          animationFrameId = requestAnimationFrame(handleStateUpdate);
-        };
-        
-        // Start the animation frame loop
-        animationFrameId = requestAnimationFrame(handleStateUpdate);
-        
-        const unsubscribe = () => {
-          if (animationFrameId) {
-            cancelAnimationFrame(animationFrameId);
-            animationFrameId = null;
-          }
-        };
-        
-        // Update global song context
-        if (options.songId && options.bandId) {
-          setCurrentSong(options.songId, options.bandId);
-        }
-        
-        // If this is the same song that was playing globally, restore play state
-        if (options.songId && options.bandId && 
-            currentSongId === options.songId && 
-            globalBandId === options.bandId && 
-            globalIsPlaying) {
-          
+    ws.on("ready", () => {
+      setIsReady(true);
+      setDuration(ws.getDuration());
+      options.onReady?.(ws.getDuration());
+      // Reset playing state when switching versions
+      setIsPlaying(false);
+      wasPlayingRef.current = false;
+    });
 
-          
-          // Wait for the waveform to be ready and audio context to be available
-          const checkReady = setInterval(() => {
-            if (audioService.getDuration() > 0) {
-              clearInterval(checkReady);
-              audioService.play();
-              if (globalCurrentTime > 0) {
-                audioService.seekTo(globalCurrentTime);
-              }
-            }
-          }, 50);
-        }
-        
-        setIsReady(true);
-        options.onReady?.(audioService.getDuration());
-        
-        return () => {
+    ws.on("audioprocess", (time) => {
+      setCurrentTime(time);
+      options.onTimeUpdate?.(time);
+    });
 
-          unsubscribe();
-          // Note: We don't cleanup the audio service here to maintain persistence
-          // audioService.cleanup();
-        };
-      } catch (error) {
-        console.error('useWaveform: initialization failed', error);
-        setIsReady(false);
-        setError(error instanceof Error ? error.message : 'Failed to initialize audio');
-        return () => {};
-      }
+    ws.on("play", () => {
+      setIsPlaying(true);
+      wasPlayingRef.current = true;
+    });
+    ws.on("pause", () => {
+      setIsPlaying(false);
+      wasPlayingRef.current = false;
+    });
+    ws.on("finish", () => {
+      setIsPlaying(false);
+      wasPlayingRef.current = false;
+    });
+
+    wsRef.current = ws;
+    return () => {
+      ws.destroy();
+      wsRef.current = null;
     };
-
-    initializeAudio();
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [options.url, options.songId, options.bandId, containerRef, currentSongId, globalBandId, globalCurrentTime, globalIsPlaying, setCurrentSong]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [options.url]);
 
   const play = () => {
-
-    try {
-      audioService.play();
-    } catch (error) {
-      console.error('useWaveform.play failed:', error);
-    }
+    wsRef.current?.play();
+    wasPlayingRef.current = true;
   };
-
   const pause = () => {
-
-    try {
-      audioService.pause();
-    } catch (error) {
-      console.error('useWaveform.pause failed:', error);
-    }
+    wsRef.current?.pause();
+    wasPlayingRef.current = false;
   };
-
   const seekTo = (time: number) => {
-
-    try {
-      if (isReady && isFinite(time)) {
-        audioService.seekTo(time);
-      }
-    } catch (error) {
-      console.error('useWaveform.seekTo failed:', error);
+    if (wsRef.current && isReady && isFinite(time)) {
+      wsRef.current.setTime(time);
     }
   };
 
   const addMarker = (marker: CommentMarker) => {
-    if (isReady) {
-      try {
-        // This would need proper implementation with the actual wavesurfer instance
-        const markerElement = document.createElement("div");
-        markerElement.style.position = "absolute";
-        markerElement.style.width = "24px";
-        markerElement.style.height = "24px";
-        markerElement.style.borderRadius = "50%";
-        markerElement.style.backgroundColor = "var(--accent)";
-        markerElement.style.cursor = "pointer";
-        markerElement.style.zIndex = "9999";
-        markerElement.style.left = `${(marker.time / audioService.getDuration()) * 100}%`;
-        markerElement.style.transform = "translateX(-50%) translateY(-50%)";
-        markerElement.style.top = "50%";
-        markerElement.style.border = "2px solid white";
-        markerElement.style.boxShadow = "0 0 4px rgba(0, 0, 0, 0.3)";
-        markerElement.title = `Comment at ${formatTime(marker.time)}`;
-        markerElement.onclick = marker.onClick;
+    if (wsRef.current && isReady) {
+      const wavesurfer = wsRef.current;
+      const markerElement = document.createElement("div");
+      markerElement.style.position = "absolute";
+      markerElement.style.width = "24px";
+      markerElement.style.height = "24px";
+      markerElement.style.borderRadius = "50%";
+      markerElement.style.backgroundColor = "var(--accent)";
+      markerElement.style.cursor = "pointer";
+      markerElement.style.zIndex = "9999";
+      markerElement.style.left = `${(marker.time / wavesurfer.getDuration()) * 100}%`;
+      markerElement.style.transform = "translateX(-50%) translateY(-50%)";
+      markerElement.style.top = "50%";
+      markerElement.style.border = "2px solid white";
+      markerElement.style.boxShadow = "0 0 4px rgba(0, 0, 0, 0.3)";
+      markerElement.title = `Comment at ${formatTime(marker.time)}`;
+      markerElement.onclick = marker.onClick;
 
-        if (marker.icon) {
-          const iconElement = document.createElement("img");
-          iconElement.src = marker.icon;
-          iconElement.style.width = "100%";
-          iconElement.style.height = "100%";
-          iconElement.style.borderRadius = "50%";
-          iconElement.style.objectFit = "cover";
-          markerElement.appendChild(iconElement);
-        }
-
-        const waveformContainer = containerRef.current;
-        if (waveformContainer) {
-          waveformContainer.style.position = "relative";
-          waveformContainer.appendChild(markerElement);
-        }
-
-        markersRef.current.push(marker);
-      } catch (error) {
-        console.error('useWaveform.addMarker failed:', error);
+      if (marker.icon) {
+        const iconElement = document.createElement("img");
+        iconElement.src = marker.icon;
+        iconElement.style.width = "100%";
+        iconElement.style.height = "100%";
+        iconElement.style.borderRadius = "50%";
+        iconElement.style.objectFit = "cover";
+        markerElement.appendChild(iconElement);
       }
+
+      const waveformContainer = containerRef.current;
+      if (waveformContainer) {
+        waveformContainer.style.position = "relative";
+        waveformContainer.appendChild(markerElement);
+      }
+
+      markersRef.current.push(marker);
     }
   };
 
@@ -216,11 +143,11 @@ export function useWaveform(
     markersRef.current = [];
   };
 
-  return { isPlaying, isReady, currentTime, duration, play, pause, seekTo, addMarker, clearMarkers, error };
+  return { isPlaying, isReady, currentTime, duration, play, pause, seekTo, addMarker, clearMarkers };
 }
 
 function formatTime(seconds: number): string {
   const m = Math.floor(seconds / 60);
   const s = Math.floor(seconds % 60);
   return `${m}:${String(s).padStart(2, "0")}`;
-}
+}

web/src/pages/BandPage.tsx

@@ -1,6 +1,6 @@
 import { useState, useMemo } from "react";
 import { useParams, Link } from "react-router-dom";
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { getBand } from "../api/bands";
 import { api } from "../api/client";
 
@@ -43,6 +43,13 @@ function formatDateLabel(iso: string): string {
 
 export function BandPage() {
   const { bandId } = useParams<{ bandId: string }>();
+  const qc = useQueryClient();
+  const [showCreate, setShowCreate] = useState(false);
+  const [newTitle, setNewTitle] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [scanning, setScanning] = useState(false);
+  const [scanProgress, setScanProgress] = useState<string | null>(null);
+  const [scanMsg, setScanMsg] = useState<string | null>(null);
   const [librarySearch, setLibrarySearch] = useState("");
   const [activePill, setActivePill] = useState<FilterPill>("all");
 
@@ -84,6 +91,75 @@ export function BandPage() {
     });
   }, [unattributedSongs, librarySearch, activePill]);
 
+  const createMutation = useMutation({
+    mutationFn: () => api.post(`/bands/${bandId}/songs`, { title: newTitle }),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["sessions", bandId] });
+      setShowCreate(false);
+      setNewTitle("");
+      setError(null);
+    },
+    onError: (err) => setError(err instanceof Error ? err.message : "Failed to create song"),
+  });
+
+  async function startScan() {
+    if (scanning || !bandId) return;
+    setScanning(true);
+    setScanMsg(null);
+    setScanProgress("Starting scan…");
+
+    const url = `/api/v1/bands/${bandId}/nc-scan/stream`;
+
+    try {
+      const resp = await fetch(url, { credentials: "include" });
+      if (!resp.ok || !resp.body) {
+        const text = await resp.text().catch(() => resp.statusText);
+        throw new Error(text || `HTTP ${resp.status}`);
+      }
+
+      const reader = resp.body.getReader();
+      const decoder = new TextDecoder();
+      let buf = "";
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buf += decoder.decode(value, { stream: true });
+        const lines = buf.split("\n");
+        buf = lines.pop() ?? "";
+
+        for (const line of lines) {
+          if (!line.trim()) continue;
+          let event: Record<string, unknown>;
+          try { event = JSON.parse(line); } catch { continue; }
+
+          if (event.type === "progress") {
+            setScanProgress(event.message as string);
+          } else if (event.type === "song" || event.type === "session") {
+            qc.invalidateQueries({ queryKey: ["sessions", bandId] });
+            qc.invalidateQueries({ queryKey: ["songs-unattributed", bandId] });
+          } else if (event.type === "done") {
+            const s = event.stats as { found: number; imported: number; skipped: number };
+            if (s.imported > 0) {
+              setScanMsg(`Imported ${s.imported} new song${s.imported !== 1 ? "s" : ""} (${s.skipped} already registered).`);
+            } else if (s.found === 0) {
+              setScanMsg("No audio files found.");
+            } else {
+              setScanMsg(`All ${s.found} file${s.found !== 1 ? "s" : ""} already registered.`);
+            }
+            setTimeout(() => setScanMsg(null), 6000);
+          } else if (event.type === "error") {
+            setScanMsg(`Scan error: ${event.message}`);
+          }
+        }
+      }
+    } catch (err) {
+      setScanMsg(err instanceof Error ? err.message : "Scan failed");
+    } finally {
+      setScanning(false);
+      setScanProgress(null);
+    }
+  }
 
   if (isLoading) return <div style={{ color: "var(--text-muted)", padding: 32 }}>Loading...</div>;
   if (!band) return <div style={{ color: "var(--danger)", padding: 32 }}>Band not found</div>;
@@ -130,6 +206,41 @@ export function BandPage() {
               onBlur={(e) => (e.currentTarget.style.borderColor = "rgba(255,255,255,0.08)")}
             />
           </div>
+
+          <div style={{ marginLeft: "auto", display: "flex", gap: 8, flexShrink: 0 }}>
+            <button
+              onClick={startScan}
+              disabled={scanning}
+              style={{
+                background: "none",
+                border: "1px solid rgba(255,255,255,0.09)",
+                borderRadius: 6,
+                color: scanning ? "rgba(255,255,255,0.28)" : "#4dba85",
+                cursor: scanning ? "default" : "pointer",
+                padding: "5px 12px",
+                fontSize: 12,
+                fontFamily: "inherit",
+              }}
+            >
+              {scanning ? "Scanning…" : "⟳ Scan Nextcloud"}
+            </button>
+            <button
+              onClick={() => { setShowCreate(!showCreate); setError(null); }}
+              style={{
+                background: "rgba(232,162,42,0.14)",
+                border: "1px solid rgba(232,162,42,0.28)",
+                borderRadius: 6,
+                color: "#e8a22a",
+                cursor: "pointer",
+                padding: "5px 12px",
+                fontSize: 12,
+                fontWeight: 600,
+                fontFamily: "inherit",
+              }}
+            >
+              + Upload
+            </button>
+          </div>
         </div>
 
         {/* Filter pills */}
@@ -160,6 +271,56 @@ export function BandPage() {
         </div>
       </div>
 
+      {/* ── Scan feedback ─────────────────────────────────────── */}
+      {scanning && scanProgress && (
+        <div style={{ padding: "10px 26px 0", flexShrink: 0 }}>
+          <div style={{ background: "rgba(255,255,255,0.03)", border: "1px solid rgba(255,255,255,0.07)", borderRadius: 8, color: "rgba(255,255,255,0.42)", fontSize: 12, padding: "8px 14px", fontFamily: "monospace" }}>
+            {scanProgress}
+          </div>
+        </div>
+      )}
+      {scanMsg && (
+        <div style={{ padding: "10px 26px 0", flexShrink: 0 }}>
+          <div style={{ background: "rgba(61,200,120,0.06)", border: "1px solid rgba(61,200,120,0.25)", borderRadius: 8, color: "#4dba85", fontSize: 12, padding: "8px 14px" }}>
+            {scanMsg}
+          </div>
+        </div>
+      )}
+
+      {/* ── New song / upload form ─────────────────────────────── */}
+      {showCreate && (
+        <div style={{ padding: "14px 26px 0", flexShrink: 0 }}>
+          <div style={{ background: "rgba(255,255,255,0.025)", border: "1px solid rgba(255,255,255,0.07)", borderRadius: 8, padding: 18 }}>
+            {error && <p style={{ color: "#e07070", fontSize: 13, marginBottom: 12 }}>{error}</p>}
+            <label style={{ display: "block", color: "rgba(255,255,255,0.28)", fontSize: 11, letterSpacing: "0.6px", textTransform: "uppercase", marginBottom: 6 }}>
+              Song title
+            </label>
+            <input
+              value={newTitle}
+              onChange={(e) => setNewTitle(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && newTitle && createMutation.mutate()}
+              style={{ width: "100%", padding: "8px 12px", background: "rgba(255,255,255,0.05)", border: "1px solid rgba(255,255,255,0.08)", borderRadius: 7, color: "#eeeef2", marginBottom: 12, fontSize: 14, fontFamily: "inherit", boxSizing: "border-box", outline: "none" }}
+              autoFocus
+            />
+            <div style={{ display: "flex", gap: 8 }}>
+              <button
+                onClick={() => createMutation.mutate()}
+                disabled={!newTitle}
+                style={{ background: "rgba(232,162,42,0.14)", border: "1px solid rgba(232,162,42,0.28)", borderRadius: 6, color: "#e8a22a", cursor: newTitle ? "pointer" : "default", padding: "7px 18px", fontWeight: 600, fontSize: 13, fontFamily: "inherit", opacity: newTitle ? 1 : 0.4 }}
+              >
+                Create
+              </button>
+              <button
+                onClick={() => { setShowCreate(false); setError(null); }}
+                style={{ background: "none", border: "1px solid rgba(255,255,255,0.09)", borderRadius: 6, color: "rgba(255,255,255,0.42)", cursor: "pointer", padding: "7px 18px", fontSize: 13, fontFamily: "inherit" }}
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* ── Scrollable content ────────────────────────────────── */}
       <div style={{ flex: 1, overflowY: "auto", padding: "4px 26px 26px" }}>
 
@@ -280,7 +441,7 @@ export function BandPage() {
           <p style={{ color: "rgba(255,255,255,0.28)", fontSize: 13, padding: "24px 0 8px" }}>
             {librarySearch
               ? "No results match your search."
-              : "No sessions yet. Go to Storage settings to scan your Nextcloud folder."}
+              : "No sessions yet. Scan Nextcloud or create a song to get started."}
           </p>
         )}
       </div>

web/src/pages/BandSettingsPage.tsx

@@ -419,68 +419,6 @@ function StoragePanel({
   const qc = useQueryClient();
   const [editing, setEditing] = useState(false);
   const [folderInput, setFolderInput] = useState("");
-  const [scanning, setScanning] = useState(false);
-  const [scanProgress, setScanProgress] = useState<string | null>(null);
-  const [scanMsg, setScanMsg] = useState<string | null>(null);
-
-  async function startScan() {
-    if (scanning) return;
-    setScanning(true);
-    setScanMsg(null);
-    setScanProgress("Starting scan…");
-
-    const url = `/api/v1/bands/${bandId}/nc-scan/stream`;
-
-    try {
-      const resp = await fetch(url, { credentials: "include" });
-      if (!resp.ok || !resp.body) {
-        const text = await resp.text().catch(() => resp.statusText);
-        throw new Error(text || `HTTP ${resp.status}`);
-      }
-
-      const reader = resp.body.getReader();
-      const decoder = new TextDecoder();
-      let buf = "";
-
-      while (true) {
-        const { done, value } = await reader.read();
-        if (done) break;
-        buf += decoder.decode(value, { stream: true });
-        const lines = buf.split("\n");
-        buf = lines.pop() ?? "";
-
-        for (const line of lines) {
-          if (!line.trim()) continue;
-          let event: Record<string, unknown>;
-          try { event = JSON.parse(line); } catch { continue; }
-
-          if (event.type === "progress") {
-            setScanProgress(event.message as string);
-          } else if (event.type === "song" || event.type === "session") {
-            qc.invalidateQueries({ queryKey: ["sessions", bandId] });
-            qc.invalidateQueries({ queryKey: ["songs-unattributed", bandId] });
-          } else if (event.type === "done") {
-            const s = event.stats as { found: number; imported: number; skipped: number };
-            if (s.imported > 0) {
-              setScanMsg(`Imported ${s.imported} new song${s.imported !== 1 ? "s" : ""} (${s.skipped} already registered).`);
-            } else if (s.found === 0) {
-              setScanMsg("No audio files found.");
-            } else {
-              setScanMsg(`All ${s.found} file${s.found !== 1 ? "s" : ""} already registered.`);
-            }
-            setTimeout(() => setScanMsg(null), 6000);
-          } else if (event.type === "error") {
-            setScanMsg(`Scan error: ${event.message}`);
-          }
-        }
-      }
-    } catch (err) {
-      setScanMsg(err instanceof Error ? err.message : "Scan failed");
-    } finally {
-      setScanning(false);
-      setScanProgress(null);
-    }
-  }
 
   const updateMutation = useMutation({
     mutationFn: (nc_folder_path: string) => api.patch(`/bands/${bandId}`, { nc_folder_path }),
@@ -600,38 +538,6 @@ function StoragePanel({
           </div>
         )}
       </div>
-
-      {/* Scan action */}
-      <div style={{ marginTop: 16 }}>
-        <button
-          onClick={startScan}
-          disabled={scanning}
-          style={{
-            background: scanning ? "transparent" : "rgba(61,200,120,0.08)",
-            border: `1px solid ${scanning ? "rgba(255,255,255,0.07)" : "rgba(61,200,120,0.25)"}`,
-            borderRadius: 6,
-            color: scanning ? "rgba(255,255,255,0.28)" : "#4dba85",
-            cursor: scanning ? "default" : "pointer",
-            padding: "6px 14px",
-            fontSize: 12,
-            fontFamily: "inherit",
-            transition: "all 0.12s",
-          }}
-        >
-          {scanning ? "Scanning…" : "⟳ Scan Nextcloud"}
-        </button>
-      </div>
-
-      {scanning && scanProgress && (
-        <div style={{ marginTop: 10, background: "rgba(255,255,255,0.03)", border: "1px solid rgba(255,255,255,0.07)", borderRadius: 8, color: "rgba(255,255,255,0.42)", fontSize: 12, padding: "8px 14px", fontFamily: "monospace" }}>
-          {scanProgress}
-        </div>
-      )}
-      {scanMsg && (
-        <div style={{ marginTop: 10, background: "rgba(61,200,120,0.06)", border: "1px solid rgba(61,200,120,0.25)", borderRadius: 8, color: "#4dba85", fontSize: 12, padding: "8px 14px" }}>
-          {scanMsg}
-        </div>
-      )}
     </div>
   );
 }

web/src/pages/SongPage.tsx

@@ -354,11 +354,9 @@ export function SongPage() {
 
   // ── Waveform ─────────────────────────────────────────────────────────────
 
-  const { isPlaying, isReady, currentTime, duration, play, pause, seekTo, error } = useWaveform(waveformRef, {
+  const { isPlaying, isReady, currentTime, duration, play, pause, seekTo } = useWaveform(waveformRef, {
     url: activeVersion ? `/api/v1/versions/${activeVersion}/stream` : null,
     peaksUrl: activeVersion ? `/api/v1/versions/${activeVersion}/waveform` : null,
-    songId: songId,
-    bandId: bandId,
   });
 
   // Track waveform container width for pin positioning
@@ -562,32 +560,6 @@ export function SongPage() {
 
               {/* WaveSurfer canvas target */}
               <div ref={waveformRef} />
-              
-              {/* Error message */}
-              {error && (
-                <div style={{ 
-                  color: "#e07070", 
-                  fontSize: 12, 
-                  padding: "8px 0", 
-                  textAlign: "center",
-                  fontFamily: "monospace"
-                }}>
-                  Audio error: {error}
-                </div>
-              )}
-              
-              {/* Loading indicator */}
-              {!isReady && !error && (
-                <div style={{ 
-                  color: "rgba(255,255,255,0.3)", 
-                  fontSize: 12, 
-                  padding: "8px 0", 
-                  textAlign: "center",
-                  fontFamily: "monospace"
-                }}>
-                  Loading audio...
-                </div>
-              )}
             </div>
 
             {/* Time display */}

web/src/services/audioService.ts

@@ -1,469 +0,0 @@
-import WaveSurfer from "wavesurfer.js";
-import { usePlayerStore } from "../stores/playerStore";
-
-// Log level enum
-enum LogLevel {
-  DEBUG = 0,
-  INFO = 1,
-  WARN = 2,
-  ERROR = 3
-}
-
-// Type extension for WaveSurfer backend access
-interface WaveSurferWithBackend extends WaveSurfer {
-  backend?: {
-    getAudioContext?: () => AudioContext;
-    ac?: AudioContext;
-    audioContext?: AudioContext;
-  };
-  getAudioContext?: () => AudioContext;
-  getContainer?: () => HTMLElement;
-  setContainer?: (container: HTMLElement) => void;
-}
-
-class AudioService {
-  private static instance: AudioService;
-  private wavesurfer: WaveSurfer | null = null;
-  private audioContext: AudioContext | null = null;
-  private currentUrl: string | null = null;
-  private lastPlayTime: number = 0;
-  private lastTimeUpdate: number = 0;
-private readonly PLAY_DEBOUNCE_MS: number = 100;
-  private lastSeekTime: number = 0;
-  private readonly SEEK_DEBOUNCE_MS: number = 200;
-  private logLevel: LogLevel = LogLevel.ERROR;
-  private playbackAttempts: number = 0;
-  private readonly MAX_PLAYBACK_ATTEMPTS: number = 3;
-  
-  private constructor() {
-    // Check for debug mode from environment
-    if (import.meta.env.DEV || import.meta.env.MODE === 'development') {
-      this.setLogLevel(LogLevel.DEBUG);
-      this.log(LogLevel.INFO, 'AudioService initialized in DEVELOPMENT mode with debug logging');
-    } else {
-      this.log(LogLevel.INFO, 'AudioService initialized');
-    }
-  }
-  
-  private log(level: LogLevel, message: string, ...args: unknown[]) {
-    if (level < this.logLevel) return;
-    
-    const prefix = `[AudioService:${LogLevel[level]}]`;
-    
-    switch(level) {
-      case LogLevel.DEBUG:
-        if (console.debug) {
-          console.debug(prefix, message, ...args);
-        }
-        break;
-      case LogLevel.INFO:
-        console.info(prefix, message, ...args);
-        break;
-      case LogLevel.WARN:
-        console.warn(prefix, message, ...args);
-        break;
-      case LogLevel.ERROR:
-        console.error(prefix, message, ...args);
-        break;
-    }
-  }
-
-  // Add method to set log level from outside
-  public setLogLevel(level: LogLevel) {
-    this.log(LogLevel.INFO, `Log level set to: ${LogLevel[level]}`);
-    this.logLevel = level;
-  }
-  
-  public static getInstance() {
-    if (!this.instance) {
-      this.instance = new AudioService();
-    }
-    return this.instance;
-  }
-  
-  public async initialize(container: HTMLElement, url: string) {
-    this.log(LogLevel.DEBUG, 'AudioService.initialize called', { url, containerExists: !!container });
-    
-    // Validate inputs
-    if (!container) {
-      this.log(LogLevel.ERROR, 'AudioService: container element is null');
-      throw new Error('Container element is required');
-    }
-    
-    if (!url || url === 'null' || url === 'undefined') {
-      this.log(LogLevel.ERROR, 'AudioService: invalid URL', { url });
-      throw new Error('Valid audio URL is required');
-    }
-    
-    // If same URL and we already have an instance, just update container reference
-    if (this.currentUrl === url && this.wavesurfer) {
-      this.log(LogLevel.INFO, 'Reusing existing WaveSurfer instance for URL:', url);
-      try {
-        // Check if container is different and needs updating
-        const ws = this.wavesurfer as WaveSurferWithBackend;
-        const currentContainer = ws.getContainer?.();
-        if (currentContainer !== container) {
-          this.log(LogLevel.DEBUG, 'Updating container reference for existing instance');
-          // Update container reference without recreating instance
-          ws.setContainer?.(container);
-        } else {
-          this.log(LogLevel.DEBUG, 'Using existing instance - no changes needed');
-        }
-        return this.wavesurfer;
-      } catch (error) {
-        this.log(LogLevel.ERROR, 'Failed to reuse existing instance:', error);
-        this.cleanup();
-      }
-    }
-    
-    // Clean up existing instance if different URL
-    if (this.wavesurfer && this.currentUrl !== url) {
-      this.log(LogLevel.INFO, 'Cleaning up existing instance for new URL:', url);
-      this.cleanup();
-    }
-    
-    // Create new WaveSurfer instance
-    this.log(LogLevel.DEBUG, 'Creating new WaveSurfer instance for URL:', url);
-    let ws;
-    try {
-      ws = WaveSurfer.create({
-        container: container,
-        waveColor: "rgba(255,255,255,0.09)",
-        progressColor: "#c8861a",
-        cursorColor: "#e8a22a",
-        barWidth: 2,
-        barRadius: 2,
-        height: 104,
-        normalize: true,
-        // Ensure we can control playback manually
-        autoplay: false,
-        // Development-specific settings for better debugging
-        ...(import.meta.env.DEV && {
-          backend: 'WebAudio',
-          audioContext: this.audioContext,
-          audioRate: 1,
-        }),
-      });
-      
-      if (!ws) {
-        throw new Error('WaveSurfer.create returned null or undefined');
-      }
-      
-      // @ts-expect-error - WaveSurfer typing doesn't expose backend
-      if (!ws.backend) {
-        console.warn('WaveSurfer instance has no backend property yet - this might be normal in v7+');
-        // Don't throw error - we'll try to access backend later when needed
-      }
-    } catch (error) {
-      console.error('Failed to create WaveSurfer instance:', error);
-      throw error;
-    }
-    
-    // Store references
-    this.wavesurfer = ws;
-    this.currentUrl = url;
-    
-    // Get audio context from wavesurfer
-    // Note: In WaveSurfer v7+, backend might not be available immediately
-    // We'll try to access it now, but also set up a handler to get it when ready
-    this.setupAudioContext(ws);
-    
-    // Set up event handlers before loading
-    this.setupEventHandlers();
-    
-    // Load the audio with error handling
-    this.log(LogLevel.DEBUG, 'Loading audio URL:', url);
-    try {
-      const loadPromise = new Promise<void>((resolve, reject) => {
-        ws.on('ready', () => {
-          this.log(LogLevel.DEBUG, 'WaveSurfer ready event fired');
-          // Now that WaveSurfer is ready, set up audio context and finalize initialization
-          this.setupAudioContext(ws);
-          
-          // Update player store with duration
-          const playerStore = usePlayerStore.getState();
-          playerStore.setDuration(ws.getDuration());
-          
-          resolve();
-        });
-        
-        ws.on('error', (error) => {
-          this.log(LogLevel.ERROR, 'WaveSurfer error event:', error);
-          reject(error);
-        });
-        
-        // Start loading
-        ws.load(url);
-      });
-      
-      await loadPromise;
-      this.log(LogLevel.INFO, 'Audio loaded successfully');
-      
-    } catch (error) {
-      this.log(LogLevel.ERROR, 'Failed to load audio:', error);
-      this.cleanup();
-      throw error;
-    }
-    
-    return ws;
-  }
-  
-  private setupEventHandlers() {
-    if (!this.wavesurfer) return;
-    
-    const ws = this.wavesurfer;
-    const playerStore = usePlayerStore.getState();
-    
-    ws.on("play", () => {
-      playerStore.batchUpdate({ isPlaying: true });
-    });
-    
-    ws.on("pause", () => {
-      playerStore.batchUpdate({ isPlaying: false });
-    });
-    
-    ws.on("finish", () => {
-      playerStore.batchUpdate({ isPlaying: false });
-    });
-    
-    ws.on("audioprocess", (time) => {
-      const now = Date.now();
-      // Throttle state updates to reduce React re-renders
-      if (now - this.lastTimeUpdate >= 250) {
-        playerStore.batchUpdate({ currentTime: time });
-        this.lastTimeUpdate = now;
-      }
-    });
-    
-    // Note: Ready event is handled in the load promise, so we don't set it up here
-    // to avoid duplicate event handlers
-  }
-  
-  public async play(): Promise<void> {
-    if (!this.wavesurfer) {
-      this.log(LogLevel.WARN, 'AudioService: no wavesurfer instance');
-      return;
-    }
-    
-    // Debounce rapid play calls
-    const now = Date.now();
-    if (now - this.lastPlayTime < this.PLAY_DEBOUNCE_MS) {
-      this.log(LogLevel.DEBUG, 'Playback debounced - too frequent calls');
-      return;
-    }
-    this.lastPlayTime = now;
-    
-    this.log(LogLevel.INFO, 'AudioService.play called');
-    
-    try {
-      // Ensure we have a valid audio context
-      await this.ensureAudioContext();
-      
-      // Handle suspended audio context (common in mobile browsers)
-      if (this.audioContext?.state === 'suspended') {
-        await this.audioContext.resume();
-        this.log(LogLevel.INFO, 'Audio context resumed successfully');
-      }
-      
-      await this.wavesurfer.play();
-      this.log(LogLevel.INFO, 'Playback started successfully');
-      this.playbackAttempts = 0; // Reset on success
-    } catch (error) {
-      this.playbackAttempts++;
-      this.log(LogLevel.ERROR, `Playback failed (attempt ${this.playbackAttempts}):`, error);
-      
-      // Handle specific audio context errors
-      if (error instanceof Error && error.name === 'NotAllowedError') {
-        this.log(LogLevel.ERROR, 'Playback blocked by browser autoplay policy');
-        // Try to resume audio context and retry
-        if (this.audioContext?.state === 'suspended') {
-          try {
-            await this.audioContext.resume();
-            this.log(LogLevel.INFO, 'Audio context resumed, retrying playback');
-            return this.play(); // Retry after resuming
-          } catch (resumeError) {
-            this.log(LogLevel.ERROR, 'Failed to resume audio context:', resumeError);
-          }
-        }
-      }
-      
-      if (this.playbackAttempts >= this.MAX_PLAYBACK_ATTEMPTS) {
-        this.log(LogLevel.ERROR, 'Max playback attempts reached, resetting player');
-        this.cleanup();
-        // Could trigger re-initialization here if needed
-      } else {
-        // Exponential backoff for retry
-        const delay = 100 * this.playbackAttempts;
-        this.log(LogLevel.WARN, `Retrying playback in ${delay}ms...`);
-        await new Promise(resolve => setTimeout(resolve, delay));
-        return this.play(); // Retry
-      }
-    }
-  }
-  
-  public pause() {
-    if (!this.wavesurfer) {
-      this.log(LogLevel.WARN, 'AudioService: no wavesurfer instance');
-      return;
-    }
-    
-    this.log(LogLevel.INFO, 'AudioService.pause called');
-    this.wavesurfer.pause();
-  }
-  
-  public seekTo(time: number) {
-    if (!this.wavesurfer) {
-      this.log(LogLevel.WARN, "AudioService: no wavesurfer instance");
-      return;
-    }
-
-    // Debounce seek operations to prevent jitter
-    const now = Date.now();
-    if (now - this.lastSeekTime < this.SEEK_DEBOUNCE_MS) {
-      this.log(LogLevel.DEBUG, "Seek debounced - too frequent");
-      return;
-    }
-    this.lastSeekTime = now;
-
-    this.log(LogLevel.INFO, "AudioService.seekTo called", { time });
-    this.wavesurfer.setTime(time);
-  }
-  
-  public getCurrentTime(): number {
-    if (!this.wavesurfer) return 0;
-    return this.wavesurfer.getCurrentTime();
-  }
-  
-  public getDuration(): number {
-    if (!this.wavesurfer) return 0;
-    return this.wavesurfer.getDuration();
-  }
-  
-  public isPlaying(): boolean {
-    if (!this.wavesurfer) return false;
-    return this.wavesurfer.isPlaying();
-  }
-  
-  public cleanup() {
-    this.log(LogLevel.INFO, 'AudioService.cleanup called');
-    
-    if (this.wavesurfer) {
-      try {
-        // Disconnect audio nodes but keep audio context alive
-        this.wavesurfer.unAll();
-        this.wavesurfer.destroy();
-        this.log(LogLevel.DEBUG, 'WaveSurfer instance cleaned up');
-      } catch (error) {
-        this.log(LogLevel.ERROR, 'Error cleaning up WaveSurfer:', error);
-      }
-      this.wavesurfer = null;
-    }
-    
-    this.currentUrl = null;
-    // Note: We intentionally don't nullify audioContext to keep it alive
-  }
-  
-  private async ensureAudioContext(): Promise<AudioContext> {
-    // If we already have a valid audio context, return it
-    if (this.audioContext) {
-      // Resume if suspended (common in mobile browsers)
-      if (this.audioContext.state === 'suspended') {
-        try {
-          await this.audioContext.resume();
-          console.log('Audio context resumed successfully');
-        } catch (error) {
-          console.error('Failed to resume audio context:', error);
-        }
-      }
-      return this.audioContext;
-    }
-    
-    // Create new audio context
-    try {
-      this.audioContext = new (window.AudioContext || (window as { webkitAudioContext?: new () => AudioContext }).webkitAudioContext)();
-      console.log('Audio context created:', this.audioContext.state);
-      
-      // Handle context state changes
-      this.audioContext.onstatechange = () => {
-        console.log('Audio context state changed:', this.audioContext?.state);
-      };
-      
-      return this.audioContext;
-    } catch (error) {
-      console.error('Failed to create audio context:', error);
-      throw error;
-    }
-  }
-  
-  private setupAudioContext(ws: WaveSurferWithBackend) {
-    // Try multiple methods to get audio context from WaveSurfer v7+
-    try {
-      // Method 1: Try standard backend.getAudioContext()
-      this.audioContext = ws.backend?.getAudioContext?.() ?? null;
-      
-      // Method 2: Try accessing audio context directly from backend
-      if (!this.audioContext) {
-        this.audioContext = ws.backend?.ac ?? null;
-      }
-      
-      // Method 3: Try accessing through backend.getAudioContext() without optional chaining
-      if (!this.audioContext) {
-        this.audioContext = ws.backend?.getAudioContext?.() ?? null;
-      }
-      
-      // Method 4: Try accessing through wavesurfer.getAudioContext() if it exists
-      if (!this.audioContext && typeof ws.getAudioContext === 'function') {
-        this.audioContext = ws.getAudioContext() ?? null;
-      }
-      
-      // Method 5: Try accessing through backend.ac directly
-      if (!this.audioContext) {
-        this.audioContext = ws.backend?.ac ?? null;
-      }
-      
-      // Method 6: Try accessing through backend.audioContext
-      if (!this.audioContext) {
-        this.audioContext = ws.backend?.audioContext ?? null;
-      }
-      
-      // Method 7: Create a new audio context if none found
-      if (!this.audioContext) {
-        this.log(LogLevel.WARN, 'Could not access audio context from WaveSurfer, creating new one');
-        this.audioContext = new (window.AudioContext || (window as { webkitAudioContext?: new () => AudioContext }).webkitAudioContext)();
-      }
-      
-      if (this.audioContext) {
-        this.log(LogLevel.INFO, 'Audio context accessed successfully:', this.audioContext.state);
-        
-        // Handle audio context suspension (common in mobile browsers)
-        if (this.audioContext.state === 'suspended') {
-          this.audioContext.resume().catch(error => {
-            this.log(LogLevel.ERROR, 'Failed to resume audio context:', error);
-          });
-        }
-      } else {
-        this.log(LogLevel.ERROR, 'Failed to create or access audio context - playback will not work');
-      }
-    } catch (error) {
-      this.log(LogLevel.ERROR, 'Error accessing audio context:', error);
-    }
-  }
-
-
-
-  public getAudioContextState(): string | undefined {
-    return this.audioContext?.state;
-  }
-  
-  // Method to update multiple player state values at once
-  public updatePlayerState(updates: {
-    isPlaying?: boolean;
-    currentTime?: number;
-    duration?: number;
-  }) {
-    const playerStore = usePlayerStore.getState();
-    playerStore.batchUpdate(updates);
-  }
-}
-
-export const audioService = AudioService.getInstance();

web/src/services/audioService.ts.backup2

@@ -1,415 +0,0 @@
-import WaveSurfer from "wavesurfer.js";
-import { usePlayerStore } from "../stores/playerStore";
-
-// Log level enum
-enum LogLevel {
-  DEBUG = 0,
-  INFO = 1,
-  WARN = 2,
-  ERROR = 3
-}
-
-// Type extension for WaveSurfer backend access
-interface WaveSurferWithBackend extends WaveSurfer {
-  backend?: {
-    getAudioContext?: () => AudioContext;
-    ac?: AudioContext;
-    audioContext?: AudioContext;
-  };
-  getAudioContext?: () => AudioContext;
-  getContainer?: () => HTMLElement;
-  setContainer?: (container: HTMLElement) => void;
-}
-
-class AudioService {
-  private static instance: AudioService;
-  private wavesurfer: WaveSurfer | null = null;
-  private audioContext: AudioContext | null = null;
-  private currentUrl: string | null = null;
-  private lastPlayTime: number = 0;
-  private lastTimeUpdate: number = 0;
-  private readonly TIME_UPDATE_THROTTLE: number = 100;
-private readonly PLAY_DEBOUNCE_MS: number = 100;
-  private lastSeekTime: number = 0;
-  private readonly SEEK_DEBOUNCE_MS: number = 200;
-  private logLevel: LogLevel = LogLevel.INFO;
-  private playbackAttempts: number = 0;
-  private readonly MAX_PLAYBACK_ATTEMPTS: number = 3;
-  
-  private constructor() {
-    this.log(LogLevel.INFO, 'AudioService initialized');
-  }
-  
-  private log(level: LogLevel, message: string, ...args: unknown[]) {
-    if (level < this.logLevel) return;
-    
-    const prefix = `[AudioService:${LogLevel[level]}]`;
-    
-    switch(level) {
-      case LogLevel.DEBUG:
-        if (console.debug) {
-          console.debug(prefix, message, ...args);
-        }
-        break;
-      case LogLevel.INFO:
-        console.info(prefix, message, ...args);
-        break;
-      case LogLevel.WARN:
-        console.warn(prefix, message, ...args);
-        break;
-      case LogLevel.ERROR:
-        console.error(prefix, message, ...args);
-        break;
-    }
-  }
-
-  // Add method to set log level from outside
-  public setLogLevel(level: LogLevel) {
-    this.log(LogLevel.INFO, `Log level set to: ${LogLevel[level]}`);
-    this.logLevel = level;
-  }
-  
-  public static getInstance() {
-    if (!this.instance) {
-      this.instance = new AudioService();
-    }
-    return this.instance;
-  }
-  
-  public async initialize(container: HTMLElement, url: string) {
-    this.log(LogLevel.DEBUG, 'AudioService.initialize called', { url, containerExists: !!container });
-    
-    // Validate inputs
-    if (!container) {
-      this.log(LogLevel.ERROR, 'AudioService: container element is null');
-      throw new Error('Container element is required');
-    }
-    
-    if (!url || url === 'null' || url === 'undefined') {
-      this.log(LogLevel.ERROR, 'AudioService: invalid URL', { url });
-      throw new Error('Valid audio URL is required');
-    }
-    
-    // If same URL and we already have an instance, just update container reference
-    if (this.currentUrl === url && this.wavesurfer) {
-      this.log(LogLevel.INFO, 'Reusing existing WaveSurfer instance for URL:', url);
-      try {
-        // Check if container is different and needs updating
-        const ws = this.wavesurfer as WaveSurferWithBackend;
-        const currentContainer = ws.getContainer?.();
-        if (currentContainer !== container) {
-          this.log(LogLevel.DEBUG, 'Updating container reference for existing instance');
-          // Update container reference without recreating instance
-          ws.setContainer?.(container);
-        } else {
-          this.log(LogLevel.DEBUG, 'Using existing instance - no changes needed');
-        }
-        return this.wavesurfer;
-      } catch (error) {
-        this.log(LogLevel.ERROR, 'Failed to reuse existing instance:', error);
-        this.cleanup();
-      }
-    }
-    
-    // Clean up existing instance if different URL
-    if (this.wavesurfer && this.currentUrl !== url) {
-      this.log(LogLevel.INFO, 'Cleaning up existing instance for new URL:', url);
-      this.cleanup();
-    }
-    
-    // Create new WaveSurfer instance
-    this.log(LogLevel.DEBUG, 'Creating new WaveSurfer instance for URL:', url);
-    let ws;
-    try {
-      ws = WaveSurfer.create({
-        container: container,
-        waveColor: "rgba(255,255,255,0.09)",
-        progressColor: "#c8861a",
-        cursorColor: "#e8a22a",
-        barWidth: 2,
-        barRadius: 2,
-        height: 104,
-        normalize: true,
-        // Ensure we can control playback manually
-        autoplay: false,
-      });
-      
-      if (!ws) {
-        throw new Error('WaveSurfer.create returned null or undefined');
-      }
-      
-      // @ts-expect-error - WaveSurfer typing doesn't expose backend
-      if (!ws.backend) {
-        console.warn('WaveSurfer instance has no backend property yet - this might be normal in v7+');
-        // Don't throw error - we'll try to access backend later when needed
-      }
-    } catch (error) {
-      console.error('Failed to create WaveSurfer instance:', error);
-      throw error;
-    }
-    
-    // Store references
-    this.wavesurfer = ws;
-    this.currentUrl = url;
-    
-    // Get audio context from wavesurfer
-    // Note: In WaveSurfer v7+, backend might not be available immediately
-    // We'll try to access it now, but also set up a handler to get it when ready
-    this.setupAudioContext(ws);
-    
-    // Set up event handlers before loading
-    this.setupEventHandlers();
-    
-    // Load the audio with error handling
-    this.log(LogLevel.DEBUG, 'Loading audio URL:', url);
-    try {
-      const loadPromise = new Promise<void>((resolve, reject) => {
-        ws.on('ready', () => {
-          this.log(LogLevel.DEBUG, 'WaveSurfer ready event fired');
-          // Now that WaveSurfer is ready, set up audio context and finalize initialization
-          this.setupAudioContext(ws);
-          
-          // Update player store with duration
-          const playerStore = usePlayerStore.getState();
-          playerStore.setDuration(ws.getDuration());
-          
-          resolve();
-        });
-        
-        ws.on('error', (error) => {
-          this.log(LogLevel.ERROR, 'WaveSurfer error event:', error);
-          reject(error);
-        });
-        
-        // Start loading
-        ws.load(url);
-      });
-      
-      await loadPromise;
-      this.log(LogLevel.INFO, 'Audio loaded successfully');
-      
-    } catch (error) {
-      this.log(LogLevel.ERROR, 'Failed to load audio:', error);
-      this.cleanup();
-      throw error;
-    }
-    
-    return ws;
-  }
-  
-  private setupEventHandlers() {
-    if (!this.wavesurfer) return;
-    
-    const ws = this.wavesurfer;
-    const playerStore = usePlayerStore.getState();
-    
-    ws.on("play", () => {
-      this.log(LogLevel.DEBUG, 'AudioService: play event');
-      playerStore.setPlaying(true);
-    });
-    
-    ws.on("pause", () => {
-      this.log(LogLevel.DEBUG, 'AudioService: pause event');
-      playerStore.setPlaying(false);
-    });
-    
-    ws.on("finish", () => {
-      this.log(LogLevel.DEBUG, 'AudioService: finish event');
-      playerStore.setPlaying(false);
-    });
-    
-    ws.on("audioprocess", (time) => {
-      const now = Date.now();
-      if (now - this.lastTimeUpdate >= this.TIME_UPDATE_THROTTLE) {
-        playerStore.setCurrentTime(time);
-        this.lastTimeUpdate = now;
-      }
-    });
-    
-    // Note: Ready event is handled in the load promise, so we don't set it up here
-    // to avoid duplicate event handlers
-  }
-  
-  public async play(): Promise<void> {
-    if (!this.wavesurfer) {
-      this.log(LogLevel.WARN, 'AudioService: no wavesurfer instance');
-      return;
-    }
-    
-    // Debounce rapid play calls
-    const now = Date.now();
-    if (now - this.lastPlayTime < this.PLAY_DEBOUNCE_MS) {
-      this.log(LogLevel.DEBUG, 'Playback debounced - too frequent calls');
-      return;
-    }
-    this.lastPlayTime = now;
-    
-    this.log(LogLevel.INFO, 'AudioService.play called');
-    
-    try {
-      // Ensure we have a valid audio context
-      await this.ensureAudioContext();
-      
-      await this.wavesurfer.play();
-      this.log(LogLevel.INFO, 'Playback started successfully');
-      this.playbackAttempts = 0; // Reset on success
-    } catch (error) {
-      this.playbackAttempts++;
-      this.log(LogLevel.ERROR, `Playback failed (attempt ${this.playbackAttempts}):`, error);
-      
-      if (this.playbackAttempts >= this.MAX_PLAYBACK_ATTEMPTS) {
-        this.log(LogLevel.ERROR, 'Max playback attempts reached, resetting player');
-        this.cleanup();
-        // Could trigger re-initialization here if needed
-      } else {
-        // Exponential backoff for retry
-        const delay = 100 * this.playbackAttempts;
-        this.log(LogLevel.WARN, `Retrying playback in ${delay}ms...`);
-        await new Promise(resolve => setTimeout(resolve, delay));
-        return this.play(); // Retry
-      }
-    }
-  }
-  
-  public pause() {
-    if (!this.wavesurfer) {
-      this.log(LogLevel.WARN, 'AudioService: no wavesurfer instance');
-      return;
-    }
-    
-    this.log(LogLevel.INFO, 'AudioService.pause called');
-    this.wavesurfer.pause();
-  }
-  
-  public seekTo(time: number) {
-    if (!this.wavesurfer) {
-      this.log(LogLevel.WARN, 'AudioService: no wavesurfer instance');
-      return;
-    }
-    
-    this.log(LogLevel.INFO, 'AudioService.seekTo called', { time });
-    this.wavesurfer.setTime(time);
-  }
-  
-  public getCurrentTime(): number {
-    if (!this.wavesurfer) return 0;
-    return this.wavesurfer.getCurrentTime();
-  }
-  
-  public getDuration(): number {
-    if (!this.wavesurfer) return 0;
-    return this.wavesurfer.getDuration();
-  }
-  
-  public isPlaying(): boolean {
-    if (!this.wavesurfer) return false;
-    return this.wavesurfer.isPlaying();
-  }
-  
-  public cleanup() {
-    this.log(LogLevel.INFO, 'AudioService.cleanup called');
-    
-    if (this.wavesurfer) {
-      try {
-        // Disconnect audio nodes but keep audio context alive
-        this.wavesurfer.unAll();
-        this.wavesurfer.destroy();
-        this.log(LogLevel.DEBUG, 'WaveSurfer instance cleaned up');
-      } catch (error) {
-        this.log(LogLevel.ERROR, 'Error cleaning up WaveSurfer:', error);
-      }
-      this.wavesurfer = null;
-    }
-    
-    this.currentUrl = null;
-    // Note: We intentionally don't nullify audioContext to keep it alive
-  }
-  
-  private async ensureAudioContext(): Promise<AudioContext> {
-    // If we already have a valid audio context, return it
-    if (this.audioContext) {
-      // Resume if suspended (common in mobile browsers)
-      if (this.audioContext.state === 'suspended') {
-        try {
-          await this.audioContext.resume();
-          console.log('Audio context resumed successfully');
-        } catch (error) {
-          console.error('Failed to resume audio context:', error);
-        }
-      }
-      return this.audioContext;
-    }
-    
-    // Create new audio context
-    try {
-      this.audioContext = new (window.AudioContext || (window as { webkitAudioContext?: new () => AudioContext }).webkitAudioContext)();
-      console.log('Audio context created:', this.audioContext.state);
-      
-      // Handle context state changes
-      this.audioContext.onstatechange = () => {
-        console.log('Audio context state changed:', this.audioContext?.state);
-      };
-      
-      return this.audioContext;
-    } catch (error) {
-      console.error('Failed to create audio context:', error);
-      throw error;
-    }
-  }
-  
-  private setupAudioContext(ws: WaveSurferWithBackend) {
-    // Try multiple methods to get audio context from WaveSurfer v7+
-    try {
-      // Method 1: Try standard backend.getAudioContext()
-      this.audioContext = ws.backend?.getAudioContext?.() ?? null;
-      
-      // Method 2: Try accessing audio context directly from backend
-      if (!this.audioContext) {
-        this.audioContext = ws.backend?.ac ?? null;
-      }
-      
-      // Method 3: Try accessing through backend.getAudioContext() without optional chaining
-      if (!this.audioContext) {
-        this.audioContext = ws.backend?.getAudioContext?.() ?? null;
-      }
-      
-      // Method 4: Try accessing through wavesurfer.getAudioContext() if it exists
-      if (!this.audioContext && typeof ws.getAudioContext === 'function') {
-        this.audioContext = ws.getAudioContext() ?? null;
-      }
-      
-      // Method 5: Try accessing through backend.ac directly
-      if (!this.audioContext) {
-        this.audioContext = ws.backend?.ac ?? null;
-      }
-      
-      // Method 6: Try accessing through backend.audioContext
-      if (!this.audioContext) {
-        this.audioContext = ws.backend?.audioContext ?? null;
-      }
-      
-      if (this.audioContext) {
-        console.log('Audio context accessed successfully:', this.audioContext.state);
-      } else {
-        console.warn('Could not access audio context from WaveSurfer - playback may have issues');
-        // Log the wavesurfer structure for debugging
-        console.debug('WaveSurfer structure:', {
-          hasBackend: !!ws.backend,
-          backendType: typeof ws.backend,
-          backendKeys: ws.backend ? Object.keys(ws.backend) : 'no backend',
-          wavesurferKeys: Object.keys(ws)
-        });
-      }
-    } catch (error) {
-      console.error('Error accessing audio context:', error);
-    }
-  }
-
-
-
-  public getAudioContextState(): string | undefined {
-    return this.audioContext?.state;
-  }
-}
-
-export const audioService = AudioService.getInstance();

web/src/stores/playerStore.ts

@@ -1,35 +0,0 @@
-import { create } from "zustand";
-
-interface PlayerState {
-  isPlaying: boolean;
-  currentTime: number;
-  duration: number;
-  currentSongId: string | null;
-  currentBandId: string | null;
-  setPlaying: (isPlaying: boolean) => void;
-  setCurrentTime: (currentTime: number) => void;
-  setDuration: (duration: number) => void;
-  setCurrentSong: (songId: string | null, bandId: string | null) => void;
-  reset: () => void;
-  batchUpdate: (updates: Partial<Omit<PlayerState, 'setPlaying' | 'setCurrentTime' | 'setDuration' | 'setCurrentSong' | 'reset' | 'batchUpdate'>>) => void;
-}
-
-export const usePlayerStore = create<PlayerState>()((set) => ({
-  isPlaying: false,
-  currentTime: 0,
-  duration: 0,
-  currentSongId: null,
-  currentBandId: null,
-  setPlaying: (isPlaying) => set({ isPlaying }),
-  setCurrentTime: (currentTime) => set({ currentTime }),
-  setDuration: (duration) => set({ duration }),
-  setCurrentSong: (songId, bandId) => set({ currentSongId: songId, currentBandId: bandId }),
-  batchUpdate: (updates) => set(updates),
-  reset: () => set({ 
-    isPlaying: false, 
-    currentTime: 0, 
-    duration: 0, 
-    currentSongId: null, 
-    currentBandId: null 
-  })
-}));