angel/mice
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: integrate PostHog for analytics tracking and add PostHogProvider component

Browse Source
This commit is contained in:
angel
2025-06-20 03:07:06 +00:00
committed by GitHub
parent 6d6b1baa62
commit e4b239e230
8 changed files with 152 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/components/AudioPlayer.tsx
View File

@@ -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

50
app/components/PostHogProvider.tsx Normal file
View File

@@ -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>
)
}

25
app/layout.tsx
View File

@@ -5,6 +5,7 @@ import { AudioPlayerProvider } from "./components/AudioPlayerContext";
import { NavidromeProvider } from "./components/NavidromeContext";
import { NavidromeConfigProvider } from "./components/NavidromeConfigContext";
import { ThemeProvider } from "./components/ThemeProvider";
import { PostHogProvider } from "./components/PostHogProvider";
import { Metadata } from "next";
import type { Viewport } from 'next';
import Ihateserverside from './components/ihateserverside';
@@ -75,17 +76,19 @@ export default function Layout({ children }: LayoutProps) {
/>
</head>
<body className={`${geistSans.variable} ${geistMono.variable} antialiased bg-background`}>
<ThemeProvider>
<NavidromeConfigProvider>
<NavidromeProvider>
<AudioPlayerProvider>
<Ihateserverside>
{children}
</Ihateserverside>
</AudioPlayerProvider>
</NavidromeProvider>
</NavidromeConfigProvider>
</ThemeProvider>
<PostHogProvider>
<ThemeProvider>
<NavidromeConfigProvider>
<NavidromeProvider>
<AudioPlayerProvider>
<Ihateserverside>
{children}
</Ihateserverside>
</AudioPlayerProvider>
</NavidromeProvider>
</NavidromeConfigProvider>
</ThemeProvider>
</PostHogProvider>
</body>
</html>
);