feat: integrate PostHog for analytics tracking and add PostHogProvider component

app/components/AudioPlayer.tsx

@@ -10,9 +10,10 @@ import { Progress } from '@/components/ui/progress';
 import { useToast } from '@/hooks/use-toast';
 
 export const AudioPlayer: React.FC = () => {
-  const { currentTrack, playPreviousTrack, addToQueue, playNextTrack, clearQueue } = useAudioPlayer();
+  const { currentTrack, playPreviousTrack, addToQueue, playNextTrack, clearQueue, queue } = useAudioPlayer();
   const router = useRouter();
   const audioRef = useRef<HTMLAudioElement>(null);
+  const preloadAudioRef = useRef<HTMLAudioElement>(null);
   const [progress, setProgress] = useState(0);
   const [isPlaying, setIsPlaying] = useState(false);
   const [showVolumeSlider, setShowVolumeSlider] = useState(false);
@@ -324,6 +325,7 @@ export const AudioPlayer: React.FC = () => {
           </div>
         </div>
         <audio ref={audioRef} hidden />
+        <audio ref={preloadAudioRef} hidden preload="metadata" />
       </div>
     );
   }
@@ -377,6 +379,7 @@ export const AudioPlayer: React.FC = () => {
         </div>
       </div>
       <audio ref={audioRef} hidden />
+      <audio ref={preloadAudioRef} hidden preload="metadata" />
       
       {/* Full Screen Player */}
       <FullScreenPlayer 

app/components/PostHogProvider.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import posthog from "posthog-js"
+import { PostHogProvider as PHProvider, usePostHog } from "posthog-js/react"
+import { Suspense, useEffect } from "react"
+import { usePathname, useSearchParams } from "next/navigation"
+
+function PathnameTracker() {
+  const posthogClient = usePostHog()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+
+  useEffect(() => {
+    if (posthogClient) {
+      posthogClient.capture('$pageview', {
+        path: pathname + (searchParams.toString() ? `?${searchParams.toString()}` : ''),
+      })
+    }
+  }, [posthogClient, pathname, searchParams])
+
+  return null
+}
+
+function SuspendedPostHogPageView() {
+  return (
+    <Suspense fallback={null}>
+      <PathnameTracker />
+    </Suspense>
+  )
+}
+
+export function PostHogProvider({ children }: { children: React.ReactNode }) {
+  useEffect(() => {
+    posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
+      api_host: "/ingest",
+      ui_host: "https://us.posthog.com",
+      capture_pageview: 'history_change',
+      capture_pageleave: true,
+      capture_exceptions: true,
+      debug: process.env.NODE_ENV === "development",
+    })
+  }, [])
+
+  return (
+    <PHProvider client={posthog}>
+      <SuspendedPostHogPageView />
+      {children}
+    </PHProvider>
+  )
+}