feat: add session replay functionality with privacy controls
This commit is contained in:
Usman Baig
275
app/sites/[id]/replays/page.tsx
Normal file
275
app/sites/[id]/replays/page.tsx
Normal file
@@ -0,0 +1,275 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useParams, useRouter } from 'next/navigation'
|
||||
import { getSite, type Site } from '@/lib/api/sites'
|
||||
import { listReplays, formatDuration, type ReplayListItem, type ReplayFilters } from '@/lib/api/replays'
|
||||
import { toast } from 'sonner'
|
||||
import LoadingOverlay from '@/components/LoadingOverlay'
|
||||
|
||||
function formatDate(dateString: string) {
|
||||
const date = new Date(dateString)
|
||||
return date.toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
})
|
||||
}
|
||||
|
||||
function getFlagEmoji(countryCode: string | null) {
|
||||
if (!countryCode || countryCode.length !== 2) return '🌍'
|
||||
const codePoints = countryCode
|
||||
.toUpperCase()
|
||||
.split('')
|
||||
.map(char => 127397 + char.charCodeAt(0))
|
||||
return String.fromCodePoint(...codePoints)
|
||||
}
|
||||
|
||||
function getDeviceEmoji(deviceType: string | null) {
|
||||
switch (deviceType?.toLowerCase()) {
|
||||
case 'mobile':
|
||||
return '📱'
|
||||
case 'tablet':
|
||||
return '📱'
|
||||
default:
|
||||
return '💻'
|
||||
}
|
||||
}
|
||||
|
||||
export default function ReplaysPage() {
|
||||
const params = useParams()
|
||||
const router = useRouter()
|
||||
const siteId = params.id as string
|
||||
|
||||
const [site, setSite] = useState<Site | null>(null)
|
||||
const [replays, setReplays] = useState<ReplayListItem[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [total, setTotal] = useState(0)
|
||||
const [filters, setFilters] = useState<ReplayFilters>({
|
||||
limit: 20,
|
||||
offset: 0,
|
||||
})
|
||||
|
||||
// Load site info and replays
|
||||
useEffect(() => {
|
||||
const init = async () => {
|
||||
try {
|
||||
const siteData = await getSite(siteId)
|
||||
setSite(siteData)
|
||||
} catch (error: unknown) {
|
||||
toast.error('Failed to load site')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
init()
|
||||
}, [siteId])
|
||||
|
||||
// Load replays when filters change
|
||||
useEffect(() => {
|
||||
const loadReplays = async () => {
|
||||
try {
|
||||
const response = await listReplays(siteId, filters)
|
||||
setReplays(response.replays || [])
|
||||
setTotal(response.total)
|
||||
} catch (error: unknown) {
|
||||
toast.error('Failed to load replays')
|
||||
}
|
||||
}
|
||||
if (site) {
|
||||
loadReplays()
|
||||
}
|
||||
}, [siteId, site, filters])
|
||||
|
||||
const handlePageChange = (newOffset: number) => {
|
||||
setFilters(prev => ({ ...prev, offset: newOffset }))
|
||||
}
|
||||
|
||||
if (loading) return <LoadingOverlay logoSrc="/ciphera_icon_no_margins.png" title="Session Replays" />
|
||||
if (!site) return <div className="p-8">Site not found</div>
|
||||
|
||||
const currentPage = Math.floor((filters.offset || 0) / (filters.limit || 20)) + 1
|
||||
const totalPages = Math.ceil(total / (filters.limit || 20))
|
||||
|
||||
return (
|
||||
<div className="w-full max-w-7xl mx-auto px-4 sm:px-6 py-8">
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<button
|
||||
onClick={() => router.push(`/sites/${siteId}`)}
|
||||
className="text-sm text-neutral-500 hover:text-neutral-900 dark:hover:text-white transition-colors"
|
||||
>
|
||||
← Back to Dashboard
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-2xl font-bold text-neutral-900 dark:text-white flex items-center gap-3">
|
||||
Session Replays
|
||||
<span className="text-lg font-normal text-neutral-500">
|
||||
{total} recordings
|
||||
</span>
|
||||
</h1>
|
||||
{site.replay_mode === 'disabled' && (
|
||||
<div className="flex items-center gap-2 text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 px-3 py-1.5 rounded-lg text-sm">
|
||||
<span>⚠️</span>
|
||||
<span>Session replay is disabled</span>
|
||||
<button
|
||||
onClick={() => router.push(`/sites/${siteId}/settings`)}
|
||||
className="underline hover:no-underline"
|
||||
>
|
||||
Enable in settings
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="mb-6 flex gap-4 flex-wrap">
|
||||
<select
|
||||
className="px-3 py-2 border border-neutral-200 dark:border-neutral-700 rounded-lg bg-white dark:bg-neutral-800 text-sm"
|
||||
value={filters.device_type || ''}
|
||||
onChange={(e) => setFilters(prev => ({ ...prev, device_type: e.target.value || undefined, offset: 0 }))}
|
||||
>
|
||||
<option value="">All Devices</option>
|
||||
<option value="desktop">Desktop</option>
|
||||
<option value="mobile">Mobile</option>
|
||||
<option value="tablet">Tablet</option>
|
||||
</select>
|
||||
|
||||
<select
|
||||
className="px-3 py-2 border border-neutral-200 dark:border-neutral-700 rounded-lg bg-white dark:bg-neutral-800 text-sm"
|
||||
value={filters.min_duration || ''}
|
||||
onChange={(e) => setFilters(prev => ({ ...prev, min_duration: e.target.value ? parseInt(e.target.value) : undefined, offset: 0 }))}
|
||||
>
|
||||
<option value="">Any Duration</option>
|
||||
<option value="5000">5s+</option>
|
||||
<option value="30000">30s+</option>
|
||||
<option value="60000">1m+</option>
|
||||
<option value="300000">5m+</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Replays List */}
|
||||
<div className="border border-neutral-200 dark:border-neutral-800 rounded-xl overflow-hidden bg-white dark:bg-neutral-900">
|
||||
{replays.length === 0 ? (
|
||||
<div className="p-12 text-center text-neutral-500">
|
||||
<div className="text-4xl mb-4">🎬</div>
|
||||
<p className="text-lg font-medium mb-2">No session replays yet</p>
|
||||
<p className="text-sm">
|
||||
{site.replay_mode === 'disabled'
|
||||
? 'Enable session replay in settings to start recording visitor sessions.'
|
||||
: 'Recordings will appear here once visitors start interacting with your site.'}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800/50">
|
||||
<th className="text-left px-4 py-3 text-sm font-semibold text-neutral-600 dark:text-neutral-400">Session</th>
|
||||
<th className="text-left px-4 py-3 text-sm font-semibold text-neutral-600 dark:text-neutral-400">Entry Page</th>
|
||||
<th className="text-left px-4 py-3 text-sm font-semibold text-neutral-600 dark:text-neutral-400">Duration</th>
|
||||
<th className="text-left px-4 py-3 text-sm font-semibold text-neutral-600 dark:text-neutral-400">Device</th>
|
||||
<th className="text-left px-4 py-3 text-sm font-semibold text-neutral-600 dark:text-neutral-400">Location</th>
|
||||
<th className="text-left px-4 py-3 text-sm font-semibold text-neutral-600 dark:text-neutral-400">Date</th>
|
||||
<th className="text-right px-4 py-3 text-sm font-semibold text-neutral-600 dark:text-neutral-400">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-neutral-100 dark:divide-neutral-800">
|
||||
{replays.map((replay) => (
|
||||
<tr
|
||||
key={replay.id}
|
||||
className="hover:bg-neutral-50 dark:hover:bg-neutral-800/50 transition-colors cursor-pointer"
|
||||
onClick={() => router.push(`/sites/${siteId}/replays/${replay.id}`)}
|
||||
>
|
||||
<td className="px-4 py-4">
|
||||
<div className="flex items-center gap-2">
|
||||
{replay.is_skeleton_mode && (
|
||||
<span className="text-xs bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 px-1.5 py-0.5 rounded">
|
||||
Skeleton
|
||||
</span>
|
||||
)}
|
||||
<span className="font-mono text-sm text-neutral-500">
|
||||
{replay.session_id.substring(0, 8)}...
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-4">
|
||||
<span className="text-sm text-neutral-900 dark:text-white truncate block max-w-[200px]" title={replay.entry_page}>
|
||||
{replay.entry_page}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-4">
|
||||
<span className="text-sm text-neutral-600 dark:text-neutral-400">
|
||||
{formatDuration(replay.duration_ms)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-4">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<span>{getDeviceEmoji(replay.device_type)}</span>
|
||||
<span className="text-neutral-600 dark:text-neutral-400">
|
||||
{replay.browser || 'Unknown'}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-4">
|
||||
<span className="text-sm">
|
||||
{getFlagEmoji(replay.country)} {replay.country || 'Unknown'}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-4">
|
||||
<span className="text-sm text-neutral-500">
|
||||
{formatDate(replay.started_at)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-4 text-right">
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
router.push(`/sites/${siteId}/replays/${replay.id}`)
|
||||
}}
|
||||
className="text-sm text-brand-orange hover:underline"
|
||||
>
|
||||
Watch →
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{/* Pagination */}
|
||||
{totalPages > 1 && (
|
||||
<div className="flex items-center justify-between px-4 py-3 border-t border-neutral-200 dark:border-neutral-800">
|
||||
<span className="text-sm text-neutral-500">
|
||||
Showing {(filters.offset || 0) + 1} - {Math.min((filters.offset || 0) + (filters.limit || 20), total)} of {total}
|
||||
</span>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => handlePageChange((filters.offset || 0) - (filters.limit || 20))}
|
||||
disabled={currentPage === 1}
|
||||
className="px-3 py-1 text-sm border border-neutral-200 dark:border-neutral-700 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed hover:bg-neutral-50 dark:hover:bg-neutral-800"
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
<span className="px-3 py-1 text-sm text-neutral-500">
|
||||
Page {currentPage} of {totalPages}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => handlePageChange((filters.offset || 0) + (filters.limit || 20))}
|
||||
disabled={currentPage === totalPages}
|
||||
className="px-3 py-1 text-sm border border-neutral-200 dark:border-neutral-700 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed hover:bg-neutral-50 dark:hover:bg-neutral-800"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user