Initial release v1.0.0

frontend/components/providers/AudioErrorBoundary.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import React, { Component, ReactNode } from "react";
+
+interface Props {
+    children: ReactNode;
+    fallback?: ReactNode;
+}
+
+interface State {
+    hasError: boolean;
+    error: Error | null;
+}
+
+/**
+ * Error boundary specifically for audio-related errors.
+ * Catches errors in the audio provider hierarchy and allows the rest of the app to continue.
+ * Falls through gracefully without breaking the entire application.
+ */
+export class AudioErrorBoundary extends Component<Props, State> {
+    constructor(props: Props) {
+        super(props);
+        this.state = { hasError: false, error: null };
+    }
+
+    static getDerivedStateFromError(error: Error): State {
+        // Update state so the next render will show the fallback UI
+        return { hasError: true, error };
+    }
+
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+        // Log the error for debugging
+        console.error("[AudioErrorBoundary] Audio system error:", error);
+        console.error("[AudioErrorBoundary] Component stack:", errorInfo.componentStack);
+    }
+
+    render() {
+        if (this.state.hasError) {
+            // If there's a custom fallback, use it
+            if (this.props.fallback) {
+                return this.props.fallback;
+            }
+            
+            // Otherwise, render children without audio functionality
+            // This allows the app to continue working, just without audio
+            return this.props.children;
+        }
+
+        return this.props.children;
+    }
+}
+

frontend/components/providers/ConditionalAudioProvider.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import { AudioStateProvider } from "@/lib/audio-state-context";
+import { AudioPlaybackProvider } from "@/lib/audio-playback-context";
+import { AudioControlsProvider } from "@/lib/audio-controls-context";
+import { useAuth } from "@/lib/auth-context";
+import { HowlerAudioElement } from "@/components/player/HowlerAudioElement";
+import { AudioErrorBoundary } from "@/components/providers/AudioErrorBoundary";
+
+export function ConditionalAudioProvider({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    const pathname = usePathname();
+    const { isAuthenticated } = useAuth();
+
+    // Don't load audio provider on public pages or when not authenticated
+    const publicPages = ["/login", "/register", "/onboarding", "/setup"];
+    const isPublicPage = publicPages.includes(pathname);
+
+    if (isPublicPage || !isAuthenticated) {
+        return <>{children}</>;
+    }
+
+    // Split contexts: State -> Playback -> Controls
+    // This prevents re-renders from currentTime updates affecting all consumers
+    // Wrapped in error boundary to prevent audio errors from crashing the app
+    return (
+        <AudioErrorBoundary>
+            <AudioStateProvider>
+                <AudioPlaybackProvider>
+                    <AudioControlsProvider>
+                        {/* HowlerAudioElement handles both web and native platforms */}
+                        <HowlerAudioElement />
+                        {children}
+                    </AudioControlsProvider>
+                </AudioPlaybackProvider>
+            </AudioStateProvider>
+        </AudioErrorBoundary>
+    );
+}