Merge pull request #274 from jamiepine/feat/landing-page-redesign

Landing page v0.2.0 redesign

Author: jamiepine

app/src/components/AudioPlayer/AudioPlayer.tsx

@@ -139,7 +139,11 @@ export function AudioPlayer() {
           barRadius: 2,
           height: 80,
           normalize: true,
-          backend: 'WebAudio',
+          // Use MediaElement backend (default). Unlike the WebAudio backend,
+          // MediaElement uses a standard <audio> element for playback which
+          // benefits from the browser/webview's built-in audio session recovery.
+          // This prevents audio loss when another app steals audio output or
+          // the system audio session is interrupted.
           interact: true, // Enable interaction (click to seek)
           mediaControls: false, // Don't show native controls
         });
@@ -189,15 +193,6 @@ export function AudioPlayer() {
         const currentVolume = usePlayerStore.getState().volume;
         wavesurfer.setVolume(currentVolume);
 
-        // Get the underlying audio element and ensure it's not muted
-        // (unless we're using native playback, which will be set later)
-        const mediaElement = wavesurfer.getMediaElement();
-        if (mediaElement && !isUsingNativePlaybackRef.current) {
-          mediaElement.volume = currentVolume;
-          mediaElement.muted = false;
-          debug.log('Audio element volume:', mediaElement.volume, 'muted:', mediaElement.muted);
-        }
-
         // Auto-play when ready - check if we should use native playback
         // Get current values from the store and queries at runtime (not captured closure values)
         const currentAudioUrl = usePlayerStore.getState().audioUrl;
@@ -264,21 +259,8 @@ export function AudioPlayer() {
             debug.log('Should use native playback:', shouldUseNative);
 
             if (!shouldUseNative) {
-              debug.log('No custom devices assigned, falling back to WaveSurfer');
-              // Reset native playback flag and unmute WaveSurfer
+              debug.log('No custom devices assigned, using standard playback');
               isUsingNativePlaybackRef.current = false;
-              const mediaElement = wavesurfer.getMediaElement();
-              if (mediaElement) {
-                const currentVolume = usePlayerStore.getState().volume;
-                mediaElement.volume = currentVolume;
-                mediaElement.muted = false;
-                debug.log(
-                  'WaveSurfer unmuted for normal playback - volume:',
-                  mediaElement.volume,
-                  'muted:',
-                  mediaElement.muted,
-                );
-              }
             } else {
               const deviceIds = assignedChannels.flatMap((ch: any) => ch.device_ids);
               debug.log('Device IDs to play to:', deviceIds);
@@ -299,19 +281,10 @@ export function AudioPlayer() {
                   // Mark that we're using native playback
                   isUsingNativePlaybackRef.current = true;
 
-                  // Mute WaveSurfer's audio element to prevent UI audio output
-                  // Keep WaveSurfer running for visualization
-                  const mediaElement = wavesurfer.getMediaElement();
-                  if (mediaElement) {
-                    mediaElement.volume = 0;
-                    mediaElement.muted = true;
-                    debug.log(
-                      'WaveSurfer muted for native playback - volume:',
-                      mediaElement.volume,
-                      'muted:',
-                      mediaElement.muted,
-                    );
-                  }
+                  // Mute WaveSurfer's audio output — native handles the actual sound
+                  // Keep WaveSurfer running for waveform visualization
+                  wavesurfer.setVolume(0);
+                  wavesurfer.setMuted(true);
 
                   // Start WaveSurfer playback for visualization (muted)
                   wavesurfer.play().catch((error) => {
@@ -334,38 +307,15 @@ export function AudioPlayer() {
               'Native playback failed during auto-play, falling back to WaveSurfer:',
               error,
             );
-            // Reset native playback flag and unmute WaveSurfer
             isUsingNativePlaybackRef.current = false;
-            const mediaElement = wavesurfer.getMediaElement();
-            if (mediaElement) {
-              const currentVolume = usePlayerStore.getState().volume;
-              mediaElement.volume = currentVolume;
-              mediaElement.muted = false;
-              debug.log(
-                'WaveSurfer unmuted after native playback failure - volume:',
-                mediaElement.volume,
-                'muted:',
-                mediaElement.muted,
-              );
-            }
             // Fall through to WaveSurfer playback
           }
-        } else {
-          debug.log('Not using native playback, using WaveSurfer');
-          // Reset native playback flag and unmute WaveSurfer
-          isUsingNativePlaybackRef.current = false;
-          const mediaElement = wavesurfer.getMediaElement();
-          if (mediaElement) {
-            const currentVolume = usePlayerStore.getState().volume;
-            mediaElement.volume = currentVolume;
-            mediaElement.muted = false;
-            debug.log(
-              'WaveSurfer unmuted for normal playback - volume:',
-              mediaElement.volume,
-              'muted:',
-              mediaElement.muted,
-            );
-          }
+        }
+
+        // Standard playback path — ensure WaveSurfer is unmuted
+        if (!isUsingNativePlaybackRef.current) {
+          wavesurfer.setMuted(false);
+          wavesurfer.setVolume(usePlayerStore.getState().volume);
         }
 
         // Only auto-play if shouldAutoPlay flag is set (user explicitly clicked to play)
@@ -389,28 +339,6 @@ export function AudioPlayer() {
       // Handle play/pause
       wavesurfer.on('play', () => {
         setIsPlaying(true);
-        // Ensure audio element volume is set correctly
-        const mediaElement = wavesurfer.getMediaElement();
-        if (mediaElement) {
-          // Double-check: if using native playback, keep WaveSurfer muted
-          // Otherwise, ensure it's unmuted
-          if (isUsingNativePlaybackRef.current) {
-            mediaElement.volume = 0;
-            mediaElement.muted = true;
-            debug.log('Playing (native mode) - WaveSurfer muted for visualization only');
-          } else {
-            // Ensure WaveSurfer is unmuted for normal playback
-            const currentVolume = usePlayerStore.getState().volume;
-            mediaElement.volume = currentVolume;
-            mediaElement.muted = false;
-            debug.log(
-              'Playing (normal mode) - volume:',
-              mediaElement.volume,
-              'muted:',
-              mediaElement.muted,
-            );
-          }
-        }
       });
       wavesurfer.on('pause', () => setIsPlaying(false));
       wavesurfer.on('finish', () => {
@@ -492,11 +420,6 @@ export function AudioPlayer() {
       if (wavesurferRef.current) {
         debug.log('Destroying WaveSurfer instance');
         try {
-          const mediaElement = wavesurferRef.current.getMediaElement();
-          if (mediaElement) {
-            mediaElement.pause();
-            mediaElement.src = '';
-          }
           wavesurferRef.current.destroy();
         } catch (error) {
           debug.error('Error destroying WaveSurfer:', error);
@@ -537,13 +460,10 @@ export function AudioPlayer() {
     }
 
     // Reset native playback flag when loading new audio
-    // Also unmute WaveSurfer if it was muted
+    // Unmute WaveSurfer if it was muted for native playback
     if (isUsingNativePlaybackRef.current) {
-      const mediaElement = wavesurfer.getMediaElement();
-      if (mediaElement) {
-        mediaElement.muted = false;
-        mediaElement.volume = usePlayerStore.getState().volume;
-      }
+      wavesurfer.setMuted(false);
+      wavesurfer.setVolume(usePlayerStore.getState().volume);
     }
     isUsingNativePlaybackRef.current = false;
 
@@ -559,16 +479,7 @@ export function AudioPlayer() {
         wavesurfer.pause();
       }
 
-      // Stop the media element explicitly
-      const mediaElement = wavesurfer.getMediaElement();
-      if (mediaElement) {
-        debug.log('Stopping media element');
-        mediaElement.pause();
-        mediaElement.currentTime = 0;
-        mediaElement.src = '';
-      }
-
-      // Use empty() to completely destroy the waveform and media element
+      // Use empty() to completely destroy the waveform and reset media
       debug.log('Calling wavesurfer.empty() to destroy audio');
       wavesurfer.empty();
     } catch (error) {
@@ -623,20 +534,13 @@ export function AudioPlayer() {
   // Sync volume
   useEffect(() => {
     if (wavesurferRef.current) {
-      wavesurferRef.current.setVolume(volume);
-      // Also ensure the underlying audio element volume is set
-      const mediaElement = wavesurferRef.current.getMediaElement();
-      if (mediaElement) {
-        // If using native playback, keep WaveSurfer muted regardless of volume setting
-        if (isUsingNativePlaybackRef.current) {
-          mediaElement.volume = 0;
-          mediaElement.muted = true;
-          debug.log('Volume sync: Using native playback, keeping WaveSurfer muted');
-        } else {
-          mediaElement.volume = volume;
-          mediaElement.muted = volume === 0;
-          debug.log('Volume synced:', volume, 'muted:', mediaElement.muted);
-        }
+      // If using native playback, keep WaveSurfer muted regardless of volume setting
+      if (isUsingNativePlaybackRef.current) {
+        wavesurferRef.current.setVolume(0);
+        debug.log('Volume sync: Using native playback, keeping WaveSurfer muted');
+      } else {
+        wavesurferRef.current.setVolume(volume);
+        debug.log('Volume synced:', volume);
       }
     }
   }, [volume]);
@@ -757,11 +661,8 @@ export function AudioPlayer() {
           isUsingNativePlaybackRef.current = true;
 
           // Mute WaveSurfer and start it for visualization
-          const mediaElement = wavesurferRef.current.getMediaElement();
-          if (mediaElement) {
-            mediaElement.volume = 0;
-            mediaElement.muted = true;
-          }
+          wavesurferRef.current.setVolume(0);
+          wavesurferRef.current.setMuted(true);
 
           // Start WaveSurfer for visualization (muted)
           wavesurferRef.current.play().catch((error) => {
@@ -785,11 +686,8 @@ export function AudioPlayer() {
     } else {
       // Ensure WaveSurfer is not muted if not using native playback
       if (!isUsingNativePlaybackRef.current) {
-        const mediaElement = wavesurferRef.current.getMediaElement();
-        if (mediaElement) {
-          mediaElement.muted = false;
-          mediaElement.volume = volume;
-        }
+        wavesurferRef.current.setMuted(false);
+        wavesurferRef.current.setVolume(volume);
       }
 
       wavesurferRef.current.play().catch((error) => {

app/src/components/EffectsTab/EffectsDetail.tsx

@@ -5,6 +5,14 @@ import { useEffect, useRef, useState } from 'react';
 import { EffectsChainEditor } from '@/components/Effects/EffectsChainEditor';
 import { GenerationPicker } from '@/components/Effects/GenerationPicker';
 import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Separator } from '@/components/ui/separator';
@@ -29,6 +37,11 @@ export function EffectsDetail() {
   const [saving, setSaving] = useState(false);
   const [deleting, setDeleting] = useState(false);
 
+  // "Save as Custom" dialog state
+  const [saveAsDialogOpen, setSaveAsDialogOpen] = useState(false);
+  const [saveAsName, setSaveAsName] = useState('');
+  const [saveAsDescription, setSaveAsDescription] = useState('');
+
   // Preview state
   const [previewGenId, setPreviewGenId] = useState<string | null>(null);
   const [previewLoading, setPreviewLoading] = useState(false);
@@ -165,8 +178,38 @@ export function EffectsDetail() {
     }
   }
 
-  async function handleSaveAsNew() {
-    await handleSaveNew();
+  function handleSaveAsNew() {
+    // Open the dialog with a suggested name based on the current preset
+    setSaveAsName(`${name} (Copy)`);
+    setSaveAsDescription(description);
+    setSaveAsDialogOpen(true);
+  }
+
+  async function handleSaveAsConfirm() {
+    if (!saveAsName.trim()) {
+      toast({ title: 'Name required', variant: 'destructive' });
+      return;
+    }
+    setSaving(true);
+    try {
+      const created = await apiClient.createEffectPreset({
+        name: saveAsName.trim(),
+        description: saveAsDescription.trim() || undefined,
+        effects_chain: workingChain,
+      });
+      queryClient.invalidateQueries({ queryKey: ['effect-presets'] });
+      setSaveAsDialogOpen(false);
+      setSelectedPresetId(created.id);
+      toast({ title: 'Preset saved', description: `"${created.name}" has been created.` });
+    } catch (error) {
+      toast({
+        title: 'Failed to save',
+        description: error instanceof Error ? error.message : 'Unknown error',
+        variant: 'destructive',
+      });
+    } finally {
+      setSaving(false);
+    }
   }
 
   async function handleDelete() {
@@ -327,6 +370,53 @@ export function EffectsDetail() {
           </p>
         </div>
       </div>
+
+      {/* Save as Custom dialog */}
+      <Dialog open={saveAsDialogOpen} onOpenChange={setSaveAsDialogOpen}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Save as Custom Preset</DialogTitle>
+            <DialogDescription>
+              Create a new custom preset based on the current effects chain.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3 py-2">
+            <div className="space-y-1.5">
+              <Label className="text-xs">Name</Label>
+              <Input
+                value={saveAsName}
+                onChange={(e) => setSaveAsName(e.target.value)}
+                placeholder="My preset..."
+                className="h-9"
+                autoFocus
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' && saveAsName.trim()) {
+                    handleSaveAsConfirm();
+                  }
+                }}
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs">Description</Label>
+              <Textarea
+                value={saveAsDescription}
+                onChange={(e) => setSaveAsDescription(e.target.value)}
+                placeholder="Describe what this preset does..."
+                className="min-h-[60px] resize-none"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setSaveAsDialogOpen(false)} disabled={saving}>
+              Cancel
+            </Button>
+            <Button onClick={handleSaveAsConfirm} disabled={saving || !saveAsName.trim()}>
+              <Save className="h-3.5 w-3.5 mr-1.5" />
+              {saving ? 'Saving...' : 'Save'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }